feat: add find page, breadcrumb components and canvas workbench updates

2026-08-30 14:38:09 +08:00
parent ee3b7745b7
commit bceb3a1542
21 changed files with 2239 additions and 73 deletions
@@ -0,0 +1,86 @@
+# 页面信息架构与导航（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 独立）。
+- 并列功能「回到原处」的精确记忆（记住上一个主流程步骤即可，暂不引入后端会话）。
+- 帮助页是否并入模板库首页底部，还是保留独立页面。