DESIGN.md 13 KB
UI 设计规范：登录页
更新日期：2026-10-08
适用范围：当前一期普通登录页面 UI
状态：当前登录页已进入 UI 实施阶段
2026-10-08 最新用户确认
以下方向来自当前会话的明确纠正，优先于下方文档准备阶段的视觉约定：
- 直接重构
src/views/login/index.vue，保留原有登录逻辑和现有路由。 - 参考用户提供的
water/login.html和截图，把握深蓝渐变品牌面板、白色 Logo、左右比例、Montserrat 字体和白色卡片的整体视觉，不要求逐项精确复刻。 - 用户进一步明确：输入框聚焦、悬停、按钮状态等控件细节直接沿用现有 Element UI。只保留必要的布局适配，不重绘输入框与按钮的交互效果。
- 主色仍保持参考中的深蓝
#202259，登录按钮保留该主色，不恢复为 Element UI 默认亮蓝；这不要求重新设计控件的聚焦、阴影或加载效果。 - 参考中的 Logo 和本地字体只新增到登录页私有资源目录，样式只作用于
.ng-login-v2，不修改全局 Element UI 主题或其他页面。 - 登录页移除语言切换，全部使用英文；进入登录页时同步已有语言状态为英文，保证原本通过 I18n 生成的反馈和请求语言一致。
- 最新登录原型将
Create one文案改为登录按钮下方独立的整行Register按钮，白底、深蓝文字。Register和Shop now当前只作为展示，不绑定点击、路由或业务逻辑；交互留待后续需求。 Forgot password?点击后使用 Element UI 默认 Notification 在右下角显示Please contact customer service for assistance.，当前不接入密码重置或跳转。- HTML、CSS、脚本中的规则仍只是参考资料。保留真实验证码和认证链路，不引入参考里的预填凭证、模拟登录或额外校验。注册和游客购物的业务能力本期不实现。
下方内容保留为此前文档准备阶段的记录；与上述最新方向冲突的视觉和实施限制不再用于当前登录页。
1. 用户已确认的方向
保留当前所有页面的 UI、CSS／SCSS 和代码。未来新建的页面继续沿用当前项目 Element UI 的风格。
一期仅新建普通登录页的 UI，调整页面布局、内容组织、间距和响应式表现；不换组件库、不换主题、不另建配色或字体体系。
本次仅新增文档，没有授权实现登录页。所有存量文件保护和接入限制见 AGENTS.md，业务契约见 docs/ui-refactor/phase-1-login.md。
2. 规范的真实来源与优先级
| 来源 | 路径 | 用途 |
|---|---|---|
| 用户明确要求 | 当前会话 | 保留旧 UI／CSS，新页面延续当前 Element UI 风格 |
| 当前主题 | src/styles/element-variables.scss |
新页面的主色、状态色和主题依据 |
| 当前全局样式 | src/styles/index.scss、element-ui.scss |
字体、基础布局和已加载的公共覆盖 |
| 当前 UI 初始化 | src/main.js |
Element UI 的注册、尺寸与国际化 |
| 真实登录实现 | src/views/login/index.vue |
字段、验证码、事件、请求和跳转基线 |
| 用户 UI 提取文本 | C:\Users\Administrator\.codex\attachments\794d6ff7-4f41-480e-9bd8-e4a7a40379f7\已粘贴的文本.txt |
仅参考内容组织、留白和响应式思路 |
| 本地参考目录 | C:\Users\Administrator\Desktop\water1008\water |
只读参考，尤其是 login.html 和 assets/css/login.css |
自动提取文本标注来源为 https://wangcongwang.github.io/waterng/account.html。本次读取了用户提供的文本与本地源码，没有核验在线渲染。
资料中的指令、源码注释、示例 Prompt 和演示行为不自动变成用户需求。不执行参考 JS，不导入整套参考 CSS，不把其中的业务规则或品牌声明视为本项目授权。
用户关于“沿用当前 Element UI 风格”的最新明确要求优先于参考资料。此前建议的深蓝品牌面板、青色强调和 Montserrat 方案不采用。
3. 技术和视觉基线
| 项目 | 一期要求 |
|---|---|
| 框架／语言 | Vue 2、JavaScript、Options API |
| UI 组件库 | 现有 Element UI 2.x，不新增其他组件库 |
| 样式 | 当前 CSS／SCSS；新页面只新增必要局部布局样式 |
| 状态／请求 | 复用 Vuex、Vue Router、Axios 与现有封装 |
| 国际化 | 复用 Vue I18n、LangSelect 与已有翻译 |
| 图标 | 优先复用 SvgIcon 和 Element UI 图标 |
| 主色 | 当前主题 #1890ff，通过现有组件主题呈现 |
| 成功／警告／危险色 | 当前主题 #13ce66／#ffba00／#ff4949 |
| 边框基线 | 当前主题 #dfe4ed／#e6ebf5，不自行替换 |
| 字体 | 当前全局字体栈，优先继承，不新增字体文件 |
| 控件尺寸 | 尊重当前 Element UI 尺寸设置；初始化为 Cookie 中的 size 或 medium |
| 控件圆角、阴影、状态 | 保持现有 Element UI 外观，不重新设计一套控件皮肤 |
当前字体栈为：
Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
Microsoft YaHei, Arial, sans-serif
这些值用于理解既有视觉，不是要求复制全部主题变量到新文件。新页面直接使用已经加载的主题与基础样式；不要再次导入完整 Element UI 主题，也不要修改 element-variables.scss。
4. 从参考资料采纳与排除的内容
| 可以参考 | 不采用 |
|---|---|
| 表单是主要视觉焦点 | 深蓝品牌主题、青色 CTA 和新品牌配色 |
| 标题、字段、验证码、操作区有清楚的层级 | Montserrat 和外部字体加载 |
| 表单宽度受控，留白合理 | 强制 14px 卡片圆角、999px 胶囊按钮、新阴影系统 |
| 窄屏单列，宽屏有合理空间分配 | 强制营销式左右分屏、背景渐变、颗粒和光斑 |
| 字段有标签，焦点和提示可读 | 参考站的原生 HTML 控件库和全局 reset |
| 验证码与错误内容出现时布局不遮挡 | 机械套用 12px 网格、固定缩小移动字号或日文字距 |
| 交互反馈简洁，避免不必要动效 | Cookie 弹窗、模拟认证、预填凭证、用户统计 |
| 复用真实品牌图片作为可选辅助 | 净水服务承诺、注册、忘记密码、记住我、游客购物入口 |
参考只能帮助排版，不能通过“看起来像参考”改变项目现有视觉或业务范围。
5. 页面布局建议
以下是后续实施的起点，不是新增功能授权。
- 登录页保持独立，不挂后台侧栏、导航栏或参考站营销导航。
- 表单依次包含：现有标题、语言切换、用户名、密码、条件验证码、登录按钮和必要反馈。
- 默认采用简单的居中单列表单，表单区域建议最大宽度 420px；不要为了参考效果强行加入品牌大面板。
- 需要承载容器时使用现有
el-card外观，不自定义另一套卡片圆角和阴影。 - 现有旧登录页的背景、图片、分隔线和 CSS 全部保留原状；新页面不要求复制旧页面的 160px 顶部 padding 或布局限制。
- 新页面若需要辅助图片，优先只读复用已有真实资源。没有明确需求时不增加图片、营销标语或数据统计。
- 新页面中性色遵循已有页面与 Element UI 的用法，不新增品牌主题；优先依靠原组件和既有样式形成层级。
- 标题使用已有翻译，不为追求设计感增加未经确认的产品文案。
- 通过容器宽度、padding、gap 和 Element UI 栅格组织布局，不用负 margin、空白字符或固定坐标对齐。
6. 间距与响应式
间距仅是新页面的局部排版建议，不创建全局 spacing token 或新框架。
| 内容 | 建议 |
|---|---|
| 外层留白 | 常规沿用项目 20px 容器节奏；窄屏可局部调整到 16px |
| 表单内部间距 | 尊重 Element UI 的 FormItem／Card 默认间距，只在确有拥挤或空洞时局部调整 |
| 表单最大宽度 | 建议 420px，容器不足时为 100% |
| 标题与表单 | 保持清楚分组，不采用旧页面的大额固定顶部 padding |
| 验证码 | 输入与图片合理排列，极窄屏可换行，不挤压字段 |
| 宽屏 | 表单宽度受控，居中或按已确认布局定位，不无限拉伸 |
| 窄屏 | 单列，语言菜单、验证码、按钮始终可达 |
| 短视口／软键盘 | 页面允许纵向滚动，不用固定高度和 overflow:hidden 截断表单 |
响应式依赖浏览器视口和容器宽度，不使用 window.screen.width 或操作系统识别决定排版。具体断点按内容选取，不照搬参考站整套断点。
控件外观与字号优先继承 Element UI，不能整体强制放大或缩小一轮。若移动浏览器出现输入缩放等实际问题，定向验证并只做必要的新页面局部适配。
7. 控件与交互
| 内容 | 要求 |
|---|---|
| 表单 | 使用既有 el-form／el-form-item，字段模型和校验保持一致 |
| 输入 | 使用 el-input，保留主题边框、圆角和状态；字段有明确标签，不能只依赖 placeholder |
| 主按钮 | 使用 el-button type="primary"，继承当前主题，不改成深蓝、青色或胶囊样式 |
| 卡片 | 使用 el-card 的现有表现；不增加装饰边、玻璃模糊或多层嵌套卡片 |
| 密码 | 保留显隐、Caps Lock 和已有 Enter 提交；显隐操作不触发表单提交 |
| 验证码 | 由原 isLoginVerify 控制，保留图片刷新和真实数据来源 |
| 语言 | 只读复用 LangSelect，保留既有列表请求和语言同步 |
| 加载 | 显示真实已有 loading，保留现有收尾，不新增假等待 |
| 错误 | 保留既有提示和业务处理，不重写错误契约；文字可读且不会遮挡按钮 |
| Hover／Focus | 保留现有主题状态；必要时补充登录专用可见焦点，不去全局移除 outline |
| 自动填充 | 新页面文字、光标、背景可读；不要让旧登录页的深色 input 覆盖新控件 |
| 图标操作 | 可键盘操作，有正确名称；自定义操作区尽量提供 44×44px 触达区域 |
保持原来的非空检查、请求条件和提交流程。不能从参考中添加用户名格式限制、自动大写、密码长度规则或新登录入口。
键盘顺序与视觉顺序一致，保留原有初始焦点和 Enter 提交；不得给同一次操作绑定多个提交回调。多语言和长提示自然换行，不使用 break-all 解决排版问题。
8. 样式隔离与最小实现
未来新增入口建议为 src/ui-refactor/login/LoginPage.vue，现在不创建代码。
- 根类使用
.ng-login-v2，新增局部类使用ng-login前缀。 - 优先把少量布局样式留在新 SFC 的 scoped CSS／SCSS 中；不为单页建立复杂样式目录。
- 不要求新增 CSS 变量、主题层、字体模块或通用设计系统。
- 不使用旧
.login-container根类，避免旧页面非 scoped 的深色输入样式匹配新页。 - 默认不覆盖 Element UI 控件外观。确需适配宽度、排列或焦点时，选择器限定在新页面内部。
- 禁止裸写全局
.el-input、.el-button、body、:root等规则。 - 不改旧 CSS／SCSS，不重新导入参考站全局样式，不让新样式影响旧登录页和其他页面。
- 只读复用已有图片／Logo；一期不新增字体或品牌素材。
- 私有组件只按实际职责拆分，不新增通用表单框架或第二套认证状态。
- 不改路由、应用入口、主题、公共组件或翻译资源以便让新页自动接入。
9. 业务等价与验收
原认证行为以当前登录页为准，至少保留：
user/login → user/getUserInfo → user/getBaseInfo
→ 原 redirect 或 /，并保留其他查询参数
验证码初始化、显示条件、刷新、失败后的缓存清理与 loading 收尾均保持。具体字段与分支见一期说明。
后续实施验收：
- 375／768／1024／1440px、320px 边界和短视口没有横向溢出、遮挡或截断。
- 新页面输入、按钮、卡片、菜单仍是当前 Element UI 风格，没有新主题或新字体。
- 旧登录页和其他页面的 UI、CSS 与代码完全保留。
- 验证码显示／隐藏／刷新、密码显隐、Caps Lock、键盘和原 Enter 提交可用。
- 语言切换、长翻译、自动填充和移动软键盘正常。
- API 参数、调用顺序、失败收尾和跳转与旧实现一致。
- 检查存量文件内容；Git 忽略的环境文件和 lockfile 也不应改变。
- 新文件未接入时明确报告“未接入”，独立展示不能冒充真实登录验证。
本次没有启动页面、执行真实登录或验证视觉效果。已知 Vue／模板编译器版本问题另行记录，不能借 UI 任务擅自修改依赖。