# 故事 011.006：视频与系统管理功能实现

## 状态
Draft

## 故事
**作为**企业用户，
**我希望**管理企业相关的视频资料和查看企业基本信息，
**以便**进行资料归档和账户管理。

## 验收标准

1. [ ] 视频查看下载页功能完整，支持企业维度和个人维度的视频管理
2. [ ] 视频支持播放、下载、分享、批量下载功能
3. [ ] 企业设置页面基础功能可用（企业信息展示）
4. [ ] 账号管理、安全设置等高级功能标记为"后期优化"（因系统设置API延期）
5. [ ] 页面设计符合原型标准，与系统其他部分无缝集成

## 任务 / 子任务

- [ ] 任务1：实现视频查看下载页面（AC：1）
  - [ ] 创建视频管理页面组件，使用基础布局组件
  - [ ] 集成视频管理API（史诗012提供）
  - [ ] 实现视频列表展示（缩略图、标题、类型、大小、上传时间等）
  - [ ] 支持企业维度和个人维度的视频筛选
  - [ ] 添加视频分类和标签功能
- [ ] 任务2：实现视频操作功能（AC：2）
  - [ ] 实现视频播放功能（内置播放器或调用系统播放器）
  - [ ] 实现视频下载功能（单个下载）
  - [ ] 实现视频分享功能（生成分享链接）
  - [ ] 实现批量视频选择和多选下载
  - [ ] 添加视频搜索和筛选功能
- [ ] 任务3：实现企业设置页面基础功能（AC：3,4）
  - [ ] 创建企业设置页面组件
  - [ ] 集成企业管理API（company模块）获取企业信息
  - [ ] 展示企业基本信息（公司名称、统一社会信用代码、联系人、电话等）
  - [ ] 实现企业信息编辑功能（如有权限）
  - [ ] 添加"账号管理"、"安全设置"等功能的占位界面，标注"后期优化"
- [ ] 任务4：优化视频管理用户体验（AC：5）
  - [ ] 参考原型设计：`docs/小程序原型/yongren.html`中的视频管理页面
  - [ ] 实现视频缩略图生成和缓存
  - [ ] 优化大视频文件的加载和播放体验
  - [ ] 添加视频上传进度显示
  - [ ] 确保移动端视频播放兼容性
- [ ] 任务5：处理系统设置API延期（AC：4）
  - [ ] 识别受系统设置API延期影响的功能
  - [ ] 实现降级方案（如本地配置、默认值）
  - [ ] 添加功能不可用的友好提示
  - [ ] 标记延期功能为"后期优化"状态
- [ ] 任务6：集成Navbar导航栏组件（页面层级结构规范）
  - [ ] 视频管理页：集成Navbar组件，标题"视频管理"，隐藏左侧返回按钮（主页面配置）
    - 导入Navbar组件：`import { Navbar } from '@d8d/mini-shared-ui-components/components/navbar'`
    - 配置navbar：`title="视频管理"`，`leftIcon=""`，`leftText=""`
    - 保持YongrenTabBarLayout包裹，`activeTab="settings"`（视频管理在企业设置页面内）
    - 调整ScrollView布局：`px-4 pb-4 pt-0`（移除顶部内边距适配navbar占位）
  - [ ] 企业设置页：集成Navbar组件，标题"企业设置"，隐藏左侧返回按钮（主页面配置）
    - 导入Navbar组件，配置：`title="企业设置"`，`leftIcon=""`，`leftText=""`
    - 保持YongrenTabBarLayout包裹，`activeTab="settings"`
    - 调整ScrollView布局：`px-4 pb-4 pt-0`（移除顶部内边距适配navbar占位）
  - [ ] 统一页面层级结构：主页面使用YongrenTabBarLayout+Navbar（无返回）
  - [ ] 验证类型检查：确保所有页面类型检查通过
- [ ] 任务7：编写集成测试
  - [ ] 编写视频管理功能测试
  - [ ] 测试批量下载功能
  - [ ] 测试企业信息展示功能
  - [ ] 验证延期功能的处理方式

## 开发笔记

### 依赖关系
**依赖故事**：
- 011.001（基础框架搭建）：提供API客户端、路由、基础布局、企业认证框架
- 011.002（认证与首页）：提供认证状态管理，Navbar组件集成规范
- 011.004（订单管理）：视频与订单关联，可能需要订单筛选，Navbar集成和页面结构规范

