docs: link miniprogram login demo and mobile-h5 page

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-10 14:44:42 +08:00
1 parent c7794f714b
commit 01e4b3b494
@@ -18,6 +18,9 @@
 - 实现计划：`docs/superpowers/plans/2026-08-10-mobile-h5-vant-ui.md`
 - 信息架构：单一工作台 + 权限菜单卡片（上 Icon 下标题）；样板页见 `mobile-h5/pages/demo/*`
 - Token：仍遵循本文 §2 三墙色板；**禁止**使用 web-admin `#10b981`
+- 登录页 Demo：`mobile-ui/zkxw-mobile-login-ui-demo.html`
+- 登录页设计：`docs/superpowers/specs/2026-08-10-miniprogram-login-ui-design.md`
+- 工程页：`mobile-h5/pages/login/index.vue`（方案 B：居中品牌 + 白卡片 + 微信次要按钮）

 ---

@@ -0,0 +1,106 @@
+# 小程序登录页 UI 设计
+
+> 日期：2026-08-10  
+> 适用范围：中科兴皖员工专用小程序（单端，无供应商/配送员端）  
+> 视觉 Demo：`mobile-ui/zkxw-mobile-login-ui-demo.html`  
+> 品牌 Token：对齐 `docs/miniprogram-ui-spec-sanqiang.md` §2（**非** web-admin Fresh Mint）  
+> 关联：`docs/superpowers/specs/2026-08-10-mobile-h5-vant-ui-design.md`
+
+---
+
+## 1. 目标与约束
+
+### 1.1 目标
+
+1. 提供员工登录入口：账号密码登录为主，微信授权登录为次。
+2. 固化布局方案 B（居中品牌 + 白卡片表单 + 底部微信次要按钮）的视觉与交互。
+3. 以可打开的 HTML Demo 作为后续 uni-app / Vant 实现的权威参考。
+
+### 1.2 已确认需求
+
+| 项 | 约定 |
+|----|------|
+| 受众 | 公司员工，仅一套登录 UI |
+| 主登录 | 用户名 / 工号 + 密码（与 web-admin 账号一致） |
+| 次登录 | 微信授权登录（按钮前为微信官方 Logo） |
+| 辅助 | 可含《用户协议》《隐私政策》勾选 |
+| 不做 | 忘记密码、注册、记住密码；本期不联调真实 API |
+
+### 1.3 硬约束
+
+| 项 | 约定 |
+|----|------|
+| 主色 | `#0a9f6d` / `#087f57` / `#e9f9f2` |
+| 禁止 | 使用 web-admin `#10b981` 作为主色 |
+| 基线宽度 | 375px，兼容 414px |
+| 触达 | 主按钮高度 ≥ 44px |
+| 微信图标 | `mobile-ui/assets/wechat-logo.png`（由 `wx-logo.jpeg` 去黑底导出） |
+
+---
+
+## 2. 布局方案（已选 B）
+
+### 2.1 结构（自上而下）
+
+1. **品牌区（居中）**：Logo 方标 +「中科兴皖」+ 副文案「员工工作台登录」  
+2. **表单白卡片**：账号 → 密码（可显隐）→ 主色「登录」→ 协议勾选  
+3. **次要区**：「或」分隔线 → 描边「微信授权登录」（左侧微信 Logo）
+
+### 2.2 背景
+
+- 页面底：`#f5f8f7`，叠加浅绿 / 大麦黄径向渐变光斑（与 mobile-h5 Demo 氛围一致）
+- **不**使用大色块绿渐变 Header（方案 A / C 已否决）
+
+### 2.3 未选方案摘要
+
+| 方案 | 说明 | 结论 |
+|------|------|------|
+| A Header + 浮卡 | 与工作台顶栏一致 | 未选 |
+| **B 居中卡片** | 轻背景 + 居中品牌 + 白卡片 | **已选** |
+| C 大品牌区 + 抽屉 | 上半屏强品牌 | 未选 |
+
+---
+
+## 3. 组件与字段
+
+| 元素 | 规格 |
+|------|------|
+| 账号 | label「账号」；placeholder「请输入用户名 / 工号」 |
+| 密码 | label「密码」；placeholder「请输入密码」；右侧明文/密文切换 |
+| 登录按钮 | 主色实心，文案「登录」；高度 44px；圆角约 12px |
+| 协议 | 圆形勾选 +「已阅读并同意《用户协议》和《隐私政策》」；链接色为主色 |
+| 微信按钮 | 白底描边；左侧 `wechat-logo.png`；文案「微信授权登录」 |
+
+---
+
+## 4. 交互与状态
+
+1. **协议门禁**：未勾选时，点击「登录」或「微信授权登录」均提示「请先同意用户协议与隐私政策」（Toast）。
+2. **空校验**：账号或密码为空时提示补全。
+3. **失败**：账号或密码错误时 Toast 或字段级错误文案（Demo 可模拟）。
+4. **加载**：提交中按钮禁用并显示 loading，防重复点击。
+5. **成功（Demo）**：Toast「登录成功」即可；真实落地后跳转工作台首页。
+6. **微信授权（Demo）**：仅模拟点击反馈；真实落地调用小程序登录能力后再换票。
+
+---
+
+## 5. 交付物
+
+| 角色 | 路径 |
+|------|------|
+| HTML Demo | `mobile-ui/zkxw-mobile-login-ui-demo.html` |
+| 微信 Logo | `mobile-ui/assets/wechat-logo.png`、`wechat-logo-32.png`；工程内 `mobile-h5/static/wechat-logo.png` |
+| 本设计说明 | `docs/superpowers/specs/2026-08-10-miniprogram-login-ui-design.md` |
+| 实现计划 | `docs/superpowers/plans/2026-08-10-miniprogram-login-ui.md` |
+| uni-app 登录页（Mock） | `mobile-h5/pages/login/index.vue` |
+
+后续业务实现 SHALL 以 Demo 为准；Token SHALL 以三墙色板为准。
+
+---
+
+## 6. 非目标（后续另开）
+
+- 后端账号 / 微信绑定与换票接口联调
+- 《用户协议》《隐私政策》正文页内容撰写
+
+**已落地（Mock，非真实 API）：** `mobile-h5` 登录页 UI、mock 鉴权、启动路由、工作台退出；UI 规范已追加登录页指向。