fix: 重构虚拟机内网外网参数设置选择网络

src/components/admin/NetworkSelectorPopup.vue

@@ -5,10 +5,20 @@
         <el-input v-model="keyword" placeholder="搜索网络" clearable style="width: 200px" @keyup.enter="handleSearch" @clear="handleSearch">
           <template #prefix><el-icon><Search /></el-icon></template>
         </el-input>
-        <el-select v-model="typeFilter" placeholder="网络类型" clearable style="width: 130px" @change="handleSearch">
+        <el-select v-if="!filterType" v-model="typeFilter" placeholder="网络类型" clearable style="width: 130px" @change="handleSearch">
           <el-option label="网桥(Bridge)" value="bridge" />
           <el-option label="内网(NAT)" value="nat" />
         </el-select>
+        <el-tag v-else type="success" size="small">仅{{ filterType === 'bridge' ? '网桥' : filterType === 'nat' ? '内网' : filterType }}</el-tag>
+        <el-select v-if="!filterUsed" v-model="usedFilter" placeholder="占用状态" clearable style="width: 130px" @change="handleSearch">
+          <el-option label="未占用" value="false" />
+          <el-option label="已占用" value="true" />
+        </el-select>
+        <el-tag v-else :type="filterUsed === 'false' ? 'success' : 'info'" size="small">{{ filterUsed === 'false' ? '仅未占用' : '仅已占用' }}</el-tag>
+        <el-select v-model="ipVersionFilter" placeholder="IP版本" clearable style="width: 110px" @change="handleSearch">
+          <el-option label="IPv4" value="ipv4" />
+          <el-option label="IPv6" value="ipv6" />
+        </el-select>
         <el-button :icon="Refresh" @click="loadList" circle />
       </div>
       <el-table v-loading="loading" :data="list" highlight-current-row @current-change="handleCurrentChange"
@@ -26,6 +36,11 @@
         <el-table-column prop="gateway" label="网关" width="130" />
         <el-table-column prop="nameservers" label="DNS" min-width="140" show-overflow-tooltip />
         <el-table-column prop="bridge_name" label="网桥名称" width="100" />
+        <el-table-column label="状态" width="80" align="center">
+          <template #default="{ row }">
+            <el-tag :type="row.used ? 'danger' : 'success'" size="small">{{ row.used ? '已占用' : '空闲' }}</el-tag>
+          </template>
+        </el-table-column>
       </el-table>
       <div class="pagination-wrapper" v-if="total > 0">
         <el-pagination v-model:current-page="page" v-model:page-size="pageSize"
@@ -54,7 +69,9 @@ import { getNetworkList } from '@/api/admin/kvmService'
 const props = defineProps({
   modelValue: { type: Boolean, default: false },
   serviceId: { type: Number, default: 0 },
-  hostId: { type: Number, default: 0 }
+  hostId: { type: Number, default: 0 },
+  filterType: { type: String, default: '' },
+  filterUsed: { type: String, default: '' }
 })
 
 const emit = defineEmits(['update:modelValue', 'confirm', 'create'])
@@ -67,6 +84,8 @@ const page = ref(1)
 const pageSize = ref(10)
 const keyword = ref('')
 const typeFilter = ref('')
+const usedFilter = ref('')
+const ipVersionFilter = ref('')
 const selectedItem = ref(null)
 const type = ref('bridge')
 
@@ -75,7 +94,9 @@ watch(() => props.modelValue, (val) => {
   if (val) {
     page.value = 1
     keyword.value = ''
-    typeFilter.value = ''
+    typeFilter.value = props.filterType || ''
+    usedFilter.value = props.filterUsed || ''
+    ipVersionFilter.value = ''
     selectedItem.value = null
     loadList()
   }
@@ -88,9 +109,13 @@ const loadList = async () => {
   if (!props.serviceId || !props.hostId) return
   loading.value = true
   try {
-    const params = { service_id: props.serviceId, host_id: props.hostId, page: page.value, page_size: pageSize.value,type: type.value }
+    const params = { service_id: props.serviceId, host_id: props.hostId, page: page.value, page_size: pageSize.value }
+    const effectiveType = props.filterType || typeFilter.value || type.value
+    if (effectiveType) params.type = effectiveType
     if (keyword.value) params.keyword = keyword.value
-    if (typeFilter.value) params.type = typeFilter.value
+    const effectiveUsed = props.filterUsed || usedFilter.value
+    if (effectiveUsed) params.used = effectiveUsed
+    if (ipVersionFilter.value) params.ip_version = ipVersionFilter.value
     const res = await getNetworkList(params)
     if (res?.data?.code === 200 && res?.data?.data) {
       const inner = res.data.data