SOP 手填数据薄荷绿高亮 — 设计说明

日期：2026-08-28
状态：已确认（方案 D）
范围：web-admin 任务执行弹窗「SOP信息」区（及共用 SOP 编辑/打印样式）

背景

生产工单、我的生产任务的【任务执行】弹窗中，「SOP信息」使用 TinyMCE + SOP 富文本模板。模板固定文案与用户手填内容（下划线区、空白格）目前同色同字重，扫读时不易区分「填了什么」。

经对比：

方案	说明	结论
A 现状	无区分	不满足诉求
B 纯黑加粗	`#000` + 700	可选
C 深 Slate 加粗	`#0f172a` + 700	曾推荐
D 薄荷绿字色	`#059669` + 700	已选定

目标

在编辑态与打印态，让用户手填数据以薄荷绿加粗呈现，模板固定文案保持原深灰色，便于快速辨认录入内容。

视觉规范

元素	样式
手填文字（`.sop-underline`、`.sop-blank-cell` 内）	`color: #059669`；`font-weight: 700`
下划线描边（`.sop-underline`）	`border-bottom-color: #10b981`（可略加粗至 1.5px）
模板固定文案	保持现有（约 `#1e293b` / `#334155`），不加粗
勾选框 `.sop-check`	不改；已勾选仍为实心灰黑 + 白勾

空值：不对「是否已填」做 JS 探测；样式挂在填写容器上，用户输入即呈薄荷绿加粗。空下划线仅保留绿色描边提示可填。

技术设计

改动点（单点）

文件：web-admin/src/utils/sop-print.ts
位置：SOP_SHARED_CONTENT_STYLE（被 SOP_EDITOR_CONTENT_STYLE / SOP_PRINT_CONTENT_STYLE 共用）

在现有 .sop-underline / .sop-blank-cell 规则上追加字色与字重，例如：

.sop-underline,
.sop-blank-cell {
  color: #059669;
  font-weight: 700;
}
.sop-underline {
  border-bottom-color: #10b981;
  /* 可选：border-bottom-width: 1.5px; */
}

打印页已有 print-color-adjust 相关约定时，保持一致，避免浏览器默认冲掉绿色。

覆盖范围（无需改页面）

以下路径共用 TinyMceEditor + show-print / printSopHtml，样式会一并生效：

生产工单 → 任务执行 → SOP信息（StepDetailPanel）
我的生产任务 → 任务执行 → SOP信息
工艺库 / 工艺路线配置中的 SOP 编辑与打印（刻意保持同一套 SOP 视觉，避免双轨）

明确不做

不改 docs/sop-templates/*.html 结构与类名
不新增「有内容才变色」的运行时检测
不加背景色块、不改勾选交互逻辑
不单独为「我的任务」写第二套样式

验收

任务执行弹窗打开含下划线填写的 SOP：手填文字为薄荷绿加粗，模板文案仍为深灰。
在下划线或空白格输入新内容，字色/字重符合上表。
勾选框勾选/取消视觉与改前一致。
点击打印预览：手填区绿色加粗仍可见（在浏览器允许打印背景/颜色的前提下，与现有勾选打印策略一致）。
生产工单与我的生产任务两侧表现一致。

风险与说明

薄荷绿在部分黑白打印机上对比弱于纯黑；产品已明确选择方案 D，接受该打印折中。
TinyMCE 若给局部文字写了内联 color/font-weight，可能盖过共享 CSS；实现时必要时对填写容器使用足够具体的选择器（或 !important），以填写区为准。

2026-08-28-sop-fill-mint-highlight-design.md 3.4 KB 고유링크 히스토리 Raw