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 {
Button,
Card,
Image,
Input,
InputNumber,
Modal,
@ -320,6 +319,11 @@ function formatNumber(value: number | string | undefined) {
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) {
recordQuery.cursor = page;
recordQuery.limit = pageSize;
@ -471,7 +475,12 @@ watch(
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'room'">
<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">
<Button type="link" @click="openRoomDetails(record.roomId)">
{{ record.roomName || '-' }}
@ -526,7 +535,12 @@ watch(
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'room'">
<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">
<Button type="link" @click="openRoomDetails(record.roomId)">
{{ record.roomName || '-' }}
@ -608,9 +622,23 @@ watch(
}
.room-cover {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border-radius: 8px;
height: 48px;
width: 48px;
flex: 0 0 40px;
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 {