011.006.story.md 12 KB
故事 011.006：视频与系统管理功能实现
状态
Draft
故事
作为企业用户， 我希望管理企业相关的视频资料和查看企业基本信息， 以便进行资料归档和账户管理。
验收标准
- 视频查看下载页功能完整，支持企业维度和个人维度的视频管理
- 视频支持播放、下载、分享、批量下载功能
- 企业设置页面基础功能可用（企业信息展示）
- 账号管理、安全设置等高级功能标记为"后期优化"（因系统设置API延期）
- 页面设计符合原型标准，与系统其他部分无缝集成
任务 / 子任务
- 任务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：编写集成测试
- 编写视频管理功能测试
- 测试批量下载功能
- 测试企业信息展示功能
- 验证延期功能的处理方式
开发笔记
依赖关系
依赖故事：
- 011.001（基础框架搭建）：提供API客户端、路由、基础布局
- 011.002（认证与首页）：提供认证状态管理
- 011.004（订单管理）：视频与订单关联，可能需要订单筛选
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>
- logo容器：
- 统计卡片区域：
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组件（卡片、列表、表单等）
- 视频播放器组件选择（根据项目现有技术栈）
- 遵循UI包开发规范 [来源：docs/architecture/coding-standards.md#ui包开发提示]
文件位置
页面组件位置：
mini/src/pages/yongren/video/- 视频管理页面mini/src/pages/yongren/settings/- 企业设置页面
业务组件位置：
mini/src/components/video/- 视频相关组件VideoGrid.tsx- 视频网格组件VideoPlayer.tsx- 视频播放器组件VideoBatchToolbar.tsx- 批量操作工具栏
mini/src/components/settings/- 设置相关组件CompanyInfoCard.tsx- 企业信息卡片FeaturePlaceholder.tsx- 功能占位组件
数据模型
基于史诗012扩展的数据库schema：
order_person_asset表的asset_type枚举已扩展视频类型 [来源：docs/stories/012.001.story.md#数据模型]- 视频类型：
salary_video（工资视频）、tax_video（个税视频）、checkin_video（打卡视频）、work_video（工作视频）
- 视频类型：
- 视频文件通过file模块管理，关联到订单和人才
技术约束
- 视频处理：不同格式视频的播放兼容性
- 文件大小：大视频文件的下载和播放性能
- 权限控制：视频访问权限验证（仅关联企业可访问）
- API延期：系统设置功能需优雅降级处理
- 移动端适配：视频播放在移动端的用户体验
延期功能处理
受影响的系统设置功能：
- 账号管理（员工账号添加、删除、权限分配）
- 安全设置（密码策略、登录限制等）
- 通知设置（消息推送配置）
- 高级企业信息配置
处理方案：
- 页面展示功能入口，但标记为"后期优化"
- 添加提示信息："该功能正在开发中，预计下一版本上线"
- 保持页面结构完整，为后续开发预留接口
测试要求
测试框架：Jest + Testing Library 关键测试场景：
- 视频管理测试：
- 视频列表加载测试
- 视频播放功能测试
- 批量下载功能测试
- 视频筛选功能测试
- 企业设置测试：
- 企业信息展示测试
- 信息编辑功能测试（如有权限）
- 延期功能提示测试
- 集成测试：
- 视频与订单关联测试
- 权限验证测试
- 移动端兼容性测试
- 性能测试：
- 大视频文件加载性能测试
- 批量操作性能测试
变更日志
| 日期 | 版本 | 描述 | 作者 |
|---|---|---|---|
| 2025-12-17 | 1.0 | 初始创建（视频与系统管理故事） | Bob（Scrum Master） |
开发代理记录
此部分由开发代理在实施过程中填充
QA结果
来自QA代理对已完成故事实施的QA审查结果