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

@@ -1,5 +1,6 @@
 import { defineComponent } from 'vue';
 import { Modal, Descriptions, Image, Table, Pagination, Space } from 'ant-design-vue';
+import { EyeOutlined } from '@ant-design/icons-vue';
 import styles from './EventDetailModal.module.less';
 
 interface EventDetailModalProps {
@@ -72,6 +73,17 @@ const MOCK_GROUPS = [
 // 假分组数据
 const MOCK_DIVISIONS = ['分组1:男子小组1（循环赛）', '分组2:女子小组1（淘汰赛）'];
 
+const renderIdImage = (src: string) => (
+  <Image
+    width={48}
+    height={32}
+    src={src}
+    v-slots={{
+      previewMask: () => <EyeOutlined />,
+    }}
+  />
+);
+
 const PLAYER_COLUMNS = [
   { title: '选手', dataIndex: 'name', key: 'name', width: 100 },
   { title: '性别', dataIndex: 'gender', key: 'gender', width: 80 },
@@ -84,8 +96,8 @@ const PLAYER_COLUMNS = [
     width: 180,
     customRender: () => (
       <Space>
-        <Image width={48} height={32} src="https://picsum.photos/seed/idimg1/96/64" />
-        <Image width={48} height={32} src="https://picsum.photos/seed/idimg2/96/64" />
+        {renderIdImage('https://picsum.photos/seed/idimg1/96/64')}
+        {renderIdImage('https://picsum.photos/seed/idimg2/96/64')}
       </Space>
     ),
   },

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

@@ -180,7 +180,6 @@ export function useEventListModel() {
       dataIndex: 'status',
       key: 'status',
       width: 90,
-      align: 'center' as const,
       customRender: ({ text }: { text: string }) => {
         const info = STATUS_MAP[text] || { label: text, tone: 'default' as const };
         return h(StatusTag, { label: info.label, tone: info.tone });

src/pages/events/orders/model/useOrderModel.ts

@@ -263,7 +263,6 @@ export function useOrderModel() {
       dataIndex: 'orderStatus',
       key: 'orderStatus',
       width: 100,
-      align: 'center' as const,
       customRender: ({ text }: { text: string }) => {
         const info = ORDER_STATUS_MAP[text] || { label: text || '-', tone: 'default' as const };
         return h(StatusTag, { label: info.label, tone: info.tone });

src/types/yp-component.d.ts

@@ -0,0 +1 @@
+declare module '@yp-component/root';