shiran/ApiServer-Web-admin_dashboard_pc

Fork 0

Files

T

lin 40a5e486a6

Build and Deploy Vue3 / build (push) Successful in 1m43s

Details

Build and Deploy Vue3 / deploy (push) Successful in 1m7s

Details

feat: 对接用户组网管理

2026-03-24 18:57:52 +08:00

16 KiB

Raw Permalink Blame History

虚拟化平台管理 — 页面关系图谱

一、目录结构

src/
├── views/virtualization/           ← 页面组件（19个）
│   ├── KvmService.vue              # 主控服务管理（入口列表页）
│   ├── KvmServiceDetail.vue        # 主控服务详情（核心容器页）
│   ├── HostTreeManage.vue          # 宿主机树形管理
│   ├── HostManage.vue              # 宿主机列表管理（独立路由）
│   ├── HostDetail.vue              # 宿主机详情（容器页）
│   ├── HostGroupMapping.vue        # 宿主机组映射管理
│   ├── RemoteHostGroupManage.vue   # 远程宿主机组管理
│   ├── ImageManage.vue             # 镜像管理
│   ├── ImageDetail.vue             # 镜像详情
│   ├── NetworkManage.vue           # 网络管理
│   ├── VolumeManage.vue            # 数据卷管理
│   ├── VmManage.vue                # 虚拟机管理
│   ├── VmDetail.vue                # 虚拟机详情（容器页）
│   ├── SecurityGroupManage.vue     # 安全组管理
│   ├── SecurityGroupDetail.vue     # 安全组详情
│   ├── VncNodeManage.vue           # VNC节点管理
│   ├── SnapshotManage.vue          # 快照管理
│   ├── BackupManage.vue            # 备份管理
│   └── UserNetworkingManage.vue    # 用户组网管理
│
└── components/admin/               ← 公共弹窗选择组件（6个）
    ├── VmSelectorPopup.vue         # 虚拟机选择器
    ├── VolumeSelectorPopup.vue     # 数据卷选择器
    ├── NetworkSelectorPopup.vue    # 网络选择器
    ├── ImageSelectorPopup.vue      # 镜像选择器
    ├── SecurityGroupSelectorPopup.vue # 安全组选择器
    └── HostGroupSelectorPopup.vue  # 宿主机组选择器

二、路由结构

所有页面都在 /virtualization 路由下，层级扁平（非嵌套路由），通过 query 参数传递上下文。

/virtualization
├── /kvm-service                    → KvmService.vue              （菜单入口）
├── /kvm-service-detail             → KvmServiceDetail.vue        （hidden）
├── /host-group-mapping             → HostGroupMapping.vue        （菜单可见）
├── /host-manage                    → HostManage.vue              （hidden）
├── /image-manage                   → ImageManage.vue             （hidden）
├── /network-manage                 → NetworkManage.vue           （hidden）
├── /volume-manage                  → VolumeManage.vue            （hidden）
├── /vm-manage                      → VmManage.vue                （hidden）
├── /security-group                 → SecurityGroupManage.vue     （hidden）
├── /vnc-node                       → VncNodeManage.vue           （hidden）
├── /host-detail                    → HostDetail.vue              （hidden）
├── /image-detail                   → ImageDetail.vue             （hidden）
├── /vm-detail                      → VmDetail.vue                （hidden）
└── /security-group-detail          → SecurityGroupDetail.vue     （hidden）

标记 hidden 的路由不在侧边菜单显示，用户通过页面内操作跳转进入。

三、页面嵌套机制：`provide / inject` 上下文注入

嵌套不通过路由嵌套实现，而是通过 父页面直接引入子组件 + Vue3 provide/inject 传递上下文。

3.1 provide 注入方

父页面	provide 的 key	说明
`KvmServiceDetail.vue`	`embedded`, `serviceId`, `serviceName`	主控服务详情作为容器
`HostDetail.vue`	`embedded`, `serviceId`, `serviceName`, `hostId`	宿主机详情作为容器，额外注入 `hostId`

3.2 inject 接收方

以下组件都同时支持 独立路由访问 和 被嵌入到父页面的标签页中：

