# Cohere 登录页重构设计规格

日期：2026-07-14

## 目标

将当前登录页重构为忠实于 Open Design 原型构图、符合 Cohere 视觉语言的企业 OKR 登录入口。保留医梦品牌识别，移除医院、科室等不符合企业 OKR 场景的内容。

## 设计依据

- Open Design 登录页原型：`frontend/public/prototype.html`
- 同尺寸参考截图：`docs/audit/open-design-2026-07-13/reference-login-viewport.png`
- Cohere 设计规范：`awesome-design-md/design-md/cohere/DESIGN.md`
- 医梦品牌色：深色 `#2b1f99`，浅色 `#3ad4d8`

## 桌面布局

- 页面占满视口，使用 56% / 44% 双栏布局。
- 左侧为完整的深色品牌面，统一使用 `#2b1f99`，不在内部嵌套浅色卡片。
- 右侧为纯白画布，登录表单整体垂直居中，内容宽度为 360–380px。
- 两栏内容分别建立独立的纵向基线，避免 Logo、标题、表单和底部指标相互漂移。

## 左侧品牌面

- 顶部使用克制尺寸的医梦品牌标识和 `OKR SYSTEM` 技术标签。
- 中部主标题为 48–56px、常规至中等字重、紧凑行高，不使用厚重粗体。
- 主文案使用企业 OKR 语义：公司战略、逐级对齐、执行跟踪和绩效闭环。
- 底部指标采用三列等宽网格，共用顶部细分隔线和文字基线：
  - `60%`：OKR 权重
  - `40%`：绩效维度
  - `TRACE`：全过程留痕
- `#3ad4d8` 仅用于 Logo 细节、焦点或小面积强调，不作为另一块大背景。

## 右侧登录区

- 表单不再拆分为头部、主体、底部三个拼接边框盒。
- 使用一个连续、无卡片化外框的内容区。
- `INTERNAL ACCESS` 作为 11–12px 技术标签。
- 主标题为 32–36px，副文案为 14px。
- 标签、输入框、错误文本和按钮使用一致的左边界。
- 输入框高度 48px，8px 圆角，1px 灰色边框；聚焦时使用 `#3ad4d8` 边框和轻量焦点环。
- 登录按钮高度 48px，使用 `#2b1f99` 背景和 pill 圆角；悬停状态仅做轻微明度变化。
- 底部提示为“账号由 HR 管理员创建”，不添加演示模式和虚构业务数据。

## 色彩与层级约束

- 大面积深色只使用 `#2b1f99`。
- 大面积浅色只使用白色或现有浅灰画布。
- `#3ad4d8` 只承担高亮、焦点和局部品牌强调。
- 不使用绿色、渐变背景、重阴影、玻璃拟态或深色容器套浅色卡片。
- 层级主要依靠字号、留白、细边框和表面切换建立。

## 响应式

- 768px 以下切换为单栏白色页面。
- 移动端保留紧凑品牌头部，不显示大面积左侧品牌面和三项指标。
- 表单左右留白至少 24px，按钮和输入框保持 48px 触控高度。
- 不产生横向滚动。

## 交互与错误处理

- 保留现有用户名、密码校验和登录请求逻辑。
- 登录中按钮显示加载状态并禁止重复提交。
- 登录失败由统一 API 拦截器显示后端错误，不显示 `canceled` 等内部异常文本。
- Enter 键提交行为保持不变。

## 验收标准

- 在 1280×720 视口与参考原型进行同尺寸对照。
- 56/44 分栏、品牌标题、表单中心和底部指标不存在可见错位。
- 表单所有控件左边界一致，垂直间距遵循 8px 节奏。
- 页面中不存在医院、科室或医疗经营指标文案。
- 绿色、渐变、重阴影和拼接表单卡片全部移除。
- 现有登录功能、错误反馈和移动端布局可用。
- 前端测试、主题检查、生产构建以及单 JAR 静态资源同步全部通过。