From 1ff4e842df98106cac176f6ef1beee7f277be3c1 Mon Sep 17 00:00:00 2001 From: zlwu <704541015@qq.com> Date: Fri, 28 Aug 2026 14:49:42 +0800 Subject: [PATCH] docs: add SOP fill mint highlight implementation plan Co-authored-by: Cursor --- .../2026-08-28-sop-fill-mint-highlight.md | 203 ++++++++++++++++++ 1 file changed, 203 insertions(+) create mode 100644 docs/superpowers/plans/2026-08-28-sop-fill-mint-highlight.md diff --git a/docs/superpowers/plans/2026-08-28-sop-fill-mint-highlight.md b/docs/superpowers/plans/2026-08-28-sop-fill-mint-highlight.md new file mode 100644 index 00000000..d127a9b6 --- /dev/null +++ b/docs/superpowers/plans/2026-08-28-sop-fill-mint-highlight.md @@ -0,0 +1,203 @@ +# SOP 手填薄荷绿高亮 Implementation Plan + +> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking. + +**Goal:** 在任务执行（及共用 SOP 编辑/打印）中，用手填区薄荷绿加粗区分用户录入与模板固定文案。 + +**Architecture:** 样式集中在 `web-admin/src/utils/sop-print.ts` 的 `SOP_SHARED_CONTENT_STYLE`；编辑态与打印态通过已有 `SOP_EDITOR_CONTENT_STYLE` / `SOP_PRINT_CONTENT_STYLE` 自动继承，业务页无需改动。同步在 `docs/sop-templates/SOP富文本制作标准.md` 记录视觉约定。 + +**Tech Stack:** Vue 3 web-admin、TinyMCE、`sop-print.ts` 内联 CSS 字符串 + +**Spec:** `docs/superpowers/specs/2026-08-28-sop-fill-mint-highlight-design.md` + +--- + +## File map + +| 文件 | 职责 | +|------|------| +| `web-admin/src/utils/sop-print.ts` | 修改 `.sop-underline` / `.sop-blank-cell`（及同类下划线兜底选择器）的 color / font-weight / 下划线色；加 `print-color-adjust` | +| `docs/sop-templates/SOP富文本制作标准.md` | 文档：手填区视觉约定（方案 D） | + +不改：SOP HTML 模板、`StepDetailPanel.vue`、勾选交互、业务 API。 + +--- + +### Task 1: 更新共享 SOP 样式（薄荷绿手填） + +**Files:** +- Modify: `web-admin/src/utils/sop-print.ts`（`SOP_SHARED_CONTENT_STYLE` 内约 186–198 行） + +- [ ] **Step 1: 确认当前规则片段** + +打开 `web-admin/src/utils/sop-print.ts`，定位： + +```css + .sop-underline, + .sop-record span[style*='border-bottom:1px solid #334155'], + .sop-record span[style*='border-bottom: 1px solid #334155'] { + display: inline-block; + border-bottom: 1px solid #334155; + text-align: left !important; + vertical-align: text-bottom; + box-sizing: border-box; + } + .sop-blank-cell { + text-align: left !important; + vertical-align: top; + } +``` + +（文件中可能已有未提交的 `.sop-row-hidden` 相关改动，**保留不动**，只改手填高亮相关规则。） + +- [ ] **Step 2: 替换为方案 D 样式** + +将上述片段替换为： + +```css + .sop-underline, + .sop-record span[style*='border-bottom:1px solid #334155'], + .sop-record span[style*='border-bottom: 1px solid #334155'], + .sop-blank-cell { + color: #059669 !important; + font-weight: 700; + -webkit-print-color-adjust: exact; + print-color-adjust: exact; + } + .sop-underline, + .sop-record span[style*='border-bottom:1px solid #334155'], + .sop-record span[style*='border-bottom: 1px solid #334155'] { + display: inline-block; + border-bottom: 1.5px solid #10b981; + text-align: left !important; + vertical-align: text-bottom; + box-sizing: border-box; + } + .sop-blank-cell { + text-align: left !important; + vertical-align: top; + } +``` + +说明： + +- `!important` 用于压过 TinyMCE / 内联字色，保证填写区以薄荷绿为准（与 spec「风险」一致） +- 勾选 `.sop-check` 规则**不要**改动 +- `SOP_EDITOR_CONTENT_STYLE` / `SOP_PRINT_CONTENT_STYLE` 已嵌入 `${SOP_SHARED_CONTENT_STYLE}`，无需再改这两处 + +- [ ] **Step 3: 用 grep 验证共享串已含目标 token** + +Run: + +```bash +cd /Users/wuzilong/work/00code/zkxw/web-admin +rg -n "059669|10b981|sop-blank-cell" src/utils/sop-print.ts +``` + +Expected: `sop-print.ts` 中出现 `#059669`、`#10b981`，且与 `.sop-underline` / `.sop-blank-cell` 同段；`.sop-check--checked` 仍为 `#334155`（未被改成绿）。 + +- [ ] **Step 4: Commit** + +```bash +git add web-admin/src/utils/sop-print.ts +git commit -m "$(cat <<'EOF' +feat(web-admin): highlight SOP fill fields in mint green bold + +EOF +)" +``` + +若工作区里 `sop-print.ts` 还含**无关**未提交改动（如 `sop-row-hidden`），只提交手填高亮时：先 `git diff` 确认，必要时用 `git add -p` 只暂存本任务 hunk；或与产品确认可一并提交时再在 message 中写清两项改动。**默认**：若 `sop-row-hidden` 属于同一人进行中的 SOP 可见性工作且已在同文件，可一并保留在同一次 commit，message 改为同时说明；否则只 stage 本任务相关 hunk。 + +--- + +### Task 2: 更新 SOP 制作标准文档 + +**Files:** +- Modify: `docs/sop-templates/SOP富文本制作标准.md` + +- [ ] **Step 1: 在「必备 CSS 类」表中补充手填视觉说明** + +在第 3 节表格中，将 `sop-underline` / `sop-blank-cell` 两行改为（或在其后追加说明列内容）： + +| 类名 | 用途 | +|------|------| +| `sop-underline` | 下划线填写区，**左对齐**；运行时字色 `#059669`、字重 700，下划线 `#10b981`（见 `sop-print.ts`） | +| `sop-blank-cell` | 空白填写单元格，**左对齐**；运行时字色/字重同上 | + +- [ ] **Step 2: 在「4.2 下划线填写」末尾追加一段** + +```markdown +运行时样式（编辑 + 打印，由 `sop-print.ts` 注入，模板 HTML 勿内联字色）： + +- 手填文字：`#059669`、`font-weight: 700` +- 下划线：`#10b981`（约 1.5px） +- 模板固定文案保持深灰；勾选框仍用 `#334155` 实心态 +``` + +- [ ] **Step 3: 验收清单增加一项** + +在第 6 节「验收清单」中增加： + +```markdown + - [ ] 手填区（下划线 / 空白格）为薄荷绿加粗，模板文案为深灰 +``` + +- [ ] **Step 4: Commit** + +```bash +git add docs/sop-templates/SOP富文本制作标准.md +git commit -m "$(cat <<'EOF' +docs: document SOP fill field mint highlight convention + +EOF +)" +``` + +--- + +### Task 3: 人工验收（任务执行弹窗） + +**Files:** 无代码改动 + +- [ ] **Step 1: 启动或确认 web-admin 已指向含上述改动的构建** + +Run（若尚未运行）: + +```bash +cd /Users/wuzilong/work/00code/zkxw/web-admin && pnpm dev +``` + +- [ ] **Step 2: 生产工单 → 任务执行** + +1. 打开 `http://localhost:3006/#/production-group/production/production-work-order` +2. 进入任一可执行任务的【任务执行】弹窗 +3. 滚到「SOP信息」 +4. 确认：`.sop-underline` / 空白格内已有或新输文字为**薄荷绿加粗**；周围步骤说明为深灰 +5. 切换勾选：视觉与改前一致（灰框实心 + 白勾） +6. 点打印：预览中手填区仍为绿色加粗（浏览器需允许打印背景图形/颜色时与现有勾选一致） + +- [ ] **Step 3: 我的生产任务 → 任务执行** + +打开 `http://localhost:3006/#/production-group/production/my-production-task`，重复 Step 2 中 SOP 区检查（两侧共用样式，预期一致）。 + +- [ ] **Step 4: 勾选计划 checkbox** + +将本 plan 中 Task 1–3 的 `- [ ]` 在完成后改为 `- [x]`（可选，便于追踪）。 + +--- + +## Spec coverage (self-review) + +| Spec 要求 | Task | +|-----------|------| +| 手填 `#059669` + 700 | Task 1 | +| 下划线 `#10b981` | Task 1 | +| 勾选不改 | Task 1（明确不动）+ Task 3 验收 | +| 编辑+打印共用 | Task 1（改 SHARED） | +| 工单 + 我的任务 | Task 3 | +| 不改模板 HTML / 无「有内容才变色」JS | 本 plan 无对应改动 | +| 文档约定 | Task 2 | +| 打印颜色 | Task 1 `print-color-adjust` + Task 3 | + +无 TBD/占位；无第二套页面样式。