001.002.font-system-layout-tools-integration.md 6.3 KB
Story 001.002: 字体系统和布局工具类集成
Status
Ready for Review
Story
As a 前端开发者 I want 将tcb-shop-demo的字体大小、字重系统和Flex布局工具类集成到当前小程序项目中 so that 我可以使用统一的字体系统和布局工具类来构建一致的UI界面
Acceptance Criteria
- 字体大小系统完整集成，包括从20rpx到82rpx的完整字体大小类名
- 字重系统完整集成，包括
.fw-super(800),.fw-main(600),.fw-normal(400),.fw-minor(300) - Flex布局工具类完整集成，包括对齐、分布、方向等完整Flex工具类
- 间距系统完整集成，包括基于rpx的padding和margin工具类
- 现有Tailwind CSS样式系统保持兼容，无样式冲突
- 所有tcb-shop-demo的字体和布局类名在当前项目中可用
- 现有功能通过测试验证，无回归问题
Tasks / Subtasks
- 分析tcb-shop-demo字体系统 (AC: 1, 2)
- 提取字体大小类名系统（20rpx到82rpx）
- 提取字重类名系统（.fw-super, .fw-main, .fw-normal, .fw-minor）
- 分析行高和文本截断工具类
- 分析tcb-shop-demo布局工具类 (AC: 3, 4)
- 提取Flex布局工具类系统
- 提取间距系统（padding和margin工具类）
- 分析边框处理方案（1px边框处理）
- 扩展集成样式文件 (AC: 1, 2, 3, 4, 6)
- 在mini/src/tcb-theme.css中扩展字体系统
- 在mini/src/tcb-theme.css中扩展布局工具类
- 确保与现有Tailwind CSS兼容
- 测试验证 (AC: 5, 7)
- 运行现有测试确保无回归
- 创建字体和布局系统使用示例
- 验证所有类名在当前项目中可用
Dev Notes
技术栈和项目结构
- 项目类型: 小程序项目 (Taro + React)
- 样式框架: Tailwind CSS 4.1.11 + 自定义CSS
- 项目位置:
mini/目录 - 当前样式: 已集成主题变量和颜色系统，通过
mini/src/tcb-theme.css - 集成方式: 扩展现有
mini/src/tcb-theme.css文件，保持与Tailwind CSS兼容
tcb-shop-demo字体系统分析
字体大小系统:
- 从20rpx到82rpx的完整字体大小类名
- 例如：
.fs-20,.fs-22,.fs-24,.fs-26,.fs-28,.fs-30,.fs-32,.fs-34,.fs-36,.fs-38,.fs-40,.fs-42,.fs-44,.fs-46,.fs-48,.fs-50,.fs-52,.fs-54,.fs-56,.fs-58,.fs-60,.fs-62,.fs-64,.fs-66,.fs-68,.fs-70,.fs-72,.fs-74,.fs-76,.fs-78,.fs-80,.fs-82
字重系统:
.fw-super-font-weight: 800(超粗).fw-main-font-weight: 600(主要).fw-normal-font-weight: 400(正常).fw-minor-font-weight: 300(次要)
文本处理工具类:
- 行高工具类
- 多行文本截断工具类
tcb-shop-demo布局工具类分析
Flex布局工具类:
- 对齐类：
.justify-start,.justify-center,.justify-end,.justify-between,.justify-around - 分布类：
.items-start,.items-center,.items-end,.items-stretch - 方向类：
.flex-row,.flex-col,.flex-row-reverse,.flex-col-reverse - 换行类：
.flex-wrap,.flex-nowrap,.flex-wrap-reverse
间距系统:
- 基于rpx的padding工具类：
.p-4,.p-8,.p-12,.p-16,.p-20,.p-24,.p-28,.p-32 - 基于rpx的margin工具类：
.m-4,.m-8,.m-12,.m-16,.m-20,.m-24,.m-28,.m-32 - 方向特定间距：
.pt-,.pr-,.pb-,.pl-,.mt-,.mr-,.mb-,.ml-
边框处理:
- 1px边框处理方案
- 边框颜色和样式工具类
文件位置和集成策略
- 扩展文件:
mini/src/tcb-theme.css- 在现有主题变量和颜色系统基础上扩展字体和布局系统 - 导入位置: 已通过
mini/src/app.css导入，无需额外操作 - 兼容性: 使用CSS类名，避免与Tailwind CSS冲突
- 命名空间: 继续使用现有命名约定，保持一致性
技术约束
- 保持现有主题变量和颜色系统完整
- 确保与Tailwind CSS的Flex工具类兼容
- 避免破坏现有页面布局
- 保持CSS文件大小合理
Testing
测试标准:
- 测试文件位置: 在现有测试结构中验证，使用
mini/tests/目录 - 测试框架: 使用现有Vitest测试框架
- 测试重点: 字体类可用性、布局类可用性、无回归、兼容性
- 验证方法: 手动测试字体和布局类名
具体测试要求:
- 验证所有字体大小类名在当前项目中可用
- 验证所有字重类名在当前项目中可用
- 验证所有Flex布局工具类在当前项目中可用
- 验证所有间距工具类在当前项目中可用
- 验证现有页面样式无破坏
- 验证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
- Agent: James (Full Stack Developer)
- Model: Claude Sonnet 4.5
- Implementation Date: 2025-11-19
Debug Log References
- 成功扩展了
mini/src/tcb-theme.css文件，添加了完整的字体系统和布局工具类 - 构建过程成功完成，无编译错误
- 小程序测试全部通过，验证了无回归问题
Completion Notes List
- ✅ 完整集成了tcb-shop-demo字体大小系统（20rpx到82rpx）
- ✅ 完整集成了tcb-shop-demo字重系统（.fw-super, .fw-main, .fw-normal, .fw-minor）
- ✅ 完整集成了tcb-shop-demo Flex布局工具类（对齐、分布、方向、换行）
- ✅ 完整集成了tcb-shop-demo间距系统（padding和margin工具类）
- ✅ 添加了边框处理工具类（1px边框处理方案）
- ✅ 确保与现有Tailwind CSS样式系统兼容
- ✅ 创建了测试页面验证所有类名在当前项目中可用
- ✅ 运行了现有测试确保无回归问题
File List
- 修改文件:
mini/src/tcb-theme.css- 扩展字体系统和布局工具类
- 新增文件:
mini/src/pages/test-font-layout/index.tsx- 字体和布局系统测试页面mini/src/pages/test-font-layout/index.scss- 测试页面样式mini/src/pages/test-font-layout/index.config.ts- 测试页面配置
QA Results
Results from QA Agent QA review of the completed story implementation