19 KiB
name, description, colors, typography, rounded, spacing, components
| name | description | colors | typography | rounded | spacing | components | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 品牌中心部门看板 | 以深色部门导航轨组织业务、资产、组织与治理工作的内部数据工作台。 |
|
|
|
|
|
Design System: 品牌中心部门看板
Overview
Creative North Star: "深色导航轨数据工作台"
品牌中心是一套固定导航、快速切换与逐层下钻的内部运营界面。深海军蓝导航轨提供稳定坐标，白色操作顶栏承载全局控制，冷灰画布上以矩形白色工作面板组织真实数据、示例状态与待接入框架。
它保留品牌中心自己的五个职责域、22 个小项入口，以及素材库、自动化工作流、人员架构与数据口径四项已接入业务，不复制参考图中的外部品牌、店铺数据或水印。根路径默认进入核心指标，五域入口由固定侧栏承载；各子页直接呈现数据工作面，不再经过部门总览页。品牌中心架构外的普通用户只进入素材资产库，使用无侧栏、无返回品牌中心入口的独立工作壳。
Key Characteristics:
- 272px 固定深色导航轨，桌面可折叠为 80px。
- 72px 白色顶栏与
#f2f4f7冷灰画布组成稳定后台骨架；账户入口固定在侧栏底部。 #1677ff只用于当前项、主要行动和明确焦点。- 白色面板以 8–12px 圆角、细边框和克制阴影呈现。
- 移动端导航是完整的模态抽屉；内容状态始终诚实标注。
- 自动化工作流在 Department Shell 内使用 232px 二级业务栏与同源真实操作面，移动端改为顶部两列菜单。
- 数据口径在 Department Shell 内使用 232px 二级栏直接显示“公司组织架构”，右侧复用真实组织树和人员明细，不增加折叠层。
- 人员架构在 Department Shell 内直接复用真实组织工作面，并将组织树根节点限定为“品牌中心”。
- 素材资产库按权威组织归属选择外壳：品牌中心成员保留 Department Shell，外部普通用户只显示 64px 中性顶栏、素材工作面与退出入口。
Colors
深色导航和高识别蓝色建立方向感，冷灰中性色保持高密度数据的可读性；职责域色只做局部识别，不铺满主画布。
Primary
- Action Blue (
#1677ff): 当前导航项、主要按钮、焦点环和关键链接。 - Deep Navy Rail (
#06192d): 桌面固定导航和移动抽屉。
Secondary
- Business Orange (
#9a4d08), Assets Green (#087052), Organization Gold (#725400), Governance Blue (#214ba7): 五个职责域的局部图标、摘要和软色块。 - Connected Mint (
#31d0aa): 已接入业务入口的小圆点状态。
Neutral
- Canvas Gray (
#f2f4f7): 主工作区背景。 - Panel White (
#ffffff): 顶栏、面板、表格和字段。 - Soft Surface (
#f8fafc): 面板内部的次级行或骨架。 - Divider (
#e2e8f0): 面板、行、表格与字段边界。 - Primary Ink (
#101828) / Secondary Ink (#66758b): 标题、正文和辅助信息。 - Workflow Active (
#e6f4ff,#0050cb,#315f91): 自动化工作流二级栏的选中底、标题与说明。 - Workflow Inactive (
#4f6077,#667085,#eef2f6): 未选标题、说明与 hover；焦点环固定为#5a9ce6。
Named Rules
The Current Location Rule. 根路径直接进入核心指标，页面只保留一个最强的 #1677ff 导航选中态；不设置独立“部门总览”入口，职责域色不得与当前项竞争。
The Truth Color Rule. 绿色只表示真实已接入，示例值和待接入状态不得伪装成成功。
The Embedded Business Truth Rule. 二级栏只切换既有真实业务操作面；选中态、URL 与 iframe 内容必须同步，不能用入口卡片或示例数据替代。
Typography
Display Font: System UI sans-serif
Body Font: System UI sans-serif
Character: 紧凑、直接、适合中文运营后台；依靠字重和间距建立层级，不使用装饰性字体。
Hierarchy
- Display (700, 36px, 1.2): 核心指标与关键业务页标题；移动端降至约 30px。
- Headline (700, 30px, 1.25): 指标与明细页标题。
- Title (700, 20px, 1.4): 工作板块、数据分区和面板标题。
- Body (400, 16px, 1.75): 页面说明，建议控制在约 70ch 内。
- Label (600, 14px, 1.4): 导航、表头、按钮和状态标签。
Named Rules
The Dense Tool Rule. 顶栏和导航保持 12–14px 紧凑标签；页面标题才使用 30–36px，不把每个面板都做成英雄区。
Layout
桌面端采用固定侧栏工作台：导航轨宽 272px，可折叠为 80px；右侧顶栏高 72px；主内容最大宽度 1600px，使用 16/24/32px 响应式内边距。访问根路径时直接进入核心指标；其余职责域及小项全部通过固定侧栏访问，不额外渲染部门总览工作地图。
品牌中心工作台访问范围以活跃账号绑定的权威 HR 组织路径为准。系统管理员保留维护通行能力；其余人员只有任一在职组织路径包含精确“品牌中心”节点时才能进入 / 与 /workspaces/*。范围外人员访问这些地址时服务端跳转至 /assets/material-library，素材库仅渲染中性独立顶栏、素材内容和退出登录，不显示品牌中心标识、侧栏、移动抽屉或任何返回入口。
1024px 以下隐藏固定侧栏，以左侧模态抽屉替代。抽屉宽度为 min(86vw, 304px)，打开时锁定页面滚动、底层内容 inert、焦点进入并约束在导航内，支持 Escape 关闭并恢复触发器焦点。390px 页面不得产生全局横向溢出。
自动化工作流在 Department Shell 内容区内再分两层：桌面左侧为 232px 白 / 雾灰二级栏，右侧为 minmax(0, 1fr) 的同源实际业务操作面；移动端二级栏移动到内容顶部，以两列菜单呈现。二级栏永久不渲染“自动化工作流”标题、接入数量或独立统计区，只显示“绩效考核调研”“作品过稿看板”两个菜单。?workflow=performance-survey|work-review 持久化当前选择并与嵌入内容同步。
右侧通过同源 iframe 直接嵌入 /performance-survey 与 /work-review，保留原业务的真实数据、权限和交互。嵌入业务中所有 href="/" 的跨应用返回必须使用 target="_top"，确保返回品牌中心根页面而不是在 iframe 内再次嵌套首页。
数据口径同样使用 232px 二级栏，但只有“公司组织架构”一个直接菜单，不渲染“数据来源”分组、折叠触发器、说明头或数量。桌面为左栏右工作面，移动端菜单移动到工作面顶部。右侧复用主线 /organization 的真实组织树与人员明细内容并保持原管理员权限；嵌入态只移除重复的旧壳，不复制数据逻辑。
人员架构直接进入 /workspaces/organization/people-structure，在 Department Shell 内复用同一真实组织工作面。组织树只显示公司组织架构中的“品牌中心”节点及其下级，标题、总人数、在职/离职统计和人员表都使用该范围；若同步数据中没有该节点，必须显示明确的同步提示，禁止回退到公司全量。
The Two-Level Workflow Rule. 自动化工作流的二级栏只包含两个业务菜单，不添加标题、数量、说明头或入口卡；右侧始终是当前菜单对应的真实操作面。
The Direct Data Source Rule. 数据口径二级栏直接显示“公司组织架构”，不增加“数据来源”折叠层；右侧必须复用真实组织架构内容和原权限边界。
The Brand Center Scope Rule. 人员架构只呈现公司组织架构中的“品牌中心”节点及其下级人员；公司级 /organization 保持全量视图，节点缺失时显示同步提示而不是回退全量。
The Top-Level Return Rule. 嵌入业务的根路径返回必须跳出 iframe 到顶层浏览上下文，禁止在操作面内再次嵌入品牌中心首页。
The Organization Gate Rule. 品牌中心归属由权威人员绑定与精确组织路径决定；范围外普通用户只能进入素材资产库，品牌中心、组织、管理、考核与过稿工作面均须服务端拦截，视觉隐藏与路由门禁必须同时成立。
Elevation & Depth
系统以边框和底色分层为主，阴影只提供轻微离地感。顶栏与静态数据面板无需强阴影；首页职责域、指标组和悬浮菜单可使用低强度环境阴影。
Shadow Vocabulary
- Panel Low (
0 6px 18px rgba(15, 23, 42, 0.05)): 仅用于需要与画布分离的主要白色面板。 - Menu (
0 14px 38px rgba(15, 23, 42, 0.16)): 账户菜单、移动浮层和可拖动榜单。
Named Rules
The Border-First Rule. 默认先用 #e2e8f0 细边框建立结构；不要用超过 20px 的主表面圆角与大阴影制造漂浮岛。
Shapes
主表面使用 8–12px 圆角：8px 用于字段、导航项和小面板，12px 用于职责域和大数据面板。固定侧栏和顶栏已提供位置上下文，子页面不重复渲染面包屑。圆形只用于状态点、头像和明确图标容器。不得恢复 22–28px 的门户式主表面。
Components
Buttons
- Shape: 8–12px 圆角，最小触控高度 40–44px。
- Primary:
#1677ff背景和白字；hover 变深，focus-visible 使用清晰蓝色环。 - Secondary: 白底、
#e2e8f0边框和深色文字。
Chips
- Style: 8px 或全圆角；状态文案必须同时说明“实时读取”“示例值”或“待接入”，不能只靠颜色。
Cards / Containers
- Corner Style: 主要面板 12px，内部分区 8px。
- Background: 白色；次级行可用
#f8fafc。 - Shadow Strategy: 边框优先，阴影克制。
- Internal Padding: 20–32px，随屏宽收紧。
Inputs / Fields
- Style: 白底、8px 圆角、
#e2e8f0边框。 - Focus:
#1677ff边框或 2px focus ring。 - Error / Disabled: 红色错误与降低不透明度并用，保留文字解释。
Navigation
- 深色轨默认文字为
#aebdcd，hover 使用低透明白色，当前项使用#1677ff+ 白字。 - 侧栏从五个职责域直接开始，不显示独立“部门总览”入口；根路径与“核心指标”入口指向同一默认工作面。
- 账户入口固定在侧栏最下方并向上展开菜单；顶栏只保留页面定位与导航折叠控制。
- 子页面标题直接承接首屏内容，不在标题上方增加重复的面包屑面板。
- 22 个小项在侧栏使用 16px 语义线性图标；选中项图标随文字切为白色，页面标题区不重复摆放同一导航图标。
- 大职责域按钮只展开/收起；小项链接承担导航，并以
aria-current="page"标识当前位置。 - “人员架构”进入
/workspaces/organization/people-structure，在 Department Shell 内复用真实组织工作面并聚焦“品牌中心”；公司级/organization继续保留全量视图。 - “数据口径”使用单项二级栏直接显示“公司组织架构”；有管理员权限时复用真实组织工作面，无权限时显示明确权限提示。
- 素材资产库根据会话中的品牌中心访问声明选择外壳；范围外普通用户的独立顶栏只显示“素材资产库”和“退出登录”，不得出现品牌中心链接。
- 移动抽屉使用
role="dialog"、aria-modal="true"和完整键盘焦点管理。
Automation Workflow Split Workbench
- Desktop Structure: 深色主导航右侧是 232px 白 / 雾灰二级栏，再右侧是同源真实操作面；整体填满
calc(100dvh - 72px)，不生成欢迎页或入口卡片。 - Menus: 只显示“绩效考核调研”和“作品过稿看板”。选中项使用
#e6f4ff底、#0050cb标题、#1677ff图标和#315f91说明；未选项使用#4f6077标题、#667085说明，hover 为#eef2f6，active hover 不得覆盖选中底。 - Focus: 两个菜单最小高度 58px，8px 圆角，焦点环为
#5a9ce6；当前项同时设置aria-current="page"。 - Mobile: 同一菜单移动到操作面顶部并变为两列；桌面说明在窄屏隐藏，顺序和 URL 语义不变。
- Embedding:
/performance-survey与/work-review直接保留各自真实数据、权限、工具栏和交互；?workflow=记录选择。所有跨应用根路径返回使用target="_top"。 - Permanent Omission: 二级栏顶部永久不显示“自动化工作流”、接入数量、统计区或解释区。
Data Definitions Split Workbench
- Desktop Structure: 主导航右侧是 232px 雾灰二级栏，再右侧是可独立滚动的真实公司组织架构工作面。
- Direct Menu: 二级栏只显示“公司组织架构”，选中态复用
#e6f4ff、#0050cb、#1677ff与#315f91；不得增加“数据来源”标题或折叠控件。 - Permissions: 仅
ADMIN、SYSTEM_ADMIN与DEPT_ADMIN复用真实组织树；其他角色保留二级栏并显示明确权限提示，不重定向或嵌套首页。 - Mobile: 单项菜单移动到工作面顶部并保持 58px 最小高度；组织树与人员表由右侧工作面独立滚动。
Data Status Placement
所有子页面从页面标题直接进入核心内容，不渲染独立的“数据接入说明”“数据来源说明”或“计算说明”面板。真实读取、示例值、待接入、读取失败和公式状态由对应卡片或数据模块自身承担；实际业务操作帮助不属于此类，仍应保留在需要的位置。
Standalone Material Library Shell
- Audience: 品牌中心权威组织范围外的普通用户。
- Structure: 64px 白色中性顶栏 + 完整素材资产工作面；不渲染 Department Shell、侧栏、品牌中心副标题或返回图标。
- Actions: 顶栏只提供素材资产库定位和退出登录；素材上传、筛选、分享与下载能力仍由原业务权限控制。
- Security:
/与/workspaces/*同时经过会话声明、Middleware 和服务端 Layout 门禁，禁止仅靠 CSS 或条件隐藏导航。
Do's and Don'ts
Do:
- Do 让品牌中心成员从根路径直接进入核心指标，并在框架页、指标页、明细页、加载/异常状态和素材库复用同一 Department Shell；范围外普通用户在素材库使用独立工作壳。
- Do 保持 5 个职责域、22 个小项、18 个框架入口，以及素材库、自动化工作流、人员架构和数据口径四项已接入业务的产品真相。
- Do 明确区分真实数据、示例值、公式待接入与空数据。
- Do 在桌面与 390px 移动宽度验证导航、焦点和横向溢出。
- Do 让自动化工作流的菜单、
?workflow=和右侧真实业务操作面始终同步。 - Do 让嵌入业务的根路径返回以
target="_top"跳出 iframe。 - Do 让数据口径直接显示“公司组织架构”并沿用主线管理员权限。
- Do 让人员架构只显示“品牌中心”节点、下级组织与对应人员，并沿用主线管理员权限。
- Do 让品牌中心归属声明、服务端重定向和素材库外壳保持一致，并在桌面与移动端验证没有返回品牌中心入口。
Don't:
- Don't 恢复旧版漂浮岛视觉、门户式白色英雄卡或超过 20px 的主表面圆角。
- Don't 恢复独立部门总览页或在核心指标页提供“返回部门看板”按钮。
- Don't 让职责域标题本身成为导航；只有下方小项链接进入二级页面。
- Don't 复制参考图中的京东品牌、店铺指标、水印或虚构业务数据。
- Don't 让移动抽屉键盘焦点穿透到底层页面。
- Don't 在自动化工作流二级栏顶部显示标题、接入数量、统计区或独立说明区。
- Don't 用入口卡片、复制页面或假数据替代
/performance-survey与/work-review的真实操作面。 - Don't 让
href="/"在 iframe 内打开并嵌套品牌中心首页。 - Don't 在数据口径二级栏增加“数据来源”标题、折叠层或占位说明卡。
- Don't 让人员架构回退到公司全量组织树，或复制一套脱离主线数据源的人员列表。
- Don't 仅隐藏品牌中心侧栏却继续允许范围外用户通过
/或/workspaces/*直接进入工作台。