跳到正文

大型后台管理系统如何把业务操作做可靠(15):桌面、移动端与宿主能力适配

大型后台管理系统如何把业务操作做可靠

  1. 把业务规则写进订单和退款模型
  2. 并发编辑、草稿合并与搜索乱序
  3. 让报表说清统计口径与数据进度
  4. 退款超时后的幂等与对账
  5. 可恢复的导入导出任务
  6. 批量操作的预览、执行与恢复
  7. 多租户授权、撤权与审计
  8. 旧页面、接口和审批模板如何一起演进
  9. 沿真实操作验收可靠性与性能
  10. 设计规范和组件库如何落到日常开发
  11. 脚手架、接口契约与前后端联调
  12. 构建产物、持续交付与灰度回退
  13. 低代码表单与审批流程的执行边界
  14. 功能投放、权限与灰度人群
  15. 桌面、移动端与宿主能力适配(当前)
  16. 多个前端应用如何集成与独立交付
  17. 复杂编辑器的状态、命令与协作

门店主管在桌面上可以用宽表格比较几十笔订单,也希望在手机上批准一笔退款。两种任务使用同一套订单规则,但屏幕、输入和宿主能力会改变实际工作路径。

按任务决定每端支持什么

先列出使用频率、现场条件和出错成本。桌面支持高密度比较、键盘、批量录入和复杂配置。手机优先处理查一条订单、查看附件和审批等短任务。必须支持的大表格可以给关键列和详情展开,保留必要比较能力。窄屏与放大字号要实际测试,二维布局的例外也要限定在必要组件内。W3C 关于内容重排的说明

在适配层显式表达宿主能力

移动 Web、应用内 WebView 或小程序可能有不同的会话、上传、下载、导航和返回机制。业务页面只调用经过定义的能力,例如选择凭证、打开任务详情或返回。适配层运行时探测,再决定走宿主能力还是可用的替代路径。

chooseEvidence:
  if host supports picking evidence:
    return host.pickFile()
  if web file input is available:
    return chooseFromBrowser()
  return unsupportedWithNextAction()

授权被拒绝、宿主版本太旧和用户主动取消,需要返回不同结果。页面后台停留后恢复时先刷新权限、任务进度和数据时效。保留未提交输入,在网络恢复后继续查看已提交任务。写操作重试沿用原操作标识,以免在用户从手机切回电脑后重复执行。

把同一条审批任务拆成两端的路径

桌面端的主管可以先筛选一组退款,逐条查看详情。手机端可能从通知直接进入一笔退款。两端都要提供金额、原因、附件、当前状态和提交结果。差异在于如何抵达、如何对比,以及在有限屏幕上如何显示判断依据。手机确认页要避免让关键金额和审批动作分散在多个互不关联的区域。

任务 桌面路径 移动路径
找到待办 多条件筛选、跨记录对比 待办列表或通知深链接
核对依据 详情与附件并排 摘要和可返回的附件预览
提交后确认 回到列表并更新记录 留在结果页,可查询任务状态
网络中断 保留筛选和未提交输入 恢复会话后继续查看同一笔任务

深链接带目标 ID 和必要导航信息,实际读取仍检查当前账号和租户。若登录后发现这笔待办已经被转交,页面应显示最新状态并提供返回入口。可以共享任务模型和请求层,同时保留各端符合工作场景的布局。

按能力设计返回值和降级

宿主选择凭证的接口可以返回成功、主动取消、权限拒绝、宿主不支持和运行失败。取消时保留表单,权限拒绝时解释怎样继续,不支持则给浏览器路径或桌面处理入口。只通过版本号判断宿主能力会漏掉灰度和授权差异,运行时探测更贴近当前会话。

在 App 后台停留期间,会话可能已过期,审批状态也可能被其他人改变。恢复时先刷新主体与记录。若草稿仍有效,保留原输入并提示差异。若请求已经发送但结果未知,先查询原操作,别自动重新执行。端侧还需处理返回手势、系统键盘、文件选择器退出与屏幕旋转。用对应设备录下完整路径,再针对其中可模拟的状态写回归。

用实际设备验收完整路径

从通知进入订单详情,再回到列表,核对筛选与滚动位置。打开输入法、旋转屏幕和放大字号时检查按钮、错误提示和焦点。附件上传要测试权限拒绝、弱网、中途退出与重新进入。桌面补键盘和批量操作,手机检查高风险按钮的可触达性和确认信息是否可读。宿主差异需要在真实容器验证,浏览器窄屏只能覆盖布局部分。

把宿主通信失败做成可恢复的状态

以选择退款凭证为例,网页向宿主发出选择请求后,需要知道哪个回调属于当前页面、当前订单和当前尝试。用户取消后再次选择,第一次请求的迟到回调不应替换第二次的文件。适配层可用请求 ID 关联回调,并在页面卸载、切换租户或超过等待时限时让该请求失效。

chooseEvidence(order):
  requestId = startRequestFor(order.id, currentTenant)
  result = await hostOrWebPicker(requestId)
  if requestIsCurrent(requestId, order.id, currentTenant):
    applyPickerResult(result)

选择文件和上传文件也是两个阶段。选中本地文件后,可能在上传中退出页面。如果宿主提供稳定的临时引用,可以按权限和保留期恢复。没有稳定引用时,应请用户重新选择,并保留其他已填字段。上传成功后保存服务端附件 ID,重新打开时按订单和当前身份读取。

验收矩阵可以按设备、入口与中断点组合。桌面浏览器走列表进入,移动浏览器走深链接,应用内从通知进入。分别在未登录、文件选择中、提交后响应未知时中断。观察回来后究竟恢复的是未提交草稿,还是已受理任务。测试要同时看业务最终状态和用户接下来可用的操作。

总结

跨端共用业务规则、接口与状态模型。界面按各端任务分配,宿主差异集中在能力适配层,恢复和错误路径按真实设备验收。