浅念
506 lines
16 KiB
Markdown
506 lines
16 KiB
Markdown
# 登录页客迹视觉 V1 对齐 — 实现计划
|
||
|
||
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
|
||
|
||
**Goal:** 将 admin 登录页从 Art Design Pro 模板原版重做为客迹视觉 V1（深蓝品牌区 + 浅色表单区双栏），对齐设计稿 assets/design/keji-admin-v1/03-login.png。
|
||
|
||
**Architecture:** 重写三页共用组件 LoginLeftView.vue（背景图 + logo + 标语叠加层），简化 login/index.vue（移除 AuthTopBar/账号下拉/注册与忘记密码链接）并重写 style.css（固定浅色 + Element Plus 变量覆盖防暗色污染），同步更新 zh/en i18n 文案。
|
||
|
||
**Tech Stack:** Vue3 + TS + Element Plus + Tailwind（Art Design Pro 模板），Playwright 视觉验证。
|
||
|
||
**Spec:** docs/superpowers/specs/2026-09-17-login-keji-visual-v1-design.md（含全部决策记录与色值）
|
||
|
||
**TDD 说明:** 纯视觉重构、登录逻辑零改动（spec 明确），无新增单元测试。验证 = Playwright 截图对照设计稿 + `pnpm build` + 现有测试不受影响。
|
||
|
||
**工作目录:** 全程在 `admin/` 下操作（git 仓库根为 D:\project\cms-cj，分支 m1）。
|
||
|
||
---
|
||
|
||
### Task 1: i18n 文案更新
|
||
|
||
**Files:**
|
||
- Modify: `admin/src/locales/langs/zh.json:151-179`（login 对象）
|
||
- Modify: `admin/src/locales/langs/en.json:151-179`（login 对象）
|
||
|
||
- [ ] **Step 1: 更新 zh.json 的 login 对象**
|
||
|
||
将 `zh.json` 中 `"login"` 对象内以下 key 的值替换（其余 key 原样保留）：
|
||
|
||
```json
|
||
"leftView": {
|
||
"title": "看见来访，读懂客迹",
|
||
"subTitle": "网站访问与客户旅程分析",
|
||
"slogan": "数据驱动增长 · 洞察创造价值",
|
||
"footer": "让每一次来访都有价值"
|
||
},
|
||
"title": "欢迎登录客迹",
|
||
"subTitle": "登录您的独立数据工作台",
|
||
```
|
||
|
||
并在 `"placeholder"` 对象同级新增三个 key（放在 `"btnText"` 之后）：
|
||
|
||
```json
|
||
"accountLabel": "账号",
|
||
"passwordLabel": "密码",
|
||
"adminAssigned": "账号由管理员分配",
|
||
```
|
||
|
||
同时把 `"rememberPwd": "记住密码"` 改为 `"rememberPwd": "保持登录"`。
|
||
|
||
删除 `"noAccount"` 和 `"register"` 两个 key（入口已移除）。
|
||
|
||
- [ ] **Step 2: 更新 en.json 的 login 对象**
|
||
|
||
`en.json` 同结构对应更新：
|
||
|
||
```json
|
||
"leftView": {
|
||
"title": "See every visit, understand every journey",
|
||
"subTitle": "Website visit & customer journey analytics",
|
||
"slogan": "Data-driven growth · Insight-driven value",
|
||
"footer": "Make every visit count"
|
||
},
|
||
"title": "Welcome to KEJI",
|
||
"subTitle": "Sign in to your data workspace",
|
||
```
|
||
|
||
新增：
|
||
|
||
```json
|
||
"accountLabel": "Account",
|
||
"passwordLabel": "Password",
|
||
"adminAssigned": "Accounts are assigned by the administrator",
|
||
```
|
||
|
||
`"rememberPwd": "Stay signed in"`；删除 `"noAccount"`、`"register"`。
|
||
|
||
**注意：** en.json 删除 noAccount/register 后，`register/index.vue` 等其他文件若引用 `$t('login.register')` 会显示 key 本身。先全局搜索确认只有 login/index.vue 引用（本任务后 Task 3 会移除该引用；若搜索发现其他引用处则保留 key 不删）。
|
||
|
||
- [ ] **Step 3: 验证 JSON 合法**
|
||
|
||
Run: `python -c "import json; json.load(open('src/locales/langs/zh.json', encoding='utf-8')); json.load(open('src/locales/langs/en.json', encoding='utf-8')); print('OK')"`
|
||
Expected: `OK`
|
||
|
||
- [ ] **Step 4: Commit**
|
||
|
||
```bash
|
||
git add src/locales/langs/zh.json src/locales/langs/en.json
|
||
git commit -m "feat(admin): 登录页i18n文案对齐客迹V1"
|
||
```
|
||
|
||
---
|
||
|
||
### Task 2: 重写 LoginLeftView.vue（左侧品牌区）
|
||
|
||
**Files:**
|
||
- Modify: `admin/src/components/core/views/login/LoginLeftView.vue`（整文件重写）
|
||
|
||
资源（已存在，无需新增）：`src/assets/images/logo-w.png`（1944×809 透明底白字）、`src/assets/images/login/login-left-background.png`（1196×1315）。
|
||
|
||
- [ ] **Step 1: 整文件替换为以下内容**
|
||
|
||
```vue
|
||
<!-- 登录、注册、忘记密码左侧品牌区（客迹视觉V1） -->
|
||
<template>
|
||
<div class="login-left-view" :style="{ backgroundImage: `url(${bg})` }">
|
||
<img class="logo" :src="logoWhite" alt="客迹 KEJI ANALYTICS" />
|
||
|
||
<div class="text-wrap">
|
||
<h1>{{ $t('login.leftView.title') }}</h1>
|
||
<p class="sub-title">{{ $t('login.leftView.subTitle') }}</p>
|
||
<span class="accent-bar"></span>
|
||
<p class="slogan">{{ $t('login.leftView.slogan') }}</p>
|
||
</div>
|
||
|
||
<p class="footer">{{ $t('login.leftView.footer') }}</p>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import bg from '@imgs/login/login-left-background.png'
|
||
import logoWhite from '@imgs/logo-w.png'
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.login-left-view {
|
||
position: relative;
|
||
box-sizing: border-box;
|
||
width: 58vw;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
background-color: #0b1630; /* 图片加载前/失败兜底 */
|
||
background-position: center;
|
||
background-size: cover;
|
||
background-repeat: no-repeat;
|
||
|
||
.logo {
|
||
position: absolute;
|
||
top: 56px;
|
||
left: 64px;
|
||
z-index: 10;
|
||
display: block;
|
||
width: auto;
|
||
height: 52px;
|
||
}
|
||
|
||
.text-wrap {
|
||
position: absolute;
|
||
top: 24%;
|
||
left: 64px;
|
||
z-index: 10;
|
||
|
||
h1 {
|
||
max-width: 80%;
|
||
font-size: 38px;
|
||
font-weight: 700;
|
||
color: #fff;
|
||
letter-spacing: 2px;
|
||
}
|
||
|
||
.sub-title {
|
||
margin-top: 14px;
|
||
font-size: 18px;
|
||
color: #dbe6f5;
|
||
}
|
||
|
||
.accent-bar {
|
||
display: block;
|
||
width: 50px;
|
||
height: 6px;
|
||
margin-top: 24px;
|
||
background: #2563eb;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.slogan {
|
||
margin-top: 24px;
|
||
font-size: 14px;
|
||
color: #a8c0e8;
|
||
letter-spacing: 4px;
|
||
}
|
||
}
|
||
|
||
.footer {
|
||
position: absolute;
|
||
bottom: 56px;
|
||
left: 64px;
|
||
z-index: 10;
|
||
font-size: 14px;
|
||
color: #7d94c4;
|
||
letter-spacing: 8px;
|
||
}
|
||
|
||
@media only screen and (width <= 1180px) {
|
||
display: none;
|
||
}
|
||
}
|
||
</style>
|
||
```
|
||
|
||
要点：背景图走 JS import + inline style（Vite 哈希 + 懒加载友好）；`hideContent` prop 删除（已确认无调用方）；`<=1600px` 中间宽度规则不再保留，仅 58vw 一档；`<=1180px` 直接 display:none。
|
||
|
||
- [ ] **Step 2: 类型检查编译通过**
|
||
|
||
Run: `pnpm typecheck || pnpm run build`（若项目无 typecheck 脚本则跳过，Task 5 统一 build 验证）
|
||
Expected: 无错误（LoginLeftView 无外部引用变化，register/forget-password 自动获得新品牌区）
|
||
|
||
- [ ] **Step 3: Commit**
|
||
|
||
```bash
|
||
git add src/components/core/views/login/LoginLeftView.vue
|
||
git commit -m "feat(admin): 登录左侧品牌区重做为客迹V1深蓝视觉"
|
||
```
|
||
|
||
---
|
||
|
||
### Task 3: 简化 login/index.vue + 重写 style.css（右侧表单）
|
||
|
||
**Files:**
|
||
- Modify: `admin/src/views/auth/login/index.vue`（模板 + script + style）
|
||
- Modify: `admin/src/views/auth/login/style.css`（整文件重写）
|
||
|
||
- [ ] **Step 1: 替换 index.vue 的 template 部分**
|
||
|
||
```vue
|
||
<!-- 登录页面 -->
|
||
<template>
|
||
<div class="flex w-full h-screen">
|
||
<LoginLeftView />
|
||
|
||
<div class="relative flex-1 auth-right-bg">
|
||
<div class="auth-right-wrap">
|
||
<div class="form">
|
||
<h3 class="title">{{ $t('login.title') }}</h3>
|
||
<p class="sub-title">{{ $t('login.subTitle') }}</p>
|
||
<ElForm
|
||
ref="formRef"
|
||
:model="formData"
|
||
:rules="rules"
|
||
label-position="top"
|
||
:key="formKey"
|
||
@keyup.enter="handleSubmit"
|
||
class="login-form"
|
||
>
|
||
<ElFormItem :label="$t('login.accountLabel')" prop="username">
|
||
<ElInput
|
||
class="custom-height"
|
||
:placeholder="$t('login.placeholder.username')"
|
||
:prefix-icon="User"
|
||
v-model.trim="formData.username"
|
||
/>
|
||
</ElFormItem>
|
||
<ElFormItem :label="$t('login.passwordLabel')" prop="password">
|
||
<ElInput
|
||
class="custom-height"
|
||
:placeholder="$t('login.placeholder.password')"
|
||
:prefix-icon="Lock"
|
||
v-model.trim="formData.password"
|
||
type="password"
|
||
autocomplete="off"
|
||
show-password
|
||
/>
|
||
</ElFormItem>
|
||
|
||
<!-- 推拽验证 -->
|
||
<div class="relative pb-5 mt-4">
|
||
<div
|
||
class="relative z-[2] overflow-hidden select-none rounded-lg border border-transparent tad-300"
|
||
:class="{ '!border-[#FF4E4F]': !isPassing && isClickPass }"
|
||
>
|
||
<ArtDragVerify
|
||
ref="dragVerify"
|
||
v-model:value="isPassing"
|
||
:text="$t('login.sliderText')"
|
||
textColor="#4D5875"
|
||
:successText="$t('login.sliderSuccessText')"
|
||
progressBarBg="var(--main-color)"
|
||
background="#E8EEF6"
|
||
handlerBg="#FFFFFF"
|
||
:height="56"
|
||
radius="10px"
|
||
/>
|
||
</div>
|
||
<p
|
||
class="absolute top-0 z-[1] px-px mt-2 text-xs text-[#f56c6c] tad-300"
|
||
:class="{ 'translate-y-10': !isPassing && isClickPass }"
|
||
>
|
||
{{ $t('login.placeholder.slider') }}
|
||
</p>
|
||
</div>
|
||
|
||
<div class="flex-cb mt-2 text-sm">
|
||
<ElCheckbox v-model="formData.rememberPassword">{{
|
||
$t('login.rememberPwd')
|
||
}}</ElCheckbox>
|
||
</div>
|
||
|
||
<div class="mt-6">
|
||
<ElButton
|
||
class="w-full custom-height"
|
||
type="primary"
|
||
@click="handleSubmit"
|
||
:loading="loading"
|
||
v-ripple
|
||
>
|
||
{{ $t('login.btnText') }}
|
||
</ElButton>
|
||
</div>
|
||
|
||
<div class="admin-assigned">
|
||
<span class="line"></span>
|
||
<span class="text">{{ $t('login.adminAssigned') }}</span>
|
||
<span class="line"></span>
|
||
</div>
|
||
</ElForm>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
```
|
||
|
||
- [ ] **Step 2: 修改 index.vue 的 script 部分**
|
||
|
||
1. 新增 import：`import { User, Lock } from '@element-plus/icons-vue'`
|
||
2. 删除：`import { useSettingStore } from '@/store/modules/setting'`、`const settingStore = useSettingStore()`、`const { isDark } = storeToRefs(settingStore)`（滑块已固定浅色，isDark 不再使用）
|
||
3. 删除：`type AccountKey`、`export interface Account`、`const accounts = computed...` 整块、`setupAccount` 函数、`onMounted(() => { setupAccount('admin') })`
|
||
4. `formData` 初始化改为 `username: 'admin'`（保持 M1 单管理员预填行为）：
|
||
|
||
```ts
|
||
const formData = reactive({
|
||
account: '',
|
||
username: 'admin',
|
||
password: '',
|
||
rememberPassword: true
|
||
})
|
||
```
|
||
|
||
5. 其余逻辑（handleSubmit、resetDragVerify、showLoginSuccessNotice、formKey/locale watch）**零改动**。
|
||
|
||
- [ ] **Step 3: index.vue 底部 scoped style 简化**
|
||
|
||
删除 `:deep(.el-select__wrapper)` 覆盖块（ElSelect 已移除），`@import './style.css'` 保留。
|
||
|
||
- [ ] **Step 4: style.css 整文件替换**
|
||
|
||
```css
|
||
@reference '@styles/core/tailwind.css';
|
||
|
||
/* 授权页右侧区域（客迹V1：固定浅色，不随暗色主题变化） */
|
||
.auth-right-bg {
|
||
/* 覆盖 Element Plus 暗色变量，防止 html.dark 时表单控件变暗 */
|
||
--el-bg-color: #ffffff;
|
||
--el-bg-color-overlay: #ffffff;
|
||
--el-fill-color-blank: #ffffff;
|
||
--el-fill-color-light: #f5f7fa;
|
||
--el-text-color-primary: #1a1a1a;
|
||
--el-text-color-regular: #303133;
|
||
--el-border-color: #dcdfe6;
|
||
--el-border-color-light: #e4e7ed;
|
||
--el-border-color-lighter: #ebeef5;
|
||
background-color: #f7f8fa;
|
||
}
|
||
|
||
.auth-right-wrap {
|
||
@apply absolute inset-0 w-[440px] h-[680px] py-[5px] m-auto overflow-hidden
|
||
max-sm:px-7 max-sm:w-full
|
||
animate-[slideInRight_0.6s_cubic-bezier(0.25,0.46,0.45,0.94)_forwards]
|
||
max-md:animate-none;
|
||
|
||
.form {
|
||
@apply h-full py-[40px];
|
||
}
|
||
|
||
.title {
|
||
@apply text-[#1A1A1A] text-[32px] font-semibold text-center;
|
||
}
|
||
|
||
.sub-title {
|
||
@apply mt-[10px] text-[#8A94A6] text-[15px] text-center;
|
||
}
|
||
|
||
.custom-height {
|
||
@apply !h-[56px];
|
||
}
|
||
|
||
/* 表单标签样式 */
|
||
:deep(.el-form-item__label) {
|
||
color: #1a1a1a;
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* 账号由管理员分配 */
|
||
.admin-assigned {
|
||
@apply flex-cc gap-3 mt-8;
|
||
|
||
.line {
|
||
@apply inline-block w-6 h-px bg-[#D3D9E3];
|
||
}
|
||
|
||
.text {
|
||
@apply text-[13px] text-[#9AA3B2];
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 滑入动画 */
|
||
@keyframes slideInRight {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateX(30px);
|
||
}
|
||
|
||
to {
|
||
opacity: 1;
|
||
transform: translateX(0);
|
||
}
|
||
}
|
||
```
|
||
|
||
- [ ] **Step 5: 验证无残留引用**
|
||
|
||
Run: `grep -rn "setupAccount\|AuthTopBar\|noAccount\|ElSelect" src/views/auth/login/`
|
||
Expected: 无输出（login 页内已无这些引用；register/forget-password 中的 AuthTopBar 不受影响）
|
||
|
||
- [ ] **Step 6: Commit**
|
||
|
||
```bash
|
||
git add src/views/auth/login/index.vue src/views/auth/login/style.css
|
||
git commit -m "feat(admin): 登录表单区对齐客迹V1——移除账号下拉/注册/忘记密码入口，固定浅色"
|
||
```
|
||
|
||
---
|
||
|
||
### Task 4: 视觉验证（Playwright 截图对照设计稿）
|
||
|
||
**Files:**
|
||
- 无代码改动；产出截图到 `admin/exports/`（或临时目录，不入库）
|
||
|
||
- [ ] **Step 1: 启动 dev server**
|
||
|
||
Run: `cd admin && pnpm dev`（后台运行）
|
||
Expected: Vite 启动在 http://localhost:3006
|
||
|
||
- [ ] **Step 2: Playwright 三档截图**
|
||
|
||
用 playwright MCP 打开 `http://localhost:3006/#/login`（或路由实际形态，先 navigate 探测），分别设置视口并截图：
|
||
|
||
1. 1920×1080（桌面标准）
|
||
2. 1440×900（小桌面）
|
||
3. 375×812（移动，验证左侧隐藏 + 表单单栏）
|
||
|
||
- [ ] **Step 3: 对照检查清单**
|
||
|
||
- [ ] 左侧 58vw 深蓝背景图完整覆盖、无拉伸变形
|
||
- [ ] logo-w.png 白字清晰可见（左上角）
|
||
- [ ] 主标语/副标题/短横线/口号/底部文案齐全、层级与留白接近设计稿
|
||
- [ ] 右侧 #F7F8FA 底、标题居中、输入框 56px 高带图标
|
||
- [ ] 滑块浅蓝灰底、文字 #4D5875 可读、验证通过后主色进度条
|
||
- [ ] 登录按钮全宽主色
|
||
- [ ] 底部"— 账号由管理员分配 —"
|
||
- [ ] 375px：左侧隐藏、表单居中占满
|
||
- [ ] 浏览器切 html.dark 类（Playwright evaluate `document.documentElement.classList.add('dark')`）后右侧仍浅色
|
||
|
||
发现问题 → 回到对应 Task 修正（样式微调不新增任务）。
|
||
|
||
- [ ] **Step 4: 实际登录冒烟**
|
||
|
||
本地 dev 直连生产 API 不可用时仅验证 UI 交互：滑块可拖动、按钮可点、空值提交报错提示正常。（真实登录冒烟放到 Task 5 线上验证时用管理员账号完成，密码不入库——问用户索取或由用户自测）
|
||
|
||
---
|
||
|
||
### Task 5: 构建验证 + 部署上线
|
||
|
||
- [ ] **Step 1: pnpm build**
|
||
|
||
Run: `cd admin && pnpm build`
|
||
Expected: 构建成功，dist/ 生成新哈希文件
|
||
|
||
- [ ] **Step 2: 标准部署流程（项目约定：测试通过后直接上线，无需等确认）**
|
||
|
||
```bash
|
||
cd admin && pnpm build
|
||
tar -czf /tmp/admin-dist.tar.gz dist/
|
||
scp -i ~/.ssh/id_ed25519 -J root@8.152.213.143 /tmp/admin-dist.tar.gz root@47.254.176.10:/tmp/
|
||
ssh -i ~/.ssh/id_ed25519 -J root@8.152.213.143 root@47.254.176.10 "cd /opt/cms-cj && tar -xzf /tmp/admin-dist.tar.gz && rm /tmp/admin-dist.tar.gz"
|
||
```
|
||
|
||
（原地覆盖 dist 内容，bind mount 不受影响，无需重启容器）
|
||
|
||
- [ ] **Step 3: 线上验证**
|
||
|
||
Playwright 打开 https://tracker.12418113.xyz 登录页，截图确认新视觉生效；记录 `index-xxx.js` 哈希作为版本号。
|
||
|
||
- [ ] **Step 4: 汇报**
|
||
|
||
汇报内容：完成项清单、三档截图、线上版本哈希、验证结果。
|
||
|
||
---
|
||
|
||
## 风险提示（执行者注意）
|
||
|
||
1. **严格不动服务器其他项目**（1Panel、其他网站容器）——只解压覆盖 /opt/cms-cj 下的前端文件。
|
||
2. `05-login-left-background.png` 为 AI 去字重建背景，与设计稿非逐像素一致是**预期内的**，不要试图"修正"背景图。
|
||
3. register/forget-password 页共用 LoginLeftView，视觉同步变化是**预期行为**（spec 决策 4）。
|
||
4. 若 grep 发现 `login.noAccount`/`login.register` 有 login 页之外的引用，保留对应 i18n key 不删，并在 commit message 中说明。
|