wordcloud/docs/info_architecture.md

页面信息架构与导航（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 /canvas/:projectId	有工程时带 id
词云工具	/canvas/:projectId/wordcloud	挂在画布路径下，表达「子步骤」
生产订单	/orders	并列根路径，登录保护
查找名字	/find	并列根路径，登录保护
帮助	/help	并列根路径

好处：URL 本身编码了层级——词云路径带前缀 /canvas/...，订单/查找/帮助是根路径， 一眼可知关系；也支持刷新保持、前进后退、可分享链接。

5. 已确认决策（记录）

• D1：词云工具仅作为画布子步骤，无独立入口。
• D2：并列功能（订单/查找/帮助）入口放在「每页常驻薄导航条」，而非只在首页。
• D3：将来必做 URL 路由（本模型为其落点）。

6. 待探索 / 未定

• 画布多工程时 /canvas/:projectId 的工程列表放哪（模板库内 or 独立）。
• 并列功能「回到原处」的精确记忆（记住上一个主流程步骤即可，暂不引入后端会话）。
• 帮助页是否并入模板库首页底部，还是保留独立页面。