feat: 添加用户虚拟机商品管理

src/components/admin/HostGroupSelectorPopup.vue

@@ -1,13 +1,21 @@
 <template>
-  <el-dialog v-model="visible" title="选择宿主机组" width="600px" append-to-body @close="handleClose">
+  <el-dialog v-model="visible" title="选择宿主机组" width="650px" append-to-body @close="handleClose">
     <div class="selector-container">
-      <el-table v-loading="loading" :data="list" highlight-current-row @current-change="handleCurrentChange" :height="300" :row-class-name="rowClassName">
+      <div class="filter-bar">
+        <el-input v-model="keyword" placeholder="搜索宿主机组名称" clearable style="width:200px" @keyup.enter="handleSearch" @clear="handleSearch" />
+        <el-button :icon="Refresh" @click="loadList">刷新</el-button>
+      </div>
+      <el-table v-loading="loading" :data="filteredList" highlight-current-row @current-change="handleCurrentChange" :height="300" :row-class-name="rowClassName">
         <el-table-column prop="id" label="ID" width="70" />
-        <el-table-column prop="name" label="名称" min-width="160" show-overflow-tooltip />
+        <el-table-column prop="name" label="名称" min-width="140" show-overflow-tooltip />
         <el-table-column prop="note" label="备注" min-width="120" show-overflow-tooltip>
-          <template #default="{ row }">{{ row.note || row.Note || '-' }}</template>
+          <template #default="{ row }">{{ row.note || '-' }}</template>
         </el-table-column>
+        <el-table-column prop="serviceId" label="服务ID" width="80" />
       </el-table>
+      <div class="pagination-wrapper" v-if="total > pageSize">
+        <el-pagination v-model:current-page="page" :page-size="pageSize" :total="total" layout="prev,pager,next" small @current-change="loadList" />
+      </div>
     </div>
     <template #footer>
       <el-button @click="visible = false">取消</el-button>
@@ -17,7 +25,8 @@
 </template>
 
 <script setup>
