# CrossBorder OMS 设计系统

## 设计理念
**专业、高效、数据驱动** - 为跨境电商订单管理系统打造的现代化界面设计

---

## 配色方案

### 主色调 (Primary)
用于主要操作、导航、重要链接

| 变量 | 值 | 用途 |
|------|-----|------|
| `--cb-primary` | `#0284C7` | 主色（天空蓝） |
| `--cb-primary-hover` | `#0369A1` | 悬停状态 |
| `--cb-primary-soft` | `#E0F2FE` | 浅色背景 |
| `--cb-primary-strong` | `#0C4A6E` | 深色强调 |

### 辅助色 (Accent)
用于次要操作、装饰元素、数据高亮

| 变量 | 值 | 用途 |
|------|-----|------|
| `--cb-accent` | `#F59E0B` | 强调色（琥珀金） |
| `--cb-accent-soft` | `#FEF3C7` | 浅色背景 |
| `--cb-accent-hover` | `#D97706` | 悬停状态 |

### 功能色
用于状态指示、反馈信息

| 变量 | 值 | 用途 |
|------|-----|------|
| `--cb-success` | `#059669` | 成功、完成 |
| `--cb-success-soft` | `#D1FAE5` | 成功背景 |
| `--cb-danger` | `#DC2626` | 错误、危险 |
| `--cb-danger-soft` | `#FEE2E2` | 错误背景 |
| `--cb-warning` | `#D97706` | 警告 |
| `--cb-warning-soft` | `#FEF3C7` | 警告背景 |
| `--cb-info` | `#0284C7` | 信息 |
| `--cb-info-soft` | `#E0F2FE` | 信息背景 |

### 中性色
用于背景、边框、文字

| 变量 | 值 | 用途 |
|------|-----|------|
| `--cb-bg` | `#F8FAFC` | 页面背景 |
| `--cb-bg-soft` | `#F1F5F9` | 次级背景 |
| `--cb-panel` | `#FFFFFF` | 卡片/面板背景 |
| `--cb-border` | `#E2E8F0` | 边框 |
| `--cb-text` | `#0F172A` | 主文本（对比度 16.4:1）|
| `--cb-text-soft` | `#475569` | 次级文本（对比度 7.2:1）|
| `--cb-text-muted` | `#94A3B8` | 辅助文本（对比度 3.9:1）|

### 阴影系统

| 变量 | 值 | 用途 |
|------|-----|------|
| `--cb-shadow` | `0 1px 2px rgba(0,0,0,0.05)` | 轻微阴影 |
| `--cb-shadow-sm` | `0 1px 3px rgba(0,0,0,0.08)` | 小阴影 |
| `--cb-shadow-md` | `0 4px 8px rgba(0,0,0,0.08)` | 中等阴影 |
| `--cb-shadow-lg` | `0 8px 16px rgba(0,0,0,0.10)` | 大阴影 |
| `--cb-shadow-glow` | `0 0 0 3px rgba(2,132,199,0.15)` | 发光效果 |

---

## 字体系统

### 字体族
```
--cb-font-family: "Inter", "SF Pro Display", "HarmonyOS Sans SC", "PingFang SC", sans-serif
--cb-font-mono: "JetBrains Mono", "Fira Code", "Consolas", monospace
```

### 字体大小

| 级别 | 大小 | 字重 | 用途 |
|------|------|------|------|
| XS | 11px | 500 | 标签、徽章 |
| SM | 12px | 500 | 辅助信息 |
| Base | 13px | 400 | 正文、表格 |
| MD | 14px | 500 | 次级标题 |
| LG | 16px | 600 | 卡片标题 |
| XL | 18px | 600 | 页面标题 |
| 2XL | 24px | 700 | 主标题 |
| 3XL | 32px | 700 | 特大标题 |

### 行高
- 正文：1.6
- 标题：1.3
- 紧凑：1.4

---

## 间距系统

使用 4px 基础单位的倍数：

| 名称 | 值 | 用途 |
|------|-----|------|
| --cb-space-1 | 4px | 最小间距 |
| --cb-space-2 | 8px | 小间距 |
| --cb-space-3 | 12px | 默认间距 |
| --cb-space-4 | 16px | 中等间距 |
| --cb-space-5 | 20px | 大间距 |
| --cb-space-6 | 24px | 超大间距 |
| --cb-space-8 | 32px | 章节间距 |

---

## 组件规范

### 按钮
- 高度：36px（默认）、32px（小）、40px（大）
- 圆角：6px
- 内边距：0 16px
- 过渡：150ms ease-out

### 输入框
- 高度：36px
- 圆角：6px
- 边框：1px solid var(--cb-border)
- 聚焦边框：2px solid var(--cb-primary)

### 卡片
- 圆角：8px
- 内边距：20px
- 边框：1px solid var(--cb-border)
- 阴影：var(--cb-shadow-sm)

### 表格
- 行高：44px
- 边框：1px solid var(--cb-border)
- 斑马纹：var(--cb-bg-soft)
- 悬停：var(--cb-primary-soft)

### 导航菜单
- 项高度：40px（一级）、38px（二级）
- 内边距：0 12px
- 圆角：6px
- 悬停背景：var(--cb-primary-soft)

---

## 动画规范

### 缓动函数
```css
--cb-ease-out: cubic-bezier(0.33, 1, 0.68, 1)
--cb-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1)
```

### 持续时间
- 微交互：150ms
- 标准过渡：200ms
- 复杂动画：300ms
- 页面切换：400ms

---

## 响应式断点

| 断点 | 宽度 | 设备 |
|------|------|------|
| SM | 640px | 手机横屏 |
| MD | 768px | 平板 |
| LG | 1024px | 小笔记本 |
| XL | 1280px | 桌面 |
| 2XL | 1536px | 大屏 |

---

## 最佳实践

### 1. 可访问性
- 所有交互元素必须有 `:hover` 和 `:focus` 状态
- 颜色对比度至少 4.5:1
- 使用语义化 HTML
- 为图标按钮提供 aria-label

### 2. 性能
- 使用 `transform` 和 `opacity` 做动画
- 避免频繁的 DOM 操作
- 图片使用懒加载
- 大列表使用虚拟滚动

### 3. 一致性
- 相同功能使用相同颜色
- 保持统一的间距和圆角
- 使用固定的 z-index 层级
- 保持动画效果一致

---

## 暗色模式支持

预留暗色模式变量，使用 `prefers-color-scheme` 检测：

```css
@media (prefers-color-scheme: dark) {
  --cb-bg: #0F172A;
  --cb-panel: #1E293B;
  --cb-text: #F1F5F9;
  /* ... 更多变量 */
}
```