Merge remote-tracking branch 'origin/dev-main' into dev-main

fix: 修复主题切换后首页状态重置 + 首页 UX 优化 + 文档同步
## 根因设置页 `navigate('/settings')` 导致 React Router `/*` 的 index 路由不匹配，HomePage 被卸载重挂载，所有 useState 回到默认值。 ## 修复（6 文件） - event-bus.ts: 新增 OPEN_SETTINGS 事件 - nav-config.ts: 设置按钮 action: 'navigate' → 'button'，去路由化 - NavBar.tsx: button case 中 emit(OPEN_SETTINGS) - SettingsPage.tsx: 去路由化，改为 Modal 居中叠加 + open/onClose props，使用 antd 6.x 正确 API destroyOnHidden（非废弃的 destroyOnClose）， mask={{ closable: false }} + keyboard={false} 仅允许 X 按钮关闭 - router/index.tsx: 移除 SettingsPage 渲染 - App.tsx: 添加 SettingsPage Modal，事件驱动（与 LoginPage 模式一致） ## UX 优化（2 文件） - HomeContent.tsx: 右侧分隔条移除多余 marginLeft，左右视觉对称 - BannerCarousel.tsx: 新增关闭按钮，session 级别 useState 隐藏，不做 localStorage 持久化，确保每次启动重新展示 ## 架构原则确立 QT 多窗口模型 → Web 映射：叠加层走 Modal/Drawer + 事件总线，主页面不卸载；真正的视图切换才用 React Router。 ## 文档同步 - TODO.md: 移除已完成项详细记录，精简为未完成待办 - WORKLOG.md: 追加 2026-06-07 完整工作日志 - PROJECT.md: 更新路由/叠加层架构说明 - CHANGELOG.md: 追加 v0.0.13 条目 - ARCHITECTURE.md: 更新日期 + 新增叠加层模式章节
2026-06-07 05:22:11 +08:00 · 2026-06-07 05:21:47 +08:00 · 2026-06-05 20:49:23 +08:00 · 2026-06-05 20:48:02 +08:00 · 2026-06-05 19:24:06 +08:00 · 2026-06-05 16:24:17 +08:00
45 changed files with 3371 additions and 643 deletions
--- a/.codegraph/daemon.pid
+++ b/.codegraph/daemon.pid
@@ -1,6 +1,6 @@
 {
-  "pid": 91784,
+  "pid": 384720,
  "version": "0.9.9",
  "socketPath": "\\\\.\\pipe\\codegraph-aef859f0205bacea",
-  "startedAt": 1780539931451
+  "startedAt": 1780763058452
 }
--- a/.env.development
+++ b/.env.development
@@ -3,7 +3,8 @@
 # ============================================================

 # 渲染进程 API 地址（Vite 编译时注入，不可在主进程中使用）
-VITE_API_BASE_URL=http://8.160.179.64:8000
+# VITE_API_BASE_URL=http://8.160.179.64:8000
+VITE_API_BASE_URL=https://www.heixiu.net

 # 主进程 — 更新检查 API（指向本地测试服务器）
 UPDATE_API_URL=http://127.0.0.1:8000
--- a/ARCHITECTURE.md
+++ b/ARCHITECTURE.md
@@ -1,6 +1,6 @@
 # 船长 · HeiXiu — 前端架构文档

-> 最后更新：2026-06-03
+> 最后更新：2026-06-07

 ## 目录结构

@@ -156,7 +156,23 @@ NavBar / 设置页 → AppProvider.logout()

 - 纯发布-订阅，不依赖任何框架
 - 用于跨模块解耦通信（如 axios 拦截器无法直接用 React Context）
- 预定义事件：`AUTH_REQUIRED` / `SHOW_LOGIN` / `LOGIN_SUCCESS` / `LOGOUT`
+- 预定义事件：`AUTH_REQUIRED` / `SHOW_LOGIN` / `LOGIN_SUCCESS` / `LOGOUT` / `TASK_SUBMITTED` / `OPEN_SETTINGS`
+
+### 页面叠加层模式（QT 多窗口模型映射）
+
+本项目是 Python QT 桌面应用的 Web 重构版。QT 应用以"新开窗口"为常态，原窗口不因新窗口打开而销毁。Web 端对应原则：
+
+| QT 原版 | Web 对应 | 实现方式 |
+|---------|---------|---------|
+| 新开窗口叠加在主窗口之上 | Modal / Drawer | 事件总线驱动，主页面不卸载 |
+| Tab 切换 / 视图替换 | React Router | 跨页状态放 Provider 或 localStorage |
+
+**当前叠加层**：
+- LoginPage — Modal，事件总线 `SHOW_LOGIN` / `AUTH_REQUIRED` 触发
+- SettingsPage — Modal，事件总线 `OPEN_SETTINGS` 触发
+- AnnouncementDrawer — Drawer，NavBar 内部 state 控制
+
+**反模式警告**：叠加层绝不应通过路由跳转实现。`navigate('/xxx')` + `useLocation` 判断显隐会导致原有页面卸载，丢失所有组件状态。

 ### API 模块规范

--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,15 @@

 ---

+## 0.0.13（2026-06-07）
+
+- 修复主题切换后首页状态重置问题：设置页去路由化，改为事件总线驱动的 Modal 叠加
+- 首页三栏分隔条视觉对齐：移除右侧多余 margin，左右完全对称
+- 轮播图新增关闭按钮：session 级别隐藏，每次启动重新展示
+- 确立 QT 多窗口模型 → Web 架构映射原则：叠加层走 Modal/Drawer + 事件总线，不走路由
+
+---
+
 ## 0.0.12（2026-06-04）

 - 重构更新检查流程：无更新不再抛异常，PreCheck → 直接 IPC 通知
--- a/PROJECT.md
+++ b/PROJECT.md
@@ -46,10 +46,11 @@

   4. 窗口间通信统一通过主进程转发（或使用 MessagePort 等 Electron 支持的机制），保持窗口独立性。

- 路由与导航：主窗口为 单页应用，使用 React Router v7+ 管理页面切换，支持嵌套路由。
+- 路由与导航：主窗口为单页应用，使用 React Router v7+ 管理页面切换。**遵循 QT 多窗口模型映射原则**：
+  - 叠加层（设置、公告、素材库等）→ Modal/Drawer + 事件总线驱动，主页面不卸载
+  - 页面跳转（真正的视图切换）→ React Router，需跨页保持的状态放 Provider 或 localStorage

- 辅助窗口（设置、预览、导入导出等）为独立 BrowserWindow，加载独立的 HTML 入口（可根据路由参数或 windowId 决定内部路由），不与主窗口共享
-  DOM。
+- 辅助窗口（设置、预览、导入导出等）以 Modal/Drawer 叠加在主窗口之上，不与主窗口共享 DOM，但保持在同一个 React 组件树中以确保状态一致性。

 # 目录结构

@@ -169,15 +170,52 @@

 - 错误日志：request.ts 拦截器根据错误类型自动分级记录（AUTH_EXPIRED → debug，5xx → error，其余 → warn）。

+- 401 判断策略：HTTP 401 拦截处双重校验——同时检查 HTTP 状态码和响应体中的业务码 `data.code`。
+  仅 `status === 401 && data?.code === 401` 才走 token 刷新流程；其他业务码（如密码错误）穿透到正常错误处理，
+  透传后端的 `data.message`。这确保登录接口返回的"账号或密码错误"不被 RefreshError("登录已过期") 覆盖。
+
 - 脱敏：shared/utils/sanitize.ts 在日志写入前自动处理 ID（哈希）、邮箱/手机/名称/Token 等字段。

+# 安全与认证
+
+## Token 加密存储
+
+- `access_token` 和 `refresh_token` 通过 Electron `safeStorage` API 加密存储，不落明文：
+  - macOS → Keychain
+  - Windows → DPAPI
+  - Linux → libsecret
+- 实现文件：
+  - `electron/main/safe-storage-ipc.ts` — 主进程加密/解密 IPC 处理（`BIDIRECTIONAL.SAFESTORAGE_ENCRYPT / DECRYPT`）
+  - `src/utils/safe-storage.ts` — 渲染进程桥接层（`initSafeStore / getSafeStore / setSafeStore / clearSafeStore`）
+  - `src/services/request.ts` — token 存取通过 `getSafeStore / setSafeStore`，无需感知加密细节
+  - `src/services/auth-token.ts` — refresh_token 同理通过 safeStorage 存取
+
+## 双 Token 机制
+
+- `access_token`（短效）+ `refresh_token`（长效），登录成功同时下发
+- 请求拦截器自动附加 `Authorization: Bearer <access_token>`
+- 401 响应 → 双重校验（HTTP `status` + 业务 `data.code`）→ 仅 `code === 401` 时触发刷新
+- 刷新期间并发请求排队（`failedQueue`），刷新完成后批量重试
+- refresh 接口自身 401 直接拒绝（防死循环），login 接口 401 穿透透传后端 `message`
+- 启动时 `refresh_token` 静默续期（自动登录），失败仅清除标记不影响用户名回填
+- 登录/退出通过事件总线解耦（`LOGIN_SUCCESS` / `LOGOUT` / `AUTH_REQUIRED`）
+
+## 日志脱敏
+
+- `shared/utils/sanitize.ts` 在日志写入前自动脱敏处理
+- 覆盖字段：用户 ID（SHA256 哈希）、邮箱（`***@domain`）、手机号（掩码）、用户名称、Token（截断）
+- 主进程 `electron/main/logger.ts` 和渲染进程 `src/utils/logger.ts` 均写入前调用 `sanitizeLogEntry()`
+
 # 样式与主题

 - 优先使用 Tailwind 工具类 完成布局与常规样式，自定义设计令牌应映射为 Tailwind 扩展（在 tailwind.config.ts 中配置
  theme.extend）。

- Ant Design 组件样式通过 ConfigProvider 的 theme 属性覆盖，确保与 Tailwind 主题令牌同步。在 src/theme/adapters/ 中创建
-  antd-theme.ts，导出主题配置对象，引用 tokens.ts 中的设计变量。
+- Ant Design 组件样式通过 ConfigProvider 的 theme 属性覆盖，确保与 Tailwind 主题令牌同步。
+  `ConfigProvider` 同时配置 `locale={zhCN}` 实现全局中文（分页器"条/页"等无需逐个组件设置）。
+  在 src/theme/ 中创建 antd-theme.ts，导出主题配置对象，引用 tokens.ts 中的设计变量。
+  组件级 token（如 Pagination.itemActiveColor / itemActiveBg）在 sharedComponents 中统一管理，
+  亮色/暗色主题共享，避免 CSS !important hack。

 - 禁止在组件中硬编码颜色、字号等设计令牌，一律使用主题变量或 Tailwind 类名。

@@ -233,6 +271,17 @@
 | `UpdateSetting` | `src/pages/settings/UpdateSetting.tsx` | 设置页更新区块（含"查看详情"弹窗） |
 | `server.py` | `test-server/server.py` | 本地测试服务器，扫描 release/ 目录，语义版本排序 |

+## 增量更新（差分下载）
+
+- `package.json` 配置 `"differentialPackage": true`，electron-builder 打包时自动生成 `.exe.blockmap` 文件
+- 自定义 Provider 模式：`HeiXiuNsisUpdater extends NsisUpdater` / `HeiXiuMacUpdater extends MacUpdater` / `HeiXiuAppImageUpdater extends AppImageUpdater`
+- 三平台 Updater 均覆盖 `getUpdateInfoAndProvider()` 注入 `HeiXiuProvider`（自定义 API 版本检查），差分下载由 electron-updater 父类原生处理
+- blockmap 文件流程：
+  - `scripts/generate-update-info.mjs` — 扫描 blockmap 文件，写 `blockmap.url` + `blockmap.size` 到 `update-info.json`
+  - `scripts/upload-oss.mjs` — 安装包 + blockmap 文件一并上传 OSS（支持 Node.js 直传和 ossutil 两种模式）
+  - `scripts/publish-release.mjs` — 通过 `--blockmap-url` 参数将 blockmap 信息发布到后端 API
+- 效果：日常更新仅下载变更区块，预计节省 60%~90% 流量
+
 ## 环境变量加载机制（主进程）

 加载顺序（后者覆盖前者，OS 环境变量始终优先）：
--- a/TODO.md
+++ b/TODO.md
@@ -1,49 +1,6 @@
 # TODO — 船长·HeiXiu 待办与优化清单

-> 最后更新：2026-06-03
-
---
-
-## 🔴 安全加固（优先级高）
-
-### 1. 敏感数据加密存储
-
-当前所有敏感数据存储在 `localStorage` 明文/Base64：
-
-| 数据               | 现状        | 目标方案                                   |
-|------------------|-----------|----------------------------------------|
-| `access_token`   | 明文        | Electron `safeStorage.encryptString()` |
-| `refresh_token`  | 明文        | Electron `safeStorage.encryptString()` |
-| `passwordBase64` | Base64 编码 | 移除密码存储，仅靠 refresh_token 自动登录           |
-
-**方案 A（推荐）**：使用 Electron `safeStorage` API
-
- macOS → Keychain
- Windows → DPAPI
- Linux → libsecret
-
-```ts
-// preload.ts 暴露安全方法
-contextBridge.exposeInMainWorld('safeStorage', {
-    encrypt: (plain: string) => ipcRenderer.invoke('safe-storage:encrypt', plain),
-    decrypt: (encrypted: Buffer) => ipcRenderer.invoke('safe-storage:decrypt', encrypted),
-});
-
-// 替代现有 setToken / setStoredRefreshToken
-// 渲染进程不再直接操作 localStorage
-```
-
-**方案 B**：敏感操作下沉到主进程
-
- `access_token` / `refresh_token` 由主进程管理
- 渲染进程通过 IPC 发起请求时由主进程追加 Token
- 渲染进程永不持有明文 Token
-
-### 2. 密码存储策略调整
-
- [ ] "记住密码" → 仅回填用户名，不再存储密码（已完成）
- [ ] 清理 `StoredAuth.passwordBase64` 字段
- [ ] "自动登录" 完全依赖 `refresh_token` 静默续期
+> 最后更新：2026-06-07

 ---

