epic-001-tcb-shop-theme-integration.md 3.9 KB
史诗001：tcb-shop-demo主题样式集成 - 棕地增强
史诗目标
将tcb-shop-demo包中的主题、样式和设计规范分析并集成到当前小程序项目中，提升UI一致性和用户体验，同时保持现有系统的完整性。
史诗描述
现有系统上下文
- 当前相关功能：小程序使用Tailwind CSS和自定义样式，主要关注滚动条样式和基础布局
- 技术栈：小程序框架 + Tailwind CSS + 自定义CSS
- 集成点：样式文件、组件样式、主题变量
增强详情
- 添加/更改内容：集成tcb-shop-demo的完整样式系统，包括主题变量、颜色系统、字体系统、布局工具类、图标字体和组件样式
- 集成方式：将tcb-shop-demo的样式文件迁移到当前项目，保持与现有Tailwind CSS的兼容性
- 成功标准：样式系统完整集成，现有功能不受影响，UI一致性提升
故事
- 故事1：主题变量和颜色系统集成 - 迁移tcb-shop-demo的主题变量和完整的颜色系统
- 故事2：字体系统和布局工具类集成 - 集成字体大小、字重系统和Flex布局工具类
- 故事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. 组件样式
- 商品卡片：商品列表、价格显示、标签样式
- 按钮组件：多种按钮变体和状态
- 加载状态：加载动画和状态指示器
集成策略
- 分阶段集成：按故事顺序逐步集成
- 兼容性处理：保持与Tailwind CSS的兼容性
- 命名冲突避免：使用前缀或命名空间避免类名冲突
- 测试验证：每个阶段进行充分测试验证
成功指标
- ✅ 所有tcb-shop-demo样式类可用
- ✅ 现有功能无回归
- ✅ UI一致性显著提升
- ✅ 开发效率提高（通过工具类复用）