011.002.story.md 8.6 KB
故事 011.002：认证与首页实现
状态
Draft
故事
作为企业用户， 我希望通过手机号密码登录小程序并查看企业概览数据， 以便快速了解公司残疾人就业管理情况。
验收标准
- 登录页面功能完整，支持企业用户手机号密码登录
- 登录状态管理正常，token存储和验证可靠
- 首页/看板页面展示企业概览数据（在职人员统计、分配人才列表等）
- 页面设计符合原型标准，移动端体验良好
- 与基础框架（故事011.001）无缝集成
任务 / 子任务
- 任务1：实现登录页面（AC：1,2）
- 创建登录页面组件，包含手机号、密码输入框
- 集成史诗012提供的企业用户认证API
- 实现表单验证（手机号格式、密码强度）
- 添加登录错误处理和加载状态
- 实现登录成功后的token存储和状态更新
- 任务2：完善认证状态管理（AC：2）
- 基于故事011.001的认证框架，完善状态管理
- 实现自动token刷新机制
- 添加登录状态检查中间件
- 实现登出功能
- 任务3：实现首页/看板页面（AC：3,4）
- 创建首页页面组件，使用基础布局组件
- 集成企业统计API（史诗012提供）
- 实现数据卡片组件：在职人员统计、待分配人才数、本月订单数等
- 实现分配人才列表组件（近期分配的人才信息）
- 添加数据刷新和加载状态
- 任务4：优化用户体验（AC：4）
- 参考原型设计：
docs/小程序原型/yongren.html - 确保移动端响应式设计和交互友好
- 添加页面过渡动画和加载提示
- 优化表单输入体验
- 参考原型设计：
- 任务5：编写集成测试（AC：5）
- 编写登录流程集成测试
- 编写首页数据展示测试
- 测试认证状态管理
- 验证与基础框架的集成
开发笔记
依赖关系
依赖故事011.001（基础框架搭建）：
- 需要故事011.001完成后才能开始本故事
- 将使用故事011.001提供的：API客户端、路由配置、基础布局组件、认证框架
API规范
企业用户认证API（史诗012提供）：
- 企业用户手机号密码登录接口
- 企业用户token验证接口
- 用户信息获取接口
企业统计API（史诗012提供）：
- 企业概览数据接口（在职人员统计、待分配人才等）
- 实时数据更新接口
技术集成：
- 使用故事011.001集成的RPC客户端
- 遵循现有
mini/src/api.ts的RPC客户端模式 - API路径前缀：
api/v1/yongren
组件规范
登录页面设计规范：
必须严格对照原型文件 docs/小程序原型/yongren.html 第218-260行的登录页面设计实现：
页面结构：
- 注意：小程序环境中状态栏由宿主提供，无需自行实现
- 内容区域：
h-full flex flex-col justify-center p-8
Logo区域（第232-235行）：
- 标题：
<h1 class="text-2xl font-bold text-gray-800 mb-2">残疾人就业平台</h1> - 副标题：
<p class="text-gray-600">为人力资源公司提供专业服务</p> - 布局：
text-center mb-10
表单区域（第237-246行）：
- 表单容器：
mb-6 - 输入框容器：
flex items-center border border-gray-300 rounded-lg px-4 py-3 mb-4 - 手机号输入框：图标
<i class="fas fa-phone text-gray-400 mr-3"></i>，输入框<input type="tel" placeholder="请输入手机号" class="w-full outline-none"> - 密码输入框：图标
<i class="fas fa-lock text-gray-400 mr-3"></i>，输入框<input type="password" placeholder="请输入密码" class="w-full outline-none">
登录按钮（第248行）：
<button class="gradient-bg text-white w-full py-3 rounded-lg font-medium mb-4">登录</button>- 使用渐变背景（见基础样式规范）
辅助链接（第250-256行）：
- 忘记密码：
<a href="#" class="text-sm text-blue-500">忘记密码？</a>，布局text-center - 协议提示：
<div class="mt-12 text-center text-gray-500 text-sm"> - 协议链接：
<span class="text-blue-500">《用户协议》</span>和<span class="text-blue-500">《隐私政策》</span>
首页/看板页面设计规范：
必须严格对照原型文件 docs/小程序原型/yongren.html 第261-418行的首页设计实现：
页面结构：
- 注意：小程序环境中状态栏由宿主提供，无需自行实现
- 内容区域：
h-[calc(100%-60px)] overflow-y-auto p-4（仅减去底部导航60px） - 底部导航：使用基础布局组件的底部导航，首页标签激活状态
顶部信息栏（第276-300行）：
- 容器：
gradient-bg text-white rounded-2xl p-5 mb-4 - 企业信息区域：
flex justify-between items-center- 左侧：欢迎文案
<p class="text-sm opacity-80">欢迎回来</p>，企业名称<h2 class="text-xl font-bold">阿里巴巴集团</h2> - 右侧：企业图标
<div class="w-12 h-12 rounded-full bg-white/20 flex items-center justify-center"><i class="fas fa-building text-white text-xl"></i></div>
- 左侧：欢迎文案
- 统计卡片区域：
mt-4 flex justify-between，三个卡片横向排列- 每个卡片：
text-center，数字<p class="text-2xl font-bold">24</p>，标签<p class="text-xs opacity-80">在职人员</p>
- 每个卡片：
快速操作网格（第303-320行）：
- 容器：
grid grid-cols-4 gap-3 mb-4 - 操作卡片：
bg-blue-50 rounded-xl p-3 text-center（四种颜色：blue-50, green-50, purple-50, yellow-50） - 图标：
fas fa-user-friends text-blue-500 text-lg mb-1（对应操作） - 文字：
text-xs text-gray-700
人才列表区域（第323-376行）：
- 标题区域：
flex justify-between items-center mb-3，标题<h3 class="font-semibold text-gray-700">分配人才</h3>，链接<a href="#" class="text-xs text-blue-500">查看全部</a> - 人才卡片容器：
space-y-3 - 人才卡片：
person-card card bg-white p-4 flex items-center- 头像区域：
name-avatar blue（颜色类：blue, green, purple, orange），显示姓氏 - 信息区域：
flex-1 - 顶部：
flex justify-between items-start- 姓名：
<h4 class="font-semibold text-gray-800">张明</h4> - 残疾信息：
<p class="text-xs text-gray-500">肢体残疾 · 三级</p> - 状态标签：
<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">在职</span>
- 姓名：
- 底部：
mt-2- 信息行：
flex justify-between text-xs text-gray-500 mb-1，显示入职时间、薪资 - 进度条：使用
.progress-bar和.progress-fill样式
- 信息行：
- 头像区域：
数据统计卡片（第379-394行）：
- 标题：
<h3 class="font-semibold text-gray-700 mb-3">数据统计</h3> - 网格：
grid grid-cols-2 gap-3 - 统计卡片：
stat-card（见基础样式规范）- 左侧卡片：包含脉冲点
.pulse-dot，标签<p class="text-sm text-gray-600">在职率</p>，数值<p class="text-2xl font-bold text-gray-800">92%</p> - 右侧卡片：标签
<p class="text-sm text-gray-600 mb-2">平均薪资</p>，数值<p class="text-2xl font-bold text-gray-800">¥4,650</p>
- 左侧卡片：包含脉冲点
UI组件使用：
- 复用史诗008移植的
@d8d/allin-*系列UI组件包 - 使用基础表单组件、卡片组件、表格组件
- 遵循UI包开发规范 [来源：docs/architecture/coding-standards.md#ui包开发提示]
文件位置
页面组件位置：
mini/src/pages/yongren/login/- 登录页面组件mini/src/pages/yongren/dashboard/- 首页/看板页面组件
状态管理位置：
mini/src/stores/auth.ts- 认证状态管理mini/src/hooks/useAuth.ts- 认证相关hooks
技术约束
- 安全性：密码传输需加密，token存储安全
- 性能：首页数据加载需快速，使用缓存策略
- 错误处理：网络错误、认证失败等场景需友好提示
- 兼容性：与现有mini项目登录页面（普通用户登录）不冲突
测试要求
测试框架：Jest + Testing Library 关键测试场景：
- 登录功能测试：
- 正常登录流程
- 错误手机号格式
- 错误密码
- 网络异常
- 首页功能测试：
- 数据加载和展示
- 数据刷新
- 空状态处理
- 集成测试：
- 从登录到首页的完整流程
- 认证状态持久化
- 与故事011.001组件的集成
变更日志
| 日期 | 版本 | 描述 | 作者 |
|---|---|---|---|
| 2025-12-17 | 1.0 | 初始创建（拆分后的认证与首页故事） | Bob（Scrum Master） |
开发代理记录
此部分由开发代理在实施过程中填充
QA结果
来自QA代理对已完成故事实施的QA审查结果