BPM
需求管理空间工作事项 · 实例列表
交互验证稿
蔡
需求描述

工作事项列表页新手引导(遮罩蒙版)与右键「复制新建」

背景:目前复制一条实例的内容只能先进详情页再找右上角图标,多一跳;「克隆实例内容」的图标与文案用户反馈看不懂。SOP 落地后「照着一条好实例改几个字段再提交」成为高频动作,需要在列表页一步到位,且不新增列、不占横向空间。

右键入口:在实例列表任意一行点击鼠标右键,在鼠标位置弹出菜单,菜单第一行灰字显示实例编号与标题,菜单项依次为 「复制新建」「复制文本内容」「新页签打开链接」:「复制文本内容」复制右键所在单元格的文字(空单元格回退为标题),「新页签打开链接」在新标签页打开该实例详情;菜单限制在列表区域内,点击空白处、滚动或按 Esc 关闭。不新增操作列,列表列宽与横向滚动保持现状。

复制新建:即原「克隆实例内容」。点击后弹出「复制并新建」预填表单:业务内容字段(标题、事项类型、归属工时项目、生命周期、需求人、描述)照抄;状态、发起人、创建时间、实例编号重置,计划时间清空需重新填写;新实例记录「复制自 #原编号」并在标题旁显示标记。确认后生成新实例并插入列表首行,原实例不受影响。

首次引导:用户第一次进入实例列表时自动弹出 10 步引导:依次介绍新建、导入、切换视图、搜索筛选、自定义列、导出、存为场景、查看详情、右键复制新建、重看入口;全页半透明遮罩压暗并对应当前步骤聚光,气泡吸附在高亮元素旁(第 8 步行右侧、第 9 步行左侧浮层),顶部带三角箭头。右键步骤提供「试一试」;最后一步主按钮为「完成」。关闭后按用户维度记录,不再自动出现。顶栏 icon 调整:移除原帮助「?」icon;搜索框右侧保留「新手引导」书本图标可随时重看引导,其旁通知 icon 悬浮提示「异步任务通知」。原型不做持久化,每次刷新都会重新出现。原型演示区提供「全屏展示」,跳转后仅保留业务界面,交互与画布内一致。

不变项:左侧 180px、行高 35px、各区块高度口径沿用「左侧区域收窄+行高35」版本;勾选、排序、筛选、分页逻辑不变。

实例列表 右键菜单 复制新建 新手引导
原型演示

需求管理空间 · 工作事项实例列表

全屏展示 退出全屏
需求管理空间 工作事项 7 蔡

工作事项

导入 新建实例
{{ tab }}
#{{ ctx.row.id }} {{ ctx.row.title }}
复制新建
复制文本内容 {{ ctx.cellLabel }}
新页签打开链接
已清空,需重新填写
待开始 重置为初始状态,不复制原实例流程记录
附件 · 评论 · 审批记录 · 关联实例 · 已读状态
取消 创建新实例
新手引导 {{ guide.step }}/{{ guideSteps.length }}

{{ currentGuideStep.title }}{{ currentGuideStep.reqId }}

{{ currentGuideStep.hint }}
跳过 上一步 试一试 {{ guide.step >= guideSteps.length ? '完成' : '下一步' }}
数据行实测 {{ measured.row }}px 列表可视宽度 {{ measured.content }}px 本次已看引导 {{ guideSeen ? '是' : '否' }} (原型不持久化,刷新页面即重新出现;真实系统按用户记录,关闭后不再出现) 重置演示数据
原型演示

工作事项 · 流程详情与节点任务引导

全屏展示
验收要点

点击即可验证的行为

列表没有新增任何列,列宽与横向滚动与现状一致。
在任意实例行点击右键,鼠标位置弹出菜单,首行灰字为「#编号 标题」,菜单项依次为「复制新建」「复制文本内容」「新页签打开链接」;被右键的行高亮。
在「归属工时项目」单元格上右键点「复制文本内容」,剪贴板得到该项目名并提示已复制;菜单项右侧小字显示所在列名。
点「新页签打开链接」在新标签页打开该实例详情地址(inst_id 为该行编号),当前列表页不跳转。
右键菜单靠近列表右缘或下缘时自动向左 / 向上翻转,不超出列表区域。
点击空白处、滚动列表或按 Esc,右键菜单关闭;在表头、分页区右键不弹菜单。
点「复制新建」弹出预填表单:标题、类型、项目、生命周期、需求人、描述与原实例一致;计划时间为空;状态显示「待开始」。
「复制并新建」弹窗限制在业务内容区内;引导遮罩覆盖整个业务界面(含顶栏入口),均不覆盖右侧需求映射栏。
未填计划时间点「创建新实例」被拦截并提示;填好后新实例插入列表首行、编号递增,标题旁显示「复制自 #原编号」。
原型演示区「全屏展示」跳转到 ?mode=demo,业务界面铺满视口,交互与画布内演示一致;全屏页可「退出全屏」返回评审页。
每次刷新进入列表 0.6 秒后自动出现 10 步引导:新建 → 导入 → 切换视图 → 搜索筛选 → 自定义列 → 导出 → 存为场景 → 查看详情 → 右键复制新建 → 重看入口。
引导支持跳过 / 上一步 / 下一步;第 9 步为「试一试」演示右键后进入第 10 步;第 10 步主按钮为「完成」;点遮罩可关闭。
关闭引导后本次页面不再出现,刷新后重新出现(真实系统按用户记录);顶栏搜索框右侧「新手引导」书本图标可随时重看。
顶栏原帮助「?」icon 已移除;通知 icon(带角标)悬浮提示为「异步任务通知」。
引导气泡吸附在高亮元素旁,顶部带三角箭头指向目标:第 8 步「查看详情」气泡在首行右侧,第 9 步「右键菜单」气泡在首行左侧浮层。
引导出现期间右键、勾选、排序被遮罩拦截,关闭后恢复。
需求卡片与画布锚点有连线;R2 仅弹窗打开时、R3–R12 仅对应引导步骤显示时连线;需求栏收起时连线全部隐藏。