feat: 对接主控服务接口

src/views/virtualization/HostGroupMapping.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="host-group-mapping-container">
     <!-- 顶部信息 -->
-    <div class="page-header">
+    <div class="page-header" v-if="!embedded">
       <div class="header-left">
         <el-button @click="goBack" :icon="ArrowLeft">返回</el-button>
         <div class="header-info">
@@ -18,6 +18,10 @@
         </el-button>
       </div>
     </div>
+    <div class="embedded-toolbar" v-if="embedded">
+      <el-button type="primary" @click="handleSync" :loading="syncLoading"><el-icon><RefreshRight /></el-icon>从远程同步</el-button>
+      <el-button @click="loadHostGroups"><el-icon><Refresh /></el-icon>刷新</el-button>
+    </div>
 
     <!-- 布局：左侧本地主机组列表 / 右侧详情&操作 -->
     <div class="content-layout">
@@ -204,7 +208,7 @@
 </template>
 
 <script setup>
-import { ref, reactive, computed, onMounted } from 'vue'
+import { ref, reactive, computed, inject, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { Plus, Refresh, RefreshRight, Search, ArrowLeft } from '@element-plus/icons-vue'
@@ -223,9 +227,11 @@ import dayjs from 'dayjs'
 
 const route = useRoute()
 const router = useRouter()
-
-const serviceId = computed(() => parseInt(route.query.service_id) || 0)
-const serviceName = computed(() => route.query.service_name || '')
+const embedded = inject('embedded', false)
+const injectedServiceId = inject('serviceId', null)
+const injectedServiceName = inject('serviceName', null)
+const serviceId = computed(() => injectedServiceId?.value || parseInt(route.query.service_id) || 0)
+const serviceName = computed(() => injectedServiceName?.value || route.query.service_name || '')
 
 const loading = ref(false)
 const syncLoading = ref(false)
@@ -604,6 +610,13 @@ onMounted(() => {
   gap: 8px;
 }
 
+.embedded-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 16px;
+}
+
 /* 布局 */
 .content-layout {
   display: grid;