refactor(web): React 最佳实践优化 — memo/callback + 目录边界 + 路由增强

- useLogger: useMemo + JSON.stringify 替代 useState 派生
- useIsDark: effectiveTheme 替代 token 色值比较
- useCurrentProject: layouts/ 提升到 shared/hooks/
- ConsoleShell: locale useMemo 缓存
- ConsoleOutlet: 添加 Suspense 边界
- routes: 添加 layout 级 errorElement
- Table 组件: operationColumn useMemo + useCallback
- ChatPanel: footer 合并为 useCallback, props 传入模型数据
- ChatPage: textModels/conversations useMemo 缓存

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

@@ -1,7 +1,8 @@
-import type { ColumnsType } from "antd/es/table";
+import type { TableColumnsType } from "antd";
 
 import { DeleteOutlined, EditOutlined, InboxOutlined, LoginOutlined, RedoOutlined } from "@ant-design/icons";
 import { App as AntApp, Button, Popconfirm, Space, Table, Tag } from "antd";
+import { useCallback, useMemo } from "react";
 import { useNavigate } from "react-router";
 
 import type { Project, ProjectListResponse, ProjectStatus } from "../../../../shared/api";
@@ -19,7 +20,7 @@ interface ProjectTableProps {
   status: ProjectStatus;
 }
 
-const COLUMNS: ColumnsType<Project> = [
+const COLUMNS: TableColumnsType<Project> = [
   { dataIndex: "name", ellipsis: true, title: "名称", width: 140 },
   { dataIndex: "description", ellipsis: true, title: "描述" },
   {
@@ -65,88 +66,102 @@ export function ProjectTable({
   const { message } = AntApp.useApp();
   const navigate = useNavigate();
 
-  const handleArchive = async (id: string) => {
-    try {
-      await onArchive(id);
-      message.success("项目已归档");
-    } catch (err: unknown) {
-      message.error((err as Error).message);
-    }
-  };
+  const handleArchive = useCallback(
+    async (id: string) => {
+      try {
+        await onArchive(id);
+        message.success("项目已归档");
+      } catch (err: unknown) {
+        message.error((err as Error).message);
+      }
+    },
+    [onArchive, message],
+  );
 
-  const handleRestore = async (id: string) => {
-    try {
-      await onRestore(id);
-      message.success("项目已恢复");
-    } catch (err: unknown) {
-      message.error((err as Error).message);
-    }
-  };
+  const handleRestore = useCallback(
+    async (id: string) => {
+      try {
+        await onRestore(id);
+        message.success("项目已恢复");
+      } catch (err: unknown) {
+        message.error((err as Error).message);
+      }
+    },
+    [onRestore, message],
+  );
 
-  const handleDelete = async (id: string) => {
-    try {
-      await onDelete(id);
-      message.success("项目已永久删除");
-    } catch (err: unknown) {
-      message.error((err as Error).message);
-    }
-  };
+  const handleDelete = useCallback(
+    async (id: string) => {
+      try {
+        await onDelete(id);
+        message.success("项目已永久删除");
+      } catch (err: unknown) {
+        message.error((err as Error).message);
+      }
+    },
+    [onDelete, message],
+  );
 
-  const operationColumn: ColumnsType<Project>[number] = {
-    dataIndex: "op",
-    render: (_value, record: Project) => {
-      if (record.status === "active") {
+  const operationColumn = useMemo<TableColumnsType<Project>[number]>(
+    () => ({
+      dataIndex: "op",
+      render: (_value, record: Project) => {
+        if (record.status === "active") {
+          return (
+            <Space size="small">
+              <Button
+                icon={<LoginOutlined />}
+                onClick={() => void navigate(`/workbench/${record.id}`)}
+                size="small"
+                type="link"
+              >
+                工作台
+              </Button>
+              <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">
-            <Button
-              icon={<LoginOutlined />}
-              onClick={() => void navigate(`/workbench/${record.id}`)}
-              size="small"
-              type="link"
-            >
-              工作台
-            </Button>
-            <Button icon={<EditOutlined />} onClick={() => onEdit(record)} size="small" type="link">
-              编辑
-            </Button>
+            <Popconfirm onConfirm={() => void handleRestore(record.id)} title="确认恢复此项目？">
+              <Button icon={<RedoOutlined />} size="small" type="link">
+                恢复
+              </Button>
+            </Popconfirm>
             <Popconfirm
-              description="归档后项目将变为只读。"
-              onConfirm={() => void handleArchive(record.id)}
-              title="确认归档此项目？"
+              description="此操作不可恢复。"
+              onConfirm={() => void handleDelete(record.id)}
+              title="确认永久删除此项目？"
             >
-              <Button color="orange" icon={<InboxOutlined />} size="small" variant="link">
-                归档
+              <Button danger icon={<DeleteOutlined />} size="small" type="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: status === "active" ? 260 : 160,
-  };
+      },
+      title: "操作",
+      width: status === "active" ? 260 : 160,
+    }),
+    [navigate, onEdit, handleArchive, handleRestore, handleDelete, status],
+  );
+
+  const columns = useMemo(() => [...COLUMNS, operationColumn], [operationColumn]);
 
   return (
     <Table
-      columns={[...COLUMNS, operationColumn]}
+      columns={columns}
       dataSource={data?.items ?? []}
       loading={loading}
       pagination={{