6c6c282203
视觉统一（Zen Minimal × Future Organic 白皮书语言，全站浅色单主题）： - 登录页：品牌→由壹点·品牌中心，白纸底+发丝线+柔光光晕，黑按钮 - 作品过稿：深灰头→白皮书，返回链接→返回创意资产库 - 绩效考核：桌面+移动双头部换白皮书，标题改绩效考核，返回改链接 - 组织架构：BoardShell+页面 76 处调色板全量替换（#eef1f4→#fafafa 等） - admin 后台：MaterialsHeader（面包屑治理与设置），Tab 栏墨色高亮 - 深色主题废弃：globals.css 移除媒体查询，tailwind darkMode:'class' 不挂 .dark - 设计文档同步更新：AGENTS.md UI 基线/DESIGN.md/PRODUCT.md/README.md/design-qa.md 个人档案（原个人中心）： - API 合并权威人员档案（getEmployeeByUserId → 花名/工号/部门/职位/M-P等级/主管/状态） - 页面白皮书化：权威档案卡（只读 HR 字段）+ 账号区（头像上传）+ 素材/收藏 顶栏平台化： - MaterialsHeader 双模式：首页（五板块导航+全套工具+菜单）/板块（面包屑） - 菜单重排：我的档案/绩效考核/作品过稿看板‖更新记录/提交反馈‖治理与设置‖退出 - 菜单头身份行：花名+职位·部门（权威档案） - 首页排序：01 创意资产库（全员）→ 02 组织管理（管理员）→ 03-05 规划中 - 素材库改名创意资产库，全站同步（索引/导航/卡片/按钮/页脚） - 排行榜换白皮书（白底发丝线+琥珀前三名） 构建修复： - tsconfig 排除 output/（本地审计临时文件不再卡类型检查） - 存储边界门禁豁免 output/（与 .dockerignore 对齐）
64 lines
3.3 KiB
Markdown
64 lines
3.3 KiB
Markdown
# DESIGN.md — 由壹点·品牌中心（看板首页）
|
||
|
||
<!-- impeccable:design-schema 1 -->
|
||
|
||
> 记录自建成代码，非先行规范。方向：用户裁定的 Zen Minimal × Future Organic 融合（2026-08-15）。
|
||
> **全站浅色单主题**：深色主题已废弃（2026-08-15 用户裁定），`darkMode: 'class'` 且不挂 `.dark`，所有 `dark:` 变体失效；新代码禁止再写 `dark:` 类。遗留 `dark:` 类 inert 保留，随逐页统一清理。
|
||
|
||
## World
|
||
|
||
「白皮书」：整页是一张编辑排印的品牌白皮书——白纸黑字、发丝线、超大留白；五个板块排成作品集式编号索引；唯一的色彩氛围是右上角一枚缓慢呼吸的柔紫光晕。安静、克制、有底气。
|
||
|
||
## Color
|
||
|
||
| 令牌 | 值 | 用途 |
|
||
|---|---|---|
|
||
| paper | `#fafafa` | 页面底 |
|
||
| surface | `#ffffff` | 白卡、悬停行底 |
|
||
| ink | `#1a1c1d` | 标题、正文主色、主按钮 |
|
||
| body | `#6b7075` | 次级正文（≥4.5:1） |
|
||
| faint | `#86898e` | 注脚/微标注/规划态文字（≥4.5:1） |
|
||
| ghost-title | `#8f9398` | 规划中板块标题（大字 ≥3:1） |
|
||
| hairline | `#e7e8ea` | 全部分割线与卡片边 |
|
||
| accent | `#6e79c8` / 深链 `#5a66b8` | 柔光光晕 / 页脚链接 |
|
||
| accent-wash | `#eef0fa` | 光晕最浅层、::selection |
|
||
| signal-live | `#157a4b` | 已上线状态点 |
|
||
| signal-building | `#6e79c8` | 建设中状态点 |
|
||
| signal-planned | `#9aa0a8` | 规划中状态点 |
|
||
|
||
无阴影（平面化）；层级靠留白、字重与发丝线。**logo 双版本**：浅底表面用 `loginLogoUrl`（深蓝+橙图案），黑底表面用 `headerLogoUrl`（亮色图案）。
|
||
|
||
## Type
|
||
|
||
- 中文标题：Noto Sans SC（`font-display`），600 字重、`-0.03em` 紧字距；首页巨标 `clamp(60px, 9vw, 132px)`
|
||
- 工程标注/编号/英文：Space Grotesk（`font-en`），11–13px、大写、`0.14em` 字距
|
||
- 正文：系统无衬线 13–16px、行高 1.7
|
||
- 自托管：`@fontsource/noto-sans-sc`（700/900 备用）、`@fontsource/space-grotesk`（500/600/700）
|
||
|
||
## Layout
|
||
|
||
- 顶栏：56px 高，logo + 「由壹点·品牌中心」+ 板块导航 + 用户区；发丝线下边
|
||
- 容器：`max-w-[1280px] px-6`；板块间距 64–96px
|
||
- 编号索引：五行，网格 `[64px_1fr_160px_120px_32px]`（移动端 `[44px_1fr_auto]`，状态点保留）
|
||
- 已上线板块：两张 12px 圆角白卡（`p-8/10`）承载入口按钮
|
||
|
||
## Components
|
||
|
||
- 索引行：已上线 = 整行可点 Link，悬停白底+箭头浮现+编号变紫；规划中 = 灰行不可点
|
||
- 按钮：主 = 墨色实心 8px 圆角；次 = 1px 墨边白底，hover 反色
|
||
- 状态：7px 圆点 + 12px 文字（移动端不隐藏）
|
||
- 焦点：`ring-2 ring-[#1a1c1d]/70 ring-offset-2`，全站交互元素必带
|
||
|
||
## Motion
|
||
|
||
GSAP（`useGSAP` + `matchMedia('(prefers-reduced-motion: no-preference)')`）：巨字升起 → 光晕淡入 → 索引行 stagger 0.08 → 注脚淡入；光晕 5s 纯 opacity 呼吸循环。全部 0.4–1.2s，信息效率优先（用户既定标准：略丰富但克制）。
|
||
|
||
## Surfaces
|
||
|
||
::selection = `#eef0fa`；链接 `underline-offset-4`；光晕容器 `overflow-hidden` 防移动端横向溢出。
|
||
|
||
## Scope Notes
|
||
|
||
- 组织架构页（`/organization`）仍为旧「云采石场」语言（BoardShell），待后续按本世界对齐
|
||
- 素材库（`/materials`）与旧顶栏保持既有视觉不动
|