添加文件

doc/study-task-detail-prd.md

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