From 2e78c4befd51740f7c349a23f81a5851bcfe0ea0 Mon Sep 17 00:00:00 2001
From: sinohqb <huangqiaobin2012@gmail.com>
Date: Wed, 5 Aug 2026 15:40:54 +0800
Subject: [PATCH] refactor(ui): align Files page with consistency baseline
 (ui-consistency ticket 03)

Delete confirmations already existed (d7514f4), so no behavior fix was
needed. Switch empty states to antd Empty (table + category tree) and
apply the 20-row pagination standard.
---
 .scratch/ui-consistency/issues/03-files.md    |  8 +++---
 .../src/components/files/FileCategoryTree.tsx | 28 ++++++++++++-------
 .../web/src/components/files/FileTable.tsx    | 16 +++--------
 frontend/web/src/index.css                    | 14 ----------
 4 files changed, 26 insertions(+), 40 deletions(-)

diff --git a/.scratch/ui-consistency/issues/03-files.md b/.scratch/ui-consistency/issues/03-files.md
index b3fe324..f65795f 100644
--- a/.scratch/ui-consistency/issues/03-files.md
+++ b/.scratch/ui-consistency/issues/03-files.md
@@ -5,10 +5,10 @@
 **Blocked by:** 01
 
 **Acceptance criteria:**
-- [ ] 删除分类、删除文件均有 Popconfirm 确认（行为修正，记录在提交信息）
-- [ ] 上传/下载交互保持不变，外壳对齐 PageWrapper 标准
-- [ ] 空态 Empty（无分类/无文件时）
-- [ ] `tsc --noEmit` 通过
+- [x] 删除分类、删除文件均有 Popconfirm 确认（核实发现 d7514f4 已有确认，票据前提过时，无需行为修正）
+- [x] 上传/下载交互保持不变，外壳对齐 PageWrapper 标准
+- [x] 空态 Empty（无分类/无文件时）
+- [x] `tsc --noEmit` 通过
 - [ ] t480 走查：分类树 CRUD + 上传下载 golden path
 
 **检查点**：本票完成后暂停，评审 FormDrawer/usePolling API 与三页走查结果，用户确认后再继续 04–08。
diff --git a/frontend/web/src/components/files/FileCategoryTree.tsx b/frontend/web/src/components/files/FileCategoryTree.tsx
index 21f17b5..65c26cb 100644
--- a/frontend/web/src/components/files/FileCategoryTree.tsx
+++ b/frontend/web/src/components/files/FileCategoryTree.tsx
@@ -5,7 +5,7 @@ import {
   FolderOutlined,
   PlusOutlined,
 } from '@ant-design/icons'
-import { Button, Popconfirm, Tooltip, Tree } from 'antd'
+import { Button, Empty, Popconfirm, Tooltip, Tree } from 'antd'
 import type { DataNode } from 'antd/es/tree'
 import type { FileCategory } from '../../api'
 import { colors, fontSizes } from '../../tokens'
@@ -109,15 +109,23 @@ export default function FileCategoryTree({
         </Tooltip>
       </div>
       <div className="files-category-scroll">
-        <Tree
-          defaultExpandAll
-          treeData={treeData}
-          selectedKeys={[selectedCategoryId ?? ALL_FILES_KEY]}
-          onSelect={(keys) => {
-            const key = keys[0]?.toString()
-            onSelect(!key || key === ALL_FILES_KEY ? null : key)
-          }}
-        />
+        {categories.length === 0 ? (
+          <Empty
+            description="暂无分类，点击右上角新建"
+            image={Empty.PRESENTED_IMAGE_SIMPLE}
+            style={{ marginTop: 24 }}
+          />
+        ) : (
+          <Tree
+            defaultExpandAll
+            treeData={treeData}
+            selectedKeys={[selectedCategoryId ?? ALL_FILES_KEY]}
+            onSelect={(keys) => {
+              const key = keys[0]?.toString()
+              onSelect(!key || key === ALL_FILES_KEY ? null : key)
+            }}
+          />
+        )}
       </div>
     </aside>
   )
diff --git a/frontend/web/src/components/files/FileTable.tsx b/frontend/web/src/components/files/FileTable.tsx
index 653a41e..44d39b7 100644
--- a/frontend/web/src/components/files/FileTable.tsx
+++ b/frontend/web/src/components/files/FileTable.tsx
@@ -3,11 +3,10 @@ import {
   DownloadOutlined,
   FileOutlined,
   FolderOutlined,
-  InboxOutlined,
   ReloadOutlined,
   UploadOutlined,
 } from '@ant-design/icons'
-import { Button, Grid, Popconfirm, Space, Table, Tag, Tooltip } from 'antd'
+import { Button, Empty, Grid, Popconfirm, Space, Table, Tag, Tooltip } from 'antd'
 import type { ColumnsType } from 'antd/es/table'
 import { useMemo } from 'react'
 import type { FileCategory, FileRecord } from '../../api'
@@ -192,19 +191,12 @@ export default function FileTable({
           rowKey="id"
           loading={loading}
           scroll={screens.md ? { x: 900 } : undefined}
-          pagination={files.length > 10 ? {
-            pageSize: 15,
-            showSizeChanger: true,
-            pageSizeOptions: ['15', '30', '50'],
+          pagination={files.length > 20 ? {
+            pageSize: 20,
             showTotal: (total) => `共 ${total} 个文件`,
           } : false}
           locale={{
-            emptyText: (
-              <div className="files-empty">
-                <InboxOutlined />
-                <span>暂无文件</span>
-              </div>
-            ),
+            emptyText: <Empty description="暂无文件" image={Empty.PRESENTED_IMAGE_SIMPLE} />,
           }}
         />
       </div>
diff --git a/frontend/web/src/index.css b/frontend/web/src/index.css
index 9e03a68..24747d7 100644
--- a/frontend/web/src/index.css
+++ b/frontend/web/src/index.css
@@ -326,20 +326,6 @@ body {
   display: none;
 }
 
-.files-empty {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-  padding: 40px;
-  color: #8c8c8c;
-}
-
-.files-empty .anticon {
-  font-size: 40px;
-  color: #bfbfbf;
-}
-
 .files-upload-category {
   display: grid;
   grid-template-columns: auto minmax(0, 1fr);