feat(subsystem): 添加 Superset 日志数据可视化子系统

- 在 mockSubsystems 中添加 Superset 子系统配置(id: 7, 可观测性分类)
- 在侧边栏子系统导航列表中添加 Superset 入口
- 添加青色系 CSS 变量(--tag-cyan-*、--logo-ss-bg)用于 Superset 主题
- 更新 SubsystemCard 和 SubsystemDetail 的颜色映射
- 添加 Superset 详情页描述文案

状态设置为 integrating,支持 SSO 单点登录
This commit is contained in:
2026-07-17 13:55:14 +08:00
parent e1d755b2df
commit 75b71cec29
5 changed files with 31 additions and 0 deletions
+12
View File
@@ -93,6 +93,18 @@ const mockSubsystems: Subsystem[] = [
status: 'integrated', status: 'integrated',
sso_enabled: true, sso_enabled: true,
}, },
{
id: 7,
name: 'Superset',
label: '日志数据可视化',
description: '日志数据探索与可视化分析平台,支持多数据源接入和丰富的图表展示。',
icon: 'SS',
url: 'https://superset.xinfra.internal',
domain: 'superset.xinfra.internal',
category: '可观测性',
status: 'integrating',
sso_enabled: true,
},
] ]
export const subsystemApi = { export const subsystemApi = {
@@ -92,6 +92,7 @@ const subsystems = [
{ name: 'Apollo', label: '配置中心', icon: 'AP' }, { name: 'Apollo', label: '配置中心', icon: 'AP' },
{ name: 'qpass', label: '七牛统一运维平台', icon: 'QP' }, { name: 'qpass', label: '七牛统一运维平台', icon: 'QP' },
{ name: 'Grafana', label: '指标可视化平台', icon: 'GF' }, { name: 'Grafana', label: '指标可视化平台', icon: 'GF' },
{ name: 'Superset', label: '日志数据可视化', icon: 'SS' },
] ]
const isPortalActive = computed(() => { const isPortalActive = computed(() => {
@@ -106,6 +107,7 @@ function dotColor(icon: string): string {
AP: 'var(--tag-blue-text)', AP: 'var(--tag-blue-text)',
QP: 'var(--tag-amber-text)', QP: 'var(--tag-amber-text)',
GF: 'var(--warn)', GF: 'var(--warn)',
SS: 'var(--tag-cyan-text)',
} }
return colors[icon] || 'var(--text-dim)' return colors[icon] || 'var(--text-dim)'
} }
@@ -33,6 +33,7 @@ const bgColor = computed(() => {
AP: 'var(--logo-ap-bg)', AP: 'var(--logo-ap-bg)',
QP: 'var(--logo-qp-bg)', QP: 'var(--logo-qp-bg)',
GF: 'var(--logo-gf-bg)', GF: 'var(--logo-gf-bg)',
SS: 'var(--logo-ss-bg)',
} }
return colors[props.system.icon] || 'var(--bg-panel-2)' return colors[props.system.icon] || 'var(--bg-panel-2)'
}) })
@@ -45,6 +46,7 @@ const iconColor = computed(() => {
AP: 'var(--tag-blue-text)', AP: 'var(--tag-blue-text)',
QP: 'var(--tag-amber-text)', QP: 'var(--tag-amber-text)',
GF: 'var(--warn)', GF: 'var(--warn)',
SS: 'var(--tag-cyan-text)',
} }
return colors[props.system.icon] || 'var(--text-mid)' return colors[props.system.icon] || 'var(--text-mid)'
}) })
+12
View File
@@ -61,6 +61,11 @@
--tag-green-bg: #E8FFEA; --tag-green-bg: #E8FFEA;
--tag-green-border: #9FD9A8; --tag-green-border: #9FD9A8;
/* 标签/徽章颜色 - 青色系 */
--tag-cyan-text: #0FC6C2;
--tag-cyan-bg: #E8FFFB;
--tag-cyan-border: #87E8DE;
/* 节点单元格颜色 */ /* 节点单元格颜色 */
--node-empty-bg: #F0F2F5; --node-empty-bg: #F0F2F5;
--node-a-bg: #E8FFEA; --node-a-bg: #E8FFEA;
@@ -90,6 +95,7 @@
--logo-ap-bg: #E8F3FF; --logo-ap-bg: #E8F3FF;
--logo-qp-bg: #FFF7E6; --logo-qp-bg: #FFF7E6;
--logo-gf-bg: #F5F7FA; --logo-gf-bg: #F5F7FA;
--logo-ss-bg: #E8FFFB;
/* 发光/阴影效果 */ /* 发光/阴影效果 */
--accent-glow: rgba(0, 180, 42, 0.3); --accent-glow: rgba(0, 180, 42, 0.3);
@@ -158,6 +164,11 @@
--tag-green-bg: #0F261D; --tag-green-bg: #0F261D;
--tag-green-border: var(--accent-dim); --tag-green-border: var(--accent-dim);
/* 标签/徽章颜色 - 青色系 */
--tag-cyan-text: #5CFFFF;
--tag-cyan-bg: #0A2626;
--tag-cyan-border: #1A5C5C;
/* 节点单元格颜色 */ /* 节点单元格颜色 */
--node-empty-bg: #1E2532; --node-empty-bg: #1E2532;
--node-a-bg: #13261F; --node-a-bg: #13261F;
@@ -187,6 +198,7 @@
--logo-ap-bg: #1C2A3A; --logo-ap-bg: #1C2A3A;
--logo-qp-bg: #241B0A; --logo-qp-bg: #241B0A;
--logo-gf-bg: #1B202B; --logo-gf-bg: #1B202B;
--logo-ss-bg: #0A2626;
/* 发光/阴影效果 */ /* 发光/阴影效果 */
--accent-glow: rgba(63, 224, 165, 0.3); --accent-glow: rgba(63, 224, 165, 0.3);
@@ -88,6 +88,7 @@ const bgColor = computed(() => {
AP: 'var(--logo-ap-bg)', AP: 'var(--logo-ap-bg)',
QP: 'var(--logo-qp-bg)', QP: 'var(--logo-qp-bg)',
GF: 'var(--logo-gf-bg)', GF: 'var(--logo-gf-bg)',
SS: 'var(--logo-ss-bg)',
} }
return colors[system.value.icon] || 'var(--bg-panel-2)' return colors[system.value.icon] || 'var(--bg-panel-2)'
}) })
@@ -101,6 +102,7 @@ const iconColor = computed(() => {
AP: 'var(--tag-blue-text)', AP: 'var(--tag-blue-text)',
QP: 'var(--tag-amber-text)', QP: 'var(--tag-amber-text)',
GF: 'var(--warn)', GF: 'var(--warn)',
SS: 'var(--tag-cyan-text)',
} }
return colors[system.value.icon] || 'var(--text-mid)' return colors[system.value.icon] || 'var(--text-mid)'
}) })
@@ -114,6 +116,7 @@ const detailDesc = computed(() => {
Apollo: '统一管理多机房 Config Service Cluster 的配置发布、灰度、回滚与变更审计,所有机房配置项均可在此单一入口检索与编辑。', Apollo: '统一管理多机房 Config Service Cluster 的配置发布、灰度、回滚与变更审计,所有机房配置项均可在此单一入口检索与编辑。',
qpass: '七牛云内部系统。', qpass: '七牛云内部系统。',
Grafana: '对接 VictoriaMetrics 数据源,K8s / 容器 / 业务指标统一仪表盘展示。预置核心看板,支持自定义。', Grafana: '对接 VictoriaMetrics 数据源,K8s / 容器 / 业务指标统一仪表盘展示。预置核心看板,支持自定义。',
Superset: '日志数据探索与可视化分析平台,支持多数据源接入和丰富的图表展示。用于日志数据分析和可视化报表。',
} }
return descs[system.value.name] || system.value.description return descs[system.value.name] || system.value.description
}) })