|
|
@@ -0,0 +1,128 @@
|
|
|
+# Story 001.002: 字体系统和布局工具类集成
|
|
|
+
|
|
|
+## Status
|
|
|
+Draft
|
|
|
+
|
|
|
+## Story
|
|
|
+**As a** 前端开发者
|
|
|
+**I want** 将tcb-shop-demo的字体大小、字重系统和Flex布局工具类集成到当前小程序项目中
|
|
|
+**so that** 我可以使用统一的字体系统和布局工具类来构建一致的UI界面
|
|
|
+
|
|
|
+## Acceptance Criteria
|
|
|
+1. 字体大小系统完整集成，包括从20rpx到82rpx的完整字体大小类名
|
|
|
+2. 字重系统完整集成，包括`.fw-super` (800), `.fw-main` (600), `.fw-normal` (400), `.fw-minor` (300)
|
|
|
+3. Flex布局工具类完整集成，包括对齐、分布、方向等完整Flex工具类
|
|
|
+4. 间距系统完整集成，包括基于rpx的padding和margin工具类
|
|
|
+5. 现有Tailwind CSS样式系统保持兼容，无样式冲突
|
|
|
+6. 所有tcb-shop-demo的字体和布局类名在当前项目中可用
|
|
|
+7. 现有功能通过测试验证，无回归问题
|
|
|
+
|
|
|
+## 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**: TBD
|
|
|
+- **Model**: TBD
|
|
|
+- **Implementation Date**: TBD
|
|
|
+
|
|
|
+### Debug Log References
|
|
|
+- TBD
|
|
|
+
|
|
|
+### Completion Notes List
|
|
|
+- TBD
|
|
|
+
|
|
|
+### File List
|
|
|
+- TBD
|
|
|
+
|
|
|
+## QA Results
|
|
|
+*Results from QA Agent QA review of the completed story implementation*
|
yourname