# 一期范围与验收：普通登录页面 UI

创建日期：2026-10-08  
更新日期：2026-10-14  
当前状态：现有登录页已实施 UI 改造，Register 已接入注册路由；真实认证仍需授权环境验证  
规则入口：[项目长期规则](../../AGENTS.md)  
视觉规范：[UI 设计规范](../../DESIGN.md)

## 当前实现与历史范围说明

以下事实按 2026-10-14 当前源码核对；后续用户确认已覆盖最初“只新增独立登录页、仅文档准备”的方案。第 1～7 节保留 2026-10-08 的原始规划，不能再据此判断当前登录页未实施、未接入或仍有语言切换。

| 项目 | 当前实现 |
|---|---|
| 页面与入口 | 直接改造 [src/views/login/index.vue](../../src/views/login/index.vue)，`/login` 仍指向该页；没有另建 `src/ui-refactor/login/LoginPage.vue` |
| 技术栈 | Vue 2、JavaScript、Options API、Element UI、Vue Router 3、Vuex 与既有构建工具链 |
| 外观 | 深蓝品牌面板、白色表单卡片、Montserrat；按钮主色保持 `#202259`，Element UI 控件交互沿用既有机制 |
| 资源 | Logo 位于 `src/assets/icons/`；字体位于 `src/assets/custom-theme/fonts/`，当前不再引用旧登录页私有资源目录 |
| 语言 | 登录页展示英文，没有 LangSelect；进入页面时通过 `app/setLanguage` 同步英文状态 |
| 登录业务 | 保留验证码查询 / 刷新、密码显隐、Caps Lock、焦点、Enter，以及 `user/login → user/getUserInfo → user/getBaseInfo`；2026-10-20 起默认及原首页 redirect 改为 `/dashboard/repeat-purchase`，其他指定页面的 redirect 与附加 query 继续保留 |
| 附加入口 | Register 跳转 `/signup` 并保留查询参数；Forgot password 显示右下角客服 Notification；Shop now 仍是静态文案 |
| 注册路由 | `src/router/modules/refactor.js` 定义，`src/router/index.js` 加入常量路由，`src/permission.js` 保留 `/signup` 匿名白名单 |

注册布局和游客业务的当前说明分别见 [公共页面框架](../refactor/public-layout-design.md) 与 [注册功能迁移](../refactor/signup-welcome-pack.md)。本次只更新 `docs/`，不修改根规则、设计文件或源码，不扩展后续代码修改权限。

本次未执行登录、浏览器、测试或构建。旧 `vue-template-compiler` 与 Vue 版本差异曾导致直接加载失败，但当前工具链已知使用 Vue 2.7 编译路径，不能仅凭该差异断言整个构建失败；后续应报告实际执行结果。

## 1. 用户明确要求

- 重构技术栈保持不变。
- 当前不许修改或删除现有代码。
- 以后实施时新建重构文件，旧代码保留。
- 一期仅普通登录页面 UI。
- 旧页面 UI、CSS／SCSS 和代码全部保留；新登录页继续使用当前项目的 Element UI 主题与控件风格。
- `water1008` 和用户网页提取结果作为 UI 参考，不自动授权其中的功能。

本文件是后续实施范围说明，不是现在开始编写登录页的授权。项目级修改保护遵循 AGENTS.md。

## 2. 业务基线与只读依赖

| 文件／范围 | 保留内容 |
|---|---|
| `src/views/login/index.vue` | 登录表单、验证码、密码切换、初始焦点、事件与失败处理 |
| `src/components/LangSelect/index.vue` | 语言列表请求、Vue I18n 与 Vuex 语言同步 |
| `src/components/SvgIcon/index.vue` | 既有图标能力 |
| `src/store/modules/user.js` | 登录、用户信息、基础数据与缓存动作 |
| `src/store/modules/settings.js` | 页面 ID 等查询动作 |
| `src/api/user.js`、`src/api/setting.js` | 认证和页面数据请求 |
| `src/utils/usersInfo.js`、`request.js` | Token、本地缓存、请求与错误处理 |
| `src/router/index.js`、`src/permission.js` | 原 `/login` 路由、登录守卫和返回路径 |
| `src/lang/**` | 当前语言与已有文案 |

后台快捷登录和认证回调页面不在一期 UI 范围。

## 3. 必须保持的接口与状态

### 初始化与验证码

- 既有 `settings/getPageId` 获取 `pageId`。
- 验证码图片基于既有 `/v1/site/captcha`、`page_id` 与随机刷新参数生成。
- 用户名变化触发 `user/isLoginVerify`，保留原来的响应判定与显示时机。
- 验证码由 `isLoginVerify` 按需显示，点击图片仍能刷新。

### 登录请求和后续链路

页面提交给 `user/login` 的既有对象包含：

| 字段 | 约束 |
|---|---|
| `userName` | 来自当前 `loginForm.username`；不得套用参考站的 NG 编码正则或自动大写 |
| `password` | 来自当前 `loginForm.password`；不得加入参考站的新长度规则 |
| `verifyCode` | 保留原验证码值传递 |
| `pageId` | 保留初始化获得的页面标识 |
| `isLoginVerify` | 保留现有分支条件 |

