更新日期:2026-10-08
适用项目:D:\project\web\unity\ngfrontend
创建时分支:rebuild
存量代码基线:6c38326443f8b967897590fef6cd3d20de4c02e3
本项目将分期进行 UI 重构,技术栈保持不变。当前一期仅针对普通登录页面的 UI,业务规则保持原样。用户已明确:现有页面 UI、CSS/SCSS 和代码全部保留;新页面继续沿用当前项目的 Element UI 风格,不另建 Elken 品牌主题。
遵循平台约束、当前会话用户明确要求、更近的项目规则、本文件和适用 skill 的顺序。
设计资料与用户请求必须分开处理:
DESIGN.md;有矛盾时说明来源与取舍,不悄悄混用。AGENTS.md。DESIGN.md。docs/ui-refactor/phase-1-login.md。默认使用简体中文;先说明当前动作,再执行。保持任务范围小且结果可验证。
| 层次 | 固定方案 | 基线说明 |
|---|---|---|
| 框架 | Vue 2、Options API | vue: ^2.6.10;当前 lockfile/本地解析为 2.7.16 |
| 语言 | JavaScript、Vue 单文件组件 | 保持现有项目写法,不迁移 TypeScript |
| 构建 | Vue CLI 4.4.4、Webpack 4、Babel | 不引入 Vite、Nuxt 或新的应用骨架 |
| 路由 | Vue Router 3.0.2、Hash 模式 | 保持既有路径、参数与跳转契约 |
| 状态 | Vuex 3.1.0 | 不引入 Pinia,不改 store 结构 |
| UI | Element UI 2.x | 声明 ^2.15.12,当前解析为 2.15.14;不换 Element Plus |
| 样式 | CSS/SCSS、现有 Sass 工具链与 Element UI 主题 | 新增样式只服务于页面布局和必要局部适配,不引入 Tailwind、CSS-in-JS 或新的主题 token 体系 |
| 请求 | Axios 0.18.1、既有 API 封装 | 不换请求库,不改拦截器或返回结构 |
| 国际化 | Vue I18n 7.3.2 | 默认英文,复用既有语言状态与可用文案 |
| 其他业务 | ECharts、Paystack、上传/导出等既有能力 | 一期不涉及这些业务 |
版本事实以实施时的 package.json、lockfile 和安装情况重新核对,不能把本表当成自动升级目标。通用 skill 推荐的 Vue 3、Composition API、TypeScript 等不得覆盖本项目约束。
新页面继续使用当前加载的 Element UI 主题。当前主色为 #1890ff,字体沿用 src/styles/index.scss;不改成参考资料中的深蓝/青色方案,不引入 Montserrat,不重绘 Element UI 控件。参考资料只帮助调整页面布局、内容组织、间距和响应式表现。
| 范围 | 一期约束 |
|---|---|
src/views/login/** 已有文件 |
旧登录页、后台快捷登录、认证回调和内部组件全部保留 |
src/main.js、src/App.vue、public/index.html |
不修改应用入口、挂载、根样式或资源加载 |
src/router/**、src/permission.js |
不新增接入路由、不切换登录映射、不改守卫与权限 |
src/store/** |
不改登录 actions、菜单、语言、用户缓存或状态结构 |
src/api/** |
不改接口地址、参数、方法、返回字段 |
src/utils/** |
不改认证、请求、Token 刷新、地区及业务工具 |
src/components/** 已有文件 |
只读复用,不修改 LangSelect、SvgIcon 等公共组件 |
src/styles/**、src/lang/**、src/directive/** |
不改全局主题、翻译文件、全局覆盖或指令 |
其他 src/views/** |
不修改其他业务页或模板演示页 |
| 已有图片、SVG、字体与静态资源 | 不覆盖、不删除、不搬移 |
package*.json、lockfile、.env*、构建/lint/测试配置、CI |
不改依赖、配置、环境或检查规则 |
| 现有测试、Mock、构建工具和 README | 不调整现有检查来制造通过结果,不顺手清理 |
water1008 和用户附件 |
只读参考,不修改原资料,不整体复制脚本或样式 |
上表为重点范围,不代表未列出的存量代码可以改动。不要自动修复已发现的无关问题。
以下仅为后续实施约定,现在不创建这些代码目录:
src/ui-refactor/login/,入口建议为 LoginPage.vue。.ng-login-v2,新增类名使用 ng-login 前缀;不要求创建新的 CSS 变量或设计 token 层。.el-input、.el-button、body、:root 等规则。.login-container 根类,避免其非 scoped 样式影响新页面。以 src/views/login/index.vue 和直接依赖为准,至少保留:
settings/getPageId 和验证码地址的现有构造。user/login → user/getUserInfo → user/getBaseInfo 的调用顺序。isLoginVerify/pageId 条件及 version: v2 的现有处理。redirect 和其他查询参数的传递。禁止从参考站添加用户名格式正则、密码长度规则、自动大写、记住我、找回密码、注册、游客购物、Cookie 弹窗、模拟成功或预填凭证。上述内容若需增加,作为独立业务需求确认。
文档任务做文件范围、内容、引用路径检查,无需运行构建。未来代码任务按风险验证:
2026-10-08 分析发现 Vue 2.7.16 与 vue-template-compiler 2.6.10 不一致,直接加载编译器出现版本不匹配错误。这里只记录事实;未经用户明确授权,不修改依赖或 lockfile。
另外,路由命名重复、旧全局样式、请求错误处理、Token 刷新时序和模板残留均不属于一期 UI 实施范围。发现新阻塞时记录证据与最小处理建议,不能扩大改动。