学生端 / 选择个性化作业
周策 老师
Prototype

学生端 · 选择个性化作业

补齐个性化作业选择和回填。

设计视口: 375 x 812 · 当前缩放: 100% · 左右分栏: 拖动中线调整
Page PRD

选择个性化作业

当前文档: prds/作业管理模块/student/s_select_personal.md

当前对照重点: 选择个性化作业
Review Hint

左侧现在支持三种演示模式: 默认按设计稿完整缩放、按宽度铺满、以及 100% 原始尺寸滚动查看。 右侧默认读取当前页面对应的页面级 PRD,而不是整本总 PRD;改页面时,直接同步维护这个页面文档即可。

选择个性化作业

页面元信息

  • 终端:学生端
  • Astro 路由:/student/select-personal
  • 原始 HTML:s_select_personal.html
  • 来源章节:4.4.6
  • 维护规则:后续以本页面 PRD 为准;若改动影响通用规则,再同步总览 / 全局规则文档。

视觉描述

  • 原型引用:产出文档/作业管理模块/原型图/s_select_personal.html
  • 页面采用学生端单列卡片布局,自上而下分为导航栏、搜索与筛选条、个性化作业列表区、筛选 Bottom Sheet 和空状态区;头部背景为浅蓝到浅灰渐变,内容区为白底圆角卡片。
  • 顶部导航栏左侧为返回图标,中间标题固定为选择个性化作业,右侧仅保留占位,不提供额外操作入口。
  • 搜索与筛选条位于导航栏下方。左侧为胶囊型搜索框,placeholder 文案为请输入您要查找的内容;右侧为图标+文字组合按钮筛选。当任一已确认筛选条件不为全部时,筛选按钮整体高亮为蓝色激活态。
  • 列表区为单列纵向卡片流。每张卡片左侧展示按学科区分的封面色块和大字学科标识,右侧展示作业标题、可选来源标签教研院共X页,共Y题高亮标签和发布时间;右下角固定展示主按钮选择
  • 当前原型未在卡片中单独展示状态徽标,待提交待批改已完成状态仅作为列表筛选字段和选择校验字段存在。
  • 筛选条件采用底部 Bottom Sheet 形式弹出,包含标题筛选条件、右上角文字按钮重置学科作业状态2个筛选分组,以及底部操作按钮取消确认筛选
  • 当关键词与筛选条件组合后命中结果为0时,列表区隐藏,页面下方展示搜索空状态图标和文案没有匹配的作业;空态不覆盖顶部搜索与筛选区域,学生可继续修改条件。

