|
|
@@ -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 规范已追加登录页指向。
|
