识别稳定模式
梳理 token、卡片、媒体、菜单与时间线。
From a product to a package
取自真实页面，
却不止服务一个页面。
FlorUI 围绕稳定的视觉规则与交互意图设计，让组件专注于界面、可访问性和浏览器行为，把业务数据、路由与运行时留给应用。
为什么做 FlorUI
在花官网 已经形成一套鲜明的编辑式界面：衬线标题负责叙事，无衬线正文负责效率，细边框和留白划分层级，主题与响应式规则照顾不同阅读环境。
这些能力原本与消息领域模型、Telegram 数据、官网查询层和 Tailwind 类名紧密相连。FlorUI 将它们重构成公开的 Astro props、插槽与 CSS token，使视觉语言可以独立演进，也能被其他仓库直接安装。
- 01
内容优先于装饰
界面先解释信息层级，再表达品牌个性；装饰永远不能损害阅读。
- 02
公开 API 不认识业务表
组件只接收通用结构，消费方负责把自己的领域数据映射成 props。
- 03
交互是组件的一部分
键盘焦点、触摸手势、减少动态效果与错误反馈和视觉一样重要。
- 04
展示站必须消费发布包
文档不复制组件源码，让每次构建都同时验证公开导出与消费路径。
Extraction flow
从官网实现到可发布 Package。
移除业务耦合
替换领域类型、查询、站点配置和路由约定。
建立公开导出
提供组件、类型、主题 token 和 peer dependency。
在展示站消费
通过真实页面构建验证安装和组合体验。
Package contract
源码分发，边界清晰。
包以 Astro 源组件分发，消费方无需额外 CSS 工具链。Astro 是唯一 peer dependency，样式 token 通过独立入口显式引入。
@zaihuanews/flor-ui
一个包，三个公开入口
- 01
主入口
组件与 TypeScript 数据类型。
- 02
styles.css
浅深主题、字体、边框与语义颜色 token。
- 03
package.json
工具链读取版本和包元信息。