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

Status

Ready for Review

Story

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

Acceptance Criteria

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

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，必须实现以下设计系统：

颜色系统：

--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配置扩展：

// 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)',
    }
  }
}

样式迁移示例：

// 错误：使用通用类名
<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代理在审查完成后填写

005.003.story.md 6.5 KB История Исходник