Преглед изворни кода

✨ feat(story): 新增人才小程序UI包基础框架搭建故事文档

- 创建故事017.001文档,详细描述rencai系列mini ui包基础框架搭建需求
- 定义7个UI包的基础结构、API客户端集成、package.json配置和项目集成要求
- 提供完整的验收标准、任务列表、技术规范和原型设计参考
- 包含史诗015 API集成要点、测试策略、编码标准和数据模型参考
- 完成故事草稿检查清单验证,确认故事准备就绪可实施
yourname пре 3 недеља
родитељ
комит
743199d2fa
1 измењених фајлова са 710 додато и 0 уклоњено
  1. 710 0
      docs/stories/017.001.story.md

+ 710 - 0
docs/stories/017.001.story.md

@@ -0,0 +1,710 @@
+# 故事017.001: rencai mini ui包基础框架搭建
+
+## 元信息
+- **史诗**: 017 - 人才小程序功能实现
+- **优先级**: P1 - 核心基础设施
+- **状态**: Draft
+- **创建日期**: 2025-12-25
+- **负责人**: 开发团队
+
+## 故事描述
+
+**作为** 人才小程序开发者,
+**我想要** 搭建rencai系列mini ui包的基础框架,
+**以便** 为人才小程序的6个核心页面提供可复用的UI组件和API客户端集成,建立完整的技术基础。
+
+### 背景
+
+**现有系统状态:**
+- 史诗015已完成3/8核心故事(38%),核心API就绪
+- 人才用户认证API和个人信息查询API已实现
+- mini-talent项目已从mini项目复制基础框架
+- mini-ui-packages目录下已有yongren系列UI包作为参考
+
+**原型设计参考:**
+- `docs/小程序原型/rencai.html` 提供了完整的6个页面原型设计
+- 原型包含: 登录页、首页/个人主页、考勤记录页、个人信息页、就业信息页、设置页
+
+**技术集成模式:**
+- 参照史诗011(用人方小程序)的成功模式和架构
+- 每个UI包内部管理自己的API客户端和RPC类型
+- API调用逻辑封装在页面组件内部
+- mini-talent只需导入页面组件使用,无需关心API实现
+
+**需要创建的7个UI包:**
+1. `@d8d/rencai-dashboard-ui` - 首页/个人主页UI包
+2. `@d8d/rencai-auth-ui` - 登录认证UI包
+3. `@d8d/rencai-personal-info-ui` - 个人信息UI包
+4. `@d8d/rencai-attendance-ui` - 考勤记录UI包
+5. `@d8d/rencai-employment-ui` - 就业信息UI包
+6. `@d8d/rencai-settings-ui` - 设置页UI包
+7. `@d8d/rencai-shared-ui` - 共享UI组件包
+
+## 验收标准
+
+### UI包基础结构
+- [ ] rencai系列7个UI包基础目录结构创建完成
+- [ ] 每个UI包包含必需的子目录: `src/api/`, `src/pages/`, `src/components/`, `src/types/`, `src/utils/`, `tests/`
+
+### API客户端集成
+- [ ] 每个UI包包含自己的API客户端文件 (`src/api/index.ts`)
+- [ ] API客户端基于史诗015提供的RPC路由定义
+- [ ] 使用Hono RPC的`hc`客户端实现类型安全的API调用
+- [ ] API客户端封装在页面组件内部,mini-talent无需关心实现细节
+
+### package.json配置
+- [ ] 每个UI包的package.json配置了完整的exports字段
+- [ ] exports字段包含页面组件的导出路径(如`"./pages/LoginPage/LoginPage"`)
+- [ ] 参照yongren-dashboard-ui的package.json格式
+- [ ] 正确配置workspace依赖关系
+
+### 项目集成
+- [ ] mini-talent项目的路由结构配置完成,支持页面导航
+- [ ] 页面组件使用exports配置的完整路径导入: `import LoginPage from '@d8d/rencai-auth-ui/pages/LoginPage/LoginPage'`
+- [ ] 基础布局组件(状态栏、底部导航、页面容器)可用并符合移动端设计
+- [ ] 人才用户认证框架就绪,支持后续登录页面集成
+
+### 兼容性验证
+- [ ] 现有mini-talent项目功能不受影响
+- [ ] rencai系列UI包遵循yongren系列UI包的API客户端模式
+- [ ] 保持路由结构的统一性,新增路由不影响现有功能
+- [ ] rencai系列UI包遵循现有的mini-ui-packages包结构规范
+
+### 测试验证
+- [ ] 编写基础测试验证UI包结构正确性
+- [ ] 测试验证现有功能保持完整
+- [ ] 类型检查通过 (`pnpm typecheck`)
+
+## 任务列表
+
+### 任务1: 分析史诗015已完成的API模块 (AC: UI包基础结构, API客户端集成)
+- [ ] 1.1 查阅史诗015的PRD文档,确认已完成的API列表
+- [ ] 1.2 确认每个UI包需要集成的RPC客户端和路由
+- [ ] 1.3 分析API路径约定 (`api/v1/rencai` 前缀)
+- [ ] 1.4 确认史诗015已实现的API:
+  - 人才用户认证API (登录)
+  - 个人信息查询API (基本信息、银行卡、证件照片)
+
+### 任务2: 创建rencai系列UI包基础结构 (AC: UI包基础结构)
+- [ ] 2.1 在`mini-ui-packages`下创建7个UI包目录:
+  - `rencai-dashboard-ui/`
+  - `rencai-auth-ui/`
+  - `rencai-personal-info-ui/`
+  - `rencai-attendance-ui/`
+  - `rencai-employment-ui/`
+  - `rencai-settings-ui/`
+  - `rencai-shared-ui/`
+- [ ] 2.2 为每个UI包创建标准子目录结构:
+  - `src/api/` - API客户端
+  - `src/pages/` - 页面组件
+  - `src/components/` - UI组件
+  - `src/types/` - TypeScript类型定义
+  - `src/utils/` - 工具函数
+  - `src/index.ts` - 包主入口
+  - `tests/` - 测试文件
+
+### 任务3: 配置每个UI包的package.json (AC: package.json配置)
+- [ ] 3.1 参照`yongren-dashboard-ui/package.json`创建每个UI包的package.json
+- [ ] 3.2 配置包名称为`@d8d/rencai-<name>-ui`
+- [ ] 3.3 配置exports字段,支持以下导出路径:
+  - `"."` - 主入口
+  - `"./api"` - API客户端
+  - `"./pages/<PageName>/<PageName>"` - 页面组件导出路径
+- [ ] 3.4 配置workspace依赖:
+  - `@d8d/mini-shared-ui-components`
+  - `@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项目)
+
+### 任务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`客户端:
+  ```typescript
+  import { rpcClient } from '@d8d/mini-shared-ui-components/utils/hc'
+  import { <rencaiRoutes> } from '@d8d/<rencai>-module'
+  ```
+- [ ] 4.4 集成史诗015提供的RPC路由定义
+- [ ] 4.5 确保API路径使用`/api/v1/rencai`前缀
+
+### 任务5: 创建基础布局组件 (AC: 项目集成, 基础布局组件)
+- [ ] 5.1 在`@d8d/rencai-shared-ui`中创建基础布局组件:
+  - `StatusBar` - 状态栏组件
+  - `TabBarLayout` - 底部导航布局组件
+  - `PageContainer` - 页面容器组件
+  - `Navbar` - 导航栏组件 (支持带/不带返回按钮)
+- [ ] 5.2 参照原型设计`docs/小程序原型/rencai.html`的UI样式
+- [ ] 5.3 使用Tailwind CSS实现移动端友好的设计
+- [ ] 5.4 确保组件符合小程序的尺寸规范 (375px宽度参考)
+
+### 任务6: 建立人才用户认证框架 (AC: 人才用户认证框架)
+- [ ] 6.1 在`@d8d/rencai-auth-ui`中创建认证基础框架
+- [ ] 6.2 集成史诗015提供的人才用户认证API
+- [ ] 6.3 创建认证上下文 (AuthContext) 管理登录状态
+- [ ] 6.4 实现token存储和验证逻辑
+- [ ] 6.5 创建登录页面基础结构 (页面组件占位)
+- [ ] 6.6 支持身份证号/残疾证号密码登录模式
+
+### 任务7: 配置mini-talent项目的路由结构 (AC: 项目集成)
+- [ ] 7.1 配置mini-talent的app.config.ts,添加新页面路由
+- [ ] 7.2 配置底部TabBar导航 (首页、考勤、我的、更多)
+- [ ] 7.3 使用`TabBarLayout`组件包装TabBar页面
+- [ ] 7.4 确保路由配置与原型设计一致
+
+### 任务8: 编写基础测试 (AC: 测试验证)
+- [ ] 8.1 为每个UI包编写基础测试,验证包结构正确性
+- [ ] 8.2 测试API客户端的导入和导出
+- [ ] 8.3 测试页面组件的导入路径
+- [ ] 8.4 验证mini-talent项目现有功能不受影响
+- [ ] 8.5 运行`pnpm typecheck`确保类型检查通过
+
+## 开发者笔记
+
+### 前置故事见解
+
+**史诗016完成状态:**
+- ✅ mini-charts图表组件包已完成 (故事016.001-016.013)
+- ✅ 提供了可复用的UI组件开发经验
+
+**史诗015完成状态 (2025-12-25):**
+- ✅ 人才用户认证API已完成 (故事015-02)
+- ✅ 个人信息查询API已完成 (故事015-03)
+- ⚠️ 就业信息API进行中 (故事015-05)
+- ⚠️ 帮助与支持API进行中 (故事015-06)
+- ⚠️ 通知与消息API进行中 (故事015-07)
+- 🚀 **启动建议**: 史诗017可以立即开始,与史诗015并行开发
+
+### 技术栈要求
+
+**来源**: [architecture/tech-stack.md](../architecture/tech-stack.md)
+
+**运行时和框架:**
+- **Node.js**: 20.18.3
+- **Hono**: 4.8.5 (RPC客户端)
+- **React**: 19.1.0 (UI组件)
+- **Taro**: 4.1.4 (小程序框架)
+- **Tailwind CSS**: 4.1.11 (样式)
+
+**测试框架:**
+- **Jest**: mini项目使用Jest (不是Vitest!)
+- **Testing Library**: @testing-library/react
+- **@testing-library/user-event**: 用户交互测试
+
+**包管理:**
+- **pnpm**: workspace管理
+
+### UI包开发规范
+
+**来源**: [architecture/ui-package-standards.md](../architecture/ui-package-standards.md)
+
+**关键规范要求:**
+
+#### 1. 包结构规范
+```
+mini-ui-packages/<package-name>/
+├── package.json              # 包配置 (必须包含exports字段)
+├── tsconfig.json             # TypeScript配置
+├── jest.config.cjs           # Jest测试配置
+├── src/
+│   ├── index.ts              # 主入口文件
+│   ├── api/                  # API客户端
+│   │   └── index.ts          # API导出
+│   ├── pages/                # 页面组件
+│   │   └── <PageName>/
+│   │       ├── <PageName>.tsx
+│   │       └── index.ts
+│   ├── components/           # UI组件
+│   ├── types/                # TypeScript类型定义
+│   └── utils/                # 工具函数
+└── tests/                    # 测试文件
+```
+
+#### 2. package.json exports配置规范
+```json
+{
+  "exports": {
+    ".": {
+      "types": "./dist/src/index.d.ts",
+      "import": "./dist/src/index.js",
+      "require": "./dist/src/index.js"
+    },
+    "./api": {
+      "types": "./src/api/index.ts",
+      "import": "./src/api/index.ts",
+      "require": "./src/api/index.ts"
+    },
+    "./pages/<PageName>/<PageName>": {
+      "types": "./dist/src/pages/<PageName>/<PageName>.d.ts",
+      "import": "./dist/src/pages/<PageName>/<PageName>.js",
+      "require": "./dist/src/pages/<PageName>/<PageName>.js"
+    }
+  }
+}
+```
+
+**重要**: 页面组件的导出路径必须与实际文件路径匹配,便于mini-talent导入:
+```typescript
+// mini-talent中的导入方式
+import LoginPage from '@d8d/rencai-auth-ui/pages/LoginPage/LoginPage'
+```
+
+#### 3. RPC客户端实现规范
+每个UI包必须实现API客户端管理器:
+
+```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)
+  }
+
+  public get(): ReturnType<typeof rpcClient<typeof <rencaiRoutes>>> {
+    if (!this.client) {
+      return this.init()
+    }
+    return this.client
+  }
+
+  public reset(): void {
+    this.client = null
+  }
+}
+
+const <rencai>ClientManager = <Rencai>ClientManager.getInstance()
+export const <rencai>Client = <rencai>ClientManager.get()
+export { <Rencai>ClientManager }
+```
+
+#### 4. 类型定义规范
+**必须使用RPC推断类型**,避免直接导入schema类型:
+
+```typescript
+// ✅ 正确:使用RPC推断类型
+import type { InferResponseType } from 'hono'
+import { <rencai>Client } from '../api/<rencai>Client'
+
+export type <Rencai>InfoResponse = InferResponseType<typeof <rencai>Client.personal.info.$get, 200>
+
+// ❌ 错误:直接导入schema类型 (可能导致Date/string不匹配)
+import type { <Rencai> } from '@d8d/<rencai>-module/schemas'
+```
+
+### 项目结构指南
+
+**来源**: [architecture/source-tree.md](../architecture/source-tree.md)
+
+**mini-talent项目结构:**
+```
+mini/                           # 人才小程序项目 (从mini复制)
+├── src/
+│   ├── app.tsx                # 小程序入口
+│   ├── app.config.ts          # 小程序配置 (需添加路由)
+│   ├── api.ts                 # API客户端 (rencai系列由UI包管理)
+│   ├── components/ui/         # UI组件库 (通用组件)
+│   ├── layouts/               # 布局组件
+│   │   └── tab-bar-layout.tsx # TabBar布局
+│   ├── pages/                 # 页面目录 (需添加页面路由)
+│   │   ├── login/             # 登录页
+│   │   ├── index/             # 首页
+│   │   ├── attendance/        # 考勤记录
+│   │   ├── personal-info/     # 个人信息
+│   │   ├── employment/        # 就业信息
+│   │   └── settings/          # 设置页
+│   ├── schemas/               # 验证模式
+│   └── utils/                 # 工具函数
+├── config/                    # 配置文件
+├── package.json
+├── jest.config.js             # Jest配置
+└── tsconfig.json
+```
+
+**mini-ui-packages目录结构:**
+```
+mini-ui-packages/
+├── yongren-dashboard-ui/      # 参考实现 (用人方仪表板)
+├── yongren-auth-ui/           # 参考实现 (用人方认证)
+├── yongren-shared-ui/         # 参考实现 (用人方共享组件)
+├── mini-shared-ui-components/ # 通用小程序UI组件
+├── rencai-dashboard-ui/       # [待创建] 人才仪表板
+├── rencai-auth-ui/            # [待创建] 人才认证
+├── rencai-personal-info-ui/   # [待创建] 人才个人信息
+├── rencai-attendance-ui/      # [待创建] 人才考勤记录
+├── rencai-employment-ui/      # [待创建] 人才就业信息
+├── rencai-settings-ui/        # [待创建] 人才设置
+└── rencai-shared-ui/          # [待创建] 人才共享组件
+```
+
+### 原型设计参考
+
+**来源**: [docs/小程序原型/rencai.html](../小程序原型/rencai.html)
+
+**原型包含6个完整页面:**
+
+1. **登录页** (原型行115-158)
+   - 身份证号/残疾证号输入框
+   - 密码输入框
+   - 登录按钮
+   - 忘记密码链接
+   - 注册入口
+
+2. **首页/个人主页** (原型行160-301)
+   - 顶部个人信息卡片 (姓名、残疾类型、出勤统计、本月薪资)
+   - 打卡模块 (打卡状态、上班/下班打卡时间、远程打卡按钮)
+   - 功能入口网格 (个人信息、考勤记录、薪资查询、企业信息)
+   - 最新通知列表
+
+3. **考勤记录页** (原型行303-481)
+   - 月份选择器
+   - 考勤统计卡片 (出勤率、正常出勤天数、迟到/早退/缺勤次数)
+   - 考勤日历视图 (标记已打卡日期)
+   - 打卡明细列表 (按日期倒序)
+
+4. **个人信息页** (原型行483-628)
+   - 顶部个人信息摘要
+   - 基本信息列表 (姓名、性别、年龄、身份证号、残疾证号、残疾类型、联系电话、联系地址)
+   - 银行卡信息列表 (银行名称、卡号脱敏、卡类型、是否默认)
+   - 证件照片网格 (身份证、残疾证、体检报告、征信报告)
+
+5. **就业信息页** (原型行630-768)
+   - 当前就业状态卡片 (企业名称、岗位名称、入职日期、工作状态、订单编号、薪资水平)
+   - 薪资记录列表 (按月份查询)
+   - 就业历史时间线 (按时间倒序)
+
+6. **设置页** (原型行770-906)
+   - 个人信息摘要 (姓名、残疾类型、出勤统计、本月薪资)
+   - 功能入口列表 (修改个人信息、账号与安全、消息通知设置)
+   - 帮助与支持入口 (帮助中心、用户协议、隐私政策)
+   - 退出登录按钮
+
+**移动端设计规范:**
+- 宽度参考: 375px
+- 状态栏高度: 44px
+- 底部导航高度: 60px
+- 圆角规范: 12px (卡片)、40px (移动框架)
+- 颜色主题: 蓝色渐变 (#3b82f6 → #1e40af)
+- 字体规范: 标题18-24px, 正文14px, 小字12px
+
+### 史诗015 API集成要点
+
+**来源**: [docs/prd/epic-015-talent-mini-program-api-support.md](../prd/epic-015-talent-mini-program-api-support.md)
+
+**API路径约定:**
+所有人才小程序API使用 `api/v1/rencai` 前缀:
+- 人才用户登录: `POST /api/v1/rencai/auth/login`
+- 人才个人信息: `GET /api/v1/rencai/personal/info`
+- 银行卡信息查询: `GET /api/v1/rencai/personal/bank-cards`
+- 证件照片查询: `GET /api/v1/rencai/personal/photos`
+- 考勤记录查询: `GET /api/v1/rencai/attendance/records` (P2延期,前端模拟)
+- 就业信息查询: `GET /api/v1/rencai/employment/info`
+- 薪资记录查询: `GET /api/v1/rencai/salary/records`
+- 就业历史查询: `GET /api/v1/rencai/employment/history`
+
+**已完成的API (可直接集成):**
+- ✅ 人才用户认证API (故事015-02)
+- ✅ 个人信息查询API (故事015-03)
+
+**进行中的API (后续集成):**
+- ⚠️ 就业信息API (故事015-05)
+- ⚠️ 帮助与支持API (故事015-06)
+- ⚠️ 通知与消息API (故事015-07)
+
+**只读设计原则:**
+遵循与用人方小程序相同的设计原则,人才小程序API以查询功能为主。所有数据修改操作由管理员在管理后台统一处理。人才用户仅有的写入操作包括: 登录认证、通知标记已读。
+
+### 测试策略
+
+**来源**: [architecture/testing-strategy.md](../architecture/testing-strategy.md)
+
+**测试框架选择:**
+- **mini项目使用Jest** (不是Vitest!)
+- 测试命令: `pnpm test` (在mini目录下运行)
+- 测试配置: `jest.config.js`
+
+**测试文件位置:**
+```
+mini-ui-packages/<package-name>/
+└── tests/
+    ├── unit/              # 单元测试
+    │   └── *.test.tsx
+    └── integration/       # 集成测试
+        └── *.test.tsx
+```
+
+**测试要求:**
+1. 为每个UI包编写基础测试,验证包结构正确性
+2. 测试API客户端的导入和导出
+3. 测试页面组件的导入路径
+4. 验证mini-talent项目现有功能不受影响
+5. 运行`pnpm typecheck`确保类型检查通过
+
+**Mock响应工具函数 (参考):**
+```typescript
+const createMockResponse = (status: number, data?: any) => ({
+  status,
+  ok: status >= 200 && status < 300,
+  body: null,
+  bodyUsed: false,
+  statusText: status === 200 ? 'OK' : 'Error',
+  headers: new Headers(),
+  url: '',
+  redirected: false,
+  type: 'basic' as ResponseType,
+  json: async () => data || {},
+  text: async () => '',
+  blob: async () => new Blob(),
+  arrayBuffer: async () => new ArrayBuffer(0),
+  formData: async () => new FormData(),
+  clone: function() { return this; }
+})
+```
+
+### 编码标准
+
+**来源**: [architecture/coding-standards.md](../architecture/coding-standards.md)
+
+**关键编码规范:**
+
+#### 1. 必须遵循UI包开发规范
+开发UI包时,**必须**参考并遵循[UI包开发规范](../architecture/ui-package-standards.md),该规范基于史诗008(AllIn UI模块移植)的经验总结。
+
+#### 2. 关键检查点 (基于史诗008经验)
+- **API路径映射验证**: 开发前必须验证故事中的API路径映射与实际后端路由定义的一致性
+- **类型推断最佳实践**: 必须使用RPC推断类型,而不是直接导入schema类型
+- **测试选择器优化**: 必须为关键交互元素添加`data-testid`属性
+- **表单组件模式**: 必须使用条件渲染两个独立的Form组件
+- **API调用一致性**: 必须根据实际路由名称修正API调用
+
+#### 3. 常见错误避免
+- ❌ 不要直接导入schema类型 (可能导致Date/string类型不匹配)
+- ❌ 不要使用`getByText()`查找可能重复的文本元素
+- ❌ 不要在单个Form组件上动态切换props
+- ❌ 不要使用故事中描述但实际不存在的路由名称
+
+#### 4. 参考实现
+- **用人方仪表板UI包**: `mini-ui-packages/yongren-dashboard-ui`
+  - 组件: `src/pages/Dashboard/Dashboard.tsx`
+  - API客户端: `src/api/enterpriseCompanyClient.ts`
+  - 类型定义: `src/types/index.ts`
+  - package.json exports配置
+
+### 数据模型参考
+
+**来源**: [architecture/data-model-schema-changes.md](../architecture/data-model-schema-changes.md)
+
+**相关数据表 (基于allin数据库):**
+- `users2` - 用户表 (已扩展支持talent用户类型)
+- `disabled_person` - 残疾人信息表
+- `disabled_bank_card` - 银行卡信息表
+- `disabled_person_photo` - 证件照片表
+- `employment_order` - 就业订单表
+- `order_person` - 订单人员关联表
+
+**数据库schema扩展 (故事015-01已完成):**
+- `users2`表新增`talent`用户类型
+- `users2`表新增`person_id`字段 (外键引用`disabled_person.person_id`)
+
+### 技术约束
+
+1. **向后兼容**: 不影响现有mini-talent项目功能
+2. **类型安全**: 使用TypeScript严格模式,所有API调用必须有类型定义
+3. **模块独立性**: 每个UI包独立管理自己的API客户端和类型定义
+4. **测试覆盖**: 所有新增代码必须有测试覆盖
+5. **代码规范**: 遵循项目编码标准和UI包开发规范
+
+### 风险和缓解措施
+
+**主要风险:**
+1. **API集成风险**: 史诗015的API可能尚未全部完成,需要并行开发
+2. **UI组件复用风险**: rencai系列UI包可能与现有yongren系列UI包存在差异
+3. **兼容性风险**: 不同小程序平台可能存在兼容性问题
+
+**缓解措施:**
+1. **分阶段集成**: 先集成已完成的API (人才用户认证、个人信息查询)
+2. **UI组件规范统一**: 参照yongren系列UI包的结构和命名规范
+3. **类型安全**: 使用RPC推断类型,避免类型不匹配问题
+4. **测试驱动**: 编写完整的测试,确保功能正确性
+
+## 变更日志
+
+| 日期 | 版本 | 描述 | 作者 |
+|------|------|------|------|
+| 2025-12-25 | 1.0 | 创建故事文档 | Bob (Scrum Master) |
+
+## 开发者记录
+
+*此部分由开发代理在实施过程中填写*
+
+### 使用的代理模型
+
+待填写
+
+### 调试日志引用
+
+待填写
+
+### 完成说明列表
+
+待填写
+
+### 文件列表
+
+待填写
+
+## 故事草稿检查清单结果
+
+**执行日期**: 2025-12-25
+**执行者**: Bob (Scrum Master)
+
+### 验证结果
+
+| 类别 | 状态 | 问题 |
+|------|------|------|
+| 1. 目标与上下文清晰度 | PASS | - |
+| 2. 技术实现指导 | PASS | - |
+| 3. 参考文档有效性 | PASS | - |
+| 4. 自包含性评估 | PASS | - |
+| 5. 测试指导 | PASS | - |
+
+### 详细检查结果
+
+#### 1. 目标与上下文清晰度 ✅ PASS
+- ✅ 故事目标/目的清晰陈述: 搭建rencai系列mini ui包的基础框架
+- ✅ 与史诗目标的关系明确: 史诗017人才小程序功能实现的基础故事
+- ✅ 在整体系统流程中的位置已解释: 参照史诗011成功模式,建立技术基础
+- ✅ 对前置故事的依赖已识别: 依赖史诗015已完成的API模块
+- ✅ 业务上下文和价值清晰: 为残疾人用户提供完整的人才小程序功能
+
+#### 2. 技术实现指导 ✅ PASS
+- ✅ 关键文件已识别:
+  - 7个UI包的目录结构
+  - package.json配置文件
+  - API客户端文件 (src/api/index.ts)
+  - 页面组件文件结构
+- ✅ 所需技术已明确指定:
+  - TypeScript, React, Taro, Hono RPC, Tailwind CSS
+  - Jest测试框架 (mini项目使用Jest,不是Vitest)
+- ✅ 关键API和接口已充分描述:
+  - API路径约定 (`/api/v1/rencai` 前缀)
+  - RPC客户端实现模式 (包含完整示例代码)
+  - package.json exports配置规范 (包含完整示例)
+- ✅ 必要的数据模型或结构已引用:
+  - 史诗015的API模块
+  - 原型设计文档
+  - 数据库表结构
+- ✅ 环境变量已列出 (不适用,使用默认配置)
+- ✅ 标准编码模式的例外已注明:
+  - mini项目使用Jest而非Vitest
+  - 页面组件导出路径的完整格式
+  - 类型推断必须使用RPC推断类型
+
+#### 3. 参考文档有效性 ✅ PASS
+- ✅ 外部文档引用指向特定相关部分:
+  - [architecture/tech-stack.md](../architecture/tech-stack.md)
+  - [architecture/ui-package-standards.md](../architecture/ui-package-standards.md)
+  - [architecture/source-tree.md](../architecture/source-tree.md)
+  - [architecture/testing-strategy.md](../architecture/testing-strategy.md)
+  - [architecture/coding-standards.md](../architecture/coding-standards.md)
+  - [architecture/data-model-schema-changes.md](../architecture/data-model-schema-changes.md)
+  - [docs/prd/epic-015-talent-mini-program-api-support.md](../prd/epic-015-talent-mini-program-api-support.md)
+  - [docs/小程序原型/rencai.html](../小程序原型/rencai.html)
+- ✅ 前置故事的关键信息已总结:
+  - 史诗015完成状态 (38%,3/8核心故事完成)
+  - 史诗016完成状态 (mini-charts图表组件包完成)
+  - 史诗011成功模式参考 (用人方小程序)
+- ✅ 提供了参考文档相关性的上下文:
+  - 每个引用都说明了来源和用途
+  - 原型设计包含完整的6个页面详细描述
+- ✅ 引用格式一致: 使用统一的Markdown链接格式
+
+#### 4. 自包含性评估 ✅ PASS
+- ✅ 核心信息包含在故事中:
+  - 完整的UI包结构规范
+  - 详细的package.json配置示例
+  - 完整的RPC客户端实现代码
+  - 原型设计的详细描述 (包含行号引用)
+  - 史诗015 API集成要点总结
+- ✅ 隐含假设已明确:
+  - 史诗015的API可能尚未全部完成,需要并行开发
+  - 考勤记录API为P2延期功能,当前为前端模拟实现
+- ✅ 领域特定术语已解释:
+  - RPC客户端模式
+  - API客户端管理器
+  - 页面组件导出路径
+  - 类型推断最佳实践
+- ✅ 边界情况或错误场景已处理:
+  - 风险和缓解措施章节
+  - 史诗015 API延期情况的处理策略
+
+#### 5. 测试指导 ✅ PASS
+- ✅ 测试方法已概述:
+  - 单元测试 (Jest)
+  - 集成测试
+  - 类型检查 (pnpm typecheck)
+- ✅ 关键测试场景已识别:
+  - UI包结构正确性验证
+  - API客户端导入导出测试
+  - 页面组件导入路径测试
+  - 现有功能回归测试
+- ✅ 成功标准已定义:
+  - 7个UI包基础结构创建完成
+  - package.json exports配置正确
+  - API客户端集成完成
+  - 路由结构配置完成
+  - 基础布局组件可用
+  - 认证框架就绪
+  - 现有功能不受影响
+  - 类型检查通过
+- ✅ 特殊测试考虑已注明:
+  - mini项目使用Jest而非Vitest
+  - Mock响应工具函数示例
+  - 测试文件位置规范
+
+### 最终评估
+
+**故事准备状态**: ✅ **READY**
+
+**清晰度评分**: **9/10**
+
+**主要优点**:
+1. **上下文完整**: 提供了史诗015完成状态、原型设计、技术规范的完整上下文
+2. **技术指导详细**: 包含完整的代码示例 (package.json配置、RPC客户端实现、类型推断示例)
+3. **参考文档精确**: 所有引用都指向具体的文档章节,并提供了详细的行号引用
+4. **风险缓解充分**: 明确识别了API集成风险,并提供了分阶段集成策略
+5. **测试指导清晰**: 明确了测试框架选择 (Jest),并提供了具体的测试场景
+
+**建议改进**:
+1. 考虑在任务2中明确说明每个UI包具体需要创建的文件清单 (当前已足够详细,非必需)
+2. 可以在任务4中添加史诗015 API路由的具体导入路径示例 (当前已有足够指导,非必需)
+
+**开发者视角**:
+- ✅ 可以根据当前故事文档实施
+- ✅ 所有关键技术决策已明确 (测试框架选择、API客户端模式、类型推断方法)
+- ✅ 参考实现已提供 (yongren-dashboard-ui)
+- ✅ 原型设计详细描述提供了完整的UI指导
+- ✅ 可能的疑问: 史诗015的具体API路由导入路径 (可通过查看史诗015文档解决,非阻塞)
+
+**结论**: 故事提供了充分的实施上下文,开发者可以基于此文档成功实施UI包基础框架搭建工作。
+
+## QA结果
+
+*此部分由QA代理在审查完成后填写*