功能描述

  • 页面入口与默认态:
    • 页面入口:学生在 s_submit.html 切换到个性化作业页签后,点击关联作业卡片进入本页。
    • 返回入口:点击左上角返回图标,回到 s_submit.html?tab=personal
    • 返回保留策略:若学生只是进入本页浏览、搜索或筛选但未重新点击选择,返回后提交页必须保留进入前已选作业、已拍照片和当前页签;不允许因为进入选择页而清空提交上下文。
    • 默认加载范围:仅加载当前学生身份可见且允许学生端查看的个性化作业,至少按当前绑定学生、班级归属、作业有效性做数据隔离;已删除、已撤回、已停用、越权作业不得进入结果集。
    • 默认排序:列表按发布时间倒序展示,最新发布的作业排在最前。
    • 默认筛选态:学科作业状态2个分组均默认选中全部,搜索关键词为空,筛选按钮为普通态。
  • 页面分区:
    • 导航栏区:包含返回图标、页面标题、右侧占位。
    • 搜索与筛选区:包含搜索输入框和筛选按钮。
    • 作业列表区:包含卡片骨架屏、正式卡片列表和空状态容器。
    • 筛选弹层区:包含遮罩、Bottom Sheet 头部、筛选分组、底部操作按钮。
  • 每个区块的元素:
    • 导航栏区元素:
      • 左侧返回图标:点击后返回 s_submit.html?tab=personal
      • 中间标题:固定展示选择个性化作业,不随筛选状态变化。
      • 右侧占位:仅用于保持标题居中,不响应点击。
    • 搜索与筛选区元素:
      • 搜索框图标:仅作视觉提示,不单独响应点击。
      • 搜索输入框:placeholder 为请输入您要查找的内容
      • 筛选按钮:由筛选图标和文字筛选组成,支持普通态与高亮态。
    • 作业列表区元素:
      • 卡片封面:按学科渲染不同底色和学科字样,如语文/数学/英语
      • 标题区:展示作业名称;若来源为教研院,则在标题右侧展示教研院标签。
      • 规模信息区:展示高亮标签共X页,共Y题
      • 发布时间区:展示完整时间 YYYY-MM-DD HH:mm:ss
      • 选择按钮:固定在卡片右下角,为本页唯一确认动作。
    • 筛选弹层区元素:
      • 头部标题:固定展示筛选条件
      • 头部重置按钮:恢复弹层内勾选项到默认态。
      • 学科分组:默认项为全部,原型示例项为语文/数学/英语;正式实现应以后端返回字典为准。
      • 作业状态分组:固定项为全部/待提交/待批改/已完成
      • 底部取消按钮:关闭弹层。
      • 底部确认筛选按钮:应用当前勾选条件并刷新列表。
  • 每个按钮/控件的交互:
    • 返回图标:
      • 点击后直接返回提交页个性化作业页签,不触发二次确认弹窗。
      • 若进入本页前提交页已有选中作业和照片,本页返回不得覆盖或清空原上下文。
    • 搜索输入框:
      • 检索范围:按作业标题做关键词模糊匹配,不通过自由文本检索学科、状态。
      • 触发规则:原型未显式实现搜索逻辑,正式落地按输入后300ms防抖触发查询 + 点击键盘搜索键立即触发查询执行。
      • 清空规则:清空输入框后,立即恢复“当前已确认筛选条件”下的完整结果集,不自动清空已确认筛选项。
    • 筛选按钮:
      • 点击后打开筛选 Bottom Sheet,并展示半透明遮罩。
      • 当任一已确认筛选条件不为全部时,按钮切换为蓝色高亮态;全部恢复默认后取消高亮。
    • 筛选标签:
      • 每组默认全部选中。
      • 点击全部时,清空同组其他选项并仅保留全部选中。
      • 点击非全部选项时,先取消全部,再对当前标签做选中/取消选中切换。
      • 同组非全部选项支持多选。
      • 若学生取消了同组最后一个非全部选项,系统自动回退为全部选中。
    • 重置按钮:
      • 点击后仅把弹层内2个分组恢复为全部选中,不立即刷新列表,不自动关闭弹层。
      • 学生需继续点击确认筛选,重置后的条件才正式生效。
    • 取消按钮:
      • 仅关闭弹层,不刷新列表,不回滚弹层内已勾选的暂存状态。
      • 学生下次再次打开弹层时,继续看到上一次未确认的勾选状态,直到点击确认筛选或离开页面。
    • 确认筛选按钮:
      • 点击后按当前弹层内勾选条件刷新列表,并关闭弹层。
      • 刷新后若结果数为0,展示空状态没有匹配的作业;若有结果,恢复列表显示。
    • 卡片选择按钮:
      • 每张卡片均展示选择按钮,不因待提交待批改已完成状态而隐藏或禁用。
      • 学生端正式规则为:已完成状态仍允许再次提交;选择该类作业后,返回提交页可继续拍照并创建新的提交记录。参见 R88。
      • 点击后先执行作业可用性校验;校验通过后按钮文案立即从选择切换为已选,按钮变灰并禁用,约400ms后返回 s_submit.html?tab=personal&selected={作业名称}
      • 本页不支持点击卡片主体进入详情页,唯一确认动作为点击右下角选择按钮。
  • 文案和按钮状态变化:
    • 搜索框默认文案:请输入您要查找的内容;输入后不改变输入框样式,仅以结果列表变化反馈搜索生效。
    • 筛选按钮默认态:黑灰色图标+文案筛选;激活态:蓝色图标+文案筛选
    • 选择按钮默认态:蓝色主按钮,文案选择;点击成功后切换为灰色禁用态,文案已选
    • 空状态文案:筛选或搜索无结果时展示没有匹配的作业;学生权限范围内首次进入即无数据时,展示当前暂无可选择的个性化作业
    • 选择校验失败时,按钮文案保持选择不变,不进入已选态。
  • 页面跳转和返回逻辑:
    • 本页仅承接“选择个性化作业”动作,不承担作业详情查看、提交记录查看、批改结果查看、分析查看等跳转。
    • 点击返回图标时,统一回到 s_submit.html?tab=personal;若未重新选择作业,不得通过空参数覆盖提交页中原有已选作业。
    • 点击选择后,页面返回 s_submit.html?tab=personal&selected={作业名称};正式实现除名称外,还必须回传 homework_idsubjectclass_namepage_countquestion_countstatussource_label 等摘要字段,用于提交页回填和后续校验。
    • 若返回提交页时检测到存在未完成上传任务,仍以 s_submit.html 的恢复上传逻辑优先,不允许本页新选择的 URL 参数覆盖恢复中的作业上下文。参见 R70。
    • 选择已完成状态作业返回提交页后,提交页底部提交按钮的激活规则仍保持“已选作业 + 至少1张照片”;不得因作业状态为已完成而把提交按钮改为禁用。参见 R88。
  • 批量操作范围:
    • 本页不支持批量勾选多个作业、不支持批量确认、不支持一次带回多个作业对象;一次最多选择1个作业。
    • 本页唯一允许的“批量能力”是筛选分组内的多标签组合筛选,其作用范围仅限当前学生本人可见的个性化作业结果集。
  • 业务规则:R70、R75、R88。

