327 lines
20 KiB
Markdown
327 lines
20 KiB
Markdown
---
|
||
name: "品牌中心部门看板"
|
||
description: "以深色部门导航轨组织业务、资产、组织与治理工作的内部数据工作台。"
|
||
colors:
|
||
nav-rail: "#06192d"
|
||
action-blue: "#1677ff"
|
||
canvas: "#f2f4f7"
|
||
surface: "#ffffff"
|
||
surface-soft: "#f8fafc"
|
||
border: "#e2e8f0"
|
||
text-primary: "#101828"
|
||
text-secondary: "#66758b"
|
||
nav-secondary: "#aebdcd"
|
||
connected: "#31d0aa"
|
||
danger: "#b42318"
|
||
delivery-yellow: "#a88a00"
|
||
business-orange: "#9a4d08"
|
||
assets-green: "#087052"
|
||
organization-gold: "#725400"
|
||
governance-blue: "#214ba7"
|
||
workflow-active: "#e6f4ff"
|
||
workflow-active-title: "#0050cb"
|
||
workflow-active-description: "#315f91"
|
||
workflow-inactive-title: "#4f6077"
|
||
workflow-inactive-description: "#667085"
|
||
workflow-hover: "#eef2f6"
|
||
workflow-focus: "#5a9ce6"
|
||
typography:
|
||
display:
|
||
fontFamily: "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
|
||
fontSize: "36px"
|
||
fontWeight: 700
|
||
lineHeight: 1.2
|
||
letterSpacing: "-0.03em"
|
||
headline:
|
||
fontFamily: "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
|
||
fontSize: "30px"
|
||
fontWeight: 700
|
||
lineHeight: 1.25
|
||
letterSpacing: "-0.02em"
|
||
title:
|
||
fontFamily: "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
|
||
fontSize: "20px"
|
||
fontWeight: 700
|
||
lineHeight: 1.4
|
||
body:
|
||
fontFamily: "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
|
||
fontSize: "16px"
|
||
fontWeight: 400
|
||
lineHeight: 1.75
|
||
label:
|
||
fontFamily: "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
|
||
fontSize: "14px"
|
||
fontWeight: 600
|
||
lineHeight: 1.4
|
||
rounded:
|
||
sm: "4px"
|
||
md: "8px"
|
||
lg: "12px"
|
||
full: "9999px"
|
||
spacing:
|
||
xs: "4px"
|
||
sm: "8px"
|
||
md: "12px"
|
||
lg: "16px"
|
||
xl: "24px"
|
||
xxl: "32px"
|
||
components:
|
||
navigation-active:
|
||
backgroundColor: "{colors.action-blue}"
|
||
textColor: "{colors.surface}"
|
||
rounded: "{rounded.md}"
|
||
padding: "12px"
|
||
panel:
|
||
backgroundColor: "{colors.surface}"
|
||
textColor: "{colors.text-primary}"
|
||
rounded: "{rounded.lg}"
|
||
padding: "24px"
|
||
button-primary:
|
||
backgroundColor: "{colors.action-blue}"
|
||
textColor: "{colors.surface}"
|
||
rounded: "{rounded.md}"
|
||
padding: "12px 16px"
|
||
field:
|
||
backgroundColor: "{colors.surface}"
|
||
textColor: "{colors.text-primary}"
|
||
rounded: "{rounded.md}"
|
||
padding: "12px 16px"
|
||
status-connected:
|
||
backgroundColor: "{colors.connected}"
|
||
textColor: "{colors.nav-rail}"
|
||
rounded: "{rounded.full}"
|
||
size: "6px"
|
||
workflow-secondary-nav:
|
||
backgroundColor: "{colors.surface-soft}"
|
||
textColor: "{colors.workflow-inactive-title}"
|
||
rounded: "{rounded.md}"
|
||
padding: "16px"
|
||
width: "232px"
|
||
workflow-secondary-item-active:
|
||
backgroundColor: "{colors.workflow-active}"
|
||
textColor: "{colors.workflow-active-title}"
|
||
rounded: "{rounded.md}"
|
||
padding: "10px 12px"
|
||
height: "58px"
|
||
data-source-secondary-nav:
|
||
backgroundColor: "{colors.surface-soft}"
|
||
textColor: "{colors.workflow-active-title}"
|
||
rounded: "{rounded.md}"
|
||
padding: "10px 12px"
|
||
width: "232px"
|
||
---
|
||
|
||
# Design System: 品牌中心部门看板
|
||
|
||
## Overview
|
||
|
||
**Creative North Star: "深色导航轨数据工作台"**
|
||
|
||
品牌中心是一套固定导航、快速切换与逐层下钻的内部运营界面。深海军蓝导航轨提供稳定坐标，白色操作顶栏承载全局控制，冷灰画布上以矩形白色工作面板组织真实数据、示例状态与待接入框架。
|
||
|
||
它保留品牌中心自己的五个职责域、17 个小项入口，以及素材库、自动化工作流、人员架构与数据口径四项已接入业务，不复制参考图中的外部品牌、店铺数据或水印。根路径默认进入核心指标，五域入口由固定侧栏承载；各子页直接呈现数据工作面，不再经过部门总览页。品牌中心架构外的普通用户只进入素材资产库，使用无侧栏、无返回品牌中心入口的独立工作壳。
|
||
|
||
**Key Characteristics:**
|
||
|
||
- 272px 固定深色导航轨，桌面可折叠为 80px。
|
||
- 72px 白色顶栏与 `#f2f4f7` 冷灰画布组成稳定后台骨架；账户入口固定在侧栏底部。
|
||
- `#1677ff` 只用于当前项、主要行动和明确焦点。
|
||
- 白色面板以 8–12px 圆角、细边框和克制阴影呈现。
|
||
- 移动端导航是完整的模态抽屉；内容状态始终诚实标注。
|
||
- 自动化工作流在 Department Shell 内使用 232px 二级业务栏与同源真实操作面，移动端改为顶部两列菜单。
|
||
- 数据口径在 Department Shell 内使用 232px 二级栏直接显示“公司组织架构”，右侧复用真实组织树和人员明细，不增加折叠层。
|
||
- 人员架构在 Department Shell 内直接复用真实组织工作面，并将组织树根节点限定为“品牌中心”。
|
||
- 素材资产库按权威组织归属选择外壳：品牌中心成员保留 Department Shell，外部普通用户只显示 64px 中性顶栏、素材工作面与退出入口。
|
||
- 进行中项目明细采用可键盘聚焦的横向滚动数据表：桌面固定“审批单标题”首列并保留 14 项业务字段，移动端转换为同字段的语义化定义列表；节点时间在数值下方标注对应流程节点名称。
|
||
- 按时交付明细使用紧凑的三项流程筛选条；当前项用浅蓝底和蓝字表达，未选项悬停为灰底，切换时同步更新公式、数量和横向明细表。
|
||
- 团队负荷明细按部门展开人员和流程，商品企划部从人员、流程归属和平均负荷统计中排除；页面明确标注排除部门与指定人员。
|
||
- 团队产能页面使用固定五项部门二级导航（品牌创意A部、品牌创意B部、综合支持部、品牌设计部、空间视觉部），按该顺序排列；右侧先标注当前钉钉组织架构在职人数，再参照业务趋势界面按“美术设计流程”和“内容视频流程”分成两个近 8 周收到/完结趋势区，并可展开每周明细。流程按当前节点负责人归属并排除美术设计的策划主管分配/审核、内容视频的内容主管分配/审核节点；不展示历史人员快照口径。
|
||
|
||
## 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` + 白字。
|
||
- 侧栏从五个职责域直接开始，不显示独立“部门总览”入口；根路径与“核心指标”入口指向同一默认工作面。
|
||
- 账户入口固定在侧栏最下方并向上展开菜单；顶栏只保留页面定位与导航折叠控制。
|
||
- 子页面标题直接承接首屏内容，不在标题上方增加重复的面包屑面板。
|
||
- 17 个小项在侧栏使用 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 个职责域、17 个小项、11 个框架入口，以及素材库、自动化工作流、人员架构和数据口径四项已接入业务的产品真相。
|
||
- **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/*` 直接进入工作台。
|