87 lines
4.1 KiB
Markdown
87 lines
4.1 KiB
Markdown
# 页面信息架构与导航（IA）
|
||
|
||
> 本文档定义 wordcloud 前端各页面之间的**层级关系**与**导航路径**，是将来接入 URL 路由
|
||
> （react-router）的依据。先梳理清楚路径模型，再谈实现。
|
||
>
|
||
> 相关：`frontend/src/App.tsx`（当前无路由，用 `AppPage` state 切页）。
|
||
|
||
## 1. 页面清单
|
||
|
||
| 页面 | 组件 | 职责 | 访问等级 |
|
||
|------|------|------|----------|
|
||
| 模板库 | `TemplateHome` | 主入口：选模板 / 新建画布 / 集中展示并列功能 | 公开 |
|
||
| 画布设计 | `CanvasStudio` | 把模板 + 贴纸 + 词云装配成成品 | 公开 |
|
||
| 词云工具 | `TestWorkbench` | 从名单生成 / 替换词云（画布的子步骤） | 公开 |
|
||
| 生产订单 | `OrdersPage` | 下单 / 派单 / 投递（WCD 任务） | **口令登录** |
|
||
| 查找名字 | `FindPage` | 跨任务查名字位置 | **口令登录**（与订单令牌互通） |
|
||
| 帮助 | `HelpPage` | 使用说明 | 公开 |
|
||
|
||
## 2. 层级模型
|
||
|
||
页面不是一层平铺的 tab，而是**两类不同关系**：
|
||
|
||
```
|
||
┌─────────────── 并列功能（独立入口）──────────────┐
|
||
│ 生产订单 查找名字 帮助 │
|
||
└───────────────────────────────────────────────────┘
|
||
▲ 全局可达：从任意页面进入，做完可回原处
|
||
|
||
/ 模板库（主入口）
|
||
│
|
||
│ 选择模板 / 新建空白
|
||
▼
|
||
画布设计
|
||
│
|
||
│ 添加 / 替换词云
|
||
▼
|
||
词云工具
|
||
```
|
||
|
||
### 2.1 线性主流程：模板库 → 画布 → 词云
|
||
|
||
- 一条**单向依赖链**：词云工具是画布的编辑步骤，画布是模板库的编辑步骤。
|
||
- 导航用「**面包屑 + 前进/后退**」表达，保持编辑上下文，**不**作为 tab 平铺。
|
||
- 词云工具**仅能从画布进入**（不做独立根路径入口、不做根 tab）。
|
||
|
||
### 2.2 并列功能孤岛：订单 / 查找 / 帮助
|
||
|
||
- 不依附画布，与模板平级、独立存在。
|
||
- 通过**每页常驻薄导航条右侧**的图标入口进入（全局可达）。
|
||
- 订单、查找受口令保护；两者共用同一令牌（`wordcloud-orders-token`），登录态互通。
|
||
|
||
## 3. 导航条规格（每页常驻薄导航条）
|
||
|
||
所有页面共用一条顶部薄导航：
|
||
|
||
- **左侧**：Logo + 面包屑（主流程当前路径，如 `模板 › 画布 › 词云`），当前步骤高亮；
|
||
- **右侧**：并列功能图标入口（订单 / 查找 / 帮助），从任意页面可达；
|
||
- 进入并列功能后，提供「**回到原处**」（回到进入前的工作位置 / 或模板库兜底）。
|
||
|
||
## 4. 未来 URL 路由映射
|
||
|
||
当前用 state 切页；接入路由后按此映射：
|
||
|
||
| 页面 | 路径 | 说明 |
|
||
|------|------|------|
|
||
| 模板库 | `/` | 主入口 |
|
||
| 画布设计 | `/canvas`<br>`/canvas/:projectId` | 有工程时带 id |
|
||
| 词云工具 | `/canvas/:projectId/wordcloud` | 挂在画布路径下，表达「子步骤」 |
|
||
| 生产订单 | `/orders` | 并列根路径，登录保护 |
|
||
| 查找名字 | `/find` | 并列根路径，登录保护 |
|
||
| 帮助 | `/help` | 并列根路径 |
|
||
|
||
好处：URL 本身编码了层级——词云路径带前缀 `/canvas/...`，订单/查找/帮助是根路径，
|
||
一眼可知关系；也支持刷新保持、前进后退、可分享链接。
|
||
|
||
## 5. 已确认决策（记录）
|
||
|
||
- **D1**：词云工具仅作为画布子步骤，无独立入口。
|
||
- **D2**：并列功能（订单/查找/帮助）入口放在「每页常驻薄导航条」，而非只在首页。
|
||
- **D3**：将来必做 URL 路由（本模型为其落点）。
|
||
|
||
## 6. 待探索 / 未定
|
||
|
||
- 画布多工程时 `/canvas/:projectId` 的工程列表放哪（模板库内 or 独立）。
|
||
- 并列功能「回到原处」的精确记忆（记住上一个主流程步骤即可，暂不引入后端会话）。
|
||
- 帮助页是否并入模板库首页底部，还是保留独立页面。
|