教师小程序 / 选择个性化作业
周策 老师
Prototype

教师小程序 · 选择个性化作业

校验个性化作业筛选和回填逻辑。

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

选择个性化作业

当前文档: prds/作业管理模块/teacher-mp/tm_select_personal.md

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

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

选择个性化作业

页面元信息

  • 终端:教师小程序
  • Astro 路由:/teacher-mp/select-personal
  • 原始 HTML:tm_select_personal.html
  • 来源章节:4.3.4
  • 维护规则:后续以本页面 PRD 为准;若改动影响通用规则,再同步总览 / 全局规则文档。

视觉描述

  • 原型引用:产出文档/作业管理模块/原型图/tm_select_personal.html
  • 页面采用教师小程序单栏布局,自上而下分为导航栏、搜索与筛选条、作业列表区、筛选条件 Bottom Sheet、空状态区5个视觉层级。头部为浅蓝到浅灰的渐变背景,内容区卡片为白底圆角样式。
  • 顶部导航栏左侧为返回图标,中间标题固定为“选择个性化作业”,右侧仅保留占位,不提供额外功能入口。
  • 搜索与筛选条位于导航栏下方,左侧为胶囊型搜索框,placeholder 文案为请输入您要查找的内容;右侧为图标+文字组合按钮筛选。当筛选条件已生效时,按钮文案不变,但整体高亮为蓝色激活态。
  • 作业列表区为单列纵向卡片流。每张卡片左侧展示按学科区分的封面色块与学科字样,右侧展示作业标题、可选来源标签(如教研院)、发布班级、页数/题数高亮标签、发布时间,右下角为主按钮选择
  • 筛选条件以底部 Bottom Sheet 形式弹出,包含面板标题筛选条件、右上角文字按钮重置、学科/班级/作业状态3个筛选分组,以及底部操作按钮取消确认筛选
  • 当当前关键词与筛选条件组合后命中结果为0时,列表区隐藏,页面下方展示搜索插画和空态文案没有匹配的作业;空态不覆盖顶部搜索与筛选操作区,教师仍可继续修改条件。

功能描述

  • 页面入口与默认态:
    • 页面入口:教师在 tm_submit.html 切换到“个性化作业”页签后,点击“关联作业”卡片进入本页。
    • 返回入口:点击左上角返回图标,回到 tm_submit.html?tab=personal
    • 返回保留策略:若教师只是进入本页浏览或筛选但未重新点击选择,返回后提交页必须保留进入前已选作业、已拍照片和当前页签;不允许因为进入选择页而清空提交上下文。参见 R40。
    • 默认加载范围:仅加载当前教师权限范围内可见的个性化作业,至少按学校、任教班级、学科做数据隔离。参见 R18。
    • 默认排序:列表按发布时间倒序展示,最新作业排在最前。参见 R35。
    • 默认筛选态:学科、班级、作业状态3个分组均默认选中全部,搜索关键词为空,筛选按钮为普通态。
  • 页面分区与控件交互:
    • 导航栏:
      • 左侧返回图标:点击后直接返回提交页个性化作业页签,不触发二次确认弹窗;是否保留已选内容由提交页上下文恢复逻辑承接。
      • 中间标题:固定展示选择个性化作业,不随筛选状态变化。
      • 右侧占位:仅用于保持标题居中,不响应点击。
    • 搜索与筛选条:
      • 搜索框:
        • 文案:placeholder 为请输入您要查找的内容
        • 检索范围:按作业标题做关键词模糊匹配,本页不通过自由文本检索班级、学科;班级和学科统一通过筛选项完成。
        • 触发规则:输入关键词后300ms防抖触发查询;点击键盘搜索键时立即触发查询。关键词与当前筛选条件按交集生效。参见 R35。
        • 清空规则:当教师清空输入框后,立即恢复“当前已确认筛选条件”下的完整结果集,不自动清空已确认的筛选项。参见 R35。
      • 筛选按钮:
        • 默认态:黑灰色图标+文案筛选
        • 点击交互:打开筛选条件 Bottom Sheet,同时展示半透明遮罩。
        • 激活态:当任一筛选分组的已确认条件不为全部时,按钮整体切换为蓝色高亮;全部恢复默认后取消高亮。参见 R38。
    • 作业列表区:
      • 列表加载:
        • 首次进入页面时展示列表骨架屏,骨架结构与卡片布局一致。
        • 列表采用单列滚动浏览,不展示分页器;真实实现按“首屏20条 + 下拉续载20条”处理,避免一次性加载全部数据。
      • 卡片元素:
        • 左侧封面:按学科渲染不同底色和大字学科标识,用于快速区分语文、数学、英语、物理等作业。
        • 标题区:展示作业名称;若来源为教研院派发作业,则在标题右侧展示教研院来源标签;普通教师自建作业不展示该标签。
        • 信息区:展示发布班级: {班级名称},下一行以高亮胶囊展示共X页,共Y题
        • 时间区:展示发布时间,格式统一为 YYYY-MM-DD HH:mm:ss
        • 状态字段:作业状态不单独渲染成徽标,但作为筛选条件和后续提交校验字段存在于卡片数据中。
        • 选择按钮:
          • 默认文案为选择,蓝色主按钮样式。
          • 本页卡片在待提交待批改已完成3种状态下均允许展示和点击选择按钮;前端不因状态直接禁用该按钮,其中已完成状态下选择后仍允许教师回到提交页继续创建新的代提交记录。参见 R41。
          • 点击后按钮文案立即切换为已选,按钮变灰并禁用,避免重复点击;400ms后返回 tm_submit.html?tab=personal&selected={作业名称}。参见 R39。
          • 本页不支持点击卡片主体进入详情页,唯一确认动作为点击右下角选择按钮。
    • 筛选条件 Bottom Sheet:
      • 面板打开方式:点击筛选按钮打开;点击遮罩或取消按钮关闭。参见 R37。
      • 分组结构:
        • 学科:全部/语文/数学/英语/物理
        • 班级:全部/二年级(2)班/三年级(1)班/三年级(3)班;真实实现应根据教师当前任教班级动态下发,而非写死前端。
        • 作业状态:全部/待提交/待批改/已完成
      • 标签交互规则:
        • 每组默认全部选中。
        • 点击全部时,清空同组其他选项并仅保留全部选中。
        • 点击非全部选项时,先取消全部,再对当前标签做选中/取消选中切换。
        • 同组非全部选项支持多选。
        • 若教师取消了同组最后一个非全部选项,系统自动回退为全部选中。参见 R36。
      • 头部重置按钮:
        • 点击后仅把面板内3个分组恢复为全部选中,不立即刷新列表,不自动关闭面板。
        • 教师需继续点击确认筛选,重置后的条件才正式生效。参见 R37。
      • 底部取消按钮:
        • 仅关闭面板,不刷新列表,不回滚面板内已勾选的暂存状态。
        • 教师下次再次打开面板时,应继续看到上一次未确认的勾选状态,直到点击确认筛选或离开页面。参见 R37。
      • 底部确认筛选按钮:
        • 点击后按当前面板内勾选条件刷新列表,并关闭面板。
        • 刷新后若任一分组不为全部,顶部筛选按钮高亮;若全部为全部,顶部按钮恢复普通态。参见 R38。
  • 页面跳转与返回逻辑:
    • 本页仅承接“选择个性化作业”动作,不承担作业详情查看、批改、分析等跳转。
    • 点击选择返回提交页后,提交页需至少恢复并展示以下信息:homework_idhomework_namesubjectclass_namepage_countquestion_countstatussource_tag
    • 提交页底部提交按钮的可用性仍由 tm_submit.html 统一控制:只有“已选作业 + 至少1张照片”同时满足时才可提交。参见 R02、R03。
    • 若从本页返回提交页时存在未完成上传任务,仍以提交页的上传恢复逻辑优先,不允许本页覆盖恢复中的作业上下文。参见 R05、R07、R40。
  • 批量操作范围:
    • 本页不支持批量勾选多个作业、不支持批量确认、不支持批量带回提交页;一次最多选择1个作业对象。参见 R39。
    • 本页唯一允许的“批量能力”是筛选分组中的多标签组合筛选,其作用范围仅限当前教师权限范围内的个性化作业结果集,不扩展到全校、全区全量作业数据。参见 R36。
  • 业务规则:R18、R35、R36、R37、R38、R39、R40、R41。

