base-paint 0.3.2 → 0.3.4

package/dist/blocks.js

@@ -149,6 +149,37 @@ const PRINTABLE_PAGE_NAME = 'printable';
 function pageLevelBlock(name) {
     return STYLE_PREFIX + 'block-' + name;
 }
+/* ══════════════════════════════════════════════════════════════
+ * B-01 共享页面模板／标题区
+ * ══════════════════════════════════════════════════════════════ */
+/** 页面级「并列分隔符」（U+FF5C 全角竖线）：**公共层唯一**被当作「并列」的输入分隔符。
+ *
+ *  语义：调用方写一句「甲 ｜ 乙 ｜ 丙」，公共层把它拆成逐段 `<span>`，段间那条细线由 CSS 的
+ *  `border-left` 出——**字符不进产物**，分隔只活在版式里（#514 立规、t154-r3 在口径行落地，
+ *  t728 把同一条机制推广到页头眉标：一条口径只许一处实现）。
+ *
+ *  为什么输入仍要写它：调用方只需要说「这几段是并列的」，怎么说由本件定；把「怎么分」留给
+ *  调用方（各写各的 `·`／`/`／`、`）就是同一件事在 40 处定义。 */
+const PARALLEL_SEP = '｜';
+/** 眉标里那几段的类名：第一段是**品牌位**，其余是**域位**（`pageLevelPart` 同族命名，不进 12 区闭集）。 */
+function eyebrowSegmentClass(index) {
+    return blockPart('pageShell', index === 0 ? 'eyebrow-app' : 'eyebrow-scope');
+}
+/** 把一句「甲 ｜ 乙」按并列分隔符拆段：两头剪白、空段丢弃。不带分隔符 ⇒ 原样一段。 */
+function splitSegments(text) {
+    if (!text.includes(PARALLEL_SEP))
+        return [text];
+    return text.split(PARALLEL_SEP).map((seg) => seg.trim()).filter((seg) => seg !== '');
+}
+/** 眉标的 HTML：带并列分隔符（且拆得出 ≥2 段）⇒ 逐段一枚 `<span>`，段间那条细竖线由 CSS 出，
+ *  **字符不进产物文本**；不带 ⇒ 逐字节同旧版（一个纯文本节点的 `<p>`）。
+ *  拆不出两段（如只有一条竖线收尾）⇒ 不拆，照原样文本落盘（不静默吞字符，与口径行同一条口径）。 */
+function eyebrowHtml(eyebrow) {
+    const segs = splitSegments(eyebrow);
+    if (segs.length < 2)
+        return esc(eyebrow);
+    return segs.map((seg, i) => '<span class="' + eyebrowSegmentClass(i) + '">' + esc(seg) + '</span>').join(' ');
+}
 /** B-01：单页容器＋标题三件套（eyebrow／title／subtitle）＋正文。 */
 export function renderPageShell(input) {
     assertPlainObject(input, 'renderPageShell: input');
@@ -162,7 +193,7 @@ export function renderPageShell(input) {
     const parts = ['<section class="' + rootClass + '">'];
     const eyebrow = optText(shell.eyebrow);
     if (eyebrow !== undefined)
-        parts.push('<p class="' + blockPart('pageShell', 'eyebrow') + '">' + esc(eyebrow) + '</p>');
+        parts.push('<p class="' + blockPart('pageShell', 'eyebrow') + '">' + eyebrowHtml(eyebrow) + '</p>');
     parts.push('<h1 class="' + blockPart('pageShell', 'title') + '">' + esc(title) + '</h1>');
     const subtitle = optText(shell.subtitle);
     if (subtitle !== undefined)
@@ -172,7 +203,8 @@ export function renderPageShell(input) {
     return parts.join('');
 }
 /** #420-1 页内导航区块（`<nav aria-label="页内导航">` ＋ 逐项 `<a href="#id">`）。
- *  空列表＝不出这一块（与「没内容不留空块」同口径，返回空串）；非数组／项缺 `id`／`text` → `bad-input`。 */
+ *  空列表＝不出这一块（与「没内容不留空块」同口径，返回空串）；缺失（`undefined`）→ `bad-input`
+ *  （非数组即拒）；项缺 `id`／`text` → `bad-input`。 */
 export function renderTocBlock(input) {
     assertPlainObject(input, 'renderTocBlock: input');
     assertNoInlineHandler(input, 'renderTocBlock: input');
@@ -190,10 +222,8 @@ export function renderTocBlock(input) {
     }
     return '<nav class="' + pageLevelBlock('toc') + '" aria-label="页内导航">' + links.join('') + '</nav>';
 }
-/** 口径行的并列分隔符（U+FF5C 全角竖线）：**唯一**被当作「并列」的字符。
- *  #514 立规把它计入可见文本的设计债（R4），本票（负责人第三轮要求 1）就是把这笔债在
- *  **公共层一次还掉**：该字符不再进产物文本，分隔改由版式承担（见 `renderCaliberLine` 与本区 CSS）。 */
-const CALIBER_SEP = '｜';
+/** 口径行的并列分隔符＝公共层那条**唯一**的并列分隔符（`PARALLEL_SEP`，定义见 B-01 区开头）。 */
+const CALIBER_SEP = PARALLEL_SEP;
 /** #420-2 口径说明行（纯文本单参；五字符转义表与区块层其余函数同源 `esc`）。
  *  聚合数字旁那句灰色小字（例如「周目标口径＝每日目标 × 7」）的唯一落点。
  *
@@ -290,7 +320,10 @@ function isRgbFunction(raw) {
 /** 色值入参（#421／#431）：`undefined` 透传（缺省色走样式段的冻结 token）；清单内的写法**逐字透传**
  *  （裸 token 名 `--x` 包成 `var(--x)`）。允许清单＝`#rgb`／`#rrggbb`／`rgb()`／`rgba()`／
  *  `var(--<冻结 token 名>)`／CSS 具名色；**清单外一律 `bad-input`**——`;`／`expression(`／`url(` 这类
- *  注入形态在这一步挡住，不让 `;` 穿进内联声明列表（审查 S3-6）。 */
+ *  注入形态在这一步挡住，不让 `;` 穿进内联声明列表（审查 S3-6）。
+ *  迁移提示（#441 实测，复核 D1 补第 4 处）：生产侧显式传色 4 处（`diet/nutritionPortDocs.ts:339` 一处带 3 个 `#rrggbb` 值、
+ *  `render/sportPortDocs.ts:609／775` 两处经 `categoryColor()` 取 4 个 `#rrggbb` 值，`diet/reviewDocs.ts:339-341` 一处经 `MEAL_COLORS` 由 `diet/todayDocs.ts:242` 进入生产），均属允许形态，
+ *  无须改动；其余生产调用不传色，走缺省冻结 token；新增写法先对清单，清单外改走冻结 token 或具名色。 */
 function optColor(value, field) {
     if (value === undefined)
         return undefined;
@@ -349,7 +382,8 @@ export function renderMiniBar(input) {
         + '</span>';
 }
 /** #421-2 分布条行：`名称 ｜ 条 ｜ 数值` 一格三栏，逐行拼出（行即件，不另加容器类）。
- *  `rows: []` ＝ 空串（与「没内容不留空块」同口径）；行内校验逐条 fail-fast。 */
+ *  `rows: []` ＝ 空串（与「没内容不留空块」同口径）；缺失（`undefined`）→ `bad-input`（非数组即拒）；
+ *  行内校验逐条 fail-fast。 */
 export function renderDistributionRows(input) {
     assertPlainObject(input, 'renderDistributionRows: input');
     assertNoInlineHandler(input, 'renderDistributionRows: input');
@@ -379,7 +413,7 @@ export function renderDistributionRows(input) {
     }).join('');
 }
 /** #421-3 徽章（并列小标签，如分类／标签这类短词并排）：逐项 `<span class="ilife-block-chip">`。
- *  项即件（不另加容器类）；`items: []` ＝ 空串。 */
+ *  项即件（不另加容器类）；`items: []` ＝ 空串；缺失（`undefined`）→ `bad-input`（非数组即拒）。 */
 export function renderChips(input) {
     assertPlainObject(input, 'renderChips: input');
     assertNoInlineHandler(input, 'renderChips: input');
@@ -396,9 +430,20 @@ export function renderChips(input) {
             + esc(reqText(entry.text, field + '.text')) + '</span>';
     }).join('');
 }
+/** #728 徽章行（**并列标签要对齐成一行**时用这一件）：把 `renderChips` 那一串裸 `<span>` 收进一个
+ *  容器 `<div>`，行距／换行／对齐交 CSS，调用方仍然只给标签文本。
+ *
+ *  为什么需要它（不是「再包一层」的洁癖）：`pageUi`（#525 页面级移动端配方）在 ≥1001px 把
+ *  `.ilife-block-page-shell-body` 变成栅格，`> *` 一律落到中间那一列 —— **裸 `<span>` 也是栅格项**，
+ *  于是「一行徽章」会被摊成「一行一枚」。有了本件，徽章行是一个块级子件，栅格里占一格。
+ *  `items: []` ＝ 空串（与 `renderChips` 同口径：没内容不留空块）；缺失／非数组 → `bad-input`。 */
+export function renderChipRow(input) {
+    const inner = renderChips(input);
+    return inner === '' ? '' : '<div class="' + pageLevelBlock('chip-row') + '">' + inner + '</div>';
+}
 /** #421-4 字段变更行（回执页「改前 → 改后」对照）：`字段名 ｜ 改前 ｜ 箭头 ｜ 改后`。
  *  `arrow: false` 只把字形藏起来、不删栏位（与老技能同一手法：左右栏靠箭位对齐）；
- *  `rows: []` ＝ 空串。 */
+ *  `rows: []` ＝ 空串；缺失（`undefined`）→ `bad-input`（非数组即拒）。 */
 export function renderChangeRows(input) {
     assertPlainObject(input, 'renderChangeRows: input');
     assertNoInlineHandler(input, 'renderChangeRows: input');
@@ -424,6 +469,14 @@ export function renderChangeRows(input) {
             + '</div>';
     }).join('');
 }
