|
|
@@ -0,0 +1,150 @@
|
|
|
+# Story 5.3: 样式迁移合规性修复
|
|
|
+
|
|
|
+## Status
|
|
|
+Ready for Development
|
|
|
+
|
|
|
+## Story
|
|
|
+**As a** 产品经理
|
|
|
+**I want** 确保所有迁移页面严格遵守样式迁移规范
|
|
|
+**so that** 保持用户体验一致性和设计系统完整性
|
|
|
+
|
|
|
+## Acceptance Criteria
|
|
|
+1. 更新Tailwind配置，添加迁移指导规范中定义的设计系统
|
|
|
+2. 修复首页样式，使用正确的设计系统类名
|
|
|
+3. 实现包车主题，为不同出行方式提供不同的视觉主题
|
|
|
+4. 验证活动选择页面和班次列表页面的样式合规性
|
|
|
+5. 确保所有样式转换符合精确迁移要求
|
|
|
+
|
|
|
+## Tasks / Subtasks
|
|
|
+- [ ] 更新Tailwind配置添加设计系统
|
|
|
+ - [ ] 扩展颜色系统（主色调、包车主题、功能色、中性色）
|
|
|
+ - [ ] 添加自定义圆角值（card: 20rpx, button: 50rpx, small: 12rpx, medium: 16rpx）
|
|
|
+ - [ ] 添加阴影系统（light, medium, heavy, primary, charter）
|
|
|
+ - [ ] 添加间距系统（card: 32rpx, section: 24rpx, button: 24rpx）
|
|
|
+- [ ] 修复首页样式合规性
|
|
|
+ - [ ] 更新轮播图样式使用设计系统类名
|
|
|
+ - [ ] 修复出行方式选择器样式（使用rounded-button而非rounded-full）
|
|
|
+ - [ ] 更新出行选择区域样式（使用正确的圆角和阴影）
|
|
|
+ - [ ] 实现包车主题样式（charter-color: #d4af37, charter-gradient等）
|
|
|
+ - [ ] 修复查询按钮样式（使用primary渐变和shadow-primary）
|
|
|
+- [ ] 验证活动选择页面样式
|
|
|
+ - [ ] 检查头部信息区域样式（使用primary渐变）
|
|
|
+ - [ ] 验证行程区域样式（去程使用primary渐变，返程使用charter主题）
|
|
|
+ - [ ] 确保活动卡片样式符合设计系统
|
|
|
+- [ ] 验证班次列表页面样式
|
|
|
+ - [ ] 检查包车卡片样式（使用charter-dark渐变和charter边框）
|
|
|
+ - [ ] 验证预订按钮样式（使用primary渐变和shadow-primary）
|
|
|
+ - [ ] 确保排序和筛选工具栏样式合规
|
|
|
+- [ ] 编写样式合规性测试
|
|
|
+ - [ ] 添加样式类名验证测试
|
|
|
+ - [ ] 创建包车主题切换测试
|
|
|
+ - [ ] 验证设计系统颜色一致性
|
|
|
+
|
|
|
+## 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`
|
|
|
+
|
|
|
+## Change Log
|
|
|
+| Date | Version | Description | Author |
|
|
|
+|------|---------|-------------|--------|
|
|
|
+| 2025-10-19 | 1.0 | 初始故事创建，处理样式迁移合规性问题 | Bob (Scrum Master) |
|
|
|
+
|
|
|
+## QA Results
|
|
|
+*此部分由QA代理在审查完成后填写*
|
yourname