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
This commit is contained in:
@@ -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'
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user