# Story 5.3: 样式迁移合规性修复

## Status
Ready for Review

## Story
**As a** 产品经理
**I want** 确保所有迁移页面严格遵守样式迁移规范
**so that** 保持用户体验一致性和设计系统完整性

## Acceptance Criteria
1. 更新Tailwind配置，添加迁移指导规范中定义的设计系统
2. 修复首页样式，使用正确的设计系统类名
3. 实现包车主题，为不同出行方式提供不同的视觉主题
4. 验证活动选择页面和班次列表页面的样式合规性
5. 确保所有样式转换符合精确迁移要求

## Tasks / Subtasks
- [x] 更新Tailwind配置添加设计系统
  - [x] 扩展颜色系统（主色调、包车主题、功能色、中性色）
  - [x] 添加自定义圆角值（card: 20rpx, button: 50rpx, small: 12rpx, medium: 16rpx）
  - [x] 添加阴影系统（light, medium, heavy, primary, charter）
  - [x] 添加间距系统（card: 32rpx, section: 24rpx, button: 24rpx）
- [x] 修复首页样式合规性
  - [x] 更新轮播图样式使用设计系统类名
  - [x] 修复出行方式选择器样式（使用rounded-button而非rounded-full）
  - [x] 更新出行选择区域样式（使用正确的圆角和阴影）
  - [x] 实现包车主题样式（charter-color: #d4af37, charter-gradient等）
  - [x] 修复查询按钮样式（使用primary渐变和shadow-primary）
- [x] 验证活动选择页面样式
  - [x] 检查头部信息区域样式（使用primary渐变）
  - [x] 验证行程区域样式（去程使用primary渐变，返程使用charter主题）
  - [x] 确保活动卡片样式符合设计系统
- [x] 验证班次列表页面样式
  - [x] 检查包车卡片样式（使用charter-dark渐变和charter边框）
  - [x] 验证预订按钮样式（使用primary渐变和shadow-primary）
  - [x] 确保排序和筛选工具栏样式合规
- [x] 编写样式合规性测试
  - [x] 添加样式类名验证测试
  - [x] 创建包车主题切换测试
  - [x] 验证设计系统颜色一致性

## Dev Notes

### 设计系统要求
根据 [docs/architecture/mini-demo-migration-guide.md](docs/architecture/mini-demo-migration-guide.md)，必须实现以下设计系统：

**颜色系统：**
```css
--primary-color: #4A90C2
--primary-gradient: linear-gradient(135deg, #4A90C2 0%, #357ABD 100%)
--secondary-color: #5B9BD5
--charter-color: #d4af37
--charter-gradient: linear-gradient(135deg, #d4af37 0%, #f4d03f 100%)
--charter-bg: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%)
```

**圆角系统：**
- card: 20rpx
- button: 50rpx
- small: 12rpx
- medium: 16rpx

**阴影系统：**
- light: 0 2rpx 12rpx rgba(0, 0, 0, 0.08)
- medium: 0 4rpx 20rpx rgba(0, 0, 0, 0.12)
- heavy: 0 8rpx 32rpx rgba(0, 0, 0, 0.16)
- primary: 0 8rpx 24rpx rgba(74, 144, 194, 0.4)
- charter: 0 8rpx 24rpx rgba(212, 175, 55, 0.4)

### 当前问题分析
**Tailwind配置缺失：**
- 当前 `mini/tailwind.config.js` 只有基础配置，没有扩展设计系统
- 缺少自定义颜色、圆角、阴影等定义

**首页样式问题：**
- 使用 `blue-500` 而不是 `primary` 颜色
- 使用 `rounded-full` 而不是 `rounded-button`
- 使用 `shadow-lg` 而不是设计系统定义的阴影
- 包车主题样式缺失

### 技术实现要求

**Tailwind配置扩展：**
```javascript
// mini/tailwind.config.js
theme: {
  extend: {
    colors: {
      'primary': '#4A90C2',
      'primary-dark': '#357ABD',
      'secondary': '#5B9BD5',
      'charter': '#d4af37',
      'charter-light': '#f4d03f',
      'charter-dark': '#1a1a1a',
      'charter-bg': '#2d2d2d',
      // ... 其他颜色
    },
    borderRadius: {
      'card': '20rpx',
      'button': '50rpx',
      'small': '12rpx',
      'medium': '16rpx',
    },
    boxShadow: {
      'light': '0 2rpx 12rpx rgba(0, 0, 0, 0.08)',
      'medium': '0 4rpx 20rpx rgba(0, 0, 0, 0.12)',
      'heavy': '0 8rpx 32rpx rgba(0, 0, 0, 0.16)',
      'primary': '0 8rpx 24rpx rgba(74, 144, 194, 0.4)',
      'charter': '0 8rpx 24rpx rgba(212, 175, 55, 0.4)',
    }
  }
}
```

**样式迁移示例：**
```tsx
// 错误：使用通用类名
<View className="bg-blue-500 rounded-full shadow-lg">

// 正确：使用设计系统类名
<View className="bg-primary rounded-button shadow-primary">
```

### 包车主题实现
**出行方式选择器：**
- 大巴拼车：使用 primary 主题
- 商务车：使用 secondary 主题
- 包车：使用 charter 主题（金色渐变 + 深色背景）

### 测试要求
- **样式类名验证**：确保所有页面使用正确的设计系统类名
- **包车主题测试**：验证包车出行方式的特殊样式
- **响应式测试**：确保样式在不同设备上表现一致
- **视觉一致性**：与mini-demo原设计保持100%视觉一致性

### 文件位置
- **Tailwind配置**: `mini/tailwind.config.js`
- **首页**: `mini/src/pages/home/index.tsx`
- **活动选择页面**: `mini/src/pages/select-activity/ActivitySelectPage.tsx`
- **班次列表页面**: `mini/src/pages/schedule-list/ScheduleListPage.tsx`
- **样式测试**: `mini/tests/pages/style-compliance.test.tsx`

## Dev Agent Record

### Agent Model Used
Claude Sonnet 4.5

### Debug Log References
- 更新Tailwind配置添加设计系统
- 修复首页样式合规性
- 验证活动选择页面样式
- 验证班次列表页面样式
- 编写样式合规性测试

### Completion Notes List
- ✅ Tailwind配置已扩展，包含完整的设计系统（颜色、圆角、阴影、间距）
- ✅ 首页样式已完全合规，使用设计系统类名替换通用类名
- ✅ 活动选择页面样式已修复，去程使用primary主题，返程使用charter主题
- ✅ 班次列表页面样式已更新，包车卡片使用特殊样式，预订按钮使用设计系统
- ✅ 样式合规性测试已创建，验证设计系统类名和包车主题

### File List
- **修改文件**: `mini/tailwind.config.js` - 扩展设计系统配置
- **修改文件**: `mini/src/pages/home/index.tsx` - 修复首页样式合规性
- **修改文件**: `mini/src/pages/select-activity/ActivitySelectPage.tsx` - 验证活动选择页面样式
- **修改文件**: `mini/src/pages/schedule-list/ScheduleListPage.tsx` - 验证班次列表页面样式
- **新增文件**: `mini/tests/pages/style-compliance.test.tsx` - 编写样式合规性测试

### Change Log
| Date | Version | Description | Author |
|------|---------|-------------|--------|
| 2025-10-19 | 1.0 | 初始故事创建，处理样式迁移合规性问题 | Bob (Scrum Master) |
| 2025-10-20 | 1.1 | 完成样式迁移合规性修复实现 | James (Developer) |

## QA Results
*此部分由QA代理在审查完成后填写*