feat: 对接用户组网管理

src/components/admin/SecurityGroupSelectorPopup.vue

@@ -36,8 +36,13 @@
       </div>
     </div>
     <template #footer>
-      <el-button @click="visible = false">取消</el-button>
-      <el-button type="primary" :disabled="!selectedItem" @click="handleConfirm">确认选择</el-button>
+      <div style="display: flex; justify-content: space-between; width: 100%">
+        <el-button type="success" @click="handleCreate">创建安全组</el-button>
+        <div style="display: flex; gap: 8px">
+          <el-button @click="visible = false">取消</el-button>
+          <el-button type="primary" :disabled="!selectedItem" @click="handleConfirm">确认选择</el-button>
+        </div>
+      </div>
     </template>
   </el-dialog>
 </template>
@@ -52,7 +57,7 @@ const props = defineProps({
   serviceId: { type: Number, default: 0 }
 })
 
-const emit = defineEmits(['update:modelValue', 'confirm'])
+const emit = defineEmits(['update:modelValue', 'confirm', 'create'])
 
 const visible = ref(false)
 const loading = ref(false)
@@ -92,6 +97,10 @@ const handleConfirm = () => {
   if (selectedItem.value) { emit('confirm', selectedItem.value); visible.value = false }
 }
 const handleClose = () => { selectedItem.value = null }
+const handleCreate = () => {
+  visible.value = false
+  emit('create')
+}
 </script>
 
 <style scoped>
@@ -99,4 +108,5 @@ const handleClose = () => { selectedItem.value = null }
 .filter-bar { display: flex; gap: 8px; margin-bottom: 12px; align-items: center; }
 .pagination-wrapper { display: flex; justify-content: flex-end; margin-top: 12px; }
 :deep(.selected-row) { background-color: #ecf5ff !important; }
+:deep(.el-table__body tr) { cursor: pointer; }
 </style>