|
|
@@ -100,10 +100,15 @@
|
|
|
- `src/components/` - UI组件
|
|
|
- `src/types/` - TypeScript类型定义
|
|
|
- `src/utils/` - 工具函数
|
|
|
- - `src/index.ts` - 包主入口
|
|
|
+ - `src/index.ts` - 包主入口 (保持为空,仅包含注释)
|
|
|
- `tests/` - 测试文件
|
|
|
+- [ ] 2.3 创建`src/index.ts`文件,内容为:
|
|
|
+ ```typescript
|
|
|
+ // 采用细粒度路径导出方式
|
|
|
+ // 不再导出任何内容,所有工具和组件通过具体路径导入
|
|
|
+ ```
|
|
|
|
|
|
-### 任务3: 配置每个UI包的package.json (AC: package.json配置)
|
|
|
+### 任务3: 配置每个UI包的package.json和Jest配置 (AC: package.json配置)
|
|
|
- [ ] 3.1 参照`yongren-dashboard-ui/package.json`创建每个UI包的package.json
|
|
|
- [ ] 3.2 配置包名称为`@d8d/rencai-<name>-ui`
|
|
|
- [ ] 3.3 配置exports字段,支持以下导出路径:
|
|
|
@@ -115,11 +120,34 @@
|
|
|
- `@d8d/rencai-shared-ui` (共享UI组件)
|
|
|
- 对应的后端模块包 (如`@d8d/allin-company-module`)
|
|
|
- [ ] 3.5 配置Taro相关依赖:
|
|
|
- - `@tarojs/components`
|
|
|
- - `@tarojs/plugin-platform-weapp`
|
|
|
- - `@tarojs/react`
|
|
|
- - `@tarojs/taro`
|
|
|
-- [ ] 3.6 配置测试框架 (Jest, 参照mini项目)
|
|
|
+ - `@tarojs/components`: "4.1.4"
|
|
|
+ - `@tarojs/plugin-platform-weapp`: "4.1.4"
|
|
|
+ - `@tarojs/react`: "4.1.4"
|
|
|
+ - `@tarojs/taro`: "4.1.4"
|
|
|
+- [ ] 3.6 配置测试相关依赖:
|
|
|
+ - devDependencies中添加: `"@d8d/mini-testing-utils": "workspace:*"`
|
|
|
+ - 其他测试依赖: `jest`, `ts-jest`, `@testing-library/react`, 等
|
|
|
+- [ ] 3.7 创建`jest.config.cjs`配置文件,参照`yongren-dashboard-ui/jest.config.cjs`:
|
|
|
+ ```javascript
|
|
|
+ module.exports = {
|
|
|
+ preset: 'ts-jest',
|
|
|
+ testEnvironment: 'jsdom',
|
|
|
+ setupFilesAfterEnv: ['@d8d/mini-testing-utils/setup'],
|
|
|
+ moduleNameMapper: {
|
|
|
+ '^@/(.*)$': '<rootDir>/src/$1',
|
|
|
+ '^~/(.*)$': '<rootDir>/tests/$1',
|
|
|
+ '^@tarojs/taro$': '@d8d/mini-testing-utils/testing/taro-api-mock.ts',
|
|
|
+ '\\.(css|less|scss|sass)$': '@d8d/mini-testing-utils/testing/style-mock.js',
|
|
|
+ '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
|
|
|
+ '@d8d/mini-testing-utils/testing/file-mock.js'
|
|
|
+ },
|
|
|
+ testMatch: [
|
|
|
+ '<rootDir>/tests/**/*.spec.{ts,tsx}',
|
|
|
+ '<rootDir>/tests/**/*.test.{ts,tsx}'
|
|
|
+ ],
|
|
|
+ // ... 其他配置
|
|
|
+ }
|
|
|
+ ```
|
|
|
|
|
|
### 任务4: 创建API客户端 (AC: API客户端集成)
|
|
|
- [ ] 4.1 为每个UI包创建`src/api/<rencai>Client.ts`
|
|
|
@@ -195,9 +223,10 @@
|
|
|
- **Tailwind CSS**: 4.1.11 (样式)
|
|
|
|
|
|
**测试框架:**
|
|
|
-- **Jest**: mini项目使用Jest (不是Vitest!)
|
|
|
-- **Testing Library**: @testing-library/react
|
|
|
-- **@testing-library/user-event**: 用户交互测试
|
|
|
+- **Jest**: 30.2.0 (mini项目使用Jest,不是Vitest!)
|
|
|
+- **ts-jest**: 29.4.5 (TypeScript预处理器)
|
|
|
+- **@testing-library/react**: 16.3.0 (React组件测试)
|
|
|
+- **@d8d/mini-testing-utils**: workspace包 (Taro小程序测试工具,提供统一的mock配置)
|
|
|
|
|
|
**包管理:**
|
|
|
- **pnpm**: workspace管理
|
|
|
@@ -215,7 +244,7 @@ mini-ui-packages/<package-name>/
|
|
|
├── tsconfig.json # TypeScript配置
|
|
|
├── jest.config.cjs # Jest测试配置
|
|
|
├── src/
|
|
|
-│ ├── index.ts # 主入口文件
|
|
|
+│ ├── index.ts # 主入口文件 (保持为空,采用细粒度导出)
|
|
|
│ ├── api/ # API客户端
|
|
|
│ │ └── index.ts # API导出
|
|
|
│ ├── pages/ # 页面组件
|
|
|
@@ -228,6 +257,14 @@ mini-ui-packages/<package-name>/
|
|
|
└── tests/ # 测试文件
|
|
|
```
|
|
|
|
|
|
+**src/index.ts规范** (参照`yongren-statistics-ui/src/index.ts`):
|
|
|
+```typescript
|
|
|
+// 采用细粒度路径导出方式
|
|
|
+// 不再导出任何内容,所有工具和组件通过具体路径导入
|
|
|
+```
|
|
|
+
|
|
|
+**重要**: 主入口文件`src/index.ts`保持为空(仅包含注释),所有导出通过package.json的exports字段配置的具体路径进行。
|
|
|
+
|
|
|
#### 2. package.json exports配置规范
|
|
|
```json
|
|
|
{
|
|
|
@@ -257,7 +294,56 @@ mini-ui-packages/<package-name>/
|
|
|
import LoginPage from '@d8d/rencai-auth-ui/pages/LoginPage/LoginPage'
|
|
|
```
|
|
|
|
|
|
-#### 3. RPC客户端实现规范
|
|
|
+#### 3. Jest配置规范
|
|
|
+每个UI包必须创建`jest.config.cjs`配置文件,参照`yongren-dashboard-ui/jest.config.cjs`:
|
|
|
+
|
|
|
+```javascript
|
|
|
+module.exports = {
|
|
|
+ preset: 'ts-jest',
|
|
|
+ testEnvironment: 'jsdom',
|
|
|
+ setupFilesAfterEnv: ['@d8d/mini-testing-utils/setup'],
|
|
|
+ moduleNameMapper: {
|
|
|
+ '^@/(.*)$': '<rootDir>/src/$1',
|
|
|
+ '^~/(.*)$': '<rootDir>/tests/$1',
|
|
|
+ '^@tarojs/taro$': '@d8d/mini-testing-utils/testing/taro-api-mock.ts',
|
|
|
+ '\\.(css|less|scss|sass)$': '@d8d/mini-testing-utils/testing/style-mock.js',
|
|
|
+ '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
|
|
|
+ '@d8d/mini-testing-utils/testing/file-mock.js'
|
|
|
+ },
|
|
|
+ testMatch: [
|
|
|
+ '<rootDir>/tests/**/*.spec.{ts,tsx}',
|
|
|
+ '<rootDir>/tests/**/*.test.{ts,tsx}'
|
|
|
+ ],
|
|
|
+ collectCoverageFrom: [
|
|
|
+ 'src/**/*.{ts,tsx}',
|
|
|
+ '!src/**/*.d.ts',
|
|
|
+ '!src/**/index.{ts,tsx}',
|
|
|
+ '!src/**/*.stories.{ts,tsx}'
|
|
|
+ ],
|
|
|
+ coverageDirectory: 'coverage',
|
|
|
+ coverageReporters: ['text', 'lcov', 'html'],
|
|
|
+ testPathIgnorePatterns: [
|
|
|
+ '/node_modules/',
|
|
|
+ '/dist/',
|
|
|
+ '/coverage/'
|
|
|
+ ],
|
|
|
+ transform: {
|
|
|
+ '^.+\\.(ts|tsx)$': 'ts-jest',
|
|
|
+ '^.+\\.(js|jsx)$': 'babel-jest'
|
|
|
+ },
|
|
|
+ transformIgnorePatterns: [
|
|
|
+ '/node_modules/(?!(swiper|@tarojs)/)'
|
|
|
+ ],
|
|
|
+ moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json']
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+**关键配置说明**:
|
|
|
+- `setupFilesAfterEnv`: 使用`@d8d/mini-testing-utils/setup`进行测试环境初始化
|
|
|
+- `moduleNameMapper`: 映射Taro API和样式文件到mock
|
|
|
+- `testMatch`: 支持`.spec.{ts,tsx}`和`.test.{ts,tsx}`两种测试文件格式
|
|
|
+
|
|
|
+#### 4. RPC客户端实现规范
|
|
|
每个UI包使用简单的RPC客户端导出模式 (参照`yongren-statistics-ui/src/api/enterpriseStatisticsClient.ts`):
|
|
|
|
|
|
```typescript
|
|
|
@@ -274,7 +360,7 @@ export const <rencai>Client = rpcClient<typeof <rencaiRoutes>>('/api/v1/rencai')
|
|
|
export { <rencai>Client } from './<rencai>Client'
|
|
|
```
|
|
|
|
|
|
-#### 4. 类型定义规范
|
|
|
+#### 5. 类型定义规范
|
|
|
**必须使用RPC推断类型**,避免直接导入schema类型:
|
|
|
|
|
|
```typescript
|
|
|
@@ -482,12 +568,14 @@ const createMockResponse = (status: number, data?: any) => ({
|
|
|
#### 4. 参考实现
|
|
|
- **用人方统计UI包**: `mini-ui-packages/yongren-statistics-ui`
|
|
|
- API客户端: `src/api/enterpriseStatisticsClient.ts` (简单RPC客户端导出模式)
|
|
|
- - 参照此文件实现rencai UI包的API客户端
|
|
|
+ - 主入口文件: `src/index.ts` (保持为空,采用细粒度导出)
|
|
|
+ - 参照此文件实现rencai UI包的API客户端和导出方式
|
|
|
|
|
|
- **用人方仪表板UI包**: `mini-ui-packages/yongren-dashboard-ui`
|
|
|
- 组件: `src/pages/Dashboard/Dashboard.tsx`
|
|
|
- package.json exports配置
|
|
|
- 目录结构参考
|
|
|
+ - Jest配置: `jest.config.cjs`
|
|
|
|
|
|
### 数据模型参考
|
|
|
|