diff --git a/frontend/components.d.ts b/frontend/components.d.ts index 6d63c3e..4380d44 100644 --- a/frontend/components.d.ts +++ b/frontend/components.d.ts @@ -11,6 +11,7 @@ declare module 'vue' { AppMain: typeof import('./src/components/Layout/AppMain.vue')['default'] AppSidebar: typeof import('./src/components/Layout/AppSidebar.vue')['default'] AuditLogTable: typeof import('./src/components/AuditLogTable.vue')['default'] + BusinessLineSwitcher: typeof import('./src/components/BusinessLineSwitcher.vue')['default'] ElButton: typeof import('element-plus/es')['ElButton'] ElIcon: typeof import('element-plus/es')['ElIcon'] ElInput: typeof import('element-plus/es')['ElInput'] diff --git a/frontend/src/api/subsystem.ts b/frontend/src/api/subsystem.ts index a6d5866..752b08c 100644 --- a/frontend/src/api/subsystem.ts +++ b/frontend/src/api/subsystem.ts @@ -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: '七牛云内部系统。', 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> { const subsystem = mockSubsystems.find((s) => s.id === id) if (!subsystem) { diff --git a/frontend/src/components/BusinessLineSwitcher.vue b/frontend/src/components/BusinessLineSwitcher.vue new file mode 100644 index 0000000..c13e03e --- /dev/null +++ b/frontend/src/components/BusinessLineSwitcher.vue @@ -0,0 +1,230 @@ + + + + + diff --git a/frontend/src/components/Layout/AppHeader.vue b/frontend/src/components/Layout/AppHeader.vue index 3833271..41ca71d 100644 --- a/frontend/src/components/Layout/AppHeader.vue +++ b/frontend/src/components/Layout/AppHeader.vue @@ -5,6 +5,7 @@ xinfra 统一基础设施平台 ● 生产环境 +
@@ -23,7 +24,7 @@
{{ userInitial }}
{{ user?.display_name || '未登录' }}
-
LDAP · {{ user?.business_line || '' }}业务线
+
LDAP · {{ user?.business_line || '' }}
退出
@@ -36,6 +37,7 @@ import { useAuthStore } from '@/stores/auth' import { useTheme } from '@/composables/useTheme' import { useAuth } from '@/composables/useAuth' import { Moon, Sunny } from '@element-plus/icons-vue' +import BusinessLineSwitcher from '@/components/BusinessLineSwitcher.vue' const authStore = useAuthStore() const { logout } = useAuth() diff --git a/frontend/src/components/Layout/AppSidebar.vue b/frontend/src/components/Layout/AppSidebar.vue index d4111a5..5680ba2 100644 --- a/frontend/src/components/Layout/AppSidebar.vue +++ b/frontend/src/components/Layout/AppSidebar.vue @@ -7,46 +7,59 @@
-
机房 & 网络
- - ⬡资源状态看板 +
业务交付
+ + ▤基础服务 - - ◆集群 / 节点7 + + ▧任务日志2
-
资源管理
+
资源纳管
▥资源管理CMDB - - ◈服务管理Consul + + ◆集群与容器3 -
-
-
服务交付
- - ▤基础服务目录 - - - ▧任务中心2 - - - ⚙配置中心管理Apollo + + ▦业务配额
可观测性
- ◎监控 / 日志 / 告警 + ◎监控 + + + ⚡告警
统一入口
- - ↗子系统导航 - +
+ + ↗子系统导航 + + + {{ portalExpanded ? '▾' : '▸' }} + +
+
+ + {{ sys.label }} {{ sys.name }} + + + ▦全部总览 + +
▦子系统赋权 @@ -61,12 +74,41 @@
- xinfra v3 一期 · 七机房容器化
RKE2 · Calico BGP · Ceph · LAS
AWS TGW + WireGuard · LDAP 认证
diff --git a/frontend/src/components/SubsystemCard.vue b/frontend/src/components/SubsystemCard.vue index 31205c5..19c7c87 100644 --- a/frontend/src/components/SubsystemCard.vue +++ b/frontend/src/components/SubsystemCard.vue @@ -5,11 +5,11 @@ {{ system.icon }}
-

{{ system.name }}

-
{{ system.description }}
+

{{ system.label }} {{ system.name }}

+
{{ system.domain }}
-

{{ description }}

+

{{ system.description }}

{{ system.status === 'integrated' ? 'LDAP 原生配置接入 · 零代码' : 'LDAP 接入改造中' }} @@ -49,18 +49,6 @@ const iconColor = computed(() => { return colors[props.system.icon] || 'var(--text-mid)' }) -const description = computed(() => { - const descs: Record = { - Wayne: '业务容器发布、命名空间与配额管理，复用 Wayne 原生多租户能力。', - CloudDM: '数据库 SQL 上线统一审核，支持 LDAP 用户组到角色的自动映射。', - CacheCloud: 'Redis 实例全生命周期管理，登录与监控运维统一入口。', - Apollo: '统一配置管理，按机房 Cluster 隔离，支持灰度发布、版本回滚与变更审计。', - qpass: '夜莺、Zabbix、VictoriaMetrics 告警统一收敛与值班通知，按 P0/P1 分级推送。', - Grafana: '对接 VictoriaMetrics 数据源，K8s / 容器 / 业务指标统一仪表盘展示。', - } - return descs[props.system.name] || '' -}) - const handleClick = async () => { if (props.system.sso_enabled) { const { data } = await subsystemApi.getSSOUrl(props.system.id) diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts index e7e74ed..da4000f 100644 --- a/frontend/src/router/index.ts +++ b/frontend/src/router/index.ts @@ -34,6 +34,12 @@ const router = createRouter({ component: () => import('@/views/subsystem/Navigation.vue'), meta: { title: '子系统导航' }, }, + { + path: 'subsystem/detail/:name', + name: 'SubsystemDetail', + component: () => import('@/views/subsystem/SubsystemDetail.vue'), + meta: { title: '子系统详情' }, + }, { path: 'subsystem/authz', name: 'SubsystemAuthz', @@ -68,7 +74,13 @@ const router = createRouter({ path: 'cluster', name: 'Cluster', component: () => import('@/views/cluster/ClusterList.vue'), - meta: { title: '集群 / 节点' }, + meta: { title: '集群与容器' }, + }, + { + path: 'tenants', + name: 'Tenants', + component: () => import('@/views/resource/Tenants.vue'), + meta: { title: '业务配额' }, }, { path: 'service/catalog', @@ -98,7 +110,13 @@ const router = createRouter({ path: 'monitor', name: 'Monitor', component: () => import('@/views/monitor/Monitor.vue'), - meta: { title: '监控 / 日志 / 告警' }, + meta: { title: '监控' }, + }, + { + path: 'alert', + name: 'Alert', + component: () => import('@/views/monitor/Alert.vue'), + meta: { title: '告警' }, }, ], }, diff --git a/frontend/src/stores/businessLine.ts b/frontend/src/stores/businessLine.ts new file mode 100644 index 0000000..e7b69ab --- /dev/null +++ b/frontend/src/stores/businessLine.ts @@ -0,0 +1,107 @@ +import { defineStore } from 'pinia' +import { ref, computed } from 'vue' + +export interface BusinessLine { + id: string + name: string + ou: string + role: string + iconText: string + iconBg: string + iconColor: string + authorized: boolean +} + +const STORAGE_KEY = 'xinfra-current-bl' + +// TODO: 替换为真实 API 调用 +const MOCK_BUSINESS_LINES: BusinessLine[] = [ + { + id: 'las', + name: 'LAS 业务线', + ou: 'ou=las', + role: 'SRE', + iconText: 'LA', + iconBg: '#1A1430', + iconColor: '#C9A6FF', + authorized: true, + }, + { + id: 'kodo', + name: 'Kodo 业务线', + ou: 'ou=kodo', + role: '研发', + iconText: 'KO', + iconBg: '#0E1C2C', + iconColor: '#8EC8FF', + authorized: true, + }, + { + id: 'lingxi', + name: '灵矽 业务线', + ou: 'ou=lingxi', + role: '未授权', + iconText: 'LX', + iconBg: '#241B0A', + iconColor: '#FFC97A', + authorized: false, + }, + { + id: 'ltoken', + name: 'LTOKEN 业务线', + ou: 'ou=ltoken', + role: '研发', + iconText: 'LT', + iconBg: '#1A2A1A', + iconColor: '#A6FFB0', + authorized: true, + }, + { + id: 'maas', + name: 'MAAS 业务线', + ou: 'ou=maas', + role: '未授权', + iconText: 'MA', + iconBg: '#2A1A2A', + iconColor: '#FFB0E0', + authorized: false, + }, +] + +function loadSavedBL(): BusinessLine | null { + try { + const saved = localStorage.getItem(STORAGE_KEY) + if (saved) return JSON.parse(saved) + } catch { + // ignore + } + return null +} + +export const useBusinessLineStore = defineStore('businessLine', () => { + const businessLines = ref(MOCK_BUSINESS_LINES) + const currentBL = ref(loadSavedBL()) + + // 默认选中第一个已授权的业务线 + if (!currentBL.value) { + currentBL.value = businessLines.value.find((bl) => bl.authorized) || null + } + + const authorizedBLs = computed(() => + businessLines.value.filter((bl) => bl.authorized), + ) + + function switchBL(id: string) { + const bl = businessLines.value.find((b) => b.id === id) + if (!bl || !bl.authorized) return + currentBL.value = bl + localStorage.setItem(STORAGE_KEY, JSON.stringify(bl)) + } + + return { + businessLines, + currentBL, + authorizedBLs, + switchBL, + } +}) diff --git a/frontend/src/views/cluster/ClusterList.vue b/frontend/src/views/cluster/ClusterList.vue index 0ddd7fe..80b0536 100644 --- a/frontend/src/views/cluster/ClusterList.vue +++ b/frontend/src/views/cluster/ClusterList.vue @@ -2,10 +2,10 @@
-

集群 / 节点

-

按机房切分的 RKE2 集群，Calico BGP 扁平网络

+

集群与容器

+

统一建设容器池 · RKE2 上建 Wayne 后新服务的标准发布流程 · Calico BGP 扁平网络

- + 加入新节点 + 同步
diff --git a/frontend/src/views/monitor/Alert.vue b/frontend/src/views/monitor/Alert.vue new file mode 100644 index 0000000..49f8b55 --- /dev/null +++ b/frontend/src/views/monitor/Alert.vue @@ -0,0 +1,85 @@ + + + + + diff --git a/frontend/src/views/monitor/Monitor.vue b/frontend/src/views/monitor/Monitor.vue index 5fe24ab..38480ea 100644 --- a/frontend/src/views/monitor/Monitor.vue +++ b/frontend/src/views/monitor/Monitor.vue @@ -2,8 +2,8 @@
-

监控 / 日志 / 告警

-

VictoriaMetrics 指标 · Zabbix 硬件状态 · ELK 日志中心 · 夜莺（Nightingale）统一告警引擎对接 qpass

+

监控

+

VictoriaMetrics 指标 · Zabbix 硬件状态

@@ -67,32 +67,12 @@
-
-
-

日志 + 统一告警

- Filebeat → Kafka → ES → Kibana · VM + Zabbix → qpass -
-
-
- {{ log.time }}{{ log.message }} -
-
-
diff --git a/frontend/src/views/resource/Management.vue b/frontend/src/views/resource/Management.vue index 9d9ad77..0d81789 100644 --- a/frontend/src/views/resource/Management.vue +++ b/frontend/src/views/resource/Management.vue @@ -5,7 +5,7 @@

资源管理

统一纳管物理机与虚机资源 · 基础数据来自 SINA CMDB

- + 创建虚机 + 同步
diff --git a/frontend/src/views/resource/Tenants.vue b/frontend/src/views/resource/Tenants.vue new file mode 100644 index 0000000..f14cfb3 --- /dev/null +++ b/frontend/src/views/resource/Tenants.vue @@ -0,0 +1,122 @@ + + + + + diff --git a/frontend/src/views/service/Catalog.vue b/frontend/src/views/service/Catalog.vue index 1be61fb..959574f 100644 --- a/frontend/src/views/service/Catalog.vue +++ b/frontend/src/views/service/Catalog.vue @@ -3,59 +3,304 @@

基础服务目录

-

点击卡片，通过封装好的 ansible-playbook 一键部署标准化基础服务

+

点击卡片，通过封装好的 ansible-playbook 一键标准化交付，完成后自动注册进对应子系统

-
+
{{ service.icon }}
-

{{ service.name }}

+

{{ service.name }}

{{ service.description }}
{{ service.playbook }} - {{ service.version }} + {{ service.version }}
+ + + +
+
+
+

发布服务 · 跳 Wayne

+ +
+
+
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+
+ + +
+
+ 凭 SSO 身份免登进入 Wayne，在 ns-las-prod 下部署服务；权限随业务线 / 角色自动具备，仅可操作被授权 namespace。 +
+
+
+ + +
+
+
+ + + + +
+
+
+

数据库标准化交付 · MySQL

+ +
+
+
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+
+ + +
+
# ansible-runner 调用预览 +playbook: roles/mysql-deploy +tenant: {{ mysqlForm.bl }} +topology: {{ mysqlForm.topology === '1m2r' ? '1-master-2-replica' : '1-master-1-replica' }} +node_selector: business-line={{ mysqlForm.bl }} +storage_class: ceph-rbd-ssd +register_to: clouddm # 自动注册数据源，跳 CloudDM 上线
+
+
+ + +
+
+
+
diff --git a/frontend/src/views/subsystem/SubsystemDetail.vue b/frontend/src/views/subsystem/SubsystemDetail.vue new file mode 100644 index 0000000..38315da --- /dev/null +++ b/frontend/src/views/subsystem/SubsystemDetail.vue @@ -0,0 +1,172 @@ + + + + +