TimeMirror UI 体系预览页
这页现在不只是组件样式展板，而是 TimeMirror 当前 UI 体系的验收入口。它承接主规范之后的可视化校验，帮助我们确认组件、壳子、状态与页面气质是否真的统一。
主规范
2 份
开发前优先阅读 UI规范 与 响应式检查清单。
一层入口
骨架说明
2 份
负责解释基线分层与母版适配关系。
二层说明
辅助规则
6 份
规则卡与品牌参考用于补充执行和风格探索。
三四层
现有 UI 体系
这套体系已经从单纯的组件预览，升级成“规则层 + 预览层 + 运行时真相源”协同工作的结构。
一层：主规范
二层：骨架说明
三层：快速规则卡
四层：品牌参考
预览页在体系中的位置
后续模块开发时，应该先从规则进入，再回到这页做可视化确认。
这页负责什么
这页不负责什么
开发时怎么用
规则到验收区块的映射
后续看这页时，不用再自己脑补“哪份规则对应哪一块 UI”，这里直接给出最常用的检查路径。
主规范 -> 原子层组件
骨架说明 -> 壳子层组件
规则卡 -> 页面细节
品牌参考 -> 页面气质
原子层组件
按钮、输入、选择、切换、标签、分隔线和骨架屏的基础样式预览。规则先定义在主规范，这里负责看它们是否统一。
壳子层组件
共享页面骨架、筛选条、空状态和信息卡样式预览，用来保证模块间体验连续。
快速记录卡片
未来 `time-log` 页面可以直接复用这类卡片结构。
撰写周会复盘
09:00 - 10:20
完成版本复盘与下周优先级整理。
处理沟通与答疑
10:40 - 11:15
被三次临时打断，建议集中到固定时段处理。
还没有可复盘的数据
当某个时间段没有记录时，统一用这种结构提醒用户当前为空，并给出下一步动作。
补充的共享展示组件
这些组件更适合详情说明、回顾轨迹和异常态，不带重后台味，但对 TimeMirror 很实用。
今日专注时段已同步
当前仅同步本地记录，云端同步能力保留在后续阶段。
时间范围
分类
项目
时间轨迹
适合回顾页、详情页和轻量日志区。
异常与说明
这类组件适合统一承接无权限、找不到页面、会话失效或功能未开放等状态。
系统维护中
当前功能暂时不可用，请稍后再试。
交互层补充
这组组件现在已经支持真实开合、外部点击关闭和 Esc 关闭。
现在这些组件已经可以直接复用于真实业务页。这里展示的是它们最常见的使用方式。
Dialog API
支持 `open`、`defaultOpen`、`onOpenChange`，适合确认删除、提交前提醒。
`DialogTrigger` 负责打开，`DialogClose` 负责关闭。
点击遮罩或按 `Esc` 也会关闭。
Drawer / Popover API
Drawer 适合大块编辑，Popover 适合轻提示和轻筛选。
两者都支持非受控默认开关，也能外部控制打开状态。
后面接业务时可以直接把真实内容塞进 `Content` 部分。
页面气质校验
这一版刻意保持低噪音、边框分层和中等信息密度，避免看起来像营销页，也避免被品牌参考层反向带偏。
视觉重点依靠标题、按钮、边框与主色点缀建立，而不是大面积插画或高饱和配色。
后续模块只要沿用这套容器、标题、按钮和表单规则，页面之间就会自然保持一致。
如果后面引入 Apple、Notion 或 Claude 的参考风格，也只能在这套基线上做映射，而不能改写它。
当前建议
这套样式已经可以作为 `time-log` 的起步基线
如果你对这套气质认可，下一步就不是继续争论“长什么样”，而是把它提炼成更完整的组件清单和 token 细则。