From a5f7c86a4b19207ee7850a95cfb82a9969656e61 Mon Sep 17 00:00:00 2001
From: stefanfeng <stefan@autopas.cn>
Date: Fri, 7 Aug 2026 14:04:45 +0800
Subject: [PATCH] fix: avatar list table full-width and image fallback

- Changed fixed width columns to min-width for elastic layout
- Add @error handler on el-avatar to hide broken images and show emoji
- Detail dialog avatar also handles image load errors
---
 frontend/src/views/Avatars.vue | 21 ++++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/frontend/src/views/Avatars.vue b/frontend/src/views/Avatars.vue
index 118a79e..fc2fd00 100644
--- a/frontend/src/views/Avatars.vue
+++ b/frontend/src/views/Avatars.vue
@@ -23,10 +23,13 @@
 
     <!-- Table -->
     <el-table :data="avatars" v-loading="loading" :row-class-name="rowClassName" class="data-table">
-      <el-table-column label="分身" width="240">
+      <el-table-column label="分身" min-width="220">
         <template #default="{ row }">
           <div style="display:flex;align-items:center;gap:10px">
-            <el-avatar :size="40" :src="row.photo_url || ''" style="background:#30363d;flex-shrink:0">
+            <el-avatar v-if="row.photo_url" :size="40" :src="row.photo_url" style="background:#30363d;flex-shrink:0" @error="handleAvatarError">
+              {{ row.emoji || '🤖' }}
+            </el-avatar>
+            <el-avatar v-else :size="40" style="background:#30363d;flex-shrink:0">
               {{ row.emoji || '🤖' }}
             </el-avatar>
             <div>
@@ -36,7 +39,7 @@
           </div>
         </template>
       </el-table-column>
-      <el-table-column label="归属用户" width="160">
+      <el-table-column label="归属用户" min-width="140">
         <template #default="{ row }">
           <span v-if="row.owner_nickname">{{ row.owner_nickname }}</span>
           <span v-else style="color:var(--color-text-muted)">未绑定</span>
@@ -52,7 +55,7 @@
           <span style="font-weight:600">{{ row.token_balance?.toLocaleString() ?? 0 }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="创建时间" width="160">
+      <el-table-column label="创建时间" min-width="160">
         <template #default="{ row }">
           <span style="font-size:12px;color:var(--color-text-muted)">{{ row.created_at ? new Date(row.created_at).toLocaleString('zh-CN',{timeZone:'Asia/Shanghai',hour12:false}) : '--' }}</span>
         </template>
@@ -92,9 +95,12 @@
       <div v-if="detailAvatar" class="detail-panel">
         <!-- Header with avatar -->
         <div class="detail-header">
-          <el-avatar :size="72" :src="detailAvatar.photo_url || ''" style="background:#30363d">
+          <el-avatar v-if="detailAvatar.photo_url" :size="72" :src="detailAvatar.photo_url" style="background:#30363d" @error="handleAvatarError">
             <span style="font-size:32px">{{ detailAvatar.emoji || '🤖' }}</span>
           </el-avatar>
+          <el-avatar v-else :size="72" style="background:#30363d">
+            <span style="font-size:32px">{{ detailAvatar.emoji || '' }}</span>
+          </el-avatar>
           <div style="margin-left:16px">
             <div class="detail-name">{{ detailAvatar.name }}</div>
             <div v-if="detailAvatar.display_name" class="detail-display-name">{{ detailAvatar.display_name }}</div>
@@ -249,6 +255,11 @@ function openDetail(row) {
   detailVisible.value = true
 }
 
+function handleAvatarError(e) {
+  // 图片加载失败时隐藏 img，只保留 emoji fallback
+  e.target.style.display = 'none'
+}
+
 function rowClassName({ rowIndex }) {
   return rowIndex % 2 === 0 ? 'row-dark' : 'row-darker'
 }