# 组件名录 —— 点菜用

**用法:打开出处文件抄结构,别凭记忆写。** 行号会漂移,漂了就按名字 grep;
名录与仓内源冲突时,以源为准。两种基调:文件件(A1)与 slide 件(A2),按件的性格选。
原型的原始形态(带脚本演示页)在 `~/coding/JCAI_PRD/docs/活动执行页/`——
版面节奏与演示脚本怎么配合,整件读它最直观。

## 基调一 · 文件件(A1,`activities/quote-intake/src/views/report.ts`)

纸面、章节头、逐段读下去 —— 执行页/验收页/归档页的默认基调。

| 组件 | 出处(report.ts) | 是什么 · 何时用 |
|---|---|---|
| `doc()` 外壳三层 | `:265-289` | `<style>`+精灵+`.proto-root>.app-shell>.jc-stage>article.jc-report`+题头/正文/落款。骨架已内置同构,读它是为了懂结构 |
| `part()` 章节头 | `:292` | `<b>标签</b><i class="ln">细线</i><em>右端小签</em>`——每个区块一条;编辑区的右端小签挂「可就地修订」 |
| `sign()` 落款 | `:296` | 头像+署名(`case:owner`)+右端 `jc-done-tag` 流位签。签写「这份件在流里的位置」,不写状态 |
| `ico()` 图标 | `:258` | `<use href="#i-名">` 引精灵 symbol |
| `LETTER` 来源信件 | `:309` | `jc-letter`:收件签+归属 chip+正文 pre-wrap 原样照录+附件行(`data-rows="attachments"`) |
| `four()` 要素四卡 | `:330` | `jc-four > jc-fcard ×4`;含 `jc-logo/jc-face` 方圆标(方=组织、圆=人,里面放图标)、`jc-count` 大数、`jc-segmeter` 一格一条料的刻度条 |
| `listTable()` 可编辑表 | `:385` | `jc-tbl-wrap > table.jc-tbl-in`;`cell()` 工厂出 `req/opt/dimempty` 三态格;序号格 `jc-rn` 一列两用(读=行号,编辑=撤行 ×) |
| `gapBar` 缺项红带 | `:438` | 「还差 N 格必填没补——差在哪」;挂 `data-class-of`,`v-0` 那档样式表隐藏 |
| `editGate()` 编辑闸 | `:457` | 锁定说明+编辑/取消/保存三钮+`jc-editbar` 怎么改提示带 |
| `addRowBar()` 加一行 | `:475` | 表尾虚线条;文案讲清「主键填了才存得下」 |
| `DIST` 分布条 | `:501` | `jc-dist`:三段按条数分宽(`data-class-of` 投影 v-N 走宽度梯子)+图例 |
| `dmnRow()/G2` 判定表 | `:598-628` | `jc-dmn` 按序求值三行+`jc-verdict` 去向横幅;命中行由壳上 `v-r1/r2/r3` 上色,「命中/未命中」两句都写在模版里、哪句现身由 class 定 |
| `jc-acts` 落地动作 | `:679-693` | 「这一签下去会发生什么」三条;验收页收尾用 |
| 说明带 | `:526-541` | `jc-derive`(这些数从哪来)/`jc-drop`(填报口径与边界);还有 `jc-callout/jc-hintline/jc-lockhint` 见 prd-style.ts |
| 三张成品 | `:516 / :548 / :630` | INTAKE_OVERVIEW 执行页 / INTAKE_CLASSIFIED 中间态 / INTAKE_RELEASE 验收归档一张顶两身份——整件抄版面节奏最快的路 |

**区块顺序的家族习惯**(INTAKE_RELEASE 是最全样本):来源 → 要素卡 → 分布/图形 →
清单表(编辑区)→ 判定与去向 → 落地动作 → 落款。执行页砍掉判定/落地,多说明带。

## 基调二 · slide 件(A2,`activities/quote-alternative/src/views/report.ts`)

一页一屏、深空 hero、强视觉 —— 汇报页/对比页用。规范 §8.5 是它的成文版。

| 组件 | 出处 | 是什么 |
|---|---|---|
| `ALT_WORKSHEET` | `:450` | 替代选型工作底稿(slide 语言成品) |
| `ALT_ROSTER` | `:516` | 名册页成品 |
| `data-page` 翻页 | `:335` | 多页件的页标记(`article.jc-duelrow` 一页一段),宿主按可见段分页 |

hero 规矩:深底允许局部自备色组,但须与家族蓝紫呼应;`danger/ok/warn` 三色
不得挪作气氛渲染(它们承载判定语义)。

## 修饰类速查(prd-style.ts 全量定义,这里只列常用)

- 排版:`.mono`(等宽)`.num`(数值,**左对齐**,与表头同侧)`.dim` `.sp` `.ln`
- 语义色:`.ok .warn .bad` · 卡面色调 `t-teal / t-ok / t-warn / t-mute`
- 格三态:`req`(必填,空了红胶囊)`opt`(选填,空了灰胶囊)`dimempty`(归档,空=「—」)
- 投影后缀:`v-a/v-b/v-c`(类三色)`v-0..v-20`(计数:开关与宽度梯子)`v-r1/r2/r3`(判定命中)

## 精灵 19 枚(`prd-style.ts` PRD_SPRITE)

`alert arrow-right boxes building check copy file-check file-text git-branch history
info lock mail-open pen plus sheet shield-check user x`

缺图标怎么办:照 lucide 线稿风格(24×24 viewBox、stroke currentColor、round 线帽)
**新增 symbol 进本件的精灵**,命名 `i-<名>`;平移时提醒活动开发 agent 给该活动的
prd-style 补同名 symbol。不引图标库、不用 emoji。

## 概念图形

内联线稿 SVG(stroke currentColor、1.5-2 px 线宽)是报告的第一语言:流程走位、
门前门后、数据流向,能画就画。图形也遵守不算不判——形状写死在模版里,
只有上色/显隐可走 `data-class-of` 投影。