平台支持 7 个预设主题，每个主题改变 Primary（品牌主色）及其浅色变体； Secondary（信息蓝）和 Tertiary（中性灰）保持不变，确保跨主题的信息层级一致。

主题切换通过 [data-theme] 属性覆盖一组 CSS 变量。所有按钮、状态、选中态、章节标题竖条等使用 var(--primary) 的元素都会随主题自动变化。

• 前序未完，后序不能进入"生产中"：每条工序流从左到右扫描，首个非完工的工序保留其状态（待执行 / 生产中 / 异常暂停），其余非完工统一归并为 等前序。
• 已完工 = .s-done + 工序卡 .is-done，可加 ✓ 角标；其余状态可加 checkbox 多选。
• 状态变更触发：开工（待执行→生产中）/ 完工（生产中→已完工，并解锁下游等前序→待执行）/ 暂停（生产中→异常暂停）/ 恢复（异常暂停→生产中）。
• 实现见 normalizeStepStatuses() · 批量开工/完工 平板端。

工序类型是与上述状态正交的另一维度，用于标识工序属性（标准 / 委外 / 返工）。不要把类型当状态用。

• 多选：每个 pill 独立切换 .is-active，多个状态可同时激活，不要做单选互斥。
• 过滤逻辑：当 "显示全部工艺路线" 开关关闭时，仅显示匹配当前激活状态的工序卡；激活 0 个 = 全部隐藏（默认进页就有一个状态激活）。
• 开关 ON = 显示全部工艺路线，pill 选择此时不影响显示（只保留视觉提示）。
• "清除"按钮取消全部激活，不要做"全选"逆操作。
• 已完工状态在批量开工页可隐藏（业务无意义），通过 #view-batch .legend-chip[data-status="done"]{display:none} 局部覆盖。
• 实现 / 默认值约定：批量开工页默认激活 待执行；批量完工页默认激活 生产中。

这个动作会让用户立刻看到结果（提交 / 完成代办 / 拒绝）？
├─ 是 + 唯一 + 正向 → 实色主色（页面唯一主操作）
├─ 是 + 全局否决性  → 实色红（拒绝级，少量）
└─ 否（描边款）
   ├─ 销毁数据（删除 / 批量退回 / 清空）         → 描边红
   ├─ 标记失效 / 禁用 / 标问题（保留数据但状态变） → 描边橙
   ├─ 中性收尾（关闭 / 收起 / 相关信息）         → 描边灰
   ├─ 文件 / 数据 / 系统级动作
   │   （打印 / 上传 / 下载 / 复制 / 同步 / 切换）→ 描边蓝
   └─ 其余业务动作（默认）                       → 描边主绿

名称

烧结生产车间

编码

M-2024-0612

负责人

刘 刘秀梅

电话

010-00000000

地址

东城区建国门内 8 号

安全等级

中

更新时间

2024-06-12 14:30

认证状态

已认证

实体

设备

模块名称

AIOT 模块

模块分类

开发工具

编码规则

M-{年}-{月日}{序号}

编码预览

M-2024-0612001

附件归属

系统管理 → 平台管理

需要反馈 / 通知用户？
├─ 与某次操作即时关联？
│   ├─ 简短文字 (≤ 1 行)               → Toast / Message（自动消失 3-5s）
│   ├─ 阻塞式确认或选择                 → Modal（320px 宽）
│   ├─ 需要展示详情 / 多字段表单         → Drawer（360px 右滑）
│   └─ 操作后跳转的最终页（成功/失败/警告）→ Result（icon + 标题 + 描述 + 操作）
│
├─ 持续告知用户某种状态？
│   ├─ 行内位置（在内容流中）            → Alert（4 色横幅）
│   └─ 全局位置（右上角）                → Notification（320px 卡片，需手动关）
│
└─ 显示进度？
    ├─ 单维度比例                       → Progress 条形 / 环形（4 色）
    └─ 多步骤流程                       → Numbered Steps（纵向）/ §23.3 Steps（横向）

• 表格行 hover —— 直接改背景色，不要 transition（高频操作时叠加动画反而卡顿）
• 键盘上下箭头切换菜单项 —— 即时响应，不要平滑滚动
• 表单 focus —— 边框色直接变，光晕同步出现
• 用户偏好prefers-reduced-motion: reduce —— 必须禁用所有非必要动画

屏宽不够放下完整内容时？
├─ 表格列太多
│   └─ 横向滚动（保留表头固定 · 不要折叠列）
├─ 多列卡片放不下
│   └─ 自动换行（CSS Grid auto-fit + minmax）
├─ 顶部导航过长
│   ├─ 桌面：保留全部
│   ├─ 平板：合并次要项到"更多 ▼"
│   └─ 手机：汉堡菜单 ☰ 收起所有
├─ 侧边栏占地太大
│   └─ 折叠成图标列（240 → 56） · hover 弹出二级菜单
└─ 表单字段
    └─ 多列改单列堆叠（避免缩到不可读）

• 单页表格行数 > 100 行 → 必须分页或虚拟滚动，不能一次渲染全部
• 表格行 hover 不要用 transition，直接换背景色，否则鼠标快速划过会卡顿
• 每个单元格不要都包 tooltip，仅截断省略号的单元格才挂 hover 浮层
• 批量操作选中超过 50 行 → 提示用户"已选 N 项"，并提供"全选当前页 / 反选"

• 外壳常驻置顶：滚动时整个 68px 外壳 position: sticky; top: 0;；进入子模块时，子模块的 40px 页面头部位于外壳下方，正文继续从 y=108 起算。
• 外壳的 tab 栏就是导航本身，不要再画面包屑、不要再做主导航 Tab（如"工作台/生产/订单/库存/报表"已被 tab 栏替代）。
• 子页面的返回箭头是后退（关闭当前 tab 或回到上级路由），不要把它当作"取消"。批量开工/完工底栏已移除独立的"取消"按钮，统一走头部返回。
• 右侧工具区固定顺序：外壳层 = 环境名 → 客服 → 全屏 → 用户名；子页面层 = 业务挂载（日期/筛选）→ 通知 → 头像。新增功能塞到工具图标列表里，不要破坏顺序。
• 不要在任何头部放业务主操作按钮（提交/保存/打印），那是正文底栏 §37.9 的责任。
• 触控端不显示外壳，只显示子页面的 44px 头部；外壳是 Web 多任务窗口（多 tab）的特性，在平板/手机上不适用。

• 面板必须有最小宽度/高度（建议 ≥ 200px），拖到最小后停住，不要允许拖到 0 把面板挤没
• 拖动时给容器加 user-select: none，避免误选文字
• 双击 thumb 恢复默认比例（约定俗成的快捷动作，不要跳菜单或弹窗）
• 同一页面最多 2 个分隔条（一纵 + 一横），再多就该用 Tab 或 Drawer 替代
• 键盘可达：thumb tabindex="0" + 左右/上下箭头每次 16px，Home/End 切到极限位
• 容器加 role="separator" aria-orientation + 描述性 aria-label