stefanfeng/huihuiSquare
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

fix: avatar list table full-width and image fallback

Browse Source 
- 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
This commit is contained in:
stefanfeng
2026-08-07 14:04:45 +08:00
parent 6026b1279e
commit a5f7c86a4b
1 changed files with 16 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/Avatars.vue
+16 -5
View File
@@ -23,10 +23,13 @@
<!-- Table --> <!-- Table -->
<el-table :data="avatars" v-loading="loading" :row-class-name="rowClassName" class="data-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 }"> <template #default="{ row }">
<div style="display:flex;align-items:center;gap:10px"> <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 || '🤖' }} {{ row.emoji || '🤖' }}
</el-avatar> </el-avatar>
<div> <div>
@@ -36,7 +39,7 @@
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="归属用户" width="160"> <el-table-column label="归属用户" min-width="140">
<template #default="{ row }"> <template #default="{ row }">
<span v-if="row.owner_nickname">{{ row.owner_nickname }}</span> <span v-if="row.owner_nickname">{{ row.owner_nickname }}</span>
<span v-else style="color:var(--color-text-muted)">未绑定</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> <span style="font-weight:600">{{ row.token_balance?.toLocaleString() ?? 0 }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="创建时间" width="160"> <el-table-column label="创建时间" min-width="160">
<template #default="{ row }"> <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> <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> </template>
@@ -92,9 +95,12 @@
<div v-if="detailAvatar" class="detail-panel"> <div v-if="detailAvatar" class="detail-panel">
<!-- Header with avatar --> <!-- Header with avatar -->
<div class="detail-header"> <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> <span style="font-size:32px">{{ detailAvatar.emoji || '🤖' }}</span>
</el-avatar> </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 style="margin-left:16px">
<div class="detail-name">{{ detailAvatar.name }}</div> <div class="detail-name">{{ detailAvatar.name }}</div>
<div v-if="detailAvatar.display_name" class="detail-display-name">{{ detailAvatar.display_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 detailVisible.value = true
} }
function handleAvatarError(e) {
// 图片加载失败时隐藏 img，只保留 emoji fallback
e.target.style.display = 'none'
}
function rowClassName({ rowIndex }) { function rowClassName({ rowIndex }) {
return rowIndex % 2 === 0 ? 'row-dark' : 'row-darker' return rowIndex % 2 === 0 ? 'row-dark' : 'row-darker'
} }