AIFOLLOW.NEWS / DESIGN SYSTEM
组件标准
v1.0 · 2026.10让每一次点击，都有一致的体验。
参考 OpenAI 与 ChatGPT 的简洁界面，为事件与人物跟踪建立统一组件。示例交互仅在本页生效，可通过右上角切换深浅主题。
01
基础
中性色为主，状态色传递含义。统一字体、间距与圆角。
画布
--bg次级表面
--raised主要文字
--ink辅助文字
--muted字号 / 系统字体
清晰的内容层次
正文 14–16 · 标签 13 · 辅助 12
间距 / 4px 基础单位
4812162432
控件圆角 12px · 面板 16px · 按钮与胶囊 999px。尺寸为本项目标准。
02
按钮
一个操作区域只突出一个主动作。次操作用描边，轻操作用透明底。
操作层级
尺寸与图标
状态
点击按钮查看交互状态。
开发用法
{% import 'ui_macros.html' as ui %}
{{ ui.button('创建跟踪', 'primary', icon='plus') }}
{{ ui.button('查看详情', href='/all') }}03
Tab 与胶囊
导航用于换页面，Tab 用于切换视图，筛选标签用于组合条件。
分段 Tab / 页内视图
关注事件的每一步
同一事件的后续进展，放在一起阅读。
了解人物的新动态
沿着人物时间线，查看最新报道与原始出处。
留住值得回看的内容
收藏的报道集中展示，方便稍后阅读。
独立胶囊 / 页面导航
筛选标签 / 可多选
已选：人工智能
选中态同时体现字重与边界；窄屏在组件内横向滚动。页内 Tab 支持方向键、Home 和 End。
04
表单
标签始终可见，说明紧邻字段。错误写出原因，不只改变颜色。
使用简短、容易辨认的名称。
请输入完整的邮箱地址，例如 name@example.com。
试试输入“按钮”或“Tab”。
输入名称可查找本页组件。
已开启（仅本页示例）
05
状态反馈
徽标表达状态，提示解释发生了什么。反馈放在相关内容附近。
06
菜单与弹窗
菜单收纳次操作。弹窗聚焦一个决定，关闭后焦点回到入口。
弹窗支持 Escape 关闭、焦点约束与窄屏滚动；菜单保持原生链接和按钮的键盘顺序。