组件标准
v1.2 · 2026.10让每一次点击，都有一致的体验。
基础
中性色为主，状态色传递含义。统一字体、间距与圆角。
--bg--raised--ink--muted清晰的内容层次
正文 16 / 24 · 导航 14 / 20 · 辅助 12 / 16
正文 16px：阅读事件进展，保留清晰、舒适的中文与 English 排版。
导航 14px：人物动态 · 公司与产品 · 我的收藏
辅助 12px：来源、时间与分组说明
侧栏菜单字重 400、行高 20px；桌面菜单高 36px，手机触控区域至少 44px。系统字体按设备选择，保留中文回退。
控件圆角 12px · 面板 16px · 按钮与胶囊 999px。尺寸为本项目标准。
按钮
一个操作区域只突出一个主动作。次操作用描边，轻操作用透明底。
点击按钮查看交互状态。
开发用法
{% import 'ui_macros.html' as ui %}
{% from 'macros.html' import content_card with context %}
{{ ui.button('创建跟踪', 'primary', icon='plus') }}
{{ ui.button('查看详情', href='/all') }}Tab 与胶囊
导航用于换页面，Tab 用于切换视图，筛选标签用于组合条件。
关注事件的每一步
同一事件的后续进展，放在一起阅读。
了解人物的新动态
沿着人物时间线，查看最新报道与原始出处。
留住值得回看的内容
收藏的报道集中展示，方便稍后阅读。
已选：人工智能
选中态同时体现字重与边界；窄屏在组件内横向滚动。页内 Tab 支持方向键、Home 和 End。
表单
标签始终可见，说明紧邻字段。错误写出原因，不只改变颜色。
使用简短、容易辨认的名称。
请输入完整的邮箱地址，例如 name@example.com。
试试输入“按钮”或“Tab”。
输入名称可查找本页组件。
已开启（仅本页示例）
状态反馈
徽标表达状态，提示解释发生了什么。反馈放在相关内容附近。
菜单与弹窗
菜单收纳次操作。弹窗聚焦一个决定，关闭后焦点回到入口。
弹窗支持 Escape 关闭、焦点约束与窄屏滚动；菜单保持原生链接和按钮的键盘顺序。
内容卡片
精选、人物和事件动态共用一个容器。场景只定制顶部标签。
圆角 16px · 1px 边框 · 桌面内边距 20px / 手机 16px · 正文 16/24。时间轴在容器之外；摘要、推荐理由与操作按真实内容和能力出现。
开发用法
{% from 'macros.html' import card, content_card with context %}
{{ card(item) }}
{# 独立容器：content_card(item)。场景标签：item.cardTags。 #}