Skip to content

[Bug]: 方案一:审批栏改为页面加载后自动打开,去掉滚动触发首次弹出 #532

Description

@yinlianghui

背景

当前审批单底部审批栏(approval drawer)需要用户滚动到底部才弹出,存在误触发 Bug 和用户体验问题(详见 #531)。本 Issue 是方案一(方案A),与 #531(方案二)并行对比测试,最终选择效果更好的方案。

老版本使用原生 JS+CSS 实现,审批栏可以关闭,关闭后滚动到底可重新打开,无动画无体验问题。

核心思路

保留 Drawer 组件(改动小,方案A),改为页面 inited 后自动打开,不再依赖滚动触发首次弹出。如果测试效果不理想,再切换到方案B(去掉 Drawer,改为内嵌固定组件)。

inbox 和 draft 统一规则

维度 inbox(待审批) draft(草稿)
右下角浮动按钮 显示 ���终 hidden(硬性规则,"审批"语义不适用于草稿)
底部 Drawer 页面加载后自动打开 页面加载后自动打开
Drawer 可关闭 可关闭 可关闭
关闭后重新打开 浮动按钮点击 + 滚动到底 仅滚动到底(无浮动按钮)

注意:draft 页面浮动按钮虽然 hidden,但 btn.click() 仍可正常触发 Drawer 打开,hidden 不影响 JS 事件。

其它设计决策

  • 内容多少不区分:不管表单内容多少(有无滚动条),统一页面加载后自动打开 Drawer
  • 手机端统一:手机端和 PC 端使用同一套逻辑,不区分

关闭后滚动监听修复

关闭 Drawer 后保留滚动到底自动重新打开的能力,但修复误触发 Bug:

  1. scroll 事件加方向判断(通过前后 scrollTop 差值)
  2. 修正 isDrawerOpen 选择器
  3. 增加 hasTriggered 防重复触发标记
  4. isAtBottom 增加 scrollHeight > clientHeight 前置条件
  5. 删除打开后的自动 scrollToBottom 动画

注意:以上修复代码直接包含在本方案的 PR 中,不依赖方案二的 PR。

提交按钮联动

Drawer 自动打开后 instance_approval 表单已在 DOM 中,提交流程无影响。用户关闭 Drawer 后点提交按钮,仍会触发 steedos-approve-button click 重新打开 Drawer,流程与当前一致。如果未来切换到方案B(去掉 Drawer 改为内嵌),提交按钮的 action 链路需要重写。

改动清单

分支:6.10

涉及文件:

  • packages/@steedos-widgets/amis-lib/src/workflow/flow.js
  • packages/@steedos-widgets/amis-lib/src/workflow/approve.js
文件 改动 说明
flow.js 第1330-1337行 inited 事件中增加延时 btn.click() 页面加载后自动打开
flow.js getScrollToBottomAutoOpenApproveDrawerScript 重写(包含滚动监听修复) 关闭后滚动到底正确重新打开
flow.js getApproveButton draft 的 hidden 规则不变 硬性规则
approve.js 第870-882行 删除 scrollToBottom 自动滚动 去掉打断用户的动画
approve.js Drawer schema 保留 closeOnEsc、closeOnOutside、取消按钮 Drawer 可关闭

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions