fangke/docs/superpowers/specs/2026-09-17-login-keji-visual-v1-design.md

登录页客迹视觉 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 重绘字标，用户指定使用。