From 473c8f84ec739f6c5fd0565dfcd275df3b703ba8 Mon Sep 17 00:00:00 2001
From: sunlei <yemu2333@outlook.com>
Date: Sat, 16 May 2026 13:32:07 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96=E5=8D=A1=E7=89=87?=
 =?UTF-8?q?=E5=B0=81=E9=9D=A2=E9=A2=84=E8=A7=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/chartList/ChartList.vue | 55 ++++++++++++++++++++++++++---
 1 file changed, 50 insertions(+), 5 deletions(-)

diff --git a/src/modules/chartList/ChartList.vue b/src/modules/chartList/ChartList.vue
index d95a954..3ed9201 100644
--- a/src/modules/chartList/ChartList.vue
+++ b/src/modules/chartList/ChartList.vue
@@ -1,5 +1,17 @@
 <script setup lang="ts">
-import { Button, Card, Descriptions, DescriptionsItem, Empty, message, Pagination, Popconfirm, Spin, Tooltip } from "ant-design-vue";
+import {
+  Button,
+  Card,
+  Descriptions,
+  DescriptionsItem,
+  Empty,
+  Image as AImage,
+  message,
+  Pagination,
+  Popconfirm,
+  Spin,
+  Tooltip,
+} from "ant-design-vue";
 import { DeleteOutlined, ShareAltOutlined } from "@ant-design/icons-vue";
 import { onBeforeUnmount, onMounted, reactive } from "vue";
 import dayjs from "dayjs";
@@ -196,8 +208,17 @@ const handleRemove = async (id: string) => {
             </div>
           </template>
           <template #cover>
-            <div class="chart-cover" @click="chartClick(item.id)">
-              <img :src="item.image" class="chart-image" v-if="item.image" />
+            <div
+              class="chart-cover"
+              :class="{ 'is-empty': !item.image }"
+              @click="!item.image && chartClick(item.id)"
+            >
+              <AImage
+                v-if="item.image"
+                :src="item.image"
+                class="chart-image"
+                :preview="true"
+              />
               <Empty v-else class="chart-empty" description="暂无图片" />
             </div>
           </template>
@@ -322,15 +343,39 @@ const handleRemove = async (id: string) => {
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 160px;
+  height: 180px;
+  padding: 10px;
+  box-sizing: border-box;
   border-bottom: 1px solid var(--app-border);
   background: var(--app-cover-bg);
+  cursor: default;
+}
+
+.chart-cover.is-empty {
+  cursor: pointer;
 }
 
 .chart-image {
   width: 100%;
   height: 100%;
-  object-fit: cover;
+}
+
+:deep(.chart-cover .ant-image) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+:deep(.chart-cover .ant-image-img) {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+:deep(.chart-cover .ant-image-mask) {
+  border-radius: 6px;
 }
 
 .chart-empty {