|
|
@@ -265,7 +265,31 @@ mini-ui-packages/<package-name>/
|
|
|
|
|
|
**重要**: 主入口文件`src/index.ts`保持为空(仅包含注释),所有导出通过package.json的exports字段配置的具体路径进行。
|
|
|
|
|
|
-#### 2. package.json exports配置规范
|
|
|
+#### 2. UI包内部导入规范
|
|
|
+
|
|
|
+**重要**: UI包内部导入必须使用相对路径,不要使用别名。
|
|
|
+
|
|
|
+**正确示例** (参照`yongren-dashboard-ui/src/pages/Dashboard/Dashboard.tsx`):
|
|
|
+```typescript
|
|
|
+// ✅ 正确: 使用相对路径导入同一包内的模块
|
|
|
+import { enterpriseCompanyClient } from '../../api'
|
|
|
+import { SomeComponent } from '../components/SomeComponent'
|
|
|
+import { utilFunction } from '../../utils/helper'
|
|
|
+```
|
|
|
+
|
|
|
+**错误示例**:
|
|
|
+```typescript
|
|
|
+// ❌ 错误: 不要使用别名导入UI包内部的模块
|
|
|
+import { enterpriseCompanyClient } from '@/api'
|
|
|
+import { SomeComponent } from '@/pages/Dashboard/components'
|
|
|
+```
|
|
|
+
|
|
|
+**说明**:
|
|
|
+- UI包内部导入(同一包内的文件)必须使用相对路径
|
|
|
+- `@/`和`~/`别名仅在Jest配置中用于测试路径映射,不在源代码中使用
|
|
|
+- 只有跨包导入才使用workspace包名(如`@d8d/mini-shared-ui-components`)
|
|
|
+
|
|
|
+#### 3. package.json exports配置规范
|
|
|
```json
|
|
|
{
|
|
|
"exports": {
|
|
|
@@ -294,7 +318,7 @@ mini-ui-packages/<package-name>/
|
|
|
import LoginPage from '@d8d/rencai-auth-ui/pages/LoginPage/LoginPage'
|
|
|
```
|
|
|
|
|
|
-#### 3. Jest配置规范
|
|
|
+#### 4. Jest配置规范
|
|
|
每个UI包必须创建`jest.config.cjs`配置文件,参照`yongren-dashboard-ui/jest.config.cjs`:
|
|
|
|
|
|
```javascript
|
|
|
@@ -340,10 +364,14 @@ module.exports = {
|
|
|
|
|
|
**关键配置说明**:
|
|
|
- `setupFilesAfterEnv`: 使用`@d8d/mini-testing-utils/setup`进行测试环境初始化
|
|
|
-- `moduleNameMapper`: 映射Taro API和样式文件到mock
|
|
|
+- `moduleNameMapper`:
|
|
|
+ - `^@/(.*)$` 和 `^~/(.*)$`: 仅用于测试文件的路径映射,不在源代码中使用
|
|
|
+ - `^@tarojs/taro$`: 映射Taro API到mock
|
|
|
+ - 样式和文件映射: 将样式文件和静态文件映射到mock
|
|
|
+- **重要**: 源代码中不使用`@/`或`~/`别名,只使用相对路径
|
|
|
- `testMatch`: 支持`.spec.{ts,tsx}`和`.test.{ts,tsx}`两种测试文件格式
|
|
|
|
|
|
-#### 4. RPC客户端实现规范
|
|
|
+#### 5. RPC客户端实现规范
|
|
|
每个UI包使用简单的RPC客户端导出模式 (参照`yongren-statistics-ui/src/api/enterpriseStatisticsClient.ts`):
|
|
|
|
|
|
```typescript
|
|
|
@@ -360,11 +388,11 @@ export const <rencai>Client = rpcClient<typeof <rencaiRoutes>>('/api/v1/rencai')
|
|
|
export { <rencai>Client } from './<rencai>Client'
|
|
|
```
|
|
|
|
|
|
-#### 5. 类型定义规范
|
|
|
+#### 6. 类型定义规范
|
|
|
**必须使用RPC推断类型**,避免直接导入schema类型:
|
|
|
|
|
|
```typescript
|
|
|
-// ✅ 正确:使用RPC推断类型
|
|
|
+// ✅ 正确:使用RPC推断类型 + 相对路径导入
|
|
|
import type { InferResponseType } from 'hono'
|
|
|
import { <rencai>Client } from '../api/<rencai>Client'
|
|
|
|
|
|
@@ -372,6 +400,9 @@ export type <Rencai>InfoResponse = InferResponseType<typeof <rencai>Client.perso
|
|
|
|
|
|
// ❌ 错误:直接导入schema类型 (可能导致Date/string不匹配)
|
|
|
import type { <Rencai> } from '@d8d/<rencai>-module/schemas'
|
|
|
+
|
|
|
+// ❌ 错误:使用别名导入UI包内部模块
|
|
|
+import { <rencai>Client } from '@/api/<rencai>Client'
|
|
|
```
|
|
|
|
|
|
### 项目结构指南
|
|
|
@@ -564,6 +595,21 @@ const createMockResponse = (status: number, data?: any) => ({
|
|
|
- ❌ 不要使用`getByText()`查找可能重复的文本元素
|
|
|
- ❌ 不要在单个Form组件上动态切换props
|
|
|
- ❌ 不要使用故事中描述但实际不存在的路由名称
|
|
|
+- ❌ **不要在UI包内部导入中使用别名** (`@/`, `~/`等),必须使用相对路径
|
|
|
+
|
|
|
+**路径使用示例**:
|
|
|
+```typescript
|
|
|
+// ✅ 正确: UI包内部使用相对路径
|
|
|
+import { apiClient } from '../../api'
|
|
|
+import { MyComponent } from '../components'
|
|
|
+
|
|
|
+// ✅ 正确: 跨包导入使用workspace包名
|
|
|
+import { SharedComponent } from '@d8d/mini-shared-ui-components'
|
|
|
+
|
|
|
+// ❌ 错误: UI包内部使用别名
|
|
|
+import { apiClient } from '@/api'
|
|
|
+import { MyComponent } from '~/pages/Dashboard/components'
|
|
|
+```
|
|
|
|
|
|
#### 4. 参考实现
|
|
|
- **用人方统计UI包**: `mini-ui-packages/yongren-statistics-ui`
|