From 75b71cec29e2d95fee34df778a0a7615773d944d Mon Sep 17 00:00:00 2001
From: hezhaohui <hezhaohui0807@163.com>
Date: Fri, 17 Jul 2026 13:55:14 +0800
Subject: [PATCH] =?UTF-8?q?feat(subsystem):=20=E6=B7=BB=E5=8A=A0=20Superse?=
 =?UTF-8?q?t=20=E6=97=A5=E5=BF=97=E6=95=B0=E6=8D=AE=E5=8F=AF=E8=A7=86?=
 =?UTF-8?q?=E5=8C=96=E5=AD=90=E7=B3=BB=E7=BB=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

状态设置为 integrating，支持 SSO 单点登录
---
 frontend/src/api/subsystem.ts                    | 12 ++++++++++++
 frontend/src/components/Layout/AppSidebar.vue    |  2 ++
 frontend/src/components/SubsystemCard.vue        |  2 ++
 frontend/src/styles/variables.css                | 12 ++++++++++++
 frontend/src/views/subsystem/SubsystemDetail.vue |  3 +++
 5 files changed, 31 insertions(+)

diff --git a/frontend/src/api/subsystem.ts b/frontend/src/api/subsystem.ts
index 752b08c..7316944 100644
--- a/frontend/src/api/subsystem.ts
+++ b/frontend/src/api/subsystem.ts
@@ -93,6 +93,18 @@ const mockSubsystems: Subsystem[] = [
     status: 'integrated',
     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 = {
diff --git a/frontend/src/components/Layout/AppSidebar.vue b/frontend/src/components/Layout/AppSidebar.vue
index 5680ba2..c04e827 100644
--- a/frontend/src/components/Layout/AppSidebar.vue
+++ b/frontend/src/components/Layout/AppSidebar.vue
@@ -92,6 +92,7 @@ const subsystems = [
   { name: 'Apollo', label: '配置中心', icon: 'AP' },
   { name: 'qpass', label: '七牛统一运维平台', icon: 'QP' },
   { name: 'Grafana', label: '指标可视化平台', icon: 'GF' },
+  { name: 'Superset', label: '日志数据可视化', icon: 'SS' },
 ]
 
 const isPortalActive = computed(() => {
@@ -106,6 +107,7 @@ function dotColor(icon: string): string {
     AP: 'var(--tag-blue-text)',
     QP: 'var(--tag-amber-text)',
     GF: 'var(--warn)',
+    SS: 'var(--tag-cyan-text)',
   }
   return colors[icon] || 'var(--text-dim)'
 }
diff --git a/frontend/src/components/SubsystemCard.vue b/frontend/src/components/SubsystemCard.vue
index 19c7c87..8b4d1d9 100644
--- a/frontend/src/components/SubsystemCard.vue
+++ b/frontend/src/components/SubsystemCard.vue
@@ -33,6 +33,7 @@ const bgColor = computed(() => {
     AP: 'var(--logo-ap-bg)',
     QP: 'var(--logo-qp-bg)',
     GF: 'var(--logo-gf-bg)',
+    SS: 'var(--logo-ss-bg)',
   }
   return colors[props.system.icon] || 'var(--bg-panel-2)'
 })
@@ -45,6 +46,7 @@ const iconColor = computed(() => {
     AP: 'var(--tag-blue-text)',
     QP: 'var(--tag-amber-text)',
     GF: 'var(--warn)',
+    SS: 'var(--tag-cyan-text)',
   }
   return colors[props.system.icon] || 'var(--text-mid)'
 })
diff --git a/frontend/src/styles/variables.css b/frontend/src/styles/variables.css
index 4eb814e..78d5f31 100644
--- a/frontend/src/styles/variables.css
+++ b/frontend/src/styles/variables.css
@@ -61,6 +61,11 @@
   --tag-green-bg: #E8FFEA;
   --tag-green-border: #9FD9A8;
 
+  /* 标签/徽章颜色 - 青色系 */
+  --tag-cyan-text: #0FC6C2;
+  --tag-cyan-bg: #E8FFFB;
+  --tag-cyan-border: #87E8DE;
+
   /* 节点单元格颜色 */
   --node-empty-bg: #F0F2F5;
   --node-a-bg: #E8FFEA;
@@ -90,6 +95,7 @@
   --logo-ap-bg: #E8F3FF;
   --logo-qp-bg: #FFF7E6;
   --logo-gf-bg: #F5F7FA;
+  --logo-ss-bg: #E8FFFB;
 
   /* 发光/阴影效果 */
   --accent-glow: rgba(0, 180, 42, 0.3);
@@ -158,6 +164,11 @@
   --tag-green-bg: #0F261D;
   --tag-green-border: var(--accent-dim);
 
+  /* 标签/徽章颜色 - 青色系 */
+  --tag-cyan-text: #5CFFFF;
+  --tag-cyan-bg: #0A2626;
+  --tag-cyan-border: #1A5C5C;
+
   /* 节点单元格颜色 */
   --node-empty-bg: #1E2532;
   --node-a-bg: #13261F;
@@ -187,6 +198,7 @@
   --logo-ap-bg: #1C2A3A;
   --logo-qp-bg: #241B0A;
   --logo-gf-bg: #1B202B;
+  --logo-ss-bg: #0A2626;
 
   /* 发光/阴影效果 */
   --accent-glow: rgba(63, 224, 165, 0.3);
diff --git a/frontend/src/views/subsystem/SubsystemDetail.vue b/frontend/src/views/subsystem/SubsystemDetail.vue
index 38315da..ab651c6 100644
--- a/frontend/src/views/subsystem/SubsystemDetail.vue
+++ b/frontend/src/views/subsystem/SubsystemDetail.vue
@@ -88,6 +88,7 @@ const bgColor = computed(() => {
     AP: 'var(--logo-ap-bg)',
     QP: 'var(--logo-qp-bg)',
     GF: 'var(--logo-gf-bg)',
+    SS: 'var(--logo-ss-bg)',
   }
   return colors[system.value.icon] || 'var(--bg-panel-2)'
 })
@@ -101,6 +102,7 @@ const iconColor = computed(() => {
     AP: 'var(--tag-blue-text)',
     QP: 'var(--tag-amber-text)',
     GF: 'var(--warn)',
+    SS: 'var(--tag-cyan-text)',
   }
   return colors[system.value.icon] || 'var(--text-mid)'
 })
@@ -114,6 +116,7 @@ const detailDesc = computed(() => {
     Apollo: '统一管理多机房 Config Service Cluster 的配置发布、灰度、回滚与变更审计，所有机房配置项均可在此单一入口检索与编辑。',
     qpass: '七牛云内部系统。',
     Grafana: '对接 VictoriaMetrics 数据源，K8s / 容器 / 业务指标统一仪表盘展示。预置核心看板，支持自定义。',
+    Superset: '日志数据探索与可视化分析平台，支持多数据源接入和丰富的图表展示。用于日志数据分析和可视化报表。',
   }
   return descs[system.value.name] || system.value.description
 })