组件	inject 的 key	嵌入后行为变化
`HostTreeManage.vue`	`embedded`, `serviceId`, `serviceName`	隐藏返回按钮/主控选择器
`HostManage.vue`	`embedded`, `serviceId`, `serviceName`	隐藏返回按钮/主控选择器
`ImageManage.vue`	`embedded`, `serviceId`, `serviceName`, `hostId`	隐藏返回按钮；有 hostId 时隐藏宿主机筛选
`NetworkManage.vue`	`embedded`, `serviceId`, `serviceName`, `hostId`	隐藏返回按钮；有 hostId 时隐藏宿主机筛选
`VolumeManage.vue`	`embedded`, `serviceId`, `serviceName`, `hostId`	隐藏返回按钮；有 hostId 时隐藏宿主机筛选
`VmManage.vue`	`embedded`, `serviceId`, `serviceName`, `hostId`	隐藏返回按钮；有 hostId 时筛选该宿主机下的虚拟机
`SecurityGroupManage.vue`	`embedded`, `serviceId`, `serviceName`	隐藏返回按钮/主控选择器
`VncNodeManage.vue`	`embedded`, `serviceId`, `serviceName`	隐藏返回按钮/主控选择器
`SnapshotManage.vue`	`serviceId`	仅嵌入使用，依赖父级 serviceId
`BackupManage.vue`	`serviceId`	仅嵌入使用，依赖父级 serviceId
`UserNetworkingManage.vue`	`embedded`, `serviceId`, `serviceName`	隐藏返回按钮/主控选择器
`RemoteHostGroupManage.vue`	`embedded`, `serviceId`, `serviceName`	隐藏返回按钮/主控选择器
`HostGroupMapping.vue`	`embedded`, `serviceId`, `serviceName`	隐藏返回按钮/主控选择器

四、完整关系图谱

┌─────────────────────────────────────────────────────────────────────────┐
│                        KvmService.vue（主控服务列表）                      │
│                        路由: /virtualization/kvm-service                  │
│                                                                         │
│  点击「查看详情」 ──router.push──→ KvmServiceDetail                       │
└─────────────────────────────────────────────────────────────────────────┘
                                     │
                                     ▼
┌─────────────────────────────────────────────────────────────────────────┐
│              KvmServiceDetail.vue（主控服务详情 · 容器页）                  │
│              路由: /virtualization/kvm-service-detail                     │
│              provide: embedded, serviceId, serviceName                    │
│                                                                         │
│  ┌─ Tabs ─────────────────────────────────────────────────────────┐     │
│  │ 宿主机管理 │ 镜像管理 │ 网络管理 │ 数据卷管理 │ 虚拟机管理 │       │     │
│  │ 安全组管理 │ VNC节点 │ 快照管理 │ 备份管理 │ 用户组网 │          │     │
│  └─────────────────────────────────────────────────────────────────┘     │
│                                                                         │
│  标签页内嵌组件（defineAsyncComponent 懒加载）：                          │
│  ├── HostTreeManage.vue ─── 点击宿主机 ──router.push──→ HostDetail      │
│  ├── ImageManage.vue ────── 点击镜像 ──router.push──→ ImageDetail       │
│  ├── NetworkManage.vue                                                  │
│  ├── VolumeManage.vue                                                   │
│  ├── VmManage.vue ──────── 点击虚拟机 ──router.push──→ VmDetail         │
│  ├── SecurityGroupManage.vue ── 点击安全组 ──router.push──→ SGDetail    │
│  ├── VncNodeManage.vue                                                  │
│  ├── SnapshotManage.vue                                                 │
│  ├── BackupManage.vue                                                   │
│  └── UserNetworkingManage.vue                                           │
└─────────────────────────────────────────────────────────────────────────┘
           │                           │                    │
           ▼                           ▼                    ▼
┌──────────────────────┐ ┌──────────────────┐ ┌──────────────────────────┐
│  HostDetail.vue      │ │ ImageDetail.vue  │ │ SecurityGroupDetail.vue  │
│  (宿主机详情·容器页) │ │ (镜像详情)       │ │ (安全组详情)             │
│  provide: embedded,  │ │                  │ │                          │
│  serviceId,          │ │  ← 返回主控详情  │ │  ← 返回主控详情          │
│  serviceName, hostId │ └──────────────────┘ └──────────────────────────┘
│                      │
│  ┌─ Tabs ──────────────────────────────────┐
│  │ 基本信息 │ 监控 │ 镜像管理 │ 网络管理 │  │
│  │ 数据卷管理 │ 虚拟机管理 │ 快照 │ 备份 │  │
│  └──────────────────────────────────────────┘
│                      │
│  标签页内嵌组件（直接 import）：
│  ├── ImageManage.vue       ← 同一组件，inject hostId 后隐藏宿主机筛选
│  ├── NetworkManage.vue     ← 同一组件，inject hostId 后隐藏宿主机筛选
│  ├── VolumeManage.vue      ← 同一组件，inject hostId 后隐藏宿主机筛选
│  ├── VmManage.vue          ← 同一组件，inject hostId 后筛选范围缩小
│  ├── SnapshotManage.vue
│  └── BackupManage.vue
│                      │
│  VmManage 内点击「查看详情」──router.push──→ VmDetail
└──────────────────────┘
                       │
                       ▼