+/** #418 条位判档（只此一处）：>=90 高档／>=60 中档／其余低档。 */
+function kpiBarClass(pct) {
+    if (pct >= 90)
+        return 'bar-high';
+    if (pct >= 60)
+        return 'bar-mid';
+    return 'bar-low';
+}
 /** B-02：单张 KPI 卡（value 带 `tnum`；非法 status 由冻结语义降级 `empty`）。 */
 export function renderKpiCard(input) {
     assertPlainObject(input, 'renderKpiCard: input');
@@ -442,6 +495,17 @@ export function renderKpiCard(input) {
     const detail = optText(card.detail);
     if (detail !== undefined)
         parts.push('<div class="' + blockPart('kpiCard', 'detail') + '">' + esc(detail) + '</div>');
+    const bar = card.bar;
+    if (bar !== undefined) {
+        assertPlainObject(bar, 'renderKpiCard: bar');
+        const pct = bar.pct;
+        if (typeof pct !== 'number' || !Number.isFinite(pct) || pct < 0 || pct > 100) {
+            badInput('renderKpiCard: bar.pct 必须在 0–100 之间');
+        }
+        parts.push('<div class="' + blockPart('kpiCard', 'bar') + '">'
+            + '<div class="' + blockPart('kpiCard', 'bar-fill') + ' ' + blockPart('kpiCard', kpiBarClass(pct)) + '" style="width:' + pct + '%"></div>'
+            + '</div>');
+    }
     if (card.status !== undefined) {
         const status = STATUS_KINDS.includes(card.status) ? card.status : 'empty';
         const badge = renderStatusBadge(card.statusText === undefined ? { status } : { status, text: card.statusText });
@@ -451,11 +515,22 @@ export function renderKpiCard(input) {
     return parts.join('');
 }
 /** B-02 伴生布局：KPI 卡网格（不是第 13 个区块，无独立样式区，用 `kpiCard` 区）。 */
-export function renderKpiGrid(cards) {
+export function renderKpiGrid(cards, opts) {
     if (!Array.isArray(cards) || cards.length === 0)
         badInput('renderKpiGrid: cards 必须是非空数组');
-    return '<div class="' + blockPart('kpiCard', 'grid') + '">'
+    if (opts !== undefined) {
+        assertPlainObject(opts, 'renderKpiGrid: opts');
+        assertNoInlineHandler(opts, 'renderKpiGrid: opts');
+    }
+    const grid = '<div class="' + blockPart('kpiCard', 'grid') + '">'
         + cards.map((card) => renderKpiCard(card)).join('') + '</div>';
+    // #513：不给 title 即返回原 grid 串（与改前逐字节同）；给了即标题 h2 ＋原 grid
+    // （与页面当刻手写形一致，页面票后迁可逐字节对）。标题类复用 #507 已落盘的 `kpi-card-title`
+    //（15px／700），不新增类名、不新增样式区。
+    const title = opts === undefined ? undefined : optText(opts.title);
+    if (title === undefined)
+        return grid;
+    return '<h2 class="' + blockPart('kpiCard', 'title') + '">' + esc(title) + '</h2>' + grid;
 }
 const TABLE_ALIGNS = ['left', 'center', 'right'];
 function cellText(value, field) {
@@ -497,7 +572,14 @@ export function renderDataTable(input) {
     const head = '<thead><tr>' + columns.map((column) => '<th scope="col" class="' + blockPart('dataTable', 'cell-' + column.align) + '">' + esc(column.label) + '</th>').join('') + '</tr></thead>';
     const body = '<tbody>' + table.rows.map((row, ri) => {
         assertPlainObject(row, 'renderDataTable: input.rows[' + ri + ']');
-        return '<tr>' + columns.map((column) => {
+        // #513 行标记槽：可选 `marker`（非空字符串 ⇒ 首格前插行徽标；缺省／空串 ⇒ 零渲染，
+        // 本行与改前逐字节同）；非字符串非 undefined 即 `bad-input`（与 `cellText` 同严格）。
+        const rawMarker = row.marker;
+        if (rawMarker !== undefined && typeof rawMarker !== 'string') {
+            badInput('renderDataTable: input.rows[' + ri + '].marker 必须是非空字符串／undefined');
+        }
+        const marker = rawMarker === undefined ? undefined : optText(rawMarker);
+        return '<tr>' + columns.map((column, ci) => {
             const raw = row[column.key];
             // #567 `cellHtml`：给了且对本格返回字符串即受信透传（调用方已转义）；
             // 返回 `undefined` 即走缺省转义文本。不给 `cellHtml` 时本行与改前逐字同。
@@ -518,8 +600,12 @@ export function renderDataTable(input) {
             const text = trusted === undefined
                 ? cellText(raw, 'renderDataTable: input.rows[' + ri + '].' + column.key)
                 : trusted;
-            return '<td class="' + blockPart('dataTable', 'cell-' + column.align) + '" data-label="' + esc(column.label) + '">'
-                + text + '</td>';
+            const open = '<td class="' + blockPart('dataTable', 'cell-' + column.align) + '" data-label="' + esc(column.label) + '">';
+            // #513：行标记只进首格（转义后前插；`cellHtml` 受信透传不受影响）。
+            const head = ci === 0 && marker !== undefined
+                ? '<span class="' + blockPart('dataTable', 'row-marker') + '">' + esc(marker) + '</span>'
+                : '';
+            return open + head + text + '</td>';
         }).join('') + '</tr>';
     }).join('') + '</tbody>';
     const caption = optText(table.caption);
@@ -924,8 +1010,21 @@ const BLOCK_SECTION_BUILDERS = {
         '  color: var(--fg);',
         '  font-feature-settings: "tnum";',
         '}',
+        // t728 D-T2「页头三级一眼分得开，且不与正文徽章同规格」：
+        //   改前眉标与正文徽章是**同一套字体规格**（12px／600／`var(--blue2)`），只差一层浅底与圆角，
+        //   于是「这是页头」与「这是页里的一枚状态标签」在视觉上分不出来（R3）。
+        //   拆口径：眉标走**面包屑**（无底、有字距、品牌位与域位分色），徽章走**胶囊**（有底、有边框）——
+        //   两者不再共用「同字号同字重同色」这一组值。
+        //   分段落法：`display:flex` ＋ `> span + span` 的 hairline（与口径行 `renderCaliberLine` 同一机制、
+        //   同一色档 `LINE_RGB` 的 .6 透明档），并列符因此不进产物文本（t508 门判据）。
+        //   只写 `display:flex` 不加 `gap`：单段眉标（不带并列符的调用点）里那一段是匿名 flex 项，
+        //   版面与改前的 `<p>` 纯文本逐值相同。
         '.' + p + 'block-page-shell-eyebrow {',
+        '  display: flex;',
+        '  flex-wrap: wrap;',
+        '  align-items: center;',
         '  margin: 0;',
+        // 缺省色＝改前那一档（单段眉标不带 span，取的就是这条）：别的调用点版面不动。
         // #179 对比度：12px 小字压白底，`--blue` 4.02:1 不到 AA 的 4.5:1 → 同族深一档 `--blue2`（5.6:1）。
         '  color: var(--blue2);',
         '  font-size: 12px;',
@@ -933,8 +1032,23 @@ const BLOCK_SECTION_BUILDERS = {
         '  letter-spacing: .08em;',
         '  text-transform: uppercase;',
         '}',
+        // 品牌位：中性灰（`--fg2` 4.94:1，过 AA），不抢域位。
+        '.' + p + 'block-page-shell-eyebrow-app {',
+        '  color: var(--fg2);',
+        '}',
+        // 域位：`--blue2`（5.6:1），与品牌位分色 ⇒ 两段的关系由颜色与那条 hairline 说明。
+        '.' + p + 'block-page-shell-eyebrow-scope {',
+        '  color: var(--blue2);',
+        '}',
+        // 段间那条细竖线：与口径行同一条 hairline、同一色档，不新增色值、不新增 token。
+        '.' + p + 'block-page-shell-eyebrow > span + span {',
+        '  padding-left: 8px;',
+        '  margin-left: 8px;',
+        '  border-left: 1px solid rgba(' + LINE_RGB + ', .6);',
+        '}',
         '.' + p + 'block-page-shell-title {',
-        '  margin: 6px 0 0;',
+        // t728 间距网格：页头 4 处的 `6px 0 0` 破 4px 网格（R4），统一到 8px（4 的倍数）。
+        '  margin: 8px 0 0;',
         // #567 J4（§5.2 大数 28 吸收 26／28／32／40）：页标题 32→28。
         '  font-size: 28px;',
         '  font-weight: 700;',
@@ -942,10 +1056,17 @@ const BLOCK_SECTION_BUILDERS = {
         '  line-height: 1.2;',
         '}',
         '.' + p + 'block-page-shell-subtitle {',
-        '  margin: 6px 0 0;',
+        '  margin: 8px 0 0;',
         '  color: var(--fg2);',
         '  font-size: 15px;',
         '}',
+        // t728 页头与正文之间那一条分隔：页头三级（眉标／标题／副题）是一个整体，正文另起一段——
+        //   改前两者只靠 16px 间距分开，长表单页里「页头在哪里结束」看不出边界。
+        //   落在副题上（它恒在页头末位、且页壳是 flex-less 的普通块，`border-bottom` 只画一条线）。
+        '.' + p + 'block-page-shell-subtitle:last-of-type {',
+        '  padding-bottom: 16px;',
+        '  border-bottom: 1px solid var(--line);',
+        '}',
         '.' + p + 'block-page-shell-body {',
         '  display: block;',
         '  margin-top: 16px;',
@@ -1053,6 +1174,87 @@ const BLOCK_SECTION_BUILDERS = {
         '  font-size: 15px;',
         '  font-weight: 600;',
         '}',
+        // #434 操作卡头部（#422 共用件 `operationHead()` 的根类＋四色档＋四子件；样式落本区，不新增区）。
+        // 形态对齐老实物 `crud_receipt` 的 `id-card` 左色条（样张 `t156-样张-写后回执.html:153-160`：
+        // `border-left:4px solid` 随 op 切）：基规则出卡片＋ 4px 左条（缺省中性 `var(--line)`），
+        // 四色档只改 `border-left-color`。版式把页级四条覆盖收编（`sportUi.ts` 的 `.ilife-page …`
+        // 四条本票删除后落点）：图标＋徽章＋标题同排，记录号／时刻行各占整行（`flex:1 0 100%`）。
+        // 内距取同族卡片档 14px（`kpiCard`／`chartBlock`／`detailSection` 同值），样张的 18px 20px
+        // 是 throwaway 密度不照搬；块级 `margin:16px 0` 取 #154 同族值（与 #457 相邻兄弟规则折叠恒 16）。
+        '.' + p + 'block-op-head {',
+        '  display: flex;',
+        '  flex-wrap: wrap;',
+        '  align-items: center;',
+        '  gap: 8px 12px;',
+        '  margin: 16px 0;',
+        '  padding: 14px;',
+        '  border: 1px solid var(--line);',
+        '  border-left: 4px solid var(--line);',
+        '  border-radius: ' + RADIUS_MD + 'px;',
+        '  background: var(--card);',
+        '}',
+        // 四色档（`OPERATION_TONES` ok／warn／danger／empty 的样式落点；只改左条色）。
+        // 色值口径：ok 取冻结 token `var(--ok)`（值 `#34c759`，与样张 `opColors` 同值）；
+        // 冻结表无 warn／danger 灯位，故 warn／danger 取同仓状态徽章同源 D-5 常量
+        // （`src/style.ts` statusBadge 区 warn `#a25b00`／danger `#a83228`，不新增 token 名）；
+        // empty 取冻结 `var(--fg2)`（与 empty 徽章字色同值，中性）。
+        // 样张的 `#0071e3` 在 H-01 禁色表内（`test/style.test.mjs:241`），一律不用；
+        // 色条是非文本，不套 #179 的文本对比度档。
+        '.' + p + 'block-op-head-ok {',
+        '  border-left-color: var(--ok);',
+        '}',
+        '.' + p + 'block-op-head-warn {',
+        '  border-left-color: #a25b00;',
+        '}',
+        '.' + p + 'block-op-head-danger {',
+        '  border-left-color: #a83228;',
+        '}',
+        '.' + p + 'block-op-head-empty {',
+        '  border-left-color: var(--fg2);',
+        '}',
+        // 子件四条（`operationHead()` 的 `-icon`／`-title`／`-id`／`-time`）。
+        // 图标 40px 中性盒（样张 12px 圆角按 D-5 收进闭集取 14；底色取中性 `var(--soft)`，
+        // 色档由左条＋徽章承担，图标不跟色）；标题 18px／700 取 `detail-section-title` 档
+        // （#567 J4 标题 18 吸收 17／18／20／22）；记录号 13px 取 `--fg2`；时刻行 12px 取
+        // `--fg2`（#179：12px 小字须 4.5:1，`--fg3` 3.62:1 不用）。
+        // 时刻行首的「写入时间 」键（`sportUi.ts` 迁回）：`actionAt` 即写入时间
+        // （`body/receipt.ts:162` 同值同词 `{ k: '写入时间', v: actionAt }`），CSS 内容只进
+        // 渲染层；第二消费族出现时提到调用方文案面并删此条（过渡债务，本票如实记）。
+        '.' + p + 'block-op-head-icon {',
+        '  display: inline-flex;',
+        '  align-items: center;',
+        '  justify-content: center;',
+        '  width: 40px;',
+        '  height: 40px;',
+        '  border-radius: ' + RADIUS_MD + 'px;',
+        '  background: var(--soft);',
+        '  color: var(--fg);',
+        '  font-size: 20px;',
+        '  line-height: 1;',
+        '}',
+        '.' + p + 'block-op-head-title {',
+        '  display: inline-flex;',
+        '  align-items: center;',
+        '  margin: 0;',
+        '  color: var(--fg);',
+        '  font-size: 18px;',
+        '  font-weight: 700;',
+        '}',
+        '.' + p + 'block-op-head-id {',
+        '  flex: 1 0 100%;',
+        '  margin: 0;',
+        '  color: var(--fg2);',
+        '  font-size: 13px;',
+        '}',
+        '.' + p + 'block-op-head-time {',
+        '  flex: 1 0 100%;',
+        '  margin: 0;',
+        '  color: var(--fg2);',
+        '  font-size: 12px;',
+        '}',
+        '.' + p + 'block-op-head-time::before {',
+        '  content: "写入时间 ";',
+        '}',
         // #421 页面融合四件的样式随本区落盘（同 #420 处置：四件都是页面级、不属 12 区块，
         // `BLOCK_STYLE_SECTIONS` 由 `test/blocks.test.mjs` 钉死 12 项，故不新增样式区、不新增 token）。
         // **色值口径（#431 定稿）**：区块自身不写死任何色值字面量——样式里只出现冻结 token。不给 `color`
@@ -1109,6 +1311,9 @@ const BLOCK_SECTION_BUILDERS = {
         '  text-align: right;',
         '}',
         // 12px 小字取 `--blue2`（压 `--soft` 约 5.4:1）；`--blue` 4.02:1 不到 AA 的 4.5:1（#179 口径）。
+        // t728：`margin` 由每枚徽章自带改成**行容器**统一给（`row-gap` / `column-gap`）——改前靠
+        //   `margin: 0 6px 6px 0` 凑间距，右端与下沿各多出 6px 悬空，且末枚右边距在 `text-align:right`
+        //   的父容器里会把整行推歪。裸 `renderChips`（不在行容器里）的调用点仍吃这条 margin，版面不变。
         '.' + p + 'block-chip {',
         '  display: inline-block;',
         '  margin: 0 6px 6px 0;',
@@ -1121,6 +1326,18 @@ const BLOCK_SECTION_BUILDERS = {
         '  font-weight: 600;',
         '  line-height: 1.5;',
         '}',
+        // 徽章行：一枚容器吃掉「并列标签」这件事——间距走 `gap`（末枚不再多出右边距），
+        // 行高走 `min-height`（v 对齐不靠 `line-height` 凑），窄屏 `flex-wrap` 自动换行。
+        '.' + p + 'block-chip-row {',
+        '  display: flex;',
+        '  flex-wrap: wrap;',
+        '  align-items: center;',
+        '  gap: 6px 8px;',
+        '  margin: 0 0 8px;',
+        '}',
+        '.' + p + 'block-chip-row > .' + p + 'block-chip {',
+        '  margin: 0;',
+        '}',
         '.' + p + 'block-change-row {',
         '  display: flex;',
         '  align-items: baseline;',
@@ -1204,7 +1421,20 @@ const BLOCK_SECTION_BUILDERS = {
         '  gap: 12px;',
         '  margin: 16px 0;',
         '}',
+        // #507 桌面列数上限（用户点名：6 张 KPI 在宽屏挤成一行）：基座 `auto-fit minmax(150px,1fr)`
+        // 无上限，越宽列越多。只加 ≥1024 一档 `repeat(3,…)`，基座一行不动；窄屏 2×2（#507 窄屏档）
+        // 与 400 单列（`pageUi` ⑦）各管各档。断点取票面值 1024；选择器挂祖先类（与窄屏档同法），
+        // 同名基座仍恰 1 条（`declsOf` 口径），不新类名、不新样式区。
+        '@media (min-width: 1024px) {',
+        '  .' + p + 'block-page-shell .' + p + 'block-kpi-card-grid {',
+        '    grid-template-columns: repeat(3, minmax(0, 1fr));',
+        '  }',
+        '}',
+        // #513 徽章贴底：卡片改纵向 flex 列（子元素仍纵向满宽，`align-items` 缺省 `stretch`、
+        // 无子元素设交叉轴尺寸 ⇒ 视觉同块流），余量由徽章的 `margin-top: auto` 吃掉（见下）。
         '.' + p + 'block-kpi-card {',
+        '  display: flex;',
+        '  flex-direction: column;',
         '  padding: 14px;',
         '  border: 1px solid var(--line);',
         '  border-radius: ' + RADIUS_MD + 'px;',
@@ -1249,8 +1479,33 @@ const BLOCK_SECTION_BUILDERS = {
         '  font-size: 12px;',
         '  overflow-wrap: anywhere;',
         '}',
+        // #513（续）：`margin-top: auto` 把徽章压到底；`padding-top: 8px` 保住改前 8px 最小间距
+        // （最高卡无余量时徽章位置与改前一致，只动有余量的短卡——正是要修的那几张）。
         '.' + p + 'block-kpi-card-badge {',
+        '  margin-top: auto;',
+        '  padding-top: 8px;',
+        '}',
+        // #418 条位：detail 之后 badge 之前产条（见 renderKpiCard）。色值单源（甲路）：
+        // 三档各一处字面量，源 spec/charts.ts CHART_PALETTE[1..3]，与状态徽章底色同值。
+        '.' + p + 'block-kpi-card-bar {',
+        '  height: 6px;',
+        '  border-radius: ' + RADIUS_PILL + 'px;',
+        '  background: var(--line);',
         '  margin-top: 8px;',
+        '  overflow: hidden;',
+        '}',
+        '.' + p + 'block-kpi-card-bar-fill {',
+        '  height: 100%;',
+        '  border-radius: ' + RADIUS_PILL + 'px;',
+        '}',
+        '.' + p + 'block-kpi-card-bar-high {',
+        '  background: #34c759;',
+        '}',
+        '.' + p + 'block-kpi-card-bar-mid {',
+        '  background: #ff9500;',
+        '}',
+        '.' + p + 'block-kpi-card-bar-low {',
+        '  background: #ff3b30;',
         '}',
         // #507 段标题统一（审查必改 #5）：`blocks.ts` 从 #401 起就给过这条类名产出器的位置
         // （`homeDocs.ts:247` 用 `<h2 class="ilife-block-kpi-card-title">` 出「今日速览」段标题），
@@ -1264,13 +1519,13 @@ const BLOCK_SECTION_BUILDERS = {
         '  font-size: 15px;',
         '  font-weight: 700;',
         '}',
-        // #507 窄屏档（审查必改 #4）：`auto-fit minmax(150px,1fr)` 只在容器有效宽 ≥474px 时排 3 列
+        // #507 窄屏档（审查必改 #4）＋ #427 收窄为单列：`auto-fit minmax(150px,1fr)` 只在容器有效宽 ≥474px 时排 3 列
         // （3×150 ＋ 2×12 间隙），而手机端页面模板 `padding:20px 16px`（见本区 ≤640px 段）——
         // 512 视口下栅格有效宽仅 480px ⇒ 正好卡在 3 列下沿，第 4 张卡单独占一行、宽度只有前三张的
         // 1/3（`grid-auto-rows:1fr` 又让它与前三张**等高**），看着像漏了一张。
-        // 本条只加**窄屏一档**：≤640px 显式 2 列 ⇒ 4 张卡排成整齐 2×2；`minmax(0,1fr)` 里的 0
-        // 是下限（不是 `auto` 那种取内容最小宽），长值卡不会被撑破。桌面档一行不动
-        // （桌面列数上限是另一票的事，本票不碰）。断点取本文件既有先例：`dataTable` 与 `pageShell`
+        // #427（#507§8 三条窄屏归 #427，同一段代码）：≤640 显式单列 ⇒ 390 每张占整行上下排列；
+        // `minmax(0,1fr)` 的 0 是下限（不是 `auto` 那种取内容最小宽），长值卡不会被撑破。
+        // 桌面档一行不动（桌面列数上限 #507 的 1024 三列帽另管）。断点取本文件既有先例：`dataTable` 与 `pageShell`
         // 两处都是 `@media (max-width: 640px)`。
         // 选择器是 `.ilife-block-page-shell .ilife-block-kpi-card-grid`（基础类名前挂一个祖先类），
         // **不是**同名再写一条：① 网格落在页面模板正文里（`renderKpiGrid` 的唯一用法），该祖先恒成立；
@@ -1278,7 +1533,7 @@ const BLOCK_SECTION_BUILDERS = {
         // 判账，同名再起一条会被数成 2 条而红；`dataTable` 区那条同名 640px 规则是历史写法，本票不动它。
         '@media (max-width: 640px) {',
         '  .' + p + 'block-page-shell .' + p + 'block-kpi-card-grid {',
-        '    grid-template-columns: repeat(2, minmax(0, 1fr));',
+        '    grid-template-columns: minmax(0, 1fr);',
         '  }',
         '}',
     ].join(LF),
@@ -1312,6 +1567,22 @@ const BLOCK_SECTION_BUILDERS = {
         '  font-weight: 600;',
         '  text-align: left;',
         '}',
+        // #513 行标记槽：首格前插的行徽标（`renderDataTable` 的 `rows[i].marker`）。行内小徽标：
+        // 色走冻结 token（底 `--soft`＋字 `--blue2`，与 `block-chip` 同口径，不新增 token；
+        // 12px 小字对比度约 5.4:1，#179 口径达 AA）；`white-space: nowrap` 保徽标不断行；
+        // 只吃内容宽，不改窄屏档位（横溢口径见证据件）。
+        '.' + p + 'block-data-table-row-marker {',
+        '  display: inline-block;',
+        '  margin-right: 6px;',
+        '  padding: 1px 7px;',
+        '  border-radius: ' + RADIUS_PILL + 'px;',
+        '  background: var(--soft);',
+        '  color: var(--blue2);',
+        '  font-size: 12px;',
+        '  font-weight: 600;',
+        '  white-space: nowrap;',
+        '  vertical-align: baseline;',
+        '}',
         '.' + p + 'block-data-table th {',
         '  padding: 10px 14px;',
         '  border-bottom: 1px solid var(--line);',
@@ -1340,6 +1611,13 @@ const BLOCK_SECTION_BUILDERS = {
         '.' + p + 'block-data-table tr:last-child td {',
         '  border-bottom: none;',
         '}',
+        // #507 表格斑马纹（用户点名的两条之一；另一条数值列等宽栈已由 #507 视觉底座落地，本票不重做）：
+        // 偶数数据行取 `var(--bg)`（既有冻结 token，不新增语义 token）。只染 `tbody` 行，列头不动；
+        // 背景落 `td`（本表 `border-collapse: collapse`，行背景不可靠）。伪类挂既有类上，不新类名、
+        // 不新样式区；窄屏行卡化（#457）下偶数卡整格同底，仍可读。
+        '.' + p + 'block-data-table tbody tr:nth-child(even) td {',
+        '  background-color: var(--bg);',
+        '}',
         '.' + p + 'block-data-table-cell-left {',
         '  text-align: left;',
         '}',
@@ -1686,6 +1964,13 @@ const BLOCK_SECTION_BUILDERS = {
         '.' + p + 'block-disclosure[open] > .' + p + 'block-disclosure-summary::before {',
         '  transform: rotate(90deg);',
         '}',
+        // #507 减动效归零档（照老壳 `style.ts` 归零档补：本区唯一的 `transition` 在此归零；
+        // 只停过渡，`rotate(90deg)` 开合终态照走）。
+        '@media (prefers-reduced-motion: reduce) {',
+        '  .' + p + 'block-disclosure-summary::before {',
+        '    transition: none;',
+        '  }',
+        '}',
         '.' + p + 'block-disclosure-body {',
         '  padding: 0 14px 14px;',
         '}',