2
0
Эх сурвалжийг харах

📝 docs(story): 更新UI包开发规范文档

- 新增【UI包内部导入规范】章节,明确要求使用相对路径而非别名
- 在exports配置、Jest配置和类型定义规范中增加关于路径使用的说明和警告
- 在测试最佳实践中补充路径使用示例,区分正确与错误用法
- 更新章节编号以保持文档结构连贯性
yourname 3 долоо хоног өмнө
parent
commit
0c6d5ea101

+ 52 - 6
docs/stories/017.001.story.md

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