浅念
94 lines
5.9 KiB
Markdown
94 lines
5.9 KiB
Markdown
# 登录页客迹视觉 V1 对齐 — 设计文档
|
||
|
||
日期：2026-09-17
|
||
分支：m1
|
||
状态：设计已获用户批准
|
||
|
||
## 背景与目标
|
||
|
||
admin 登录页仍为 Art Design Pro 模板原版（浅色左侧 + 几何动画 + 插画）。其他 5 个页面已按客迹视觉 V1（assets/design/keji-admin-v1/）重设计，本次将登录页对齐设计稿 03-login.png。
|
||
|
||
素材（用户提供，已验证）：
|
||
|
||
- 背景图：admin/src/assets/images/login/login-left-background.png（1196×1315，RGB 不透明，纯装饰无文字/logo，AI 去字重建版）
|
||
- Logo 白字版：admin/src/assets/images/logo-w.png（1944×809，RGBA 透明底；文字 #FDFDFD 白，K 图形 #0065FB 亮蓝）
|
||
- （参考）logo.png 深字版：文字 #0A1C32 深藏青，在 #0B1630 背景上对比度 1:1 不可用，登录页不用
|
||
|
||
设计基准色：主色 #2563EB、辅助 #06B6D4、登录背景 #0B1630（README 约定）；登录页右区底色 #F7F8FA（03-login.png 设计稿实测值；README 全局后台底色为 #F5F7FB，登录页以设计稿为准）。
|
||
|
||
## 决策记录（用户确认）
|
||
|
||
1. Logo 用 logo-w.png 白字版，图片直接使用，文字不做 CSS 重排。
|
||
2. 表单功能四项调整全选：去掉账号下拉选择器；移除"没有账号？注册"链接；隐藏"忘记密码？"链接；加底部"账号由管理员分配"文案（隐私政策链接无真实文档，暂不加）。
|
||
3. 移除 AuthTopBar（主题色/语言/暗色切换），登录页固定风格。
|
||
4. 实现方案 A：重写共用组件 LoginLeftView，三页（login/register/forget-password）统一品牌区。
|
||
|
||
## 布局结构
|
||
|
||
- 双栏：左侧品牌区 58vw（现 65vw），右侧表单区 flex-1。重写后不保留现有 ≤1600px 的 60vw 中间宽度规则，仅 58vw 一档。
|
||
- 响应式：≤1180px 隐藏左侧（沿用现有断点），表单单栏居中。
|
||
- 登录页固定浅色：右侧 #F7F8FA、左侧深蓝均用固定色值，不走主题 CSS 变量，不受 html.dark 影响。
|
||
|
||
## 左侧品牌区（重写 LoginLeftView.vue）
|
||
|
||
背景 login-left-background.png absolute cover 填充，#0B1630 兜底色。HTML 元素叠加（README 约束：文字和 Logo 是独立前端元素，不从效果图截取）：
|
||
|
||
| 元素 | 规格 |
|
||
|---|---|
|
||
| Logo（左上，内边距约 64px） | logo-w.png 整图，高约 56px 等比 |
|
||
| 主标语 | "看见来访，读懂客迹" 白 ~38px 粗体 |
|
||
| 副标题 | "网站访问与客户旅程分析" 浅蓝白 ~18px |
|
||
| 短横线 | 50×6px #2563EB 圆角 |
|
||
| 口号 | "数据驱动增长 · 洞察创造价值" #A8C0E8 ~14px 大字距 |
|
||
| 底部 | "让每一次来访都有价值" #7D94C4 ~14px 超大字距 |
|
||
|
||
删除：几何动画、太阳/月亮彩蛋、ThemeSvg 插画、hideContent prop（无调用方使用）。
|
||
|
||
## 右侧表单（改 login/index.vue + style.css）
|
||
|
||
```
|
||
欢迎登录客迹 ← 32px 粗体 #1A1A1A 居中
|
||
登录您的独立数据工作台 ← 15px #8A94A6 居中
|
||
[账号] 标签 + 输入框（prefix User 图标，预填 admin，56px 高/10px 圆角）
|
||
[密码] 标签 + 输入框（prefix Lock 图标，show-password）
|
||
滑块验证（保留现有 ArtDragVerify，调高度配色；删除现 index.vue 中 `:background="isDark ? '#26272F' : '#F1F1F4'"` 的 isDark 条件，固定浅色值，避免暗色偏好浏览器下深色滑块出现在固定浅色页面上）
|
||
[x] 保持登录 ← 默认勾选（忘记密码链接隐藏）
|
||
[ 登录 ] ← 全宽 56px #2563EB
|
||
——— 账号由管理员分配 ——— ← 13px #9AA3B2（无隐私政策链接）
|
||
```
|
||
|
||
移除：AuthTopBar 引用、账号 ElSelect、注册链接、忘记密码链接。
|
||
|
||
登录逻辑（handleSubmit/token 处理/滑块校验）零改动；仅删账号下拉相关的 setupAccount 模板用法。username 仍预填 'admin'（M1 单管理员）。
|
||
|
||
## i18n 文案
|
||
|
||
zh/en 两份 json 同步更新（格式：zh / en）：
|
||
|
||
- 改：login.title（"欢迎登录客迹" / "Welcome to KEJI"）、login.subTitle（"登录您的独立数据工作台" / "Sign in to your data workspace"）、login.rememberPwd（"保持登录" / "Stay signed in"，与设计稿一致）、leftView.title（"看见来访，读懂客迹" / "See every visit, understand every journey"）、leftView.subTitle（"网站访问与客户旅程分析" / "Website visit & customer journey analytics"）
|
||
- 新增：leftView.slogan（"数据驱动增长 · 洞察创造价值" / "Data-driven growth · Insight-driven value"）、leftView.footer（"让每一次来访都有价值" / "Make every visit count"）、login.accountLabel（"账号" / "Account"）、login.passwordLabel（"密码" / "Password"）、login.adminAssigned（"账号由管理员分配" / "Accounts are assigned by the administrator"）
|
||
- 不变：placeholder（请输入账号/请输入密码）、sliderText、btnText
|
||
|
||
保留 i18n 架构，组件按现有模式用 $t。
|
||
|
||
## 波及范围
|
||
|
||
- register/forget-password：自动获得新品牌区，自身表单不动（孤儿页，无入口，路由保留）。
|
||
- AuthTopBar 组件文件保留（另两页仍在引用），登录页仅取消引用。
|
||
- 不动路由表、不动后端。
|
||
|
||
## 验证计划
|
||
|
||
1. pnpm dev + Playwright 截图，1920/1440/375 三档对照设计稿 03-login.png。
|
||
2. 检查窄屏（≤1180px）单栏形态、背景图加载失败兜底。
|
||
3. pnpm build 通过。
|
||
4. 走标准部署流程上线（tar admin/dist → scp 经跳板 → 解压 /opt/cms-cj 原地覆盖），汇报版本哈希。
|
||
|
||
无新增单元测试（纯视觉组件，登录逻辑零改动，现有测试不受影响）。
|
||
|
||
## 风险与边界
|
||
|
||
- login-left-background.png 为 AI 去字重建，与原稿非逐像素一致——已确认接受（05 号生成文档记录）。
|
||
- README 约束 5："忘记密码"真实接入前不开放——本次隐藏链接与之相符；后续接真功能再恢复。
|
||
- README 约束 6：品牌主标复用原始 Logo——logo-w.png 为同一 logo 的白字色版，非 AI 重绘字标，用户指定使用。
|