From 584a51c7910e9f446cdb474122785327771ee2a5 Mon Sep 17 00:00:00 2001
From: z <hy@zdeMacBook-Air.local>
Date: Mon, 4 May 2026 00:38:55 +0800
Subject: [PATCH] fix: constrain room turnover avatars

---
 .../room-turnover-reward.vue                  | 38 ++++++++++++++++---
 1 file changed, 33 insertions(+), 5 deletions(-)

diff --git a/apps/src/views/resident-activity/room-turnover-reward.vue b/apps/src/views/resident-activity/room-turnover-reward.vue
index 57d1ab7..7779684 100644
--- a/apps/src/views/resident-activity/room-turnover-reward.vue
+++ b/apps/src/views/resident-activity/room-turnover-reward.vue
@@ -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 {