Przeglądaj źródła

📝 docs(stories): 更新人才小程序UI包开发故事文档

- 更新任务4的API客户端实现规范,从管理器模式改为简单的RPC客户端导出模式
- 明确API客户端文件命名为`src/api/<rencai>Client.ts`,参照`yongren-statistics-ui`的实现
- 调整RPC客户端实现规范章节,移除复杂的客户端管理器类示例,提供简洁的导出模式示例
- 更新参考实现部分,优先推荐`yongren-statistics-ui`作为API客户端实现参考
- 修正检查清单中的关键文件识别项,更新API客户端文件路径说明
- 补充实施注意事项,明确RPC客户端应使用简单导出模式而非管理器模式
yourname 3 tygodni temu
rodzic
commit
a42af494d7
1 zmienionych plików z 27 dodań i 44 usunięć
  1. 27 44
      docs/stories/017.001.story.md

+ 27 - 44
docs/stories/017.001.story.md

@@ -122,13 +122,17 @@
 - [ ] 3.6 配置测试框架 (Jest, 参照mini项目)
 
 ### 任务4: 创建API客户端 (AC: API客户端集成)
-- [ ] 4.1 为每个UI包创建`src/api/index.ts`
-- [ ] 4.2 实现API客户端管理器模式,参照`yongren-dashboard-ui/src/api/enterpriseCompanyClient.ts`
-- [ ] 4.3 使用Hono RPC的`hc`客户端:
+- [ ] 4.1 为每个UI包创建`src/api/<rencai>Client.ts`
+- [ ] 4.2 使用简单的RPC客户端导出模式,参照`yongren-statistics-ui/src/api/enterpriseStatisticsClient.ts`:
   ```typescript
-  import { rpcClient } from '@d8d/mini-shared-ui-components/utils/hc'
-  import { <rencaiRoutes> } from '@d8d/<rencai>-module'
+  // src/api/<rencai>Client.ts
+  import type { <rencaiRoutes> } from '@d8d/<rencai>-module'
+  import { rpcClient } from '@d8d/mini-shared-ui-components/utils/rpc/rpc-client'
+
+  // 人才小程序API路径前缀: /api/v1/rencai
+  export const <rencai>Client = rpcClient<typeof <rencaiRoutes>>('/api/v1/rencai')
   ```
+- [ ] 4.3 创建`src/api/index.ts`导出API客户端
 - [ ] 4.4 集成史诗015提供的RPC路由定义
 - [ ] 4.5 确保API路径使用`/api/v1/rencai`前缀
 
@@ -254,45 +258,20 @@ import LoginPage from '@d8d/rencai-auth-ui/pages/LoginPage/LoginPage'
 ```
 
 #### 3. RPC客户端实现规范
-每个UI包必须实现API客户端管理器:
+每个UI包使用简单的RPC客户端导出模式 (参照`yongren-statistics-ui/src/api/enterpriseStatisticsClient.ts`):
 
 ```typescript
-// src/api/<module>Client.ts
-import { rpcClient } from '@d8d/mini-shared-ui-components/utils/hc'
-import { <rencaiRoutes> } from '@d8d/<rencai>-module'
-
-export class <Rencai>ClientManager {
-  private static instance: <Rencai>ClientManager
-  private client: ReturnType<typeof rpcClient<typeof <rencaiRoutes>>> | null = null
-
-  private constructor() {}
-
-  public static getInstance(): <Rencai>ClientManager {
-    if (!<Rencai>ClientManager.instance) {
-      <Rencai>ClientManager.instance = new <Rencai>ClientManager()
-    }
-    return <Rencai>ClientManager.instance
-  }
-
-  public init(baseUrl: string = '/api/v1/rencai'): ReturnType<typeof rpcClient<typeof <rencaiRoutes>>> {
-    return this.client = rpcClient<typeof <rencaiRoutes>>(baseUrl)
-  }
+// src/api/<rencai>Client.ts
+import type { <rencaiRoutes> } from '@d8d/<rencai>-module'
+import { rpcClient } from '@d8d/mini-shared-ui-components/utils/rpc/rpc-client'
 
-  public get(): ReturnType<typeof rpcClient<typeof <rencaiRoutes>>> {
-    if (!this.client) {
-      return this.init()
-    }
-    return this.client
-  }
-
-  public reset(): void {
-    this.client = null
-  }
-}
+// 人才小程序API路径前缀: /api/v1/rencai
+export const <rencai>Client = rpcClient<typeof <rencaiRoutes>>('/api/v1/rencai')
+```
 
-const <rencai>ClientManager = <Rencai>ClientManager.getInstance()
-export const <rencai>Client = <rencai>ClientManager.get()
-export { <Rencai>ClientManager }
+**src/api/index.ts导出**:
+```typescript
+export { <rencai>Client } from './<rencai>Client'
 ```
 
 #### 4. 类型定义规范
@@ -501,11 +480,14 @@ const createMockResponse = (status: number, data?: any) => ({
 - ❌ 不要使用故事中描述但实际不存在的路由名称
 
 #### 4. 参考实现
+- **用人方统计UI包**: `mini-ui-packages/yongren-statistics-ui`
+  - API客户端: `src/api/enterpriseStatisticsClient.ts` (简单RPC客户端导出模式)
+  - 参照此文件实现rencai UI包的API客户端
+
 - **用人方仪表板UI包**: `mini-ui-packages/yongren-dashboard-ui`
   - 组件: `src/pages/Dashboard/Dashboard.tsx`
-  - API客户端: `src/api/enterpriseCompanyClient.ts`
-  - 类型定义: `src/types/index.ts`
   - package.json exports配置
+  - 目录结构参考
 
 ### 数据模型参考
 
@@ -598,14 +580,14 @@ const createMockResponse = (status: number, data?: any) => ({
 - ✅ 关键文件已识别:
   - 7个UI包的目录结构
   - package.json配置文件
-  - API客户端文件 (src/api/index.ts)
+  - API客户端文件 (src/api/<rencai>Client.ts)
   - 页面组件文件结构
 - ✅ 所需技术已明确指定:
   - TypeScript, React, Taro, Hono RPC, Tailwind CSS
   - Jest测试框架 (mini项目使用Jest,不是Vitest)
 - ✅ 关键API和接口已充分描述:
   - API路径约定 (`/api/v1/rencai` 前缀)
-  - RPC客户端实现模式 (包含完整示例代码)
+  - RPC客户端实现模式 (简单导出模式,参照yongren-statistics-ui)
   - package.json exports配置规范 (包含完整示例)
 - ✅ 必要的数据模型或结构已引用:
   - 史诗015的API模块
@@ -616,6 +598,7 @@ const createMockResponse = (status: number, data?: any) => ({
   - mini项目使用Jest而非Vitest
   - 页面组件导出路径的完整格式
   - 类型推断必须使用RPC推断类型
+  - RPC客户端使用简单导出模式而非管理器模式
 
 #### 3. 参考文档有效性 ✅ PASS
 - ✅ 外部文档引用指向特定相关部分: