24 KiB
name, description, colors, typography, rounded, spacing, components
| name | description | colors | typography | rounded | spacing | components | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 品牌中心部门看板 | 以深色部门导航轨组织业务、资产、组织与治理工作的内部数据工作台。 |
|
|
|
|
|
Design System: 品牌中心部门看板
Overview
Creative North Star: "深色导航轨数据工作台"
品牌中心是一套固定导航、快速切换与逐层下钻的内部运营界面。深海军蓝导航轨提供稳定坐标，白色操作顶栏承载全局控制，冷灰画布上以矩形白色工作面板组织真实数据、示例状态与待接入框架。
它保留品牌中心自己的五个职责域、16 个小项入口，以及素材库、自动化工作流、人员架构、数据口径与价值指标五项已接入业务，不复制参考图中的外部品牌、店铺数据或水印。根路径默认进入核心指标，五域入口由固定侧栏承载；各子页直接呈现数据工作面，不再经过部门总览页。品牌中心架构外的普通用户只进入素材资产库，使用无侧栏、无返回品牌中心入口的独立工作壳。
Key Characteristics:
- 272px 固定深色导航轨，桌面可折叠为 80px。
- 72px 白色顶栏与
#f2f4f7冷灰画布组成稳定后台骨架；账户入口固定在侧栏底部。 #1677ff只用于当前项、主要行动和明确焦点。- 白色面板以 8–12px 圆角、细边框和克制阴影呈现。
- 移动端导航是完整的模态抽屉；内容状态始终诚实标注。
- 自动化工作流在 Department Shell 内使用 232px 二级业务栏与同源真实操作面，移动端改为顶部两列菜单。
- 数据口径在 Department Shell 内使用 232px 二级栏直接显示“公司组织架构”，右侧复用真实组织树和人员明细，不增加折叠层。
- 人员架构在 Department Shell 内直接复用真实组织工作面，并将组织树根节点限定为“品牌中心”。
- 素材资产库按权威组织归属选择外壳：品牌中心成员保留 Department Shell，外部普通用户只显示 64px 中性顶栏、素材工作面与退出入口。
- 进行中项目明细采用可键盘聚焦的横向滚动数据表：桌面固定“审批单标题”首列并保留 14 项业务字段，移动端转换为同字段的语义化定义列表；节点时间在数值下方标注对应流程节点名称。
- 按时交付明细使用紧凑的三项流程筛选条；当前项用浅蓝底和蓝字表达，未选项悬停为灰底，切换时同步更新公式、数量和横向明细表。
- 团队负荷明细按部门展开人员和流程，商品企划部从人员、流程归属和平均负荷统计中排除；页面明确标注排除部门与指定人员。
- 团队产能页面使用固定五项部门二级导航（品牌创意A部、品牌创意B部、综合支持部、品牌设计部、空间视觉部），按该顺序排列；右侧先标注当前钉钉组织架构在职人数，再参照业务趋势界面按“美术设计流程”和“内容视频流程”分成两个近 8 周收到/完结趋势区，并可展开每周明细。流程按当前节点负责人归属并排除美术设计的策划主管分配/审核、内容视频的内容主管分配/审核节点；不展示历史人员快照口径。
- 团队职能页面把用户确认的思维导图转为四个可扫描的团队职责面板：团队名和负责人作为入口，服务/定位、能力/岗位、职责作为稳定层级；四组克制色彩只用于区分团队，节点在宽屏双列排布、窄屏纵向堆叠，不复制长图画布或产生页面级横向滚动。
- 业绩转化页面使用 176px 六品牌二级栏；右侧先展示“流程 × 商品ID”列表，再在下方展开所选商品的身份信息、三组指标摘要、单指标每日趋势与每日明细。不得增加第三个常驻侧栏，也不得把八项指标拆成八张装饰卡；缺失日期用趋势断点和
—表示，与真实零值严格区分。
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+ 白字。 - 侧栏从五个职责域直接开始，不显示独立“部门总览”入口；根路径与“核心指标”入口指向同一默认工作面。
- 账户入口固定在侧栏最下方并向上展开菜单；顶栏只保留页面定位与导航折叠控制。
- 子页面标题直接承接首屏内容，不在标题上方增加重复的面包屑面板。
- 16 个小项在侧栏使用 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 或条件隐藏导航。
Permission Groups Workbench
- Scope:
PermissionGroupsDashboard延续 Department Shell 的深色导航轨、浅色画布与白色工作面，采用任务优先的 Operate 模式。 - Structure: 桌面左侧为可搜索的 224px 权限组列表，右侧固定“素材权限、部门、人员、组设置”四个页签。主区域以 flex 填满顶栏下方视口，页签内容独立滚动，底部保存栏作为正常 flex 项占位。
- Mobile: 1024px 以下以原生选择框切换权限组；640px 以下权限矩阵转为两列勾选列表，四个页签保留文字，保存栏在页面底部 sticky。
- Save States: 素材权限明确点击“保存”，有草稿时底栏显示“X 项未保存”并提供“撤销”；草稿跨页签与同组部门、人员管理动作保留。组名通过“保存组名”确认；部门、人员归属及视频提前访问切换立即生效，界面明确标注。
- Minimal Copy: 控件文字承担说明；移除重复标题、数量和大段帮助，仅保留未保存、立即生效、错误与确认信息。部门/人员/组设置无素材草稿时不显示保存栏；组织完整路径保留在悬停提示与辅助语义中。
- Scoped Primary Action: 本工作台的创建与权限保存按钮使用深蓝底（
#0050cb）和白字，对比度约 6.98:1；hover 为#003da3，focus-visible 保留#1677ff轮廓。此变体仅限权限组工作台，其他页面沿用全局 Action Blue。 - Interaction: 页签提供 tab/tabpanel 关联与方向键、Home/End 导航。组或页签切换以限定在工作面内的 GSAP
useGSAP呈现 180msexpo.out轻移与显现；reduced-motion 时不运行 tween，更新与卸载时 revert 清理。
User Permissions List
- Scope:
UserPermissionsDashboard属于 Operate 模式，沿用 Department Shell 的视觉语言。 - Density: 搜索结果使用一个白色列表，桌面共享“人员、部门组、个人组、加组”表头，常规人员行约 68px；姓名、账号/部门、继承来源和个人组均在同行，不再为每个人建立大卡片。
- Responsive: 1280px 以下转为两列；640px 以下加组与人物身份同一行，部门组和个人组在下方换行。长名称与多组允许行高自然增加。
- Interaction: 个人组提供具备人员/组名的移除按钮，独立加组选择器保留原提交行为；部门继承来源仅展示。完整部门路径保留在悬停提示及辅助语义中，错误与成功状态使用 alert/status。
Do's and Don'ts
Do:
- Do 让品牌中心成员从根路径直接进入核心指标，并在框架页、指标页、明细页、加载/异常状态和素材库复用同一 Department Shell；范围外普通用户在素材库使用独立工作壳。
- Do 保持 5 个职责域、16 个小项、8 个框架入口，以及素材库、自动化工作流、人员架构、数据口径和价值指标五项已接入业务的产品真相。
- Do 让价值指标直接复用素材资产库数据，按资产类型显示复用率，并按下载次数降序展示明细。
- Do 让品牌知识库沿用素材资产库的搜索、分类、排序与内容网格节奏，并在数据未接入时显示诚实空状态。
- 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/*直接进入工作台。