mini-starter/docs/stories/001.001.theme-variables-color-system-integration.md

Story 001.001: 主题变量和颜色系统集成

Status

Draft

Story

As a 前端开发者 I want 将tcb-shop-demo的主题变量和完整的颜色系统集成到当前小程序项目中 so that 我可以使用统一的颜色系统和主题变量来构建一致的UI界面

Acceptance Criteria

1. 主题变量系统完整集成，包括主要主题色和TDesign组件主题变量
2. 颜色系统完整集成，包括语义化颜色类和层级颜色类
3. 现有Tailwind CSS样式系统保持兼容，无样式冲突
4. 所有tcb-shop-demo的颜色类名在当前项目中可用
5. 现有功能通过测试验证，无回归问题

Tasks / Subtasks

• 分析tcb-shop-demo主题变量系统 (AC: 1)
  • 提取主要主题色变量
  • 提取TDesign组件主题变量
  • 分析按钮样式定义
• 分析tcb-shop-demo颜色系统 (AC: 2)
  • 提取语义化颜色类（.text-primary, .text-success等）
  • 提取层级颜色类（.text-title, .text-normal, .text-small等）
  • 提取背景色类（.bg-primary, .bg-success等）
• 创建集成样式文件 (AC: 1, 2, 4)
  • 在mini/src/目录下创建tcb-theme.css文件
  • 将主题变量转换为CSS自定义属性
  • 创建颜色系统类名
  • 确保与现有Tailwind CSS兼容
• 集成到小程序项目 (AC: 3, 4)
  • 在mini/src/app.css中导入tcb-theme.css
  • 验证样式优先级和冲突处理
  • 测试现有页面样式无破坏
• 测试验证 (AC: 5)
  • 运行现有测试确保无回归
  • 创建颜色系统使用示例
  • 验证TDesign组件主题变量生效

Dev Notes

技术栈和项目结构

• 项目类型: 小程序项目 (Taro + React)
• 样式框架: Tailwind CSS 4.1.11 + 自定义CSS
• 项目位置: mini/ 目录
• 当前样式: 主要关注滚动条样式和基础布局
• 集成方式: 通过CSS文件集成，保持与Tailwind CSS兼容

tcb-shop-demo主题变量系统分析

主要主题色:

• 按钮主色: #fa4126
• 主要文字色: #fa550f

TDesign组件主题变量:

• 输入框: --td-input-placeholder-text-color: #bbbbbb, --td-input-text-color: #333333
• 标签栏: --td-tab-bar-color: #bbb, --td-tab-bar-active-color: #333
• 级联选择器: --td-cascader-active-color: #fa4126
• 开关: --td-switch-checked-color: #34c759
• 按钮: --td-button-default-bg-color: #fa4126, --td-button-default-border-color: #fa4126
• 复选框: --td-checkbox-icon-checked-color: #fa4126

tcb-shop-demo颜色系统分析

语义化颜色类:

• .text-primary - #fa550f (主要)
• .text-success - #5fb446 (成功)
• .text-warn - #ec8131 (警告)
• .text-danger - #de1c24 (危险)

层级颜色类:

• .text-title - #282828 (标题)
• .text-normal - #5d5d5d (正文)
• .text-small - #9b9b9b (辅助)
• .text-minor - #ececec (次要)
• .text-border - #eeeeee (边框)

背景色类:

• .bg-primary - #fa550f (主要背景)
• .bg-success - #5fb446 (成功背景)
• .bg-warn - #ec8131 (警告背景)
• .bg-danger - #de1c24 (危险背景)

文件位置和集成策略

• 新文件: mini/src/tcb-theme.css - 包含所有主题变量和颜色系统
• 导入位置: mini/src/app.css - 在现有样式后导入
• 兼容性: 使用CSS自定义属性和类名，避免与Tailwind CSS冲突
• 命名空间: 考虑使用tcb-前缀避免类名冲突

技术约束

• 保持现有滚动条样式功能完整
• 确保与Tailwind CSS的图标插件兼容
• 避免破坏现有页面布局
• 保持CSS文件大小合理

Testing

测试标准:

• 测试文件位置: 在现有测试结构中验证
• 测试框架: 使用现有Vitest测试框架
• 测试重点: 样式类可用性、无回归、兼容性
• 验证方法: 手动测试颜色类名和组件主题变量

具体测试要求:

• 验证所有颜色类名在当前项目中可用
• 验证TDesign组件主题变量生效
• 验证现有页面样式无破坏
• 验证Tailwind CSS功能正常

Change Log

Date	Version	Description	Author
2025-11-19	1.0	初始故事创建	Bob (Scrum Master)

Dev Agent Record

This section is populated by the development agent during implementation

Agent Model Used

To be filled by dev agent

Debug Log References

To be filled by dev agent

Completion Notes List

To be filled by dev agent

File List

To be filled by dev agent

QA Results

Results from QA Agent QA review of the completed story implementation