base-paint 0.3.1 → 0.3.3

package/dist/pageShapes.js

@@ -0,0 +1,366 @@
+/** #525 · 页面级形状件三件：**事实条**／**图片与 GIF 容器**／**时间轴条**，
+ *  外加挂在图片容器上的**占位件**（`renderMediaPlaceholder`，#525 追加窄席位）。
+ *
+ *  谁在用（写得出哪两个在用）：**卡路里**的结果型页面装配（本票样板页 `.scratch/t525/` 的
+ *  `查身材照` 目标形态先用；#526 读侧／#527 过程与结果／#528 回执三票照抄）与
+ *  `src/shared/pageKit.ts` 的薄转出。
+ *
+ *  为什么要这三件（用户裁定第 5 条「一个内容要用 `；`／`·` 分割，就代表该处需要 UI 设计」）：
+ *   · **事实条**：一行 N 件事（拍摄时间／距今天数／标签／文件名）此前被压成一串 `·`；
+ *     现在是一排「标签＋值」的格子，由版式承担分隔，文本里一个分隔符都没有。
+ *   · **图片与 GIF 容器**：此前是裸 `<figure>` ＋ 内联样式（`max-height:75vh` 定不住比例，
+ *     图没显出来时留一条黑底占位条与卡片撞色）；现在容器自带**明确宽高比**＋`max-width:100%`
+ *     ＋`object-fit`，没有图时出人话占位，不出黑条。
+ *   · **时间轴条**：一串「时间 ＋ 做了什么」此前也是 `·` 串；现在左侧一条轴线＋圆点，
+ *     时间与正文分两槽。
+ *   · **占位件**：为什么追加——一页里「找不到文件／太大没进这一页」的那几格，此前是**另一套小卡**
+ *     （自己一套内边距与居中），与真图格子的尺寸／圆角／图注位对不上；现在占位格与真图格**同规格**
+ *     （同比例容器／同圆角／同外边距／同图注槽），换卡不换格子。
+ *
+ *  样式与产出器同文件（本件是**页面级**形状，不进 `blocks.ts` 的 12 个区块样式区；理由与
+ *  `pageUi.ts` 同，见该件件头）。类名走既有 `ilife-block-<name>` 命名空间，不新造前缀。
+ *  色值与圆角只用冻结 token 与圆角闭集 `{8,14,20,999}`，不新增。
+ */
+/** 换行（仓库口径：不写字面换行转义，与 `blocks.ts` 同）。 */
+const LF = String.fromCharCode(10);
+/** 五字符转义表（与 `blocks.ts` 的 `esc` 逐字同口径，本件不引区块层内部件）。 */
+function esc(value) {
+    return value.replace(/[&<>"']/g, (ch) => {
+        if (ch === '&')
+            return '&amp;';
+        if (ch === '<')
+            return '&lt;';
+        if (ch === '>')
+            return '&gt;';
+        if (ch === '"')
+            return '&quot;';
+        return '&#39;';
+    });
+}
+function reqText(value, field) {
+    if (typeof value !== 'string' || value.trim() === '') {
+        throw new Error('pageShapes: ' + field + ' 必须是非空字符串');
+    }
+    return value;
+}
+function optText(value, field) {
+    if (value === undefined || value === null)
+        return undefined;
+    if (typeof value !== 'string')
+        throw new Error('pageShapes: ' + field + ' 必须是字符串');
+    return value === '' ? undefined : value;
+}
+/** 事实条：一行 N 件事的呈现形状（替掉 `A · B · C` 那种串）。空数组出不了一个字。 */
+export function renderFactStrip(input) {
+    const items = input.items;
+    if (!Array.isArray(items))
+        throw new Error('pageShapes: renderFactStrip: input.items 必须是数组');
+    if (items.length === 0)
+        return '';
+    const extra = optText(input.extraClass, 'renderFactStrip: input.extraClass');
+    const cells = items.map((item, i) => {
+        const field = 'renderFactStrip: input.items[' + i + ']';
+        const label = reqText(item.label, field + '.label');
+        const value = reqText(item.value, field + '.value');
+        const tone = item.tone;
+        if (tone !== undefined && tone !== 'ok' && tone !== 'warn' && tone !== 'danger') {
+            throw new Error('pageShapes: ' + field + '.tone 必须是 ok／warn／danger 之一');
+        }
+        return '<div class="ilife-block-fact-strip-item">'
+            + '<span class="ilife-block-fact-strip-label">' + esc(label) + '</span>'
+            + '<span class="ilife-block-fact-strip-value'
+            + (tone === undefined ? '' : ' ilife-block-fact-strip-value-' + tone) + '">' + esc(value) + '</span>'
+            + '</div>';
+    }).join('');
+    return '<div class="ilife-block-fact-strip' + (extra === undefined ? '' : ' ' + extra) + '">' + cells + '</div>';
+}
+/* ══════════════════════════════════════════════════════════════
+ * ② 图片与 GIF 容器：明确宽高比 ＋ max-width ＋ object-fit
+ * ══════════════════════════════════════════════════════════════ */
+/** 容器宽高比闭集：`natural`＝按图自身比例（不设比，只兜 `max-width`）。
+ *  `4-5` 是 #525 追加窄席位补的**竖版人像档**——照片画廊的格位本来就是 `4/5`，占位件要与真图同规格，
+ *  比例集里就得有这一档（否则占位卡只能拿 `3-4` 凑，与真图卡差一截）。 */
+export const MEDIA_RATIOS = ['natural', '1-1', '3-4', '4-5', '4-3', '9-16', '16-9'];
+/** 容器外框的唯一装配件（本件内部件，不对外给）：`renderMediaFigure` 与 `renderMediaPlaceholder`
+ *  两件共住这一段——**同规格**这条不变量靠它成立，不靠两处各写一遍再对照。
+ *  `innerHtml` 是**已装配好的框内标记**（调用方负责转义自己那点文本；本层不再转义，否则嵌套标记会变成字面量）。 */
+function renderMediaFrame(input) {
+    const parts = ['<figure class="ilife-block ilife-block-media'
+            + (input.id === undefined ? '' : '" id="' + esc(input.id)) + '">',
+        '<div class="ilife-block-media-frame ilife-block-media-frame-' + input.ratio
+            + ' ilife-block-media-frame-' + input.fit + '">',
+        input.innerHtml,
+        '</div>'];
+    if (input.caption !== undefined) {
+        parts.push('<figcaption class="ilife-block-media-caption">' + esc(input.caption) + '</figcaption>');
+    }
+    if (input.note !== undefined) {
+        parts.push('<div class="ilife-block-media-note">' + esc(input.note) + '</div>');
+    }
+    parts.push('</figure>');
+    return parts.join('');
+}
+/** 图片／GIF 容器：比例、`max-width`、`object-fit` 三件都在这里说清，调用方不再写内联样式。
+ *  没给 `src` 而给 `placeholder` 时，框仍按同一个 `ratio` 定尺寸，框里是那句人话（转义后当纯文本放）。 */
+export function renderMediaFigure(input) {
+    const alt = reqText(input.alt, 'renderMediaFigure: input.alt');
+    const ratio = input.ratio;
+    if (!MEDIA_RATIOS.includes(ratio)) {
+        throw new Error('pageShapes: renderMediaFigure: input.ratio 只许 ' + MEDIA_RATIOS.join('／'));
+    }
+    const fit = input.fit ?? 'contain';
+    if (fit !== 'contain' && fit !== 'cover') {
+        throw new Error('pageShapes: renderMediaFigure: input.fit 只许 contain／cover');
+    }
+    const id = optText(input.id, 'renderMediaFigure: input.id');
+    const src = optText(input.src, 'renderMediaFigure: input.src');
+    const caption = optText(input.caption, 'renderMediaFigure: input.caption');
+    const note = optText(input.note, 'renderMediaFigure: input.note');
+    const placeholder = optText(input.placeholder, 'renderMediaFigure: input.placeholder');
+    if (src === undefined && placeholder === undefined) {
+        throw new Error('pageShapes: renderMediaFigure: input.src 与 input.placeholder 至少其一');
+    }
+    const inner = src === undefined
+        ? '<div class="ilife-block-media-frame-empty">' + esc(placeholder) + '</div>'
+        : '<img class="ilife-block-media-img" src="' + esc(src) + '" alt="' + esc(alt) + '"'
+            + ' loading="lazy" decoding="async">';
+    return renderMediaFrame({ alt, ratio, fit, innerHtml: inner, caption, note, id });
+}
+/** 图片／GIF 的**占位件**：框里没显出的那一格，规格必须与真图那一格逐项相同。
+ *
+ *  **不变量（写死在这一件里，改它先改 `renderMediaFigure`）**：与 `renderMediaFigure` **同规格** ——
+ *  同一个宽高比容器（`<div class="ilife-block-media-frame …">` ＋ 本件要求的同一个 `ratio`）、
+ *  同一个圆角（14px）、同一条外边距（`figure` 的 `margin: 16px 0`）、同一个图注槽
+ *  （`figcaption.ilife-block-media-caption`）与补充槽（`.ilife-block-media-note`）。
+ *  **做法**：本件**不另写一套框**，整页交给 `renderMediaFigure` 装配——调用方就算把真图卡换成占位卡，
+ *  格子尺寸、圆角、外边距、图注位一处都不会变。缺的只是框里那点内容：`reason` 一句 ＋（可选）`next` 一句。
+ *
+ *  **不新增颜色**：框底用 `--soft`、框线用 `--line`（都来自 `.ilife-block-media-frame` 既有规则），
+ *  两句人话只用既有语义词 `--fg2`（主句）／`--fg3`（下一步）；不新造色值、不新造类名前缀。 */
+export function renderMediaPlaceholder(input) {
+    const alt = reqText(input.alt, 'renderMediaPlaceholder: input.alt');
+    const ratio = input.ratio;
+    if (!MEDIA_RATIOS.includes(ratio)) {
+        throw new Error('pageShapes: renderMediaPlaceholder: input.ratio 只许 ' + MEDIA_RATIOS.join('／'));
+    }
+    const reason = reqText(input.reason, 'renderMediaPlaceholder: input.reason');
+    const next = optText(input.next, 'renderMediaPlaceholder: input.next');
+    const fit = input.fit ?? 'contain';
+    if (fit !== 'contain' && fit !== 'cover') {
+        throw new Error('pageShapes: renderMediaPlaceholder: input.fit 只许 contain／cover');
+    }
+    const inner = '<div class="ilife-block-media-empty">'
+        + '<div class="ilife-block-media-reason">' + esc(reason) + '</div>'
+        + (next === undefined ? '' : '<div class="ilife-block-media-next">' + esc(next) + '</div>')
+        + '</div>';
+    // 同规格复用：容器比例／圆角／外边距与图注两槽都走同一个装配件，本件不复制那段标记。
+    return renderMediaFrame({
+        alt,
+        ratio,
+        fit,
+        innerHtml: inner,
+        caption: optText(input.caption, 'renderMediaPlaceholder: input.caption'),
+        note: optText(input.note, 'renderMediaPlaceholder: input.note'),
+        id: optText(input.id, 'renderMediaPlaceholder: input.id'),
+    });
+}
+/** 时间轴条：一串「时间 ＋ 做了什么」的呈现形状。0 条＝空串。 */
+export function renderTimelineRows(input) {
+    const rows = input.rows;
+    if (!Array.isArray(rows))
+        throw new Error('pageShapes: renderTimelineRows: input.rows 必须是数组');
+    if (rows.length === 0)
+        return '';
+    const extra = optText(input.extraClass, 'renderTimelineRows: input.extraClass');
+    const body = rows.map((row, i) => {
+        const field = 'renderTimelineRows: input.rows[' + i + ']';
+        const time = reqText(row.time, field + '.time');
+        const main = reqText(row.main, field + '.main');
+        const note = optText(row.note, field + '.note');
+        return '<li class="ilife-block-timeline-row">'
+            + '<span class="ilife-block-timeline-dot" aria-hidden="true"></span>'
+            + '<span class="ilife-block-timeline-time">' + esc(time) + '</span>'
+            + '<span class="ilife-block-timeline-main">' + esc(main) + '</span>'
+            + (note === undefined ? '' : '<span class="ilife-block-timeline-note">' + esc(note) + '</span>')
+            + '</li>';
+    }).join('');
+    return '<ol class="ilife-block-timeline' + (extra === undefined ? '' : ' ' + extra) + '">' + body + '</ol>';
+}
+/* ══════════════════════════════════════════════════════════════
+ * 三支形状＋占位件的样式（与产出器同件；只对用上它们的页面有作用）
+ * ══════════════════════════════════════════════════════════════ */
+/** 形状件的样式唯一产出者（①②③ 三支 ＋ ②b 占位件）。恒返回非空 CSS 文本。 */
+export function pageShapeCss(input) {
+    const p = input !== undefined && input !== null
+        && typeof input.prefix === 'string' && input.prefix !== '' ? input.prefix : 'ilife-';
+    const root = '.' + p + 'page-ui';
+    return [
+        '/* #525 页面级形状件三件 */',
+        '/* ① 事实条：一格「标签 ＋ 值」，格与格靠 22px 列距分开（不用任何分隔符字符）。 */',
+        root + ' .' + p + 'block-fact-strip {',
+        '  display: flex;',
+        '  flex-wrap: wrap;',
+        '  gap: 10px 22px;',
+        '  margin: 12px 0 0;',
+        '}',
+        root + ' .' + p + 'block-fact-strip-item {',
+        '  display: flex;',
+        '  flex-direction: column;',
+        '  gap: 2px;',
+        '  min-width: 0;',
+        '}',
+        root + ' .' + p + 'block-fact-strip-label {',
+        '  color: var(--fg3);',
+        '  font-size: 12px;',
+        '}',
+        root + ' .' + p + 'block-fact-strip-value {',
+        '  color: var(--fg);',
+        // #567 J4（§5.2 区块标题 15 吸收 14／15）。
+        '  font-size: 15px;',
+        '  font-weight: 600;',
+        '  overflow-wrap: anywhere;',
+        '}',
+        root + ' .' + p + 'block-fact-strip-value-ok {',
+        '  color: #1f8c3d;',
+        '}',
+        root + ' .' + p + 'block-fact-strip-value-warn {',
+        '  color: #a25b00;',
+        '}',
+        root + ' .' + p + 'block-fact-strip-value-danger {',
+        '  color: #a83228;',
+        '}',
+        '/* ② 图片／GIF 容器：比例写在容器上，图按 object-fit 摆；没有图时是人话占位，不出黑底条。 */',
+        root + ' .' + p + 'block-media {',
+        '  margin: 16px 0;',
+        '}',
+        root + ' .' + p + 'block-media-frame {',
+        '  position: relative;',
+        '  overflow: hidden;',
+        '  width: 100%;',
+        '  max-width: 100%;',
+        // #530：`width:100%`＋`border:1px` 在 content-box 下＝100%＋2px，09-02 在 768／1440 档
+        // 恰好溢出 2px（回归门红）。框自己吃 border-box，不碰全局盒模型。
+        '  box-sizing: border-box;',
+        '  border: 1px solid var(--line);',
+        '  border-radius: ' + 14 + 'px;',
+        '  background: var(--soft);',
+        '}',
+        root + ' .' + p + 'block-media-frame-1-1 { aspect-ratio: 1 / 1; }',
+        root + ' .' + p + 'block-media-frame-3-4 { aspect-ratio: 3 / 4; }',
+        root + ' .' + p + 'block-media-frame-4-5 { aspect-ratio: 4 / 5; }',
+        root + ' .' + p + 'block-media-frame-4-3 { aspect-ratio: 4 / 3; }',
+        root + ' .' + p + 'block-media-frame-9-16 { aspect-ratio: 9 / 16; }',
+        root + ' .' + p + 'block-media-frame-16-9 { aspect-ratio: 16 / 9; }',
+        root + ' .' + p + 'block-media-frame-natural {',
+        '  aspect-ratio: auto;',
+        '}',
+        root + ' .' + p + 'block-media-img {',
+        '  display: block;',
+        '  width: 100%;',
+        '  height: 100%;',
+        '  max-width: 100%;',
+        '}',
+        root + ' .' + p + 'block-media-frame-contain .' + p + 'block-media-img {',
+        '  object-fit: contain;',
+        '}',
+        root + ' .' + p + 'block-media-frame-cover .' + p + 'block-media-img {',
+        '  object-fit: cover;',
+        '}',
+        root + ' .' + p + 'block-media-frame-empty {',
+        '  display: flex;',
+        '  align-items: center;',
+        '  justify-content: center;',
+        '  box-sizing: border-box;',
+        '  height: 100%;',
+        '  padding: 24px 18px;',
+        '  color: var(--fg2);',
+        '  font-size: 13px;',
+        '  line-height: 1.6;',
+        '  text-align: center;',
+        '}',
+        root + ' .' + p + 'block-media-caption {',
+        '  margin-top: 8px;',
+        '  color: var(--fg);',
+        // #567 J4（§5.2 区块标题 15 吸收 14／15）。
+        '  font-size: 15px;',
+        '  font-weight: 600;',
+        '}',
+        root + ' .' + p + 'block-media-note {',
+        '  margin-top: 2px;',
+        '  color: var(--fg2);',
+        '  font-size: 12px;',
+        '  line-height: 1.6;',
+        '  overflow-wrap: anywhere;',
+        '}',
+        '/* ②b 占位件（`renderMediaPlaceholder`）：框体走上面 ② 的同一套规则（同比例／同圆角／同外边距），',
+        '   这里只补框内那两句人话的槽位；只用既有语义词，不新增颜色。 */',
+        root + ' .' + p + 'block-media-empty {',
+        '  display: flex;',
+        '  flex-direction: column;',
+        '  gap: 6px;',
+        '  box-sizing: border-box;',
+        '  height: 100%;',
+        '  padding: 0 18px;',
+        '  align-items: center;',
+        '  justify-content: center;',
+        '  text-align: center;',
+        '}',
+        root + ' .' + p + 'block-media-reason {',
+        '  color: var(--fg2);',
+        '  font-size: 13px;',
+        '  line-height: 1.6;',
+        '  overflow-wrap: anywhere;',
+        '}',
+        root + ' .' + p + 'block-media-next {',
+        '  color: var(--fg3);',
+        '  font-size: 12px;',
+        '  line-height: 1.6;',
+        '  overflow-wrap: anywhere;',
+        '}',
+        '/* ③ 时间轴条：一条轴线 ＋ 逐条圆点；时间与正文分两槽（不用 · 串）。 */',
+        root + ' .' + p + 'block-timeline {',
+        '  margin: 16px 0;',
+        '  padding: 4px 0 4px 18px;',
+        '  border-left: 1px solid var(--line);',
+        '  list-style: none;',
+        '}',
+        root + ' .' + p + 'block-timeline-row {',
+        '  position: relative;',
+        '  display: flex;',
+        '  flex-wrap: wrap;',
+        '  gap: 2px 12px;',
+        '  align-items: baseline;',
+        '  padding: 6px 0;',
+        '}',
+        root + ' .' + p + 'block-timeline-dot {',
+        '  position: absolute;',
+        '  left: -23px;',
+        '  top: 13px;',
+        '  width: 9px;',
+        '  height: 9px;',
+        '  border-radius: 50%;',
+        '  background: var(--blue);',
+        '}',
+        root + ' .' + p + 'block-timeline-time {',
+        '  flex: 0 0 auto;',
+        '  color: var(--fg2);',
+        '  font-size: 13px;',
+        '  font-variant-numeric: tabular-nums;',
+        '}',
+        root + ' .' + p + 'block-timeline-main {',
+        '  flex: 1 1 auto;',
+        '  min-width: 0;',
+        '  color: var(--fg);',
+        // #567 J4（§5.2 区块标题 15 吸收 14／15）。
+        '  font-size: 15px;',
+        '  font-weight: 600;',
+        '}',
+        root + ' .' + p + 'block-timeline-note {',
+        '  flex: 1 1 100%;',
+        '  color: var(--fg3);',
+        '  font-size: 12px;',
+        '  line-height: 1.6;',
+        '}',
+    ].join(LF);
+}
+//# sourceMappingURL=pageShapes.js.map

