feat(subsystem): 子系统导航增加可展开子 Tab 与详情页

- AppSidebar: 统一入口组下子系统导航改为可展开列表,展示 6 个子系统子 Tab
- 每个子 Tab 带功能描述前缀(如 多集群发布平台 Wayne)便于用户定位
- 新建 SubsystemDetail.vue 统一详情模板(统计卡片 + 门户卡片 + 打开按钮)
- 新增路由 /subsystem/detail/:name
- subsystem API mock 数据补充 label、domain、category 字段
- SubsystemCard 概览卡片同步显示 label + name 格式
This commit is contained in:
2026-07-17 11:20:17 +08:00
parent a185fac1b2
commit 506752747d
5 changed files with 316 additions and 26 deletions
+33 -8
View File
@@ -5,9 +5,12 @@ import { redirectToSSO } from '@/utils/sso'
export interface Subsystem {
id: number
name: string
label: string
description: string
icon: string
url: string
domain: string
category: string
status: 'integrated' | 'integrating'
sso_enabled: boolean
}
@@ -21,54 +24,72 @@ const mockSubsystems: Subsystem[] = [
{
id: 1,
name: 'Wayne',
description: '多集群容器管理平台',
label: '多集群发布平台',
description: '业务容器发布、命名空间与配额管理,复用 Wayne 原生多租户能力。',
icon: 'W',
url: 'https://wayne.qiniu.com',
domain: 'wayne.xinfra.internal',
category: '容器管理',
status: 'integrated',
sso_enabled: true,
},
{
id: 2,
name: 'CloudDM',
description: '数据库管理与SQL审核',
label: 'SQL 审核平台',
description: '数据库 SQL 上线统一审核,支持 LDAP 用户组到角色的自动映射。',
icon: 'DM',
url: 'https://clouddm.qiniu.com',
domain: 'clouddm.xinfra.internal',
category: '数据库',
status: 'integrated',
sso_enabled: true,
},
{
id: 3,
name: 'CacheCloud',
description: 'Redis 云管理平台',
label: 'Redis 管理平台',
description: 'Redis 实例全生命周期管理,登录与监控运维统一入口。',
icon: 'CC',
url: 'https://cachecloud.qiniu.com',
status: 'integrated',
domain: 'cachecloud.xinfra.internal',
category: '缓存',
status: 'integrating',
sso_enabled: true,
},
{
id: 4,
name: 'Apollo',
description: '配置中心',
label: '配置中心',
description: '统一配置管理,按机房 Cluster 隔离,支持灰度发布、版本回滚与变更审计。',
icon: 'AP',
url: 'https://apollo.xinfra.internal',
status: 'integrated',
domain: 'apollo.xinfra.internal',
category: '配置中心',
status: 'integrating',
sso_enabled: true,
},
{
id: 5,
name: 'qpass',
description: '密码管理平台',
label: '七牛统一运维平台',
description: '夜莺、Zabbix、VictoriaMetrics 告警统一收敛与值班通知,按 P0/P1 分级推送。',
icon: 'QP',
url: 'https://qpass.xinfra.internal',
domain: 'qpass.xinfra.internal',
category: '告警值班',
status: 'integrated',
sso_enabled: true,
},
{
id: 6,
name: 'Grafana',
description: '监控可视化平台',
label: '指标可视化平台',
description: '对接 VictoriaMetrics 数据源,K8s / 容器 / 业务指标统一仪表盘展示。',
icon: 'GF',
url: 'https://grafana.xinfra.internal',
domain: 'grafana.xinfra.internal',
category: '可观测性',
status: 'integrated',
sso_enabled: true,
},
@@ -83,6 +104,10 @@ export const subsystemApi = {
})
},
getSubsystemByName(name: string): Subsystem | undefined {
return mockSubsystems.find((s) => s.name.toLowerCase() === name.toLowerCase())
},
async getSSOUrl(id: number): Promise<ApiResponse<SSOResponse>> {
const subsystem = mockSubsystems.find((s) => s.id === id)
if (!subsystem) {