异常描述

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

数据需求

  • 接口:
    • 个性化作业列表接口:入参包含 teacher_idschool_idclass_ids[]subject_codes[]status_list[]keywordpage_nopage_size;出参返回 homework_idhomework_namesubjectsubject_codeclass_idclass_namestatuspage_countquestion_countpublish_timesource_typesource_label
    • 筛选字典接口:返回当前教师可见的学科枚举、班级列表、状态枚举及默认值;班级数据必须按教师权限范围动态返回。
    • 作业可用性校验接口:在点击选择或返回提交页前校验作业是否仍可关联提交,避免已删除、已撤回、已停用或越权作业被错误带回;已完成状态仍可返回“允许关联提交”。
  • 状态与上下文:
    • 页面需维护两套筛选状态:已确认筛选条件面板暂存条件取消关闭时仅保留暂存条件,不覆盖已确认条件;确认筛选时才同步到列表查询条件。参见 R37。
    • tm_submit.html 与本页之间必须通过共享状态或路由参数传递作业选择结果;仅透传作业名称不足以支撑同名作业区分,研发落地时必须使用 homework_id 作为唯一标识。
    • 返回提交页时需要保留 submit_context,至少包含当前页签、已选作业快照、已拍照片数量、未完成上传任务标记。参见 R40。
  • 埋点:
    • 页面浏览:记录入口来源(tm_submit_personal)、教师ID、默认班级数量、默认学科数量。
    • 搜索行为:记录搜索关键词、触发方式(防抖/键盘搜索)、命中数量、是否产生空结果。
    • 筛选行为:记录打开筛选、关闭筛选、点击遮罩关闭、重置、确认筛选;确认埋点需带上学科/班级/状态的选中值及结果数量。
    • 选择行为:记录被选择作业的 homework_idhomework_namestatusclass_idsource_type、返回耗时。
    • 空态与异常:记录空态曝光、列表加载失败、筛选字典加载失败、作业不可关联提示曝光、网络异常提示曝光。
当前这页已经是“原型 + 页面 PRD”评审工作台。跨页面规则请维护在总览 / 全局规则文档,页面细节请直接维护右侧页面 PRD。
Review Workspace - Prototype + Page PRD