fix: constrain room turnover avatars
This commit is contained in:
parent
c5480cdf06
commit
584a51c791
@ -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 {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user