登录确认弹窗（方案 F）设计

日期：2026-08-10
适用范围：mobile-h5 员工登录页协议门禁确认
视觉 Demo：mobile-ui/zkxw-mobile-login-confirm-dialog-demo.html（登录采用 F；A–F 全部保留）
品牌 Token：对齐 docs/miniprogram-ui-spec-sanqiang.md §2（非 web-admin Fresh Mint）
关联：docs/superpowers/specs/2026-08-10-miniprogram-login-ui-design.md

1. 目标与约束

1.1 目标

用自定义确认弹窗替换登录页 uni.showModal，视觉对齐 Demo F（精简系统风）。
未勾选协议时，账号登录与微信授权登录均先弹出该确认窗。
mobile-ui 中 A–F 六套样例全部保留，作为后续其它场景弹窗选型资产；本次登录仅落地 F。

1.2 已确认选型

项	约定
登录确认样式	F · 精简系统风
样例资产	A–F 均保留在 `zkxw-mobile-login-confirm-dialog-demo.html`
协议正文链接	正文中《用户协议》《隐私政策》为快捷链接（品牌绿色），点击跳转对应协议页；登录页勾选行链接保留

1.3 硬约束

项	约定
主色确认按钮字色	`#0a9f6d`
禁止	使用 web-admin `#10b981`；不引入 Vant Dialog
遮罩	半透明深色，无 `backdrop-filter` 模糊
触达	底栏按钮高度建议 ≥ 44px

1.4 非目标

不实现 A/B/C/D/E 其它样式变体（仅 Demo 保留）
不改 mock 鉴权、协议页内容、登录表单布局
本期不做成全局命令式 API（如 showConfirm() 挂载到 uni）；登录页内组件即可

2. 视觉规格（F）

权威预览：Demo 卡片 F。

元素	规格
遮罩	`rgba(15, 30, 24, 0.32)` 全屏；点击关闭（等同取消）
卡片	居中；白底；圆角 14px；轻阴影
标题	「请先同意协议」；约 17px；加粗；居中；色 `#1f2a26`
正文	「登录前需阅读并同意《用户协议》和《隐私政策》。是否同意并继续登录？」；约 13px；色约 `#555` / muted；居中；行高 1.5
协议链接	《用户协议》《隐私政策》字色 `#0a9f6d`；可点击；与登录页勾选行一致跳转 `/pages/protocol/index?type=user
分割线	标题区与按钮区之间 `1px` `#e8e8e8`
按钮区	左右等分；中间竖分割线
取消	文案「取消」；字色 `#666`；透明底
确认	文案「同意并登录」；字色 `#0a9f6d`；字重 600；透明底

3. 交互

用户未勾选协议且触发「登录」或「微信授权登录」→ 打开确认弹窗（不进入登录流程）。
点「同意并登录」→ 将 agreed 设为 true → 关闭弹窗 → 继续原登录流程。
点「取消」或点遮罩 → 关闭弹窗 → agreed 不变 → 中止本次登录。
已勾选协议时 → 不弹窗，直接登录。
弹窗打开时页面禁止底层滚动穿透（catchtouchmove 或等价处理）。
点正文中《用户协议》/《隐私政策》→ navigateTo 协议页；不关闭确认弹窗（返回登录页后弹窗仍在，可继续同意或取消）；点击链接须 @click.stop，避免误触遮罩关闭。

4. 实现结构

4.1 文件

路径	职责
`mobile-h5/components/ConfirmDialog.vue`	新建：F 样式确认弹窗（props：`show` / `title` / `content` / 按钮文案；默认插槽可自定义正文，用于协议快捷链接；events：`confirm` / `cancel` / `update:show`）
`mobile-h5/styles/components/confirm-dialog.scss`	新建：遮罩与卡片样式（Token 与 Demo F 一致）
`mobile-h5/pages/login/index.vue`	改：`ensureAgree` 改为控制本地 `agreeDialogVisible`，去掉 `uni.showModal`
`mobile-h5/App.vue`	改：引入 `confirm-dialog.scss`
`mobile-ui/zkxw-mobile-login-confirm-dialog-demo.html`	改：标注「登录页采用 F」；A–F 均保留
`docs/miniprogram-ui-spec-sanqiang.md`	改（可选短注）：确认弹窗 Demo / 登录采用 F 的指向

4.2 组件接口（约定）

props:
  show: Boolean
  title: String（默认「请先同意协议」）
  content: String（无插槽时的纯文本兜底）
  cancelText: String（默认「取消」）
  confirmText: String（默认「同意并登录」）

slots:
  default — 自定义正文（登录页放入带协议链接的文案）

emits:
  update:show
  confirm
  cancel

登录页用 :show + @update:show（或等价）+ @confirm / @cancel 驱动 ensureAgree 的 Promise；正文用默认插槽渲染协议快捷链接，点击调用既有 openProtocol(type)。

4.3 与既有登录 Spec 的关系

2026-08-10-miniprogram-login-ui-design.md §4 曾写未勾选时 Toast；本规格覆盖该门禁交互：未勾选时改为 F 确认弹窗（与当前代码意图一致，并美化为自定义 F）。

5. 验收

未勾选协议点「登录」/「微信授权登录」→ 出现 F 样式弹窗（非系统 showModal）。
「同意并登录」后勾选态为开，并完成对应 mock 登录跳转。
「取消」或点遮罩 → 不登录、勾选仍为关。
已勾选时直接登录，无弹窗。
Demo HTML 仍可浏览 A–F；说明中写明登录采用 F。
弹窗正文中点击《用户协议》《隐私政策》可进入对应协议页；返回后确认弹窗仍可见。

6. 后续扩展（非本期）

其它页面若需确认弹窗，优先对照同一 Demo 选型（A–F），再复用或扩展 ConfirmDialog；不默认改 F 的登录专用文案与布局。

2026-08-10-login-confirm-dialog-design.md 5.6 KB Link permanente Histórico Em bruto