From 352eef9e12b4c5c93ecce0f86956cb177c3af212 Mon Sep 17 00:00:00 2001
From: yml2213 <a2213290201@gmail.com>
Date: Sun, 13 Sep 2026 10:27:24 +0800
Subject: [PATCH] =?UTF-8?q?fix(admin):=20=E6=B5=81=E7=A8=8B=E6=97=B6?=
 =?UTF-8?q?=E9=97=B4=E7=BA=BF=E9=99=84=E4=BB=B6=E5=9B=BE=E7=89=87=E6=94=B9?=
 =?UTF-8?q?=E7=94=A8=20AuthImage=20=E6=94=AF=E6=8C=81=E9=89=B4=E6=9D=83?=
 =?UTF-8?q?=E5=8A=A0=E8=BD=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../admin/components/ProcessTimeline.vue      | 47 +++++++++++++++++--
 1 file changed, 42 insertions(+), 5 deletions(-)

diff --git a/frontend/src/features/admin/components/ProcessTimeline.vue b/frontend/src/features/admin/components/ProcessTimeline.vue
index 4ea56d5..f06222d 100644
--- a/frontend/src/features/admin/components/ProcessTimeline.vue
+++ b/frontend/src/features/admin/components/ProcessTimeline.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import AuthImage from '@/shared/components/business/AuthImage.vue'
 import { formatCentWithSymbol } from '@/shared/utils/money'
 import { formatDateTime } from '@/shared/utils/time'
 
@@ -535,13 +536,17 @@ function hasMore(item: ProcessTimelineEvent) {
       </details>
 
       <div v-if="item.attachment_urls?.length" class="process-attachments">
-        <el-image
-          v-for="url in item.attachment_urls"
+        <AuthImage
+          v-for="(url, idx) in item.attachment_urls"
           :key="url"
-          :src="url"
+          :source="url"
           :preview-src-list="item.attachment_urls"
+          :preview-initial-index="idx"
           preview-teleported
           fit="cover"
+          admin
+          image-class="attachment-img"
+          fallback-class="attachment-fallback"
         />
       </div>
     </article>
@@ -1111,11 +1116,43 @@ function hasMore(item: ProcessTimelineEvent) {
   margin-top: 10px;
 }
 
-.process-attachments :deep(.el-image) {
+.process-attachments :deep(.attachment-img),
+.process-attachments :deep(.el-image),
+.process-attachments :deep(img) {
   width: 76px;
   height: 76px;
   border: 1px solid #e2e8f0;
-  border-radius: 6px;
+  border-radius: 8px;
+  object-fit: cover;
+  cursor: pointer;
+  transition:
+    transform 0.15s ease,
+    box-shadow 0.15s ease;
+}
+
+.process-attachments :deep(.attachment-img:hover),
+.process-attachments :deep(.el-image:hover),
+.process-attachments :deep(img:hover) {
+  transform: scale(1.04);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  border-color: #cbd5e1;
+}
+
+.process-attachments :deep(.attachment-fallback),
+.process-attachments :deep(.auth-image-fallback) {
+  width: 76px;
+  height: 76px;
+  min-height: 76px;
+  padding: 4px;
+  border-radius: 8px;
+  font-size: 11px;
+  text-align: center;
+  border: 1px dashed #d8dee8;
+  background: #f8fafc;
+  color: #94a3b8;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 @media (max-width: 700px) {