# 🎨 法律助手应用 - 样式指南

## 设计系统概览

### 颜色系统

#### 主色调
```scss
--primary-color: #007AFF;        // iOS蓝
--primary-light: #4DA3FF;        // 浅蓝
--primary-dark: #0051D5;         // 深蓝
--primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
```

#### 功能色
```scss
--success-color: #34C759;        // 成功/绿色
--warning-color: #FF9500;        // 警告/橙色
--error-color: #FF3B30;          // 错误/红色
--info-color: #5AC8FA;           // 信息/天蓝
```

#### 文本色
```scss
--text-primary: #1C1C1E;         // 主要文本
--text-secondary: #8E8E93;       // 次要文本
--text-tertiary: #C7C7CC;        // 三级文本
--text-white: #FFFFFF;           // 白色文本
```

### 间距系统
```scss
--spacing-xs: 4px;
--spacing-sm: 8px;
--spacing-md: 12px;
--spacing-lg: 16px;
--spacing-xl: 20px;
--spacing-2xl: 24px;
--spacing-3xl: 32px;
```

### 圆角系统
```scss
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 20px;
--radius-full: 50%;
```

### 阴影系统
```scss
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
--shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.16);
```

---

## 组件设计规范

### 1. 卡片组件
```scss
.card {
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
  
  &:hover {
    box-shadow: var(--shadow-md);
  }
  
  &:active {
    transform: scale(0.98);
  }
}
```

### 2. 按钮组件
```scss
.btn-primary {
  background: var(--primary-color);
  color: var(--text-white);
  padding: var(--spacing-md) var(--spacing-xl);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  
  &:hover {
    background: var(--primary-dark);
  }
  
  &:active {
    transform: scale(0.96);
  }
}
```

### 3. 输入框组件
```scss
.input {
  width: 100%;
  padding: var(--spacing-md);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  
  &:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
  }
}
```

---

## 动画规范

### 1. 淡入动画
```scss
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.3s ease;
}
```

### 2. 滑入动画
```scss
@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

.slide-up {
  animation: slideUp 0.3s ease;
}
```

### 3. 缩放动画
```scss
@keyframes scaleIn {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.scale-in {
  animation: scaleIn 0.2s ease;
}
```

---

## 响应式布局

### 断点
```scss
// 移动设备
@media (max-width: 768px) {
  // 移动端样式
}

// 平板设备
@media (min-width: 769px) and (max-width: 1024px) {
  // 平板样式
}

// 桌面设备
@media (min-width: 1025px) {
  // 桌面样式
}
```

### Flexbox布局模式
```html
<!-- 居中对齐 -->
<div class="flex items-center justify-center">

<!-- 两端对齐 -->
<div class="flex items-center justify-between">

<!-- 列布局 -->
<div class="flex flex-col gap-md">

<!-- 网格布局 -->
<div class="grid grid-cols-3 gap-lg">
```

---

## 常用工具类

### 文本工具类
```scss
.text-primary    // 主要文本色
.text-secondary  // 次要文本色
.text-center     // 居中对齐
.text-left       // 左对齐
.text-right      // 右对齐
.truncate        // 单行截断
.line-clamp-2    // 两行截断
.line-clamp-3    // 三行截断
```

### 间距工具类
```scss
.p-sm, .p-md, .p-lg, .p-xl    // 内边距
.m-sm, .m-md, .m-lg           // 外边距
.px-md, .py-md                // 水平/垂直内边距
.gap-sm, .gap-md, .gap-lg     // 间隙
```

### 样式工具类
```scss
.rounded-sm, .rounded-md, .rounded-lg    // 圆角
.shadow-sm, .shadow-md, .shadow-lg       // 阴影
.bg-primary, .bg-secondary, .bg-white    // 背景色
```

---

## 页面结构规范

### 标准页面结构
```html
<div class="page-container">
  <!-- 顶部导航 -->
  <div class="page-header">
    <h2>页面标题</h2>
  </div>
  
  <!-- 主要内容 -->
  <div class="page-content">
    <!-- 内容区域 -->
  </div>
  
  <!-- 底部操作 -->
  <div class="page-footer">
    <!-- 按钮等 -->
  </div>
</div>
```

---

## 最佳实践

### 1. 使用CSS变量
✅ 推荐：`color: var(--primary-color);`
❌ 避免：`color: #007AFF;`

### 2. 使用工具类
✅ 推荐：`<div class="flex items-center gap-md">`
❌ 避免：内联样式 `style="display: flex;"`

### 3. 保持一致性
- 统一使用 `var(--spacing-*)` 作为间距
- 统一使用 `var(--radius-*)` 作为圆角
- 统一使用 `var(--shadow-*)` 作为阴影

### 4. 过渡动画
- 快速交互：`var(--transition-fast)` (0.2s)
- 标准交互：`var(--transition-base)` (0.3s)
- 慢速交互：`var(--transition-slow)` (0.5s)

---

## 无障碍设计

### 1. 对比度
- 主要文本与背景对比度 ≥ 4.5:1
- 大文本与背景对比度 ≥ 3:1

### 2. 交互反馈
- 所有可点击元素应有 `:hover` 和 `:active` 状态
- 表单元素应有 `:focus` 状态

### 3. 字体大小
- 最小字体：13px (--font-sm)
- 正文字体：15px (--font-md)
- 标题字体：17px+ (--font-lg及以上)

---

## 性能优化

### 1. 使用硬件加速
```scss
.card {
  transform: translateZ(0);
  will-change: transform;
}
```

### 2. 避免重绘
```scss
// 使用 transform 代替 top/left
.modal {
  transform: translate(-50%, -50%);
}
```

### 3. 延迟加载
```html
<!-- 图片懒加载 -->
<img loading="lazy" src="...">
```

---

## 主题扩展

### 深色模式（可选）
```scss
@media (prefers-color-scheme: dark) {
  :root {
    --text-primary: #FFFFFF;
    --text-secondary: #EBEBF5;
    --bg-primary: #000000;
    --bg-secondary: #1C1C1E;
  }
}
```

---

*本指南基于iOS设计规范和Material Design原则*
*最后更新：2024年*