@@ -87,54 +44,6 @@ contextBridge.exposeInMainWorld('safeStorage', {
 - [ ] 单元测试覆盖（Vitest）
 - [ ] Bundle 体积分析优化（rollup-plugin-visualizer 已有，定期检查）

-### 增量更新改造
-
-当前状态：
-
- `electron-builder` 已配置 `"differential": true`，打包时已生成 `.exe.blockmap` 文件 ✅
- `electron/main/updater.ts` 为**手写全量下载**（`net.request`），未使用 `electron-updater` npm 包 ❌
- blockmap 文件生成了但从未被消费，每次更新都是完整下载
-
-目标方案 — 自定义 Provider + electron-updater：
-
-```ts
-// electron/main/updater-v2.ts
-import { autoUpdater } from 'electron-updater';
-import { Provider } from 'electron-updater/out/providers/Provider';
-
-class HeiXiuProvider extends Provider<UpdateInfo> {
-  // 版本检查 → 走自定义 API（保留灰度/强更控制）
-  async getLatestVersion(): Promise<UpdateInfo> {
-    const res = await fetch(`${API_BASE}/api/v1/update/check?...`);
-    const data = await res.json();
-    return {
-      version: data.latestVersion,
-      files: [{
-        url: data.downloadUrl,
-        sha512: data.sha512,
-        size: data.fileSize,
-        blockMapSize: data.blockMapSize,  // 后端新增字段
-      }],
-      path: data.downloadUrl,
-      sha512: data.sha512,
-      releaseDate: data.releaseDate,
-    };
-  }
-}
-```
-
-改造内容：
-
- [ ] 安装 `electron-updater` npm 包
- [ ] 重写 `electron/main/updater.ts` 为自定义 Provider 模式
- [ ] 发布脚本 `upload-oss.mjs` 增加 blockmap 文件上传
- [ ] `generate-update-info.mjs` 增加 blockmap 字段（`blockMapUrl`、`blockMapSize`）
- [ ] 后端 API `/api/v1/update/check` 响应增加 `blockMapUrl`、`blockMapSize` 字段
- [ ] 后端 `releases` 表增加 `blockmap_url`、`blockmap_size` 列
- [ ] OSS 上传每次版本需同时上传 `.exe` + `.exe.blockmap` 两个文件
-
-增量效果预估：日常更新下载量从完整安装包 → 仅变化的块（预计节省 60%~90% 流量）。
-
 ### 代码质量

 - [ ] 移除未使用的 `shared/` 类型和常量
@@ -152,17 +61,19 @@ class HeiXiuProvider extends Provider<UpdateInfo> {

 ## ⚠️ 已知技术债务

-| 问题              | 说明                                    | 影响             |
-|-----------------|---------------------------------------|----------------|
-| localStorage 依赖 | 所有持久化数据依赖 localStorage                | 清理浏览器数据会丢失所有配置 |
-| IPC 监听器         | useUpdater 已改为单例，其他 IPC hook 可能也有类似问题 | 长期运行可能内存泄漏     |
-| `test.py`       | 仓库根目录残留测试文件                           | 无实际作用，应清理      |
-| `null` 文件       | 仓库根目录名为 null 的文件                      | 构建产物或误操作残留     |
+| 问题              | 说明                                    | 影响               |
+|-----------------|---------------------------------------|------------------|
+| localStorage 依赖 | 所有持久化数据依赖 localStorage                | 清理浏览器数据会丢失所有配置   |
+| IPC 监听器         | useUpdater 已改为单例，其他 IPC hook 可能也有类似问题 | 长期运行可能内存泄漏       |
+| ~~主题切换状态重置~~      | ✅ 已修复 — 根因：设置页 `navigate('/settings')` 导致路由 `/*` 仅匹配 index，HomePage 被卸载重挂载。修复：SettingsPage 改为事件总线驱动的 Modal 居中叠加，不走路由 | ~~用户体验差~~ |
+| `test.py`       | 仓库根目录残留测试文件                           | 无实际作用，应清理        |
+| `null` 文件       | 仓库根目录名为 null 的文件                      | 构建产物或误操作残留       |

 ---

 ## 📋 下次开发计划

-1. **safeStorage 加密改造**（安全加固 #1）
-2. **合规素材库页面**（功能待完善 Route 页面）
-3. **各页面 nav 导航补齐**
+1. **合规素材库页面**（功能待完善 — 按 QT 原版设计，以 Modal/Drawer 叠加而非路由跳转实现）
+2. **各页面 nav 导航补齐**（后续页面优先使用叠加模式，遵循 QT 多窗口模型 → 见 WORKLOG 2026-06-07）
+3. **leftWidth / rightWidth / taskPage 加 localStorage 持久化**（UX 优化：刷新页面后保持用户偏好）
+4. **轮播图关闭按钮状态优化**（当前为 session 级别 useState，可考虑加 localStorage 记录关闭时间戳，超过 N 天再显示）
--- a/index.html
+++ b/index.html
@@ -1,21 +1,21 @@
 <!doctype html>
 <html lang="zh-CN">
-  <head>
+<head>
    <meta charset="UTF-8" />
    <!-- 使用项目 Logo 作为 favicon（Windows 可用 .ico） -->
    <link rel="icon" type="image/png" href="/src/assets/logo/HX.png" />
-<!--    <meta name="viewport" content="width=device-width, initial-scale=1.0" />-->
+    <!--    <meta name="viewport" content="width=device-width, initial-scale=1.0" />-->
    <meta http-equiv="Content-Security-Policy" content="
      default-src 'self';
      script-src 'self' 'unsafe-inline';
      style-src 'self' 'unsafe-inline';
-      img-src 'self' data:;
-      connect-src 'self' http://8.160.179.64:8000 http://localhost:5173 ws://localhost:5173 https://www.heixiu.net;
+      img-src 'self' data: https://rh-images-1252422369.cos.ap-beijing.myqcloud.com  https://www.heixiu.net ; ;
+      connect-src 'self' http://8.160.179.64:8000 http://localhost:5173 ws://localhost:5173 https://www.heixiu.net ;
    ">
    <title>船长·HeiXiu</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
+</head>
+<body>
+<div id="root"></div>
+<script type="module" src="/src/main.tsx"></script>
+</body>
 </html>
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,13 +1,14 @@
 {
   "name": "ele-heixiu",
-   "version": "0.0.1",
+   "version": "0.0.12",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
      "": {
         "name": "ele-heixiu",
-         "version": "0.0.1",
+         "version": "0.0.12",
         "dependencies": {
+            "@react-buddy/ide-toolbox": "^2.5.0",
            "antd": "^6.4.3",
            "axios": "^1.16.1",
            "electron-updater": "^6.8.3",
@@ -1949,6 +1950,15 @@
            "react-dom": ">=18.0.0"
         }
      },
+      "node_modules/@react-buddy/ide-toolbox": {
+         "version": "2.5.0",
+         "resolved": "https://registry.npmjs.org/@react-buddy/ide-toolbox/-/ide-toolbox-2.5.0.tgz",
+         "integrity": "sha512-ev2BZUeCymJfKuV3M+rQzdVZYlAacid8GexD3TtP0S+UBCBbH6ZCdkbx2eJoh/X+CEWFctg+2ppxIoaK52A7Rw==",
+         "license": "Apache-2.0",
+         "peerDependencies": {
+            "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+         }
+      },
      "node_modules/@rolldown/binding-android-arm64": {
         "version": "1.0.3",
         "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.0.3.tgz",
--- a/package.json
+++ b/package.json
@@ -31,7 +31,8 @@
      "electron-updater": "^6.8.3",
      "react": "^19.2.7",
      "react-dom": "^19.2.7",
-      "react-router-dom": "^7.16.0"
+      "react-router-dom": "^7.16.0",
+     "@react-buddy/ide-toolbox": "^2.5.0"
   },
   "build": {
      "appId": "com.heixiu.electron",
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -3,6 +3,7 @@ import { HashRouter } from 'react-router-dom';

 import { useAppContext } from './contexts/app-context';
 import { LoginPage } from './pages/login';
+import { SettingsPage } from './pages/settings';
 import { on, off, EVENTS } from './utils/event-bus';
 import { AppRoutes } from './router';

@@ -12,7 +13,12 @@ import { AppRoutes } from './router';
 * 层级：
 *   HashRouter
 *     ├── LoginPage（Modal 弹层，事件总线驱动）
- *     ├── AppRoutes（页面路由 + SettingsPage Drawer 叠加）
+ *     ├── SettingsPage（Modal 居中叠加，事件总线驱动 — 对应 QT 原版设置窗口）
+ *     ├── AppRoutes（页面路由）
+ *
+ * 设计原则（对应 QT 原版多窗口模型）：
+ *   - 叠加层（设置、公告等）→ Modal/Drawer + 事件总线，主页面不卸载
+ *   - 页面跳转 → React Router，需要跨页保持的状态放 Provider 或 localStorage
 */
 function App() {
   const { isLoggedIn } = useAppContext();
@@ -42,12 +48,25 @@ function App() {
      setLoginOpen(false);
   }, []);

+   // 设置 Drawer 状态
+   const [settingsOpen, setSettingsOpen] = useState(false);
+
+   // 监听打开设置 Drawer
+   useEffect(() => {
+      const handler = () => setSettingsOpen(true);
+      on(EVENTS.OPEN_SETTINGS, handler);
+      return () => { off(EVENTS.OPEN_SETTINGS, handler); };
+   }, []);
+
   return (
      <HashRouter>
         {/* 登录 Modal — 可关闭，关闭后主页可操作 */}
         <LoginPage open={loginOpen && !isLoggedIn} onClose={handleLoginClose} />

-         {/* 页面路由 + SettingsPage Drawer 叠加 */}
+         {/* 设置 Modal — 事件驱动，居中叠加，主页面始终挂载（对应 QT 原版独立设置窗口） */}
+         <SettingsPage open={settingsOpen} onClose={() => setSettingsOpen(false)} />
+
+         {/* 页面路由 */}
         <AppRoutes />
      </HashRouter>
   );
--- a/src/components/AppProvider.tsx
+++ b/src/components/AppProvider.tsx
@@ -2,11 +2,10 @@
 // AppProvider — 应用状态 Provider 组件
 // ============================================================

-import { useState, useCallback, useEffect, type ReactNode } from 'react';
+import { useState, useMemo, useCallback, useEffect, type ReactNode } from 'react';
 import type { Platform, Edition } from '@shared/types';

 import { getPlatform, isDev } from '@/utils/platform';
-import { parseEdition } from '@shared/constants/app';
 import { safeIpcOn, safeIpcOff } from '@/utils/ipc';
 import { AppContext } from '@/contexts/app-context';
 import type { AppContextValue } from '@/contexts/app-context';
@@ -30,12 +29,25 @@ interface AppProviderProps {

 export function AppProvider({ children }: AppProviderProps) {
   const [platform] = useState<Platform>(getPlatform);
-   const [edition] = useState<Edition>(() => {
-      return parseEdition(import.meta.env.VITE_EDITION);
-   });
   const [isLoggedIn, setIsLoggedIn] = useState(false);
   const [user, setUser] = useState<LoginResponseBody | null>(null);

+   /**
+    * edition 从登录用户的 account_type 派生（运行时判断，无需构建变量）
+    *
+    * 映射关系：
+    *   "individual"                → personal  ← 个人用户
+    *   "company" | "employee"      → enterprise ← 企业用户
+    *   null（未登录）               → personal  ← 默认最小功能集
+    *
+    * 安全性：edition 是 useMemo 派生值，不可独立赋值；
+    * 不写入 localStorage，重启/登出后回退默认值，必须重新登录才能确权。
+    */
+   const edition: Edition = useMemo(() => {
+      if (!user) return 'personal';
+      return user.account_type === 'individual' ? 'personal' : 'enterprise';
+   }, [user]);
+
   // ---------- 登录 / 退出 ----------

   const login = useCallback(async (auth: LoginResponseBody) => {
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -1,19 +1,24 @@
 // ============================================================
-// Layout — 页面布局壳（NavBar + 页面内容 Outlet）
+// Layout — 页面布局壳（Banner轮播 + NavBar + 页面内容 Outlet）
+// BannerCarousel 仅在首页显示（路由为 "/" 或 ""）
 // ============================================================

-import { Outlet } from 'react-router-dom';
+import { useLocation, Outlet } from 'react-router-dom';
 import { theme as antTheme } from 'antd';
 import { NavBar } from './navbar';
+import { BannerCarousel } from '@/pages/home/components/BannerCarousel';

 export function Layout() {
   const { token } = antTheme.useToken();
+   const location = useLocation();
+   const isHomePage = location.pathname === '/' || location.pathname === '';

   return (
      <div
-         className="min-h-screen flex flex-col transition-colors duration-300"
+         className="h-screen flex flex-col transition-colors duration-300"
         style={{ background: token.colorBgLayout }}
      >
+         {isHomePage && <BannerCarousel />}
         <NavBar />
         <Outlet />
      </div>
--- a/src/components/ThemeProvider.tsx
+++ b/src/components/ThemeProvider.tsx
@@ -4,6 +4,7 @@

 import { useState, useEffect, useCallback, type ReactNode } from 'react';
 import { ConfigProvider } from 'antd';
+import zhCN from 'antd/locale/zh_CN';

 import { getThemeConfig } from '../theme/antd-theme';
 import {
@@ -66,7 +67,7 @@ export function ThemeProvider({ children }: ThemeProviderProps) {

   return (
      <ThemeContext.Provider value={ctx}>
-         <ConfigProvider theme={getThemeConfig(isDark)}>{children}</ConfigProvider>
+         <ConfigProvider theme={getThemeConfig(isDark)} locale={zhCN}>{children}</ConfigProvider>
      </ThemeContext.Provider>
   );
 }
--- a/src/components/navbar/NavBar.tsx
+++ b/src/components/navbar/NavBar.tsx
@@ -78,7 +78,9 @@ export function NavBar() {

            case 'button':
               if (item.key === 'logout') {
-                  logout();
+                   logout();
+               } else if (item.key === 'settings') {
+                   emit(EVENTS.OPEN_SETTINGS);
               }
               break;

--- a/src/components/navbar/nav-config.ts
+++ b/src/components/navbar/nav-config.ts
@@ -99,8 +99,7 @@ const personalRight: NavItemConfig[] = [
      key: 'settings',
      label: '设置',
      iconSrc: settingsSvg,
-      action: 'navigate',
-      target: '/settings',
+      action: 'button',
      position: 'right',
   },
   {
@@ -168,8 +167,7 @@ const enterpriseRight: NavItemConfig[] = [
      key: 'settings',
      label: '设置',
      iconSrc: settingsSvg,
-      action: 'navigate',
-      target: '/settings',
+      action: 'button',
      position: 'right',
   },
   {
--- a/src/contexts/home-context.ts
+++ b/src/contexts/home-context.ts
@@ -0,0 +1,43 @@
+// ============================================================
+// HomeContext — 首页状态管理
+// 管理：选中模型、任务分页、选中任务记录、刷新信号
+// ============================================================
+
+import { createContext, useContext } from 'react';
+import type { ModelsListResponseBody } from '@/services/modules/models';
+import type { TaskInfoItemResponseBody } from '@/services/modules/task';
+
+// ---------- Context 类型 ----------
+
+export interface HomeContextValue {
+   /** 当前选中的模型 */
+   selectedModel: ModelsListResponseBody | null;
+   setSelectedModel: (model: ModelsListResponseBody | null) => void;
+
+   /** 任务记录分页 — 当前页码 */
+   taskPage: number;
+   /** 任务记录分页 — 每页条数 */
+   taskPageSize: number;
+   setTaskPage: (page: number) => void;
+   setTaskPageSize: (size: number) => void;
+
+   /** 当前选中的任务记录（用于右侧预览） */
+   selectedTask: TaskInfoItemResponseBody | null;
+   setSelectedTask: (task: TaskInfoItemResponseBody | null) => void;
+
+   /** 侧边栏折叠状态 */
+   isLeftCollapsed: boolean;
+   toggleLeftCollapsed: () => void;
+}
+
+export const HomeContext = createContext<HomeContextValue | null>(null);
+
+// ---------- Consumer Hook ----------
+
+export function useHomeContext(): HomeContextValue {
+   const ctx = useContext(HomeContext);
+   if (!ctx) {
+      throw new Error('useHomeContext() 必须在 <HomeProvider> 内部调用');
+   }
+   return ctx;
+}
--- a/src/hooks/use-api.ts
+++ b/src/hooks/use-api.ts
@@ -0,0 +1,166 @@
+// ============================================================
+// use-api.ts — 业务 API Hook 集合
+//
+// 基于 useAsyncData / useAsyncMutation 封装各模块 API，
+// 组件只需调用 Hook 获取 { data, loading, error } 三元组，
+// 不再需要在组件内手写 useEffect + cancelled flag + useState。
+//
+// 每个 Hook 自动处理：
+//   - 登录状态门控（enabled: isLoggedIn）
+//   - 竞态条件
+//   - 错误日志
+//   - 用户可读错误信息（errorMessage）
+// ============================================================
+
+import { useMemo } from 'react';
+import { useAppContext } from '@/contexts/app-context';
+import {
+   TaskAPI,
+   ModelAPI,
+   fetchBanners,
+   MODEL_CATEGORY_LABELS,
+   type TaskListRequestParams,
+   type TaskInfoItemResponseBody,
+   type CreatTaskRequestBody,
+   type ModelsListResponseBody,
+   type Banner,
+   type ModelCategory,
+} from '@/services/modules';
+import { useAsyncData, useAsyncMutation } from './use-async';
+
+// ============================================================
+// Banner
+// ============================================================
+
+/** 首页轮播图数据 Hook */
+export function useBannerList() {
+   const { isLoggedIn } = useAppContext();
+
+   return useAsyncData<Banner[]>(
+      fetchBanners,
+      [],
+      { enabled: isLoggedIn, label: 'banner-list' },
+   );
+}
+
+// ============================================================
+// 模型
+// ============================================================
+
+/** 模型列表数据 Hook（按类别分别请求后合并） */
+export function useModelList() {
+   const { isLoggedIn } = useAppContext();
+
+   // 使用单个 fetcher 返回合并后的结果
+   const result = useAsyncData<ModelsListResponseBody[]>(
+      async () => {
+         const categories: ModelCategory[] = ['txt2img', 'img2img', 'img2video', 'txt2audio'];
+         const results = await Promise.allSettled(
+            categories.map((category) =>
+               ModelAPI.fetchModels({
+                  provider_name: '',
+                  category,
+                  page: 1,
+                  page_size: 50,
+               }),
+            ),
+         );
+
+         const allModels: ModelsListResponseBody[] = [];
+         results.forEach((r) => {
+            if (r.status === 'fulfilled') {
+               allModels.push(...r.value);
+            }
+         });
+         // 按优先级降序排列
+         allModels.sort((a, b) => b.priority - a.priority);
+         return allModels;
+      },
+      [],
+      { enabled: isLoggedIn, label: 'model-list' },
+   );
+
+   // 按类别分组
+   const groupedModels = useMemo(() => {
+      const groups = new Map<string, ModelsListResponseBody[]>();
+      result.data?.forEach((model) => {
+         const cat = model.category_name || 'other';
+         if (!groups.has(cat)) groups.set(cat, []);
+         groups.get(cat)!.push(model);
+      });
+      return groups;
+   }, [result.data]);
+
+   return {
+      ...result,
+      /** 按类别分组后的模型 */
+      groupedModels,
+   };
+}
+
+// ============================================================
+// 任务列表
+// ============================================================
+
+export interface UseTaskListParams {
+   /** 完整的 API 请求参数（由调用方根据 antd Table onChange 构建） */
+   requestParams: TaskListRequestParams;
+   /** 外部传入的刷新信号（任意变化触发重新请求） */
+   refreshSignal?: number;
+}
+
+/**
+ * 任务列表 Hook（分页 + 筛选 + 排序）
+ *
+ * 调用方负责构建 TaskListRequestParams（包括 edition-aware 的 user_ids 逻辑），
+ * 本 Hook 仅负责数据获取、竞态控制、错误日志。
+ */
+export function useTaskList(params: UseTaskListParams) {
+   const { isLoggedIn } = useAppContext();
+   const { requestParams, refreshSignal = 0 } = params;
+
+   return useAsyncData(
+      () => TaskAPI.getTaskList(requestParams),
+      [requestParams, refreshSignal],
+      { enabled: isLoggedIn, label: 'task-list' },
+   );
+}
+
+// ============================================================
+// 任务详情
+// ============================================================
+
+/** 任务详情 Hook（taskId 为 null 时不请求） */
+export function useTaskDetail(taskId: string | null | undefined) {
+   const { isLoggedIn } = useAppContext();
+
+   return useAsyncData<TaskInfoItemResponseBody>(
+      () => TaskAPI.getTaskInfo(taskId!),
+      [taskId],
+      { enabled: isLoggedIn && !!taskId, label: 'task-detail' },
+   );
+}
+
+// ============================================================
+// 提交任务
+// ============================================================
+
+/** 提交任务 Mutation Hook */
+export function useSubmitTask(options?: {
+   onSuccess?: (data: TaskInfoItemResponseBody) => void;
+   onError?: (err: Error) => void;
+}) {
+   return useAsyncMutation<TaskInfoItemResponseBody, [CreatTaskRequestBody]>(
+      (body) => TaskAPI.submitTask(body),
+      {
+         label: 'submit-task',
+         onSuccess: options?.onSuccess,
+         onError: options?.onError,
+      },
+   );
+}
+
+// ---------- 重新导出类型和工具 ----------
+
+export { MODEL_CATEGORY_LABELS };
+export type { ModelCategory, ModelsListResponseBody, TaskInfoItemResponseBody, Banner };
--- a/src/hooks/use-async.ts
+++ b/src/hooks/use-async.ts
@@ -0,0 +1,254 @@
+// ============================================================
+// useAsyncData / useAsyncMutation — 通用异步数据 Hook
+//
+// 职责：
+//   - 自动竞态处理（仅应用最后一次请求的结果）
+//   - 自动错误日志记录
+//   - RequestErrorType → 用户可读错误信息映射
+//   - 为 use-api.ts 提供基础设施
+//
+// 用法：
+//   const { data, loading, error, refetch } = useAsyncData(
+//     () => TaskAPI.getTaskList(params),
+//     [page, pageSize],
+//     { enabled: isLoggedIn },
+//   );
+//
+//   const { execute, loading, error } = useAsyncMutation(
+//     (body) => TaskAPI.submitTask(body),
+//     { onSuccess: () => refetchTasks() },
+//   );
+// ============================================================
+
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { RequestError, RequestErrorType } from '@/services/types';
+import { logger } from '@/utils/logger';
+
+// ---------- 错误信息映射 ----------
+
+/** RequestErrorType → 用户可读的默认错误信息 */
+export function getErrorMessage(err: unknown): string {
+   if (err instanceof RequestError) {
+      switch (err.type) {
+         case RequestErrorType.NETWORK:
+            return '网络连接失败，请检查网络';
+         case RequestErrorType.TIMEOUT:
+            return '请求超时，请稍后重试';
+         case RequestErrorType.HTTP:
+            return err.message || '服务器响应异常';
+         case RequestErrorType.BUSINESS:
+            return err.message || '业务处理失败';
+         case RequestErrorType.CANCELLED:
+            return '请求已取消';
+         case RequestErrorType.AUTH_EXPIRED:
+            return '登录已过期，请重新登录';
+         default:
+            return err.message || '未知错误';
+      }
+   }
+   if (err instanceof Error) {
+      return err.message || '发生未知错误';
+   }
+   return '发生未知错误';
+}
+
+// ---------- useAsyncData — 数据获取 ----------
+
+export interface UseAsyncDataOptions {
+   /** 是否启用请求（false 时不触发 fetch，常用于登录后才请求） */
+   enabled?: boolean;
+   /** 请求标识（用于日志，如 'task-list'、'models'） */
+   label?: string;
+}
+
+export interface UseAsyncDataReturn<T> {
+   /** 响应数据 */
+   data: T | null;
+   /** 是否正在加载（含首次请求和后续刷新） */
+   loading: boolean;
+   /** 错误对象（RequestError 或普通 Error） */
+   error: Error | null;
+   /** 用户可读的错误信息 */
+   errorMessage: string | null;
+   /** 手动触发重新请求 */
+   refetch: () => void;
+}
+
+/**
+ * 通用数据获取 Hook。
+ *
+ * - 当 `deps` 变化或 `refetch()` 调用时自动重新请求
+ * - 自动处理竞态条件（仅最后一次请求的结果生效）
+ * - `enabled: false` 时不发起请求（适用于需登录后请求的场景）
+ */
+export function useAsyncData<T>(
+   fetcher: () => Promise<T>,
+   deps: unknown[],
+   options: UseAsyncDataOptions = {},
+): UseAsyncDataReturn<T> {
+   const { enabled = true, label } = options;
+
+   const [data, setData] = useState<T | null>(null);
+   const [loading, setLoading] = useState(false);
+   const [error, setError] = useState<Error | null>(null);
+
+   // 竞态计数器
+   const raceRef = useRef(0);
+   // 手动刷新触发器
+   const [refreshTick, setRefreshTick] = useState(0);
+   // 是否已挂载（避免 setState on unmounted）
+   const mountedRef = useRef(true);
+
+   const refetch = useCallback(() => {
+      setRefreshTick((t) => t + 1);
+   }, []);
+
+   useEffect(() => {
+      mountedRef.current = true;
+      return () => { mountedRef.current = false; };
+   }, []);
+
+   useEffect(() => {
+      if (!enabled) {
+         setData(null);
+         setError(null);
+         return;
+      }
+
+      const raceId = ++raceRef.current;
+      let cancelled = false;
+
+      const run = async () => {
+         setLoading(true);
+         setError(null);
+         try {
+            const result = await fetcher();
+            if (!cancelled && raceId === raceRef.current && mountedRef.current) {
+               setData(result);
+            }
+         } catch (err) {
+            if (!cancelled && raceId === raceRef.current && mountedRef.current) {
+               const normalized = err instanceof Error ? err : new Error(String(err));
+               setError(normalized);
+               // 仅在非取消、非认证过期时记录日志（取消是预期行为，认证过期由拦截器统一处理）
+               if (err instanceof RequestError) {
+                  if (err.type !== RequestErrorType.CANCELLED && err.type !== RequestErrorType.AUTH_EXPIRED) {
+                     logger.warn('request', `${label || 'fetch'} 请求失败`, normalized);
+                  }
+               } else {
+                  logger.warn('request', `${label || 'fetch'} 请求失败`, normalized);
+               }
+            }
+         } finally {
+            if (!cancelled && raceId === raceRef.current && mountedRef.current) {
+               setLoading(false);
+            }
+         }
+      };
+
+      void run();
+
+      return () => {
+         cancelled = true;
+      };
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+   }, [enabled, refreshTick, ...deps]);
+
+   return {
+      data,
+      loading,
+      error,
+      errorMessage: error ? getErrorMessage(error) : null,
+      refetch,
+   };
+}
+
+// ---------- useAsyncMutation — 数据变更 ----------
+
+export interface UseAsyncMutationOptions<T, Args extends unknown[]> {
+   /** 请求标识（用于日志） */
+   label?: string;
+   /** 成功回调 */
+   onSuccess?: (data: T, ...args: Args) => void;
+   /** 失败回调 */
+   onError?: (err: Error, ...args: Args) => void;
+}
+
+export interface UseAsyncMutationReturn<T, Args extends unknown[]> {
+   /** 执行变更 */
+   execute: (...args: Args) => Promise<T | undefined>;
+   /** 是否正在执行 */
+   loading: boolean;
+   /** 最近一次错误 */
+   error: Error | null;
+   /** 用户可读的错误信息 */
+   errorMessage: string | null;
+   /** 清除错误状态 */
+   reset: () => void;
+}
+
+/**
+ * 通用数据变更 Hook（POST / PUT / DELETE 等）。
+ *
+ * - 不自动执行，需手动调用 `execute()`
+ * - 返回 Promise，调用方可 await 获取结果
+ * - 自动错误日志记录
+ */
+export function useAsyncMutation<T, Args extends unknown[] = []>(
+   mutator: (...args: Args) => Promise<T>,
+   options: UseAsyncMutationOptions<T, Args> = {},
+): UseAsyncMutationReturn<T, Args> {
+   const { label, onSuccess, onError } = options;
+
+   const [loading, setLoading] = useState(false);
+   const [error, setError] = useState<Error | null>(null);
+   const mountedRef = useRef(true);
+
+   useEffect(() => {
+      mountedRef.current = true;
+      return () => { mountedRef.current = false; };
+   }, []);
+
+   const execute = useCallback(
+      async (...args: Args): Promise<T | undefined> => {
+         setLoading(true);
+         setError(null);
+         try {
+            const result = await mutator(...args);
+            if (mountedRef.current) {
+               setLoading(false);
+            }
+            onSuccess?.(result, ...args);
+            return result;
+         } catch (err) {
+            const normalized = err instanceof Error ? err : new Error(String(err));
+            if (mountedRef.current) {
+               setError(normalized);
+               setLoading(false);
+            }
+            if (err instanceof RequestError) {
+               if (err.type !== RequestErrorType.CANCELLED && err.type !== RequestErrorType.AUTH_EXPIRED) {
+                  logger.warn('request', `${label || 'mutation'} 执行失败`, normalized);
+               }
+            } else {
+               logger.warn('request', `${label || 'mutation'} 执行失败`, normalized);
+            }
+            onError?.(normalized, ...args);
+            return undefined;
+         }
+      },
+      [mutator, label, onSuccess, onError],
+   );
+
+   const reset = useCallback(() => {
+      setError(null);
+   }, []);
+
+   return {
+      execute,
+      loading,
+      error,
+      errorMessage: error ? getErrorMessage(error) : null,
+      reset,
+   };
+}
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,53 +1,53 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import { App as AntdApp } from 'antd';
+import {App as AntdApp} from 'antd';

 import App from './App';
-import { ThemeProvider } from './components/ThemeProvider';
-import { AppProvider } from './components/AppProvider';
-import { SettingsProvider } from './components/SettingsProvider';
+import {ThemeProvider} from './components/ThemeProvider';
+import {AppProvider} from './components/AppProvider';
+import {SettingsProvider} from './components/SettingsProvider';
 // 全局样式（包含 Tailwind 指令 + 主题扩展 + 重置）
 import './theme/globals.css';

 ReactDOM.createRoot(document.getElementById('root')!).render(
-   <React.StrictMode>
-      {/* AppProvider — 全局应用状态（平台/版本/登录态） */}
-      <AppProvider>
-         {/* ThemeProvider 内部管理 ConfigProvider（亮色/暗色切换） */}
-         <ThemeProvider>
-            {/* SettingsProvider — 集中管理设置项（存储路径等） */}
-            <SettingsProvider>
-               {/* AntdApp 提供 message / notification / modal 的静态方法上下文 */}
-               <AntdApp>
-                  <App />
-               </AntdApp>
-            </SettingsProvider>
-         </ThemeProvider>
-      </AppProvider>
-   </React.StrictMode>,
+    <React.StrictMode>
+        {/* AppProvider — 全局应用状态（平台/版本/登录态） */}
+        <AppProvider>
+            {/* ThemeProvider 内部管理 ConfigProvider（亮色/暗色切换） */}
+            <ThemeProvider>
+                {/* SettingsProvider — 集中管理设置项（存储路径等） */}
+                <SettingsProvider>
+                    {/* AntdApp 提供 message / notification / modal 的静态方法上下文 */}
+                    <AntdApp>
+                        <App />
+                    </AntdApp>
+                </SettingsProvider>
+            </ThemeProvider>
+        </AppProvider>
+    </React.StrictMode>,
 );

 // 仅在 Electron 环境中监听主进程消息（浏览器预览时跳过）
 import { safeIpcOn } from './utils/ipc';
 safeIpcOn('main-process-message', (_event: unknown, message: unknown) => {
-   console.log('[Main Process Message]:', message);
+    console.log('[Main Process Message]:', message);
 });

 // 渲染进程全局未捕获错误（兜底记录到日志文件）
-import { logger } from './utils/logger';
+import {logger} from './utils/logger';

 window.addEventListener('error', (event) => {
-   logger.error('ui', 'Uncaught error (renderer)', event.error, {
-      filename: event.filename,
-      lineno: event.lineno,
-      colno: event.colno,
-   });
+    logger.error('ui', 'Uncaught error (renderer)', event.error, {
+        filename: event.filename,
+        lineno: event.lineno,
+        colno: event.colno,
+    });
 });

 window.addEventListener('unhandledrejection', (event) => {
-   const error =
-      event.reason instanceof Error
-         ? event.reason
-         : new Error(String(event.reason));
-   logger.error('ui', 'Unhandled promise rejection (renderer)', error);
+    const error =
+        event.reason instanceof Error
+            ? event.reason
+            : new Error(String(event.reason));
+    logger.error('ui', 'Unhandled promise rejection (renderer)', error);
 });
--- a/src/pages/home/HomeContent.tsx
+++ b/src/pages/home/HomeContent.tsx
@@ -0,0 +1,267 @@
+// ============================================================
+// HomeContent — 首页三列正文布局 + HomeProvider
+// 可拖拽调整三栏宽度，所有数据请求在登录后发送
+// ============================================================
+
+import { useState, useCallback, useRef, useEffect, useMemo } from 'react';
+import { theme as antTheme, Empty } from 'antd';
+
+import { HomeContext } from '@/contexts/home-context';
+import { useAppContext } from '@/contexts/app-context';
+import type { ModelsListResponseBody, TaskInfoItemResponseBody } from '@/services/modules';
+import { LeftPanel } from './components/LeftPanel';
+import { CenterPanel } from './components/CenterPanel';
+import { RightPanel } from './components/RightPanel';
+
+import { Typography } from 'antd';
+
+const { Text } = Typography;
+
+// ---------- 常量 ----------
+
+/** 左列最小/默认宽度 */
+const LEFT_MIN = 400;
+const LEFT_DEFAULT = 750;
+/** 右列最小/默认宽度 */
+const RIGHT_MIN = 300;
+const RIGHT_DEFAULT = 480;
+/** 拖拽分隔条宽度 */
+const DIVIDER_WIDTH = 6;
+
+// ---------- 组件 ----------
+
+export function HomeContent() {
+   const { token } = antTheme.useToken();
+   const { isLoggedIn } = useAppContext();
+
+   // ======== HomeContext 状态 ========
+
+   const [selectedModel, setSelectedModel] = useState<ModelsListResponseBody | null>(null);
+   const [selectedTask, setSelectedTask] = useState<TaskInfoItemResponseBody | null>(null);
+   const [taskPage, setTaskPage] = useState(1);
+   const [taskPageSize, setTaskPageSize] = useState(10);
+   const [isLeftCollapsed, setIsLeftCollapsed] = useState(false);
+
+   const toggleLeftCollapsed = useCallback(() => {
+      setIsLeftCollapsed((v) => !v);
+   }, []);
+
+   const handleSetSelectedModel = useCallback(
+      (model: ModelsListResponseBody | null) => {
+         setSelectedModel(model);
+         setSelectedTask(null);
+      },
+      [],
+   );
+
+   const handleSetSelectedTask = useCallback(
+      (task: TaskInfoItemResponseBody | null) => {
+         setSelectedTask(task);
+      },
+      [],
+   );
+
+   const contextValue = useMemo(() => ({
+      selectedModel,
+      setSelectedModel: handleSetSelectedModel,
+      taskPage,
+      taskPageSize,
+      setTaskPage,
+      setTaskPageSize,
+      selectedTask,
+      setSelectedTask: handleSetSelectedTask,
+      isLeftCollapsed,
+      toggleLeftCollapsed,
+   }), [
+      selectedModel,
+      handleSetSelectedModel,
+      taskPage,
+      taskPageSize,
+      selectedTask,
+      handleSetSelectedTask,
+      isLeftCollapsed,
+      toggleLeftCollapsed,
+   ]);
+
+   // ======== 拖拽调整列宽 ========
+
+   const [leftWidth, setLeftWidth] = useState(LEFT_DEFAULT);
+   const [rightWidth, setRightWidth] = useState(RIGHT_DEFAULT);
+   const containerRef = useRef<HTMLDivElement>(null);
+
+   // 拖拽状态
+   const [dragging, setDragging] = useState<'left' | 'right' | null>(null);
+   // 分隔条 hover 状态
+   const [hoveredDivider, setHoveredDivider] = useState<'left' | 'right' | null>(null);
+   const dragState = useRef<{
+      startX: number;
+      startWidth: number;
+   }>({ startX: 0, startWidth: 0 });
+
+   const handleDividerMouseDown = (side: 'left' | 'right') => (e: React.MouseEvent) => {
+      e.preventDefault();
+      // eslint-disable-next-line react-hooks/refs
+      dragState.current = { startX: e.clientX, startWidth: side === 'left' ? leftWidth : rightWidth };
+      setDragging(side);
+   };
+
+   useEffect(() => {
+      const handleMouseMove = (e: MouseEvent) => {
+         if (!dragging) return;
+
+         const ds = dragState.current;
+         const delta = e.clientX - ds.startX;
+
+         if (dragging === 'left') {
+            const newWidth = Math.max(LEFT_MIN, ds.startWidth + delta);
+            setLeftWidth(newWidth);
+         } else {
+            const newWidth = Math.max(RIGHT_MIN, ds.startWidth - delta);
+            setRightWidth(newWidth);
+         }
+      };
+
+      const handleMouseUp = () => {
+         setDragging(null);
+      };
+
+      document.addEventListener('mousemove', handleMouseMove);
+      document.addEventListener('mouseup', handleMouseUp);
+
+      return () => {
+         document.removeEventListener('mousemove', handleMouseMove);
+         document.removeEventListener('mouseup', handleMouseUp);
+      };
+   }, [dragging]);
+
+   // ======== 分隔条样式工厂 ========
+
+   const dividerStyle = (side: 'left' | 'right'): React.CSSProperties => {
+      const isActive = dragging === side;
+      const isHovered = hoveredDivider === side;
+      return {
+         width: DIVIDER_WIDTH,
+         flexShrink: 0,
+         cursor: 'col-resize',
+         background: isActive
+            ? token.colorPrimary
+            : isHovered
+               ? `${token.colorPrimary}60`
+               : token.colorBorderSecondary,
+         position: 'relative' as const,
+         zIndex: 10,
+         display: 'flex',
+         alignItems: 'center',
+         justifyContent: 'center',
+         transition: 'background 0.2s ease',
+      };
+   };
+
+   // ======== 未登录提示 ========
+
+   if (!isLoggedIn) {
+      return (
+         <HomeContext.Provider value={contextValue}>
+            <div
+               style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  flex: 1,
+                  background: token.colorBgLayout,
+               }}
+            >
+               <Empty
+                  description={
+                     <Text type="secondary">
+                        请先登录后再使用首页功能
+                     </Text>
+                  }
+                  image={Empty.PRESENTED_IMAGE_SIMPLE}
+               />
+            </div>
+         </HomeContext.Provider>
+      );
+   }
+
+   // ======== 三列布局（可拖拽） ========
+
+   return (
+      <HomeContext.Provider value={contextValue}>
+         <div
+            ref={containerRef}
+            style={{
+               display: 'flex',
+               padding: 12,
+               gap: 0,
+               flex: 1,
+               overflow: 'hidden',
+               background: token.colorBgLayout,
+               cursor: !!dragging ? 'col-resize' : undefined,
+               userSelect: !!dragging ? 'none' : undefined,
+            }}
+         >
+            {/* 左列 */}
+            {!isLeftCollapsed && (
+               <>
+                  <div style={{ width: leftWidth, overflow: 'hidden', flexShrink: 0 }}>
+                     <LeftPanel />
+                  </div>
+
+                  {/* 左分隔条 */}
+                  <div
+                     onMouseDown={handleDividerMouseDown('left')}
+                     style={dividerStyle('left')}
+                     onMouseEnter={() => setHoveredDivider('left')}
+                     onMouseLeave={() => setHoveredDivider(null)}
+                  >
+                     {/* 拖拽手柄竖线 */}
+                     <div style={{
+                        width: 2,
+                        height: 32,
+                        borderRadius: 1,
+                        background: dragging === 'left'
+                           ? '#fff'
+                           : hoveredDivider === 'left'
+                              ? token.colorPrimary
+                              : token.colorBorder,
+                        transition: 'background 0.2s ease',
+                     }} />
+                  </div>
+               </>
+            )}
+
+            {/* 中列 */}
+            <div style={{ flex: 1, overflow: 'hidden', minWidth: 300 }}>
+               <CenterPanel />
+            </div>
+
+            {/* 右分隔条 */}
+            <div
+               onMouseDown={handleDividerMouseDown('right')}
+               style={dividerStyle('right')}
+               onMouseEnter={() => setHoveredDivider('right')}
+               onMouseLeave={() => setHoveredDivider(null)}
+            >
+               {/* 拖拽手柄竖线 */}
+               <div style={{
+                  width: 2,
+                  height: 32,
+                  borderRadius: 1,
+                  background: dragging === 'right'
+                     ? '#fff'
+                     : hoveredDivider === 'right'
+                        ? token.colorPrimary
+                        : token.colorBorder,
+                  transition: 'background 0.2s ease',
+               }} />
+            </div>
+
+            {/* 右列 */}
+            <div style={{ width: rightWidth, overflow: 'hidden', flexShrink: 0 }}>
+               <RightPanel />
+            </div>
+         </div>
+      </HomeContext.Provider>
+   );
+}
--- a/src/pages/home/HomePage.tsx
+++ b/src/pages/home/HomePage.tsx
@@ -1,277 +1,14 @@
 // ============================================================
-// HomePage — 首页仪表盘（从 App.tsx 提取）
+// HomePage — 首页（业务入口）
+// 组合：BannerCarousel（在 Layout 中）+ HomeContent（三列正文）
 // ============================================================

-import { useState } from 'react';
-import {
-   Button,
-   Card,
-   Space,
-   Tag,
-   Typography,
-   Switch as AntSwitch,
-   Slider,
-   Progress,
-   theme as antTheme,
-} from 'antd';
-import {
-   ApiOutlined,
-   ThunderboltOutlined,
-   BulbOutlined,
-   BulbFilled,
-   DownloadOutlined,
-   SyncOutlined,
-   CheckCircleOutlined,
-   ExclamationCircleOutlined,
-   RocketOutlined,
-} from '@ant-design/icons';
-
-import { getPlatformName, isDev } from '@/utils/platform';
-import { gradientPrimary } from '@/theme/tokens';
-import { useTheme } from '@/hooks/use-theme';
-import { useUpdater } from '@/hooks/use-updater';
-import { useAppContext } from '@/contexts/app-context';
-
-const { Title, Text } = Typography;
+import { HomeContent } from './HomeContent';

 export function HomePage() {
-   const { isDark, toggleTheme } = useTheme();
-   const { platform, edition, isLoggedIn, logout } = useAppContext();
-   const { token } = antTheme.useToken();
-   const [progress, setProgress] = useState(65);
-   const {
-      status: updateStatus,
-      progress: updateProgress,
-      info: updateInfo,
-      error: updateError,
-      checkForUpdates,
-      installUpdate,
-   } = useUpdater();
-
   return (
-      <div className="flex-1 p-8">
-         <div className="mx-auto max-w-4xl space-y-6">
-            {/* ---- 标题区 + 主题开关 ---- */}
-            <div className="text-center space-y-2">
-               <div className="flex items-center justify-center gap-4">
-                  <Title level={1} className="mb-0! gradient-primary-text">
-                     HeiXiu · 桌面工作台
-                  </Title>
-                  <AntSwitch
-                     checked={isDark}
-                     onChange={toggleTheme}
-                     checkedChildren={<BulbFilled />}
-                     unCheckedChildren={<BulbOutlined />}
-                     title={isDark ? '切换亮色模式' : '切换暗色模式'}
-                  />
-               </div>
-               <Text type="secondary">
-                  Electron + React 19 + TypeScript + Ant Design + Tailwind CSS
-               </Text>
-               <br />
-               <Space size={4}>
-                  <Tag color={isDark ? 'blue' : 'purple'}>
-                     {isDark ? '🌙 暗色' : '☀️ 亮色'}
-                  </Tag>
-                  <Tag color={edition === 'enterprise' ? 'gold' : 'green'}>
-                     {edition === 'enterprise' ? '企业版' : '个人版'}
-                  </Tag>
-                  {isLoggedIn ? (
-                     <>
-                        <Tag color="blue">已登录</Tag>
-                        <Button size="small" type="link" danger onClick={logout}>
-                           退出登录
-                        </Button>
-                     </>
-                  ) : (
-                     <Tag color="default">未登录</Tag>
-                  )}
-               </Space>
-            </div>
-
-            {/* ---- 导航栏状态提示 ---- */}
-            <Card size="small" variant="borderless" className="rounded-lg">
-               <Text type="secondary" className="text-xs">
-                  💡 当前使用 <Text strong>H5 自定义导航栏</Text> 替代系统菜单。
-                  {platform === 'darwin'
-                     ? ' macOS 保留了最小 Edit 菜单以支持 Cmd+C/V 等快捷键。'
-                     : ' Windows/Linux 已完全移除系统菜单栏。'}
-               </Text>
-            </Card>
-
-            {/* ---- 主题色预览 ---- */}
-            <Card
-               title="🎨 蓝紫渐变主题色预览"
-               variant="borderless"
-               className="rounded-lg shadow-lg"
-            >
-               <Space orientation="vertical" size="large" className="w-full">
-                  {/* 渐变展示 */}
-                  <div>
-                     <Text strong>品牌渐变</Text>
-                     <div className="flex gap-3 mt-2">
-                        <div
-                           className="flex-1 h-16 rounded-lg flex items-center justify-center text-white font-medium shadow-md"
-                           style={{ background: gradientPrimary }}
-                        >
-                           135° 渐变
-                        </div>
-                        <div
-                           className="flex-1 h-16 rounded-lg flex items-center justify-center text-white font-medium shadow-md"
-                           style={{ background: 'linear-gradient(90deg, #4F46E5, #7C3AED)' }}
-                        >
-                           90° 渐变
-                        </div>
-                     </div>
-                  </div>
-
-                  {/* 组件示例 */}
-                  <div>
-                     <Text strong>Ant Design 组件</Text>
-                     <Space wrap className="mt-2">
-                        <Button type="primary" icon={<ThunderboltOutlined />}>
-                           主按钮
-                        </Button>
-                        <Button>默认</Button>
-                        <Button type="dashed">虚线</Button>
-                        <Button type="text">文字</Button>
-                        <Button type="link">链接</Button>
-                     </Space>
-                  </div>
-
-                  {/* 滑块 + 进度条 */}
-                  <div>
-                     <Text strong>交互组件</Text>
-                     <div className="flex items-center gap-4 mt-2">
-                        <span className="text-sm" style={{ color: token.colorTextSecondary }}>
-                           进度:
-                        </span>
-                        <Slider
-                           className="flex-1"
-                           value={progress}
-                           onChange={setProgress}
-                           min={0}
-                           max={100}
-                        />
-                        <Progress
-                           type="circle"
-                           percent={progress}
-                           size={48}
-                           strokeColor={{ '0%': '#4F46E5', '100%': '#7C3AED' }}
-                        />
-                     </div>
-                  </div>
-               </Space>
-            </Card>
-
-            {/* ---- 平台信息 ---- */}
-            <Card title="🖥️ 系统信息" variant="borderless" className="rounded-lg shadow-lg">
-               <Space orientation="vertical" size="middle" className="w-full">
-                  <div className="flex items-center gap-2">
-                     <ApiOutlined style={{ color: token.colorPrimary }} />
-                     <Text strong>运行平台：</Text>
-                     <Tag color="purple">{getPlatformName()}</Tag>
-                  </div>
-                  <div className="flex items-center gap-2">
-                     <ApiOutlined style={{ color: token.colorPrimary }} />
-                     <Text strong>运行环境：</Text>
-                     <Tag color={isDev() ? 'blue' : 'green'}>
-                        {isDev() ? '开发模式' : '生产模式'}
-                     </Tag>
-                  </div>
-                  <div className="flex items-center gap-2">
-                     <ApiOutlined style={{ color: token.colorPrimary }} />
-                     <Text strong>当前导航：</Text>
-                     <Tag color="purple">
-                        H5 自定义导航栏（{edition === 'enterprise' ? '企业版' : '个人版'}
-                        布局）
-                     </Tag>
-                  </div>
-               </Space>
-            </Card>
-
-            {/* ---- 版本更新 ---- */}
-            <Card title="🔄 版本更新" variant="borderless" className="rounded-lg shadow-lg">
-               <Space orientation="vertical" size="middle" className="w-full">
-                  {/* 状态提示 */}
-                  {updateStatus === 'checking' && (
-                     <div className="flex items-center gap-2">
-                        <SyncOutlined spin style={{ color: token.colorPrimary }} />
-                        <Text type="secondary">正在检查更新...</Text>
-                     </div>
-                  )}
-                  {updateStatus === 'no-update' && (
-                     <div className="flex items-center gap-2">
-                        <CheckCircleOutlined style={{ color: token.colorSuccess }} />
-                        <Text type="success">已是最新版本</Text>
-                     </div>
-                  )}
-                  {updateStatus === 'error' && (
-                     <div className="flex items-center gap-2">
-                        <ExclamationCircleOutlined style={{ color: token.colorError }} />
-                        <Text type="danger">{updateError?.message || '检查更新失败'}</Text>
-                     </div>
-                  )}
-
-                  {/* 发现新版本 */}
-                  {(updateStatus === 'available' || updateStatus === 'downloading') && (
-                     <>
-                        <div className="flex items-center gap-2">
-                           <RocketOutlined style={{ color: token.colorPrimary }} />
-                           <Text strong>发现新版本：{updateInfo?.version}</Text>
-                           {updateInfo?.forceUpdate && <Tag color="red">强制更新</Tag>}
-                        </div>
-                        {updateInfo?.releaseNotes && (
-                           <Text type="secondary" className="text-xs whitespace-pre-line">
-                              {updateInfo.releaseNotes}
-                           </Text>
-                        )}
-                     </>
-                  )}
-
-                  {/* 下载进度 */}
-                  {updateStatus === 'downloading' && (
-                     <Progress
-                        percent={updateProgress.percent}
-                        strokeColor={{ '0%': '#4F46E5', '100%': '#7C3AED' }}
-                     />
-                  )}
-
-                  {/* 下载完成 */}
-                  {updateStatus === 'downloaded' && (
-                     <>
-                        <div className="flex items-center gap-2">
-                           <CheckCircleOutlined style={{ color: token.colorSuccess }} />
-                           <Text>更新已下载完毕，点击按钮安装并重启</Text>
-                        </div>
-                        <Button
-                           type="primary"
-                           icon={<DownloadOutlined />}
-                           onClick={installUpdate}
-                        >
-                           安装更新
-                        </Button>
-                     </>
-                  )}
-
-                  {/* 操作按钮 */}
-                  <div className="flex items-center gap-3">
-                     <Button
-                        icon={<SyncOutlined spin={updateStatus === 'checking'} />}
-                        onClick={checkForUpdates}
-                        disabled={updateStatus === 'checking'}
-                     >
-                        检查更新
-                     </Button>
-                     {isDev() && (
-                        <Text type="secondary" className="text-xs">
-                           （生产环境启动 5 秒后自动检查）
-                        </Text>
-                     )}
-                  </div>
-               </Space>
-            </Card>
-         </div>
+      <div style={{ flex: 1, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
+         <HomeContent />
      </div>
   );
 }
--- a/src/pages/home/components/BannerCarousel.tsx
+++ b/src/pages/home/components/BannerCarousel.tsx
@@ -0,0 +1,112 @@
+// ============================================================
+// BannerCarousel — 首页顶部轮播图
+// 使用 useBannerList() Hook 获取数据，组件仅负责渲染
+//
+// 关闭行为：
+//   - 关闭后当前会话不再显示（组件内 useState 驱动）
+//   - 刷新/重启应用 → state 重置 → 重新展示
+//   - 不做 localStorage 持久化，确保每次启动都可见
+// ============================================================
+
+import { useRef, useMemo, useState } from 'react';
+import { Carousel, Skeleton, Button } from 'antd';
+import { CloseOutlined } from '@ant-design/icons';
+import type { CarouselRef } from 'antd/es/carousel';
+
+import { useBannerList } from '@/hooks/use-api';
+import type { Banner } from '@/services/modules';
+
+// ---------- 组件 Props ----------
+
+interface BannerCarouselProps {
+   className?: string;
+}
+
+// ---------- 组件 ----------
+
+export function BannerCarousel({ className }: BannerCarouselProps) {
+   const carouselRef = useRef<CarouselRef>(null);
+   const { data: rawBanners, loading } = useBannerList();
+
+   /** 当前会话是否已关闭轮播图（组件卸载即重置，下次启动重新展示） */
+   const [dismissed, setDismissed] = useState(false);
+
+   // 过滤 + 排序（纯计算，无副作用）
+   const banners = useMemo<Banner[]>(() => {
+      if (!rawBanners) return [];
+      return rawBanners
+         .filter((b) => b.is_active)
+         .filter((b) => b.category === 'banner')
+         .sort((a, b) => a.sort_order - b.sort_order);
+   }, [rawBanners]);
+
+   // 用户已关闭或加载完成但无数据 → 不渲染
+   if (dismissed || (!loading && banners.length === 0)) {
+      return null;
+   }
+
+   // 加载态 — 适配长条比例（2280×90）
+   if (loading) {
+      return (
+         <div className={className} style={{ width: '100%' }}>
+            <Skeleton.Input active block style={{ height: 90 }} />
+         </div>
+      );
+   }
+
+   return (
+      <div
+         className={`banner-carousel ${className ?? ''}`}
+         style={{ position: 'relative', width: '100%', overflow: 'hidden', lineHeight: 0 }}
+      >
+         <Carousel
+            ref={carouselRef}
+            autoplay
+            autoplaySpeed={5000}
+            effect="fade"
+            pauseOnHover
+            adaptiveHeight={true}
+            dots={banners.length > 1}
+         >
+            {banners.map((banner) => (
+               <div key={banner.id}>
+                  <img
+                     src={banner.image_url}
+                     alt={banner.title}
+                     style={{ width: '100%', height: 'auto', display: 'block' }}
+                  />
+               </div>
+            ))}
+         </Carousel>
+
+         {/* 关闭按钮 — 右上角悬浮，半透明底色，hover 加深 */}
+         <Button
+            type="text"
+            size="small"
+            icon={<CloseOutlined />}
+            onClick={() => setDismissed(true)}
+            title="关闭轮播图"
+            style={{
+               position: 'absolute',
+               top: 8,
+               right: 8,
+               zIndex: 10,
+               color: '#fff',
+               background: 'rgba(0, 0, 0, 0.35)',
+               borderRadius: 4,
+               width: 24,
+               height: 24,
+               display: 'flex',
+               alignItems: 'center',
+               justifyContent: 'center',
+            }}
+            onMouseEnter={(e) => {
+               (e.currentTarget as HTMLButtonElement).style.background = 'rgba(0, 0, 0, 0.55)';
+            }}
+            onMouseLeave={(e) => {
+               (e.currentTarget as HTMLButtonElement).style.background = 'rgba(0, 0, 0, 0.35)';
+            }}
+         />
+      </div>
+   );
+}
--- a/src/pages/home/components/CenterPanel.tsx
+++ b/src/pages/home/components/CenterPanel.tsx
@@ -0,0 +1,23 @@
+// ============================================================
+// CenterPanel — 中列容器（模型输入表单）
+// ============================================================
+
+import { theme as antTheme } from 'antd';
+import { ModelInputForm } from './ModelInputForm';
+
+export function CenterPanel() {
+   const { token } = antTheme.useToken();
+
+   return (
+      <div
+         style={{
+            height: '100%',
+            overflow: 'hidden',
+            borderRadius: 8,
+            border: `1px solid ${token.colorBorderSecondary}`,
+         }}
+      >
+         <ModelInputForm />
+      </div>
+   );
+}
--- a/src/pages/home/components/LeftPanel.tsx
+++ b/src/pages/home/components/LeftPanel.tsx
@@ -0,0 +1,179 @@
+// ============================================================
+// LeftPanel — 左列容器（模型选择 + 可拖拽分割线 + 任务搜索 + 任务记录）
+// 纵向拖拽分隔线支持鼠标调整上下区域高度比例
+//
+// 职责：布局 + edition 分发，子组件自行管理数据和搜索状态
+// ============================================================
+
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { theme as antTheme } from 'antd';
+import { ModelSelector } from './ModelSelector';
+import { TaskHistory } from './TaskHistory';
+
+// ---------- 常量 ----------
+
+/** 模型选择区最小高度 */
+const TOP_MIN = 120;
+/** 任务列表区最小高度 */
+const BOTTOM_MIN = 200;
+/** 默认模型选择区百分比 */
+const TOP_DEFAULT_PCT = 0.40;
+/** 拖拽分隔条高度 */
+const DIVIDER_HEIGHT = 6;
+
+// ---------- 组件 ----------
+
+export function LeftPanel() {
+   const { token } = antTheme.useToken();
+
+   // 面板容器引用
+   const containerRef = useRef<HTMLDivElement>(null);
+
+   // 模型选择区高度（像素）
+   const [topHeight, setTopHeight] = useState<number | null>(null);
+   // 拖拽状态
+   const [dragging, setDragging] = useState(false);
+   // hover 状态
+   const [hovered, setHovered] = useState(false);
+
+   const dragState = useRef<{
+      startY: number;
+      startHeight: number;
+   }>({ startY: 0, startHeight: 0 });
+
+   // 初始化：按百分比计算顶部高度
+   const initHeight = useCallback(() => {
+      const el = containerRef.current;
+      if (!el) return;
+      const total = el.clientHeight;
+      setTopHeight(Math.max(TOP_MIN, Math.round(total * TOP_DEFAULT_PCT)));
+   }, []);
+
+   useEffect(() => {
+      initHeight();
+   }, [initHeight]);
+
+   // 响应容器 resize（窗口大小变化时重新按比例计算）
+   useEffect(() => {
+      const el = containerRef.current;
+      if (!el) return;
+      const observer = new ResizeObserver(() => {
+         if (!dragging) {
+            const total = el.clientHeight;
+            setTopHeight((prev) => {
+               if (prev === null) return Math.max(TOP_MIN, Math.round(total * TOP_DEFAULT_PCT));
+               // 保持原有比例
+               const ratio = prev / total;
+               return Math.max(TOP_MIN, Math.round(total * Math.min(ratio, 0.8)));
+            });
+         }
+      });
+      observer.observe(el);
+      return () => observer.disconnect();
+   }, [dragging]);
+
+   // 拖拽事件
+   const handleDividerMouseDown = (e: React.MouseEvent) => {
+      e.preventDefault();
+      dragState.current = { startY: e.clientY, startHeight: topHeight ?? 200 };
+      setDragging(true);
+   };
+
+   useEffect(() => {
+      const handleMouseMove = (e: MouseEvent) => {
+         if (!dragging) return;
+
+         const el = containerRef.current;
+         if (!el) return;
+
+         const total = el.clientHeight;
+         const ds = dragState.current;
+         const delta = e.clientY - ds.startY;
+         const newTop = Math.max(TOP_MIN, Math.min(total - BOTTOM_MIN, ds.startHeight + delta));
+         setTopHeight(newTop);
+      };
+
+      const handleMouseUp = () => {
+         setDragging(false);
+      };
+
+      document.addEventListener('mousemove', handleMouseMove);
+      document.addEventListener('mouseup', handleMouseUp);
+
+      return () => {
+         document.removeEventListener('mousemove', handleMouseMove);
+         document.removeEventListener('mouseup', handleMouseUp);
+      };
+   }, [dragging]);
+
+   // 分隔条样式
+   const isActive = dragging;
+   const isHovered = hovered;
+
+   return (
+      <div
+         ref={containerRef}
+         style={{
+            display: 'flex',
+            flexDirection: 'column',
+            height: '100%',
+            overflow: 'hidden',
+            borderRadius: 8,
+            border: `1px solid ${token.colorBorderSecondary}`,
+         }}
+      >
+         {/* 上方：模型选择（高度由拖拽控制） */}
+         <div
+            style={{
+               height: topHeight ?? '40%',
+               overflow: 'hidden',
+               display: 'flex',
+               flexDirection: 'column',
+               flexShrink: 0,
+            }}
+         >
+            <ModelSelector />
+         </div>
+
+         {/* 纵向拖拽分隔条 */}
+         <div
+            onMouseDown={handleDividerMouseDown}
+            style={{
+               height: DIVIDER_HEIGHT,
+               flexShrink: 0,
+               cursor: 'row-resize',
+               background: isActive
+                  ? token.colorPrimary
+                  : isHovered
+                     ? `${token.colorPrimary}60`
+                     : token.colorBorderSecondary,
+               display: 'flex',
+               alignItems: 'center',
+               justifyContent: 'center',
+               transition: 'background 0.2s ease',
+               zIndex: 10,
+            }}
+            onMouseEnter={() => setHovered(true)}
+            onMouseLeave={() => setHovered(false)}
+         >
+            {/* 拖拽手柄横线 */}
+            <div style={{
+               height: 2,
+               width: 32,
+               borderRadius: 1,
+               background: isActive
+                  ? '#fff'
+                  : isHovered
+                     ? token.colorPrimary
+                     : token.colorBorder,
+               transition: 'background 0.2s ease',
+            }} />
+         </div>
+
+         {/* 下方：任务记录（剩余高度） */}
+         <div style={{ flex: 1, overflow: 'hidden', display: 'flex', flexDirection: 'column', minHeight: 0 }}>
+            <TaskHistory />
+         </div>
+      </div>
+   );
+}
--- a/src/pages/home/components/ModelInputForm.tsx
+++ b/src/pages/home/components/ModelInputForm.tsx
@@ -0,0 +1,463 @@
+// ============================================================
+// ModelInputForm — 动态模型输入表单
+// 根据选中模型的 param_schema + ui_config 动态渲染表单控件
+// ============================================================
+
+import { useState, useEffect, useMemo, useCallback } from 'react';
+import {
+   Form,
+   Input,
+   InputNumber,
+   Select,
+   Slider,
+   Button,
+   Typography,
+   Empty,
+   Upload,
+   Switch,
+   theme as antTheme,
+   message,
+} from 'antd';
+import {
+   SendOutlined,
+   UploadOutlined,
+   InboxOutlined,
+} from '@ant-design/icons';
+import type { UploadFile } from 'antd/es/upload';
+
+import { useHomeContext } from '@/contexts/home-context';
+import { useAppContext } from '@/contexts/app-context';
+import { useSubmitTask } from '@/hooks/use-api';
+import { emit, EVENTS } from '@/utils/event-bus';
+import type { TaskInfoItemResponseBody } from '@/services/modules';
+
+const { Text, Title } = Typography;
+const { TextArea } = Input;
+const { Dragger } = Upload;
+
+// ---------- 参数类型映射 ----------
+
+/** 从 ui_config 中解析的参数描述 */
+interface ParamDescriptor {
+   key: string;
+   label: string;
+   /** 控件类型 */
+   controlType: 'text' | 'number' | 'textarea' | 'select' | 'slider' | 'switch' | 'image-upload';
+   defaultValue?: unknown;
+   required?: boolean;
+   placeholder?: string;
+   /** 数值型：最小值 */
+   min?: number;
+   /** 数值型：最大值 */
+   max?: number;
+   /** 数值型：步长 */
+   step?: number;
+   /** select 型：选项列表 */
+   options?: Array<{ label: string; value: string | number }>;
+}
+
+/** 从 ui_config 对象中解析控件类型 */
+function inferControlType(config: Record<string, unknown>): ParamDescriptor['controlType'] {
+   const type = config.type as string | undefined;
+   if (!type) return 'text';
+
+   switch (type) {
+      case 'number':
+      case 'integer':
+      case 'float':
+         return 'number';
+      case 'textarea':
+      case 'text_area':
+      case 'prompt':
+         return 'textarea';
+      case 'select':
+      case 'dropdown':
+      case 'enum':
+         return 'select';
+      case 'slider':
+      case 'range':
+         return 'slider';
+      case 'switch':
+      case 'boolean':
+      case 'bool':
+         return 'switch';
+      case 'image':
+      case 'image-upload':
+      case 'file':
+         return 'image-upload';
+      default:
+         return 'text';
+   }
+}
+
+/** 从 param_schema + ui_config 构建参数描述符列表 */
+function buildParamDescriptors(
+   paramSchema: string[],
+   uiConfig: Record<string, unknown>,
+): ParamDescriptor[] {
+   return paramSchema.map((key) => {
+      const config = (uiConfig[key] || {}) as Record<string, unknown>;
+      const controlType = inferControlType(config);
+      return {
+         key,
+         label: (config.label as string) || key,
+         controlType,
+         defaultValue: config.default ?? config.defaultValue,
+         required: (config.required as boolean) || false,
+         placeholder: (config.placeholder as string) || `请输入${config.label || key}`,
+         min: config.min as number | undefined,
+         max: config.max as number | undefined,
+         step: config.step as number | undefined,
+         options: (config.options as ParamDescriptor['options']) || undefined,
+      };
+   });
+}
+
+// ---------- 组件 ----------
+
+export function ModelInputForm() {
+   const { token } = antTheme.useToken();
+   const { isLoggedIn } = useAppContext();
+   const { selectedModel } = useHomeContext();
+   const [form] = Form.useForm();
+   const [referenceFiles, setReferenceFiles] = useState<UploadFile[]>([]);
+
+   // 提交突变 Hook（自动处理 loading / error / 日志）
+   const { execute: submitTask, loading: submitting, errorMessage } = useSubmitTask({
+      onSuccess: useCallback(
+         (_data: TaskInfoItemResponseBody) => {
+            message.success('任务已提交');
+            // 通过事件总线通知 TaskHistory 刷新（替代 Context 中的 refreshTaskSignal）
+            emit(EVENTS.TASK_SUBMITTED);
+         },
+         [],
+      ),
+   });
+
+   // 选中模型时重置表单（仅当有选中模型时操作，避免 form 未连接警告）
+   useEffect(() => {
+      if (selectedModel) {
+         form.resetFields();
+      }
+      setReferenceFiles([]);
+   }, [selectedModel?.id]); // eslint-disable-line react-hooks/exhaustive-deps
+
+   // 参数描述符
+   const paramDescriptors = useMemo(() => {
+      if (!selectedModel) return [];
+      return buildParamDescriptors(
+         selectedModel.param_schema || [],
+         selectedModel.ui_config || {},
+      );
+   }, [selectedModel]);
+
+   // 提交
+   const handleSubmit = async () => {
+      if (!isLoggedIn) {
+         message.warning('请先登录后再提交任务');
+         return;
+      }
+      if (!selectedModel) return;
+
+      try {
+         const values = await form.validateFields();
+
+         // 分离固定字段和模型动态参数
+         const { prompt, negative_prompt, num_outputs, ...dynamicParams } = values;
+
+         // 构建提交参数（全部转为字符串值）
+         const params: Record<string, string> = {
+            prompt: String(prompt ?? ''),
+            negative_prompt: String(negative_prompt ?? ''),
+            num_outputs: String(num_outputs ?? 1),
+         };
+
+         // 动态参数统一转字符串
+         for (const [key, value] of Object.entries(dynamicParams)) {
+            if (value !== undefined && value !== null) {
+               params[key] = String(value);
+            }
+         }
+
+         // 参考图
+         if (referenceFiles.length > 0) {
+            const refUrls = referenceFiles
+               .filter((f) => f.status === 'done')
+               .map((f) => f.response?.url || f.url || f.name)
+               .filter(Boolean) as string[];
+            if (refUrls.length > 0) {
+               params.reference_images = JSON.stringify(refUrls);
+            }
+         }
+
+         // 使用 mutation Hook 提交（自动处理 loading / error / 日志）
+         await submitTask({ model_id: selectedModel.id, params });
+      } catch (err) {
+         if (err && typeof err === 'object' && 'errorFields' in err) {
+            // 表单验证错误，antd 会自动提示
+            return;
+         }
+         // 错误消息由 Hook 自动通过 errorMessage 提供
+         message.error(errorMessage || '任务提交失败，请重试');
+      }
+   };
+
+   // 渲染单个参数控件
+   const renderParamControl = (desc: ParamDescriptor) => {
+      const commonProps = {
+         placeholder: desc.placeholder,
+         style: { width: '100%' },
+      };
+
+      switch (desc.controlType) {
+         case 'number':
+            return (
+               <InputNumber
+                  {...commonProps}
+                  min={desc.min}
+                  max={desc.max}
+                  step={desc.step}
+                  style={{ width: '100%' }}
+               />
+            );
+
+         case 'textarea':
+            return <TextArea rows={3} {...commonProps} />;
+
+         case 'select':
+            return (
+               <Select
+                  {...commonProps}
+                  options={desc.options}
+                  allowClear
+               />
+            );
+
+         case 'slider':
+            return (
+               <Slider
+                  min={desc.min ?? 1}
+                  max={desc.max ?? 100}
+                  step={desc.step ?? 1}
+                  marks={
+                     desc.min !== undefined && desc.max !== undefined
+                        ? { [desc.min]: `${desc.min}`, [desc.max]: `${desc.max}` }
+                        : undefined
+                  }
+                  tooltip={{ formatter: (v) => v }}
+               />
+            );
+
+         case 'switch':
+            return <Switch />;
+
+         case 'image-upload':
+            return (
+               <Upload
+                  listType="picture-card"
+                  maxCount={1}
+                  accept="image/png,image/jpg,image/jpeg,image/webp"
+                  beforeUpload={(file) => {
+                     const isImage = file.type.startsWith('image/');
+                     const isLt10M = file.size / 1024 / 1024 < 10;
+                     if (!isImage) {
+                        message.error('只能上传图片文件');
+                        return Upload.LIST_IGNORE;
+                     }
+                     if (!isLt10M) {
+                        message.error('图片大小不能超过 10MB');
+                        return Upload.LIST_IGNORE;
+                     }
+                     return false; // 手动上传
+                  }}
+               >
+                  <div>
+                     <UploadOutlined />
+                     <div style={{ marginTop: 4, fontSize: 12 }}>上传</div>
+                  </div>
+               </Upload>
+            );
+
+         default:
+            return <Input {...commonProps} />;
+      }
+   };
+
+   // ---- 未选择模型 ----
+   if (!selectedModel) {
+      return (
+         <div
+            style={{
+               display: 'flex',
+               alignItems: 'center',
+               justifyContent: 'center',
+               height: '100%',
+            }}
+         >
+            <Empty description="请在左侧选择一个模型" image={Empty.PRESENTED_IMAGE_SIMPLE} />
+         </div>
+      );
+   }
+
+   // ---- 表单 ----
+   return (
+      <div
+         style={{
+            height: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            overflow: 'hidden',
+         }}
+      >
+         {/* 模型标题 */}
+         <div
+            style={{
+               padding: '16px 20px',
+               borderBottom: `1px solid ${token.colorBorderSecondary}`,
+               flexShrink: 0,
+            }}
+         >
+            <Title level={4} style={{ margin: 0, fontSize: 18 }}>
+               {selectedModel.name}
+            </Title>
+            <Text type="secondary" style={{ fontSize: 12 }}>
+               {selectedModel.provider_name} · {selectedModel.category_name}
+            </Text>
+         </div>
+
+         {/* 可滚动表单区 */}
+         <div style={{ flex: 1, overflow: 'auto', padding: '16px 20px' }}>
+            <Form
+               form={form}
+               layout="vertical"
+               size="small"
+               initialValues={{ num_outputs: 1 }}
+            >
+               {/* ======== 固定字段 ======== */}
+
+               {/* 提示词 */}
+               <Form.Item
+                  name="prompt"
+                  label={<Text strong>提示词</Text>}
+                  rules={[{ required: true, message: '请输入提示词' }]}
+               >
+                  <TextArea
+                     rows={4}
+                     placeholder="描述你想要的画面、视频或音频内容..."
+                     showCount
+                     maxLength={2000}
+                  />
+               </Form.Item>
+
+               {/* 负面提示词 */}
+               <Form.Item
+                  name="negative_prompt"
+                  label={<Text type="secondary">负面提示词</Text>}
+               >
+                  <TextArea
+                     rows={2}
+                     placeholder="描述你不希望在结果中出现的内容（可选）"
+                     maxLength={1000}
+                  />
+               </Form.Item>
+
+               {/* 参考图 */}
+               <Form.Item label={<Text strong>参考图</Text>}>
+                  <Dragger
+                     multiple
+                     listType="picture"
+                     fileList={referenceFiles}
+                     onChange={({ fileList }) => setReferenceFiles(fileList)}
+                     accept="image/png,image/jpg,image/jpeg,image/webp"
+                     beforeUpload={(file) => {
+                        const isImage = file.type.startsWith('image/');
+                        const isLt10M = file.size / 1024 / 1024 < 10;
+                        if (!isImage) {
+                           message.error('只能上传图片文件');
+                           return Upload.LIST_IGNORE;
+                        }
+                        if (!isLt10M) {
+                           message.error('图片大小不能超过 10MB');
+                           return Upload.LIST_IGNORE;
+                        }
+                        return false;
+                     }}
+                     maxCount={5}
+                     style={{ marginBottom: 8 }}
+                  >
+                     <p className="ant-upload-drag-icon">
+                        <InboxOutlined />
+                     </p>
+                     <p className="ant-upload-text">点击或拖拽图片到此区域上传</p>
+                     <p className="ant-upload-hint">
+                        支持 PNG / JPG / WebP，单张不超过 10MB
+                     </p>
+                  </Dragger>
+               </Form.Item>
+
+               {/* 生成数量 */}
+               <Form.Item
+                  name="num_outputs"
+                  label={<Text strong>生成数量</Text>}
+               >
+                  <InputNumber min={1} max={10} style={{ width: '100%' }} />
+               </Form.Item>
+
+               {/* ======== 模型动态参数 ======== */}
+
+               {paramDescriptors.length > 0 && (
+                  <div
+                     style={{
+                        marginTop: 16,
+                        paddingTop: 16,
+                        borderTop: `1px solid ${token.colorBorderSecondary}`,
+                     }}
+                  >
+                     <Text strong style={{ display: 'block', marginBottom: 12 }}>
+                        模型参数
+                     </Text>
+                     {paramDescriptors.map((desc) => (
+                        <Form.Item
+                           key={desc.key}
+                           name={desc.key}
+                           label={desc.label}
+                           rules={desc.required ? [{ required: true, message: `请输入${desc.label}` }] : undefined}
+                           initialValue={desc.defaultValue}
+                           valuePropName={desc.controlType === 'switch' ? 'checked' : 'value'}
+                        >
+                           {renderParamControl(desc)}
+                        </Form.Item>
+                     ))}
+                  </div>
+               )}
+            </Form>
+         </div>
+
+         {/* 提交按钮 */}
+         <div
+            style={{
+               padding: '12px 20px',
+               borderTop: `1px solid ${token.colorBorderSecondary}`,
+               flexShrink: 0,
+            }}
+         >
+            <Button
+               type="primary"
+               icon={<SendOutlined />}
+               onClick={handleSubmit}
+               loading={submitting}
+               disabled={!isLoggedIn || !selectedModel}
+               block
+               size="large"
+               style={{
+                  background: token.colorPrimary,
+                  height: 44,
+                  fontSize: 16,
+               }}
+            >
+               开始生成
+            </Button>
+         </div>
+      </div>
+   );
+}
--- a/src/pages/home/components/ModelSelector.tsx
+++ b/src/pages/home/components/ModelSelector.tsx
@@ -0,0 +1,122 @@
+// ============================================================
+// ModelSelector — 模型选择器（垂直单选列表，按类别分组）
+// 使用 useModelList() Hook 获取数据，组件仅负责渲染
+// ============================================================
+
+import { useMemo } from 'react';
+import { Menu, Spin, Empty, Tag, Typography, theme as antTheme } from 'antd';
+import { AppstoreOutlined } from '@ant-design/icons';
+
+import { useModelList, MODEL_CATEGORY_LABELS } from '@/hooks/use-api';
+import { useHomeContext } from '@/contexts/home-context';
+import type { ModelCategory } from '@/services/modules';
+
+const { Text } = Typography;
+
+// ---------- 组件 ----------
+
+export function ModelSelector() {
+   const { token } = antTheme.useToken();
+   const { selectedModel, setSelectedModel } = useHomeContext();
+   const { data: models, loading, groupedModels } = useModelList();
+
+   // 构建 Menu items：分组标题 + 模型项
+   const menuItems = useMemo(() => {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const items: any[] = [];
+
+      groupedModels.forEach((groupModels, category) => {
+         const categoryLabel = MODEL_CATEGORY_LABELS[category as ModelCategory] || category;
+         items.push({
+            key: `group-${category}`,
+            label: (
+               <Text strong style={{ fontSize: 12, color: token.colorTextSecondary }}>
+                  {categoryLabel} ({groupModels.length})
+               </Text>
+            ),
+            type: 'group' as const,
+            children: groupModels.map((model) => ({
+               key: model.id,
+               label: (
+                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
+                     <Text
+                        style={{
+                           flex: 1,
+                           overflow: 'hidden',
+                           textOverflow: 'ellipsis',
+                           whiteSpace: 'nowrap',
+                           fontSize: 13,
+                        }}
+                        title={model.name}
+                     >
+                        {model.name}
+                     </Text>
+                     {model.status !== 'active' && (
+                        <Tag
+                           color={model.status === 'inactive' ? 'default' : 'orange'}
+                           style={{ fontSize: 10, lineHeight: '16px', padding: '0 4px' }}
+                        >
+                           {model.status === 'maintenance' ? '维护' : '停用'}
+                        </Tag>
+                     )}
+                  </div>
+               ),
+            })),
+         });
+      });
+
+      return items;
+   }, [groupedModels, token.colorTextSecondary]);
+
+   // 选中菜单项
+   const handleSelect = ({ key }: { key: string }) => {
+      const model = models?.find((m) => m.id === key);
+      if (model) {
+         setSelectedModel(model);
+      }
+   };
+
+   // 加载态
+   if (loading) {
+      return (
+         <div style={{ display: 'flex', justifyContent: 'center', padding: 24 }}>
+            <Spin size="small" />
+         </div>
+      );
+   }
+
+   // 空态
+   if (!models || models.length === 0) {
+      return <Empty description="暂无可用模型" image={Empty.PRESENTED_IMAGE_SIMPLE} />;
+   }
+
+   // 选中 key
+   const selectedKeys = selectedModel ? [selectedModel.id] : [];
+
+   return (
+      <div style={{ flex: 1, overflow: 'auto', minHeight: 0 }}>
+         <div
+            style={{
+               padding: '8px 12px',
+               borderBottom: `1px solid ${token.colorBorderSecondary}`,
+               display: 'flex',
+               alignItems: 'center',
+               gap: 6,
+            }}
+         >
+            <AppstoreOutlined style={{ color: token.colorPrimary, fontSize: 14 }} />
+            <Text strong style={{ fontSize: 13 }}>选择模型</Text>
+         </div>
+         <Menu
+            mode="inline"
+            selectedKeys={selectedKeys}
+            onSelect={handleSelect}
+            items={menuItems}
+            style={{
+               borderInlineEnd: 'none',
+               background: 'transparent',
+            }}
+         />
+      </div>
+   );
+}
--- a/src/pages/home/components/OutputPreview.tsx
+++ b/src/pages/home/components/OutputPreview.tsx
@@ -0,0 +1,165 @@
+// ============================================================
+// OutputPreview — 任务输出预览（图片 / 视频）
+// 使用 useTaskDetail() Hook 获取任务详情，组件仅负责渲染
+// ============================================================
+
+import { useMemo } from 'react';
+import { Image, Empty, Spin, Typography, Button, Tag, theme as antTheme } from 'antd';
+import {
+   EyeOutlined,
+   DownloadOutlined,
+   CloseCircleOutlined,
+} from '@ant-design/icons';
+
+import { useHomeContext } from '@/contexts/home-context';
+import { useTaskDetail } from '@/hooks/use-api';
+import type { TaskStatusString } from '@/services/modules';
+
+const { Text } = Typography;
+
+// ---------- 状态标签配置 ----------
+
+const STATUS_CONFIG: Record<TaskStatusString, { color: string; label: string }> = {
+   pending: { color: 'blue', label: '排队中' },
+   submitted: { color: 'cyan', label: '已提交' },
+   processing: { color: 'orange', label: '处理中' },
+   success: { color: 'green', label: '已完成' },
+   failed: { color: 'red', label: '失败' },
+};
+
+// ---------- 工具函数 ----------
+
+function isVideoUrl(url: string): boolean {
+   return /\.(mp4|webm|mov|avi|mkv)(\?|$)/i.test(url);
+}
+
+function splitAssets(assets: Array<{ url: string }>): { images: string[]; videos: string[] } {
+   const images: string[] = [];
+   const videos: string[] = [];
+   assets.forEach(({ url }) => {
+      if (isVideoUrl(url)) videos.push(url);
+      else images.push(url);
+   });
+   return { images, videos };
+}
+
+// ---------- 组件 ----------
+
+export function OutputPreview() {
+   const { token } = antTheme.useToken();
+   const { selectedTask } = useHomeContext();
+
+   // 数据获取（Hook 自动处理：taskId 为 null 时不请求、竞态、loading/error）
+   const { data: detail, loading } = useTaskDetail(selectedTask?.id);
+
+   // 从 output_assets 提取图片/视频
+   const { images, videos } = useMemo(() => {
+      if (!detail?.output_assets || detail.output_assets.length === 0) {
+         return { images: [], videos: [] };
+      }
+      return splitAssets(detail.output_assets);
+   }, [detail]);
+
+   const status = selectedTask?.status as TaskStatusString | undefined;
+   const statusCfg = status
+      ? (STATUS_CONFIG[status] || { color: 'default', label: status })
+      : { color: 'default', label: '未知' };
+
+   // ---- 无选中任务 ----
+   if (!selectedTask) {
+      return (
+         <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%' }}>
+            <Empty description="选择任务记录查看输出" image={Empty.PRESENTED_IMAGE_SIMPLE} />
+         </div>
+      );
+   }
+
+   // ---- 处理中 ----
+   if (status === 'pending' || status === 'submitted' || status === 'processing') {
+      return (
+         <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', gap: 16 }}>
+            <Spin size="large" />
+            <Tag color={statusCfg.color}>{statusCfg.label}</Tag>
+            <Text type="secondary">任务正在处理中，请稍候...</Text>
+         </div>
+      );
+   }
+
+   // ---- 失败 ----
+   if (status === 'failed') {
+      return (
+         <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', gap: 12 }}>
+            <CloseCircleOutlined style={{ fontSize: 48, color: '#ff4d4f' }} />
+            <Text type="danger" strong>任务执行失败</Text>
+            {detail?.error_message && (
+               <Text type="secondary" style={{ maxWidth: 300, textAlign: 'center', fontSize: 12 }}>
+                  {detail.error_message}
+               </Text>
+            )}
+         </div>
+      );
+   }
+
+   // ---- 加载中 ----
+   if (loading) {
+      return (
+         <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%' }}>
+            <Spin size="large" />
+         </div>
+      );
+   }
+
+   // ---- 无结果 ----
+   if (!detail || images.length + videos.length === 0) {
+      return (
+         <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%' }}>
+            <Empty description="暂无输出结果" image={Empty.PRESENTED_IMAGE_SIMPLE} />
+         </div>
+      );
+   }
+
+   // ---- 展示 ----
+   return (
+      <div style={{ height: '100%', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
+         <div style={{
+            padding: '12px 16px',
+            borderBottom: `1px solid ${token.colorBorderSecondary}`,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            flexShrink: 0,
+         }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+               <EyeOutlined style={{ fontSize: 14 }} />
+               <Text strong style={{ fontSize: 13 }}>输出预览</Text>
+               <Tag color={statusCfg.color} style={{ fontSize: 11 }}>{statusCfg.label}</Tag>
+            </div>
+            {videos.length > 0 && (
+               <Button size="small" type="link" icon={<DownloadOutlined />} href={videos[0]} target="_blank">
+                  下载视频
+               </Button>
+            )}
+         </div>
+
+         <div style={{ flex: 1, overflow: 'auto', padding: 12, display: 'flex', flexDirection: 'column', gap: 12 }}>
+            {videos.map((url, i) => (
+               <div key={i} style={{ borderRadius: 6, overflow: 'hidden', background: '#000' }}>
+                  <video controls style={{ width: '100%', maxHeight: 360, display: 'block' }} src={url}>
+                     您的浏览器不支持视频播放
+                  </video>
+               </div>
+            ))}
+            {images.length === 1 ? (
+               <Image src={images[0]} alt="输出结果" style={{ borderRadius: 6, width: '100%', objectFit: 'contain' }} />
+            ) : (
+               <Image.PreviewGroup>
+                  {images.map((url, i) => (
+                     <Image key={i} src={url} alt={`输出结果 ${i + 1}`}
+                        style={{ borderRadius: 6, width: '100%', objectFit: 'contain', marginBottom: 8 }} />
+                  ))}
+               </Image.PreviewGroup>
+            )}
+         </div>
+      </div>
+   );
+}
--- a/src/pages/home/components/RightPanel.tsx
+++ b/src/pages/home/components/RightPanel.tsx
@@ -0,0 +1,23 @@
+// ============================================================
+// RightPanel — 右列容器（输出预览）
+// ============================================================
+
+import { theme as antTheme } from 'antd';
+import { OutputPreview } from './OutputPreview';
+
+export function RightPanel() {
+   const { token } = antTheme.useToken();
+
+   return (
+      <div
+         style={{
+            height: '100%',
+            overflow: 'hidden',
+            borderRadius: 8,
+            border: `1px solid ${token.colorBorderSecondary}`,
+         }}
+      >
+         <OutputPreview />
+      </div>
+   );
+}
--- a/src/pages/home/components/TaskHistory.tsx
+++ b/src/pages/home/components/TaskHistory.tsx
@@ -0,0 +1,745 @@
+// ============================================================
+// TaskHistory — 任务记录列表（分页 + 列头筛选 + 排序 + 滚动）
+//
+// 筛选策略（混合模式）：
+//   - 服务端筛选（传 API）：status、model_id、user_id（企业版）
+//   - 客户端筛选（antd onFilter）：output_type、provider_name
+//   - 服务端不支持日期查询，时间范围筛选暂用 sorter 排序替代
+//   - 企业版才会在"用户"列显示筛选菜单
+//
+// 使用 antd Table onChange 统一管理 pagination + filters + sorter，
+// 参考 table-test.tsx 示例 4 的模式。
+// ============================================================
+
+import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import { Table, Tag, Typography, theme as antTheme, Popover, Checkbox, Button, Space } from 'antd';
+import type { ColumnsType, TableProps } from 'antd/es/table';
+import type { FilterValue, SorterResult } from 'antd/es/table/interface';
+import { HistoryOutlined, SearchOutlined, SettingOutlined } from '@ant-design/icons';
+
+import { useTaskList, useModelList } from '@/hooks/use-api';
+import { useAppContext } from '@/contexts/app-context';
+import { useHomeContext } from '@/contexts/home-context';
+import { useTheme } from '@/hooks/use-theme';
+import { on, off, EVENTS } from '@/utils/event-bus';
+import type {
+   TaskInfoItemResponseBody,
+   TaskListRequestParams,
+   TaskStatusString,
+} from '@/services/modules';
+import { TaskStatusMap, OutputTypeMap } from '@/services/modules';
+
+const { Text } = Typography;
+
+// ---------- 辅助类型 ----------
+
+/** antd Table onChange 中 filters 的类型 */
+type TableFilters = Record<string, FilterValue | null>;
+
+/** antd Table onChange 中 sorter 的类型（单列排序） */
+interface TableSorter {
+   field?: React.Key | readonly React.Key[];
+   order?: 'ascend' | 'descend';
+}
+
+/** 表格参数（缓存 antd onChange 的结果，用于构建 API 请求） */
+interface TableParams {
+   pagination: { current: number; pageSize: number };
+   filters: TableFilters;
+   sorter: TableSorter;
+}
+
+// ---------- 常量 ----------
+
+/** 状态筛选选项（来自 API 枚举） */
+const STATUS_FILTERS = Object.entries(TaskStatusMap).map(([value, label]) => ({
+   text: label,
+   value,
+}));
+
+/** 输出类型筛选选项（从 OutputTypeMap 派生） */
+const OUTPUT_TYPE_FILTERS = Object.entries(OutputTypeMap).map(([value, text]) => ({
+   text,
+   value,
+}));
+
+/** 状态标签配置（渲染用，含未来未知状态的降级处理） */
+const STATUS_CONFIG: Record<string, { color: string; label: string }> = {
+   pending: { color: 'blue', label: '排队中' },
+   submitted: { color: 'cyan', label: '已提交' },
+   processing: { color: 'orange', label: '处理中' },
+   success: { color: 'green', label: '已完成' },
+   failed: { color: 'red', label: '失败' },
+};
+
+/** 未知状态降级：后端新增状态时自动回退显示 key 原文 */
+function resolveStatus(s: string): { color: string; label: string } {
+   return STATUS_CONFIG[s] || { color: 'default', label: s };
+}
+
+// ---------- 列可见性持久化 ----------
+
+/** localStorage 键名（遵循 ele-heixiu-* 规范） */
+const COLUMN_VISIBILITY_KEY = 'ele-heixiu-table-columns';
+
+/** 列元数据（定义所有可用列 + 默认可见性） */
+interface ColumnMeta { key: string; title: string; defaultVisible: boolean }
+
+const ALL_COLUMNS: ColumnMeta[] = [
+   { key: 'id', title: '任务 ID', defaultVisible: true },
+   { key: 'created_at', title: '创建时间', defaultVisible: true },
+   { key: 'model_name', title: '模型', defaultVisible: true },
+   { key: 'output_type', title: '输出类型', defaultVisible: true },
+   { key: 'status', title: '状态', defaultVisible: true },
+   { key: 'prompt', title: '提示词', defaultVisible: true },
+   { key: 'duration', title: '时长', defaultVisible: true },
+   { key: 'cost_cent', title: '费用', defaultVisible: true },
+   { key: 'user_display_name', title: '用户', defaultVisible: true },
+   { key: 'provider_name', title: '供应商', defaultVisible: false },
+   { key: 'fps', title: '帧率', defaultVisible: false },
+   { key: 'file_size', title: '文件大小', defaultVisible: false },
+   { key: 'tags', title: '标签', defaultVisible: false },
+   { key: 'error_message', title: '错误信息', defaultVisible: false },
+];
+
+function readStoredColumns(): Set<string> | null {
+   try {
+      const raw = localStorage.getItem(COLUMN_VISIBILITY_KEY);
+      if (raw) {
+         const arr: unknown = JSON.parse(raw);
+         if (Array.isArray(arr) && arr.every((v) => typeof v === 'string')) return new Set(arr);
+      }
+   } catch { /* ignore */ }
+   return null;
+}
+
+function writeStoredColumns(visible: Set<string>): void {
+   try { localStorage.setItem(COLUMN_VISIBILITY_KEY, JSON.stringify([...visible])); } catch { /* ignore */ }
+}
+
+// ---------- 工具函数 ----------
+
+/** 从 filters 中提取单值筛选（如 status 单选） */
+function pickOne(filters: TableFilters, key: string): string | undefined {
+   const v = filters[key];
+   if (Array.isArray(v) && v.length > 0) return v[0] as string;
+   return undefined;
+}
+
+/** 从 filters 中提取多值筛选（如 model_ids、user_ids） */
+function pickMany(filters: TableFilters, key: string): string[] | undefined {
+   const v = filters[key];
+   if (Array.isArray(v) && v.length > 0) return v as string[];
+   return undefined;
+}
+
+// ---------- 组件 ----------
+
+export function TaskHistory() {
+   const { token } = antTheme.useToken();
+   const { edition } = useAppContext();
+   const {
+      selectedTask,
+      setSelectedTask,
+      taskPage,
+      taskPageSize,
+      setTaskPage,
+      setTaskPageSize,
+   } = useHomeContext();
+
+   const isEnterprise = edition === 'enterprise';
+
+   // -------- 列可见性 --------
+
+   const [visibleColumns, setVisibleColumns] = useState<Set<string>>(() => {
+      const stored = readStoredColumns();
+      if (stored) return stored;
+      return new Set(ALL_COLUMNS.filter((c) => c.defaultVisible).map((c) => c.key));
+   });
+
+   const handleColumnToggle = useCallback((key: string, checked: boolean) => {
+      setVisibleColumns((prev) => {
+         const next = new Set(prev);
+         if (checked) next.add(key); else next.delete(key);
+         writeStoredColumns(next);
+         return next;
+      });
+   }, []);
+
+   // -------- 主题感知斑马纹 / hover / 选中行 CSS --------
+
+   const { isDark } = useTheme();
+
+   const tableCss = useMemo(() => {
+      const searchIconColor = token.colorPrimary;
+      if (isDark) {
+         return `
+            .task-table .task-row-odd > td { background: rgba(255,255,255,0.02) !important; }
+            .task-table .task-row-even > td { background: transparent !important; }
+            .task-table .task-row-selected > td { background: ${token.blue}1A !important; }
+            .task-table .task-row-selected.task-row-odd > td { background: ${token.blue}22 !important; }
+            .task-table .ant-table-row:hover > td { background: rgba(255,255,255,0.05) !important; }
+            .task-table .task-row-selected:hover > td { background: ${token.blue}28 !important; }
+            .task-table .prompt-search-icon.filtered { color: ${searchIconColor} !important; }
+         `;
+      }
+      return `
+         .task-table .task-row-odd > td { background: #fafafa !important; }
+         .task-table .task-row-even > td { background: #ffffff !important; }
+         .task-table .task-row-selected > td { background: #e6f4ff !important; }
+         .task-table .task-row-selected.task-row-odd > td { background: #dceeff !important; }
+         .task-table .ant-table-row:hover > td { background: #f0f5ff !important; }
+         .task-table .task-row-selected:hover > td { background: #d6ebff !important; }
+         .task-table .prompt-search-icon.filtered { color: ${searchIconColor} !important; }
+      `;
+   }, [isDark, token.blue, token.colorPrimary]);
+
+   // -------- antd Table onChange 参数缓存 --------
+
+   const [tableParams, setTableParams] = useState<TableParams>({
+      pagination: { current: taskPage, pageSize: taskPageSize },
+      filters: {},
+      sorter: {},
+   });
+
+   // 同步 context 分页 ↔ tableParams
+   useEffect(() => {
+      setTableParams((prev) => ({
+         ...prev,
+         pagination: { current: taskPage, pageSize: taskPageSize },
+      }));
+   }, [taskPage, taskPageSize]);
+
+   // -------- 模型列表（用于模型列筛选选项 + 模型名→ID 映射）--------
+
+   // TODO: 与 ModelSelector 中的 useModelList 重复请求，后续统一缓存层
+   const { data: allModels } = useModelList();
+   const modelFilters = useMemo(() => {
+      if (!allModels) return [];
+      return allModels.map((m) => ({ text: m.name, value: m.id }));
+   }, [allModels]);
+
+   // -------- 供应商列表（从模型数据中提取）--------
+
+   const providerFilters = useMemo(() => {
+      if (!allModels) return [];
+      const seen = new Set<string>();
+      allModels.forEach((m) => {
+         if (m.provider_name) seen.add(m.provider_name);
+      });
+      return Array.from(seen).sort().map((name) => ({ text: name, value: name }));
+   }, [allModels]);
+
+   // -------- 用户列表（从当前任务数据中提取，仅企业版使用）--------
+   // TODO: 替换为独立的用户列表 API
+
+   const [userFilters, setUserFilters] = useState<Array<{ text: string; value: string }>>([]);
+
+   // -------- 构建 API 请求参数 --------
+
+   const requestParams = useMemo<TaskListRequestParams>(() => {
+      const req: TaskListRequestParams = {
+         page: tableParams.pagination.current,
+         page_size: tableParams.pagination.pageSize,
+      };
+      const { filters } = tableParams;
+
+      // 服务端筛选字段
+      const status = pickOne(filters, 'status');
+      if (status) req.status = status as TaskStatusString;
+
+      const modelIds = pickMany(filters, 'model_name');
+      if (modelIds) req.model_ids = modelIds;
+
+      // user_ids：仅企业版传入
+      if (isEnterprise) {
+         const userIds = pickMany(filters, 'user_id');
+         if (userIds) req.user_ids = userIds;
+      }
+
+      return req;
+   }, [tableParams, isEnterprise]);
+
+   // -------- 数据获取 --------
+
+   const [refreshTick, setRefreshTick] = useState(0);
+   const handleTaskSubmitted = useCallback(() => {
+      setRefreshTick((t) => t + 1);
+   }, []);
+
+   useEffect(() => {
+      on(EVENTS.TASK_SUBMITTED, handleTaskSubmitted);
+      return () => { off(EVENTS.TASK_SUBMITTED, handleTaskSubmitted); };
+   }, [handleTaskSubmitted]);
+
+   const {
+      data: taskData,
+      loading,
+      errorMessage,
+   } = useTaskList({
+      requestParams,
+      refreshSignal: refreshTick,
+   });
+
+   const tasks = taskData?.items ?? [];
+   const total = taskData?.total ?? 0;
+
+   // 从任务数据中提取用户列表（企业版筛选用）
+   useEffect(() => {
+      if (!isEnterprise || !taskData?.items) return;
+      const seen = new Set<string>();
+      taskData.items.forEach((t) => {
+         if (t.user_id && t.user_display_name) {
+            seen.add(JSON.stringify({ text: t.user_display_name, value: t.user_id }));
+         }
+      });
+      const newList = Array.from(seen).map((s) => JSON.parse(s) as { text: string; value: string });
+      setUserFilters((prev) => {
+         if (prev.length === newList.length) return prev; // 避免不必要的重渲染
+         return newList;
+      });
+   }, [isEnterprise, taskData]);
+
+   // -------- antd Table onChange --------
+
+   const handleTableChange: TableProps<TaskInfoItemResponseBody>['onChange'] = (
+      pagination,
+      filters,
+      sorter,
+   ) => {
+      // 同步分页到 Context
+      if (pagination.current && pagination.current !== taskPage) setTaskPage(pagination.current);
+      if (pagination.pageSize && pagination.pageSize !== taskPageSize) setTaskPageSize(pagination.pageSize);
+
+      // 缓存筛选和排序参数
+      const s = sorter as SorterResult<TaskInfoItemResponseBody>;
+      setTableParams({
+         pagination: {
+            current: pagination.current || taskPage,
+            pageSize: pagination.pageSize || taskPageSize,
+         },
+         filters: filters as TableFilters,
+         sorter: !Array.isArray(s) && s.field
+            ? { field: s.field, order: s.order as 'ascend' | 'descend' | undefined }
+            : {},
+      });
+   };
+
+   // -------- 表格列定义（含列头筛选/排序 + 可见性过滤）--------
+   //
+   // 列顺序：任务 ID(固定) → 创建时间 → 模型 → 输出类型 → 状态 → 提示词 →
+   //         时长(视频) → 费用 → 供应商 → 帧率/文件大小/标签/错误信息 → 用户(企业版)
+   //
+   // 可见性：通过标题栏齿轮图标控制，持久化到 localStorage
+   //
+   // ⚠️ 重要：columns 依赖中不出 token.colorPrimary，否则主题切换时 columns 重新生成
+   //   会导致 Table 内部状态重置（页码、筛选、排序等丢失）。
+   //   主题色通过 searchIconColorRef 传递，不触发 columns 重建。
+
+   /** 提示词搜索图标颜色（通过 CSS class 承载，避免 columns 依赖 token 导致主题切换重置状态） */
+
+   /** 提取视频时长（秒），非视频输出类型返回 null → 渲染 "-" */
+   function getVideoDuration(record: TaskInfoItemResponseBody): number | null {
+      if (record.output_type === 'video') {
+         return record.ui_params.duration ?? null;
+      }
+      return null;
+   }
+
+   /** 格式化时长：<60s 显示秒，≥60s 显示分秒 */
+   function formatDuration(seconds: number): string {
+      if (seconds < 60) return `${seconds} 秒`;
+      const m = Math.floor(seconds / 60);
+      const s = seconds % 60;
+      return s > 0 ? `${m} 分 ${s} 秒` : `${m} 分钟`;
+   }
+
+   const allColumns = useMemo<ColumnsType<TaskInfoItemResponseBody>>(() => {
+      const cols: ColumnsType<TaskInfoItemResponseBody> = [
+         // ---- 任务 ID（固定列） ----
+         {
+            title: '任务 ID',
+            dataIndex: 'id',
+            key: 'id',
+            width: 140,
+            ellipsis: true,
+            fixed: 'left',
+            render: (id: string) => (
+               <Text copyable={{ text: id }} style={{ fontSize: 12, fontFamily: 'monospace' }}>
+                  {id.slice(0, 10)}...
+               </Text>
+            ),
+         },
+         // ---- 创建时间 ----
+         {
+            title: '创建时间',
+            dataIndex: 'created_at',
+            key: 'created_at',
+            width: 155,
+            sorter: (a, b) => {
+               const da = a.created_at ? new Date(a.created_at).getTime() : 0;
+               const db = b.created_at ? new Date(b.created_at).getTime() : 0;
+               return da - db;
+            },
+            sortOrder: tableParams.sorter.field === 'created_at' ? tableParams.sorter.order : null,
+            render: (v: Date) => (
+               <Text style={{ fontSize: 11 }}>
+                  {v ? new Date(v).toLocaleString('zh-CN', {
+                     month: '2-digit', day: '2-digit',
+                     hour: '2-digit', minute: '2-digit', second: '2-digit',
+                  }) : '-'}
+               </Text>
+            ),
+         },
+         // ---- 模型 ----
+         {
+            title: '模型',
+            dataIndex: 'model_name',
+            key: 'model_name',
+            width: 130,
+            ellipsis: true,
+            filters: modelFilters,
+            filteredValue: (tableParams.filters.model_name as string[]) || null,
+            onFilter: () => true, // 服务端筛选
+            filterSearch: true,
+            filterMode: 'menu' as const,
+         },
+         // ---- 输出类型 ----
+         {
+            title: '输出类型',
+            dataIndex: 'output_type',
+            key: 'output_type',
+            width: 90,
+            filters: OUTPUT_TYPE_FILTERS,
+            filteredValue: (tableParams.filters.output_type as string[]) || null,
+            onFilter: (value, record) => record.output_type === value, // 客户端筛选
+            render: (t: string) => (
+               <Tag style={{ fontSize: 10 }}>
+                  {OutputTypeMap[t as keyof typeof OutputTypeMap] || t}
+               </Tag>
+            ),
+         },
+         // ---- 状态 ----
+         {
+            title: '状态',
+            dataIndex: 'status',
+            key: 'status',
+            width: 80,
+            filters: STATUS_FILTERS,
+            filteredValue: (tableParams.filters.status as string[]) || null,
+            onFilter: () => true, // 服务端筛选
+            render: (s: string) => {
+               const cfg = resolveStatus(s);
+               return <Tag color={cfg.color} style={{ fontSize: 10 }}>{cfg.label}</Tag>;
+            },
+         },
+         // ---- 提示词 ----
+         {
+            title: '提示词',
+            dataIndex: 'prompt',
+            key: 'prompt',
+            width: 160,
+            ellipsis: true,
+            filterIcon: (filtered: boolean) => (
+               <SearchOutlined className={`prompt-search-icon${filtered ? ' filtered' : ''}`} style={{ fontSize: 12 }} />
+            ),
+            filterDropdown: undefined, // TODO: 后续加自定义搜索框
+            render: (p: string | undefined) => (
+               <Text style={{ fontSize: 11 }} title={p}>{p || '-'}</Text>
+            ),
+         },
+         // ---- 时长（仅视频有数据，否则 "-"） ----
+         {
+            title: '时长',
+            key: 'duration',
+            width: 75,
+            sorter: (a, b) => {
+               const da = getVideoDuration(a) ?? -1;
+               const db = getVideoDuration(b) ?? -1;
+               return da - db;
+            },
+            sortOrder: tableParams.sorter.field === 'duration' ? tableParams.sorter.order : null,
+            render: (_: unknown, record: TaskInfoItemResponseBody) => {
+               const sec = getVideoDuration(record);
+               return <Text style={{ fontSize: 11 }}>{sec !== null ? formatDuration(sec) : '-'}</Text>;
+            },
+         },
+         // ---- 费用 ----
+         {
+            title: '费用',
+            dataIndex: 'cost_cent',
+            key: 'cost_cent',
+            width: 75,
+            sorter: (a, b) => a.cost_cent - b.cost_cent,
+            sortOrder: tableParams.sorter.field === 'cost_cent' ? tableParams.sorter.order : null,
+            render: (c: number) => (
+               <Text style={{ fontSize: 11 }}>¥{(c / 100).toFixed(2)}</Text>
+            ),
+         },
+         // ---- 供应商（默认隐藏） ----
+         {
+            title: '供应商',
+            dataIndex: 'provider_name',
+            key: 'provider_name',
+            width: 100,
+            ellipsis: true,
+            filters: providerFilters,
+            filteredValue: (tableParams.filters.provider_name as string[]) || null,
+            onFilter: (value, record) => record.provider_name === value, // 客户端筛选
+            filterSearch: true,
+         },
+         // ---- 帧率（占位列，待后端支持） ----
+         {
+            title: '帧率',
+            key: 'fps',
+            width: 70,
+            render: () => <Text type="secondary" style={{ fontSize: 11 }}>-</Text>,
+         },
+         // ---- 文件大小（占位列，待后端支持） ----
+         {
+            title: '文件大小',
+            key: 'file_size',
+            width: 85,
+            render: () => <Text type="secondary" style={{ fontSize: 11 }}>-</Text>,
+         },
+         // ---- 标签 ----
+         {
+            title: '标签',
+            dataIndex: 'tags',
+            key: 'tags',
+            width: 100,
+            ellipsis: true,
+            render: (tags: Array<string | null>) => {
+               const filtered = tags?.filter((t): t is string => t !== null) ?? [];
+               if (filtered.length === 0) return <Text type="secondary" style={{ fontSize: 11 }}>-</Text>;
+               return (
+                  <Space size={2} wrap>
+                     {filtered.slice(0, 2).map((t) => (
+                        <Tag key={t} style={{ fontSize: 9, lineHeight: '14px', margin: 0 }}>{t}</Tag>
+                     ))}
+                     {filtered.length > 2 && (
+                        <Text type="secondary" style={{ fontSize: 9 }}>+{filtered.length - 2}</Text>
+                     )}
+                  </Space>
+               );
+            },
+         },
+         // ---- 错误信息（失败任务时展示） ----
+         {
+            title: '错误信息',
+            dataIndex: 'error_message',
+            key: 'error_message',
+            width: 140,
+            ellipsis: true,
+            render: (msg: string) => msg
+               ? <Text type="danger" style={{ fontSize: 11 }} title={msg}>{msg}</Text>
+               : <Text type="secondary" style={{ fontSize: 11 }}>-</Text>,
+         },
+      ];
+
+      // 用户列：仅企业版可筛选
+      if (isEnterprise) {
+         cols.push({
+            title: '用户',
+            dataIndex: 'user_display_name',
+            key: 'user_id',
+            width: 100,
+            ellipsis: true,
+            filters: userFilters,
+            filteredValue: (tableParams.filters.user_id as string[]) || null,
+            onFilter: () => true, // 服务端筛选（传 user_ids）
+            render: (n: string | null) => (
+               <Text style={{ fontSize: 11 }}>{n || '-'}</Text>
+            ),
+         });
+      } else {
+         cols.push({
+            title: '用户',
+            dataIndex: 'user_display_name',
+            key: 'user_id',
+            width: 100,
+            ellipsis: true,
+            render: (n: string | null) => (
+               <Text style={{ fontSize: 11 }}>{n || '-'}</Text>
+            ),
+         });
+      }
+
+      return cols;
+   }, [
+      modelFilters,
+      providerFilters,
+      userFilters,
+      tableParams.filters,
+      tableParams.sorter,
+      isEnterprise,
+   ]);
+
+   // 按 visibleColumns 过滤实际展示的列
+   const columns = useMemo(
+      () => allColumns.filter((c) => visibleColumns.has(c.key as string)),
+      [allColumns, visibleColumns],
+   );
+
+   // -------- 表格高度 --------
+   //
+   // 核心策略：固定预留 pagination 区域高度，确保无论数据加载时机如何，
+   // 分页器始终有空间渲染，不会溢出可视区。
+   //
+   //   scroll.y = wrapper高度 - thead高度 - PAGINATION_RESERVE - 水平滚动条高度
+   //
+   // 为什么固定预留 pagination 而不是动态测量？
+   //   - 无数据/加载中时 pagination DOM 尚不存在 → offsetHeight=0 → scroll.y 偏大
+   //   - 翻页/切换 pageSize 时 pagination 异步渲染 → 测量时机不可控
+   //   - 固定预留值（48px 覆盖 small-size pagination + 上下间距）避免上述所有时序问题
+
+   /** 预留 pagination 高度（small-size: ~32px + 上下 padding/margin 8px × 2） */
+   const PAGINATION_RESERVE = 48;
+
+   const tableWrapperRef = useRef<HTMLDivElement>(null);
+   const [tableBodyHeight, setTableBodyHeight] = useState(400);
+
+   useEffect(() => {
+      const wrapper = tableWrapperRef.current;
+      if (!wrapper) return;
+
+      const calcHeight = () => {
+         const thead = wrapper.querySelector('.ant-table-thead') as HTMLElement | null;
+         const body = wrapper.querySelector('.ant-table-body') as HTMLElement | null;
+         const theadH = thead?.offsetHeight ?? 0;
+
+         // 水平滚动条占用高度（antd Table scroll.x 触发时出现）
+         let hScrollH = 0;
+         if (body && body.scrollWidth > body.clientWidth + 1) {
+            hScrollH = body.offsetHeight - body.clientHeight;
+         }
+
+         const available = wrapper.clientHeight - theadH - PAGINATION_RESERVE - hScrollH;
+         setTableBodyHeight(Math.max(120, available));
+      };
+
+      // ResizeObserver：容器尺寸变化（窗口拉伸、面板拖拽）
+      const resizeObserver = new ResizeObserver(calcHeight);
+      resizeObserver.observe(wrapper);
+
+      // MutationObserver：内部 DOM 变化（thead 高度变化如筛选菜单弹出、
+      // 数据加载后水平滚动条出现等）
+      const mutationObserver = new MutationObserver(calcHeight);
+      mutationObserver.observe(wrapper, { childList: true, subtree: true });
+
+      calcHeight();
+      return () => {
+         resizeObserver.disconnect();
+         mutationObserver.disconnect();
+      };
+   }, [taskPageSize]);
+
+   // -------- 行样式：斑马纹 + 选中行 --------
+
+   const rowClassName = (_record: TaskInfoItemResponseBody, index: number) => {
+      const base = index % 2 === 1 ? 'task-row-odd' : 'task-row-even';
+      return selectedTask?.id === _record.id ? `${base} task-row-selected` : base;
+   };
+
+   // -------- 是否有活跃筛选 --------
+
+   const hasActiveFilters = Object.values(tableParams.filters).some(
+      (v) => Array.isArray(v) && v.length > 0,
+   );
+
+   // ======== 渲染 ========
+
+   return (
+      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden', minHeight: 0 }}>
+         {/* 标题栏 */}
+         <div
+            style={{
+               padding: '6px 12px',
+               borderBottom: `1px solid ${token.colorBorderSecondary}`,
+               display: 'flex',
+               alignItems: 'center',
+               gap: 6,
+               flexShrink: 0,
+            }}
+         >
+            <HistoryOutlined style={{ fontSize: 14 }} />
+            <Text strong style={{ fontSize: 13 }}>任务记录</Text>
+            {total > 0 && (
+               <Text type="secondary" style={{ fontSize: 11 }}>共 {total} 条</Text>
+            )}
+            {hasActiveFilters && (
+               <Tag color="blue" style={{ fontSize: 10, lineHeight: '16px', padding: '0 4px' }}>
+                  已筛选
+               </Tag>
+            )}
+            {errorMessage && (
+               <Text type="danger" style={{ fontSize: 11, marginLeft: 'auto' }}>{errorMessage}</Text>
+            )}
+
+            {/* 列可见性控制 — 齿轮图标 */}
+            <Popover
+               trigger="click"
+               placement="bottomRight"
+               title="显示/隐藏列"
+               content={
+                  <Checkbox.Group
+                     value={[...visibleColumns]}
+                     style={{ display: 'flex', flexDirection: 'column', gap: 2 }}
+                  >
+                     {ALL_COLUMNS.map((col) => (
+                        <Checkbox
+                           key={col.key}
+                           value={col.key}
+                           disabled={col.key === 'id'}
+                           onChange={(e) => handleColumnToggle(col.key, e.target.checked)}
+                        >
+                           {col.title}
+                        </Checkbox>
+                     ))}
+                  </Checkbox.Group>
+               }
+            >
+               <Button
+                  type="text"
+                  size="small"
+                  icon={<SettingOutlined style={{ fontSize: 13 }} />}
+                  style={{ marginLeft: 'auto' }}
+                  title="列设置"
+               />
+            </Popover>
+         </div>
+
+         {/* 表格 — 横向 + 纵向滚动，筛选/排序通过列头操作 */}
+         <div ref={tableWrapperRef} style={{ flex: 1, overflow: 'hidden', minHeight: 0 }}>
+            <style>{tableCss}</style>
+            <Table<TaskInfoItemResponseBody>
+               className="task-table"
+               columns={columns}
+               dataSource={tasks}
+               rowKey="id"
+               size="small"
+               loading={loading}
+               showHeader={true}
+               scroll={{ x: isEnterprise ? 1350 : 1250, y: tableBodyHeight }}
+               rowClassName={rowClassName}
+               onRow={(record) => ({
+                  onClick: () => setSelectedTask(record),
+                  style: { cursor: 'pointer' },
+               })}
+               onChange={handleTableChange}
+               pagination={{
+                  current: tableParams.pagination.current,
+                  pageSize: tableParams.pagination.pageSize,
+                  total,
+                  size: 'small',
+                  showSizeChanger: true,
+                  pageSizeOptions: ['10', '20', '50'],
+                  placement: ['bottomCenter'],
+                  style: { marginBottom: 0 },
+               }}
+               locale={{ emptyText: '暂无任务记录', filterReset: '重置', filterConfirm: '确定' }}
+            />
+         </div>
+      </div>
+   );
+}
--- a/src/pages/login/index.tsx
+++ b/src/pages/login/index.tsx
@@ -111,7 +111,6 @@ export function LoginPage({ open, onClose }: LoginPageProps) {
   const loginTab = (
      <LoginForm
         initialUsername={authState.username}
-
         initialRemember={authState.remember}
         initialAutoLogin={authState.autoLogin}
         submitting={submitting}
--- a/src/pages/settings/SettingsPage.tsx
+++ b/src/pages/settings/SettingsPage.tsx
@@ -1,48 +1,47 @@
 // ============================================================
-// SettingsPage — 设置页面（路由命中 /settings 时以居中 Modal 叠加展示）
+// SettingsPage — 设置页面（Modal 居中叠加，事件驱动显隐）
 //
 // 核心设计：
-//   - 独立于 <Routes> 之外，通过 useLocation 判断是否渲染
-//   - 命中 /settings → Modal 居中弹出，首页内容保持在背景不动
-//   - 关闭 Modal → navigate(-1)，仅可通过 X 按钮关闭
-//   - destroyOnClose → 关闭即销毁 DOM，不堆内存
+//   - 通过 open/onClose props 控制显隐，不使用路由（避免主页面被卸载）
+//   - Modal 居中弹出 + 遮罩层，首页内容始终保持挂载不动
+//   - destroyOnHidden → 关闭即销毁 DOM，不堆内存
+//   - 仅可通过标题栏 X 按钮关闭（mask 不可关闭、ESC 禁用）
+//
+// 对应 QT 原版：设置窗口为独立窗口叠加在主窗口之上，主窗口不销毁
 // ============================================================

-import {Modal} from 'antd';
-import {SettingOutlined} from '@ant-design/icons';
-import {useLocation, useNavigate} from 'react-router-dom';
-import {useAppContext} from '@/contexts/app-context';
-import {ThemeSetting} from './ThemeSetting';
-import {StoragePathSetting} from './StoragePathSetting';
-import {SystemInfoSetting} from './SystemInfoSetting';
-import {UpdateSetting} from './UpdateSetting';
+import { Modal } from 'antd';
+import { SettingOutlined } from '@ant-design/icons';
+import { useAppContext } from '@/contexts/app-context';
+import { ThemeSetting } from './ThemeSetting';
+import { StoragePathSetting } from './StoragePathSetting';
+import { SystemInfoSetting } from './SystemInfoSetting';
+import { UpdateSetting } from './UpdateSetting';

-export function SettingsPage() {
-    const location = useLocation();
-    const navigate = useNavigate();
-    const {edition} = useAppContext();
-    const open = location.pathname === '/settings';
+interface SettingsPageProps {
+   open: boolean;
+   onClose: () => void;
+}
+
+export function SettingsPage({ open, onClose }: SettingsPageProps) {
+    const { edition } = useAppContext();

    return (
        <Modal
            open={open}
            width={480}
-            onCancel={() => navigate(-1)}
+            onCancel={onClose}
            destroyOnHidden={true}
-            mask={
-                {
-                    closable: false
-                }
-            }
+            mask={{ closable: false }}
            keyboard={false}
            footer={null}
            title={
                <span className="flex items-center gap-2">
-               <SettingOutlined />
-               设置
-            </span>
+                    <SettingOutlined />
+                    设置
+                </span>
            }
-            styles={{body: {padding: 0, maxHeight: '70vh', overflow: 'auto'}}}
+            styles={{ body: { padding: 0, maxHeight: '70vh', overflow: 'auto' } }}
        >
            <div className="flex flex-col gap-4 p-4">
                <ThemeSetting />
--- a/src/router/index.tsx
+++ b/src/router/index.tsx
@@ -2,25 +2,20 @@
 // AppRoutes — 应用路由配置（由 App.tsx 在 HashRouter 内使用）
 //
 // 核心设计：
-//   - SettingsPage 在 <Routes> 外部，路由命中时以 Drawer 叠加首页
+//   - Settings 等叠加层通过事件总线驱动 Drawer/Modal 展示，不走路由
 //   - 首页始终保持挂载，不会因导航而卸载
 // ============================================================

 import { Routes, Route } from 'react-router-dom';
 import { Layout } from '@/components/Layout';
 import { HomePage } from '@/pages/home/HomePage';
-import { SettingsPage } from '@/pages/settings';

 export function AppRoutes() {
   return (
-      <>
-         <Routes>
-            <Route path="/*" element={<Layout />}>
-               <Route index element={<HomePage />} />
-            </Route>
-         </Routes>
-         {/* 独立于 Routes：根据 URL /settings 自动显隐 Drawer */}
-         <SettingsPage />
-      </>
+      <Routes>
+         <Route path="/*" element={<Layout />}>
+            <Route index element={<HomePage />} />
+         </Route>
+      </Routes>
   );
 }
--- a/src/services/modules/auth.ts
+++ b/src/services/modules/auth.ts
@@ -149,42 +149,42 @@ export interface UsePhoneResetPasswordRequestBody {

 export class AuthAPI {
    /** 登录 */
-    static login(data: LoginRequestBody): Promise<LoginResponseBody> {
-        return post<LoginResponseBody>(AuthUrlObj.login, data);
+    static async login(data: LoginRequestBody): Promise<LoginResponseBody> {
+        return await post<LoginResponseBody>(AuthUrlObj.login, data);
    }

    /** 注册 */
-    static register(data: RegisterRequestBody): Promise<RegisterResponseBody> {
-        return post<RegisterResponseBody>(AuthUrlObj.register, data);
+    static async register(data: RegisterRequestBody): Promise<RegisterResponseBody> {
+        return await post<RegisterResponseBody>(AuthUrlObj.register, data);
    }

    /** 发送短信验证码 */
-    static sendSms(data: SendSMSRequestBody): Promise<void> {
-        return post<void>(AuthUrlObj.sendSms, data);
+    static async sendSms(data: SendSMSRequestBody): Promise<void> {
+        return await post<void>(AuthUrlObj.sendSms, data);
    }

    /** 刷新 Token */
-    static refreshToken(data: RefreshTokenRequestBody): Promise<RefreshTokenResponseBody> {
-        return post<RefreshTokenResponseBody>(AuthUrlObj.refreshToken, data);
+    static async refreshToken(data: RefreshTokenRequestBody): Promise<RefreshTokenResponseBody> {
+        return await post<RefreshTokenResponseBody>(AuthUrlObj.refreshToken, data);
    }

    /** 获取当前用户信息 */
-    static getUserInfo(): Promise<UserInfoBody> {
-        return get<UserInfoBody>(AuthUrlObj.userInfo);
+    static async getUserInfo(): Promise<UserInfoBody> {
+        return await get<UserInfoBody>(AuthUrlObj.userInfo);
    }

    /** 修改密码（已登录） */
-    static changePassword(data: ChangePasswordRequestBody): Promise<void> {
-        return post<void>(AuthUrlObj.changePassword, data);
+    static async changePassword(data: ChangePasswordRequestBody): Promise<void> {
+        return await post<void>(AuthUrlObj.changePassword, data);
    }

    /** 手机验证码重置密码 */
-    static resetPassword(data: UsePhoneResetPasswordRequestBody): Promise<void> {
-        return post<void>(AuthUrlObj.resetPassword, data);
+    static async resetPassword(data: UsePhoneResetPasswordRequestBody): Promise<void> {
+        return await post<void>(AuthUrlObj.resetPassword, data);
    }

    /** 退出登录 */
-    static logout(): Promise<void> {
-        return post<void>(AuthUrlObj.logout);
+    static async logout(): Promise<void> {
+        return await post<void>(AuthUrlObj.logout);
    }
 }
--- a/src/services/modules/banner.ts
+++ b/src/services/modules/banner.ts
@@ -0,0 +1,43 @@
+// ============================================================
+// Banner 模块 — 首页轮播图 API
+// GET /api/v1/banners
+// ============================================================
+
+import {get} from '../request';
+
+// ---------- 路由常量 ----------
+
+const BannerUrlObj = {
+    list: '/api/v1/creatives',
+} as const;
+
+// ---------- 类型 ----------
+
+/** 单条 Banner */
+export interface Banner {
+    id: number;
+    title: string;
+    content: "真人素材提示";
+    image_url: string;
+    link_url?: string;
+    category: "promotion" | "banner";
+    vip_level_id?: number;
+    sort_order: number;
+    is_active: boolean;
+    created_by: string;
+    created_at: Date;
+    updated_at: Date;
+}
+
+/** Banner 列表响应 */
+export type BannerListResponse = Banner[];
+
+// ---------- API ----------
+
+/**
+ * 获取 Banner 轮播图列表
+ * GET /api/v1/banners
+ */
+export function fetchBanners(): Promise<BannerListResponse> {
+    return get<BannerListResponse>(BannerUrlObj.list);
+}
--- a/src/services/modules/index.ts
+++ b/src/services/modules/index.ts
@@ -3,22 +3,56 @@
 // ============================================================

 export {
-   fetchAnnouncements,
-   type Announcement,
-   type AnnouncementType,
-   type AnnouncementListResponse,
+    fetchAnnouncements,
+    type Announcement,
+    type AnnouncementType,
+    type AnnouncementListResponse,
 } from './announcement';

 export {
-   AuthAPI,
-   type SendSMSRequestBody,
-   type RegisterRequestBody,
-   type RegisterResponseBody,
-   type LoginRequestBody,
-   type LoginResponseBody,
-   type RefreshTokenRequestBody,
-   type RefreshTokenResponseBody,
-   type UserInfoBody,
-   type ChangePasswordRequestBody,
-   type UsePhoneResetPasswordRequestBody,
+    AuthAPI,
+    type SendSMSRequestBody,
+    type RegisterRequestBody,
+    type RegisterResponseBody,
+    type LoginRequestBody,
+    type LoginResponseBody,
+    type RefreshTokenRequestBody,
+    type RefreshTokenResponseBody,
+    type UserInfoBody,
+    type ChangePasswordRequestBody,
+    type UsePhoneResetPasswordRequestBody,
 } from './auth';
+
+export {
+    fetchBanners,
+    type Banner,
+    type BannerListResponse,
+} from './banner';
+
+export {
+    ModelAPI,
+    MODEL_CATEGORY_LABELS,
+    type ModelsListReqeustParams,
+    type ModelsListResponseBody,
+    type ModelInfoRequestParams,
+    type ModelInfoResponseBody,
+    type ModelCategory,
+} from './models';
+
+export {
+    TaskAPI,
+    OutputTypeMap,
+    TaskStatusMap,
+    type OutputTypeString,
+    type TaskStatusString,
+    type TaskListRequestParams,
+    type CreatTaskRequestBody,
+    type ExportTaskCSVParams,
+    type ContentItem,
+    type ImageUiParams,
+    type VideoUiParams,
+    type AudioUiParams,
+    type TaskInfoItemResponseBody,
+    type TaskInfoDataResponseBody,
+    type TaskStatusResponseBody,
+} from './task';
--- a/src/services/modules/models.ts
+++ b/src/services/modules/models.ts
@@ -0,0 +1,87 @@
+import {get} from '../request';
+// 请注意后端没有关于字段category的查询
+// ---------- 路由常量 ----------
+
+const ModelsUrlObj = {
+    modelList: '/api/v1/models',
+    getModelInfo: '/api/v1/models/{model_id}',
+    estimateCost: '/api/v1/models/{model_id}/estimate'
+} as const;
+
+// ---------- 类型 ----------
+
+/** 模型类别 */
+export type ModelCategory = 'img2img' | 'txt2img' | 'img2video' | 'txt2audio';
+
+/** 模型类别中文映射 */
+export const MODEL_CATEGORY_LABELS: Record<ModelCategory, string> = {
+    img2img: '图生图',
+    txt2img: '文生图',
+    img2video: '图生视频',
+    txt2audio: '文生音频',
+};
+
+/**
+ * 查询可用模型的请求参数
+ */
+export interface ModelsListReqeustParams {
+    provider_name?: string;
+    category?: ModelCategory;
+    page: number;
+    page_size: number;
+}
+
+/**
+ * 查询可用模型的响应体
+ */
+export interface ModelsListResponseBody {
+    id: string;
+    name: string;
+    provider_name: string;
+    model_type: string;
+    category_name: string;
+    status: string;
+    priority: number;
+    response_mode: string;
+    pricing_config: Record<string, unknown>;
+    param_schema: string[];
+    quota_config: Record<string, unknown>;
+    ui_config: Record<string, unknown>;
+    meta_config: Record<string, unknown>;
+    constraints_config: Record<string, unknown>;
+    expires_at: string;
+    created_at: string;
+    updated_at: string;
+}
+
+/**
+ * 模型信息请求参数
+ */
+export interface ModelInfoRequestParams {
+    model_id: string;
+}
+
+/** 模型详情响应体（与列表项结构一致） */
+export type ModelInfoResponseBody = ModelsListResponseBody;
+
+// ---------- API ----------
+
+
+export class ModelAPI {
+    /**
+     * 获取可用模型列表
+     * GET /api/v1/models
+     */
+    static fetchModels(params: ModelsListReqeustParams): Promise<ModelsListResponseBody[]> {
+        return get<ModelsListResponseBody[]>(ModelsUrlObj.modelList, params as unknown as Record<string, unknown>);
+    }
+
+    /**
+     * 获取单个模型详情
+     * GET /api/v1/models/:id
+     */
+    static fetchModelInfo(modelId: string): Promise<ModelInfoResponseBody> {
+        const url = ModelsUrlObj.getModelInfo.replace('{model_id}', modelId);
+        return get<ModelInfoResponseBody>(url);
+    }
+}
--- a/src/services/modules/task.ts
+++ b/src/services/modules/task.ts
@@ -0,0 +1,232 @@
+// ============================================================
+// 任务模块 — 任务记录 CRUD API
+// GET    /api/v1/tasks              → 任务列表（分页/游标）
+// POST   /api/v1/tasks              → 提交任务
+// GET    /api/v1/tasks/:id          → 任务详情
+// GET    /api/v1/tasks/:id/status   → 轻量轮询状态
+// GET    /api/v1/tasks/export       → 导出 CSV
+//
+// TaskAPI 的静态方法直接返回 get/post 的 Promise<T>，
+// 不做额外的 async/await 包装，由调用方决定是否 await。
+// ============================================================
+
+import {get, post} from '../request';
+
+// ============================================================
+// 基础枚举 / 字面量类型
+// ============================================================
+
+/** 输出类型映射 */
+export enum OutputTypeMap {
+    image = '图片',
+    video = '视频',
+    audio = '音频',
+}
+
+export type OutputTypeString = keyof typeof OutputTypeMap;
+
+/** 任务状态 */
+export enum TaskStatusMap {
+    pending = '待处理',
+    submitted = '已提交',
+    processing = '处理中',
+    success = '成功',
+    failed = '失败',
+}
+
+export type TaskStatusString = keyof typeof TaskStatusMap;
+
+// ============================================================
+// 请求体 / 参数类型
+// ============================================================
+
+/** 任务列表请求参数 */
+export interface TaskListRequestParams {
+    status?: TaskStatusString;
+    user_ids?: string[];
+    model_ids?: string[];
+    /** 游标分页：上次最后一条的 created_at（ISO 8601） */
+    cursor?: string;
+    /** 页码（OFFSET 分页模式），default: 1 */
+    page?: number;
+    /** 每页条数，default: 20 */
+    page_size?: number;
+}
+
+/** 创建任务请求体 */
+export interface CreatTaskRequestBody {
+    model_id: string;
+    params: Record<string, string>;
+    device_id?: string;
+    tags?: string[];
+}
+
+/** 导出 CSV 参数 */
+export interface ExportTaskCSVParams {
+    start_date: Date;
+    end_date: Date;
+    status?: TaskStatusString;
+    user_ids?: string[];
+    model_ids?: string[];
+}
+
+// ============================================================
+// 内容项 — 带判别标签的联合类型
+// ============================================================
+
+interface BaseContentItem {
+    type: string;
+}
+
+interface TextContent extends BaseContentItem {
+    type: 'text';
+    text: string;
+}
+
+interface ImageUrlContent extends BaseContentItem {
+    type: 'image_url';
+    role: 'reference_image';
+    image_url: { url: string };
+}
+
+interface VideoUrlContent extends BaseContentItem {
+    type: 'video_url';
+    role: 'reference_video';
+    video_url: { url: string };
+}
+
+interface AudioContent extends BaseContentItem {
+    type: 'audio_url';
+    role: 'reference_audio';
+    audio_url: { url: string };
+}
+
+export type ContentItem =
+    | TextContent
+    | ImageUrlContent
+    | VideoUrlContent
+    | AudioContent;
+
+// ============================================================
+// 各输出类型的 UI 参数
+// ============================================================
+
+export interface ImageUiParams {
+    imageUrls?: string[];
+    prompt: string;
+    aspectRatio: string;
+    resolution?: string;
+}
+
+export interface VideoUiParams {
+    resolution?: string;
+    ratio?: string;
+    model?: string;
+    generate_audio: boolean;
+    duration: number;
+    content: ContentItem[];
+}
+
+export interface AudioUiParams {
+    format?: string;
+    sampleRate?: number;
+    bitrate?: number;
+}
+
+// ============================================================
+// 响应体 — 用判别联合按 output_type 分发
+// ============================================================
+
+/** 任务条目基类（不含 output_type 特有字段） */
+interface BaseTaskItemResponseBody {
+    id: string;
+    user_id: string;
+    model_id: string;
+    model_name: string;
+    provider_name: string;
+    status: TaskStatusString;
+    external_task_id: string;
+    cost_cent: number;
+    estimated_cost_cent: number;
+    error_code: string;
+    poll_attempts: number;
+    is_favorite: boolean;
+    submitted_at: Date;
+    finished_at: Date;
+    created_at: Date;
+    updated_at: Date;
+    prompt?: string;
+    output_assets?: Array<{ url: string }>;
+    tags: Array<string | null>;
+    error_message: string;
+    user_display_name: string | null;
+}
+
+/** 判别联合：根据 output_type 收窄 ui_params */
+export type TaskInfoItemResponseBody =
+    | (BaseTaskItemResponseBody & { output_type: 'image'; ui_params: ImageUiParams })
+    | (BaseTaskItemResponseBody & { output_type: 'video'; ui_params: VideoUiParams })
+    | (BaseTaskItemResponseBody & { output_type: 'audio'; ui_params: AudioUiParams });
+
+/** 任务列表分页响应 */
+export interface TaskInfoDataResponseBody {
+    has_more: boolean;
+    next_cursor: string;
+    page: number;
+    page_size: number;
+    total: number;
+    items: TaskInfoItemResponseBody[];
+}
+
+/** 轻量轮询状态响应 */
+export interface TaskStatusResponseBody {
+    task_id: string;
+    status: TaskStatusString;
+    progress: number;
+    output_assets?: string[];
+    error_code?: string;
+    error_message?: string;
+    cost_cent?: number;
+}
+
+// ============================================================
+// 路由常量
+// ============================================================
+
+const TaskUrlObj = {
+    task: '/api/v1/tasks',
+    taskInfo: (task_id: string) => `/api/v1/tasks/${task_id}`,
+    taskStatus: (task_id: string) => `/api/v1/tasks/${task_id}/status`,
+    tasksCSV: '/api/v1/tasks/export',
+} as const;
+
+// ============================================================
+// TaskAPI — 静态方法直接返回 Promise<T>，不做二次 async 包装
+// ============================================================
+
+export class TaskAPI {
+    /** 获取任务列表（分页/游标） */
+    static getTaskList(params: TaskListRequestParams): Promise<TaskInfoDataResponseBody> {
+        return get<TaskInfoDataResponseBody>(TaskUrlObj.task, params as Record<string, unknown>);
+    }
+
+    /** 提交新任务 */
+    static submitTask(body: CreatTaskRequestBody): Promise<TaskInfoItemResponseBody> {
+        return post<TaskInfoItemResponseBody>(TaskUrlObj.task, body);
+    }
+
+    /** 获取任务详情 */
+    static getTaskInfo(task_id: string): Promise<TaskInfoItemResponseBody> {
+        return get<TaskInfoItemResponseBody>(TaskUrlObj.taskInfo(task_id));
+    }
+
+    /** 轻量轮询任务状态 */
+    static getTaskStatus(task_id: string): Promise<TaskStatusResponseBody> {
+        return get<TaskStatusResponseBody>(TaskUrlObj.taskStatus(task_id));
+    }
+
+    /** 导出任务 CSV */
+    static exportTaskCSV(params: ExportTaskCSVParams): Promise<File> {
+        return get<File>(TaskUrlObj.tasksCSV, params as unknown as Record<string, unknown>);
+    }
+}
--- a/src/services/request.ts
+++ b/src/services/request.ts
@@ -177,7 +177,7 @@ instance.interceptors.response.use(

      // HTTP 200 但业务码非 0 → 业务错误
      if (data && data.code !== 0) {
-         // 401 → 尝试刷新 token 并重试（但 refresh 接口自身 401 必须直接拒绝，否则死循环）
+         // 业务码 401 → 尝试刷新 token 并重试（refresh 接口自身 401 直接拒绝）
         if (data.code === 401 && response.config) {
            if (isRefreshRequest(response.config)) {
               return Promise.reject(new RefreshError());
@@ -246,8 +246,11 @@ instance.interceptors.response.use(
      // HTTP 状态码错误
      const { status, data } = error.response;

-      // 401 → 尝试刷新 token 并重试（refresh 接口自身 401 直接拒绝，防死循环）
-      if (status === 401 && error.config) {
+      // 401 → 尝试刷新 token 并重试
+      // ⚠️ 同时检查响应体中的业务码 data.code：
+      //    data.code === 401  → token 过期 → 走刷新流程
+      //    data.code !== 401  → 其他认证错误（如密码错误）→ 透传后端 message
+      if (status === 401 && error.config && data?.code === 401) {
         if (isRefreshRequest(error.config)) {
            const refreshErr = new RefreshError();
            logger.debug('request', 'Refresh endpoint returned 401', {
--- a/src/theme/antd-theme.ts
+++ b/src/theme/antd-theme.ts
@@ -115,6 +115,7 @@ const sharedComponents: ThemeConfig['components'] = {
   },
   Pagination: {
      itemActiveBg: colorPrimary,
+      itemActiveColor: '#fff',
      colorPrimary,
      colorPrimaryHover: colorPrimaryLight,
   },
@@ -277,24 +278,24 @@ export const darkTheme: ThemeConfig = {
         defaultBorderColor: darkColorBorder,
      },
      Menu: {
-         itemSelectedBg: '#312E81',
+         itemSelectedBg: '#1E2460',
         itemSelectedColor: colorPrimaryLight,
-         itemHoverBg: '#242040',
-         itemActiveBg: '#1E1B4B',
+         itemHoverBg: '#151A48',
+         itemActiveBg: '#0F1442',
      },
      Layout: {
-         siderBg: `linear-gradient(180deg, #0B0A15 0%, #1A1730 100%)`,
+         siderBg: `linear-gradient(180deg, #050818 0%, #0D1140 100%)`,
         headerBg: darkColorBgContainer,
         bodyBg: darkColorBgLayout,
      },
      Table: {
-         headerBg: '#1E1B4B',
+         headerBg: '#0F1340',
         headerColor: darkColorTextBase,
-         rowHoverBg: '#242040',
+         rowHoverBg: '#181D52',
         borderColor: darkColorBorderSecondary,
      },
      Tag: {
-         defaultBg: '#1E1B4B',
+         defaultBg: '#1A1F54',
         defaultColor: colorPrimaryLight,
      },
   },
--- a/src/theme/globals.css
+++ b/src/theme/globals.css
@@ -94,16 +94,16 @@
 * ============================================================ */

 [data-theme='dark'] {
-   /* 中性色 — 暗色 */
-   --color-text-base: #e8e6f0;
-   --color-text-secondary: #a5a0c9;
-   --color-text-tertiary: #6e6998;
-   --color-bg-base: #0f0d1a;
-   --color-bg-container: #1a1730;
-   --color-bg-layout: #0b0a15;
-   --color-bg-elevated: #242040;
-   --color-border-base: #2e2a4a;
-   --color-border-secondary: #1f1c38;
+   /* 中性色 — 暗色（科技蓝紫） */
+   --color-text-base: #e8e8fa;
+   --color-text-secondary: #a0a8d8;
+   --color-text-tertiary: #6e78b0;
+   --color-bg-base: #080c24;
+   --color-bg-container: #0f1340;
+   --color-bg-layout: #050818;
+   --color-bg-elevated: #171b52;
+   --color-border-base: #2a3278;
+   --color-border-secondary: #1c2250;

   /* 暗色模式下品牌色提亮以保持对比度 */
   --color-primary: #818cf8;
--- a/src/theme/tokens.ts
+++ b/src/theme/tokens.ts
@@ -8,28 +8,14 @@

 // ---------- 品牌色（蓝紫渐变） ----------

-/** 品牌主色 — Indigo-500 */
 export const colorPrimary = '#6366F1';
-
-/** 品牌主色浅色变体 */
 export const colorPrimaryLight = '#818CF8';
-
-/** 品牌主色深色变体 */
 export const colorPrimaryDark = '#4F46E5';
-
-/** 品牌辅助色 — Violet-500（渐变另一端） */
 export const colorSecondary = '#8B5CF6';

-/** 品牌渐变色起始值 */
-export const gradientStart = '#4F46E5'; // Indigo-600
-
-/** 品牌渐变色结束值 */
-export const gradientEnd = '#7C3AED'; // Violet-600
-
-/** 品牌渐变色（CSS 值，可直接用于 background） */
+export const gradientStart = '#4F46E5';
+export const gradientEnd = '#7C3AED';
 export const gradientPrimary = `linear-gradient(135deg, ${gradientStart}, ${gradientEnd})`;
-
-/** 品牌渐变悬停态 */
 export const gradientPrimaryHover = `linear-gradient(135deg, ${colorPrimary}, ${colorSecondary})`;

 // ---------- 功能色 ----------
@@ -41,41 +27,43 @@ export const colorInfo = '#3B82F6';

 // ---------- 中性色（亮色模式） ----------

-export const colorTextBase = '#1E1B4B'; // 深蓝紫黑
+export const colorTextBase = '#1E1B4B';
 export const colorTextSecondary = '#6B7280';
 export const colorTextTertiary = '#9CA3AF';

 export const colorBgBase = '#FFFFFF';
 export const colorBgContainer = '#F9FAFB';
 export const colorBgElevated = '#FFFFFF';
-export const colorBgLayout = '#F5F3FF'; // Violet-50
+export const colorBgLayout = '#F5F3FF';
 export const colorBgSpotlight = '#F3F4F6';

-export const colorBorder = '#E5E7EB';
-export const colorBorderSecondary = '#F3F4F6';
+/** 亮色模式 — 面板边框（稍明显） */
+export const colorBorder = '#E2E0F0';
+/** 亮色模式 — 内部分隔线（可见但不强烈） */
+export const colorBorderSecondary = '#EEECF6';

-// ---------- 中性色（暗色模式） ----------
+// ---------- 中性色（暗色模式 — 融入品牌蓝紫调） ----------

 /** 暗色模式 — 主文字 */
-export const darkColorTextBase = '#E8E6F0';
+export const darkColorTextBase = '#E8E8FA';
 /** 暗色模式 — 次要文字 */
-export const darkColorTextSecondary = '#A5A0C9';
+export const darkColorTextSecondary = '#A0A8D8';
 /** 暗色模式 — 辅助文字 */
-export const darkColorTextTertiary = '#6E6998';
+export const darkColorTextTertiary = '#6E78B0';

-/** 暗色模式 — 基础背景 */
-export const darkColorBgBase = '#0F0D1A'; // 深蓝紫黑
-/** 暗色模式 — 容器背景 */
-export const darkColorBgContainer = '#1A1730'; // 抬升一层
-/** 暗色模式 — 悬浮背景 */
-export const darkColorBgElevated = '#242040'; // 再抬升一层
-/** 暗色模式 — 布局背景 */
-export const darkColorBgLayout = '#0B0A15'; // 最深背景
+/** 暗色模式 — 页面底色（深邃蓝黑） */
+export const darkColorBgBase = '#080C24';
+/** 暗色模式 — 卡片/面板背景（暗蓝紫） */
+export const darkColorBgContainer = '#0F1340';
+/** 暗色模式 — 悬浮层背景（微亮蓝紫） */
+export const darkColorBgElevated = '#171B52';
+/** 暗色模式 — 页面布局底层 */
+export const darkColorBgLayout = '#050818';

-/** 暗色模式 — 边框 */
-export const darkColorBorder = '#2E2A4A';
-/** 暗色模式 — 次要边框 */
-export const darkColorBorderSecondary = '#1F1C38';
+/** 暗色模式 — 面板外框（蓝紫边框，可见但不刺眼） */
+export const darkColorBorder = '#2A3278';
+/** 暗色模式 — 内部分隔线（柔和蓝紫，常驻可见） */
+export const darkColorBorderSecondary = '#1C2250';

 // ---------- 圆角 ----------

--- a/src/utils/event-bus.ts
+++ b/src/utils/event-bus.ts
@@ -69,4 +69,8 @@ export const EVENTS = {
   LOGIN_SUCCESS: 'auth:login-success',
   /** 退出登录 */
   LOGOUT: 'auth:logout',
+   /** 任务提交成功（→ 刷新任务列表） */
+   TASK_SUBMITTED: 'task:submitted',
+   /** 打开设置 Drawer（导航栏"设置"按钮点击） */
+   OPEN_SETTINGS: 'settings:open',
 } as const;
--- a/tsconfig.node.tsbuildinfo
+++ b/tsconfig.node.tsbuildinfo
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,10 +1,10 @@
-import { defineConfig, loadEnv } from 'vite';
+import {defineConfig, loadEnv} from 'vite';
 import path from 'node:path';
 import electron from 'vite-plugin-electron/simple';
 import react from '@vitejs/plugin-react';
 import renderer from 'vite-plugin-electron-renderer';
 import tailwindcss from '@tailwindcss/vite';
-import { visualizer } from 'rollup-plugin-visualizer';
+import {visualizer} from 'rollup-plugin-visualizer';

 const __dirname = import.meta.dirname;

@@ -17,80 +17,91 @@ const __dirname = import.meta.dirname;
 //                     如需避免，可把仅渲染进程用的类型放到 src/types/
 // ============================================================

-export default defineConfig(({ mode }) => {
-   // 加载 .env.development / .env.production 中的环境变量
-   const env = loadEnv(mode, __dirname, '');
+export default defineConfig(({mode}) => {
+    // 加载 .env.development / .env.production 中的环境变量
+    const env = loadEnv(mode, __dirname, '');

-   return {
-      plugins: [
-         react(),
-         tailwindcss(),
-         electron({
-            main: {
-               // 主进程入口
-               entry: 'electron/main.ts',
-               // 只监听 electron/ 目录，避免 shared/ 变更误触重启
-               // （默认会监听 entry 文件的所有依赖，包括 shared/）
-            },
-            preload: {
-               input: path.join(__dirname, 'electron/preload.ts'),
-            },
-         }),
-         renderer(),
-         // 打包体积分析（仅 ANALYZE=true 时生成 stats.html）
-         process.env.ANALYZE &&
-            visualizer({
-               open: true,
-               gzipSize: true,
-               brotliSize: true,
-               filename: 'dist/stats.html',
+    return {
+        plugins: [
+            react(),
+            tailwindcss(),
+            electron({
+                main: {
+                    // 主进程入口
+                    entry: 'electron/main.ts',
+                    // 只监听 electron/ 目录，避免 shared/ 变更误触重启
+                    // （默认会监听 entry 文件的所有依赖，包括 shared/）
+                },
+                preload: {
+                    input: path.join(__dirname, 'electron/preload.ts'),
+                },
            }),
-      ].filter(Boolean),
-      resolve: {
-         alias: {
-            '@': path.resolve(__dirname, 'src'),
-            '@shared': path.resolve(__dirname, 'shared'),
-         },
-      },
-      // ============================================================
-      // 编译时注入环境变量到主进程
-      // 主进程中的 process.env.xxx 会在编译时被替换为实际值
-      // 这样无需在 OS 环境中设置这些变量
-      // ============================================================
-      define: {
-         'process.env.UPDATE_API_URL': JSON.stringify(env.UPDATE_API_URL || 'https://www.heixiu.com'),
-         'process.env.EDITION': JSON.stringify(env.EDITION || 'personal'),
-      },
-      // ============================================================
-      // 开发服务器 & HMR 配置
-      // ============================================================
-      server: {
-         port: 5173,
-         strictPort: true,
-         host: 'localhost',
-         // 文件监听（Windows 优化）
-         watch: {
-            // Windows 上默认的 fs.watch 有时不稳定，
-            // 如果文件保存后界面无反应，可临时开启 usePolling
-            // usePolling: true,
-            // interval: 100,
-            // 忽略不需要监听的目录，减少 CPU 占用
-            ignored: ['**/node_modules/**', '**/dist/**', '**/dist-electron/**', '**/release/**', '**/test-server/**'],
-         },
-         // HMR 配置
-         hmr: {
-            // 在浏览器控制台显示 HMR 覆盖层（错误/警告时）
-            overlay: true,
-            // 协议默认 ws://，localhost 下无需额外配置
-         },
-      },
-      build: {
-         rollupOptions: {
-            output: {},
-         },
-      },
-      preview: {
-         port: 5173,
-      },
-   };
+            renderer(),
+            // 打包体积分析（仅 ANALYZE=true 时生成 stats.html）
+            process.env.ANALYZE &&
+            visualizer({
+                open: true,
+                gzipSize: true,
+                brotliSize: true,
+                filename: 'dist/stats.html',
+            }),
+        ].filter(Boolean),
+        resolve: {
+            alias: {
+                '@': path.resolve(__dirname, 'src'),
+                '@shared': path.resolve(__dirname, 'shared'),
+            },
+        },
+        // ============================================================
+        // 编译时注入环境变量到主进程
+        // 主进程中的 process.env.xxx 会在编译时被替换为实际值
+        // 这样无需在 OS 环境中设置这些变量
+        // ============================================================
+        define: {
+            'process.env.UPDATE_API_URL': JSON.stringify(env.UPDATE_API_URL || 'https://www.heixiu.com'),
+            'process.env.EDITION': JSON.stringify(env.EDITION || 'personal'),
+        },
+        // ============================================================
+        // 开发服务器 & HMR 配置
+        // ============================================================
+        server: {
+            port: 5173,
+            strictPort: true,
+            host: "0.0.0.0",
+            watch: {
+                // Windows 上默认的 fs.watch 有时不稳定，
+                // 如果文件保存后界面无反应，可临时开启 usePolling
+                // usePolling: true,
+                // interval: 100,
+                // 忽略不需要监听的目录，减少 CPU 占用
+                ignored: ['**/node_modules/**', '**/dist/**', '**/dist-electron/**', '**/release/**', '**/test-server/**', "**/**/*.md"],
+            },
+            // HMR 配置
+            hmr: {
+                // 在浏览器控制台显示 HMR 覆盖层（错误/警告时）
+                overlay: true,
+            },
+            proxy: mode === "development" ? {
+                "/api": {
+                    target: env.VITE_API_BASE_URL || "http://192.168.110.84:8000", // 从环境变量读取，默认为本地后端
+                    changeOrigin: true,
+                    bypass: (req) => {
+                        if (req.headers.accept?.includes('text/html')) return '/index.html'
+                    },
+                },
+                '/uploads': {
+                    target: env.VITE_API_BASE_URL ?? 'http://192.168.110.84:8000',
+                    changeOrigin: true,
+                },
+            } : undefined, // 生产环境不启用代理
+        },
+        build: {
+            rollupOptions: {
+                output: {},
+            },
+        },
+        preview: {
+            port: 5173,
+        },
+    };
 });
Author	SHA1	Message	Date
YoungestSongMo	a01b3f259c	Merge remote-tracking branch 'origin/dev-main' into dev-main	2026-06-07 05:22:11 +08:00
YoungestSongMo	72ec1a5459	fix: 修复主题切换后首页状态重置 + 首页 UX 优化 + 文档同步 ## 根因设置页 `navigate('/settings')` 导致 React Router `/*` 的 index 路由不匹配，HomePage 被卸载重挂载，所有 useState 回到默认值。 ## 修复（6 文件） - event-bus.ts: 新增 OPEN_SETTINGS 事件 - nav-config.ts: 设置按钮 action: 'navigate' → 'button'，去路由化 - NavBar.tsx: button case 中 emit(OPEN_SETTINGS) - SettingsPage.tsx: 去路由化，改为 Modal 居中叠加 + open/onClose props，使用 antd 6.x 正确 API destroyOnHidden（非废弃的 destroyOnClose）， mask={{ closable: false }} + keyboard={false} 仅允许 X 按钮关闭 - router/index.tsx: 移除 SettingsPage 渲染 - App.tsx: 添加 SettingsPage Modal，事件驱动（与 LoginPage 模式一致） ## UX 优化（2 文件） - HomeContent.tsx: 右侧分隔条移除多余 marginLeft，左右视觉对称 - BannerCarousel.tsx: 新增关闭按钮，session 级别 useState 隐藏，不做 localStorage 持久化，确保每次启动重新展示 ## 架构原则确立 QT 多窗口模型 → Web 映射：叠加层走 Modal/Drawer + 事件总线，主页面不卸载；真正的视图切换才用 React Router。 ## 文档同步 - TODO.md: 移除已完成项详细记录，精简为未完成待办 - WORKLOG.md: 追加 2026-06-07 完整工作日志 - PROJECT.md: 更新路由/叠加层架构说明 - CHANGELOG.md: 追加 v0.0.13 条目 - ARCHITECTURE.md: 更新日期 + 新增叠加层模式章节	2026-06-07 05:21:47 +08:00
YoungestSongMo	a8ace232a4	feat: 任务列表UI重构 + 分页器/登录错误/请求拦截修复【任务列表 UI 重构】（TaskHistory.tsx） - 列重新排序：任务ID(固定) → 创建时间 → 模型 → 输出类型 → 状态 → 提示词 → 时长 → 费用 → 供应商(隐藏) → 帧率/文件大小/标签/错误信息(隐藏) → 用户 - 斑马纹行样式 + hover 增强 + 选中行高亮 + 暗色主题适配 - 列可见性选择器（齿轮图标 Popover），持久化到 localStorage - 视频时长通过 VideoUiParams.duration 计算，非视频显示 "-" - 未知状态降级处理（resolveStatus → 显示原始 key） - 分页器固定预留 48px，避免 >20 条时分页器溢出可视区 - 提示词搜索图标颜色用 CSS class 承载，避免 columns 依赖 token.colorPrimary 导致主题切换时 Table 重建【分页器修复】（antd-theme.ts） - Pagination 组件 token 添加 itemActiveColor: '#fff' - 激活页码数字与 #6366F1 主题背景形成对比，亮色/暗色均可见 - 替代之前的 CSS !important hack 【登录错误信息修复】（request.ts） - HTTP 401 拦截改为双重校验：status === 401 && data?.code === 401 - 仅业务码也为 401 时才走 token 刷新流程 - 其他业务码（如密码错误）透传后端 data.message，不再被 RefreshError 覆盖【全局中文 locale】（ThemeProvider.tsx） - ConfigProvider 添加 locale={zhCN}，分页器显示"条/页"等中文 - 避免逐个 Table 设置不完整 locale 导致 Pagination Select 退化为 Input 【上下文稳定性】（HomeContent.tsx） - contextValue 用 useMemo 包裹，避免每次 render 新建对象导致无关重渲染 - 配合 columns 依赖清理，减少主题切换时的级联更新【其他】 - index.html CSP 策略增加 COS 域名白名单 - OutputTypeMap 枚举值修复为 image='图片', video='视频', audio='音频' - TaskStatusMap STATUS_CONFIG 类型放宽为 Record<string,...> 兼容未知状态 - 移除 computeDuration，替换为 getVideoDuration + formatDuration - LoginPage 移除未使用的 authState 依赖	2026-06-05 20:49:23 +08:00
YoungestSongMo	0d3d4fcd6a	feat: 任务列表UI重构 + 分页器/登录错误/请求拦截修复【任务列表 UI 重构】（TaskHistory.tsx） - 列重新排序、斑马纹/hover/选中样式、暗色主题适配 - 列可见性选择器（齿轮图标），localStorage 持久化 - 未知状态降级、视频时长从 ui_params.duration 计算 - 分页器固定预留 48px 【分页器修复】（antd-theme.ts） - Pagination 添加 itemActiveColor: '#fff'，激活页码始终可见【登录错误信息修复】（request.ts） - HTTP 401 双重校验：status === 401 && data?.code === 401 - 仅业务码 401 才走 token 刷新；其他业务码透传后端 message 【全局中文】（ThemeProvider.tsx） - ConfigProvider locale={zhCN}，分页器"条/页"等全局生效【上下文稳定性】（HomeContent.tsx） - contextValue useMemo 包裹【其他】 - CSP 策略 COS 域名白名单 - OutputTypeMap 枚举值修正 - PROJECT.md 补充 401 判断策略和主题配置说明	2026-06-05 20:48:02 +08:00
YoungestSongMo	af85d31035	feat ：修改文件结构	2026-06-05 19:24:06 +08:00
YoungestSongMo	1da95eaef3	feat: 实现业务首页（三栏布局 + 轮播图） ## 首页整体架构 - 新增 src/pages/home/ — 完整首页模块（10 个组件） - HomePage / HomeContent：三栏弹性布局，拖动分隔条调整列宽 - BannerCarousel：顶部轮播图（antd Carousel，2280×90 长条图片适配） - LeftPanel：模型选择器(Menu 分组) + 任务记录(Table 分页)，纵向拖拽调整比例 - CenterPanel / ModelInputForm：动态表单，根据模型 param_schema/ui_config 渲染控件 - RightPanel / OutputPreview：任务输出预览（Image/Video） - 新增 Layout 组件：h-screen flex 布局，首页 Banner + NavBar + Outlet ## 数据层（数据与视图分离） - 新增 src/services/modules/ — API 模块（banner/models/task/auth） - TaskAPI 静态方法，TaskInfoItemResponseBody 判别联合类型 - ModelAPI / BannerAPI，const 断言路由常量 - 新增 src/hooks/use-async.ts — 通用异步 Hook - useAsyncData：竞态处理、条件请求(enabled)、自动错误日志 - useAsyncMutation：数据变更，onSuccess/onError - getErrorMessage()：RequestErrorType → 可读错误信息 - 新增 src/hooks/use-api.ts — 业务 Hook - useBannerList / useModelList / useTaskList / useTaskDetail / useSubmitTask ## 主题与交互 - 重写暗色令牌：科技感蓝紫（#080C24 底 / #0F1340 面板 / #2A3278 边框） - 三栏分隔线：token.colorBorderSecondary 常驻 + 手柄竖线 hover 高亮 - 左面板纵向拖拽：模型区/任务区可调比例，ResizeObserver 自适应 - 暗色/亮色同步：tokens.ts + antd-theme.ts + globals.css 三处一致 ## 基础设施 - EventBus 新增 TASK_SUBMITTED 事件（替代 Context 数字递增 hack） - HomeContext 状态管理（选中模型、任务分页、折叠状态） - 所有组件边框使用 token.colorBorderSecondary（主题自适应） - Table 滚动高度 ResizeObserver 动态计算（修复分页器遮挡）	2026-06-05 16:24:17 +08:00