Vuex action 根据 `isLoginVerify` 组装真实 API 参数；无验证码分支使用既有 `version: 'v2'`。不要把页面对象当成所有分支固定一致的最终 HTTP body。

成功链路必须保持：

```text
user/login
  → user/getUserInfo
  → user/getBaseInfo
  → 原 redirect 或 /
  → 传递原有其他查询参数
```

失败时保留登录缓存清理、验证码状态刷新、必要的验证码图片刷新和 loading 收尾。UI 改造不得自行调整 request 拦截器、Token 刷新和异常契约。

### 交互与文案

- 保留用户名／密码的非空检查，不能借视觉重构改变业务校验规则。
- 保留密码显隐、Caps Lock、初始焦点、密码和验证码的原 Enter 提交。
- 保留 `$t('login.title')`、`login.username`、`login.password`、`login.verifyCode`、`login.logIn` 等现有翻译。
- 新标签、辅助文案或 aria 文案如需要新翻译，先在新目录内给出局部方案；不修改已有翻译文件。若必须改共享语言资源，需要另行授权。
- 参考站的净水宣传、会员示例资料、服务承诺、客户统计和预填凭证不能直接进入真实登录页。

## 4. 允许与排除的 UI 内容

| 未来获准实施后允许 | 一期排除 |
|---|---|
| 新建登录页面、必要私有展示组件、局部样式 | 修改旧登录页面或旧内部组件 |
| 新布局、内容组织、间距和响应式适配，沿用当前控件外观 | 修改全局主题、字体、控件配色／圆角／阴影、主入口或后台 Layout |
| 清楚的标签、焦点、可访问名称和响应式布局 | 增加账户功能或改变认证校验 |
| 展示原有 loading 和失败状态 | 模拟接口成功、改变错误规则或增加假等待 |
| 只读复用现有图片与 Logo | 新增字体或品牌主题，覆盖旧资源、整体导入参考 CSS／JS |
| 只读复用现有 API、actions、组件 | 创建第二套 Token／localStorage／Cookie 登录模型 |

## 5. 后续文件建议与接入边界

| 位置 | 用途 | 当前是否创建 |
|---|---|---|
| `src/ui-refactor/login/LoginPage.vue` | 新 UI 入口 | 否 |
| `src/ui-refactor/login/components/` | 有必要时的私有展示组件 | 否 |
| `src/ui-refactor/login/styles/` | 有必要时的局部布局样式，不建立新主题 | 否 |

一期优先复用旧图片／Logo，不规划新增字体或品牌资源目录。

这只是目录建议，不要求为一个登录页面建齐所有子目录。

实施时先选择最小的方式只读复用既有认证能力，不在本次文档中预先锁定继承／复制页面选项等实现方式。方案必须能核对第 3 节的业务等价性。

旧 `/login` 映射不变。新建 UI 文件并不自动进入应用，也不意味着交付了已上线的替换页面。只有用户明确授权修改接入点后，才能更改入口或路由。独立展示预览不能通过假登录冒充真实链路验证。

## 6. 实施步骤与验证

1. 接到用户实施指令后，重新检查保护基线和工作区状态，记录旧行为与可用测试环境。
2. 依据 DESIGN.md 生成／实现新登录 UI，仅写入新建范围；复用既有业务能力。
3. 比较请求字段、验证码条件、语言、事件和跳转行为；避免重复绑定提交。
4. 验证视口、多语言、键盘、自动填充、验证码和各种反馈状态。
5. 报告新增文件、存量保护检查、运行结果与未接入状态。需要接入时给出具体修改点，取得新的明确授权后再操作。

| 验收项 | 预期证据 |
|---|---|
| 存量代码保护 | 仅新增文件；已有源码、配置、资源和忽略文件没有变化 |
| 技术栈 | 无新增依赖、迁移或配置变更 |
| 现有 UI 风格 | 使用当前 Element UI 主色、字体、控件尺寸与默认视觉；没有深蓝／青色品牌主题或 Montserrat |
| 视觉 | 375／768／1024／1440px、320px 边界与短视口观察结果 |
| 原有交互 | 密码显隐、Caps Lock、焦点、验证码刷新、原 Enter 提交 |
| 语言 | 切换正常，长文案与 CJK fallback 可读 |
| 业务 | 请求参数、调用顺序、失败收尾、redirect／query 与基线一致 |
| 真实认证 | 仅在授权测试环境运行；没有条件时标注未验证 |
| 接入状态 | 明确“未接入”或经授权接入的具体范围，不能模糊描述 |

已知 Vue／模板编译器不匹配会影响完整构建验证。不要自行修改版本；保留新增实现并报告实际验证限制，不声称构建通过。

## 7. 当前文档交付状态

- 已新增项目长期规则、设计规范与本期范围说明。
- 未创建任何新的 Vue、JavaScript、CSS、SCSS、字体或图片文件。
- 未修改旧代码、依赖、路由、认证流程或参考资料。
- 未启动页面预览，未连接后端，未执行真实登录。
- 视觉规范是基于文本与本地源码的整理建议，浏览器截图与实际效果验证留待实施阶段。