perf: improve file table display in file table

Author: moonrailgun

server/admin/src/client/fields.ts

@@ -152,9 +152,16 @@ export const groupFields = [
 ];
 
 export const fileFields = [
-  createTextField('objectName'),
+  createTextField('objectName', {
+    list: {
+      width: 320,
+    },
+  }),
   createImageUrlField('url', {
     preRenderTransform: parseUrlStr,
+    list: {
+      width: 140,
+    },
   }),
   createFileSizeField('size', {
     list: {

server/admin/src/client/global.css

@@ -0,0 +1,7 @@
+.arco-table-th {
+  white-space: nowrap;
+}
+.arco-table-td {
+  /* white-space: nowrap; */
+  overflow: hidden;
+}

server/admin/src/client/main.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
+import './global.css';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <App />

server/admin/src/client/resources/file.tsx

@@ -42,12 +42,18 @@ export const FileList: React.FC = React.memo(() => {
           {t('custom.file.fileTotalSize')}: {filesize(totalSize)}
         </Typography.Paragraph>
       </Row>
+
       <ListTable
         filter={[
           createTextField('q', {
             label: 'Search',
           }),
         ]}
+        tableProps={{
+          scroll: {
+            x: 1200,
+          },
+        }}
         fields={fileFields}
         action={{ detail: true, delete: true }}
         batchAction={{ delete: true }}