refactor: 前端 antd 组件使用最佳实践重构

- 修正 API 响应类型，增加 ProjectResponse 包装类型
- ConfigProvider 配置中文 locale (zhCN)
- 生产入口启用 ErrorBoundary，使用 Result 组件
- ReactQueryDevtools 仅开发环境渲染
- Sider 增加 collapsible 配置，使用 antd 默认折叠行为
- 项目页面拆分为 ProjectToolbar/ProjectTable/ProjectFormModal
- 搜索改用 Input.Search，表单增加 whitespace 校验
- 404/ErrorBoundary/Dashboard 使用 antd Result/Typography/Card/Descriptions
- 清理未使用的 ProtectedRoute 和冗余样式类
- styles.css 仅保留必要布局样式，无 antd 内部类覆盖
- 更新测试覆盖，避免依赖 antd 内部类名
- 更新 docs/development/frontend.md 开发规范

src/web/pages/projects/components/ProjectTable.tsx

@@ -0,0 +1,159 @@
+import type { ColumnsType } from "antd/es/table";
+
+import { DeleteOutlined, EditOutlined, InboxOutlined, RedoOutlined } from "@ant-design/icons";
+import { App as AntApp, Button, Popconfirm, Space, Table, Tag } from "antd";
+
+import type { Project, ProjectListResponse } from "../../../../shared/api";
+
+interface ProjectTableProps {
+  data: ProjectListResponse | undefined;
+  loading: boolean;
+  onArchive: (id: string) => Promise<unknown>;
+  onDelete: (id: string) => Promise<unknown>;
+  onEdit: (project: Project) => void;
+  onPageChange: (page: number, pageSize: number) => void;
+  onRestore: (id: string) => Promise<unknown>;
+  page: number;
+  pageSize: number;
+}
+
+const COLUMNS: ColumnsType<Project> = [
+  { dataIndex: "name", ellipsis: true, title: "项目名称", width: 160 },
+  { dataIndex: "description", ellipsis: true, title: "项目描述" },
+  {
+    align: "center",
+    dataIndex: "status",
+    render: (_value, record: Project) => {
+      if (record.status === "archived") {
+        return <Tag>已归档</Tag>;
+      }
+      return <Tag color="blue">进行中</Tag>;
+    },
+    title: "状态",
+    width: 100,
+  },
+  {
+    align: "center",
+    dataIndex: "createdAt",
+    render: (_value, record: Project) => formatDatetime(record.createdAt),
+    title: "创建时间",
+    width: 185,
+  },
+  {
+    align: "center",
+    dataIndex: "updatedAt",
+    render: (_value, record: Project) => formatDatetime(record.updatedAt),
+    title: "更新时间",
+    width: 185,
+  },
+];
+
+export function ProjectTable({
+  data,
+  loading,
+  onArchive,
+  onDelete,
+  onEdit,
+  onPageChange,
+  onRestore,
+  page,
+  pageSize,
+}: ProjectTableProps) {
+  const { message } = AntApp.useApp();
+
+  const handleArchive = async (id: string) => {
+    try {
+      await onArchive(id);
+      message.success("项目已归档");
+    } catch (err) {
+      message.error((err as Error).message);
+    }
+  };
+
+  const handleRestore = async (id: string) => {
+    try {
+      await onRestore(id);
+      message.success("项目已恢复");
+    } catch (err) {
+      message.error((err as Error).message);
+    }
+  };
+
+  const handleDelete = async (id: string) => {
+    try {
+      await onDelete(id);
+      message.success("项目已永久删除");
+    } catch (err) {
+      message.error((err as Error).message);
+    }
+  };
+
+  const operationColumn: ColumnsType<Project>[number] = {
+    dataIndex: "op",
+    fixed: "right",
+    render: (_value, record: Project) => {
+      if (record.status === "active") {
+        return (
+          <Space size="small">
+            <Button icon={<EditOutlined />} onClick={() => onEdit(record)} size="small" type="link">
+              编辑
+            </Button>
+            <Popconfirm
+              description="归档后项目将变为只读。"
+              onConfirm={() => void handleArchive(record.id)}
+              title="确认归档此项目？"
+            >
+              <Button color="orange" icon={<InboxOutlined />} size="small" variant="link">
+                归档
+              </Button>
+            </Popconfirm>
+          </Space>
+        );
+      }
+      return (
+        <Space size="small">
+          <Popconfirm onConfirm={() => void handleRestore(record.id)} title="确认恢复此项目？">
+            <Button icon={<RedoOutlined />} size="small" type="link">
+              恢复
+            </Button>
+          </Popconfirm>
+          <Popconfirm
+            description="此操作不可恢复。"
+            onConfirm={() => void handleDelete(record.id)}
+            title="确认永久删除此项目？"
+          >
+            <Button danger icon={<DeleteOutlined />} size="small" type="link">
+              删除
+            </Button>
+          </Popconfirm>
+        </Space>
+      );
+    },
+    title: "操作",
+    width: 180,
+  };
+
+  return (
+    <Table
+      columns={[...COLUMNS, operationColumn]}
+      dataSource={data?.items ?? []}
+      loading={loading}
+      pagination={{
+        current: page,
+        hideOnSinglePage: false,
+        onChange: onPageChange,
+        pageSize,
+        showSizeChanger: true,
+        total: data?.total ?? 0,
+      }}
+      rowKey="id"
+      scroll={{ x: 900 }}
+    />
+  );
+}
+
+function formatDatetime(dateStr: string): string {
+  const d = new Date(dateStr);
+  const pad = (n: number) => String(n).padStart(2, "0");
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
+}