---
name: baoyu-workbench-patterns
description: 宝锐销售工作台构建模式 — 零依赖HTML Tab式仪表盘，日/周/月/累计切换+数据透视，JSON驱动，DOM事件绑定，localStorage持久化。
category: productivity
---
# 宝锐销售工作台构建模式
## 新增 Tab 三步 + 多基址回退（2026-09-15）
1. `TABS` 加项 → 2. `render()` switch 加 case → 3. **`PERM_TAB_LABELS` 加标签**（漏了则权限页看不到该 Tab）。
复杂表单做成独立子页 + Tab 内 iframe（参考 `宝锐活动录入.html`）。详见 `baoyu-workbench-frontend-pitfalls/references/new-tab-and-api-fallback.md`。
**API 多基址回退必须按 HTTP 状态码判断**：`fetch().then(r=>r.json())` 会在公网 Tunnel 返回 401 时就把错误当结果 resolve，本地兜底端口永不尝试；须 `if (r.status===401||403||>=500) throw` 再换下一个基址，基址列表首位放**同源 origin**。
**前后端字段契约要对齐**：前端发 `sections`、后端只读 `values` → `ok:true` 但数据落空；落盘接口必须**回读一条记录核对字段长度**。
**UI 密度（用户偏好）**：多层级选择（如 20 个产品方向）用**两级级联下拉**（一级类型 → 二级方向，唯一项自动选中），**不要用卡片网格**——用户明确反馈“选择这块篇幅占得太大”。自动填充必须与操作顺序无关（先选产品还是先选订单都要能带出）。
## 核心原则
1. **零外部依赖** — 不用 Chart.js / HermesTable / CDN库（除 html2canvas 用于截图分享）
2. **JSON驱动** — 所有数据先生成 JSON → HTML fetch
3. **DOM事件绑定** — 用 `createElement` + `onclick` / 事件代理，**禁止 inline onclick 字符串拼接**
4. **`node --check` 验证** — 每次修改 HTML 中的 JS 必须跑语法检查
5. **localStorage 持久化** — 用户上传/填写的数据存 localStorage，渲染时恢复
6. **🛑 铁律：数据必须真实，禁止估算** — 用户明确要求所有数字必须来自真实数据源（ERP/MCP），禁止按比例分摊、线性推算、或任何形式的估算。宁可不显示部门拆分，也不给不真实的数字。此条优先级最高，违反即为不可接受的错误。
## 标准页面骨架
```html
宝锐 · {页面名}
```
## 周期切换模式（日/周/月/累计）
UI：`