141 lines
4.7 KiB
Markdown
141 lines
4.7 KiB
Markdown
# App.tsx 路由与页面结构重构需求（首页与业务页分离）
|
||
|
||
## 一、需求背景
|
||
|
||
当前 `frontend-web/src/App.tsx` 同时承载了：
|
||
|
||
1. 登录/首页相关路由（如 `/login`、`/landing`）
|
||
2. 工作台业务相关路由（如 `/workspace/chats`、`/workspace/agents`、`/workspace/scheduled/*`）
|
||
3. 业务页所需布局与运行时包装（`WorkspaceLayout`、`ChatRuntime`）
|
||
|
||
这会导致 `App.tsx` 过重，职责不够单一，不利于后续维护和扩展。
|
||
|
||
---
|
||
|
||
## 二、目标（你提出的核心诉求）
|
||
|
||
你希望：
|
||
|
||
1. **除了登录与首页入口内容外**，将 `App.tsx` 中其余业务页面路由整体迁移到 `pages` 下一个新组件中。
|
||
2. 再创建一个“承接导航/入口”的页面（或路由容器），用于放置这些导航逻辑。
|
||
3. `App.tsx` 最终只保留顶层路由分发和基础 Provider，变得更薄。
|
||
|
||
> 你提到“`App.tsx 74-75 login`”，可理解为：保留登录/首页相关入口，其他工作台内容抽离。
|
||
|
||
---
|
||
|
||
## 三、重构范围
|
||
|
||
### 1）保留在 `App.tsx` 的内容
|
||
|
||
- 全局 Provider：`HashRouter`、`AppProviders`
|
||
- 登录/首页路由：
|
||
- `/`
|
||
- `/login`
|
||
- `/login/:username`
|
||
- `/landing`
|
||
- 404 路由（可留在 `App.tsx` 或交给新路由容器统一处理，二选一）
|
||
|
||
### 2）迁移出 `App.tsx` 的内容
|
||
|
||
将以下与工作台有关的路由从 `App.tsx` 抽离：
|
||
|
||
- `/workspace`（重定向）
|
||
- `/workspace/chats`
|
||
- `/workspace/chats/:thread_id`
|
||
- `/workspace/agents`
|
||
- `/workspace/agents/new`
|
||
- `/workspace/agents/:agent_id/chats`（重定向）
|
||
- `/workspace/agents/:agent_id/chats/:thread_id`
|
||
- `/workspace/scheduled`
|
||
- `/workspace/scheduled/tasks`
|
||
- `/workspace/scheduled/runs/:run_id`
|
||
|
||
以及配套的包装组件职责：
|
||
|
||
- `WorkspaceLayout`
|
||
- `ChatRuntime`
|
||
|
||
---
|
||
|
||
## 四、建议的新结构（方案）
|
||
|
||
## 方案 A（推荐）：新增“业务路由容器组件”
|
||
|
||
在 `pages` 下新增一个路由容器组件，例如：
|
||
|
||
- `src/pages/WorkspaceRoutes.tsx`（或 `src/pages/AppWorkspaceRoutes.tsx`）
|
||
|
||
职责：
|
||
- 专门维护 `/workspace/*` 相关路由
|
||
- 内部统一使用 `WorkspaceLayout` 与 `ChatRuntime`
|
||
- 输出一个可被 `App.tsx` 挂载的路由节点
|
||
|
||
同时在 `App.tsx` 里只保留：
|
||
- 登录/首页/404
|
||
- 一个 `Route path="/workspace/*" element={<WorkspaceRoutes />} />`
|
||
|
||
---
|
||
|
||
## 五、“再建立一个页面放置导航”的落地解释
|
||
|
||
你说的“建立一个页面放置这些导航”，可以有两种理解：
|
||
|
||
1. **路由容器页（推荐）**：
|
||
- 不强调视觉 UI，重点是集中管理导航与路由跳转规则。
|
||
- 即上面的 `WorkspaceRoutes.tsx`。
|
||
|
||
2. **可见的导航页（可选）**：
|
||
- 例如新建 `WorkspaceHomePage.tsx`，展示聊天/Agents/定时任务入口按钮。
|
||
- 路由上把 `/workspace` 指向该页，而不是直接重定向到 `/workspace/chats/new`。
|
||
|
||
当前从你的描述看，优先建议第 1 种（先做结构整理），之后若有产品需求再做第 2 种可见导航页。
|
||
|
||
---
|
||
|
||
## 六、实施步骤（开发任务拆解）
|
||
|
||
1. 新建 `WorkspaceRoutes` 组件（`pages` 目录下）。
|
||
2. 把所有 `/workspace/*` 路由从 `App.tsx` 搬入该组件。
|
||
3. 把 `WorkspaceLayout` 与 `ChatRuntime` 移入该组件（或抽到共享 layout/runtime 文件）。
|
||
4. 在 `App.tsx` 中保留登录/首页路由，并挂载 `/workspace/*` 到新组件。
|
||
5. 校验以下访问路径行为一致：
|
||
- `/workspace` 重定向
|
||
- chats/agents/scheduled 各页面可正常进入
|
||
- 动态参数路由（`thread_id`、`agent_id`、`run_id`）正常
|
||
- 404 不受影响
|
||
6. 运行前端并做手工回归。
|
||
|
||
---
|
||
|
||
## 七、验收标准
|
||
|
||
1. `App.tsx` 明显瘦身，主要负责顶层入口路由。
|
||
2. `/workspace/*` 全部由新建组件统一管理。
|
||
3. 功能行为与改造前一致（或符合新定义）。
|
||
4. 代码可读性提升：登录入口与业务入口职责分离。
|
||
|
||
---
|
||
|
||
## 八、注意事项
|
||
|
||
1. 当前项目使用 `HashRouter`，路由写法需保持兼容。
|
||
2. `Navigate` 重定向逻辑要完整迁移，避免出现死循环或空白页。
|
||
3. `WorkspaceLayout` 与 `ChatRuntime` 的包裹层级不能错，否则可能影响侧边栏、输入区、子任务/Artifacts 状态。
|
||
4. 若后续再加模块（例如 `/workspace/settings`），优先在 `WorkspaceRoutes` 中扩展。
|
||
|
||
---
|
||
|
||
## 九、建议的命名（可直接采用）
|
||
|
||
- 新增组件文件：`src/pages/WorkspaceRoutes.tsx`
|
||
- （可选）可见导航页：`src/pages/WorkspaceHomePage.tsx`
|
||
|
||
---
|
||
|
||
## 十、后续可选优化
|
||
|
||
1. 将 `WorkspaceLayout` 抽到 `src/layouts/WorkspaceLayout.tsx`。
|
||
2. 将 `ChatRuntime` 抽到 `src/runtime/ChatRuntime.tsx`。
|
||
3. 把路由常量集中到 `src/core/router/paths.ts`，减少硬编码路径。
|