背景
当前审批单底部审批栏(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:
- scroll 事件加方向判断(通过前后 scrollTop 差值)
- 修正 isDrawerOpen 选择器
- 增加 hasTriggered 防重复触发标记
- isAtBottom 增加 scrollHeight > clientHeight 前置条件
- 删除打开后的自动 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 可关闭 |
背景
当前审批单底部审批栏(approval drawer)需要用户滚动到底部才弹出,存在误触发 Bug 和用户体验问题(详见 #531)。本 Issue 是方案一(方案A),与 #531(方案二)并行对比测试,最终选择效果更好的方案。
老版本使用原生 JS+CSS 实现,审批栏可以关闭,关闭后滚动到底可重新打开,无动画无体验问题。
核心思路
保留 Drawer 组件(改动小,方案A),改为页面 inited 后自动打开,不再依赖滚动触发首次弹出。如果测试效果不理想,再切换到方案B(去掉 Drawer,改为内嵌固定组件)。
inbox 和 draft 统一规则
注意:draft 页面浮动按钮虽然 hidden,但
btn.click()仍可正常触发 Drawer 打开,hidden 不影响 JS 事件。其它设计决策
关闭后滚动监听修复
关闭 Drawer 后保留滚动到底自动重新打开的能力,但修复误触发 Bug:
注意:以上修复代码直接包含在本方案的 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.jspackages/@steedos-widgets/amis-lib/src/workflow/approve.js