yueqian/wiki

Fork 0

Files

T

yueqian-ai acca2041f0 init: 导入团队知识库内容

2026-05-14 16:56:48 +08:00

5.6 KiB

Raw Blame History

UI 设计规范 — Ant Design 阿里云风格

本项目的报告页面、索引页面均遵循此规范。设计灵感来源于 Ant Design v5 + 阿里云控制台主题。

1. 配色方案

1.1 品牌色

用途	Token	值	说明
品牌主色	`--color-primary`	`#1677FF`	Ant Design v5 默认品牌蓝
悬停态	`--color-primary-hover`	`#4096FF`	主色上浮一级
激活态	`--color-primary-active`	`#0958D9`	主色下压一级
浅色背景	`--color-primary-bg`	`#E6F4FF`	品牌蓝 6% 不透明度

1.2 功能色

用途	Token	值
成功	`--color-success`	`#52C41A`
警告	`--color-warning`	`#FAAD14`
错误	`--color-error`	`#FF4D4F`
信息	`--color-info`	`#1677FF`

1.3 中性色（亮色主题 / 报告页用暗色主题变体）

用途	Token	亮色值	暗色值
页面背景	`--bg`	`#F5F5F5`	`#0B0F1A`
容器背景	`--bg-container`	`#FFFFFF`	`#111827`
二级背景	`--bg-elevated`	`#FAFAFA`	`#1A2235`
边框	`--border`	`#D9D9D9`	`#1E2A3A`
边框浅	`--border-light`	`#F0F0F0`	`#151D2E`
主文字	`--text-primary`	`#141414`	`#E8ECF1`
次要文字	`--text-secondary`	`#595959`	`#8892A4`
辅助文字	`--text-tertiary`	`#8C8C8C`	`#5A6478`

1.4 渐变色

用途	值
标题渐变	`linear-gradient(135deg, #1677FF 0%, #722ED1 100%)`
成功渐变	`linear-gradient(135deg, #52C41A 0%, #1677FF 100%)`

2. 字体规范

基于 Ant Design 动态秩序原则，基准字号 14px，行高 22px。

级别	字号	行高	字重	场景
H1 页面标题	30px	38px	700	报告页眉标题
H2 区块标题	24px	32px	600	报告 section 标题
H3 小节标题	20px	28px	600	子章节标题
H4 小标题	16px	24px	600	卡片内标题
Body 正文	14px	22px	400	正文内容
Caption 辅助	12px	20px	400	标签、注释、日期

字体族

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
  'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
  'Helvetica Neue', Helvetica, Arial, sans-serif;

代码字体：

font-family: 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace;

3. 圆角规范

Ant Design v5 四级圆角体系：

Token	值	使用场景
`radius-xs`	2px	Tag、Badge
`radius-sm`	6px	Input、Button、小卡片
`radius-md`	8px	Card、Panel、大卡片
`radius-lg`	12px	Modal、弹窗、大容器

4. 间距规范

基于 8px 基准单位：

Token	值	使用场景
`space-xs`	4px	极紧凑间距
`space-sm`	8px	小间距
`space-md`	12px	中等间距
`space-lg`	16px	标准间距
`space-xl`	24px	大间距
`space-2xl`	32px	区块间距
`space-3xl`	48px	大区块间距

5. 布局规范

元素	值	说明
顶栏高度	`64px`	Ant Design 标准顶栏
侧栏宽度	`260px`	目录导航栏
内容区最大宽度	`1200px`	居中显示
内容区内边距	`32px 40px`	桌面端
移动端内边距	`16px`	≤768px

6. 阴影规范

Token	值	使用场景
`shadow-sm`	`0 1px 2px rgba(0,0,0,0.03), 0 1px 6px -1px rgba(0,0,0,0.02)`	小卡片
`shadow-md`	`0 2px 4px rgba(0,0,0,0.04), 0 4px 12px -2px rgba(0,0,0,0.04)`	卡片悬停
`shadow-lg`	`0 4px 8px rgba(0,0,0,0.06), 0 8px 24px -4px rgba(0,0,0,0.08)`	弹窗、下拉

暗色主题变体将 rgba 的 alpha 值减半。

7. 组件规范

7.1 卡片 Card

背景：--bg-container
边框：1px solid --border
圆角：8px
内边距：24px
悬停：边框色变为 --color-primary，添加 shadow-md
过渡：all 0.2s ease

7.2 标签 Badge

内边距：2px 10px
圆角：12px（胶囊形）
字号：12px
字重：600
背景：对应功能色的 10% 不透明度
边框：1px solid 对应功能色的 25% 不透明度

7.3 表格 Table

表头背景：--bg-elevated
表头字重：600
单元格背景：--bg-container
单元格内边距：10px 14px
边框：1px solid --border
表头 sticky top: 0
行悬停：背景色变为 --color-primary-bg

7.4 代码 Code

背景：--bg-elevated
内边距：2px 8px
圆角：4px
字号：13px
字体：monospace
颜色：--color-success（暗色主题）/ --color-primary（亮色主题）

7.5 代码块 CodeBlock

背景：--bg-elevated
边框：1px solid --border
圆角：8px
内边距：16px
行高：1.7

8. 主题

全部页面（索引页 + 报告页）统一使用亮色主题。

主题切换通过 CSS 自定义属性实现，所有颜色 Token 同时定义亮色和暗色两套值。

9. 动画与过渡

元素	过渡
卡片悬停	`all 0.2s ease`
链接颜色	`color 0.15s ease`
侧栏导航激活态	`all 0.15s ease`
滚动指示器	`all 0.15s ease`

10. 响应式断点

断点	值	说明
sm	576px	手机横屏
md	768px	平板竖屏
lg	992px	平板横屏
xl	1200px	桌面

≤768px：隐藏侧栏，全宽内容
≤992px：缩小侧栏至 220px，减小内边距
>992px：完整布局

5.6 KiB Raw Blame History