Cohere 登录页重构实现计划

面向 AI 代理的工作者： 必需子技能：使用 superpowers:subagent-driven-development（推荐）或 superpowers:executing-plans 逐任务实现此计划。步骤使用复选框（- [ ]）语法来跟踪进度。

目标： 将登录页重构为 Open Design 56/44 分屏构图，并以医梦紫 #2b1f99 和青 #3ad4d8 映射 Cohere 视觉语言。

架构： 保留现有 Vue 登录逻辑，仅重写 LoginView.vue 的语义结构与 scoped 样式。使用源代码契约测试锁定布局、品牌色、企业文案和移动端结构，再同步 Vite 产物到 Spring Boot 静态目录。

技术栈： Vue 3、Element Plus、Vitest、Vite、Spring Boot 静态资源

文件结构

修改：frontend/src/views/auth/LoginView.vue — 登录页语义结构、响应式布局和 Cohere/医梦视觉样式。
修改：frontend/src/__tests__/open-design-page-contract.test.js — 登录页布局、颜色和文案契约。
生成：frontend/dist/** — Vite 生产构建。
同步：backend/src/main/resources/static/** — 单 JAR 前端静态资源。

任务 1：锁定登录页视觉契约

步骤 1：编写失败测试

在 open-design-page-contract.test.js 中读取 auth/LoginView.vue，断言：

expect(login).toContain('grid-template-columns: minmax(0, 56%) minmax(0, 44%)')
expect(login).toContain('background: #2b1f99')
expect(login).toContain('color: #3ad4d8')
expect(login).toContain('让目标真正驱动组织前进')
expect(login).not.toContain('login-panel__header')
expect(login).not.toMatch(/医院|科室/)

步骤 2：运行测试验证失败

运行：cd frontend && npm test -- --run src/__tests__/open-design-page-contract.test.js

预期：FAIL，当前页面仍使用 1.2fr 1fr 和拼接表单结构。

任务 2：实现 Cohere/医梦登录页

步骤 1：重写模板结构

将登录页整理为 login-brand 与 login-access 两个语义区；左侧包含品牌头、主标题和三项指标，右侧包含一个连续表单区。

步骤 2：重写桌面样式

实现 56/44 分栏、深紫品牌面、白色表单画布、统一左基线、48px 输入框与 pill 按钮；青色仅用于局部强调和聚焦态。

步骤 3：实现移动端样式

在 768px 以下切换为单栏，显示紧凑品牌头，隐藏大品牌叙事和指标区，保持 24px 页面边距与 48px 触控控件。

步骤 4：运行契约测试验证通过

运行：cd frontend && npm test -- --run src/__tests__/open-design-page-contract.test.js

预期：PASS。

任务 3：全量前端验证与视觉验收

步骤 1：运行前端验证

运行：

cd frontend
npm test -- --run
npm run verify:theme
npm run verify:scoring
npm run build

预期：全部通过，构建无错误。

步骤 2：在 1280×720 视口检查登录页

对照 reference-login-viewport.png 检查 56/44 分栏、品牌标题、表单中心、控件左边界和底部指标基线；修复所有明显错位后重复检查。

任务 4：同步单 JAR 静态资源

步骤 1：同步构建产物

运行：

rm -rf backend/src/main/resources/static/assets
cp -R frontend/dist/. backend/src/main/resources/static/
cmp frontend/dist/index.html backend/src/main/resources/static/index.html

预期：cmp 退出码为 0。

步骤 2：重新打包

运行：cd backend && mvn clean package

预期：前后端测试全部通过且输出 BUILD SUCCESS。

2026-07-14-cohere-login-redesign.md 3.5 KB Permalink History Raw