**API依赖状态**：
- ✅ 视频管理API：史诗012已提供 [来源：docs/prd/epic-011-employer-mini-program-implementation.md#史诗012完成状态更新]
- ✅ 企业管理API：company模块已移植
- ⚠️ 系统设置API：史诗012延期（P2优先级）[来源：docs/prd/epic-011-employer-mini-program-implementation.md#史诗012完成状态更新]

### API规范
**视频管理API**（史诗012提供）：
- 视频列表查询接口（支持按企业、个人、订单筛选）
- 视频播放地址获取接口
- 视频下载接口
- 视频统计接口
- 批量操作接口

**企业管理API**（company模块）：
- 企业信息查询接口
- 企业信息更新接口（如有权限）

**技术集成**：
- 使用故事011.001集成的RPC客户端
- API路径前缀：`api/v1/yongren`

### 组件规范
**视频管理页设计规范**：
必须严格对照原型文件 `docs/小程序原型/yongren.html` 第1440-1609行（企业维度）和第1610-...行（个人维度）的视频管理页面设计实现：

**页面结构**：
- **注意**：小程序环境中状态栏由宿主提供，无需自行实现
- 内容区域：`h-[calc(100%-60px)] overflow-y-auto`（仅减去底部导航60px）
- 底部导航：设置标签激活状态（视频管理在企业设置页面内）

**顶部信息区域**（第1455-1465行）：
- 容器：`p-4 border-b border-gray-200`
- 内容：`flex items-center justify-between`
  - 左侧：标题 `<h3 class="font-semibold text-gray-800">阿里巴巴2023-11</h3>`，副标题 `<p class="text-sm text-gray-500">企业维度 - 打卡视频管理</p>`
  - 右侧：批量下载按钮 `<button class="text-blue-500 text-sm"><i class="fas fa-download mr-1"></i>批量下载</button>`

**视频分类筛选区域**（第1468-1475行）：
- 容器：`p-4 border-b border-gray-200`
- 筛选标签区域：`flex space-x-2 overflow-x-auto pb-2`
  - 标签样式：`bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full whitespace-nowrap`（激活状态）
  - 非激活标签：`bg-gray-100 text-gray-800 text-xs px-3 py-1 rounded-full whitespace-nowrap`
  - 分类：全部视频、工资视频、个税视频、打卡视频

**视频列表标题区域**（第1479-1489行）：
- 容器：`flex justify-between items-center mb-4`
- 标题：`<h3 class="font-semibold text-gray-700">视频列表 (12)</h3>`
- 操作按钮：`flex space-x-2`
  - 排序按钮：`<button class="text-gray-500"><i class="fas fa-sort"></i></button>`
  - 筛选按钮：`<button class="text-gray-500"><i class="fas fa-filter"></i></button>`

**视频卡片列表**（第1491-...行）：
- 容器：`space-y-4`
- 视频卡片：`card bg-white p-4`

**视频卡片头部**（第1494-1500行）：
- 容器：`flex justify-between items-start mb-3`
  - 左侧：视频标题 `<h4 class="font-semibold text-gray-800">张明 - 工资视频</h4>`，上传时间 `<p class="text-xs text-gray-500">2023-11-25 上传</p>`
  - 右侧：状态标签 `<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">已验证</span>`

**视频内容区域**（第1501-1509行）：
- 容器：`flex items-center mb-3`
  - 缩略图区域：`w-16 h-16 bg-gray-200 rounded-lg flex items-center justify-center mr-3`，播放图标 `<i class="fas fa-play text-gray-500"></i>`
  - 视频信息区域：`flex-1`
    - 视频描述：`<p class="text-sm text-gray-700">工资发放确认视频</p>`
    - 视频属性：`<p class="text-xs text-gray-500">时长: 00:45 · 大小: 12.3MB</p>`

**操作按钮区域**（第1510-1520行）：
- 容器：`flex justify-between text-sm`
  - 播放按钮：`text-blue-500`，图标 `<i class="fas fa-play mr-1"></i>`，文字"播放"
  - 下载按钮：`text-green-500`，图标 `<i class="fas fa-download mr-1"></i>`，文字"下载"
  - 分享按钮：`text-gray-500`，图标 `<i class="fas fa-share mr-1"></i>`，文字"分享"

**企业设置页设计规范**：
必须严格对照原型文件 `docs/小程序原型/yongren.html` 第1302-1439行的企业设置页面设计实现：

**页面结构**：
- **注意**：小程序环境中状态栏由宿主提供，无需自行实现
- 内容区域：`h-[calc(100%-60px)] overflow-y-auto`（仅减去底部导航60px）
- 底部导航：设置标签激活状态

**企业信息区域**（第1317-1341行）：
- 容器：`p-4 border-b border-gray-200`
- 企业logo和名称区域：`flex items-center mb-4`
  - logo容器：`w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center mr-4`
  - logo图标：`<i class="fas fa-building text-blue-500 text-2xl"></i>`
  - 名称信息：`<h3 class="font-semibold text-gray-800">阿里巴巴集团</h3>`，`<p class="text-sm text-gray-500">企业账号</p>`
- 统计卡片区域：`grid grid-cols-3 gap-3 text-center`
  - 每个卡片：数值 `<p class="text-xl font-bold text-gray-800">24</p>`，标签 `<p class="text-xs text-gray-500">在职人员</p>`
  - 统计类型：在职人员、进行中订单、累计订单

**功能列表区域**（第1344-...行）：
- 容器：`p-4`

**第一组功能列表**（第1345-1373行）：
- 容器：`space-y-1 mb-6`
- 功能项样式：`flex items-center justify-between p-3 rounded-lg hover:bg-gray-50`
  - 左侧：`flex items-center`
    - 图标容器：`w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3`
    - 图标：`<i class="fas fa-user text-blue-500"></i>`
    - 文字：`<span class="text-gray-700">账号信息</span>`
  - 右侧：箭头图标 `<i class="fas fa-chevron-right text-gray-400"></i>`
- 功能项：账号信息（蓝色）、安全设置（绿色）、消息通知（紫色）

**第二组功能列表**（第1375-...行）：
- 容器：`space-y-1 mb-6`
- 功能项样式：同上
- 功能项：帮助中心（黄色）、用户协议（靛蓝色）、隐私政策（粉色）

**延期功能处理**：
- 受系统设置API延期影响的功能（账号管理、安全设置、消息通知等）：
  - 保持页面结构和样式不变
  - 添加"后期优化"标签：`<span class="text-xs text-gray-400 ml-2">（后期优化）</span>`
  - 点击时显示提示："该功能正在开发中，预计下一版本上线"

**UI组件使用**：
- **基础组件来源**（现在来自独立的UI包）：
  - `YongrenTabBarLayout` - 从`@d8d/yongren-shared-ui/components/YongrenTabBarLayout`导入（底部导航布局组件，主页面必须使用，设置标签激活状态）
  - `Navbar` - 从`@d8d/mini-shared-ui-components/components/navbar`导入（顶部导航栏组件，所有页面必须使用）
  - `PageContainer` - 从`@d8d/mini-shared-ui-components/components/page-container`导入（页面容器组件）
- **页面层级结构规范**：
  - **主页面**（视频管理页、企业设置页）：使用`YongrenTabBarLayout` + `Navbar`组合
    - Navbar配置：`title="视频管理"`或`title="企业设置"`，`leftIcon=""`，`leftText=""`（无返回按钮）
    - ScrollView布局：`px-4 pb-4 pt-0`（移除顶部内边距适配navbar占位）
- **独立开发小程序UI组件**：基于原型文件独立设计开发视频管理和企业设置相关UI组件
- **复用现有基础组件**：复用mini项目中已有的基础UI组件（卡片、列表、表单等），根据原型设计调整样式
- **注意**：史诗011针对mini小程序，UI组件应独立设计，而非复用管理后台的`@d8d/allin-*`系列UI包

### 文件位置
**当前架构（已按mini-ui-packages拆分）**：

**设置UI包**：
- **包名称**：`@d8d/yongren-settings-ui`（位于`mini-ui-packages/yongren-settings-ui/`）
- **主要页面组件**：
  - `src/pages/Settings/Settings.tsx` - 企业设置页面组件
    - 使用`YongrenTabBarLayout`布局，`activeTab="settings"`
    - 集成`Navbar`组件，标题"企业设置"，隐藏左侧返回按钮（主页面）
    - 使用`ScrollView`作为内容容器，布局`px-4 pb-4 pt-0`适配navbar占位
    - 路由路径：`pages/yongren/settings`
- **依赖的UI包**：
  - **布局组件**：
    - `@d8d/yongren-shared-ui/components/YongrenTabBarLayout` - 底部导航布局组件（主页面使用）
    - `@d8d/mini-shared-ui-components/components/navbar` - 顶部导航栏组件（所有页面使用）
    - `@d8d/mini-shared-ui-components/components/page-container` - 页面容器组件
  - **业务模块**：
    - `@d8d/allin-company-module` - 企业管理模块类型定义

**视频管理UI包**（可能需要新建）：
- **包名称**：`@d8d/yongren-video-management-ui`（建议位置：`mini-ui-packages/yongren-video-management-ui/`）
- **主要页面组件**：
  - `src/pages/VideoManagement/VideoManagement.tsx` - 视频管理页面组件
    - 使用`YongrenTabBarLayout`布局，`activeTab="settings"`（视频管理在企业设置页面内）
    - 集成`Navbar`组件，标题"视频管理"，隐藏左侧返回按钮（主页面）
    - 使用`ScrollView`作为内容容器，布局`px-4 pb-4 pt-0`适配navbar占位
    - 路由路径：`pages/yongren/video`
- **依赖的UI包**：
  - **布局组件**：同上设置UI包
  - **业务模块**：
    - `@d8d/allin-video-module` - 视频管理模块类型定义（如存在）

**桥接文件位置**（在mini项目中）：
- `mini/src/pages/yongren/settings/index.tsx` - 企业设置页面桥接文件
  - 从`@d8d/yongren-settings-ui`导入`Settings`组件
  - 路由路径：`pages/yongren/settings`
- `mini/src/pages/yongren/video/index.tsx` - 视频管理页面桥接文件
  - 从`@d8d/yongren-video-management-ui`导入`VideoManagement`组件（或从设置UI包导入）
  - 路由路径：`pages/yongren/video`

### 数据模型
基于史诗012扩展的数据库schema：
- `order_person_asset`表的`asset_type`枚举已扩展视频类型 [来源：docs/stories/012.001.story.md#数据模型]
  - 视频类型：`salary_video`（工资视频）、`tax_video`（个税视频）、`checkin_video`（打卡视频）、`work_video`（工作视频）
- 视频文件通过file模块管理，关联到订单和人才

### 技术约束
- **视频处理**：不同格式视频的播放兼容性
- **文件大小**：大视频文件的下载和播放性能
- **权限控制**：视频访问权限验证（仅关联企业可访问）
- **API延期**：系统设置功能需优雅降级处理
- **移动端适配**：视频播放在移动端的用户体验
- **页面结构**：主页面必须使用YongrenTabBarLayout+Navbar（无返回按钮），遵循统一的页面层级结构规范
- **布局渲染**：Taro小程序中View容器内的Text组件默认内联显示，需要使用`flex flex-col`强制垂直排列，确保布局符合原型设计

### 延期功能处理
**受影响的系统设置功能**：
1. 账号管理（员工账号添加、删除、权限分配）
2. 安全设置（密码策略、登录限制等）
3. 通知设置（消息推送配置）
4. 高级企业信息配置

**处理方案**：
- 页面展示功能入口，但标记为"后期优化"
- 添加提示信息："该功能正在开发中，预计下一版本上线"
- 保持页面结构完整，为后续开发预留接口

### 测试要求
**测试框架**：Jest + Testing Library
**关键测试场景**：
1. **视频管理测试**：
   - 视频列表加载测试
   - 视频播放功能测试
   - 批量下载功能测试
   - 视频筛选功能测试
2. **企业设置测试**：
   - 企业信息展示测试
   - 信息编辑功能测试（如有权限）
   - 延期功能提示测试
3. **集成测试**：
   - 视频与订单关联测试
   - 权限验证测试
   - 移动端兼容性测试
4. **性能测试**：
   - 大视频文件加载性能测试
   - 批量操作性能测试
5. **页面结构测试**：
   - Navbar组件集成测试（主页面无返回按钮）
   - 页面层级结构验证（主页面使用YongrenTabBarLayout）
   - 类型检查验证

## 变更日志
| 日期 | 版本 | 描述 | 作者 |
|------|------|------|------|
| 2025-12-17 | 1.0 | 初始创建（视频与系统管理故事） | Bob（Scrum Master） |
| 2025-12-20 | 1.1 | 更新Navbar集成规范，添加页面层级结构，反映mini-ui-packages架构 | Claude Code |

## 开发代理记录
*此部分由开发代理在实施过程中填充*

**文档更新记录 (2025-12-20)**：
- 根据史诗011最新实现，更新Navbar组件集成规范
- 添加任务6：集成Navbar导航栏组件（页面层级结构规范）
- 更新UI组件使用规范，反映mini-ui-packages拆分后的架构
- 更新技术约束，添加页面结构要求和布局渲染约束
- 更新测试要求，添加页面结构测试场景
- 统一所有用人小程序页面的Navbar集成标准

## QA结果
*来自QA代理对已完成故事实施的QA审查结果*