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 静态资源同步全部通过。