组件展示
前台所有界面组件的活文档。这里用的是真实类名，不是截图： 组件改了样式，这一页跟着变；这一页显示正常，真实页面就一定正常。
设计令牌
颜色、间距、圆角、字体全部定义在 frontend/tokens.css。
组件只引用语义变量，所以深色主题只需要覆盖变量，不重写任何组件规则。
品牌与状态色
字号阶梯
--ui-text-3xl · 40px
--ui-text-2xl · 28px
--ui-text-xl · 22px
--ui-text-lg · 18px
--ui-text-md · 16px
--ui-text-base · 15px
--ui-text-sm · 13px
--ui-text-xs · 12px
间距与圆角
按钮
主要动作用 --primary，其余一律默认样式；危险操作配 --danger。
.ui-btn / --primary / --ghost / --danger
带图标 · 尺寸 · 整行
标签与徽标
.ui-tag 是分类 / 标签云，可点击；
.ui-badge 是只读状态标记，不响应当前状态。
.ui-tag / --current（当前筛选项）
.ui-badge / --brand / --success / --warning / --danger
表单
输入框、下拉、文本域共用一套描边与聚焦环；说明文字统一用 .ui-field__hint。
.ui-input / .ui-select / .ui-textarea
显示在文章列表与页面的 <title> 里。
标识只能用字母、数字和短横线。
.ui-inline-field（搜索框）
卡片与面板
.ui-card 带标题栏，用于成组内容；
.ui-panel 只有边框，用于一段独立说明。
.ui-card
最近更新
共 24 篇
卡片头放标题与辅助信息，卡体放内容。表格型内容用 __body 以外的布局时可自行去内边距。
.ui-tool-card
文章列表
列表项由 partials/post-item.blade.php 渲染，首页、分类、标签、搜索共用同一个组件。
.ui-post-list / .ui-post
-
用 CSS 变量做主题切换
把颜色收进一层语义变量之后，深色主题只需要覆盖变量，组件规则一行都不用改。
-
无摘要、无分类的列表项
.ui-archive__group（归档时间线）
正文排版
Markdown 渲染结果放进 .ui-prose，标题、列表、引用、代码、表格全部由它接管。
.ui-prose
二级标题
正文段落，包含 加粗、斜体、
链接 与 行内代码。
三级标题
- 无序列表第一项
- 无序列表第二项
- 有序列表第一项
- 有序列表第二项
引用块用于摘录与旁注，左边一条品牌色竖线。
php artisan route:list
// 代码块右上角会出现「复制」按钮| 令牌 | 用途 |
|---|---|
--ui-text | 正文与标题 |
--ui-text-soft | 摘要与说明 |
分隔线之后仍可继续。
分页
组件 partials/pager.blade.php，接收 $paginator，页码与当前页由它自己判断。
.ui-pager（58 条 / 每页 10 条 / 当前第 3 页）
提示与状态
区块内的提示用 .ui-alert；整页无内容用 .ui-empty-state；
单行说明用 .ui-empty。
.ui-alert / 可关闭
.ui-empty-state
.ui-empty（单行）
还没有文章，登录后台写第一篇。
标签页与弹窗
这两类组件需要脚本配合，行为在 js/frontend/modules/demo.js；
原生 <dialog> 自带焦点管理与 Esc 关闭，不需要第三方弹窗库。
标签页（点击切换）
「全部」面板：共 24 篇文章。
「已发布」面板：20 篇文章。
「草稿」面板：4 篇文章。
弹窗（<dialog>）
图标
统一走 <x-icon name="…" />：24×24 线性描边，颜色继承 currentColor，
不引图标字体，也不从 CDN 下载。
常用图标（完整清单见 components/icon.blade.php）
尺寸与颜色继承