gongxiangp2/DESIGN.md
chenpei 6c6c282203 feat: 全站视觉统一白皮书语言 + 个人档案改造 + 顶栏平台化
视觉统一(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 对齐)
2026-08-15 14:16:20 +08:00

3.3 KiB
Raw Blame History

DESIGN.md — 由壹点·品牌中心(看板首页)

记录自建成代码,非先行规范。方向:用户裁定的 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)与旧顶栏保持既有视觉不动