From 3ae2fe8d01bc33cd1080b8e81befe21fba721d14 Mon Sep 17 00:00:00 2001
From: Lrd <13001933075@sina.cn>
Date: Thu, 25 Jun 2026 09:57:38 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=B4=A0=E6=9D=90=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E5=88=97=E9=A1=BA=E5=BA=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 video-gen-app/src/pages/MaterialListPage.tsx | 79 ++++++++++++--------
 1 file changed, 49 insertions(+), 30 deletions(-)

diff --git a/video-gen-app/src/pages/MaterialListPage.tsx b/video-gen-app/src/pages/MaterialListPage.tsx
index ee3ad011..e3a033c5 100644
--- a/video-gen-app/src/pages/MaterialListPage.tsx
+++ b/video-gen-app/src/pages/MaterialListPage.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
-import { Button, Table, Tag, Input, Pagination, Typography, Select, App, Image } from 'antd';
-import { FolderOpenOutlined } from '@ant-design/icons';
+import { Button, Table, Tag, Input, Pagination, Typography, Select, App } from 'antd';
+import { FolderOpenOutlined, EyeOutlined } from '@ant-design/icons';
 import { getResourcesMaterialList } from '../api';
 
 // 格式化时间 2026-06-12T03:47:28.542988Z -> 2026-06-12 03:47:28
@@ -164,13 +164,20 @@ const MaterialListPage: React.FC = () => {
     {
       title: '预览',
       key: 'preview',
-      width: 80,
+      width: 100,
       render: (_: unknown, record: MaterialData) => {
-        if (record.resourceType == 'image') {
-          const imageUrl = record.resource?.resourceUrl ? buildUrl(record.resource.resourceUrl) : '';
-          if (imageUrl) {
-            return <Image width={40} height={40} src={imageUrl} style={{ objectFit: 'cover', borderRadius: 4 }} />;
-          }
+        const url = record.resource?.resourceUrl || record.resource?.remoteUrl;
+        if (url) {
+          return (
+            <Button
+              type="link"
+              icon={<EyeOutlined />}
+              onClick={() => window.open(buildUrl(url), '_blank')}
+              size="small"
+            >
+              查看
+            </Button>
+          );
         }
         return <Tag>-</Tag>;
       },
@@ -179,34 +186,46 @@ const MaterialListPage: React.FC = () => {
       title: '文件名',
       dataIndex: ['resource', 'fileName'],
       key: 'fileName',
-      width: 200,
+      width: 160,
       ellipsis: true,
       render: (text: string) => <span style={{ color: '#1e293b' }}>{text || '-'}</span>,
     },
     {
-      title: '来源模型',
-      dataIndex: ['resource', 'sourceModel'],
-      key: 'sourceModel',
-      width: 120,
+      title: '文件大小',
+      dataIndex: ['resource', 'fileSizeBytes'],
+      key: 'fileSizeBytes',
       ellipsis: true,
-      render: (text: string) => <span style={{ color: '#64748b' }}>{text || '-'}</span>,
-    },
-    {
-      title: '供应商',
-      dataIndex: ['resource', 'provider'],
-      key: 'provider',
-      width: 100,
-      ellipsis: true,
-      render: (text: string) => <span style={{ color: '#64748b' }}>{text || '-'}</span>,
-    },
-    {
-      title: '模型名称',
-      dataIndex: ['resource', 'modelName'],
-      key: 'modelName',
-      width: 120,
-      ellipsis: true,
-      render: (text: string) => <span style={{ color: '#64748b' }}>{text || '-'}</span>,
+      render: (text: number) =>{
+        return `${(text / 1024 / 1024).toFixed(2)} MB`
+        // return `${text} 字`
+        // return `${text} 字节`
+      }
+
     },
+    // {
+    //   title: '来源模型',
+    //   dataIndex: ['resource', 'sourceModel'],
+    //   key: 'sourceModel',
+    //   width: 120,
+    //   ellipsis: true,
+    //   render: (text: string) => <span style={{ color: '#64748b' }}>{text || '-'}</span>,
+    // },
+    // {
+    //   title: '供应商',
+    //   dataIndex: ['resource', 'provider'],
+    //   key: 'provider',
+    //   width: 100,
+    //   ellipsis: true,
+    //   render: (text: string) => <span style={{ color: '#64748b' }}>{text || '-'}</span>,
+    // },
+    // {
+    //   title: '模型名称',
+    //   dataIndex: ['resource', 'modelName'],
+    //   key: 'modelName',
+    //   width: 120,
+    //   ellipsis: true,
+    //   render: (text: string) => <span style={{ color: '#64748b' }}>{text || '-'}</span>,
+    // },
     {
       title: '前测状态',
       dataIndex: 'status',