feat: add find page, breadcrumb components and canvas workbench updates
This commit is contained in:
+27
-3
@@ -22,7 +22,7 @@
|
||||
|
||||
### GET `/api/jobs`
|
||||
|
||||
返回内存中的任务状态列表，最新任务在前。
|
||||
返回任务状态列表，最新任务在前。除内存中登记的任务外，还会扫描 `service_workspace` 补充磁盘上已完成但未登记的任务（有 `wordcloud_hd.db` 即认为是成功可查找）。
|
||||
|
||||
### POST `/api/jobs`
|
||||
|
||||
@@ -128,13 +128,14 @@ SSE 事件流。事件数据模型：
|
||||
|
||||
### GET `/api/jobs/{job_id}/locations`
|
||||
|
||||
查询词语位置。
|
||||
查询词语位置（单任务内查找）。
|
||||
|
||||
查询参数：
|
||||
|
||||
| 参数 | 说明 |
|
||||
|------|------|
|
||||
| `name` | 可选；为空返回全部，非空精确匹配 |
|
||||
| `name` | 可选；为空返回全部，非空时按 `mode` 匹配 |
|
||||
| `mode` | 可选；`exact`（默认，精确匹配）/ `contains`（子串包含，转义通配符后 `LIKE %name%`） |
|
||||
|
||||
返回：
|
||||
|
||||
@@ -142,6 +143,7 @@ SSE 事件流。事件数据模型：
|
||||
{
|
||||
"job_id": "...",
|
||||
"query": "",
|
||||
"mode": "exact",
|
||||
"total": 1,
|
||||
"canvas_width": 8000,
|
||||
"canvas_height": 4000,
|
||||
@@ -163,6 +165,28 @@ SSE 事件流。事件数据模型：
|
||||
}
|
||||
```
|
||||
|
||||
### GET `/api/jobs/{job_id}/find`
|
||||
|
||||
单任务内查找名字的**受保护接口**，供独立查找页使用（与 `/locations` 响应结构相同）。
|
||||
|
||||
- 需要鉴权：`Authorization: Bearer <token>`，token 由 `POST /api/login` 获取
|
||||
- 查询参数与 `/locations` 一致：`name`、`mode`（`exact` / `contains`）
|
||||
- 无 token 或 token 错误返回 `403`
|
||||
|
||||
### POST `/api/login`
|
||||
|
||||
管理口令登录，返回查找页 / 订单页共用的鉴权 token。
|
||||
|
||||
请求体（JSON）：
|
||||
|
||||
```json
|
||||
{"password": "管理口令"}
|
||||
```
|
||||
|
||||
- 口令错误返回 `401`
|
||||
- 成功返回：`{"token": "..."}`；后续请求带 `Authorization: Bearer <token>`
|
||||
- 默认口令 `zhihui2024`，生产可用环境变量 `ORDERS_ADMIN_PASSWORD` 覆盖（见 `backend/service/app.py`）
|
||||
|
||||
### GET `/api/jobs/{job_id}/occupancy_mask`
|
||||
|
||||
返回 PNG，显示每个已放置词语的 bounding box。
|
||||
|
||||
@@ -58,7 +58,7 @@ wordcloud/
|
||||
│ └── start-dev.sh # 本地后端启动脚本
|
||||
├── frontend/
|
||||
│ ├── src/
|
||||
│ │ ├── App.tsx # 页面路由：home → canvas / wordcloud / help
|
||||
│ │ ├── App.tsx # 页面路由：home → canvas / wordcloud / orders / find / help
|
||||
│ │ ├── main.tsx
|
||||
│ │ ├── types.ts # 全项目 TypeScript 类型
|
||||
│ │ ├── styles.css
|
||||
@@ -66,6 +66,8 @@ wordcloud/
|
||||
│ │ │ ├── TemplateHome.tsx # 首页：模板选择
|
||||
│ │ │ ├── CanvasStudio.tsx # 画布设计页
|
||||
│ │ │ ├── TestWorkbench.tsx # 词云生成页
|
||||
│ │ │ ├── OrdersPage.tsx # 生产订单页（登录保护）
|
||||
│ │ │ ├── FindPage.tsx # 查找名字页（登录保护，跨任务单任务内查找）
|
||||
│ │ │ └── HelpPage.tsx # 帮助页
|
||||
│ │ ├── components/ # 可复用组件
|
||||
│ │ │ ├── AdvancedPanel.tsx
|
||||
|
||||
@@ -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 独立）。
|
||||
- 并列功能「回到原处」的精确记忆（记住上一个主流程步骤即可，暂不引入后端会话）。
|
||||
- 帮助页是否并入模板库首页底部，还是保留独立页面。
|
||||
Reference in New Issue
Block a user