异常描述

  • 个性化作业列表加载失败:页面主体展示错误占位,文案为个性化作业加载失败,请稍后重试,并提供重试按钮;顶部导航栏和搜索筛选区仍保留可见。
  • 筛选字典加载失败:点击筛选按钮时 Toast 提示筛选条件加载失败,请稍后重试,不打开 Bottom Sheet,不影响当前列表浏览。
  • 搜索或筛选无结果:列表区隐藏,展示空状态文案没有匹配的作业;保留当前关键词、已确认筛选条件和筛选按钮高亮态,不自动回退默认结果集。
  • 当前学生权限范围内无可选作业:首次进入即返回空列表时,使用与“无结果”相同的空状态容器,但文案调整为当前暂无可选择的个性化作业;仍保留搜索和筛选入口。
  • 选择时作业已被删除、权限失效、已撤回、已停用或超出当前学生本人权限范围:点击选择后先执行可用性校验;若接口返回失败,按钮不切换为已选,页面停留当前页,Toast 提示当前作业已不可关联,请重新选择
  • 选择时作业状态为已完成:不视为异常,不弹出阻断提示;只要作业仍有效且学生有权限,即允许继续选择并返回提交页再次提交。参见 R88。
  • 网络中断:搜索、筛选确认或选择校验请求失败时,Toast 提示网络连接异常,请检查后重试,不清空当前列表和弹层勾选态。
  • 返回上下文恢复失败:若从本页返回提交页时未能恢复原提交上下文,提交页需提示未恢复到上次选择,请重新选择作业,并保留当前页签在个性化作业,避免误切回纸质教辅作业。

数据需求

  • 接口:
    • 个性化作业列表接口:入参包含 student_idbound_student_idkeywordsubject_codes[]status_list[]page_nopage_size;出参返回 homework_idhomework_namesubjectsubject_codeclass_idclass_namestatuspage_countquestion_countpublish_timesource_typesource_labelcan_submitcan_resubmit
    • 筛选字典接口:返回当前学生可见的学科枚举、状态枚举及默认值;状态固定包含 待提交/待批改/已完成
    • 作业可用性校验接口:在点击选择或返回提交页前校验作业是否仍可关联提交,避免已删除、已撤回、已停用或越权作业被错误带回;当作业状态为已完成但允许再次提交时,接口需明确返回 can_submit=truecan_resubmit=true
    • 作业摘要接口:根据 homework_id 获取提交页回填所需摘要信息,用于渲染 s_submit.html 的关联作业卡片。
  • 状态与上下文:
    • 页面需维护两套筛选状态:已确认筛选条件面板暂存条件。点击取消时仅关闭弹层,不覆盖已确认条件;点击确认筛选时才同步到列表查询条件。
    • s_submit.html 与本页之间必须通过共享状态或路由参数传递作业选择结果;仅透传作业名称不足以支撑同名作业区分,研发落地时必须使用 homework_id 作为唯一标识。
    • 返回提交页时需保留 submit_context,至少包含 active_tabpersonal.selected_idpersonal.selected_snapshotpersonal.photospending_upload_task_flagreturn_scroll_position;若学生未重新点击选择,则不得覆盖进入本页前的 personal.selected_snapshot
    • 列表数据需显式下发 can_resubmit 或等价字段,供前端在已完成状态下继续展示可选按钮并与最终提交校验口径保持一致。参见 R88。
  • 埋点:
    • 页面浏览:记录入口来源(s_submit_personal)、学生ID、默认筛选状态、默认结果数量。
    • 搜索行为:记录搜索关键词、触发方式(防抖/键盘搜索)、命中数量、是否产生空结果。
    • 筛选行为:记录打开筛选、关闭筛选、点击遮罩关闭、重置、确认筛选;确认埋点需带上学科/状态选中值及结果数量。
    • 选择行为:记录被选择作业的 homework_idhomework_namestatussource_typecan_resubmit、返回耗时。
当前这页已经是“原型 + 页面 PRD”评审工作台。跨页面规则请维护在总览 / 全局规则文档,页面细节请直接维护右侧页面 PRD。
Review Workspace - Prototype + Page PRD