修改素材列表列顺序

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 { Button, Table, Tag, Input, Pagination, Typography, Select, App } from 'antd';
-import { FolderOpenOutlined } from '@ant-design/icons';
+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 url = record.resource?.resourceUrl || record.resource?.remoteUrl;
-          const imageUrl = record.resource?.resourceUrl ? buildUrl(record.resource.resourceUrl) : '';
+        if (url) {
-          if (imageUrl) {
+          return (
-            return <Image width={40} height={40} src={imageUrl} style={{ objectFit: 'cover', borderRadius: 4 }} />;
+            <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: '来源模型',
+      title: '文件大小',
-      dataIndex: ['resource', 'sourceModel'],
+      dataIndex: ['resource', 'fileSizeBytes'],
-      key: 'sourceModel',
+      key: 'fileSizeBytes',
-      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} 字`
-      title: '供应商',
+        // return `${text} 字节`
-      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: ['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',