|
|
@@ -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 |
|