|
|
@@ -0,0 +1,111 @@
|
|
|
+# 史诗001：tcb-shop-demo主题样式集成 - 棕地增强
|
|
|
+
|
|
|
+## 史诗目标
|
|
|
+将tcb-shop-demo包中的主题、样式和设计规范分析并集成到当前小程序项目中，提升UI一致性和用户体验，同时保持现有系统的完整性。
|
|
|
+
|
|
|
+## 史诗描述
|
|
|
+
|
|
|
+### 现有系统上下文
|
|
|
+- **当前相关功能**：小程序使用Tailwind CSS和自定义样式，主要关注滚动条样式和基础布局
|
|
|
+- **技术栈**：小程序框架 + Tailwind CSS + 自定义CSS
|
|
|
+- **集成点**：样式文件、组件样式、主题变量
|
|
|
+
|
|
|
+### 增强详情
|
|
|
+- **添加/更改内容**：集成tcb-shop-demo的完整样式系统，包括主题变量、颜色系统、字体系统、布局工具类、图标字体和组件样式
|
|
|
+- **集成方式**：将tcb-shop-demo的样式文件迁移到当前项目，保持与现有Tailwind CSS的兼容性
|
|
|
+- **成功标准**：样式系统完整集成，现有功能不受影响，UI一致性提升
|
|
|
+
|
|
|
+## 故事
|
|
|
+
|
|
|
+1. **故事1：主题变量和颜色系统集成** - 迁移tcb-shop-demo的主题变量和完整的颜色系统
|
|
|
+2. **故事2：字体系统和布局工具类集成** - 集成字体大小、字重系统和Flex布局工具类
|
|
|
+3. **故事3：图标字体和组件样式集成** - 集成图标字体系统和常用组件样式
|
|
|
+
|
|
|
+## 兼容性要求
|
|
|
+
|
|
|
+- [ ] 现有API保持不变
|
|
|
+- [ ] 样式系统与现有Tailwind CSS兼容
|
|
|
+- [ ] UI更改遵循现有模式
|
|
|
+- [ ] 性能影响最小化
|
|
|
+
|
|
|
+## 风险缓解
|
|
|
+
|
|
|
+- **主要风险**：样式冲突导致现有UI破坏
|
|
|
+- **缓解措施**：分阶段集成，充分测试，保持现有样式优先级
|
|
|
+- **回滚计划**：备份现有样式文件，可快速恢复
|
|
|
+
|
|
|
+## 完成定义
|
|
|
+
|
|
|
+- [ ] 所有故事完成且验收标准满足
|
|
|
+- [ ] 现有功能通过测试验证
|
|
|
+- [ ] 集成点正常工作
|
|
|
+- [ ] 文档适当更新
|
|
|
+- [ ] 现有功能无回归
|
|
|
+
|
|
|
+## 验证清单
|
|
|
+
|
|
|
+### 范围验证
|
|
|
+- [ ] 史诗可在1-3个故事内完成
|
|
|
+- [ ] 无需架构文档
|
|
|
+- [ ] 增强遵循现有模式
|
|
|
+- [ ] 集成复杂度可控
|
|
|
+
|
|
|
+### 风险评估
|
|
|
+- [ ] 对现有系统风险低
|
|
|
+- [ ] 回滚计划可行
|
|
|
+- [ ] 测试方法覆盖现有功能
|
|
|
+- [ ] 团队对集成点有足够了解
|
|
|
+
|
|
|
+### 完整性检查
|
|
|
+- [ ] 史诗目标清晰可实现
|
|
|
+- [ ] 故事范围适当
|
|
|
+- [ ] 成功标准可衡量
|
|
|
+- [ ] 依赖项已识别
|
|
|
+
|
|
|
+## 技术发现总结
|
|
|
+
|
|
|
+### tcb-shop-demo样式系统分析
|
|
|
+
|
|
|
+#### 1. 主题变量系统
|
|
|
+- **主要主题色**：`#fa4126` (按钮主色), `#fa550f` (主要文字色)
|
|
|
+- **TDesign组件主题**：自定义了TDesign MiniProgram组件的主题变量
|
|
|
+- **按钮样式**：定义了完整的按钮状态和变体
|
|
|
+
|
|
|
+#### 2. 颜色系统
|
|
|
+- **语义化颜色类**：`.text-primary`, `.text-success`, `.text-warn`, `.text-danger`
|
|
|
+- **层级颜色**：`.text-title` (#282828), `.text-normal` (#5d5d5d), `.text-small` (#9b9b9b)
|
|
|
+- **背景色类**：对应的背景色类名
|
|
|
+
|
|
|
+#### 3. 字体系统
|
|
|
+- **字体大小**：从20rpx到82rpx的完整字体大小系统
|
|
|
+- **字重系统**：`.fw-super` (800), `.fw-main` (600), `.fw-normal` (400), `.fw-minor` (300)
|
|
|
+- **行高和文本截断**：多行文本截断工具类
|
|
|
+
|
|
|
+#### 4. 布局工具类
|
|
|
+- **Flex布局**：完整的Flex工具类系统
|
|
|
+- **间距系统**：基于rpx的padding和margin工具类
|
|
|
+- **边框处理**：1px边框处理方案
|
|
|
+
|
|
|
+#### 5. 图标字体系统
|
|
|
+- **图标字体**：'wr'字体家族，包含100+图标
|
|
|
+- **图标类名**：`.wr-{icon-name}` 格式
|
|
|
+- **外部字体资源**：通过CDN加载
|
|
|
+
|
|
|
+#### 6. 组件样式
|
|
|
+- **商品卡片**：商品列表、价格显示、标签样式
|
|
|
+- **按钮组件**：多种按钮变体和状态
|
|
|
+- **加载状态**：加载动画和状态指示器
|
|
|
+
|
|
|
+## 集成策略
|
|
|
+
|
|
|
+1. **分阶段集成**：按故事顺序逐步集成
|
|
|
+2. **兼容性处理**：保持与Tailwind CSS的兼容性
|
|
|
+3. **命名冲突避免**：使用前缀或命名空间避免类名冲突
|
|
|
+4. **测试验证**：每个阶段进行充分测试验证
|
|
|
+
|
|
|
+## 成功指标
|
|
|
+
|
|
|
+- ✅ 所有tcb-shop-demo样式类可用
|
|
|
+- ✅ 现有功能无回归
|
|
|
+- ✅ UI一致性显著提升
|
|
|
+- ✅ 开发效率提高（通过工具类复用）
|
yourname