src/pages/events/list/components/EventDetailModal.tsx

@@ -1,6 +1,7 @@
 import { defineComponent, computed, reactive, ref } from 'vue';
 import { Modal, Descriptions, Image, Table, Pagination, Spin, Space } from 'ant-design-vue';
 import { message } from 'ant-design-vue';
+import { EyeOutlined } from '@ant-design/icons-vue';
 import {
   getEventDetail,
   getSignupList,
@@ -43,6 +44,7 @@ const renderIdImages = (imgList: string[], singleImg: string) => {
           width={40}
           height={40}
           style={{ objectFit: 'cover', borderRadius: '4px', cursor: 'pointer' }}
+          previewMask={() => <EyeOutlined />}
         />
       ))}
     </Space>

src/pages/events/list/model/useEventListModel.ts

@@ -145,8 +145,8 @@ export function useEventListModel() {
     const isRemoved = record.status === '4';
     const actionText = isRemoved ? '上架' : '下架';
     const descText = isRemoved
-      ? `确认上架"${record.name}"吗？上架后用户可搜索和报名该赛事。`
-      : `确认下架"${record.name}"吗？下架后用户将无法搜索和报名该赛事。`;
+      ? `确认上架"${record.name}"该赛事吗？`
+      : `确认下架"${record.name}"吗？下架后用户将无法搜索和报名该赛事，已有报名和订单不受影响。`;
 
     Modal.confirm({
       title: `${actionText}确认`,

src/pages/events/orders/components/OrderDetailModal.tsx

@@ -1,5 +1,6 @@
 import { defineComponent, computed } from 'vue';
 import { Modal, Table, Button, Pagination, Image, Space, Spin } from 'ant-design-vue';
+import { EyeOutlined } from '@ant-design/icons-vue';
 import { StatusTag, type StatusTagTone } from '@/components';
 import { useState, useEffect } from '@/hooks';
 import {
@@ -66,7 +67,14 @@ const PLAYER_COLUMNS = [
       return (
         <Space>
           {urls.map((src) => (
-            <Image key={src} width={60} height={40} src={src} />
+            <Image
+              key={src}
+              width={60}
+              height={40}
+              src={src}
+              style={{ objectFit: 'cover', borderRadius: '4px', cursor: 'pointer' }}
+              previewMask={() => <EyeOutlined />}
+            />
           ))}
         </Space>
       );