docs: add SOP fill mint highlight implementation plan
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
zlwuandCursor committed
1 parent
a42c16cf93
commit
1ff4e842df
1 file changed
+203
@@ -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/占位；无第二套页面样式。
|
||||
Reference in new issue
Block a user