Главная Обзор Помощь
Вход
guanli
/
ngfrontend
2
0
Ответвить 0
Файлы Задачи 0 Запросы на слияние 0 Вики
Ветка: master
Ветки Метки
ngfrontend
/
docs
/
ui-refactor
/
phase-1-login.md

phase-1-login.md 9.6 KB
Постоянная ссылка История Исходник

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

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

当前实现与历史范围说明

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

项目 当前实现
页面与入口 直接改造 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 匿名白名单

注册布局和游客业务的当前说明分别见 公共页面框架 与 注册功能迁移。本次只更新 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。

成功链路必须保持：

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、字体或图片文件。
  • 未修改旧代码、依赖、路由、认证流程或参考资料。
  • 未启动页面预览，未连接后端，未执行真实登录。
  • 视觉规范是基于文本与本地源码的整理建议，浏览器截图与实际效果验证留待实施阶段。