feat(w05): 差异评估活动包骨架与清单 —— 六张主数据追加声明、三张自持单据、两张 DMN、五条样例

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01FJcX8A6TWp4GRs41TYryEh
2026-08-26 23:28:17 +08:00
parent f52f0168df
commit 13183b9287
9 changed files with 937 additions and 0 deletions
@@ -0,0 +1,158 @@
+/**
+ * ACT-WORK-05 差异评估 · 视觉底 —— 逐字节抄自 I01(`brand-content-toolkit/src/views/prd-style.ts`)。
+ *
+ * 本活动的四份目标件(`docs/SS02-ACT-WORK-05-html/*.html`)与 E04 / I01 的目标件是同一套
+ * 设计语言产出的(卡壳 / 卡头渐变 / 判据框 / 表格排版全同);`activities/*` 只准 import
+ * `@sdk` / `@contracts`,包之间没有代码通道,只能各自持有一份。改这份不要改口径:
+ * 数据驱动的开关(三档占位 / 缺项红带 / 状态徽 / 编辑闸)在 `report.ts` 的 `BIND_CSS`。
+ */
+
+export const PRD_CSS = `
+.proto-root {
+  --ink:#1f2329; --ink-2:#41464e; --ink-3:#646a73; --ink-4:#8f959e;
+  --line:#dee0e3; --line-soft:#e8eaed; --soft:#f8f9fb;
+  --brand:#3370ff; --brand-deep:#245bdb; --brand-soft:#e1eaff; --brand-wash:#f0f4ff;
+  --human:#a9711e; --human-soft:#f6ecd8; --human-line:#e6d3a8;
+  --ledger:#b23a2e; --ledger-soft:#f7e4e0; --ledger-line:#ecc5bd;
+  --ok:#278717; --ok-soft:#e8f8e4;
+  --danger:#d83931; --danger-soft:#feeae9;
+  --warn-accent:#a9711e; --warn-soft:#f6ecd8;
+  --mono: "SF Mono", Menlo, Consolas, monospace;
+  --t-fast: .16s;
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
+  color: var(--ink);
+  font-size: 14px;
+  line-height: 1.7;
+}
+.proto-root, .proto-root * { box-sizing: border-box; }
+
+/* ==================== 卡壳(嵌进工作区,不自带浮起——外层已经是一张卡)==================== */
+.proto-root .jc-report { background: #fff; overflow: hidden; }
+
+.proto-root .jc-rp-head { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-bottom: 2px solid var(--ink); }
+.proto-root .jc-report.tone-human .jc-rp-head { background: linear-gradient(120deg, #fffaf1 0%, #fff 55%, #fbf6ea 100%); }
+.proto-root .jc-report.tone-ledger .jc-rp-head { background: linear-gradient(120deg, #fdf3f1 0%, #fff 55%, #fbf2f0 100%); }
+
+.proto-root .jc-rp-badge {
+  flex: none; width: 44px; height: 44px; border-radius: 10px;
+  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 13px;
+}
+.proto-root .jc-report.tone-human .jc-rp-badge { background: var(--human); box-shadow: 0 6px 16px rgba(169,113,30,.25); }
+.proto-root .jc-report.tone-ledger .jc-rp-badge { background: var(--ledger); box-shadow: 0 6px 16px rgba(178,58,46,.25); }
+
+.proto-root .jc-rp-tit { flex: 1; min-width: 0; }
+.proto-root .jc-rp-tit em { font-style: normal; font-size: 11px; letter-spacing: .08em; color: var(--ink-4); font-weight: 700; }
+.proto-root .jc-rp-tit h3 { margin: 2px 0 0; font-size: 19px; font-weight: 800; line-height: 1.3; }
+.proto-root .jc-rp-sub { font-size: 12px; color: var(--ink-3); margin-top: 3px; }
+
+.proto-root .jc-rp-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
+/* 目标件 side 第二行:步骤(静态文案),同目标件 .step 的字号字色 */
+.proto-root .jc-rp-step { font-size: 12px; color: var(--ink-3); }
+/* 关联任务号:全长 UUID 如实给,排版上截尾 —— 截断是排版,不是数据 */
+.proto-root .jc-rp-taskid {
+  display: inline-block; max-width: 150px; overflow: hidden; text-overflow: ellipsis;
+  white-space: nowrap; vertical-align: bottom; font-family: var(--mono); font-size: 11px;
+}
+.proto-root .jc-rp-tag { font-size: 11px; font-weight: 800; padding: 2px 10px; border-radius: 999px; border: 1px solid; }
+.proto-root .jc-report.tone-human .jc-rp-tag { color: var(--human); background: var(--human-soft); border-color: var(--human-line); }
+.proto-root .jc-report.tone-ledger .jc-rp-tag { color: var(--ledger); background: var(--ledger-soft); border-color: var(--ledger-line); }
+.proto-root .jc-rp-wait { font-size: 12px; color: var(--ink-3); }
+.proto-root .jc-rp-wait.warn { color: var(--danger); font-weight: 700; }
+
+.proto-root .jc-rp-bd { padding: 20px 22px; }
+
+/* 【做什么】/【交回什么】这类分区小标——括号label + 破折号说明,同一行 */
+.proto-root .jc-rp-part { font-size: 11px; font-weight: 800; letter-spacing: .12em; color: var(--ink-4); margin: 20px 0 8px; }
+.proto-root .jc-rp-part:first-child { margin-top: 0; }
+.proto-root .jc-rp-part b { color: var(--ink-3); }
+
+/* AI 已完成 / 需要你 —— 说明框,左侧色条按 tone 走 */
+.proto-root .jc-derive { border: 1px solid var(--line); border-left: 3px solid; border-radius: 8px; background: var(--soft); padding: 14px 16px; margin-bottom: 16px; }
+.proto-root .jc-report.tone-human .jc-derive { border-left-color: var(--human); }
+.proto-root .jc-report.tone-ledger .jc-derive { border-left-color: var(--ledger); }
+.proto-root .jc-derive p { margin: 0; font-size: 13px; color: var(--ink-2); }
+.proto-root .jc-derive p + p { margin-top: 6px; }
+.proto-root .jc-derive b { color: var(--ink); }
+.proto-root .jc-derive .done { color: var(--ok); font-weight: 700; }
+.proto-root .jc-report.tone-human .jc-derive .need { color: var(--human); font-weight: 700; }
+.proto-root .jc-report.tone-ledger .jc-derive .need { color: var(--ledger); font-weight: 700; }
+
+/* 验收判据框——目标件里两份验收工单同一色(赭红),不随 tone 变 */
+.proto-root .jc-criteria { border: 1px solid var(--ledger-line); border-radius: 10px; background: var(--ledger-soft); padding: 13px 16px; margin-bottom: 18px; }
+.proto-root .jc-criteria-t { font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--ledger); margin-bottom: 7px; }
+.proto-root .jc-criteria ul { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--ink-2); }
+.proto-root .jc-criteria li { margin: 4px 0; }
+.proto-root .jc-criteria b { color: var(--ink); }
+
+/* 表格基础排版(交互态的显隐开关在 BIND_CSS) */
+/*
+ * **表宽超出就得能横着滑**(2026-08-23 用户:「表格已经显示不全了,不能左右滑动」)。
+ * 从前这里是 overflow: hidden —— 那是为了让圆角裁住表头,可它同时把超出的列
+ * **直接裁掉且滑不动**:列一多(或某列为了放下下拉框加宽)就看不全,人还没有任何办法。
+ * quote-* 各包一直是 overflow-x: auto,这两个新包抄版式时把这一条抄丢了。
+ * (注释里不写反引号 —— 整段 CSS 是模版字符串,一个反引号就把它截断,本轮踩第三次。)
+ * 竖向仍 hidden:件是整篇铺开跟着外层滚的,表格自己不该再套一层竖滚动条。
+ */
+.proto-root .jc-tbl-wrap { border: 1px solid var(--line-soft); border-radius: 10px; overflow-x: auto; overflow-y: hidden; margin-bottom: 4px; }
+
+/*
+ * 资料名 = 可点开的那一格(2026-08-23)。**看得出能点**才会有人点:
+ * 品牌蓝 + 下划虚线 + 手型;悬停实线。点了去哪由外层接(件里一行脚本也没有)。
+ */
+.proto-root .jc-fileln { color: var(--brand); border-bottom: 1px dashed var(--brand-soft); cursor: pointer; transition: all var(--t-fast); }
+.proto-root .jc-fileln:hover { border-bottom-style: solid; background: var(--brand-wash); }
+/* 空标题不该长得像能点开 —— 那一格根本没有资料 */
+.proto-root .jc-fileln:empty { border-bottom: 0; cursor: default; background: none; }
+
+/* 格式徽:摆的是这份资料交出去时的样子(md / html / docx / xlsx) */
+.proto-root .jc-fmt { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 19px;
+  padding: 1px 7px; border-radius: 5px; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
+  background: var(--soft); color: var(--ink-3); border: 1px solid var(--line); }
+.proto-root .jc-fmt.v-docx { background: #eaf1ff; color: #2b5fd9; border-color: #c3d6ff; }
+.proto-root .jc-fmt.v-xlsx { background: #e9f7ee; color: #1f7a45; border-color: #bfe6cd; }
+.proto-root .jc-fmt.v-html { background: #fdf0e6; color: #b25e15; border-color: #f3d3b4; }
+.proto-root .jc-fmt.v-md   { background: #f2f3f5; color: #5a6068; border-color: #dfe1e5; }
+.proto-root .jc-tbl-in { width: 100%; border-collapse: collapse; font-size: 13px; }
+.proto-root .jc-tbl-in th { text-align: left; background: var(--soft); font-size: 11px; letter-spacing: .04em; font-weight: 800; color: var(--ink-3); padding: 9px 11px; border-bottom: 1px solid var(--line); }
+.proto-root .jc-tbl-in th.req::after { content: " ＊"; color: var(--danger); font-size: 11px; }
+.proto-root .jc-tbl-in th.sug::after { content: " 建议"; color: var(--warn-accent); font-size: 10px; font-weight: 600; }
+.proto-root .jc-tbl-in th.opt::after { content: " 选填"; color: var(--ink-4); font-size: 10px; font-weight: 600; }
+.proto-root .jc-tbl-in td { padding: 9px 11px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
+.proto-root .jc-tbl-in tr:last-child td { border-bottom: 0; }
+.proto-root .jc-tbl-in td.jc-rn { width: 38px; white-space: nowrap; font-family: var(--mono); font-size: 11px; color: var(--ink-4); text-align: center; position: relative; }
+
+.proto-root .jc-vcell { display: block; font-size: 12.5px; color: var(--ink); line-height: 1.5; overflow-wrap: anywhere; }
+.proto-root .jc-vcell.mono { font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); }
+.proto-root .jc-vcell.cust { font-weight: 700; }
+.proto-root .jc-vcell.dim { color: var(--ink-4); text-decoration: line-through; }
+.proto-root .jc-diffnew { font-weight: 800; color: var(--ok); }
+
+.proto-root .jc-cell, .proto-root select.jc-cell, .proto-root textarea.jc-cell {
+  width: 100%; min-width: 60px; border: 1px solid var(--line); border-radius: 6px;
+  padding: 6px 8px; font: inherit; font-size: 12.5px; color: var(--ink); background: #fff;
+}
+.proto-root .jc-cell.mono { font-family: var(--mono); font-size: 11.5px; }
+.proto-root .jc-cell:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-wash); outline: none; }
+
+.proto-root .jc-rowdel {
+  width: 22px; height: 22px; margin: 0 auto; cursor: pointer;
+  border: 1px solid var(--line); border-radius: 6px; padding: 0;
+  font: inherit; font-size: 14px; line-height: 1; color: var(--ink-3); background: #fff;
+  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
+}
+.proto-root .jc-rowdel:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-soft); }
+
+.proto-root .jc-addrow em { font-style: normal; font-size: 11.5px; color: var(--ink-4); }
+.proto-root .jc-addrow button {
+  cursor: pointer; border: 1px solid var(--brand-soft); border-radius: 7px; padding: 5px 12px;
+  font: inherit; font-size: 12px; font-weight: 700; color: var(--brand-deep); background: var(--brand-wash);
+}
+.proto-root .jc-addrow button:hover { background: var(--brand-soft); }
+
+/* 本工单只承载内容,提交/审批请在对话区——目标件三份文件都有这一条 */
+.proto-root .jc-flow { margin-top: 16px; padding: 9px 12px; border-radius: 8px; background: var(--soft); border: 1px dashed var(--line); font-size: 12px; color: var(--ink-3); }
+.proto-root .jc-flow b { color: var(--ink); }
+
+.proto-root .jc-rp-foot { padding: 13px 22px; border-top: 1px solid var(--line-soft); font-size: 11.5px; color: var(--ink-4); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
+.proto-root .jc-rp-foot span:last-child { font-family: var(--mono); }
+`;
@@ -0,0 +1,5 @@
+export const P08_MASTER_CREATE = '<div class="proto-root"></div>';
+export const P10_DOCUMENT_CREATE = '<div class="proto-root"></div>';
+export const EVAL_INPUT_LIST = '<div class="proto-root"></div>';
+export const DIFFERENCE_REVIEW = '<div class="proto-root"></div>';
+export const LANDING_CONFIRM = '<div class="proto-root"></div>';