┌─────────────────────────────────────────────────────────────────────────┐
│                    VmDetail.vue（虚拟机详情 · 容器页）                     │
│                    路由: /virtualization/vm-detail                        │
│                                                                         │
│  ┌─ Tabs ─────────────────────────────────────────────────────────┐     │
│  │ 实例详情 │ 网络信息 │ 磁盘卷信息 │ 安全组 │ 快照 │ 备份 │ 监控 │     │
│  └─────────────────────────────────────────────────────────────────┘     │
│                                                                         │
│  不嵌入外部页面组件，内联自行管理所有标签页内容                            │
│  使用弹窗选择组件：                                                       │
│  ├── ImageSelectorPopup        （重建虚拟机时选择镜像）                   │
│  ├── VolumeSelectorPopup       （挂载已有数据卷）                         │
│  ├── NetworkSelectorPopup      （添加已有网络 / 重构时选择网络）          │
│  └── SecurityGroupSelectorPopup（绑定安全组）                             │
└─────────────────────────────────────────────────────────────────────────┘

五、组件复用关系汇总

5.1 同一页面组件在多个容器中被嵌入

管理组件	独立路由	嵌入 KvmServiceDetail	嵌入 HostDetail
`HostTreeManage.vue`	✗	✔	✗
`HostManage.vue`	✔	✗	✗
`ImageManage.vue`	✔	✔	✔
`NetworkManage.vue`	✔	✔	✔
`VolumeManage.vue`	✔	✔	✔
`VmManage.vue`	✔	✔	✔
`SecurityGroupManage.vue`	✔	✔	✗
`VncNodeManage.vue`	✔	✔	✗
`SnapshotManage.vue`	✗	✔	✔
`BackupManage.vue`	✗	✔	✔
`UserNetworkingManage.vue`	✗	✔	✗
`RemoteHostGroupManage.vue`	✗	✗（独立路由可能存在）	✗
`HostGroupMapping.vue`	✔	✗	✗

5.2 弹窗选择组件使用关系

选择组件	被哪些页面使用
`VmSelectorPopup`	VolumeManage、VncNodeManage、UserNetworkingManage、SecurityGroupManage、SecurityGroupDetail
`ImageSelectorPopup`	VmManage、VolumeManage、VmDetail
`HostGroupSelectorPopup`	VmManage、HostManage、HostDetail
`VolumeSelectorPopup`	VmDetail
`NetworkSelectorPopup`	VmDetail
`SecurityGroupSelectorPopup`	VmDetail

六、页面跳转路径总览

KvmService（列表）
  └──→ KvmServiceDetail（详情）
         ├──→ HostDetail（宿主机详情）──→ 返回 KvmServiceDetail
         │       └──→ VmDetail（虚拟机详情）──→ 返回 KvmServiceDetail
         ├──→ ImageDetail（镜像详情）──→ 返回 KvmServiceDetail
         ├──→ VmDetail（虚拟机详情）──→ 返回 KvmServiceDetail
         └──→ SecurityGroupDetail（安全组详情）──→ 返回 KvmServiceDetail

七、嵌入机制核心代码模式

父级容器 provide（以 KvmServiceDetail 为例）

provide('embedded', true)
provide('serviceId', serviceId)      // ref<number>
provide('serviceName', serviceName)  // ref<string>

子组件 inject + 自适应

const embedded = inject('embedded', false)
const injectedServiceId = inject('serviceId', null)
const injectedHostId = inject('hostId', null)  // 仅 HostDetail 下有

// 根据 embedded 控制 UI
// - 隐藏顶部返回栏和主控选择器
// - 自动使用注入的 serviceId / hostId 替代手动选择

KvmServiceDetail 使用 defineAsyncComponent 懒加载

const HostTreeManage = defineAsyncComponent(() => import('./HostTreeManage.vue'))
const ImageManage = defineAsyncComponent(() => import('./ImageManage.vue'))
// ... 其余同理

HostDetail 使用直接 import

import ImageManage from '@/views/virtualization/ImageManage.vue'
import NetworkManage from '@/views/virtualization/NetworkManage.vue'
// ... 其余同理

八、设计特点总结

双模式组件：ImageManage、NetworkManage、VolumeManage、VmManage 等组件同时支持独立路由和嵌入模式，通过 inject('embedded') 判断当前上下文，动态调整 UI 和数据来源。
扁平路由 + 组件嵌入：路由层级扁平，页面间嵌套关系通过组件引入（import）实现，而非路由嵌套（children）。
上下文逐层传递：KvmServiceDetail 传递 serviceId，HostDetail 在此基础上追加 hostId，子组件根据可用 key 自动收窄数据范围。
弹窗选择组件解耦：选择器作为独立的 Popup 组件放在 components/admin/ 下，通过 v-model 控制显隐、emit('confirm') 回传选中数据，各页面按需引用。

16 KiB Raw Permalink Blame History Unescape Escape