perf: improve file table display in file table

msgbyte · Oct 5, 2024 · ab78309 · ab78309
1 parent 4a4adb1
commit ab78309
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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
@@ -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 }}