UI 组件库与设计规范 Demo
为未来的 AI Agent 和开发者提供标准的组件调用参考，严格遵循 Google Material Design 3 极简扁平化风格与紫色系配色。
排版与文本 (Typography)
全局排版规范已在
common.css 中定义，直接使用原生 HTML 标签或相应的 class 即可。字体颜色通过中性色变量控制。H1 页面主标题 (32px, Bold)
H2 区块标题 (22px, Bold)
H3 模块小标题 (18px, Bold)
正文内容 (p标签)：这是一段标准的正文内容。字号为16px，行距1.8，颜色为深灰色 --zl-text-primary，提供舒适的阅读体验。不要使用纯黑，以免视觉疲劳。
次要文本 (.text-secondary)：用于描述性文字、副标题等。字号14px，颜色更浅。
辅助极小文本 (.text-minor)：用于时间、来源、版权等。字号12px。
颜色规范 (Colors)
优先使用
var(--zl-primary) 作为核心色，避免复杂渐变。状态颜色用于特定的成功、警告、危险场景。
Primary
#695ddf
#695ddf
Primary Opacity
#695ddf1a
#695ddf1a
Success
var(--zl-success)
var(--zl-success)
Warning
var(--zl-warning)
var(--zl-warning)
Danger
var(--zl-danger)
var(--zl-danger)
按钮组件 (Buttons)
按钮遵循 Material Design 的药丸形圆角
--zl-radius-full。提供主按钮、次按钮、文本按钮等。标签与徽章 (Tags & Badges)
标签用于分类和状态展示。默认标签已在
common.css 定义。徽章常用于消息提示。
默认标签 (Primary)
成功状态
警告状态
失败/危险
12
新
卡片组件 (Cards)
卡片是基础的容器组件。默认拥有
--zl-radius-xl 圆角和轻量阴影。悬浮时会有主题色边框和上浮效果。AI 分析工具
一键分析财报数据
提示框 (Alerts / Highlight Boxes)
常用于文章详情页或工具页，用来高亮提示重要信息、免责声明等。
主要提示信息
这是普通的主题色提示框，背景使用了
--zl-primary-opacity。免责声明 / 警告信息
股市有风险，投资需谨慎。本平台提供的数据仅供参考，不构成任何投资建议。
页面横幅 (Banner)
用于列表页或工具页顶部的 Header 区域，统一采用扁平化透明背景色。
表单组件 (Forms)
用于工具操作面板或信息收集，聚焦时有主题色的发光阴影效果。