|
|
@@ -0,0 +1,347 @@
|
|
|
+# 故事017.012: 统一Navbar导航栏组件规范
|
|
|
+
|
|
|
+## 元信息
|
|
|
+- **史诗**: 017 - 人才小程序功能实现
|
|
|
+- **优先级**: P1 - 用户体验改进
|
|
|
+- **状态**: Approved
|
|
|
+- **创建日期**: 2025-12-26
|
|
|
+- **负责人**: 开发团队
|
|
|
+
|
|
|
+## 故事描述
|
|
|
+
|
|
|
+**作为** 人才小程序开发者,
|
|
|
+**我想要** 统一所有页面的Navbar导航栏组件使用规范,
|
|
|
+**以便** 建立清晰的页面层级结构，TabBar页面无返回按钮，非TabBar页面带返回按钮，提供一致的用户体验。
|
|
|
+
|
|
|
+### 背景
|
|
|
+
|
|
|
+**原型设计分析:**
|
|
|
+根据`docs/小程序原型/rencai.html`原型设计，人才小程序包含6个页面：
|
|
|
+- **登录页** (行115-158): 全屏页面，无导航栏
|
|
|
+- **首页/个人主页** (行160-301): TabBar页面，底部导航"首页"
|
|
|
+- **考勤记录页** (行303-481): TabBar页面，底部导航"考勤"
|
|
|
+- **个人信息页** (行483-628): TabBar页面，底部导航"我的"
|
|
|
+- **就业信息页** (行630-768): 非TabBar页面，从首页"薪资查询"跳转
|
|
|
+- **设置页** (行770-906): TabBar页面，底部导航"更多"
|
|
|
+
|
|
|
+**TabBar配置验证:**
|
|
|
+`mini-talent/src/app.config.ts`中配置了4个TabBar页面：
|
|
|
+```typescript
|
|
|
+tabBar: {
|
|
|
+ list: [
|
|
|
+ { pagePath: 'pages/index/index', text: '首页' },
|
|
|
+ { pagePath: 'pages/attendance/index', text: '考勤' },
|
|
|
+ { pagePath: 'pages/personal-info/index', text: '我的' },
|
|
|
+ { pagePath: 'pages/settings/index', text: '更多' }
|
|
|
+ ]
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+**用人方小程序参考:**
|
|
|
+- TabBar页面(如Dashboard): 使用`leftIcon=""`和`leftText=""`隐藏返回按钮
|
|
|
+- 非TabBar页面(如OrderDetail): 使用`leftIcon="i-heroicons-chevron-left-20-solid"`和`leftText="返回"`
|
|
|
+
|
|
|
+**当前问题:**
|
|
|
+- 首页(Dashboard)未使用Navbar组件，仅有`<View className="h-12" />`空白占位
|
|
|
+- 个人信息页、考勤记录页、就业信息页、设置页均未使用Navbar组件
|
|
|
+- 页面层级结构不清晰，用户体验不一致
|
|
|
+
|
|
|
+### 页面层级划分
|
|
|
+
|
|
|
+**TabBar页面 (一级页面，无返回按钮):**
|
|
|
+1. **首页** (`pages/index/index`) - TabBar"首页"，显示个人概览、打卡状态、快捷功能入口
|
|
|
+2. **考勤记录页** (`pages/attendance/index`) - TabBar"考勤"，显示考勤日历和打卡明细
|
|
|
+3. **个人信息页** (`pages/personal-info/index`) - TabBar"我的"，显示个人基本信息和证件照片
|
|
|
+4. **设置页** (`pages/settings/index`) - TabBar"更多"，显示功能入口和设置选项
|
|
|
+
|
|
|
+**非TabBar页面 (二级页面，带返回按钮):**
|
|
|
+1. **就业信息页** (`pages/employment/index`) - 从首页"薪资查询"入口跳转，显示就业状态和薪资记录
|
|
|
+
|
|
|
+## 验收标准
|
|
|
+
|
|
|
+### TabBar页面导航栏
|
|
|
+- [ ] 首页使用Navbar组件，无返回按钮 (leftIcon="" leftText="")
|
|
|
+- [ ] 考勤记录页使用Navbar组件，无返回按钮
|
|
|
+- [ ] 个人信息页使用Navbar组件，无返回按钮
|
|
|
+- [ ] 设置页使用Navbar组件，无返回按钮
|
|
|
+
|
|
|
+### 非TabBar页面导航栏
|
|
|
+- [ ] 就业信息页使用Navbar组件，带返回按钮 (leftIcon="i-heroicons-chevron-left-20-solid" leftText="返回")
|
|
|
+- [ ] 返回按钮点击正确调用Taro.navigateBack()
|
|
|
+
|
|
|
+### 导航栏样式一致性
|
|
|
+- [ ] 所有页面Navbar固定在顶部 (fixed=true)
|
|
|
+- [ ] 所有页面使用Navbar的placeholder属性，移除手动空白占位
|
|
|
+- [ ] Navbar样式与用人方小程序保持一致 (backgroundColor="bg-white" border=true)
|
|
|
+- [ ] 导航栏标题与页面功能匹配
|
|
|
+
|
|
|
+### 用户体验
|
|
|
+- [ ] TabBar页面切换流畅，无返回按钮避免用户困惑
|
|
|
+- [ ] 非TabBar页面返回按钮位置合理，符合用户习惯
|
|
|
+- [ ] 导航栏不遮挡页面内容，使用placeholder占位
|
|
|
+
|
|
|
+## 任务列表
|
|
|
+
|
|
|
+### 任务1: 更新Dashboard页面 (TabBar页面，无返回按钮)
|
|
|
+- [ ] 1.1 在`@d8d/rencai-dashboard-ui/src/pages/Dashboard/Dashboard.tsx`中导入Navbar组件
|
|
|
+ ```typescript
|
|
|
+ import { Navbar } from '@d8d/mini-shared-ui-components/components/navbar'
|
|
|
+ ```
|
|
|
+- [ ] 1.2 在ScrollView前添加Navbar组件，配置为TabBar页面
|
|
|
+ ```typescript
|
|
|
+ <Navbar
|
|
|
+ title="首页"
|
|
|
+ leftIcon=""
|
|
|
+ leftText=""
|
|
|
+ onClickLeft={() => {}}
|
|
|
+ backgroundColor="bg-white"
|
|
|
+ border={true}
|
|
|
+ fixed={true}
|
|
|
+ placeholder={true}
|
|
|
+ />
|
|
|
+ ```
|
|
|
+- [ ] 1.3 移除手动空白占位 `<View className="h-12" />`
|
|
|
+- [ ] 1.4 验证Navbar与TabBarLayout的兼容性
|
|
|
+
|
|
|
+### 任务2: 更新PersonalInfoPage (TabBar页面，无返回按钮)
|
|
|
+- [ ] 2.1 在`@d8d/rencai-personal-info-ui/src/pages/PersonalInfoPage/PersonalInfoPage.tsx`中导入Navbar组件
|
|
|
+- [ ] 2.2 添加Navbar组件，配置为TabBar页面
|
|
|
+ ```typescript
|
|
|
+ <Navbar
|
|
|
+ title="我的"
|
|
|
+ leftIcon=""
|
|
|
+ leftText=""
|
|
|
+ onClickLeft={() => {}}
|
|
|
+ backgroundColor="bg-white"
|
|
|
+ border={true}
|
|
|
+ fixed={true}
|
|
|
+ placeholder={true}
|
|
|
+ />
|
|
|
+ ```
|
|
|
+- [ ] 2.3 移除现有的占位内容，实现完整的个人信息页面功能
|
|
|
+
|
|
|
+### 任务3: 更新AttendancePage (TabBar页面，无返回按钮)
|
|
|
+- [ ] 3.1 在`@d8d/rencai-attendance-ui/src/pages/AttendancePage/AttendancePage.tsx`中导入Navbar组件
|
|
|
+- [ ] 3.2 添加Navbar组件，配置为TabBar页面
|
|
|
+ ```typescript
|
|
|
+ <Navbar
|
|
|
+ title="考勤记录"
|
|
|
+ leftIcon=""
|
|
|
+ leftText=""
|
|
|
+ onClickLeft={() => {}}
|
|
|
+ backgroundColor="bg-white"
|
|
|
+ border={true}
|
|
|
+ fixed={true}
|
|
|
+ placeholder={true}
|
|
|
+ />
|
|
|
+ ```
|
|
|
+- [ ] 3.3 移除现有的占位内容，实现完整的考勤记录页面功能
|
|
|
+
|
|
|
+### 任务4: 更新EmploymentPage (非TabBar页面，带返回按钮)
|
|
|
+- [ ] 4.1 在`@d8d/rencai-employment-ui/src/pages/EmploymentPage/EmploymentPage.tsx`中导入Navbar组件
|
|
|
+- [ ] 4.2 添加Navbar组件，配置为非TabBar页面
|
|
|
+ ```typescript
|
|
|
+ <Navbar
|
|
|
+ title="就业信息"
|
|
|
+ leftIcon="i-heroicons-chevron-left-20-solid"
|
|
|
+ leftText="返回"
|
|
|
+ onClickLeft={() => Taro.navigateBack()}
|
|
|
+ backgroundColor="bg-white"
|
|
|
+ border={true}
|
|
|
+ fixed={true}
|
|
|
+ placeholder={true}
|
|
|
+ />
|
|
|
+ ```
|
|
|
+- [ ] 4.3 移除现有的占位内容，实现完整的就业信息页面功能
|
|
|
+
|
|
|
+### 任务5: 更新SettingsPage (TabBar页面，无返回按钮)
|
|
|
+- [ ] 5.1 在`@d8d/rencai-settings-ui/src/pages/SettingsPage/SettingsPage.tsx`中导入Navbar组件
|
|
|
+- [ ] 5.2 添加Navbar组件，配置为TabBar页面
|
|
|
+ ```typescript
|
|
|
+ <Navbar
|
|
|
+ title="更多"
|
|
|
+ leftIcon=""
|
|
|
+ leftText=""
|
|
|
+ onClickLeft={() => {}}
|
|
|
+ backgroundColor="bg-white"
|
|
|
+ border={true}
|
|
|
+ fixed={true}
|
|
|
+ placeholder={true}
|
|
|
+ />
|
|
|
+ ```
|
|
|
+- [ ] 5.3 移除现有的占位内容，实现完整的设置页面功能
|
|
|
+
|
|
|
+### 任务6: 验证和测试
|
|
|
+- [ ] 6.1 验证所有TabBar页面Navbar无返回按钮，样式一致
|
|
|
+- [ ] 6.2 验证非TabBar页面Navbar带返回按钮，功能正常
|
|
|
+- [ ] 6.3 验证Navbar与TabBarLayout的兼容性，无样式冲突
|
|
|
+- [ ] 6.4 验证返回按钮在不同层级页面间导航的正确性
|
|
|
+- [ ] 6.5 编写测试，验证Navbar组件在各页面中的正确显示和交互
|
|
|
+
|
|
|
+## 开发者笔记
|
|
|
+
|
|
|
+### 前置故事见解
|
|
|
+
|
|
|
+**故事017.002完成状态:**
|
|
|
+- ✅ Dashboard页面已创建，但未使用Navbar组件
|
|
|
+- ✅ TabBarLayout已集成，底部导航正常工作
|
|
|
+- ✅ 快捷功能入口已实现，包括跳转到就业信息页
|
|
|
+- ⚠️ 所有页面均未使用Navbar组件，需要统一规范
|
|
|
+
|
|
|
+**Navbar组件来源:**
|
|
|
+- 包路径: `@d8d/mini-shared-ui-components/components/navbar`
|
|
|
+- 组件导出: `export { Navbar }` 和 `export default`
|
|
|
+- Props接口: `NavbarProps`，包含title、leftIcon、leftText、backgroundColor等属性
|
|
|
+
|
|
|
+### 技术实现要点
|
|
|
+
|
|
|
+**1. Navbar组件导入方式:**
|
|
|
+```typescript
|
|
|
+// 方式1: 命名导入
|
|
|
+import { Navbar } from '@d8d/mini-shared-ui-components/components/navbar'
|
|
|
+
|
|
|
+// 方式2: 默认导入
|
|
|
+import Navbar from '@d8d/mini-shared-ui-components/components/navbar'
|
|
|
+```
|
|
|
+
|
|
|
+**2. TabBar页面配置:**
|
|
|
+```typescript
|
|
|
+<Navbar
|
|
|
+ title="首页"
|
|
|
+ leftIcon=""
|
|
|
+ leftText=""
|
|
|
+ onClickLeft={() => {}} // 空函数，避免警告
|
|
|
+ backgroundColor="bg-white"
|
|
|
+ border={true}
|
|
|
+ fixed={true}
|
|
|
+ placeholder={true}
|
|
|
+/>
|
|
|
+```
|
|
|
+
|
|
|
+**3. 非TabBar页面配置:**
|
|
|
+```typescript
|
|
|
+<Navbar
|
|
|
+ title="就业信息"
|
|
|
+ leftIcon="i-heroicons-chevron-left-20-solid"
|
|
|
+ leftText="返回"
|
|
|
+ onClickLeft={() => Taro.navigateBack()}
|
|
|
+ backgroundColor="bg-white"
|
|
|
+ border={true}
|
|
|
+ fixed={true}
|
|
|
+ placeholder={true}
|
|
|
+/>
|
|
|
+```
|
|
|
+
|
|
|
+**4. 与TabBarLayout的集成:**
|
|
|
+```typescript
|
|
|
+return (
|
|
|
+ <RencaiTabBarLayout activeKey="index">
|
|
|
+ <ScrollView className="h-[calc(100%-60px)] overflow-y-auto" scrollY>
|
|
|
+ <Navbar title="首页" leftIcon="" leftText="" onClickLeft={() => {}} />
|
|
|
+ {/* 页面内容 */}
|
|
|
+ </ScrollView>
|
|
|
+ </RencaiTabBarLayout>
|
|
|
+)
|
|
|
+```
|
|
|
+
|
|
|
+### 参考实现
|
|
|
+
|
|
|
+**用人方Dashboard (TabBar页面):**
|
|
|
+```typescript
|
|
|
+// mini-ui-packages/yongren-dashboard-ui/src/pages/Dashboard/Dashboard.tsx:139-148
|
|
|
+<Navbar
|
|
|
+ title="企业仪表板"
|
|
|
+ leftIcon=""
|
|
|
+ leftText=""
|
|
|
+ onClickLeft={() => {}}
|
|
|
+ backgroundColor="bg-white"
|
|
|
+ border={true}
|
|
|
+ fixed={true}
|
|
|
+ placeholder={true}
|
|
|
+/>
|
|
|
+```
|
|
|
+
|
|
|
+**用人方OrderDetail (非TabBar页面):**
|
|
|
+```typescript
|
|
|
+// mini-ui-packages/yongren-order-management-ui/src/pages/OrderDetail/OrderDetail.tsx:580-589
|
|
|
+<Navbar
|
|
|
+ title="订单详情"
|
|
|
+ leftIcon="i-heroicons-chevron-left-20-solid"
|
|
|
+ leftText="返回"
|
|
|
+ backgroundColor="bg-white"
|
|
|
+ border={true}
|
|
|
+ fixed={true}
|
|
|
+ placeholder={true}
|
|
|
+ onClickLeft={() => console.log('返回')}
|
|
|
+/>
|
|
|
+```
|
|
|
+
|
|
|
+### 常见问题
|
|
|
+
|
|
|
+**Q1: TabBar页面需要返回按钮吗?**
|
|
|
+A: 不需要。TabBar页面是小程序的顶级页面，用户通过底部TabBar切换，返回按钮会造成用户困惑。
|
|
|
+
|
|
|
+**Q2: 如何判断一个页面是否是TabBar页面?**
|
|
|
+A: 检查`mini-talent/src/app.config.ts`中的`tabBar.list`配置，如果在list中就是TabBar页面。
|
|
|
+
|
|
|
+**Q3: Navbar的placeholder属性有什么作用?**
|
|
|
+A: 在fixed=true时，placeholder会在Navbar位置创建一个占位元素，避免页面内容被遮挡。
|
|
|
+
|
|
|
+**Q4: 为什么onClickLeft要传空函数而不是undefined?**
|
|
|
+A: 避免React警告，即使不使用onClickLeft，也应该传一个空函数。
|
|
|
+
|
|
|
+## 测试
|
|
|
+
|
|
|
+### 测试框架和模式
|
|
|
+
|
|
|
+**测试框架:** Jest (mini项目使用Jest)
|
|
|
+
|
|
|
+### 测试要求
|
|
|
+
|
|
|
+1. **组件渲染测试**:
|
|
|
+ - 测试Navbar组件在TabBar页面正确渲染
|
|
|
+ - 测试Navbar组件在非TabBar页面正确渲染
|
|
|
+ - 测试返回按钮在非TabBar页面显示
|
|
|
+
|
|
|
+2. **交互测试**:
|
|
|
+ - 测试返回按钮点击调用Taro.navigateBack()
|
|
|
+ - 测试TabBar页面无返回按钮，点击无响应
|
|
|
+
|
|
|
+3. **样式测试**:
|
|
|
+ - 测试Navbar固定在顶部
|
|
|
+ - 测试placeholder正确占位
|
|
|
+ - 测试边框和背景色正确应用
|
|
|
+
|
|
|
+4. **集成测试**:
|
|
|
+ - 测试Navbar与TabBarLayout的兼容性
|
|
|
+ - 测试页面导航流程正确
|
|
|
+
|
|
|
+## 变更日志
|
|
|
+
|
|
|
+| 日期 | 版本 | 描述 | 作者 |
|
|
|
+|------|------|------|------|
|
|
|
+| 2025-12-26 | 1.0 | 创建故事文档 | Bob (Scrum Master) |
|
|
|
+
|
|
|
+## 开发者记录
|
|
|
+
|
|
|
+*此部分由开发代理在实施过程中填写*
|
|
|
+
|
|
|
+### 使用的代理模型
|
|
|
+
|
|
|
+Claude Sonnet (claude-sonnet-4-20250514)
|
|
|
+
|
|
|
+### 调试日志引用
|
|
|
+
|
|
|
+待实施时填写
|
|
|
+
|
|
|
+### 完成说明列表
|
|
|
+
|
|
|
+待实施时填写
|
|
|
+
|
|
|
+### 文件列表
|
|
|
+
|
|
|
+待实施时填写
|
|
|
+
|
|
|
+## QA结果
|
|
|
+
|
|
|
+*此部分由QA代理在审查完成后填写*
|
yourname