# {{system.name}} - 设计系统文档

**系统ID**: {{system.id}}
**版本**: {{system.version}}
**生成时间**: {{generation.timestamp}}
**DesignFast版本**: {{version}}

---

## 系统概述

**系统名称**: {{system.name}}
**描述**: {{system.description}}
**关联项目**: {{#if system.projectId}}{{system.projectId}}{{else}}独立系统{{/if}}
**创建时间**: {{system.createdAt}}
**最后更新**: {{system.updatedAt}}

---

## 设计令牌 (Design Tokens)

### 颜色系统 (Color System)

#### 基础颜色 (Base Colors)
```css
/* 主要颜色 */
--color-primary: {{system.tokens.colors.primary}};
--color-secondary: {{system.tokens.colors.secondary}};
--color-accent: {{system.tokens.colors.accent}};

/* 中性颜色 */
--color-neutral: {{system.tokens.colors.neutral}};
--color-background: {{system.tokens.colors.background}};
--color-surface: {{system.tokens.colors.surface}};

/* 文本颜色 */
--color-text: {{system.tokens.colors.text}};
--color-text-secondary: {{system.tokens.colors.textSecondary}};
```

#### 颜色使用指南
- **Primary**: 主要操作按钮、链接、重点元素
- **Secondary**: 次要操作、辅助按钮
- **Accent**: 强调元素、高亮状态
- **Neutral**: 边框、分割线、中性元素
- **Background/Surface**: 页面背景、卡片背景
- **Text**: 主要文本、次要文本

### 排版系统 (Typography System)

#### 字体设置
```css
--font-family: {{system.tokens.typography.fontFamily}};
```

#### 字体大小 (Font Sizes)
```css
--font-size-xs: {{system.tokens.typography.fontSize.xs}};
--font-size-sm: {{system.tokens.typography.fontSize.sm}};
--font-size-base: {{system.tokens.typography.fontSize.base}};
--font-size-lg: {{system.tokens.typography.fontSize.lg}};
--font-size-xl: {{system.tokens.typography.fontSize.xl}};
--font-size-2xl: {{system.tokens.typography.fontSize.[2xl]}};
--font-size-3xl: {{system.tokens.typography.fontSize.[3xl]}};
--font-size-4xl: {{system.tokens.typography.fontSize.[4xl]}};
```

#### 字体权重 (Font Weight)
```css
--font-weight-normal: {{system.tokens.typography.fontWeight.normal}};
--font-weight-medium: {{system.tokens.typography.fontWeight.medium}};
--font-weight-semibold: {{system.tokens.typography.fontWeight.semibold}};
--font-weight-bold: {{system.tokens.typography.fontWeight.bold}};
```

#### 行高 (Line Height)
```css
--line-height-tight: {{system.tokens.typography.lineHeight.tight}};
--line-height-normal: {{system.tokens.typography.lineHeight.normal}};
--line-height-relaxed: {{system.tokens.typography.lineHeight.relaxed}};
```

### 间距系统 (Spacing System)

#### 间距比例 (Spacing Scale)
```css
--spacing-0: {{system.tokens.spacing.[0]}};
--spacing-1: {{system.tokens.spacing.[1]}};
--spacing-2: {{system.tokens.spacing.[2]}};
--spacing-3: {{system.tokens.spacing.[3]}};
--spacing-4: {{system.tokens.spacing.[4]}};
--spacing-5: {{system.tokens.spacing.[5]}};
--spacing-6: {{system.tokens.spacing.[6]}};
--spacing-8: {{system.tokens.spacing.[8]}};
--spacing-10: {{system.tokens.spacing.[10]}};
--spacing-12: {{system.tokens.spacing.[12]}};
--spacing-16: {{system.tokens.spacing.[16]}};
--spacing-20: {{system.tokens.spacing.[20]}};
--spacing-24: {{system.tokens.spacing.[24]}};
--spacing-32: {{system.tokens.spacing.[32]}};
```

### 响应式断点 (Responsive Breakpoints)

```css
--breakpoint-sm: {{system.tokens.breakpoints.sm}};
--breakpoint-md: {{system.tokens.breakpoints.md}};
--breakpoint-lg: {{system.tokens.breakpoints.lg}};
--breakpoint-xl: {{system.tokens.breakpoints.xl}};
--breakpoint-2xl: {{system.tokens.breakpoints.[2xl]}};
```

#### 断点使用指南
- **sm (640px)**: 小屏幕设备
- **md (768px)**: 平板设备
- **lg (1024px)**: 小型桌面
- **xl (1280px)**: 大型桌面
- **2xl (1536px)**: 超大屏幕

### 圆角系统 (Border Radius)

```css
--border-radius-none: {{system.tokens.borderRadius.none}};
--border-radius-sm: {{system.tokens.borderRadius.sm}};
--border-radius-md: {{system.tokens.borderRadius.md}};
--border-radius-lg: {{system.tokens.borderRadius.lg}};
--border-radius-xl: {{system.tokens.borderRadius.xl}};
--border-radius-2xl: {{system.tokens.borderRadius.2xl}};
--border-radius-3xl: {{system.tokens.borderRadius.3xl}};
--border-radius-full: {{system.tokens.borderRadius.full}};
```

### 阴影系统 (Shadow System)

```css
--shadow-sm: {{system.tokens.shadows.sm}};
--shadow-md: {{system.tokens.shadows.md}};
--shadow-lg: {{system.tokens.shadows.lg}};
--shadow-xl: {{system.tokens.shadows.xl}};
--shadow-2xl: {{system.tokens.shadows.2xl}};
```

---

## 组件规范 (Component Specifications)

### 按钮组件 (Button Component)

#### 变体 (Variants)
{{#each system.components.button.variants}}
- **{{this}}**: {{lookup ../buttonDescriptions this}}{{/each}}

#### 尺寸 (Sizes)
{{#each system.components.button.sizes}}
- **{{this}}**: {{lookup ../buttonSizeDescriptions this}}{{/each}}

#### 使用示例
```html
<!-- 主要按钮 -->
<button class="btn btn-primary btn-md">主要操作</button>

<!-- 次要按钮 -->
<button class="btn btn-secondary btn-sm">次要操作</button>

<!-- 轮廓按钮 -->
<button class="btn btn-outline btn-lg">轮廓样式</button>
```

### 输入框组件 (Input Component)

#### 变体 (Variants)
{{#each system.components.input.variants}}
- **{{this}}**: {{lookup ../inputDescriptions this}}{{/each}}

#### 尺寸 (Sizes)
{{#each system.components.input.sizes}}
- **{{this}}**: {{lookup ../inputSizeDescriptions this}}{{/each}}

#### 使用示例
```html
<!-- 默认输入框 -->
<input type="text" class="input input-default input-md" placeholder="输入内容">

<!-- 错误状态 -->
<input type="email" class="input input-error input-sm" placeholder="邮箱地址">
```

---

## 实现指南 (Implementation Guide)

### CSS 变量使用

将上述令牌转换为CSS变量：

```css
:root {
  /* 颜色 */
  --color-primary: {{system.tokens.colors.primary}};
  --color-secondary: {{system.tokens.colors.secondary}};

  /* 字体 */
  --font-family: {{system.tokens.typography.fontFamily}};

  /* 间距 */
  --spacing-4: {{system.tokens.spacing.[4]}};

  /* 断点 */
  --breakpoint-md: {{system.tokens.breakpoints.md}};
}
```

### Tailwind CSS 配置

```javascript
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: 'var(--color-primary)',
        secondary: 'var(--color-secondary)',
        // ... 其他颜色
      },
      fontFamily: {
        sans: ['var(--font-family)', 'system-ui', 'sans-serif'],
      },
      spacing: {
        '18': '4.5rem', // 根据spacing scale扩展
      },
      screens: {
        'xs': '475px',
        '3xl': '1600px',
      },
    },
  },
}
```

### 组件类名约定

```css
/* 按钮组件 */
.btn {
  @apply font-medium transition-colors duration-200 rounded-md;
}

.btn-primary {
  @apply bg-primary text-white hover:bg-primary-dark;
}

.btn-secondary {
  @apply bg-secondary text-white hover:bg-secondary-dark;
}

/* 输入框组件 */
.input {
  @apply border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2;
}

.input-error {
  @apply border-red-500 focus:ring-red-500;
}
```

---

## 维护指南 (Maintenance Guide)

### 版本控制

- 使用语义化版本 (Semantic Versioning)
- 主版本 (Major): 不兼容的API变更
- 次版本 (Minor): 向后兼容的功能增加
- 补丁版本 (Patch): 向后兼容的bug修复

### 更新流程

1. **评估影响**: 检查变更对现有项目的影響
2. **创建新版本**: 增加相应版本号
3. **文档更新**: 更新此文档和使用指南
4. **测试验证**: 在测试项目中验证变更
5. **发布通知**: 通知相关团队成员

### 扩展系统

#### 添加新颜色
```json
{
  "colors": {
    "success": "#10B981",
    "warning": "#F59E0B",
    "error": "#EF4444"
  }
}
```

#### 添加新组件
```json
{
  "components": {
    "card": {
      "variants": ["default", "elevated", "outlined"],
      "baseStyles": {
        "padding": "1rem",
        "borderRadius": "0.5rem"
      }
    }
  }
}
```

---

## 导出和共享 (Export & Sharing)

### 导出格式

设计系统可以导出为以下格式：
- **JSON**: 完整数据结构，用于导入到其他项目
- **CSS**: 纯CSS变量文件，用于直接使用
- **SCSS**: Sass变量文件，用于构建工具集成

### 团队共享

1. **版本控制**: 将设计系统文件提交到Git仓库
2. **文档发布**: 将此文档发布到内部Wiki或文档站点
3. **NPM包**: 可选择发布为私有NPM包供团队使用
4. **设计工具**: 导入到Figma、Sketch等设计工具

---

*此文档由DesignFast自动生成。系统ID: {{system.id}} | 生成时间: {{generation.timestamp}}*