|
|
@@ -0,0 +1,75 @@
|
|
|
+# 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 静态资源同步全部通过。
|
wangkangyjy