From ab7830999d000d68f37cee5ccbd36720bcf016ab Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Sat, 5 Oct 2024 13:01:05 +0800
Subject: [PATCH] perf: improve file table display in file table

---
 server/admin/src/client/fields.ts          | 9 ++++++++-
 server/admin/src/client/global.css         | 7 +++++++
 server/admin/src/client/main.tsx           | 1 +
 server/admin/src/client/resources/file.tsx | 6 ++++++
 4 files changed, 22 insertions(+), 1 deletion(-)
 create mode 100644 server/admin/src/client/global.css

diff --git a/server/admin/src/client/fields.ts b/server/admin/src/client/fields.ts
index f42a0075..6dfc2682 100644
--- a/server/admin/src/client/fields.ts
+++ b/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: {
diff --git a/server/admin/src/client/global.css b/server/admin/src/client/global.css
new file mode 100644
index 00000000..c4018518
--- /dev/null
+++ b/server/admin/src/client/global.css
@@ -0,0 +1,7 @@
+.arco-table-th {
+  white-space: nowrap;
+}
+.arco-table-td {
+  /* white-space: nowrap; */
+  overflow: hidden;
+}
diff --git a/server/admin/src/client/main.tsx b/server/admin/src/client/main.tsx
index f84c7655..97733c6a 100644
--- a/server/admin/src/client/main.tsx
+++ b/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 />
diff --git a/server/admin/src/client/resources/file.tsx b/server/admin/src/client/resources/file.tsx
index dc66d930..805c3a4d 100644
--- a/server/admin/src/client/resources/file.tsx
+++ b/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 }}