# 学习任务详情页 (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）。
- 评估状态与扣分逻辑的自动联动（如选择“不合格”自动计算扣分）。