fix: 提交修改

src/components/admin/AvatarSelector.vue

@@ -1,20 +1,20 @@
 <template>
     <el-dialog
       v-model="visible"
-      title="选择头像"
+      :title="title"
       width="800px"
       append-to-body
       @close="handleClose"
     >
       <div class="avatar-selector">
         <el-tabs v-model="activeTab" @tab-click="handleTabClick">
-          <!-- 用户文件列表 -->
-          <el-tab-pane label="用户文件" name="userFiles">
+          <!-- 文件列表 -->
+          <el-tab-pane label="文件" name="userFiles">
             <div class="file-list-container">
               <div class="file-list-header">
-                <h4>用户文件列表</h4>
+                <h4>文件列表</h4>
                 <el-button type="primary" @click="switchToUpload" :icon="Upload">
-                  上传新头像
+                  上传新文件
                 </el-button>
               </div>
               <div class="file-grid" v-loading="loading">
@@ -58,8 +58,8 @@
             </div>
           </el-tab-pane>
           
-          <!-- 上传头像 -->
-          <el-tab-pane label="上传头像" name="upload">
+          <!-- 上传文件 -->
+          <el-tab-pane label="上传文件" name="upload">
             <div class="upload-section">
               <el-upload
                 :http-request="handleUpload"
@@ -118,6 +118,10 @@ import { closeAllMessage } from '../../utils/message'
     currentCoverId: {
       type: [String, Number],
       default: ''
+    },
+    title: {
+      type: String,
+      default: '选择文件'
     }
   })
   

src/components/admin/ImageSelectorPopup.vue

@@ -40,11 +40,14 @@
 import { ref, watch } from 'vue'
 import { Search, Refresh } from '@element-plus/icons-vue'
 import { getImageList } from '@/api/admin/kvmService'
+import { getUserVmHostImages, getGoodHostGroupImages } from '@/api/admin/userVm'
 
 const props = defineProps({
   modelValue: { type: Boolean, default: false },
   serviceId: { type: Number, default: 0 },
-  currentId: { type: Number, default: 0 }
+  goodId: { type: Number, default: 0 },
+  currentId: { type: Number, default: 0 },
+  useUserVmApi: { type: Boolean, default: false }
 })
 
 const emit = defineEmits(['update:modelValue', 'confirm'])
