funtime_design/doc/study-task-detail-prd.md

学习任务详情页 (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:

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）。
• 评估状态与扣分逻辑的自动联动（如选择“不合格”自动计算扣分）。