package/dist/pageShapes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pageShapes.js","sourceRoot":"","sources":["../src/pageShapes.ts"],"names":[],"mappings":"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"}

package/dist/pageUi.d.ts

@@ -0,0 +1,37 @@
+/** #525 · 页面级移动端配方（共用件）：把 HELP 页当刻的手机端能力搬进「结果型／过程型／回执」
+ *  三类页面共走的那条链，一次到位，四张下游票照抄而不必各写一遍。
+ *
+ *  谁在用（写得出哪两个在用）：**卡路里**的整页装配 `src/shared/docPage.ts` 的 `pageUi` 可选位
+ *  （`skill-calorie/src/shared/docPage.ts` 传 `pageUi: true` 时把本函数拼进 `sharedCssText`）；
+ *  **样板页** `.scratch/t525/` 的 `查身材照` 目标形态（票 #525 的照抄对象）。
+ *
+ *  为什么另立一件而不写进 `blocks.ts`：`blocks.ts` 是 12 个区块样式区的唯一定义地，本件是
+ *  **页面级**配方（断点／触摸区／安全区／窄屏表格行为），与 12 区无组合关系——与同仓先例
+ *  `block-toc`（页内导航）、`block-caliber`（口径行）、`block-conclusion`（结论条）落
+ *  `pageShell` 区同一类东西，只是体量更大，故另立文件。（#525 开工当刻 `blocks.ts` 有第二个
+ *  写窗在途，见 `docs/skills/skill-calorie/t525-证据.md` 的并发记账。）
+ *
+ *  口径（票面「手机端基准＝HELP 页当刻的能力，不是新设计」）逐条：
+ *   · 断点只用仓内既有值 **820／640／400**（`blocks.ts` 的 640、`TOAST_DEFAULTS.mobileMaxPx`
+ *     的 820、`style.ts` 的 400），**不新造断点值**；
+ *   · 触摸区 ≥44×44px（HELP `.ilife-copy-btn` 820 档 `min-height:44px` 同值）；
+ *   · `env(safe-area-inset-*)`（HELP toast 与回顶按钮同法；须配 `viewport-fit=cover`）；
+ *   · 页脚留白 60px（HELP `.ilife-help-shell` 640 档 `padding: 20px 16px 60px` 逐值同）；
+ *   · 读数卡窄屏两格 → 400 档单列（HELP `.ilife-help-shell-grid` 640 档单列的同一条意图）；
+ *   · 页内定位：带 `id` 的区块吃 `scroll-margin-top`，锚点跳转不把标题顶到视口外。
+ *
+ *  **全部规则都挂在根类 `.ilife-page-ui` 之下**：没启用本配方的页面一条都命中不到
+ *  （产出物逐字节不变，登录门读数见证据件）。
+ */
+/** 页面级配方的根类名：整页装配把这一颗类加到版面根上（`docPage.ts` 的 `pageUi` 位）。 */
+export declare const PAGE_UI_CLASS = "ilife-page-ui";
+/** 配 `viewport-fit=cover` 的 viewport 串（`env(safe-area-inset-*)` 在 iOS 上不写它恒取 0）。
+ *  只在启用本配方时用它替换旧串；不给即老串（旧调用方逐字节不变）。 */
+export declare const PAGE_UI_VIEWPORT = "width=device-width,initial-scale=1,viewport-fit=cover";
+export interface PageUiCssInput {
+    /** 类名前缀；缺省 `ilife-`（与 `blocksCss({ prefix })` 同口径）。 */
+    readonly prefix?: string;
+}
+/** 页面级移动端配方的样式资产唯一产出者。恒返回非空 CSS 文本。 */
+export declare function pageUiCss(input?: PageUiCssInput): string;
+//# sourceMappingURL=pageUi.d.ts.map

package/dist/pageUi.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pageUi.d.ts","sourceRoot":"","sources":["../src/pageUi.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAKH,4DAA4D;AAC5D,eAAO,MAAM,aAAa,kBAAkB,CAAC;AAE7C;uCACuC;AACvC,eAAO,MAAM,gBAAgB,0DAA0D,CAAC;AAExF,MAAM,WAAW,cAAc;IAC7B,uDAAuD;IACvD,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,uCAAuC;AACvC,wBAAgB,SAAS,CAAC,KAAK,CAAC,EAAE,cAAc,GAAG,MAAM,CA0MxD"}