docs: 登录页客迹视觉V1对齐设计文档
Co-Authored-By: Claude Code <noreply@anthropic.com>
This commit is contained in:
浅念
@@ -0,0 +1,93 @@
|
||||
# 登录页客迹视觉 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 不可用，登录页不用
|
||||
|
||||
设计基准色（README 约定）：主色 #2563EB、辅助 #06B6D4、登录背景 #0B1630、后台底色 #F7F8FA。
|
||||
|
||||
## 决策记录（用户确认）
|
||||
|
||||
1. Logo 用 logo-w.png 白字版，图片直接使用，文字不做 CSS 重排。
|
||||
2. 表单功能四项调整全选：去掉账号下拉选择器；移除"没有账号？注册"链接；隐藏"忘记密码？"链接；加底部"账号由管理员分配"文案（隐私政策链接无真实文档，暂不加）。
|
||||
3. 移除 AuthTopBar（主题色/语言/暗色切换），登录页固定风格。
|
||||
4. 实现方案 A：重写共用组件 LoginLeftView，三页（login/register/forget-password）统一品牌区。
|
||||
|
||||
## 布局结构
|
||||
|
||||
- 双栏：左侧品牌区 58vw（现 65vw），右侧表单区 flex-1。
|
||||
- 响应式：≤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，调高度配色）
|
||||
[x] 保持登录 ← 默认勾选（忘记密码链接隐藏）
|
||||
[ 登录 ] ← 全宽 56px #2563EB
|
||||
——— 账号由管理员分配 ——— ← 13px #9AA3B2（无隐私政策链接）
|
||||
```
|
||||
|
||||
移除：AuthTopBar 引用、账号 ElSelect、注册链接、忘记密码链接。
|
||||
|
||||
登录逻辑（handleSubmit/token 处理/滑块校验）零改动；仅删账号下拉相关的 setupAccount 模板用法。username 仍预填 'admin'（M1 单管理员）。
|
||||
|
||||
## i18n 文案
|
||||
|
||||
zh/en 两份 json 同步更新：
|
||||
|
||||
- 改：login.title（"欢迎登录客迹"/"Welcome to KEJI"）、login.subTitle（"登录您的独立数据工作台"）、leftView.title（"看见来访，读懂客迹"）、leftView.subTitle（"网站访问与客户旅程分析"）
|
||||
- 新增：leftView.slogan（"数据驱动增长 · 洞察创造价值"）、leftView.footer（"让每一次来访都有价值"）、login.accountLabel（"账号"）、login.passwordLabel（"密码"）、login.adminAssigned（"账号由管理员分配"）
|
||||
- 不变：placeholder（请输入账号/请输入密码）、sliderText、rememberPwd、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 重绘字标，用户指定使用。
|
||||
Reference in New Issue
Block a user