组件库

改配色只需动 --brand 一处；构建命令是 pnpm build，产物在 .output/public。

-- 取最近 20 篇免费文章
SELECT c.id, c.title, c.category_id, c.create_time
FROM ba_content c
WHERE c.is_paid = 0
  AND c.status = 'normal'
ORDER BY c.create_time DESC
LIMIT 20;

下面这条是超宽单行（约 200 字符）：375px 下应当在块内横滚，页面本身不出现横向滚动。

SELECT id, title, category_id, is_paid, create_time, update_time, cover, slug, summary, view_count, sort, author FROM ba_content WHERE category_id IN (12, 13, 14, 18, 22, 23, 25, 28, 29) ORDER BY c.create_time DESC;

Q1 · 摘录式 doc-pull

三点不同：① 只有上下一对细线，没有底色也没有左竖条，像书里的 pull-quote 被"夹"在正文里； ② 超大半透明引号作排版锚点（它占位、定基线、给眼睛一个入口，不是装饰）； ③ 出处右侧竖排 —— 中文传统"边批"读法，把出处从"底部一行小字"变成一条纵向坐标。

Q2 · 页边注式 doc-marg

两栏：左窄栏放编号 + 竖线，右栏正文。像论文的页边注 / 法律文本的条款标记 —— 适合"引权威来源"，因为出处与正文平级并列，而不是屈居页脚。 左侧竖线用品牌色渐隐（--brand → 透明），给"这是引用"一个不发散的提示。

5.1 侧锚（主推） · Alert theme="anchor" —— 正文里插入用

三个部件：① 竖线浮空（2px 圆头，撑满内容整高，容器零底色零边框零内边距）· ② 档名占行（图标 + 档名并排一行，不与正文挤在一起）· ③ 正文落灰（档名深色 + 字重 600，正文 --c-text-2）。 层次靠字重 + 灰阶而不是色块 ⇒ 五档叠起来也是安静的，不会变成五道荧光笔痕。 不传 title 时档名自动取状态名 —— 不依赖颜色也能读（色盲 / 灰度打印 / 截图转黑白都可用）。

5.2 强度轴 · 档位越"重"，线越粗也越实

两轴叠加：线宽（2px / 3px）× 实度（34% / 62% / 100%）。 取值全部挂在状态槽位 --al-rail-w / --al-rail-o，与 --al-bar 在同一处单点 ⇒ 五档不会各自漂移（项目约定硬约束 6）。 下面每行的线就是真取该档槽位画的，不是贴图。

⚠️ 如实记录两个照原稿保留的取舍（用户点名要 A 原版，本轮未改）： ① 说明与信息两档强度完全相同 ⇒ 五档实际只有 3 个视觉层级； ② 分级用的是不透明度而不是纯线宽 ⇒ 浅底上 34% 的线偏像"褪色 / 没渲染好"。 两条都有现成修法（把 thin 再降一档 / 改成纯线宽分级），要改说一声。

5.3 带标题 · 带强调的真实用法

传了 title 就用标题当档名（更贴合业务）， 没传就落到状态名。灰正文里的加粗会自动回到深色 —— 否则"强调"落在灰上等于没强调；行内代码同样降到正文灰，不抢正文。 侧锚无壳，所以放在任何底色上都不打架（页面底 / 卡片 / 浮层通用）。

5.4 密度测试 · doc-anchor-stack--tight —— 一屏连排 8 条会不会脏

这是稿子末尾点名的「最该看的一节」：提醒类真正容易失控的不是单条好不好看， 而是连排时会不会碎成一堆彩色片子。侧锚把颜色压到"一根线 + 一个图标"， 所以连排 8 条读下来仍是一条安静的竖线阵列，节奏由灰阶而不是色相切分。

5.5 浮层轻提醒 · Toast —— 不阻断，告知"刚才那件事的结果"

Toast 内部复用同一套侧锚（theme="anchor"） ⇒ 浮层与正文里的提醒是同一套语言，不是两套设计。 外壳这一步做了中性化：原本外壳自带一条 3px 状态色条， 叠加侧锚的竖线会并排成双线，所以外壳退成中性细边 （浮层身份由底色 + 阴影承担），状态色只出现在竖线与图标上。 底部那条倒计时线随 duration 收缩， 把"还剩多久自动关"从隐藏状态变成可见信息；实现是纯 CSS 动画（时长由组件写进内联 --tp），不引 JS 计时器 ⇒ 不用 Toast 时零成本。 传 :duration="0"（常显）时不渲染这条线。 下方为看清效果做了循环播放（真实使用只走一次）。 真实使用默认 position:fixed，此处 :fixed="false" 落在展示框内。

5.6 表单行内反馈 —— 与五档同色，只是更小更贴身（无底无色条，仅着色文字）

5.7 极轻 · 状态胶囊 · Alert theme="pill" —— 正文行内的指向，比侧锚更轻

场景："点这个""注意第 3 步"这种极轻的指向性提示 —— 上侧锚太重、纯文字又看不出是提示。胶囊小、同色、不打断阅读节奏（三个状态都可在句中用）。

5.8 说明气泡 · doc-tipbox —— 纯 CSS、零 JS

触发方式三种：鼠标悬停 · 键盘 Tab 聚焦（:focus-within）· 显式加 .is-open 常显。方向由 data-side 决定，支持 top / bottom / left / right。 箭头用旋转方块而不是 border 三角 —— 三角在暗色模式会露白边。 第 1 个是 .is-open 常显示意，其余请直接悬停或按 Tab。

5.9 备选与存档 —— 前几版各留一条，便于对比为什么换掉

下面四条都还在代码里（改 theme 就切）， 不是删掉的死代码 —— 只是不再是默认选择。

变体

尺寸 · 块级

状态（前 3 个是真交互，鼠标移上去 / Tab 聚焦试）

语义变体

尺寸

徽章（数字 / 圆点）

勾选 / 单选 / 开关

面包屑

• 首页
• /
• 资料分析
• /
• 正文样式规范

标签页

分页

危险操作确认（state="error"）—— 确认按钮借用按钮组件的 doc-danger，不为提醒组件另造按钮色板

纯告知（state="info" :single="true"）—— 单按钮，无需用户做选择

H1 · 22px / 500

H2 · 18px / 500

H3 · 16px / 500

H4 · 14.5px / 500

正文段落 · 13.5px / 行高 1.85 / --c-text-2。 这里放两行以便观察行高与段距是否舒服。

辅助文字 · 12.5px / --c-text-3

等宽 · 12.5px —— ba_content / /sukiyous.php

强调用 500 字重 + --c-text； 链接用品牌色 + 半像素下划线； 按键 Ctrl + Shift + R。

间距刻度（4 / 8 / 12 / 16 / 24 / 32）