@@ -70,14 +73,31 @@ const handleSearch = () => { page.value = 1; loadList() }
 const loadList = async () => {
   loading.value = true
   try {
-    const params = { service_id: props.serviceId, page: page.value, count: pageSize }
-    if (keyword.value) params.keyword = keyword.value
-    if (filterOsType.value) params.os_type = filterOsType.value
-    const res = await getImageList(params)
+    let res
+    if (props.goodId > 0) {
+      const params = { good_id: props.goodId, page: page.value, count: pageSize }
+      if (keyword.value) params.keyword = keyword.value
+      if (filterOsType.value) params.os_type = filterOsType.value
+      res = await getGoodHostGroupImages(params)
+    } else if (props.useUserVmApi) {
+      const params = { service_id: props.serviceId, page: page.value, count: pageSize }
+      if (keyword.value) params.keyword = keyword.value
+      if (filterOsType.value) params.os_type = filterOsType.value
+      res = await getUserVmHostImages(params)
+    } else {
+      const params = { service_id: props.serviceId, page: page.value, count: pageSize }
+      if (keyword.value) params.keyword = keyword.value
+      if (filterOsType.value) params.os_type = filterOsType.value
+      res = await getImageList(params)
+    }
     const body = res?.data
     if (body?.code === 200 && body?.data) {
       const inner = body.data
-      list.value = inner.data || inner.list || (Array.isArray(inner) ? inner : [])
+      let items = inner.data || inner.list || (Array.isArray(inner) ? inner : [])
+      if (props.useUserVmApi || props.goodId > 0) {
+        items = items.map(item => item.image || item).filter(Boolean)
+      }
+      list.value = items
       total.value = inner.total ?? inner.all_count ?? list.value.length
     }
   } catch { /* ignore */ }

src/components/admin/NetworkSelectorPopup.vue

@@ -38,7 +38,9 @@
         <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>
+            <el-tag v-if="row._used === true" type="danger" size="small">已占用</el-tag>
+            <el-tag v-else-if="row._used === false" type="success" size="small">空闲</el-tag>
+            <el-tag v-else type="info" size="small">-</el-tag>
           </template>
         </el-table-column>
       </el-table>
@@ -119,7 +121,14 @@ const loadList = async () => {
     const res = await getNetworkList(params)
     if (res?.data?.code === 200 && res?.data?.data) {
       const inner = res.data.data
-      list.value = inner.data || inner.networks || (Array.isArray(inner) ? inner : [])
+      const items = inner.data || inner.networks || (Array.isArray(inner) ? inner : [])
+      list.value = items.map(item => ({
+        ...item,
+        _used: item.used !== undefined ? item.used
+          : effectiveUsed === 'true' ? true
+          : effectiveUsed === 'false' ? false
+          : null
+      }))
       total.value = inner.meta?.count ?? inner.total ?? list.value.length
     } else { list.value = []; total.value = 0 }
   } catch { list.value = []; total.value = 0 } finally { loading.value = false }

src/components/admin/PlanSelector.vue

@@ -52,9 +52,22 @@
                 </el-radio-group>
               </template>
               <template v-else-if="spec.type === 'number'">
-                <div style="display:flex;align-items:center;gap:10px">
-                  <el-input-number v-model="createSpecValues[spec.id]" :min="spec.min || 0" :max="spec.max || 9999" :step="spec.step || 1" :step-strictly="true" size="small" @change="buildCreateArgsJson" style="width:180px" />
-                  <span style="font-size:12px;color:#909399">范围: {{ spec.min || 0 }} ~ {{ spec.max || 9999 }}，步长: {{ spec.step || 1 }}</span>
+                <div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap">
+                  <el-input-number
+                    v-model="createDisplayValues[spec.id]"
+                    :min="hasUnit(spec) ? fromBaseUnit(spec.min ?? 0, createDisplayUnits[spec.id], getArgKey(spec)) : (spec.min ?? 0)"
+                    :max="hasUnit(spec) ? fromBaseUnit(spec.max ?? 0, createDisplayUnits[spec.id], getArgKey(spec)) : (spec.max ?? 0)"
+                    :step="hasUnit(spec) ? (fromBaseUnit(spec.step ?? 1, createDisplayUnits[spec.id], getArgKey(spec)) || 1) : (spec.step ?? 1)"
+                    :step-strictly="true"
+                    size="small"
+                    @change="onCreateNumberChange(spec)"
+                    style="width:180px"
+                  />
+                  <el-select v-if="hasUnit(spec)" :model-value="createDisplayUnits[spec.id]" size="small" style="width:90px" @change="(newUnit) => onCreateUnitChange(spec, newUnit)">
+                    <el-option v-for="u in getParamUnits(spec)" :key="u" :label="u" :value="u" />
+                  </el-select>
+                  <span style="font-size:12px;color:#909399">范围: {{ spec.min ?? 0 }} ~ {{ spec.max ?? 0 }}
+                    <template v-if="hasUnit(spec)"> {{ getBaseUnit(getArgKey(spec)) }}</template>，步长: {{ spec.step ?? 1 }}</span>
                 </div>
               </template>
               <template v-else>
@@ -82,6 +95,7 @@ import { ref, reactive, watch } from 'vue'
 import { Refresh, Plus } from '@element-plus/icons-vue'
 import { ElMessage } from 'element-plus'
 import { getProductPlanList, createProductPlan, getProductParameterList } from '@/api/admin/product'
+import { hasUnit, getArgKey, getBaseUnit, getParamUnits, getParamDefaultUnit, toBaseUnit, fromBaseUnit } from '@/utils/dynamicUnit'
 
 const props = defineProps({
   modelValue: { type: Boolean, default: false },
@@ -102,6 +116,8 @@ const createForm = reactive({ name: '', note: '', index: 0, args: '' })
 const createSpecList = ref([])
 const createSpecLoading = ref(false)
 const createSpecValues = reactive({})
+const createDisplayValues = reactive({})
+const createDisplayUnits = reactive({})
 
 watch(showCreate, (v) => {
   if (v && props.goodId) loadCreateSpec()
@@ -114,12 +130,42 @@ const loadCreateSpec = async () => {
     if (res?.data?.code === 200) {
       createSpecList.value = res.data.data || []
       for (const spec of createSpecList.value) {
-        if (spec.type === 'number' && createSpecValues[spec.id] === undefined) createSpecValues[spec.id] = spec.min || 0
+        if (spec.type === 'number') {
+          if (createSpecValues[spec.id] === undefined) createSpecValues[spec.id] = spec.min ?? 0
+          if (hasUnit(spec)) {
+            createDisplayUnits[spec.id] = getParamDefaultUnit(spec)
+            createDisplayValues[spec.id] = fromBaseUnit(spec.min ?? 0, createDisplayUnits[spec.id], getArgKey(spec))
+          } else {
+            createDisplayValues[spec.id] = spec.min ?? 0
+          }
+        }
       }
     }
   } catch { createSpecList.value = [] } finally { createSpecLoading.value = false }
 }
 
+const onCreateNumberChange = (spec) => {
+  if (hasUnit(spec)) {
+    const argKey = getArgKey(spec)
+    const unit = createDisplayUnits[spec.id]
+    createSpecValues[spec.id] = Math.round(toBaseUnit(createDisplayValues[spec.id] || 0, unit, argKey))
+  } else {
+    createSpecValues[spec.id] = createDisplayValues[spec.id]
+  }
+  buildCreateArgsJson()
+}
+
+const onCreateUnitChange = (spec, newUnit) => {
+  const argKey = getArgKey(spec)
+  const oldUnit = createDisplayUnits[spec.id]
+  const oldDisplay = createDisplayValues[spec.id] || 0
+  const baseValue = oldUnit ? toBaseUnit(oldDisplay, oldUnit, argKey) : oldDisplay
+  createDisplayUnits[spec.id] = newUnit
+  createDisplayValues[spec.id] = fromBaseUnit(baseValue, newUnit, argKey)
+  createSpecValues[spec.id] = Math.round(baseValue)
+  buildCreateArgsJson()
+}
+
 const buildCreateArgsJson = () => {
   const result = []
   for (const spec of createSpecList.value) {
@@ -127,11 +173,11 @@ const buildCreateArgsJson = () => {
     if (val === undefined || val === null || val === '') continue
     if (spec.type === 'select') {
       const attr = spec.attrs?.find(a => a.id === val)
-      if (attr) result.push({ arg_id: spec.id, name: spec.name, attr_id: attr.id, value: attr.value, number: 0 })
+      if (attr) result.push({ arg_id: spec.id, name: spec.name, attr_id: attr.id, value: attr.value, number: 0, key: getArgKey(spec) || undefined })
     } else if (spec.type === 'number') {
-      result.push({ arg_id: spec.id, name: spec.name, attr_id: 0, value: '', number: val })
+      result.push({ arg_id: spec.id, name: spec.name, attr_id: 0, value: '', number: val, key: getArgKey(spec) || undefined })
     } else {
-      result.push({ arg_id: spec.id, name: spec.name, attr_id: 0, value: String(val), number: 0 })
+      result.push({ arg_id: spec.id, name: spec.name, attr_id: 0, value: String(val), number: 0, key: getArgKey(spec) || undefined })
     }
   }
   createForm.args = result.length > 0 ? JSON.stringify(result) : ''
@@ -171,6 +217,8 @@ const submitCreate = async () => {
       showCreate.value = false
       Object.assign(createForm, { name: '', note: '', index: 0, args: '' })
       for (const k in createSpecValues) delete createSpecValues[k]
+      for (const k in createDisplayValues) delete createDisplayValues[k]
+      for (const k in createDisplayUnits) delete createDisplayUnits[k]
       loadList()
     } else ElMessage.error(res?.data?.message || '创建失败')
   } catch { ElMessage.error('创建失败') } finally { createLoading.value = false }

src/components/admin/ProductSelector.vue

@@ -29,6 +29,22 @@
                     />
                   </el-select>
                 </el-form-item>
+                <el-form-item label="商品标签">
+                  <el-select
+                    v-model="searchParams.tag"
+                    placeholder="全部标签"
+                    :clearable="!defaultTag"
+                    :disabled="!!defaultTag"
+                    style="width: 150px"
+                  >
+                    <el-option
+                      v-for="item in tagOptions"
+                      :key="item"
+                      :label="item"
+                      :value="item"
+                    />
+                  </el-select>
+                </el-form-item>
                 <el-form-item>
                   <el-button type="primary" @click="handleSearch" :icon="Search">
                     搜索
@@ -116,7 +132,7 @@
 import { ref, reactive, watch } from 'vue'
 import { ElMessage } from 'element-plus'
 import { Search, Refresh } from '@element-plus/icons-vue'
-import { getProductList, getProductGroupList } from '@/api/admin/product'
+import { getProductList, getProductGroupList, getProductTagList } from '@/api/admin/product'
 
 // Props
 const props = defineProps({
@@ -128,6 +144,11 @@ const props = defineProps({
   currentProductId: {
     type: [String, Number],
     default: ''
+  },
+  // 默认标签过滤（设置后自动锁定该标签）
+  defaultTag: {
+    type: String,
+    default: ''
   }
 })
 
@@ -140,12 +161,14 @@ const activeTab = ref('selectProduct')
 const loading = ref(false)
 const productList = ref([])
 const groupOptions = ref([])
+const tagOptions = ref([])
 const total = ref(0)
 const selectedProduct = ref(null)
 
 // 搜索参数
 const searchParams = reactive({
   good_group_id: '',
+  tag: '',
   page: 1,
   count: 10
 })
@@ -154,11 +177,14 @@ const searchParams = reactive({
 watch(() => props.modelValue, (newVal) => {
   visible.value = newVal
   if (newVal) {
-    // 重置状态
     activeTab.value = 'selectProduct'
     selectedProduct.value = null
     searchParams.page = 1
+    if (props.defaultTag) {
+      searchParams.tag = props.defaultTag
+    }
     fetchGroupList()
+    fetchTagList()
     fetchProductList()
   }
 })
@@ -180,6 +206,18 @@ const fetchGroupList = async () => {
   }
 }
 
+// 获取商品标签列表
+const fetchTagList = async () => {
+  try {
+    const res = await getProductTagList()
+    if (res.data.code === 200) {
+      tagOptions.value = res.data.data || []
+    }
+  } catch (error) {
+    console.error('获取标签列表失败:', error)
+  }
+}
+
 // 获取商品列表
 const fetchProductList = async () => {
   loading.value = true
@@ -193,6 +231,9 @@ const fetchProductList = async () => {
     if (searchParams.good_group_id) {
       params.good_group_id = searchParams.good_group_id
     }
+    if (searchParams.tag) {
+      params.tag = searchParams.tag
+    }
     
     const res = await getProductList(params)
     
@@ -243,6 +284,7 @@ const handleSearch = () => {
 // 重置搜索
 const handleReset = () => {
   searchParams.good_group_id = ''
+  searchParams.tag = props.defaultTag || ''
   searchParams.page = 1
   fetchProductList()
 }
@@ -278,6 +320,7 @@ const handleClose = () => {
   selectedProduct.value = null
   productList.value = []
   searchParams.good_group_id = ''
+  searchParams.tag = props.defaultTag || ''
   searchParams.page = 1
   total.value = 0
 }

src/components/admin/UserGroupSelector.vue

@@ -1,7 +1,7 @@
 <template>
   <el-dialog
     v-model="visible"
-    title="选择用户组"
+    :title="adminGroup ? '选择管理员组' : '选择用户组'"
     width="900px"
     append-to-body
     @close="handleClose"
@@ -9,7 +9,7 @@
     <div class="user-group-selector">
       <el-tabs v-model="activeTab" @tab-click="handleTabClick">
         <!-- 选择用户组 -->
-        <el-tab-pane label="选择用户组" name="selectGroup">
+        <el-tab-pane :label="adminGroup ? '选择管理员组' : '选择用户组'" name="selectGroup">
           <div class="group-list-container">
             <!-- 搜索筛选区域 -->
             <div class="filter-section">
@@ -17,7 +17,7 @@
                 <el-form-item label="关键词">
                   <el-input
                     v-model="searchParams.key"
-                    placeholder="搜索用户组名称"
+                    :placeholder="adminGroup ? '搜索管理员组名称' : '搜索用户组名称'"
                     clearable
                     @keyup.enter="handleSearch"
                     style="width: 200px"
@@ -38,8 +38,35 @@
               </el-form>
             </div>
 
+            <!-- 管理员组列表表格 -->
+            <el-table
+              v-if="adminGroup"
+              v-loading="loading"
+              :data="groupList"
+              highlight-current-row
+              @current-change="handleCurrentChange"
+              style="width: 100%"
+              :height="350"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column type="index" label="序号" width="60" align="center" />
+              <el-table-column prop="id" label="ID" width="80" align="center" />
+              <el-table-column prop="name" label="组名称" min-width="150" show-overflow-tooltip>
+                <template #default="{ row }">
+                  <span class="group-name">{{ row.name }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="auth" label="权限标识" min-width="120" show-overflow-tooltip />
+              <el-table-column prop="note" label="备注" min-width="150" show-overflow-tooltip>
+                <template #default="{ row }">
+                  {{ row.note || '-' }}
+                </template>
+              </el-table-column>
+            </el-table>
+
             <!-- 用户组列表表格 -->
             <el-table
+              v-else
               v-loading="loading"
               :data="groupList"
               highlight-current-row
@@ -102,7 +129,7 @@
               />
             </div>
             
-            <el-empty v-if="groupList.length === 0 && !loading" description="暂无用户组数据" />
+            <el-empty v-if="groupList.length === 0 && !loading" :description="adminGroup ? '暂无管理员组数据' : '暂无用户组数据'" />
           </div>
         </el-tab-pane>
       </el-tabs>
@@ -128,6 +155,7 @@ import { ref, reactive, watch } from 'vue'
 import { ElMessage } from 'element-plus'
 import { Search, Refresh } from '@element-plus/icons-vue'
 import { getUserGroupList } from '@/api/admin/user'
+import { getAdminGroupList } from '@/api/admin/group'
 
 // Props
 const props = defineProps({
@@ -144,6 +172,11 @@ const props = defineProps({
   excludeGroupId: {
     type: [String, Number],
     default: ''
+  },
+  // 是否请求管理员组接口
+  adminGroup: {
+    type: Boolean,
+    default: false
   }
 })
 
@@ -193,12 +226,15 @@ const fetchGroupList = async () => {
       count: searchParams.count
     }
     
-    const res = await getUserGroupList(params)
+    const res = props.adminGroup ? await getAdminGroupList(params) : await getUserGroupList(params)
     
     if (res.data.code === 200) {
       let responseData = res.data?.data || res.data
       
-      if (Array.isArray(responseData)) {
+      if (props.adminGroup) {
+        groupList.value = responseData?.data || []
+        total.value = responseData?.total || groupList.value.length
+      } else if (Array.isArray(responseData)) {
         groupList.value = responseData
         total.value = responseData.length
       } else if (responseData.list) {

src/components/admin/UserVmNetworkSelector.vue

@@ -1,71 +1,67 @@
 <template>
-  <el-dialog v-model="visible" title="选择公网网络（网桥）" width="680px" append-to-body @close="handleClose">
-    <div class="selector-toolbar">
-      <el-button :icon="Refresh" @click="loadList" :loading="loading">刷新</el-button>
-      <el-button type="primary" :icon="Plus" @click="showCreate = true">创建组网</el-button>
-      <span style="color:#909399;font-size:13px">仅显示网桥(bridge)类型网络</span>
-    </div>
-    <el-table :data="list" v-loading="loading" highlight-current-row
-      @current-change="row => selected = row" :height="280" stripe size="small">
-      <el-table-column prop="id" label="ID" width="70" />
-      <el-table-column prop="name" label="名称" min-width="120" show-overflow-tooltip />
-      <el-table-column prop="address" label="地址(CIDR)" min-width="150" show-overflow-tooltip />
-      <el-table-column prop="gateway" label="网关" min-width="120" />
-      <el-table-column prop="mac_address" label="MAC" min-width="150" show-overflow-tooltip />
-      <el-table-column label="类型" width="80">
-        <template #default>
-          <el-tag type="success" size="small">网桥</el-tag>
-        </template>
-      </el-table-column>
-    </el-table>
-    <el-empty v-if="!list.length && !loading" :image-size="60" description="暂无网桥网络" />
-    <div class="selector-footer-bar">
-      <span v-if="selected" style="color:#606266;font-size:13px">已选：{{ selected.name }} (ID: {{ selected.id }})</span>
-      <el-pagination v-model:current-page="page" v-model:page-size="pageSize" :page-sizes="[10,20]" :total="total"
-        layout="total,sizes,prev,pager,next" small background
-        @size-change="s => { pageSize = s; page = 1; loadList() }"
-        @current-change="p => { page = p; loadList() }" />
+  <el-dialog v-model="visible" title="选择网络" width="800px" append-to-body @close="handleClose">
+    <div class="selector-container">
+      <div class="filter-bar">
+        <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-tag v-if="filterType" :type="filterType === 'bridge' ? 'success' : 'warning'" size="small" effect="dark">仅{{ filterType === 'bridge' ? '网桥' : 'NAT' }}</el-tag>
+        <el-tag v-if="filterUnused" type="success" size="small" effect="dark">仅未占用</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"
+        :height="340" :row-class-name="rowClassName" size="small" stripe>
+        <el-table-column prop="id" label="ID" width="60" />
+        <el-table-column prop="name" label="名称" min-width="120" show-overflow-tooltip />
+        <el-table-column label="类型" width="80">
+          <template #default="{ row }">
+            <el-tag :type="row.type === 'bridge' ? 'success' : 'warning'" size="small">
+              {{ row.type === 'bridge' ? '网桥' : 'NAT' }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="address" label="地址(CIDR)" min-width="150" show-overflow-tooltip />
+        <el-table-column prop="gateway" label="网关" min-width="120" />
+        <el-table-column prop="nameservers" label="DNS" min-width="140" show-overflow-tooltip />
+        <el-table-column prop="bridge_name" label="网桥名称" width="100" />
+      </el-table>
+      <div class="pagination-wrapper" v-if="total > 0">
+        <el-pagination v-model:current-page="page" v-model:page-size="pageSize"
+          :page-sizes="[10, 20, 50]" :total="total" layout="total, sizes, prev, pager, next" small
+          @size-change="s => { pageSize = s; page = 1; loadList() }"
+          @current-change="p => { page = p; loadList() }" />
+      </div>
     </div>
     <template #footer>
-      <el-button @click="handleClose">取消</el-button>
-      <el-button type="primary" :disabled="!selected" @click="handleConfirm">确定选择</el-button>
-    </template>
-  </el-dialog>
-
-  <!-- 创建组网弹窗 -->
-  <el-dialog v-model="showCreate" title="创建组网" width="440px" append-to-body destroy-on-close>
-    <el-form :model="createForm" label-width="90px">
-      <el-form-item label="名称" required>
-        <el-input v-model="createForm.name" placeholder="组网名称" />
-      </el-form-item>
-      <el-form-item label="网桥名称" required>
-        <el-input v-model="createForm.bridge_name" placeholder="网桥名称" />
-      </el-form-item>
-      <el-form-item label="网关">
-        <el-input v-model="createForm.gateway" placeholder="可选，如 10.0.0.1/24" />
-      </el-form-item>
-      <el-form-item label="描述">
-        <el-input v-model="createForm.description" placeholder="可选" />
-      </el-form-item>
-    </el-form>
-    <template #footer>
-      <el-button @click="showCreate = false">取消</el-button>
-      <el-button type="primary" :loading="createLoading" @click="submitCreate">创建</el-button>
+      <div style="display: flex; justify-content: space-between; width: 100%">
+        <el-button v-if="props.showCreateButton" 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>
 
 <script setup>
-import { ref, reactive, watch } from 'vue'
-import { Refresh, Plus } from '@element-plus/icons-vue'
-import { ElMessage } from 'element-plus'
-import { getUserVmNetworkList, createUserVmNetworking } from '@/api/admin/userVm'
+import { ref, watch } from 'vue'
+import { Search, Refresh } from '@element-plus/icons-vue'
+import { getUserVmNetworkList } from '@/api/admin/userVm'
 
 const props = defineProps({
   modelValue: { type: Boolean, default: false },
-  userGoodsId: { type: Number, default: 0 }
+  userGoodsId: { type: Number, default: 0 },
+  filterType: { type: String, default: '' },
+  filterUnused: { type: Boolean, default: false },
+  showCreateButton: { type: Boolean, default: true }
 })
-const emit = defineEmits(['update:modelValue', 'confirm'])
+
+const emit = defineEmits(['update:modelValue', 'confirm', 'create'])
 
 const visible = ref(false)
 const loading = ref(false)
@@ -73,54 +69,66 @@ const list = ref([])
 const total = ref(0)
 const page = ref(1)
 const pageSize = ref(10)
-const selected = ref(null)
+const keyword = ref('')
+const ipVersionFilter = ref('')
+const selectedItem = ref(null)
 
-const showCreate = ref(false)
-const createLoading = ref(false)
-const createForm = reactive({ name: '', bridge_name: '', gateway: '', description: '' })
+watch(() => props.modelValue, (val) => {
+  visible.value = val
+  if (val) {
+    page.value = 1
+    keyword.value = ''
+    ipVersionFilter.value = ''
+    selectedItem.value = null
+    loadList()
+  }
+})
+watch(visible, (val) => emit('update:modelValue', val))
 
-watch(() => props.modelValue, (v) => { visible.value = v; if (v) { selected.value = null; loadList() } })
-watch(visible, (v) => emit('update:modelValue', v))
+const handleSearch = () => { page.value = 1; loadList() }
 
 const loadList = async () => {
   if (!props.userGoodsId) return
   loading.value = true
   try {
-    const res = await getUserVmNetworkList({ user_goods_id: props.userGoodsId, page: page.value, count: pageSize.value })
+    const params = { user_goods_id: props.userGoodsId, page: page.value, count: pageSize.value }
+    if (keyword.value) params.key = keyword.value
+    if (ipVersionFilter.value) params.ip_version = ipVersionFilter.value
+    const res = await getUserVmNetworkList(params)
     if (res?.data?.code === 200 && res?.data?.data) {
-      const d = res.data.data
-      const all = d.data || (Array.isArray(d) ? d : [])
-      list.value = all.filter(n => n.type === 'bridge')
-      total.value = list.value.length
-    }
-  } catch { /* */ } finally { loading.value = false }
+      const inner = res.data.data
+      let all = inner.data || (Array.isArray(inner) ? inner : [])
+      if (props.filterType) {
+        all = all.filter(n => n.type === props.filterType)
+      }
+      if (props.filterUnused) {
+        all = all.filter(n => !n.vm_id)
+      }
+      list.value = all
+      total.value = inner.meta?.count ?? inner.total ?? all.length
+    } else { list.value = []; total.value = 0 }
+  } catch { list.value = []; total.value = 0 } finally { loading.value = false }
 }
 
-const submitCreate = async () => {
-  if (!createForm.name || !createForm.bridge_name) { ElMessage.warning('请填写名称和网桥名称'); return }
-  createLoading.value = true
-  try {
-    const res = await createUserVmNetworking({
-      user_goods_id: props.userGoodsId,
-      name: createForm.name,
-      bridge_name: createForm.bridge_name,
-      gateway: createForm.gateway,
-      description: createForm.description
-    })
-    if (res?.data?.code === 200) {
-      ElMessage.success('创建成功')
-      showCreate.value = false
-      Object.assign(createForm, { name: '', bridge_name: '', gateway: '', description: '' })
-      loadList()
-    } else ElMessage.error(res?.data?.message || '创建失败')
-  } catch { ElMessage.error('创建失败') } finally { createLoading.value = false }
+const rowClassName = ({ row }) => row.id === selectedItem.value?.id ? 'selected-row' : ''
+const handleCurrentChange = (row) => { selectedItem.value = row }
+const handleConfirm = () => {
+  if (selectedItem.value) {
+    emit('confirm', selectedItem.value)
+    visible.value = false
+  }
+}
+const handleClose = () => { selectedItem.value = null }
+const handleCreate = () => {
+  visible.value = false
+  emit('create')
 }
-
-const handleClose = () => { visible.value = false }
-const handleConfirm = () => { if (selected.value) { emit('confirm', selected.value); handleClose() } }
 </script>
 
 <style scoped>
-.selector-toolbar { display: flex; gap: 8px; margin-bottom: 12px; align-items: center; }
-.selector-footer-bar { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
+.selector-container { min-height: 200px; }
+.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>

src/components/admin/UserVmVolumeSelector.vue

@@ -51,7 +51,12 @@
   <el-dialog v-model="showCreate" title="新建数据卷" width="440px" append-to-body destroy-on-close>
     <el-form :model="createForm" label-width="100px">
       <el-form-item label="名称" required><el-input v-model="createForm.name" placeholder="数据卷名称" /></el-form-item>
-      <el-form-item label="大小(GB)"><el-input-number v-model="createForm.size" :min="1" controls-position="right" style="width:100%" /></el-form-item>
+      <el-form-item label="大小">
+        <div class="unit-input-row">
+          <el-input-number v-model="createForm.size" :min="1" controls-position="right" style="flex:1" />
+          <el-select v-model="createForm._sizeUnit" class="unit-select"><el-option label="GB" value="GB" /><el-option label="TB" value="TB" /></el-select>
+        </div>
+      </el-form-item>
       <el-form-item label="目标设备名"><el-input v-model="createForm.target_device" placeholder="不填自动生成" /></el-form-item>
     </el-form>
     <template #footer>
@@ -84,7 +89,7 @@ const selected = ref(null)
 
 const showCreate = ref(false)
 const createLoading = ref(false)
-const createForm = reactive({ name: '', size: 10, target_device: '' })
+const createForm = reactive({ name: '', size: 10, _sizeUnit: 'GB', target_device: '' })
 
 watch(() => props.modelValue, (v) => { visible.value = v; if (v) { selected.value = null; loadList() } })
 watch(visible, (v) => emit('update:modelValue', v))
@@ -106,11 +111,17 @@ const submitCreate = async () => {
   if (!createForm.name) { ElMessage.warning('请输入名称'); return }
   createLoading.value = true
   try {
-    const res = await createUserVmVolume({ user_goods_id: props.userGoodsId, ...createForm })
+    const sizeGb = createForm._sizeUnit === 'TB' ? createForm.size * 1024 : createForm.size
+    const res = await createUserVmVolume({
+      user_goods_id: props.userGoodsId,
+      name: createForm.name,
+      size: sizeGb,
+      target_device: createForm.target_device
+    })
     if (res?.data?.code === 200) {
       ElMessage.success('创建成功')
       showCreate.value = false
-      Object.assign(createForm, { name: '', size: 10, target_device: '' })
+      Object.assign(createForm, { name: '', size: 10, _sizeUnit: 'GB', target_device: '' })
       loadList()
     } else ElMessage.error(res?.data?.message || '创建失败')
   } catch { ElMessage.error('创建失败') } finally { createLoading.value = false }
@@ -128,4 +139,6 @@ const handleConfirm = () => {
 <style scoped>
 .selector-toolbar { display: flex; gap: 8px; margin-bottom: 12px; align-items: center; }
 .selector-footer-bar { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
+.unit-input-row { display: flex; align-items: center; gap: 6px; width: 100%; }
+.unit-select { width: 90px; flex-shrink: 0; }
 </style>