615 lines
36 KiB
JSON
615 lines
36 KiB
JSON
{
|
||
"schemaVersion": 2,
|
||
"generatedAt": "2026-10-12T10:15:30Z",
|
||
"title": "Design System: 品牌中心部门看板",
|
||
"extensions": {
|
||
"colorMeta": {
|
||
"nav-rail": {
|
||
"role": "neutral",
|
||
"displayName": "深海军蓝导航轨",
|
||
"canonical": "#06192d",
|
||
"tonalRamp": [
|
||
"#f1f5f9",
|
||
"#dbe4ed",
|
||
"#aebdcd",
|
||
"#7f93a8",
|
||
"#526b83",
|
||
"#2b435b",
|
||
"#142b42",
|
||
"#06192d"
|
||
]
|
||
},
|
||
"action-blue": {
|
||
"role": "primary",
|
||
"displayName": "当前项高识别蓝",
|
||
"canonical": "#1677ff",
|
||
"tonalRamp": [
|
||
"#eff6ff",
|
||
"#dbeafe",
|
||
"#bfdbfe",
|
||
"#93c5fd",
|
||
"#60a5fa",
|
||
"#3b82f6",
|
||
"#1677ff",
|
||
"#0958d9"
|
||
]
|
||
},
|
||
"canvas": {
|
||
"role": "neutral",
|
||
"displayName": "冷灰工作画布",
|
||
"canonical": "#f2f4f7",
|
||
"tonalRamp": [
|
||
"#ffffff",
|
||
"#fafbfc",
|
||
"#f8fafc",
|
||
"#f2f4f7",
|
||
"#e9edf2",
|
||
"#dfe4ea",
|
||
"#cfd6df",
|
||
"#98a2b3"
|
||
]
|
||
},
|
||
"surface": {
|
||
"role": "neutral",
|
||
"displayName": "白色数据面板",
|
||
"canonical": "#ffffff",
|
||
"tonalRamp": [
|
||
"#ffffff",
|
||
"#fcfcfd",
|
||
"#f9fafb",
|
||
"#f2f4f7",
|
||
"#e4e7ec",
|
||
"#d0d5dd",
|
||
"#98a2b3",
|
||
"#667085"
|
||
]
|
||
},
|
||
"surface-soft": {
|
||
"role": "neutral",
|
||
"displayName": "次级交互面",
|
||
"canonical": "#f8fafc",
|
||
"tonalRamp": [
|
||
"#ffffff",
|
||
"#f8fafc",
|
||
"#f1f5f9",
|
||
"#e2e8f0",
|
||
"#cbd5e1",
|
||
"#94a3b8",
|
||
"#64748b",
|
||
"#334155"
|
||
]
|
||
},
|
||
"border": {
|
||
"role": "neutral",
|
||
"displayName": "数据面板边界",
|
||
"canonical": "#e2e8f0",
|
||
"tonalRamp": [
|
||
"#ffffff",
|
||
"#f8fafc",
|
||
"#f1f5f9",
|
||
"#e2e8f0",
|
||
"#cbd5e1",
|
||
"#94a3b8",
|
||
"#64748b",
|
||
"#334155"
|
||
]
|
||
},
|
||
"text-primary": {
|
||
"role": "neutral",
|
||
"displayName": "主要文字",
|
||
"canonical": "#101828",
|
||
"tonalRamp": [
|
||
"#f2f4f7",
|
||
"#d0d5dd",
|
||
"#98a2b3",
|
||
"#667085",
|
||
"#475467",
|
||
"#344054",
|
||
"#1d2939",
|
||
"#101828"
|
||
]
|
||
},
|
||
"text-secondary": {
|
||
"role": "neutral",
|
||
"displayName": "辅助文字",
|
||
"canonical": "#66758b",
|
||
"tonalRamp": [
|
||
"#f8fafc",
|
||
"#e9eef5",
|
||
"#d7e0ea",
|
||
"#b6c4d4",
|
||
"#8fa2b8",
|
||
"#66758b",
|
||
"#4f6077",
|
||
"#344054"
|
||
]
|
||
},
|
||
"nav-secondary": {
|
||
"role": "neutral",
|
||
"displayName": "导航辅助文字",
|
||
"canonical": "#aebdcd",
|
||
"tonalRamp": [
|
||
"#f5f8fb",
|
||
"#e4ebf2",
|
||
"#cfdae5",
|
||
"#aebdcd",
|
||
"#8aa0b6",
|
||
"#647b92",
|
||
"#425a72",
|
||
"#243c54"
|
||
]
|
||
},
|
||
"connected": {
|
||
"role": "success",
|
||
"displayName": "真实已接入状态",
|
||
"canonical": "#31d0aa",
|
||
"tonalRamp": [
|
||
"#ecfdf8",
|
||
"#d1fae5",
|
||
"#a7f3d0",
|
||
"#6ee7b7",
|
||
"#31d0aa",
|
||
"#0e9f78",
|
||
"#087052",
|
||
"#064e3b"
|
||
]
|
||
},
|
||
"danger": {
|
||
"role": "danger",
|
||
"displayName": "错误与风险",
|
||
"canonical": "#b42318",
|
||
"tonalRamp": [
|
||
"#fff1f0",
|
||
"#fee4e2",
|
||
"#fecdca",
|
||
"#fda29b",
|
||
"#f97066",
|
||
"#d92d20",
|
||
"#b42318",
|
||
"#7a271a"
|
||
]
|
||
},
|
||
"delivery-yellow": {
|
||
"role": "warning",
|
||
"displayName": "交付率黄色区间",
|
||
"canonical": "#a88a00",
|
||
"tonalRamp": [
|
||
"#fffceb",
|
||
"#fff7cc",
|
||
"#ffec99",
|
||
"#ffdd66",
|
||
"#e9c436",
|
||
"#c4a516",
|
||
"#a88a00",
|
||
"#725400"
|
||
]
|
||
},
|
||
"business-orange": {
|
||
"role": "secondary",
|
||
"displayName": "业务经营识别色",
|
||
"canonical": "#9a4d08",
|
||
"tonalRamp": [
|
||
"#fff4e7",
|
||
"#ffe2bd",
|
||
"#ffc982",
|
||
"#f3a94f",
|
||
"#d9821c",
|
||
"#b6630b",
|
||
"#9a4d08",
|
||
"#663004"
|
||
]
|
||
},
|
||
"assets-green": {
|
||
"role": "secondary",
|
||
"displayName": "资产与自动化识别色",
|
||
"canonical": "#087052",
|
||
"tonalRamp": [
|
||
"#e9f8f2",
|
||
"#ccefe2",
|
||
"#9fe0ca",
|
||
"#63c4a4",
|
||
"#2ea481",
|
||
"#0f8563",
|
||
"#087052",
|
||
"#064b39"
|
||
]
|
||
},
|
||
"organization-gold": {
|
||
"role": "secondary",
|
||
"displayName": "组织管理识别色",
|
||
"canonical": "#725400",
|
||
"tonalRamp": [
|
||
"#fff8d9",
|
||
"#ffed9a",
|
||
"#f8dc58",
|
||
"#d9bb22",
|
||
"#b99408",
|
||
"#8f7000",
|
||
"#725400",
|
||
"#4f3a00"
|
||
]
|
||
},
|
||
"governance-blue": {
|
||
"role": "secondary",
|
||
"displayName": "治理与设置识别色",
|
||
"canonical": "#214ba7",
|
||
"tonalRamp": [
|
||
"#edf3ff",
|
||
"#d6e4ff",
|
||
"#adc8ff",
|
||
"#85a5ff",
|
||
"#597ef7",
|
||
"#3569df",
|
||
"#214ba7",
|
||
"#15347a"
|
||
]
|
||
},
|
||
"workflow-active": {
|
||
"role": "tertiary",
|
||
"displayName": "工作流选中底",
|
||
"canonical": "#e6f4ff",
|
||
"tonalRamp": [
|
||
"#f7fcff",
|
||
"#eef9ff",
|
||
"#e6f4ff",
|
||
"#bae0ff",
|
||
"#91caff",
|
||
"#69b1ff",
|
||
"#4096ff",
|
||
"#1677ff"
|
||
]
|
||
},
|
||
"workflow-active-title": {
|
||
"role": "primary",
|
||
"displayName": "工作流选中标题",
|
||
"canonical": "#0050cb",
|
||
"tonalRamp": [
|
||
"#e6f4ff",
|
||
"#bae0ff",
|
||
"#69b1ff",
|
||
"#1677ff",
|
||
"#0958d9",
|
||
"#0050cb",
|
||
"#003eb3",
|
||
"#002c8c"
|
||
]
|
||
},
|
||
"workflow-active-description": {
|
||
"role": "tertiary",
|
||
"displayName": "工作流选中说明",
|
||
"canonical": "#315f91",
|
||
"tonalRamp": [
|
||
"#edf6ff",
|
||
"#d6e9fb",
|
||
"#b5d4ee",
|
||
"#8fb8dc",
|
||
"#699ac5",
|
||
"#4c7daf",
|
||
"#315f91",
|
||
"#20436c"
|
||
]
|
||
},
|
||
"workflow-inactive-title": {
|
||
"role": "neutral",
|
||
"displayName": "工作流未选标题",
|
||
"canonical": "#4f6077",
|
||
"tonalRamp": [
|
||
"#f8fafc",
|
||
"#e9eef5",
|
||
"#d7e0ea",
|
||
"#b6c4d4",
|
||
"#8fa2b8",
|
||
"#66758b",
|
||
"#4f6077",
|
||
"#344054"
|
||
]
|
||
},
|
||
"workflow-inactive-description": {
|
||
"role": "neutral",
|
||
"displayName": "工作流未选说明",
|
||
"canonical": "#667085",
|
||
"tonalRamp": [
|
||
"#fcfcfd",
|
||
"#f2f4f7",
|
||
"#e4e7ec",
|
||
"#d0d5dd",
|
||
"#98a2b3",
|
||
"#667085",
|
||
"#475467",
|
||
"#344054"
|
||
]
|
||
},
|
||
"workflow-hover": {
|
||
"role": "neutral",
|
||
"displayName": "工作流未选悬停",
|
||
"canonical": "#eef2f6",
|
||
"tonalRamp": [
|
||
"#ffffff",
|
||
"#f8fafc",
|
||
"#f4f6f8",
|
||
"#eef2f6",
|
||
"#e4e9ef",
|
||
"#d5dde6",
|
||
"#b8c4d2",
|
||
"#7f93a8"
|
||
]
|
||
},
|
||
"workflow-focus": {
|
||
"role": "tertiary",
|
||
"displayName": "工作流焦点环",
|
||
"canonical": "#5a9ce6",
|
||
"tonalRamp": [
|
||
"#eff7ff",
|
||
"#dbeeff",
|
||
"#b8dcff",
|
||
"#8fc4f5",
|
||
"#5a9ce6",
|
||
"#2f7fcf",
|
||
"#176fc1",
|
||
"#0d4d8c"
|
||
]
|
||
},
|
||
"detail-field-border": {
|
||
"role": "neutral",
|
||
"displayName": "详情页字段与次要按钮边框",
|
||
"canonical": "#cfd8e3"
|
||
},
|
||
"detail-control-ink": {
|
||
"role": "neutral",
|
||
"displayName": "详情页次要操作文字",
|
||
"canonical": "#344054"
|
||
},
|
||
"detail-primary-hover": {
|
||
"role": "primary",
|
||
"displayName": "详情页主要操作悬停蓝",
|
||
"canonical": "#0964de"
|
||
}
|
||
},
|
||
"typographyMeta": {
|
||
"display": {
|
||
"displayName": "页面主标题",
|
||
"use": "核心指标与关键业务页标题"
|
||
},
|
||
"headline": {
|
||
"displayName": "数据页标题",
|
||
"use": "指标与明细页标题"
|
||
},
|
||
"title": {
|
||
"displayName": "面板标题",
|
||
"use": "职责域与数据分区"
|
||
},
|
||
"body": {
|
||
"displayName": "正文",
|
||
"use": "页面说明和数据解释"
|
||
},
|
||
"label": {
|
||
"displayName": "操作标签",
|
||
"use": "导航、按钮、表头和状态"
|
||
}
|
||
},
|
||
"shadows": [
|
||
{
|
||
"name": "panel-low",
|
||
"value": "0 6px 18px rgba(15, 23, 42, 0.05)",
|
||
"purpose": "需要与冷灰画布分离的主要白色面板"
|
||
},
|
||
{
|
||
"name": "menu",
|
||
"value": "0 14px 38px rgba(15, 23, 42, 0.16)",
|
||
"purpose": "账户菜单、移动抽屉和可拖动榜单"
|
||
}
|
||
],
|
||
"motion": [
|
||
{
|
||
"name": "state",
|
||
"value": "200ms ease",
|
||
"purpose": "导航折叠、选中和轻量悬停反馈"
|
||
}
|
||
],
|
||
"breakpoints": [
|
||
{
|
||
"name": "sm",
|
||
"value": "640px"
|
||
},
|
||
{
|
||
"name": "lg",
|
||
"value": "1024px"
|
||
},
|
||
{
|
||
"name": "2xl",
|
||
"value": "1536px"
|
||
}
|
||
]
|
||
},
|
||
"components": [
|
||
{
|
||
"name": "Department Navigation Active",
|
||
"type": "navigation",
|
||
"description": "二级页面在深色导航轨中的唯一当前位置；16px 语义图标与文字一起变为白色。",
|
||
"projection": "<a class=\"ds-nav-active\" href=\"#\" aria-current=\"page\"><svg aria-hidden=\"true\" viewBox=\"0 0 24 24\"><path d=\"M3 17l5-5 4 4 7-8\"/><path d=\"M15 8h4v4\"/></svg><span>业务趋势</span></a><style>.ds-nav-active{display:flex;min-height:44px;align-items:center;gap:10px;border-radius:8px;background:#1677ff;color:#fff;padding:0 12px;font:600 14px/1.4 ui-sans-serif,system-ui;text-decoration:none}.ds-nav-active svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.ds-nav-active:focus-visible{outline:2px solid #69a9ff;outline-offset:2px}</style>"
|
||
},
|
||
{
|
||
"name": "Data Panel",
|
||
"type": "card",
|
||
"description": "边框优先的白色矩形数据工作面。",
|
||
"projection": "<section class=\"ds-panel\"><h2>核心指标</h2><p>真实、示例与待接入状态均清晰标注。</p></section><style>.ds-panel{border:1px solid #e2e8f0;border-radius:12px;background:#fff;padding:24px;color:#101828;box-shadow:0 6px 18px rgba(15,23,42,.05)}.ds-panel h2{margin:0;font:700 20px/1.4 ui-sans-serif,system-ui}.ds-panel p{margin:8px 0 0;color:#66758b;font:400 16px/1.75 ui-sans-serif,system-ui}</style>"
|
||
},
|
||
{
|
||
"name": "Primary Button",
|
||
"type": "button",
|
||
"description": "高识别蓝色主要行动按钮。",
|
||
"projection": "<button class=\"ds-button-primary\" type=\"button\">查看明细</button><style>.ds-button-primary{min-height:44px;border:0;border-radius:8px;background:#1677ff;color:#fff;padding:0 16px;font:600 14px/1 ui-sans-serif,system-ui;cursor:pointer}.ds-button-primary:hover{background:#0958d9}.ds-button-primary:focus-visible{outline:2px solid #1677ff;outline-offset:3px}</style>"
|
||
},
|
||
{
|
||
"name": "Search Field",
|
||
"type": "input",
|
||
"description": "白底细边框的数据筛选字段。",
|
||
"projection": "<label class=\"ds-field-label\">搜索<input class=\"ds-field\" type=\"search\" placeholder=\"输入关键词\"></label><style>.ds-field-label{display:grid;gap:6px;color:#344054;font:600 14px/1.4 ui-sans-serif,system-ui}.ds-field{min-height:44px;border:1px solid #e2e8f0;border-radius:8px;background:#fff;padding:0 14px;color:#101828;font:400 16px/1.4 ui-sans-serif,system-ui}.ds-field:focus{outline:2px solid #1677ff;outline-offset:1px}</style>"
|
||
},
|
||
{
|
||
"name": "Connected Status",
|
||
"type": "chip",
|
||
"description": "只有真实接入业务才使用绿色状态。",
|
||
"projection": "<span class=\"ds-status-connected\"><i aria-hidden=\"true\"></i>实时读取</span><style>.ds-status-connected{display:inline-flex;align-items:center;gap:7px;border-radius:9999px;background:#ecfdf8;padding:5px 9px;color:#087052;font:600 13px/1.3 ui-sans-serif,system-ui}.ds-status-connected i{width:7px;height:7px;border-radius:50%;background:#31d0aa}</style>"
|
||
},
|
||
{
|
||
"name": "Sidebar Account Menu",
|
||
"type": "navigation",
|
||
"description": "账户入口固定在侧栏底部，菜单向上展开。",
|
||
"projection": "<div class=\"ds-account\"><button aria-haspopup=\"menu\"><b>本</b><span>本地超级管理员<small>账户与退出</small></span></button></div><style>.ds-account{border-top:1px solid rgba(255,255,255,.1);background:#06192d;padding:12px 16px}.ds-account button{display:flex;min-height:48px;width:100%;align-items:center;gap:12px;border:0;border-radius:8px;background:transparent;color:#dbe4ed;text-align:left}.ds-account b{display:grid;width:36px;height:36px;place-items:center;border-radius:8px;background:#1677ff;color:#fff}.ds-account span{font:600 14px/1.4 ui-sans-serif,system-ui}.ds-account small{display:block;color:#7f93a8;font-weight:400}.ds-account button:focus-visible{outline:2px solid #69a9ff}</style>"
|
||
},
|
||
{
|
||
"name": "Mobile Navigation Drawer",
|
||
"type": "navigation",
|
||
"description": "1024px 以下使用的完整模态导航抽屉。",
|
||
"projection": "<div class=\"ds-drawer\" role=\"dialog\" aria-modal=\"true\" aria-label=\"品牌中心移动导航\"><strong>品牌中心</strong><button type=\"button\" aria-label=\"关闭部门导航\">×</button><nav><a href=\"#\">中心仪表盘</a><a href=\"#\">业务经营</a></nav></div><style>.ds-drawer{width:min(86vw,304px);min-height:360px;background:#06192d;padding:20px;color:#fff;font-family:ui-sans-serif,system-ui}.ds-drawer>button{float:right;border:0;background:transparent;color:#fff;font-size:24px}.ds-drawer nav{display:grid;gap:8px;margin-top:24px}.ds-drawer a{min-height:44px;border-radius:8px;padding:12px;color:#aebdcd;text-decoration:none}.ds-drawer a:focus-visible{outline:2px solid #69a9ff}</style>"
|
||
},
|
||
{
|
||
"name": "Automation Workflow Split Workbench",
|
||
"type": "navigation",
|
||
"description": "Department Shell 内的 232px 二级业务栏与同源真实操作面；移动端菜单改为顶部两列，不渲染标题或接入数量区。",
|
||
"projection": "<section class=\"ds-workflow\"><nav class=\"ds-workflow-nav\" aria-label=\"自动化工作流二级导航\"><button class=\"ds-workflow-item ds-workflow-active\" type=\"button\" aria-current=\"page\"><svg aria-hidden=\"true\" viewBox=\"0 0 24 24\"><path d=\"M9 11l2 2 4-4\"/><path d=\"M5 3h14v18H5z\"/></svg><span><b>绩效考核调研</b><small>考核问卷、填报与结果管理</small></span></button><button class=\"ds-workflow-item ds-workflow-inactive\" type=\"button\"><svg aria-hidden=\"true\" viewBox=\"0 0 24 24\"><path d=\"M6 3h9l3 3v15H6z\"/><path d=\"M9 12h6M9 16h6\"/></svg><span><b>作品过稿看板</b><small>作品提交、评审与退修流转</small></span></button></nav><section class=\"ds-workflow-live\" aria-label=\"绩效考核调研操作区\"><strong>绩效考核调研</strong><p>同源真实业务操作面</p></section></section><style>.ds-workflow{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:360px;background:#fff;font-family:ui-sans-serif,system-ui}.ds-workflow-nav{display:grid;align-content:start;gap:4px;border-right:1px solid #e2e8f0;background:#f8fafc;padding:24px 16px}.ds-workflow-item{display:flex;min-width:0;min-height:58px;align-items:center;gap:12px;border:0;border-radius:8px;padding:10px 12px;text-align:left;transition:background .2s,color .2s}.ds-workflow-item svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.ds-workflow-item span{min-width:0}.ds-workflow-item b,.ds-workflow-item small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ds-workflow-item b{font-size:14px}.ds-workflow-item small{margin-top:2px;font-size:12px}.ds-workflow-active{background:#e6f4ff;color:#0050cb}.ds-workflow-active svg{color:#1677ff}.ds-workflow-active small{color:#315f91}.ds-workflow-active:hover{background:#e6f4ff}.ds-workflow-inactive{background:transparent;color:#4f6077}.ds-workflow-inactive svg{color:#087052}.ds-workflow-inactive small{color:#667085}.ds-workflow-inactive:hover{background:#eef2f6;color:#101828}.ds-workflow-item:focus-visible{outline:2px solid #5a9ce6;outline-offset:0}.ds-workflow-live{min-width:0;background:#f2f4f7;padding:24px;color:#101828}.ds-workflow-live strong{font-size:20px}.ds-workflow-live p{margin:8px 0 0;color:#66758b;font-size:14px}@media(max-width:1023px){.ds-workflow{grid-template-columns:1fr}.ds-workflow-nav{grid-template-columns:repeat(2,minmax(0,1fr));border-right:0;border-bottom:1px solid #e2e8f0;padding:16px}.ds-workflow-item small{display:none}}</style>"
|
||
},
|
||
{
|
||
"name": "Data Definitions Split Workbench",
|
||
"type": "navigation",
|
||
"description": "Department Shell 内的 232px 单项二级栏与真实公司组织架构工作面；不渲染数据来源分组或折叠层。",
|
||
"projection": "<section class=\"ds-data-source\"><nav class=\"ds-data-source-nav\" aria-label=\"数据口径二级导航\"><a class=\"ds-data-source-item\" href=\"#\" aria-current=\"page\"><svg aria-hidden=\"true\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"5\" r=\"2\"/><circle cx=\"5\" cy=\"19\" r=\"2\"/><circle cx=\"19\" cy=\"19\" r=\"2\"/><path d=\"M12 7v5M5 17v-2h14v2\"/></svg><span><b>公司组织架构</b><small>组织树与人员明细</small></span></a></nav><section class=\"ds-data-source-live\" aria-label=\"公司组织架构操作区\"><strong>组织架构</strong><p>沿用真实人员层级、归属明细与管理员权限。</p></section></section><style>.ds-data-source{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:360px;background:#fff;font-family:ui-sans-serif,system-ui}.ds-data-source-nav{border-right:1px solid #e2e8f0;background:#f8fafc;padding:24px 16px}.ds-data-source-item{display:flex;min-height:58px;align-items:center;gap:12px;border-radius:8px;background:#e6f4ff;padding:10px 12px;color:#0050cb;text-decoration:none}.ds-data-source-item svg{width:16px;height:16px;flex:none;fill:none;stroke:#1677ff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.ds-data-source-item b,.ds-data-source-item small{display:block}.ds-data-source-item b{font-size:14px}.ds-data-source-item small{margin-top:2px;color:#315f91;font-size:12px}.ds-data-source-item:focus-visible{outline:2px solid #5a9ce6}.ds-data-source-live{min-width:0;background:#fafafa;padding:24px;color:#101828}.ds-data-source-live strong{font-size:20px}.ds-data-source-live p{margin:8px 0 0;color:#66758b;font-size:14px}@media(max-width:1023px){.ds-data-source{grid-template-columns:1fr}.ds-data-source-nav{border-right:0;border-bottom:1px solid #e2e8f0;padding:16px}.ds-data-source-item small{display:none}}</style>"
|
||
},
|
||
{
|
||
"name": "Permission Groups Primary Button",
|
||
"type": "button",
|
||
"description": "仅用于 PermissionGroupsDashboard 创建权限组与明确保存素材权限的深蓝主按钮；全局 Action Blue 不变。",
|
||
"projection": "<button class=\"ds-permission-groups-primary\" type=\"button\">保存这组权限</button><style>.ds-permission-groups-primary{display:inline-flex;min-height:44px;align-items:center;justify-content:center;gap:8px;border:0;border-radius:8px;background:#0050cb;padding:0 16px;color:#fff;font:600 14px/1.4 ui-sans-serif,system-ui;cursor:pointer}.ds-permission-groups-primary:hover{background:#003da3}.ds-permission-groups-primary:focus-visible{outline:2px solid #1677ff;outline-offset:2px}.ds-permission-groups-primary:disabled{cursor:not-allowed;background:#dce5ef;color:#66758b}</style>"
|
||
},
|
||
{
|
||
"name": "Standalone Material Library Shell",
|
||
"type": "navigation",
|
||
"description": "品牌中心范围外普通用户使用的中性素材库顶栏；只保留页面定位和退出登录，不提供品牌中心入口。",
|
||
"projection": "<header class=\"ds-material-standalone\" aria-label=\"素材资产库顶栏\"><strong><svg aria-hidden=\"true\" viewBox=\"0 0 24 24\"><path d=\"M4 5h6l2 2h8v12H4z\"/></svg>素材资产库</strong><button type=\"button\">退出登录</button></header><style>.ds-material-standalone{display:flex;min-height:64px;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid #e2e8f0;background:#fff;padding:0 24px;color:#101828;font-family:ui-sans-serif,system-ui}.ds-material-standalone strong{display:flex;min-width:0;align-items:center;gap:12px;font-size:16px}.ds-material-standalone svg{width:20px;height:20px;fill:none;stroke:#176fc1;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.ds-material-standalone button{min-height:40px;border:0;border-radius:8px;background:transparent;padding:0 12px;color:#4f6077;font:600 14px/1 ui-sans-serif,system-ui}.ds-material-standalone button:hover{background:#eef2f6;color:#101828}.ds-material-standalone button:focus-visible{outline:2px solid #5a9ce6;outline-offset:2px}</style>"
|
||
},
|
||
{
|
||
"name": "Detail Generator Field",
|
||
"kind": "input",
|
||
"refersTo": "detail-field",
|
||
"description": "仅记录详情页资料、大纲与文案编辑复用的 detailFieldClass；44px 最小高度、8px 圆角与明确的蓝色聚焦环。",
|
||
"html": "<label class=\"ds-detail-field-label\">产品名称<input class=\"ds-detail-field\" placeholder=\"输入已确认的名称\"></label>",
|
||
"css": ".ds-detail-field-label{display:grid;gap:6px;color:#101828;font:500 14px/20px 'Space Grotesk','Noto Sans SC',ui-sans-serif,system-ui,sans-serif}.ds-detail-field{min-height:44px;width:100%;border:1px solid #cfd8e3;border-radius:8px;background:#fff;padding:8px 12px;color:#101828;font-family:inherit;font-size:14px;line-height:20px;font-weight:inherit}.ds-detail-field::placeholder{color:#66758b}.ds-detail-field:focus-visible{outline:none;box-shadow:0 0 0 2px #1677ff}.ds-detail-field:disabled{background:#f8fafc;color:#66758b}"
|
||
},
|
||
{
|
||
"name": "Detail Generator Secondary Button",
|
||
"kind": "button",
|
||
"refersTo": "detail-button-secondary",
|
||
"description": "详情页复用的 detailButtonClass，承载保存、上传、返回和图片替换等次要操作；不替换其他页面按钮。",
|
||
"html": "<button class=\"ds-detail-button-secondary\" type=\"button\">保存修改</button>",
|
||
"css": ".ds-detail-button-secondary{display:inline-flex;min-height:44px;flex-shrink:0;align-items:center;justify-content:center;gap:8px;white-space:nowrap;border:1px solid #cfd8e3;border-radius:8px;background:#fff;padding:0 12px;color:#344054;font:500 14px/20px 'Space Grotesk','Noto Sans SC',ui-sans-serif,system-ui,sans-serif;cursor:pointer;transition:color .15s,background-color .15s,border-color .15s}.ds-detail-button-secondary:hover{background:#f8fafc}.ds-detail-button-secondary:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px #1677ff}.ds-detail-button-secondary:disabled{cursor:not-allowed;opacity:.5}"
|
||
},
|
||
{
|
||
"name": "Detail Generator Primary Button",
|
||
"kind": "button",
|
||
"refersTo": "detail-button-primary",
|
||
"description": "详情页复用的 detailPrimaryClass，用于分析、确认生成、继续生成与导出；保持既有 Action Blue，悬停变体仅限该控件。",
|
||
"html": "<button class=\"ds-detail-button-primary\" type=\"button\">确认大纲并生成</button>",
|
||
"css": ".ds-detail-button-primary{display:inline-flex;min-height:44px;flex-shrink:0;align-items:center;justify-content:center;gap:8px;white-space:nowrap;border:0;border-radius:8px;background:#1677ff;padding:0 16px;color:#fff;font:600 14px/20px 'Space Grotesk','Noto Sans SC',ui-sans-serif,system-ui,sans-serif;cursor:pointer;transition:color .15s,background-color .15s,border-color .15s}.ds-detail-button-primary:hover{background:#0964de}.ds-detail-button-primary:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px #1677ff}.ds-detail-button-primary:disabled{cursor:not-allowed;opacity:.5}"
|
||
},
|
||
{
|
||
"name": "AI Model Management Controls",
|
||
"kind": "custom",
|
||
"description": "仅记录 AiModelManagementPanel 的三个阶段默认模型、目录搜索/能力/开放状态筛选及管理员人工兼容确认控件；可用用途由服务端能力决定。提取现有 fieldClass、buttonClass、primaryClass、checkboxClass；目录每页 20 行，手机搜索整行、两个筛选器各半行；不改变全局令牌。",
|
||
"html": "<section class=\"ds-ai-model-controls\" aria-label=\"AI 模型接入控件\"><div class=\"ds-ai-model-actions\"><button type=\"button\" class=\"ds-ai-model-button\">撤销</button><button type=\"button\" class=\"ds-ai-model-button ds-ai-model-primary\">保存配置</button></div><fieldset class=\"ds-ai-model-defaults\"><legend class=\"ds-ai-model-sr\">阶段默认模型</legend><label class=\"ds-ai-model-label\">资料分析默认模型<select class=\"ds-ai-model-field\"><option>未设置</option></select></label><label class=\"ds-ai-model-label\">卖点文案默认模型<select class=\"ds-ai-model-field\"><option>未设置</option></select></label><label class=\"ds-ai-model-label\">图片生成默认模型<select class=\"ds-ai-model-field\"><option>未设置</option></select></label></fieldset><div class=\"ds-ai-model-filters\"><label class=\"ds-ai-model-search\"><span class=\"ds-ai-model-sr\">搜索模型或上游</span><svg aria-hidden=\"true\" viewBox=\"0 0 24 24\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3\"/></svg><input class=\"ds-ai-model-field\" placeholder=\"搜索模型或上游\"></label><select class=\"ds-ai-model-field\" aria-label=\"按能力筛选模型\"><option>全部能力</option><option>对话</option><option>视觉理解</option><option>生图</option><option>其他</option><option>待核验</option></select><select class=\"ds-ai-model-field\" aria-label=\"按状态筛选模型\"><option>全部状态</option><option>已开放</option><option>未开放</option><option>兼容待确认</option><option>已离开目录</option></select></div><p class=\"ds-ai-model-hint\">用户可自行选择已开放的模型；不支持的用途不可勾选。</p><label class=\"ds-ai-model-confirm\"><input type=\"checkbox\" class=\"ds-ai-model-checkbox\">管理员已确认</label></section>",
|
||
"css": ".ds-ai-model-controls{min-width:0;background:#fff;color:#101828;font-family:'Space Grotesk','Noto Sans SC',ui-sans-serif,system-ui,sans-serif}.ds-ai-model-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-bottom:16px}.ds-ai-model-button{display:inline-flex;min-height:44px;flex-shrink:0;align-items:center;justify-content:center;gap:8px;border:1px solid #cfd8e3;border-radius:8px;background:#fff;padding:0 12px;color:#344054;font:500 14px/20px 'Space Grotesk','Noto Sans SC',ui-sans-serif,system-ui,sans-serif;transition:color .15s,background-color .15s,border-color .15s}.ds-ai-model-button:hover{background:#f8fafc}.ds-ai-model-primary{border-color:#0050cb;background:#0050cb;color:#fff}.ds-ai-model-primary:hover{background:#003da3}.ds-ai-model-button:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px #1677ff}.ds-ai-model-button:disabled{cursor:not-allowed;opacity:.5}.ds-ai-model-defaults{display:grid;min-width:0;gap:12px;margin:0 0 16px;border:0;padding:0}.ds-ai-model-label{min-width:0;color:#101828;font-size:14px;line-height:20px;font-weight:500}.ds-ai-model-label .ds-ai-model-field{margin-top:6px}.ds-ai-model-field{box-sizing:border-box;min-height:44px;width:100%;min-width:0;border:1px solid #cfd8e3;border-radius:8px;background:#fff;padding:8px 12px;color:#101828;font:inherit;font-size:14px;line-height:20px}.ds-ai-model-field::placeholder{color:#66758b}.ds-ai-model-field:focus-visible{outline:none;box-shadow:0 0 0 2px #1677ff}.ds-ai-model-field:disabled{background:#f8fafc;color:#66758b}.ds-ai-model-filters{display:grid;min-width:0;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.ds-ai-model-search{position:relative;grid-column:span 2;min-width:0}.ds-ai-model-search .ds-ai-model-field{padding-left:36px}.ds-ai-model-search svg{position:absolute;left:12px;top:14px;width:16px;height:16px;fill:none;stroke:#66758b;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}.ds-ai-model-hint{margin:16px 0;color:#66758b;font-size:12px;line-height:16px}.ds-ai-model-confirm{display:inline-flex;min-height:44px;align-items:center;gap:8px;font-size:12px;line-height:16px}.ds-ai-model-checkbox{width:16px;height:16px;flex-shrink:0;accent-color:#0050cb}.ds-ai-model-checkbox:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px #1677ff}.ds-ai-model-checkbox:disabled{cursor:not-allowed}.ds-ai-model-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}@media(min-width:640px){.ds-ai-model-defaults{grid-template-columns:repeat(3,minmax(0,1fr))}.ds-ai-model-filters{display:flex;flex-wrap:wrap}.ds-ai-model-search{flex:1 1 192px}.ds-ai-model-filters>select{width:auto;flex:none}}"
|
||
}
|
||
],
|
||
"narrative": {
|
||
"northStar": "深色导航轨数据工作台",
|
||
"overview": "品牌中心是一套固定导航、快速切换与逐层下钻的内部运营界面。深海军蓝导航轨提供稳定坐标，白色操作顶栏承载全局控制，冷灰画布上以矩形白色工作面板组织真实数据、示例状态与待接入框架。\n\n它保留品牌中心自己的五个职责域、22 个小项入口，以及素材库、自动化工作流、人员架构与数据口径四项已接入业务，不复制参考图中的外部品牌、店铺数据或水印。根路径默认进入核心指标，五域入口由固定侧栏承载；各子页直接呈现数据工作面，不再经过部门总览页。品牌中心架构外的普通用户只进入素材资产库，使用无侧栏、无返回品牌中心入口的独立工作壳。",
|
||
"keyCharacteristics": [
|
||
"272px 固定深色导航轨，桌面可折叠为 80px。",
|
||
"72px 白色顶栏与 `#f2f4f7` 冷灰画布组成稳定后台骨架；账户入口固定在侧栏底部。",
|
||
"`#1677ff` 只用于当前项、主要行动和明确焦点。",
|
||
"白色面板以 8–12px 圆角、细边框和克制阴影呈现。",
|
||
"移动端导航是完整的模态抽屉；内容状态始终诚实标注。",
|
||
"自动化工作流在 Department Shell 内使用 232px 二级业务栏与同源真实操作面，移动端改为顶部两列菜单。",
|
||
"数据口径在 Department Shell 内使用 232px 二级栏直接显示“公司组织架构”，右侧复用真实组织树和人员明细，不增加折叠层。",
|
||
"人员架构在 Department Shell 内直接复用真实组织工作面，并将组织树根节点限定为“品牌中心”。",
|
||
"素材资产库按权威组织归属选择外壳：品牌中心成员保留 Department Shell，外部普通用户只显示 64px 中性顶栏、素材工作面与退出入口。"
|
||
],
|
||
"rules": [
|
||
{
|
||
"name": "The Current Location Rule",
|
||
"body": "根路径直接进入核心指标，页面只保留一个最强的 `#1677ff` 导航选中态；不设置独立“部门总览”入口，职责域色不得与当前项竞争。",
|
||
"section": "colors"
|
||
},
|
||
{
|
||
"name": "The Truth Color Rule",
|
||
"body": "绿色只表示真实已接入，示例值和待接入状态不得伪装成成功。",
|
||
"section": "colors"
|
||
},
|
||
{
|
||
"name": "The Embedded Business Truth Rule",
|
||
"body": "二级栏只切换既有真实业务操作面；选中态、URL 与 iframe 内容必须同步，不能用入口卡片或示例数据替代。",
|
||
"section": "colors"
|
||
},
|
||
{
|
||
"name": "The Dense Tool Rule",
|
||
"body": "顶栏和导航保持 12–14px 紧凑标签；页面标题才使用 30–36px，不把每个面板都做成英雄区。",
|
||
"section": "typography"
|
||
},
|
||
{
|
||
"name": "The Two-Level Workflow Rule",
|
||
"body": "自动化工作流的二级栏只包含两个业务菜单，不添加标题、数量、说明头或入口卡；右侧始终是当前菜单对应的真实操作面。",
|
||
"section": "layout"
|
||
},
|
||
{
|
||
"name": "The Direct Data Source Rule",
|
||
"body": "数据口径二级栏直接显示“公司组织架构”，不增加“数据来源”折叠层；右侧必须复用真实组织架构内容和原权限边界。",
|
||
"section": "layout"
|
||
},
|
||
{
|
||
"name": "The Brand Center Scope Rule",
|
||
"body": "人员架构只呈现公司组织架构中的“品牌中心”节点及其下级人员；公司级 `/organization` 保持全量视图，节点缺失时显示同步提示而不是回退全量。",
|
||
"section": "layout"
|
||
},
|
||
{
|
||
"name": "The Top-Level Return Rule",
|
||
"body": "嵌入业务的根路径返回必须跳出 iframe 到顶层浏览上下文，禁止在操作面内再次嵌入品牌中心首页。",
|
||
"section": "layout"
|
||
},
|
||
{
|
||
"name": "The Organization Gate Rule",
|
||
"body": "品牌中心归属由权威人员绑定与精确组织路径决定；范围外普通用户只能进入素材资产库，品牌中心、组织、管理、考核与过稿工作面均须服务端拦截，视觉隐藏与路由门禁必须同时成立。",
|
||
"section": "layout"
|
||
},
|
||
{
|
||
"name": "The Border-First Rule",
|
||
"body": "默认先用 `#e2e8f0` 细边框建立结构；不要用超过 20px 的主表面圆角与大阴影制造漂浮岛。",
|
||
"section": "elevation"
|
||
}
|
||
],
|
||
"dos": [
|
||
"**Do** 让品牌中心成员从根路径直接进入核心指标，并在框架页、指标页、明细页、加载/异常状态和素材库复用同一 Department Shell；范围外普通用户在素材库使用独立工作壳。",
|
||
"**Do** 保持 5 个职责域、22 个小项、18 个框架入口，以及素材库、自动化工作流、人员架构和数据口径四项已接入业务的产品真相。",
|
||
"**Do** 明确区分真实数据、示例值、公式待接入与空数据。",
|
||
"**Do** 在桌面与 390px 移动宽度验证导航、焦点和横向溢出。",
|
||
"**Do** 让自动化工作流的菜单、`?workflow=` 和右侧真实业务操作面始终同步。",
|
||
"**Do** 让嵌入业务的根路径返回以 `target=\"_top\"` 跳出 iframe。",
|
||
"**Do** 让数据口径直接显示“公司组织架构”并沿用主线管理员权限。",
|
||
"**Do** 让人员架构只显示“品牌中心”节点、下级组织与对应人员，并沿用主线管理员权限。",
|
||
"**Do** 让品牌中心归属声明、服务端重定向和素材库外壳保持一致，并在桌面与移动端验证没有返回品牌中心入口。"
|
||
],
|
||
"donts": [
|
||
"**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/*` 直接进入工作台。"
|
||
]
|
||
}
|
||
}
|