110 lines
4.7 KiB
Markdown
110 lines
4.7 KiB
Markdown
# 学习任务详情页 (Study Task Detail) 产品需求文档
|
||
|
||
## 1. 文档概述
|
||
本文档描述了“学习任务详情页”的功能需求、界面布局及交互逻辑。该页面旨在为用户提供一个高效、沉浸式的任务查看与评估环境，支持视频回放、标准示例对照、实时评估打分等核心功能。
|
||
|
||
## 2. 页面布局与视觉风格
|
||
|
||
### 2.1 整体布局
|
||
- **结构**：采用左右分栏设计的桌面端布局（Web Desktop Layout）。
|
||
- **左侧栏 (Media Column)**：占据约 58% 宽度，专注于多媒体内容展示。
|
||
- **右侧栏 (Info Column)**：占据约 42% 宽度，承载任务信息、标准对照及评估操作。
|
||
- **底部栏 (Bottom Bar)**：固定悬浮于页面底部，展示核心评分数据。
|
||
|
||
### 2.2 视觉风格 (High-end Design)
|
||
- **色调**：背景采用柔和浅灰 (`#f2f3f5`)，营造沉浸感；卡片采用纯白背景。
|
||
- **质感**：
|
||
- 卡片无边框，使用细腻的悬浮阴影 (`box-shadow`) 增强层次感。
|
||
- 底部栏采用**毛玻璃效果** (`backdrop-filter: blur`)，提升现代感。
|
||
- **圆角**：统一使用 `12px` 大圆角，视觉更加柔和。
|
||
- **排版**：
|
||
- 标题使用加粗字体，配合蓝色竖条装饰 (`#409eff`) 进行视觉引导。
|
||
- 数字展示采用 DIN 等宽字体，强调数据专业性。
|
||
|
||
## 3. 功能模块详解
|
||
|
||
### 3.1 顶部导航 (Page Header)
|
||
- **返回按钮**：点击左侧“Back”按钮返回上一级列表页。
|
||
- **操作区**：
|
||
- **保存**：主操作按钮，保存当前评估结果。
|
||
- **更多/查看**：辅助功能入口（图标按钮）。
|
||
|
||
### 3.2 媒体播放区 (左侧栏)
|
||
- **视频播放器**：
|
||
- 16:9 宽屏展示。
|
||
- 支持视频播放/暂停、进度控制。
|
||
- 无信号时显示占位符及提示文案。
|
||
- **控制条 (Controls Bar)**：
|
||
- **回放/直播切换**：下拉选择器，支持切换“回放”与“直播”模式。
|
||
- **监控点位选择**：下拉选择器，支持切换不同监控视角（如“监控点位一”、“监控点位二”）。
|
||
|
||
### 3.3 任务信息与评估区 (右侧栏)
|
||
#### A. 任务基础信息
|
||
- **标题**：大字号展示任务名称，辅以圆形 Tag 标签显示任务类型/状态。
|
||
- **描述**：
|
||
- 展示任务详细说明。
|
||
- **交互**：支持长文本折叠/展开功能（当前设计为默认展开，预留收起按钮）。
|
||
|
||
#### B. 标准示例 (Standard Examples)
|
||
- **展示形式**：网格布局展示标准作业图片。
|
||
- **交互**：
|
||
- 鼠标悬停图片时有放大动效 (`scale 1.05`)。
|
||
- 点击图片支持大图预览（Lightbox 模式）。
|
||
- **数据展示**：标题旁显示图片总数量。
|
||
|
||
#### C. 评估操作 (Evaluation)
|
||
- **评估项内容**：显示具体的评估标准文本。
|
||
- **评估状态选择**：
|
||
- 三态选择器：**不合格 (Failed)**、**不适用 (N/A)**、**合格 (Passed)**。
|
||
- **样式**：宽大卡片式按钮，选中后高亮显示对应颜色（红/灰/绿），提供明确的视觉反馈。
|
||
|
||
#### D. 建议反馈 (Suggestion)
|
||
- **输入框**：多行文本域，支持输入评估建议。
|
||
- **限制**：最大支持 1000 字，右下角显示字数统计。
|
||
|
||
#### E. 上次扣分情况 (Last Deduction) - *条件渲染*
|
||
- **触发条件**：仅当存在历史扣分记录时显示。
|
||
- **样式**：淡红色背景 (`#fff0f0`) 警示卡片。
|
||
- **内容**：
|
||
- 历史扣分分值（如 `-2分`）。
|
||
- 违规现场照片缩略图。
|
||
- 历史整改建议。
|
||
|
||
### 3.4 底部状态栏 (Bottom Bar)
|
||
- **定位**：Fixed 定位底部，z-index 层级最高。
|
||
- **核心指标**：
|
||
1. **分值**：该任务的总分值（蓝色高亮）。
|
||
2. **扣分规则**：简要显示的文字规则。
|
||
3. **当前扣分**：实时计算的扣分数值（红色高亮）。
|
||
|
||
## 4. 数据接口需求 (Mock Schema)
|
||
|
||
### 4.1 详情接口
|
||
- **Endpoint**: `/api/study-tasks/detail`
|
||
- **Method**: `GET`
|
||
- **Params**: `id` (Task ID)
|
||
- **Response Structure**:
|
||
```typescript
|
||
interface TaskDetail {
|
||
id: number;
|
||
title: string; // 任务标题
|
||
tag: string; // 标签（如"日常任务"）
|
||
longDescription: string;// 详细描述
|
||
videoUrl: string; // 视频地址
|
||
standardImages: string[]; // 标准示例图片URL数组
|
||
evaluationContent: string;// 评估标准文本
|
||
score: number; // 总分
|
||
rule: string; // 扣分规则文本
|
||
deduction: number; // 当前扣分
|
||
lastDeduction?: { // 上次扣分记录（可选）
|
||
score: number;
|
||
photos: string[];
|
||
suggestion: string;
|
||
};
|
||
}
|
||
```
|
||
|
||
## 5. 后续规划
|
||
- 视频播放器对接真实的流媒体服务（HLS/FLV）。
|
||
- 评估状态与扣分逻辑的自动联动（如选择“不合格”自动计算扣分）。
|