Răsfoiți Sursa

📝 docs(stories): update homepage UI refactor documentation

- 修改TDesign组件路径格式,统一使用`mini/src/components/tdesign/[component]/index.tsx`结构
- 添加组件实现时的对照源文件路径说明
- 完善项目结构信息,明确TDesign组件和源文件位置
- 更新测试标准,明确使用Jest测试框架及测试命令
- 细化测试要求,指定测试文件存放位置和测试类型
yourname 1 lună în urmă
părinte
comite
d83c59e3d6
1 a modificat fișierele cu 23 adăugiri și 14 ștergeri
  1. 23 14
      docs/stories/001.004.homepage-ui-refactor.md

+ 23 - 14
docs/stories/001.004.homepage-ui-refactor.md

@@ -40,11 +40,11 @@ Draft
   - [ ] 应用主色调(#fa550f, #fa4126)
 - [ ] 集成TDesign MiniProgram组件 (AC: 1, 5)
   - [ ] 创建Taro React版本的TDesign组件
-    - [ ] 创建 `mini/src/components/tdesign-search/index.tsx` - Search组件
-    - [ ] 创建 `mini/src/components/tdesign-swiper/index.tsx` - Swiper组件
-    - [ ] 创建 `mini/src/components/tdesign-icon/index.tsx` - Icon组件
-    - [ ] 创建 `mini/src/components/tdesign-toast/index.tsx` - Toast组件
-    - [ ] 创建 `mini/src/components/tdesign-tabs/index.tsx` - Tabs组件
+    - [ ] 创建 `mini/src/components/tdesign/search/index.tsx` - Search组件 (对照: `mini/src/tdesign/search/`)
+    - [ ] 创建 `mini/src/components/tdesign/swiper/index.tsx` - Swiper组件 (对照: `mini/src/tdesign/swiper/`)
+    - [ ] 创建 `mini/src/components/tdesign/icon/index.tsx` - Icon组件 (对照: `mini/src/tdesign/icon/`)
+    - [ ] 创建 `mini/src/components/tdesign/toast/index.tsx` - Toast组件 (对照: `mini/src/tdesign/toast/`)
+    - [ ] 创建 `mini/src/components/tdesign/tabs/index.tsx` - Tabs组件 (对照: `mini/src/tdesign/tabs/`)
   - [ ] 使用TDesign search组件实现搜索栏
     - [ ] 在首页组件中导入自定义Search组件
     - [ ] 配置搜索栏属性:placeholder、disabled、shape等
@@ -83,6 +83,8 @@ Draft
 ### 项目结构信息 [Source: architecture/source-tree.md]
 - **首页位置**: `mini/src/pages/index/index.tsx`
 - **组件位置**: `mini/src/components/`
+- **TDesign组件**: `mini/src/components/tdesign/` (自定义React组件)
+- **TDesign源文件**: `mini/src/tdesign/` (原生小程序组件,供参考)
 - **样式文件**: `mini/src/tcb-theme.css`
 - **布局组件**: `mini/src/layouts/tab-bar-layout.tsx`
 
@@ -120,11 +122,11 @@ Draft
 
 #### 2. 组件实现示例
 
-**Search组件 (mini/src/components/tdesign-search/index.tsx)**
+**Search组件 (mini/src/components/tdesign/search/index.tsx)**
 ```tsx
 import { useState } from 'react'
 import { View, Input } from '@tarojs/components'
-import TDesignIcon from '../tdesign-icon'
+import TDesignIcon from '../icon'
 
 interface SearchProps {
   placeholder?: string
@@ -188,7 +190,7 @@ export default function TDesignSearch({
 }
 ```
 
-**Icon组件 (mini/src/components/tdesign-icon/index.tsx)**
+**Icon组件 (mini/src/components/tdesign/icon/index.tsx)**
 ```tsx
 import { View } from '@tarojs/components'
 
@@ -210,7 +212,7 @@ export default function TDesignIcon({ name, size = '32rpx', color = '#fa550f' }:
 }
 ```
 
-**Swiper组件 (mini/src/components/tdesign-swiper/index.tsx)**
+**Swiper组件 (mini/src/components/tdesign/swiper/index.tsx)**
 ```tsx
 import { useState } from 'react'
 import { Swiper, SwiperItem, Image } from '@tarojs/components'
@@ -255,17 +257,24 @@ export default function TDesignSwiper({
 
 ### Testing
 
-#### 测试标准 [Source: architecture/coding-standards.md]
-- **测试框架**: Vitest + Testing Library
-- **测试位置**: `__tests__` 文件夹与源码并列
+#### 测试标准 [基于mini项目配置]
+- **测试框架**: Jest + Testing Library
+- **测试位置**: `tests/` 文件夹,按组件和页面组织
+- **测试命令**:
+  - `npm test` - 运行所有测试
+  - `npm run test:components` - 运行组件测试
+  - `npm run test:pages` - 运行页面测试
+  - `npm run test:coverage` - 运行覆盖率测试
 - **覆盖率目标**: 核心业务逻辑 > 80%
 - **测试类型**: 单元测试、集成测试
 
 #### 测试要求
-- 为所有新组件创建单元测试
+- 为所有新组件在 `tests/components/` 中创建单元测试
+- 为首页页面在 `tests/pages/` 中创建集成测试
 - 验证组件渲染和交互功能
 - 测试样式类正确应用
-- 验证与现有布局的兼容性
+- 验证与现有TabBarLayout的兼容性
+- 使用Taro Mock模拟小程序API
 
 ## Change Log
 | Date | Version | Description | Author |