fix: constrain room turnover avatars

This commit is contained in:
z 2026-05-04 00:38:55 +08:00
parent c5480cdf06
commit 584a51c791

View File

@ -16,7 +16,6 @@ import { getAllowedSysOrigins } from '#/views/system/shared';
import { import {
Button, Button,
Card, Card,
Image,
Input, Input,
InputNumber, InputNumber,
Modal, Modal,
@ -320,6 +319,11 @@ function formatNumber(value: number | string | undefined) {
return Number.isFinite(numeric) ? numeric.toLocaleString() : '0'; return Number.isFinite(numeric) ? numeric.toLocaleString() : '0';
} }
function coverBackgroundStyle(url?: string) {
const coverUrl = String(url || '').trim();
return coverUrl ? { backgroundImage: `url(${JSON.stringify(coverUrl)})` } : {};
}
function handleRecordPageChange(page: number, pageSize: number) { function handleRecordPageChange(page: number, pageSize: number) {
recordQuery.cursor = page; recordQuery.cursor = page;
recordQuery.limit = pageSize; recordQuery.limit = pageSize;
@ -471,7 +475,12 @@ watch(
<template #bodyCell="{ column, record }"> <template #bodyCell="{ column, record }">
<template v-if="column.key === 'room'"> <template v-if="column.key === 'room'">
<div class="room-cell"> <div class="room-cell">
<Image :preview="false" :src="record.roomCover" class="room-cover" /> <div
v-if="record.roomCover"
class="room-cover"
:style="coverBackgroundStyle(record.roomCover)"
/>
<div v-else class="room-cover placeholder">R</div>
<div class="room-copy"> <div class="room-copy">
<Button type="link" @click="openRoomDetails(record.roomId)"> <Button type="link" @click="openRoomDetails(record.roomId)">
{{ record.roomName || '-' }} {{ record.roomName || '-' }}
@ -526,7 +535,12 @@ watch(
<template #bodyCell="{ column, record }"> <template #bodyCell="{ column, record }">
<template v-if="column.key === 'room'"> <template v-if="column.key === 'room'">
<div class="room-cell"> <div class="room-cell">
<Image :preview="false" :src="record.roomCover" class="room-cover" /> <div
v-if="record.roomCover"
class="room-cover"
:style="coverBackgroundStyle(record.roomCover)"
/>
<div v-else class="room-cover placeholder">R</div>
<div class="room-copy"> <div class="room-copy">
<Button type="link" @click="openRoomDetails(record.roomId)"> <Button type="link" @click="openRoomDetails(record.roomId)">
{{ record.roomName || '-' }} {{ record.roomName || '-' }}
@ -608,9 +622,23 @@ watch(
} }
.room-cover { .room-cover {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border-radius: 8px; border-radius: 8px;
height: 48px; flex: 0 0 40px;
width: 48px; height: 40px;
width: 40px;
}
.room-cover.placeholder {
align-items: center;
background: rgb(226 232 240);
color: rgb(100 116 139);
display: flex;
font-size: 13px;
font-weight: 600;
justify-content: center;
} }
.room-copy { .room-copy {