zdh
a2eea31c9b
- index.html: section.items空值检查(5处)、移除dead badgeStyle - 物流网报告×3 + AI转型方案×3: 添加background-clip:text兼容Firefox - ai-dev-workflow/v2: 移动端汉堡导航+抽屉覆盖层+返回顶部 - crmeb-deploy-plan: Markdown→HTML+新增NPM私服(Verdaccio)章节 - 需求对比分析报告: 谷歌蓝→品牌蓝, CSS变量化 - ai-dev-workflow-v2: npm私服统一指向npm.ycbat.com(上游阿里云镜像) - CLAUDE.md/design-tokens.md: 修正UI规范与目录文档
213 lines
5.8 KiB
Markdown
213 lines
5.8 KiB
Markdown
# 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 | 标签、注释、日期 |
|
||
|
||
### 字体族
|
||
|
||
```css
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
|
||
'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
|
||
'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||
```
|
||
|
||
代码字体：
|
||
|
||
```css
|
||
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. 主题
|
||
|
||
- **索引页（`index.html`）**：支持亮色/暗色双主题，通过 `data-theme` 属性 + localStorage 键 `wiki-theme` 持久化，同时跟随 `prefers-color-scheme: dark` 系统偏好
|
||
- **报告页（`{主题}/报告/*.html`）**：统一使用**亮色主题**，不定义暗色 CSS 变量
|
||
|
||
亮色/暗色两套颜色 Token 值在 §1 中已定义，索引页 `:root` 和 `[data-theme="dark"]` 选择器分别引用。
|
||
|
||
---
|
||
|
||
## 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`：完整布局
|