看板、列表和日历之间切换时,上下文丢失通常发生在筛选被重置、分组被清空、当前任务被取消选中,或滚动位置回到顶部。要避免这些问题,需要把视图当作同一批任务的不同呈现方式:筛选条件、分组维度、排序规则和当前定位对象作为跨视图共享的状态统一管理,视图只负责改变呈现形态。本文按共享状态定义、切换入口设计、状态映射与降级、角色分工、走查示例和上线验收的顺序,给出一套可落地的实施方法,适用于团队日常执行跟踪中在三种视图间查看同一批任务的场景。
要点总览(TL;DR)
- 把筛选条件、分组维度、排序规则和当前选中任务定义为跨视图共享状态,视图只改变呈现形态,切换时状态统一读取。
- 切换入口固定在任务区域顶部同一位置,用分段控件、标签页或下拉承载,并以锚点任务加相对偏移恢复定位。
- 目标视图无法表达的筛选或分组保留在共享状态中并给出可见提示,选中任务在日历等视图中以高亮或未排期区域承接。
- 上线前按筛选延续、分组排序一致、选中与详情保持、滚动恢复、链接还原等检查项逐项验收。
先定共享状态:切换时哪些上下文必须延续
上下文能否延续,取决于切换前是否把“用户正在看什么”记录为可复用的状态。建议先区分两类状态:共享状态跟随任务集合和用户关注点,跨视图保留;视图私有状态只对某个视图有意义,切换时保存、返回时恢复,不强行映射到其他视图。
共享状态应覆盖以下字段,并统一字段口径,避免同一条件在不同视图里解释不一致:
| 状态类别 | 具体字段 | 口径要求 | 跨视图处理 |
|---|---|---|---|
| 筛选条件 | 负责人、状态、标签、时间范围 | 字段取值来自同一数据源,时间范围明确按创建时间还是截止时间 | 全部视图保留,目标视图无对应维度时降级并提示 |
| 分组维度 | 按负责人、按状态、按标签等 | 分组字段与排序字段分开定义 | 看板与列表直接对应;日历按日期轴呈现,分组转为辅助标识 |
| 排序规则 | 截止日期、优先级、更新时间等 | 升降序明确,空值排序位置统一 | 列表与日历按同一规则排列;看板列内按同一规则排序 |
| 当前定位对象 | 选中任务、打开的详情面板 | 以任务唯一标识记录,不依赖行号或列位置 | 切换后保持选中与详情打开,目标视图自动定位到该任务 |
视图私有状态单独存放,不与共享状态混在一起:看板的列宽、折叠状态和滚动位置,列表的列显示配置和滚动位置,日历的月/周/日粒度和当前日期。返回原视图时恢复这些状态,能让用户回到离开时的位置;把它们写入共享状态,反而会在其他视图产生无意义的参数。
这份清单的完成标志是:每个字段都有唯一归属(共享或私有)、明确口径和跨视图处理方式,后续开发和验收都以它为依据。
设计切换入口:位置、形态与触发方式
切换入口的首要要求是位置稳定。把视图切换控件固定在任务区域顶部同一位置,看板、列表、日历共用同一个控件区域,用户不需要在切换后重新寻找入口。入口旁边可放置当前筛选条件的摘要,让用户在切换前就知道自己处在什么任务集合中。
控件形态按视图数量和空间选择:
- 分段控件:适合三个左右视图、名称较短的情况,当前视图高亮,一次点击完成切换,认知成本最低。
- 标签页:适合视图较多或需要与页面其他标签共存的场景,切换后内容区整体替换。
- 下拉菜单:适合空间紧张或视图数量多的情况,代价是多一次点击,建议在下拉项中显示视图名称和简短说明。
切换时保留定位锚点。若当前有选中任务,切换后以该任务为锚点滚动到可见区域;若没有选中任务,则保留原视图的滚动位置,返回时恢复。实现上可记录“锚点任务标识 + 相对偏移”,比记录绝对滚动像素更稳定,因为不同视图的行高和布局并不一致。
让 URL 携带视图类型、筛选条件、分组和排序参数。这样刷新页面、浏览器前进后退、把链接发给同事,都能还原相同的任务集合和呈现方式。参数命名保持稳定,新增筛选项时追加参数而不是改变已有参数含义,避免旧链接失效。
切换后的筛选、分组与定位延续怎么做
切换动作本身应按固定步骤处理,而不是让每个视图各自重新查询:
- 读取共享状态:切换前从统一的状态容器读取筛选、分组、排序和当前选中任务。
- 按目标视图能力映射:看板把分组维度映射为列,列表映射为分组行或分组表头,日历把时间范围映射为日期区间、把任务按截止日期落到对应日期。
- 处理不支持项:目标视图无法表达的筛选或分组,保留在共享状态中但暂不生效,并在视图顶部显示提示,例如“当前日历视图按截止日期展示,标签分组暂不适用”。提示要说明哪些条件未生效,而不是静默丢弃。
- 恢复定位:目标视图加载完成后定位到选中任务,高亮显示并保持详情侧栏打开;任务不在当前可见范围时,滚动到其所在位置或给出“已定位到某日期/某分组”的提示。
- 处理空结果:筛选后无任务时,显示当前生效的筛选条件摘要和清除入口,让用户知道是条件过窄还是数据为空。
降级规则需要提前约定,常见对应关系如下:
| 源视图状态 | 目标视图 | 处理方式 |
|---|---|---|
| 按标签分组 | 日历 | 分组不生效,任务按截止日期分布,标签以颜色或图标标识,顶部提示分组未应用 |
| 按截止日期排序 | 看板 | 列内按截止日期排序,列顺序仍由分组维度决定 |
| 选中任务无截止日期 | 日历 | 任务进入“未排期”区域,切换后提示该任务未在日期轴上定位 |
| 时间范围筛选 | 日历 | 日历初始定位到筛选范围内的日期,范围外日期置灰或不可翻页 |
完成标志是:任意两个视图之间切换,共享状态不丢失;无法对应的条件有可见提示;选中任务在目标视图中可被找到。
角色分工与交付物
规则要落到人,才能避免“大家都知道要保留筛选”却没人对结果负责。建议按以下分工推进:
| 角色 | 职责 | 交付物 |
|---|---|---|
| 产品/业务负责人 | 定义共享字段清单、字段口径和降级规则,确认哪些状态属于视图私有 | 共享上下文与视图私有状态字段表、降级规则说明 |
| 研发 | 实现统一状态管理、视图映射、URL 参数和定位恢复 | 状态管理设计说明、交互实现、参数约定文档 |
| 测试 | 按场景验证筛选、分组、排序、选中任务和链接还原 | 切换上下文验收用例与测试记录 |
| 团队代表 | 在日常执行跟踪中试用,反馈定位和提示是否清楚 | 试用反馈与问题清单 |
在工具承载层面,如果团队使用 ONES 管理 work item,可把上述共享状态对应到工作项视图的筛选、分组和排序设置,让看板、列表、日历等视图读取同一批工作项数据;切换视图时以工作项标识维持选中与详情打开。具体支持范围以团队实际使用的版本和配置为准,实施前用一条真实任务走一遍切换流程确认。
示例:看板、列表、日历之间切换同一批任务
以下为演示情景,用于说明状态延续的走查过程。团队在每日执行跟踪中,负责人小张需要确认自己名下本周到期的任务。
- 在看板筛选并选中任务:小张在看板视图设置筛选“负责人=自己、状态=进行中、截止日期=本周”,看板按状态分列,他点开“接口联调”任务的详情侧栏。
- 切到列表:点击顶部切换控件的“列表”,筛选条件原样保留,列表按截止日期排序,“接口联调”保持选中并高亮,详情侧栏仍打开,滚动位置定位到该任务所在行。
- 切到日历:切换到“日历”,时间范围自动定位到本周,“接口联调”按截止日期落在周四,以高亮标识;由于看板的分组维度是状态,日历顶部提示“状态分组在日历中不适用,已按截止日期展示”。
- 返回看板:切回看板,筛选、分组和排序恢复,看板滚动到“进行中”列并高亮“接口联调”,列宽和折叠状态与离开时一致。
这个走查覆盖了共享状态延续、视图私有状态恢复、降级提示和定位高亮四类行为,可作为验收用例的模板。
完成检查:上线前逐项验证
上线前按以下清单逐项核对,每项都要有明确的通过标准:
| 检查项 | 通过标准 |
|---|---|
| 筛选条件延续 | 在看板设置负责人、状态、标签、时间范围后切到列表和日历,条件全部保留且结果集一致 |
| 分组与排序延续 | 分组维度和排序规则在支持该能力的视图间一致;不支持时有可见提示 |
| 选中任务与详情面板 | 切换后选中任务仍高亮,详情侧栏保持打开,内容对应同一任务 |
| 定位与滚动恢复 | 返回原视图时回到离开时的列和滚动位置,不跳回顶部 |
| 不支持项提示 | 无法映射的条件有明确说明,不出现静默丢弃 |
| 空结果处理 | 无匹配任务时显示生效条件摘要和清除入口 |
| 链接还原 | 复制当前链接在新窗口打开,视图类型、筛选、分组、排序与复制时一致 |
| 回退行为 | 浏览器后退回到上一视图时,状态与离开时一致 |
全部检查项通过,且团队代表在真实任务上完成一次看板、列表、日历的往返切换,即可认为上下文保持机制达到可用状态。后续新增视图或筛选项时,回到共享状态字段表补充口径,再按本清单回归验证。
常见问题
切换视图后筛选条件被重置,通常是什么原因?
常见原因是每个视图各自维护一份查询条件,切换时目标视图按默认条件重新查询。解决思路是把筛选、分组、排序和当前选中任务放进统一的状态容器,切换动作只读取共享状态并映射到目标视图,不再由各视图独立初始化。同时检查 URL 参数是否携带这些条件,刷新或回退时才能还原。
目标视图不支持某个分组维度时,应该丢弃还是保留?
建议保留在共享状态中但暂不生效,并在视图顶部提示哪些条件未应用。例如日历按截止日期分布任务,状态分组无法直接表达,可以提示“状态分组在日历中不适用,已按截止日期展示”。静默丢弃会让用户误以为筛选已失效,返回原视图时也难以判断条件是否还在。
选中任务在日历视图中没有截止日期,怎么保持定位?
可以把这类任务放入“未排期”区域,并在切换后提示该任务未在日期轴上定位。共享状态中以任务唯一标识记录选中对象,日历加载完成后先尝试按截止日期定位,找不到对应日期时落到未排期区域并保持高亮与详情打开,用户仍能确认自己关注的是哪条任务。
滚动位置应该记录像素还是记录锚点任务?
建议记录锚点任务标识加相对偏移。不同视图的行高、列宽和布局并不一致,绝对滚动像素在切换后往往指向错误位置;以当前可见或选中的任务为锚点,返回时滚动到该任务附近,定位更稳定。没有选中任务时,可记录原视图的滚动位置作为视图私有状态,返回时恢复。
上线后新增视图或筛选项,如何避免旧链接失效?
URL 参数命名保持稳定,新增筛选项时追加参数,不改变已有参数的含义。共享状态字段表同步补充新字段的口径和跨视图处理方式,再按验收清单回归筛选延续、链接还原和回退行为。这样旧链接打开后仍能还原原有视图与条件,新参数缺省时按默认值处理。
