|
|
@@ -0,0 +1,129 @@
|
|
|
+# 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*
|
yourname