-import { ref, watch } from 'vue'
+import { ref, computed, watch } from 'vue'
+import { Refresh } from '@element-plus/icons-vue'
 import { getHostGroupList } from '@/api/admin/kvmService'
 
 const props = defineProps({
@@ -32,25 +41,40 @@ const visible = ref(false)
 const loading = ref(false)
 const list = ref([])
 const selectedItem = ref(null)
+const keyword = ref('')
+const page = ref(1)
+const pageSize = 10
+const total = ref(0)
+
+const filteredList = computed(() => {
+  if (!keyword.value) return list.value
+  const kw = keyword.value.toLowerCase()
+  return list.value.filter(i => (i.name || '').toLowerCase().includes(kw))
+})
 
 watch(() => props.modelValue, (val) => {
   visible.value = val
-  if (val) loadList()
+  if (val) { page.value = 1; loadList() }
 })
 watch(visible, (val) => emit('update:modelValue', val))
 
+const handleSearch = () => { page.value = 1; loadList() }
+
 const loadList = async () => {
   loading.value = true
   try {
-    const res = await getHostGroupList({ service_id: props.serviceId })
+    const res = await getHostGroupList({ service_id: props.serviceId, page: page.value, count: pageSize })
     const body = res?.data
     if (body?.code === 200 && body?.data) {
       const items = Array.isArray(body.data) ? body.data : (body.data.data || body.data.list || [])
       list.value = items.map(i => ({
-        id: i.Id ?? i.id,
-        name: i.Name ?? i.name,
-        note: i.Note ?? i.note
+        id: i.id,
+        name: i.name ?? i.Name,
+        note: i.note ?? i.Note,
+        serviceId: i.serviceId ?? i.service_id ?? 0,
+        serviceHostGroupId: i.serviceHostGroupId ?? 0
       }))
+      total.value = body.data.total ?? body.data.all_count ?? list.value.length
     }
   } catch { /* ignore */ }
   finally { loading.value = false }
@@ -69,6 +93,8 @@ const handleClose = () => { selectedItem.value = null }
 
 <style scoped>
 .selector-container { min-height: 200px; }
+.filter-bar { display: flex; gap: 8px; margin-bottom: 12px; }
+.pagination-wrapper { display: flex; justify-content: flex-end; margin-top: 8px; }
 :deep(.current-row) { background-color: #ecf5ff !important; }
 :deep(.el-table__body tr) { cursor: pointer; }
 </style>

src/components/admin/HostSelectorPopup.vue

@@ -0,0 +1,98 @@
+<template>
+  <el-dialog v-model="visible" title="选择宿主机" width="700px" append-to-body @close="handleClose">
+    <div class="selector-container">
+      <div class="filter-bar">
+        <el-input v-model="keyword" placeholder="搜索宿主机名称/IP" clearable style="width:200px" @keyup.enter="loadList" @clear="loadList" />
+        <el-button :icon="Refresh" @click="loadList">刷新</el-button>
+      </div>
+      <el-table v-loading="loading" :data="filteredList" highlight-current-row @current-change="handleCurrentChange" :height="300" :row-class-name="rowClassName">
+        <el-table-column prop="id" label="ID" width="70" />
+        <el-table-column prop="name" label="名称" min-width="140" show-overflow-tooltip />
+        <el-table-column prop="ip" label="IP" min-width="130" />
+        <el-table-column label="状态" width="80">
+          <template #default="{ row }">
+            <el-tag :type="row.is_active ? 'success' : 'danger'" size="small">{{ row.is_active ? '在线' : '离线' }}</el-tag>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="pagination-wrapper" v-if="total > pageSize">
+        <el-pagination v-model:current-page="page" :page-size="pageSize" :total="total" layout="prev,pager,next" small @current-change="loadList" />
+      </div>
+    </div>
+    <template #footer>
+      <el-button @click="visible = false">取消</el-button>
+      <el-button type="primary" :disabled="!selectedItem" @click="handleConfirm">确认选择</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue'
+import { Refresh } from '@element-plus/icons-vue'
+import { getRemoteHostList } from '@/api/admin/kvmService'
+
+const props = defineProps({
+  modelValue: { type: Boolean, default: false },
+  serviceId: { type: Number, default: 0 },
+  hostGroupId: { type: Number, default: 0 },
+  currentId: { type: Number, default: 0 }
+})
+
+const emit = defineEmits(['update:modelValue', 'confirm'])
+
+const visible = ref(false)
+const loading = ref(false)
+const list = ref([])
+const selectedItem = ref(null)
+const keyword = ref('')
+const page = ref(1)
+const pageSize = 10
+const total = ref(0)
+
+const filteredList = computed(() => {
+  if (!keyword.value) return list.value
+  const kw = keyword.value.toLowerCase()
+  return list.value.filter(i => (i.name || '').toLowerCase().includes(kw) || (i.ip || '').includes(kw))
+})
+
+watch(() => props.modelValue, (val) => {
+  visible.value = val
+  if (val) { page.value = 1; loadList() }
+})
+watch(visible, (val) => emit('update:modelValue', val))
+
+const loadList = async () => {
+  loading.value = true
+  try {
+    const params = { service_id: props.serviceId, page: page.value, count: pageSize }
+    if (props.hostGroupId) params.host_group_id = props.hostGroupId
+    const res = await getRemoteHostList(params)
+    const body = res?.data
+    if (body?.code === 200 && body?.data) {
+      const inner = body.data
+      const hosts = inner.hosts || inner.data || (Array.isArray(inner) ? inner : [])
+      list.value = hosts.map(i => ({
+        id: i.id, name: i.name, ip: i.ip, is_active: i.is_active ?? true,
+        host_group_id: i.host_group_id
+      }))
+      total.value = inner.total ?? list.value.length
+    }
+  } catch { /* ignore */ }
+  finally { loading.value = false }
+}
+
+const rowClassName = ({ row }) => row.id === props.currentId ? 'current-row' : ''
+const handleCurrentChange = (row) => { selectedItem.value = row }
+const handleConfirm = () => {
+  if (selectedItem.value) { emit('confirm', selectedItem.value); visible.value = false }
+}
+const handleClose = () => { selectedItem.value = null }
+</script>
+
+<style scoped>
+.selector-container { min-height: 200px; }
+.filter-bar { display: flex; gap: 8px; margin-bottom: 12px; }
+.pagination-wrapper { display: flex; justify-content: flex-end; margin-top: 8px; }
+:deep(.current-row) { background-color: #ecf5ff !important; }
+:deep(.el-table__body tr) { cursor: pointer; }
+</style>

src/components/admin/ImageSelectorPopup.vue

@@ -2,35 +2,32 @@
   <el-dialog v-model="visible" title="选择镜像" width="700px" 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="loadList" @clear="loadList">
+        <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="filterOsType" placeholder="系统类型" clearable style="width: 120px" @change="loadList">
+        <el-select v-model="filterOsType" placeholder="系统类型" clearable style="width: 120px" @change="handleSearch">
           <el-option label="Linux" value="linux" />
           <el-option label="Windows" value="windows" />
         </el-select>
+        <el-button :icon="Refresh" @click="loadList">刷新</el-button>
       </div>
       <el-table v-loading="loading" :data="list" highlight-current-row @current-change="handleCurrentChange" :height="300" :row-class-name="rowClassName">
-        <el-table-column prop="id" label="ID" width="70" />
-        <el-table-column prop="name" label="名称" min-width="160" show-overflow-tooltip />
-        <el-table-column label="系统" width="80">
+        <el-table-column prop="id" label="ID" width="60" />
+        <el-table-column prop="name" label="名称" min-width="200" show-overflow-tooltip />
+        <el-table-column label="系统" width="100" align="center">
           <template #default="{ row }">
             <el-tag :type="row.os_type === 'linux' ? 'success' : 'primary'" size="small">{{ row.os_type }}</el-tag>
           </template>
         </el-table-column>
-        <el-table-column label="类型" width="80">
+        <el-table-column label="类型" width="70" align="center">
           <template #default="{ row }">
             <el-tag :type="row.type === 'system' ? '' : 'warning'" size="small">{{ row.type === 'system' ? '系统' : '数据' }}</el-tag>
           </template>
         </el-table-column>
-        <el-table-column label="状态" width="80">
-          <template #default="{ row }">
-            <el-tag :type="{ ready: 'success', error: 'danger', downloading: 'warning' }[row.status] || 'info'" size="small">
-              {{ { ready: '就绪', error: '错误', downloading: '下载中', pending: '等待中' }[row.status] || row.status }}
-            </el-tag>
-          </template>
-        </el-table-column>
       </el-table>
+      <div class="pagination-wrapper" v-if="total > pageSize">
+        <el-pagination v-model:current-page="page" :page-size="pageSize" :total="total" layout="prev,pager,next" small @current-change="loadList" />
+      </div>
     </div>
     <template #footer>
       <el-button @click="visible = false">取消</el-button>
@@ -41,7 +38,7 @@
 
 <script setup>
 import { ref, watch } from 'vue'
-import { Search } from '@element-plus/icons-vue'
+import { Search, Refresh } from '@element-plus/icons-vue'
 import { getImageList } from '@/api/admin/kvmService'
 
 const props = defineProps({
@@ -58,24 +55,30 @@ const list = ref([])
 const selectedItem = ref(null)
 const keyword = ref('')
 const filterOsType = ref('')
+const page = ref(1)
+const pageSize = 10
+const total = ref(0)
 
 watch(() => props.modelValue, (val) => {
   visible.value = val
-  if (val) loadList()
+  if (val) { page.value = 1; loadList() }
 })
 watch(visible, (val) => emit('update:modelValue', val))
 
+const handleSearch = () => { page.value = 1; loadList() }
+
 const loadList = async () => {
   loading.value = true
   try {
-    const params = { service_id: props.serviceId, page: 1, count: 10 }
+    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)
     const body = res?.data
     if (body?.code === 200 && body?.data) {
       const inner = body.data
-      list.value = inner.data || (Array.isArray(inner) ? inner : [])
+      list.value = inner.data || inner.list || (Array.isArray(inner) ? inner : [])
+      total.value = inner.total ?? inner.all_count ?? list.value.length
     }
   } catch { /* ignore */ }
   finally { loading.value = false }
@@ -95,6 +98,7 @@ const handleClose = () => { selectedItem.value = null }
 <style scoped>
 .selector-container { min-height: 200px; }
 .filter-bar { display: flex; gap: 8px; margin-bottom: 12px; }
+.pagination-wrapper { display: flex; justify-content: flex-end; margin-top: 8px; }
 :deep(.current-row) { background-color: #ecf5ff !important; }
 :deep(.el-table__body tr) { cursor: pointer; }
 </style>

src/components/admin/KvmServiceSelector.vue

@@ -0,0 +1,83 @@
+<template>
+  <el-dialog v-model="visible" title="选择主控服务" width="640px" append-to-body @close="handleClose">
+    <div class="selector-toolbar">
+      <el-input v-model="keyword" placeholder="搜索服务名称/地址" clearable style="width:220px"
+        @keyup.enter="handleSearch" @clear="handleSearch">
+        <template #prefix><el-icon><Search /></el-icon></template>
+      </el-input>
+      <el-button type="primary" @click="handleSearch">搜索</el-button>
+      <el-button :icon="Refresh" @click="handleRefresh" :loading="loading">刷新</el-button>
+    </div>
+    <el-table :data="list" v-loading="loading" highlight-current-row
+      @current-change="row => selected = row" :height="320" stripe size="small">
+      <el-table-column prop="id" label="ID" width="70" />
+      <el-table-column prop="name" label="服务名称" min-width="160" show-overflow-tooltip />
+      <el-table-column label="地址" min-width="180">
+        <template #default="{ row }">
+          <span style="font-family:monospace;color:#409eff">{{ row.host }}:{{ row.port }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="note" label="备注" min-width="120" show-overflow-tooltip>
+        <template #default="{ row }">{{ row.note || '-' }}</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() }" />
+    </div>
+    <template #footer>
+      <el-button @click="handleClose">取消</el-button>
+      <el-button type="primary" :disabled="!selected" @click="handleConfirm">确定选择</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+import { Search, Refresh } from '@element-plus/icons-vue'
+import { getKvmServiceList } from '@/api/admin/kvmService'
+
+const props = defineProps({ modelValue: { type: Boolean, default: false } })
+const emit = defineEmits(['update:modelValue', 'confirm'])
+
+const visible = ref(false)
+const loading = ref(false)
+const list = ref([])
+const total = ref(0)
+const page = ref(1)
+const pageSize = ref(10)
+const keyword = ref('')
+const selected = ref(null)
+
+watch(() => props.modelValue, (v) => { visible.value = v; if (v) { selected.value = null; loadList() } })
+watch(visible, (v) => emit('update:modelValue', v))
+
+const loadList = async () => {
+  loading.value = true
+  try {
+    const params = { page: page.value, count: pageSize.value }
+    if (keyword.value) params.key = keyword.value
+    const res = await getKvmServiceList(params)
+    if (res?.data?.code === 200 && res?.data?.data) {
+      const inner = res.data.data
+      const raw = inner.data || inner.list || (Array.isArray(inner) ? inner : [])
+      list.value = raw.map(s => ({ id: s.id ?? s.Id, name: s.name ?? s.Name, host: s.host ?? s.Host, port: s.port ?? s.Port, note: s.note ?? s.Note }))
+      total.value = inner.all_count ?? inner.total ?? list.value.length
+    }
+  } catch { /* */ } finally { loading.value = false }
+}
+
+const handleSearch = () => { page.value = 1; loadList() }
+const handleRefresh = () => { keyword.value = ''; page.value = 1; loadList() }
+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; }
+</style>

src/components/admin/OrderSelector.vue

@@ -0,0 +1,90 @@
+<template>
+  <el-dialog v-model="visible" title="选择订单" width="800px" append-to-body @close="handleClose">
+    <div class="selector-toolbar">
+      <el-input v-model="keyword" placeholder="搜索订单名称/ID" clearable style="width:220px" @keyup.enter="handleSearch" @clear="handleSearch">
+        <template #prefix><el-icon><Search /></el-icon></template>
+      </el-input>
+      <el-button type="primary" @click="handleSearch">搜索</el-button>
+      <el-button :icon="Refresh" @click="handleRefresh" :loading="loading">刷新</el-button>
+    </div>
+    <el-table :data="list" v-loading="loading" highlight-current-row @current-change="row => selected = row" :height="360" stripe size="small">
+      <el-table-column prop="id" label="ID" width="80" />
+      <el-table-column prop="name" label="订单名称" min-width="200" show-overflow-tooltip />
+      <el-table-column label="价格" width="100">
+        <template #default="{ row }">¥{{ ((row.price || 0) / 100).toFixed(2) }}</template>
+      </el-table-column>
+      <el-table-column label="状态" width="90">
+        <template #default="{ row }">
+          <el-tag :type="row.state === 1 ? 'success' : row.state === 0 ? 'warning' : 'info'" size="small">
+            {{ row.state === 1 ? '已支付' : row.state === 0 ? '待支付' : '已失效' }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="到期时间" width="160">
+        <template #default="{ row }">{{ formatTime(row.expireTime || row.expire_time) }}</template>
+      </el-table-column>
+    </el-table>
+    <el-empty v-if="!list.length && !loading" :image-size="60" description="暂无订单" />
+    <div class="selector-selected" v-if="selected">
+      <el-tag type="primary" size="large" closable @close="selected = null">已选：{{ selected.name }} (ID: {{ selected.id }})</el-tag>
+    </div>
+    <div class="selector-footer-bar">
+      <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() }" />
+    </div>
+    <template #footer>
+      <el-button @click="handleClose">取消</el-button>
+      <el-button type="primary" :disabled="!selected" @click="handleConfirm">确定选择</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+import { Search, Refresh } from '@element-plus/icons-vue'
+import { getOrderList } from '@/api/admin/order'
+import dayjs from 'dayjs'
+
+const props = defineProps({ modelValue: { type: Boolean, default: false } })
+const emit = defineEmits(['update:modelValue', 'confirm'])
+
+const visible = ref(false)
+const loading = ref(false)
+const list = ref([])
+const total = ref(0)
+const page = ref(1)
+const pageSize = ref(10)
+const keyword = ref('')
+const selected = ref(null)
+
+const formatTime = (t) => t ? dayjs(t).format('YYYY-MM-DD HH:mm') : '-'
+
+watch(() => props.modelValue, (v) => { visible.value = v; if (v) { selected.value = null; loadList() } })
+watch(visible, (v) => emit('update:modelValue', v))
+
+const loadList = async () => {
+  loading.value = true
+  try {
+    const params = { page: page.value, count: pageSize.value }
+    if (keyword.value) params.key = keyword.value
+    const res = await getOrderList(params)
+    if (res?.data?.code === 200 && res?.data?.data) {
+      const d = res.data.data
+      list.value = d.list || d.data || (Array.isArray(d) ? d : [])
+      total.value = d.all_count ?? d.total ?? list.value.length
+    }
+  } catch { /* */ } finally { loading.value = false }
+}
+
+const handleSearch = () => { page.value = 1; loadList() }
+const handleRefresh = () => { keyword.value = ''; page.value = 1; loadList() }
+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-selected { margin-top: 12px; }
+.selector-footer-bar { display: flex; justify-content: flex-end; align-items: center; margin-top: 10px; }
+</style>

src/components/admin/PlanSelector.vue

@@ -0,0 +1,76 @@
+<template>
+  <el-dialog v-model="visible" title="选择套餐" width="700px" append-to-body @close="handleClose">
+    <div class="selector-toolbar">
+      <el-button :icon="Refresh" @click="loadList" :loading="loading">刷新</el-button>
+      <span style="color:#909399;font-size:13px" v-if="goodId">商品 ID: {{ goodId }}</span>
+    </div>
+    <el-table :data="list" v-loading="loading" highlight-current-row @current-change="row => selected = row" :height="360" stripe size="small">
+      <el-table-column prop="id" label="ID" width="80" />
+      <el-table-column prop="name" label="套餐名称" min-width="160" show-overflow-tooltip />
+      <el-table-column prop="note" label="说明" min-width="160" show-overflow-tooltip>
+        <template #default="{ row }">{{ row.note || '-' }}</template>
+      </el-table-column>
+      <el-table-column label="状态" width="80">
+        <template #default="{ row }">
+          <el-tag :type="row.disable ? 'danger' : 'success'" size="small">{{ row.disable ? '禁用' : '启用' }}</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() }" />
+    </div>
+    <template #footer>
+      <el-button @click="handleClose">取消</el-button>
+      <el-button type="primary" :disabled="!selected" @click="handleConfirm">确定选择</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+import { Refresh } from '@element-plus/icons-vue'
+import { getProductPlanList } from '@/api/admin/product'
+
+const props = defineProps({
+  modelValue: { type: Boolean, default: false },
+  goodId: { type: [Number, String], default: 0 }
+})
+const emit = defineEmits(['update:modelValue', 'confirm'])
+
+const visible = ref(false)
+const loading = ref(false)
+const list = ref([])
+const total = ref(0)
+const page = ref(1)
+const pageSize = ref(10)
+const selected = ref(null)
+
+watch(() => props.modelValue, (v) => { visible.value = v; if (v) { selected.value = null; loadList() } })
+watch(visible, (v) => emit('update:modelValue', v))
+
+const loadList = async () => {
+  loading.value = true
+  try {
+    const params = { page: page.value, count: pageSize.value }
+    if (props.goodId) params.good_id = props.goodId
+    const res = await getProductPlanList(params)
+    if (res?.data?.code === 200 && res?.data?.data) {
+      const d = res.data.data
+      list.value = d.data || (Array.isArray(d) ? d : [])
+      total.value = d.all_count ?? d.total ?? list.value.length
+    }
+  } catch { /* */ } finally { loading.value = false }
+}
+
+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; }
+</style>

src/components/admin/ProductGroupSelector.vue

@@ -46,12 +46,12 @@
         <el-table-column prop="name" label="商品组名称" min-width="180" show-overflow-tooltip />
         <el-table-column label="父级ID" width="80" align="center">
           <template #default="{ row }">
-            {{ row.parent_id || '-' }}
+            {{ row.parentId || '-' }}
           </template>
         </el-table-column>
         <el-table-column label="标签" min-width="120">
           <template #default="{ row }">
-            <el-tag v-if="row.tag" size="small" type="info">{{ row.tag }}</el-tag>
+            <el-tag v-if="row.tag" size="small" type="info">{{ row.tag?.name || row.tag }}</el-tag>
             <span v-else class="text-muted">-</span>
           </template>
         </el-table-column>

src/components/admin/ProductSelector.vue

@@ -117,7 +117,6 @@ 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 { getFileDetail } from '@/api/admin/file'
 
 // Props
 const props = defineProps({
@@ -172,7 +171,7 @@ watch(visible, (newVal) => {
 // 获取商品分组列表
 const fetchGroupList = async () => {
   try {
-    const res = await getProductGroupList({ page: 1, count: 100 })
+    const res = await getProductGroupList({ page: 1, count: 10 })
     if (res.data.code === 200) {
       groupOptions.value = res.data.data.data || []
     }
@@ -199,23 +198,14 @@ const fetchProductList = async () => {
     
     if (res.data.code === 200) {
       const allData = res.data.data.data || []
-      // 过滤掉已删除的数据
-      productList.value = allData.filter(item => item.delete == false)
-      total.value = productList.value.length
+      // 过滤掉已删除的数据（兼容 delete 字段不存在的情况）
+      productList.value = allData.filter(item => item.delete !== true)
+      total.value = res.data.data.all_count ?? allData.length
       
-      // 加载商品图片
-      for (let i = 0; i < productList.value.length; i++) {
-        if (productList.value[i].coverId) {
-          try {
-            const res2 = await getFileDetail({ file_id: productList.value[i].coverId })
-            if (res2.data.code === 200) {
-              productList.value[i].image = res2.data.data.url
-            }
-          } catch (error) {
-            console.error('获取商品图片失败:', error)
-          }
-        }
-      }
+      // cover 字段直接是图片 URL，无需再请求 file detail
+      productList.value.forEach(item => {
+        if (item.cover) item.image = item.cover
+      })
       
       // 如果有当前选中的商品ID，自动选中
       if (props.currentProductId) {

src/components/admin/UserVmNetworkSelector.vue

@@ -0,0 +1,126 @@
+<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() }" />
+    </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>
+    </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'
+
+const props = defineProps({
+  modelValue: { type: Boolean, default: false },
+  userGoodsId: { type: Number, default: 0 }
+})
+const emit = defineEmits(['update:modelValue', 'confirm'])
+
+const visible = ref(false)
+const loading = ref(false)
+const list = ref([])
+const total = ref(0)
+const page = ref(1)
+const pageSize = ref(10)
+const selected = ref(null)
+
+const showCreate = ref(false)
+const createLoading = ref(false)
+const createForm = reactive({ name: '', bridge_name: '', gateway: '', description: '' })
+
+watch(() => props.modelValue, (v) => { visible.value = v; if (v) { selected.value = null; loadList() } })
+watch(visible, (v) => emit('update:modelValue', v))
+
+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 })
+    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 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 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; }
+</style>

src/components/admin/UserVmSecurityGroupSelector.vue

@@ -0,0 +1,143 @@
+<template>
+  <el-dialog v-model="visible" title="选择安全组" width="640px" append-to-body @close="handleClose">
+    <div class="selector-toolbar">
+      <el-input v-model="keyword" placeholder="搜索安全组名称" clearable style="width:200px"
+        @keyup.enter="loadList" @clear="loadList">
+        <template #prefix><el-icon><Search /></el-icon></template>
+      </el-input>
+      <el-button :icon="Refresh" @click="loadList" :loading="loading">刷新</el-button>
+      <el-button type="primary" :icon="Plus" @click="showCreate = true">新增安全组</el-button>
+    </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="160" show-overflow-tooltip />
+      <el-table-column label="方向" width="80">
+        <template #default="{ row }">
+          <el-tag :type="row.direction === 'in' ? 'success' : 'warning'" size="small">
+            {{ row.direction === 'in' ? '入站' : row.direction === 'out' ? '出站' : (row.direction || '-') }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="白名单" width="80">
+        <template #default="{ row }">
+          <el-tag :type="row.drop_all ? 'warning' : 'info'" size="small">{{ row.drop_all ? '开启' : '关闭' }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="共享" width="70">
+        <template #default="{ row }">
+          <el-tag :type="row.shared ? 'success' : 'info'" size="small">{{ row.shared ? '是' : '否' }}</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() }" />
+    </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="方向">
+        <el-select v-model="createForm.direction" style="width:100%">
+          <el-option label="入站 (in)" value="in" />
+          <el-option label="出站 (out)" value="out" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="锁定">
+        <el-switch v-model="createForm.lock" />
+      </el-form-item>
+      <el-form-item label="白名单">
+        <el-switch v-model="createForm.drop_all" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="showCreate = false">取消</el-button>
+      <el-button type="primary" :loading="createLoading" @click="submitCreate">创建</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref, reactive, watch } from 'vue'
+import { Search, Refresh, Plus } from '@element-plus/icons-vue'
+import { ElMessage } from 'element-plus'
+import { getUserVmPostGroupUserList, createUserVmPostGroup } from '@/api/admin/userVm'
+
+const props = defineProps({
+  modelValue: { type: Boolean, default: false },
+  userGoodsId: { type: Number, default: 0 }
+})
+const emit = defineEmits(['update:modelValue', 'confirm'])
+
+const visible = ref(false)
+const loading = ref(false)
+const list = ref([])
+const total = ref(0)
+const page = ref(1)
+const pageSize = ref(10)
+const keyword = ref('')
+const selected = ref(null)
+
+const showCreate = ref(false)
+const createLoading = ref(false)
+const createForm = reactive({ name: '', direction: 'in', lock: false, drop_all: false })
+
+watch(() => props.modelValue, (v) => { visible.value = v; if (v) { selected.value = null; loadList() } })
+watch(visible, (v) => emit('update:modelValue', v))
+
+const loadList = async () => {
+  if (!props.userGoodsId) return
+  loading.value = true
+  try {
+    const params = { user_goods_id: props.userGoodsId, page: page.value, page_size: pageSize.value }
+    if (keyword.value) params.keyword = keyword.value
+    const res = await getUserVmPostGroupUserList(params)
+    if (res?.data?.code === 200 && res?.data?.data) {
+      const d = res.data.data
+      list.value = d.groups || d.data || (Array.isArray(d) ? d : [])
+      total.value = d.total ?? list.value.length
+    }
+  } catch { /* */ } finally { loading.value = false }
+}
+
+const submitCreate = async () => {
+  if (!createForm.name) { ElMessage.warning('请输入名称'); return }
+  createLoading.value = true
+  try {
+    const res = await createUserVmPostGroup({
+      user_goods_id: props.userGoodsId,
+      name: createForm.name,
+      direction: createForm.direction,
+      lock: createForm.lock,
+      drop_all: createForm.drop_all
+    })
+    if (res?.data?.code === 200) {
+      ElMessage.success('创建成功')
+      showCreate.value = false
+      Object.assign(createForm, { name: '', direction: 'in', lock: false, drop_all: false })
+      loadList()
+    } else ElMessage.error(res?.data?.message || '创建失败')
+  } catch { ElMessage.error('创建失败') } finally { createLoading.value = false }
+}
+
+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; }
+</style>