From f6ece66b1abcb5fe2e487e2ecb50b7761493f61e Mon Sep 17 00:00:00 2001
From: Leo_Ding <2405260743@qq.com>
Date: Tue, 20 Jan 2026 09:05:51 +0800
Subject: [PATCH] =?UTF-8?q?=E7=AE=97=E5=8A=9B=E5=B9=B3=E5=8F=B0=E5=AE=9E?=
 =?UTF-8?q?=E4=BE=8B=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/home.ts                         |   5 +
 src/utils/dict.ts                        |  15 ++
 src/views/admin/instance/index.vue       | 111 +++++-----
 src/views/admin/instanceCreate/index.vue | 230 ++++++++++-----------
 src/views/instanceCreate/index.vue       | 250 ++++++++++++-----------
 src/views/market/index.vue               | 210 ++++++++++---------
 6 files changed, 431 insertions(+), 390 deletions(-)
 create mode 100644 src/utils/dict.ts

diff --git a/src/apis/home.ts b/src/apis/home.ts
index 476e642..4c49cc3 100644
--- a/src/apis/home.ts
+++ b/src/apis/home.ts
@@ -52,3 +52,8 @@ export const exchangePoint=(params:any)=>request.put('/v1/balance/exchange_point
 //创建实例
 export const createHost=(params:any)=>request.post('/v1/host/host_case',params)
 
+//释放实例
+export const releaseCase=(caseId:string)=>request.post(`/v1/host_case/release_case/${caseId}`)
+//重置实例
+export const reStartCase=(caseId:string)=>request.post(`/v1/host_case/restart_case/${caseId}`)
+
diff --git a/src/utils/dict.ts b/src/utils/dict.ts
new file mode 100644
index 0000000..fca3540
--- /dev/null
+++ b/src/utils/dict.ts
@@ -0,0 +1,15 @@
+export const payTypeDic = new Map([
+  ["PayOnTime", "按量计费"],
+  ["PayOnDay", "包日"],
+  ["PayOnWeek", "包周"],
+  ["PayOnMonth", "包月"],
+  ["PayOnYear", "包年"],
+]);
+
+export const instanceStatus = new Map([
+  ["RUNNING", { text: "运行中", color: "#67C23A" }],
+  ["STOPPED", { text: "已停止", color: "#909399" }],
+  ["CREATING", { text: "创建中", color: "#E6A23C" }],
+  ["RESTARTING", { text: "重启中", color: "#E6A23C" }],
+  ["RELEASED", { text: "已释放", color: "#F56C6C" }],
+]);
diff --git a/src/views/admin/instance/index.vue b/src/views/admin/instance/index.vue
index 1bf15ad..dd58f96 100644
--- a/src/views/admin/instance/index.vue
+++ b/src/views/admin/instance/index.vue
@@ -6,8 +6,8 @@
         <div class="header-left">
           <span class="page-title">容器实例</span>
           <span class="warning-tip">
-            <exclamation-circle-outlined class="warning-icon" />
-            实例连续关机15天会释放实例，实例释放会导致数据清空且不可恢复，释放前实例数据仍在。
+            <!-- <exclamation-circle-outlined class="warning-icon" /> -->
+            <!-- 实例连续关机15天会释放实例，实例释放会导致数据清空且不可恢复，释放前实例数据仍在。 -->
           </span>
         </div>
       </div>
@@ -23,10 +23,8 @@
         <div class="header-filter">
           <a-select v-model:value="filterStatus" placeholder="筛选状态" style="width: 160px;" size="large"
             @change="handleSearch">
-            <a-select-option value="all">全部状态</a-select-option>
-            <a-select-option value="running">运行中</a-select-option>
-            <a-select-option value="stopped">已停止</a-select-option>
-            <a-select-option value="error">异常</a-select-option>
+            <a-select-option value="">全部状态</a-select-option>
+            <a-select-option v-for="[key, config] in instanceStatus" :value="key">{{ config.text }}</a-select-option>
           </a-select>
           <a-input-search v-model:value="searchKeyword" placeholder="搜索实例名称/ID" style="width: 240px; margin-left: 12px;"
             size="large" @search="handleSearch" />
@@ -41,9 +39,8 @@
         <!-- 状态列 -->
         <template #bodyCell="{ column, record }">
           <template v-if="column.key === 'status'">
-            <span :class="`status-${record.status}`">
-              {{ getStatusText(record.status) }}
-            </span>
+            <span :style="{ color: instanceStatus.get(record.status)?.color }">{{ instanceStatus.get(record.status)?.text
+              }}</span>
           </template>
 
           <!-- 规格详情列 -->
@@ -64,7 +61,11 @@
               {{ getHealthStatusText(record.health_status) }}
             </span>
           </template>
-
+          <template v-else-if="column.key === 'price_type'">
+            <span>
+              {{ payTypeDic.get(record.price_type) }}
+            </span>
+          </template>
           <!-- 操作列 -->
           <template v-else-if="column.key === 'actions'">
             <div class="action-buttons">
@@ -147,14 +148,10 @@
           <p style="color: #666;">• 实例配置和网络设置保持不变</p>
         </div>
       </div>
-      <template #okText>
-        <span style="color: #ff4d4f;">确认重置</span>
-      </template>
     </a-modal>
 
     <!-- 释放确认模态框 -->
-    <a-modal v-model:open="releaseModalVisible" title="确认释放" @ok="confirmRelease" @cancel="releaseModalVisible = false"
-      :ok-button-props="{ danger: true }">
+    <a-modal v-model:open="releaseModalVisible" title="确认释放" @ok="confirmRelease" @cancel="releaseModalVisible = false" >
       <div class="modal-content">
         <exclamation-circle-outlined class="warning-icon"
           style="color: #ff4d4f; font-size: 24px; margin-right: 12px;" />
@@ -173,15 +170,17 @@
 <script lang="ts" setup>
 import { ref, onMounted, computed } from 'vue'
 import { useRouter } from 'vue-router'
-import {ExclamationCircleOutlined,ReloadOutlined,EyeOutlined,DownOutlined,RedoOutlined,DeleteOutlined} from '@ant-design/icons-vue'
+import { ExclamationCircleOutlined, ReloadOutlined, EyeOutlined, DownOutlined, RedoOutlined, DeleteOutlined } from '@ant-design/icons-vue'
 import type { TableColumnType } from 'ant-design-vue'
 import { message } from 'ant-design-vue'
 import { hostCaseList } from '@/apis/admin'
+import { releaseCase, reStartCase } from '@/apis/home'
 import { get } from 'http'
+import { payTypeDic, instanceStatus } from '@/utils/dict'
 const router = useRouter()
 
 // 状态管理
-const filterStatus = ref('all')
+const filterStatus = ref('')
 const searchKeyword = ref('')
 const loading = ref(false)
 const specModalVisible = ref(false)
@@ -217,7 +216,6 @@ const columns = ref<TableColumnType[]>([
   { title: '名称', dataIndex: 'name', key: 'name', width: 180 },
   { title: '状态', dataIndex: 'status', key: 'status', width: 100 },
   { title: '规格详情', dataIndex: 'spec', key: 'spec', width: 200 },
-  { title: '本地磁盘', dataIndex: 'system_disk', key: 'system_disk', width: 120 },
   { title: '健康状态', dataIndex: 'health_status', key: 'health_status', width: 120 },
   { title: '付费方式', dataIndex: 'price_type', key: 'price_type', width: 120 },
   { title: '释放时间', dataIndex: 'release_at', key: 'release_at', width: 120 },
@@ -232,7 +230,9 @@ const getDataList = async () => {
     loading.value = true
     const params = {
       page_num: paginationState.value.current,
-      page_size: paginationState.value.pageSize
+      page_size: paginationState.value.pageSize,
+      status: filterStatus.value,
+      name: searchKeyword.value
     }
     const res = await hostCaseList(params)
     mockData.value = res.data
@@ -247,23 +247,11 @@ const getDataList = async () => {
 getDataList()
 
 
-// 状态文本映射
-const getStatusText = (status: string) => {
-  const map: Record<string, any> = {
-    "RUNNING": '运行中',
-    "STOPPED": '已停止',
-    "CREATING": '创建中',
-    "RESTARTING": '重启中',
-  }
-  return map[status] || status
-}
-
 // 健康状态文本映射
 const getHealthStatusText = (status: string) => {
   const map: Record<string, string> = {
-    healthy: '健康',
-    warning: '警告',
-    error: '异常'
+    Normal: '正常',
+    Abnormal: '异常'
   }
   return map[status] || status
 }
@@ -325,32 +313,32 @@ const handleMenuClick = (key: string, record: any) => {
 }
 
 // 确认重置
-const confirmReset = () => {
+const confirmReset = async () => {
   if (!currentInstance.value) return
-
-  message.loading({ content: '正在重置实例...', key: 'reset', duration: 0 })
-  setTimeout(() => {
-    // 模拟重置操作
-    currentInstance.value.health_status = 'healthy'
+  try {
+    const res = await reStartCase(currentInstance.value.id)
     message.success({ content: '实例重置成功', key: 'reset' })
     resetModalVisible.value = false
-  }, 2000)
+    getDataList()
+  } catch (error: any) {
+    message.error(error)
+    resetModalVisible.value = false
+  }
+
 }
 
 // 确认释放
-const confirmRelease = () => {
+const confirmRelease = async () => {
   if (!currentInstance.value) return
-
-  message.loading({ content: '正在释放实例...', key: 'release', duration: 0 })
-  setTimeout(() => {
-    // 从数据中移除
-    const index = mockData.value.findIndex(item => item.id === currentInstance.value.id)
-    if (index !== -1) {
-      mockData.value.splice(index, 1)
-    }
+  try {
+    const res = await releaseCase(currentInstance.value.id)
     message.success({ content: '实例释放成功', key: 'release' })
     releaseModalVisible.value = false
-  }, 2000)
+        getDataList()
+  } catch (error: any) {
+    message.error(error)
+    releaseModalVisible.value = false
+  }
 }
 
 // 批量续费
@@ -366,6 +354,7 @@ const refreshData = () => {
 // 搜索
 const handleSearch = () => {
   paginationState.value.current = 1
+  getDataList()
 }
 
 // 分页变化
@@ -379,7 +368,7 @@ const onTableChange = (pag: any) => {
 
 // 新建实例
 const handleRent = () => {
-  router.push('/layout/admin/instanceCreate')
+  router.push('/layout/market')
 }
 
 onMounted(() => {
@@ -572,7 +561,7 @@ onMounted(() => {
 }
 
 // 健康状态样式
-.health-healthy {
+.health-Normal {
   color: #52c41a;
   background: #f6ffed;
   padding: 4px 8px;
@@ -581,16 +570,16 @@ onMounted(() => {
   display: inline-block;
 }
 
-.health-warning {
-  color: #faad14;
-  background: #fffbe6;
-  padding: 4px 8px;
-  border-radius: 4px;
-  font-size: 12px;
-  display: inline-block;
-}
+// .health-Abnormal {
+//   color: #faad14;
+//   background: #fffbe6;
+//   padding: 4px 8px;
+//   border-radius: 4px;
+//   font-size: 12px;
+//   display: inline-block;
+// }
 
-.health-error {
+.health-Abnormal {
   color: #ff4d4f;
   background: #fff2f0;
   padding: 4px 8px;
diff --git a/src/views/admin/instanceCreate/index.vue b/src/views/admin/instanceCreate/index.vue
index a4974ed..3270859 100644
--- a/src/views/admin/instanceCreate/index.vue
+++ b/src/views/admin/instanceCreate/index.vue
@@ -15,12 +15,13 @@
         <a-card class="card" title="计费方式">
             <div class="billing-content">
                 <a-radio-group v-model:value="billingType" button-style="solid" @change="handleBillingTypeChange">
-                    <a-radio-button value="payg">按量计费</a-radio-button>
-                    <a-radio-button value="daily">包日</a-radio-button>
-                    <a-radio-button value="weekly">包周</a-radio-button>
-                    <a-radio-button value="monthly">包月</a-radio-button>
+                    <a-radio-button value="PayOnTime">按量计费</a-radio-button>
+                    <a-radio-button value="PayOnDay">包日</a-radio-button>
+                    <a-radio-button value="PayOnWeek">包周</a-radio-button>
+                    <a-radio-button value="PayOnMonth">包月</a-radio-button>
+                    <a-radio-button value="PayOnYear">包年</a-radio-button>
                 </a-radio-group>
-                <a href="/docs/price/" target="_blank" class="billing-link">计费规则</a>
+                <!-- <a href="/docs/price/" target="_blank" class="billing-link">计费规则</a> -->
             </div>
             <div class="note">
                 创建完主机后仍然可以转换计费方式。如选择按量计费，价格发生变动以实例开机时的价格为准
@@ -38,7 +39,7 @@
                             <a-radio-button v-for="region in regions" :key="region.value" :value="region.value">
                                 {{ region.label }}
                                 <a-tag v-if="region.tag" :color="region.tag.color" class="region-tag">{{ region.tag.text
-                                }}</a-tag>
+                                    }}</a-tag>
                             </a-radio-button>
                         </a-radio-group>
                     </div>
@@ -249,7 +250,7 @@
                         <span class="original-total-price">￥{{ originalTotalPrice }}/{{ billingUnit }}</span>
                     </div>
                 </div>
-                
+
             </div>
             <div class="action-buttons">
                 <a-button size="large" @click="handleCancel" class="cancel-btn">取消</a-button>
@@ -320,7 +321,7 @@ interface Coupon {
 }
 
 // 响应式数据
-const billingType = ref('weekly')
+const billingType = ref('PayOnTime')
 const selectedRegion = ref('beijingDC2')
 const selectedZone = ref('')
 const selectedGpuModels = ref<string[]>(['RTX 5090'])
@@ -1041,173 +1042,174 @@ const showPriceBreakdown = computed(() => {
 }
 
 .footer-actions {
-  position: sticky;
-  bottom: 0;
-  background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
-  padding: 20px 32px;
-  border-top: 1px solid #e8e8e8;
-  box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.08);
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  margin: 0 -24px -24px;
-  backdrop-filter: blur(8px);
-  z-index: 100;
+    position: sticky;
+    bottom: 0;
+    background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
+    padding: 20px 32px;
+    border-top: 1px solid #e8e8e8;
+    box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.08);
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin: 0 -24px -24px;
+    backdrop-filter: blur(8px);
+    z-index: 100;
 }
 
 .price-summary {
-  display: flex;
-  align-items: flex-start;
-  gap: 32px;
+    display: flex;
+    align-items: flex-start;
+    gap: 32px;
 }
 
 .price-main {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
 }
 
 .total-label {
-  font-size: 14px;
-  color: #666;
-  font-weight: 500;
+    font-size: 14px;
+    color: #666;
+    font-weight: 500;
 }
 
 .price-display {
-  display: flex;
-  align-items: baseline;
-  gap: 4px;
+    display: flex;
+    align-items: baseline;
+    gap: 4px;
 }
 
 .total-price {
-  font-size: 32px;
-  font-weight: 700;
-  color: #f7412d;
-  line-height: 1;
+    font-size: 32px;
+    font-weight: 700;
+    color: #f7412d;
+    line-height: 1;
 }
 
 .price-unit {
-  font-size: 14px;
-  color: #999;
-  font-weight: 500;
+    font-size: 14px;
+    color: #999;
+    font-weight: 500;
 }
 
 .original-price-container {
-  margin-top: 2px;
+    margin-top: 2px;
 }
 
 .original-total-price {
-  text-decoration: line-through;
-  color: #999;
-  font-size: 14px;
-  font-weight: 500;
+    text-decoration: line-through;
+    color: #999;
+    font-size: 14px;
+    font-weight: 500;
 }
 
 .price-breakdown {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  padding: 12px 16px;
-  background: #f8f9fa;
-  border-radius: 8px;
-  border: 1px solid #e9ecef;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    padding: 12px 16px;
+    background: #f8f9fa;
+    border-radius: 8px;
+    border: 1px solid #e9ecef;
 }
 
 .breakdown-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 16px;
-  font-size: 12px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 16px;
+    font-size: 12px;
 }
 
 .breakdown-label {
-  color: #666;
-  white-space: nowrap;
+    color: #666;
+    white-space: nowrap;
 }
 
 .breakdown-value {
-  color: #333;
-  font-weight: 500;
-  white-space: nowrap;
+    color: #333;
+    font-weight: 500;
+    white-space: nowrap;
 }
 
 .breakdown-value.discount {
-  color: #52c41a;
+    color: #52c41a;
 }
 
 .action-buttons {
-  display: flex;
-  gap: 16px;
-  align-items: center;
+    display: flex;
+    gap: 16px;
+    align-items: center;
 }
 
 .cancel-btn {
-  padding: 0 24px;
-  height: 48px;
-  font-weight: 500;
-  border: 1px solid #d9d9d9;
-  border-radius: 8px;
+    padding: 0 24px;
+    height: 48px;
+    font-weight: 500;
+    border: 1px solid #d9d9d9;
+    border-radius: 8px;
 }
 
 .cancel-btn:hover {
-  border-color: #1890ff;
-  color: #1890ff;
+    border-color: #1890ff;
+    color: #1890ff;
 }
 
 .create-btn {
-  padding: 0 32px;
-  height: 48px;
-  font-weight: 600;
-  border-radius: 8px;
-  background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
-  border: none;
-  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.3);
-  transition: all 0.3s ease;
+    padding: 0 32px;
+    height: 48px;
+    font-weight: 600;
+    border-radius: 8px;
+    background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
+    border: none;
+    box-shadow: 0 2px 8px rgba(24, 144, 255, 0.3);
+    transition: all 0.3s ease;
 }
 
 .create-btn:hover {
-  transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.4);
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(24, 144, 255, 0.4);
 }
 
 .create-btn:disabled {
-  background: #f5f5f5;
-  color: #d9d9d9;
-  transform: none;
-  box-shadow: none;
-  cursor: not-allowed;
+    background: #f5f5f5;
+    color: #d9d9d9;
+    transform: none;
+    box-shadow: none;
+    cursor: not-allowed;
 }
 
 /* 响应式设计 */
 @media (max-width: 768px) {
-  .footer-actions {
-    flex-direction: column;
-    gap: 20px;
-    padding: 16px 20px;
-  }
-  
-  .price-summary {
-    width: 100%;
-    justify-content: space-between;
-  }
-  
-  .price-breakdown {
-    display: none; /* 移动端隐藏价格明细 */
-  }
-  
-  .action-buttons {
-    width: 100%;
-  }
-  
-  .cancel-btn,
-  .create-btn {
-    flex: 1;
-  }
-  
-  .total-price {
-    font-size: 28px;
-  }
+    .footer-actions {
+        flex-direction: column;
+        gap: 20px;
+        padding: 16px 20px;
+    }
+
+    .price-summary {
+        width: 100%;
+        justify-content: space-between;
+    }
+
+    .price-breakdown {
+        display: none;
+        /* 移动端隐藏价格明细 */
+    }
+
+    .action-buttons {
+        width: 100%;
+    }
+
+    .cancel-btn,
+    .create-btn {
+        flex: 1;
+    }
+
+    .total-price {
+        font-size: 28px;
+    }
 }
 
 .price-unit {
diff --git a/src/views/instanceCreate/index.vue b/src/views/instanceCreate/index.vue
index bb2ac29..7f4a0c0 100644
--- a/src/views/instanceCreate/index.vue
+++ b/src/views/instanceCreate/index.vue
@@ -1,101 +1,114 @@
 <template>
     <div class="container">
-        <div class="instance-create-container">
-            <!-- 服务器选择 -->
-            <a-card class="card select-server" title="服务器选择">
-                <div class="list-filter">
-                    <div class="filter-item">
-                        <span class="filter-label">实例名称:</span>
-                        <div class="filter-content">
-                           <a-input v-model:value="instanceName"></a-input>
+        <a-spin :spinning="spinning">
+            <div class="instance-create-container">
+                <!-- 服务器选择 -->
+                <a-card class="card select-server" title="服务器选择">
+                    <div class="list-filter">
+                        <div class="filter-item">
+                            <span class="filter-label">实例名称:</span>
+                            <div class="filter-content">
+                                <a-input v-model:value="instanceName"></a-input>
+                            </div>
                         </div>
-                    </div>
-                    <div class="filter-item">
-                        <span class="filter-label">计费方式<span style="color: #ff4d4f;margin: 0 2px">*</span>:</span>
-                        <div class="filter-content">
-                            <a-radio-group v-model:value="billingType" button-style="solid">
-                                <a-radio-button value="PayOnTime">按量计费</a-radio-button>
-                                <a-radio-button value="PayOnDay">包日</a-radio-button>
-                                <a-radio-button value="PayOnWeek">包周</a-radio-button>
-                                <a-radio-button value="PayOnMonth">包月</a-radio-button>
-                                <a-radio-button value="PayOnYear">包年</a-radio-button>
-                            </a-radio-group>
-                        </div>
-                    </div>
-
-                    <!-- GPU数量 -->
-                    <div class="filter-item">
-                        <span class="filter-label">GPU数量<span style="color: #ff4d4f;margin: 0 2px">*</span><span>:</span></span>
-                        <div class="filter-content">
-                            <a-radio-group v-model:value="gpuCount" button-style="solid">
-                                <a-radio-button v-for="count in gpuCountOptions" :key="count" :value="count">
-                                    {{ count }}
-                                </a-radio-button>
-                            </a-radio-group>
-                        </div>
-                    </div>
-
-                    <div class="filter-item">
-                        <span class="filter-label">镜像<span style="color: #ff4d4f;margin: 0 2px;">*</span>:</span>
-                        <a-form layout="vertical">
-                            <a-form-item class="image-type">
-                                <a-radio-group v-model:value="imageType" button-style="solid"
-                                    @change="getServiceImages()">
-                                    <a-radio-button value="SYSTEM">基础镜像</a-radio-button>
-                                    <a-radio-button value="USER">我的镜像</a-radio-button>
+                        <div class="filter-item">
+                            <span class="filter-label">计费方式<span style="color: #ff4d4f;margin: 0 2px">*</span>:</span>
+                            <div class="filter-content">
+                                <a-radio-group v-model:value="billingType" button-style="solid">
+                                    <a-radio-button value="PayOnTime">按量计费</a-radio-button>
+                                    <a-radio-button value="PayOnDay">包日</a-radio-button>
+                                    <a-radio-button value="PayOnWeek">包周</a-radio-button>
+                                    <a-radio-button value="PayOnMonth">包月</a-radio-button>
+                                    <a-radio-button value="PayOnYear">包年</a-radio-button>
                                 </a-radio-group>
+                            </div>
+                        </div>
 
-                            </a-form-item>
+                        <!-- GPU数量 -->
+                        <div class="filter-item">
+                            <span class="filter-label">GPU数量<span
+                                    style="color: #ff4d4f;margin: 0 2px">*</span><span>:</span></span>
+                            <div class="filter-content">
+                                <a-radio-group v-model:value="gpuCount" button-style="solid">
+                                    <a-radio-button v-for="count in gpuCountOptions" :key="count" :value="count">
+                                        {{ count }}
+                                    </a-radio-button>
+                                </a-radio-group>
+                            </div>
+                        </div>
 
-                            <a-form-item>
-                                <div class="basic-image" style="margin-top: 15px;">
-                                    <a-select ref="select" v-model:value="selectedImage" style="width: 300px"
-                                        @change="handleChange">
-                                        <a-select-option v-for="item in imageOptions" :value="item.id">{{ item.label
+                        <div class="filter-item">
+                            <span class="filter-label">镜像<span style="color: #ff4d4f;margin: 0 2px;">*</span>:</span>
+                            <a-form layout="vertical">
+                                <a-form-item class="image-type">
+                                    <a-radio-group v-model:value="imageType" button-style="solid"
+                                        @change="getServiceImages()">
+                                        <a-radio-button value="SYSTEM">基础镜像</a-radio-button>
+                                        <a-radio-button value="USER">我的镜像</a-radio-button>
+                                    </a-radio-group>
+
+                                </a-form-item>
+
+                                <a-form-item>
+                                    <div class="basic-image" style="margin-top: 15px;">
+                                        <a-select ref="select" v-model:value="selectedImage" style="width: 300px"
+                                            @change="handleChange">
+                                            <a-select-option v-for="item in imageOptions" :value="item.id">{{ item.label
                                             }}</a-select-option>
-                                    </a-select>
-                                </div>
-                            </a-form-item>
-                        </a-form>
+                                        </a-select>
+                                    </div>
+                                </a-form-item>
+                            </a-form>
+                        </div>
                     </div>
-                </div>
 
-                <!-- 主机表格 -->
-                <div class="machine-table">
-                    <a-descriptions layout="vertical" bordered :column="8">
-                        
-                        <a-descriptions-item label="主机ID">{{ serviceInfo.id }}</a-descriptions-item>
-                        <a-descriptions-item label="算力型号/显存">{{ serviceInfo.gpuType + '/' + serviceInfo.vram + 'GB'
-                        }}</a-descriptions-item>
-                        <a-descriptions-item label="空闲GPU">{{ serviceInfo.gpuAvailableNum }}</a-descriptions-item>
-                        <a-descriptions-item label="每GPU分配">
-                            <span>{{ 'CPU:' + serviceInfo.cpuNum + '核' }}</span><br>
-                            <span>{{ '内存:' + serviceInfo.memory + "GB" }}</span>
-                        </a-descriptions-item>
-                        <a-descriptions-item label="CPU型号">{{ serviceInfo.cpuType }}</a-descriptions-item>
-                        <a-descriptions-item label="硬盘">
-                            <span>{{ '数据盘:' + serviceInfo.dataDisk + 'GB' }}</span><br>
-                            <span>{{ '系统盘:' + serviceInfo.systemDisk + "GB" }}</span>
-                        </a-descriptions-item>
-                        <a-descriptions-item label="驱动/CUDA">{{ serviceInfo.gpuDriver + '/' + serviceInfo.cudaVersion
-                        }}</a-descriptions-item>
-                        <a-descriptions-item label="消耗算力点(单卡)">{{ serviceInfo.price }}</a-descriptions-item>
-                    </a-descriptions>
-                </div>
-            </a-card>
-            <!-- 优惠券 -->
-            <a-card class="card coupon-selection">
-                <a-checkbox v-model:checked="checked">是否使用算力券<span style="color:#f34646;">{{ ' ( 可用点数：'+couponTotal+' 点 )' }}</span></a-checkbox>
-            </a-card>
-            <!-- 底部操作栏 -->
-        </div>
+                    <!-- 主机表格 -->
+                    <div class="machine-table">
+                        <a-descriptions layout="vertical" bordered :column="8">
+
+                            <a-descriptions-item label="主机ID">{{ serviceInfo.id }}</a-descriptions-item>
+                            <a-descriptions-item label="算力型号/显存">{{ serviceInfo.gpuType + '/' + serviceInfo.vram + 'GB'
+                            }}</a-descriptions-item>
+                            <a-descriptions-item label="空闲GPU">{{ serviceInfo.gpuAvailableNum }}</a-descriptions-item>
+                            <a-descriptions-item label="每GPU分配">
+                                <span>{{ 'CPU:' + serviceInfo.cpuNum + '核' }}</span><br>
+                                <span>{{ '内存:' + serviceInfo.memory + "GB" }}</span>
+                            </a-descriptions-item>
+                            <a-descriptions-item label="CPU型号">{{ serviceInfo.cpuType }}</a-descriptions-item>
+                            <a-descriptions-item label="硬盘">
+                                <span>{{ '数据盘:' + serviceInfo.dataDisk + 'GB' }}</span><br>
+                                <span>{{ '系统盘:' + serviceInfo.systemDisk + "GB" }}</span>
+                            </a-descriptions-item>
+                            <a-descriptions-item label="驱动/CUDA">{{ serviceInfo.gpuDriver + '/' +
+                                serviceInfo.cudaVersion
+                            }}</a-descriptions-item>
+                            <a-descriptions-item label="消耗算力点(单卡)">{{ serviceInfo.price }}</a-descriptions-item>
+                        </a-descriptions>
+                    </div>
+                </a-card>
+                <!-- 优惠券 -->
+                <a-card class="card coupon-selection">
+                    <div style="display: flex;align-items: center;">
+                        <div>算力券：</div>
+                        <a-select ref="select" v-model:value="voucherId" style="width:300px" @change="handleChange">
+                            <a-select-option :value="''">不使用算力券</a-select-option>
+                            <a-select-option v-for="value in voucherList" :value="value.id">{{ value.name + ' - '+'￥'+value.amount }}</a-select-option>
+                        </a-select>
+                    </div>
+
+                </a-card>
+                <!-- 底部操作栏 -->
+            </div>
+        </a-spin>
         <div class="footer-actions">
 
             <div class="price-summary">
-                <div>消耗算力点：{{totalMoney }}</div>
+                <div>消耗算力点：{{ totalMoney }}</div>
                 <!-- 账户余额信息 -->
                 <div class="account-info" style="display: flex;align-items: center;">
-                    <div class="balance-label" style="margin-right: 10px;">可用算力点：{{ userInfo.computingPowerPoint+' 点' }}</div>
+                    <div class="balance-label" style="margin-right: 10px;">可用算力点：{{ userInfo.computingPowerPoint + ' 点'
+                        }}
+                    </div>
                     <!-- <div v-if="isShow" style="color: #ff4d4f;font-size: 12px;cursor: pointer;"
                         @click="router.push('/layout/admin/balance')">
                         算力点不足去充值</div> -->
@@ -115,12 +128,12 @@
                         取消
                     </a-button>
                     <a-button type="primary" size="large" @click="handleCreate" :loading="creating"
-                        :disabled="selectedImage==''" class="create-btn">
+                        :disabled="selectedImage == ''" class="create-btn">
                         <template #icon>
                             <PlusOutlined />
                         </template>
                         立即创建
-                       
+
                     </a-button>
                 </div>
             </div>
@@ -132,10 +145,10 @@
 import { ref, computed, reactive, watch, onMounted } from 'vue'
 import { message } from 'ant-design-vue'
 import type { TableColumnsType } from 'ant-design-vue'
-import { useRoute,useRouter } from 'vue-router'
-import { getImages } from "@/apis/home"
-import { getMyCouponTotal, getTotalCost, getHostInfo,createHost } from "@/apis/home"
-const router=useRouter()
+import { useRoute, useRouter } from 'vue-router'
+import { getImages, getRecommendList } from "@/apis/home"
+import { getMyCouponTotal, getTotalCost, getHostInfo, createHost } from "@/apis/home"
+const router = useRouter()
 interface GpuModelOption {
     value: string
     label: string
@@ -143,10 +156,11 @@ interface GpuModelOption {
     total: number
     regions: string[]
 }
-
-const instanceName=ref('')
+const voucherList = ref<any[]>([])
+const instanceName = ref('')
 const checked = ref(false)
 const totalMoney = ref(0)
+const voucherId = ref('')
 // 响应式数据
 const billingType = ref('PayOnTime')
 const gpuCount = ref(5)
@@ -156,25 +170,33 @@ const selectedImage = ref<string>("")
 const creating = ref(false)
 const serviceInfo = ref<any>({})
 const userInfo = ref<any>({})
-const HostId=ref(0)
-const computingPowerPoint=ref(0)
-const couponTotal=ref(0)
-onMounted(() => {
+const HostId = ref(0)
+const computingPowerPoint = ref(0)
+const couponTotal = ref(0)
+const spinning = ref(false)
+onMounted(async () => {
+    spinning.value = true
     const userInfoStr = localStorage.getItem("userInfo")
     if (userInfoStr) {
         userInfo.value = JSON.parse(userInfoStr)
     }
     serviceInfo.value = useRoute().query
-    HostId.value=serviceInfo.value.id
-    console.log('1111',serviceInfo.value)
+    HostId.value = serviceInfo.value.id
+    instanceName.value = serviceInfo.value.name
     gpuCountOptions.value = Array.from({ length: Number(serviceInfo.value.gpuAvailableNum) }, (_, i) => i + 1)
     gpuCount.value = gpuCountOptions.value[0]
-    getServiceImages()
-    getCoupon()
-    fetchTotalCost()
+    await getServiceImages()
+    await getCoupon()
+    await fetchTotalCost()
+    await getVoucherList()
+    spinning.value = false
 })
+async function getVoucherList() {
+    const res = await getRecommendList()
+    voucherList.value = res.data
+}
 async function getCoupon() {
-    const res:any=await getMyCouponTotal()
+    const res: any = await getMyCouponTotal()
     couponTotal.value = res;
 }
 // 封装请求
@@ -185,7 +207,7 @@ async function fetchTotalCost() {
         host_id: HostId.value
     })
     totalMoney.value = res.amount
-    computingPowerPoint.value=res.computingPowerPoint
+    computingPowerPoint.value = res.computingPowerPoint
 }
 
 // 监听依赖项变化
@@ -222,23 +244,23 @@ const handleChange = (e: any) => {
     console.log(e)
 }
 
-const isShow=computed(()=>{
-    return userInfo.value.balance<computingPowerPoint.value
+const isShow = computed(() => {
+    return userInfo.value.balance < computingPowerPoint.value
 })
 const handleCreate = async () => {
     creating.value = true
     try {
-        const params={
-            host_id:HostId.value,
-            billingMethod:billingType.value,
-            gpuNum:gpuCount.value,
-            case_name:instanceName.value,
-            image_id:selectedImage.value,
-            is_use_voucher:checked.value
+        const params = {
+            host_id: HostId.value,
+            billingMethod: billingType.value,
+            gpuNum: gpuCount.value,
+            case_name: instanceName.value,
+            image_id: selectedImage.value,
+            voucher_id: voucherId.value
         }
-        const res=await createHost(params)
+        const res = await createHost(params)
         message.success('实例创建成功！')
-        creating.value=false
+        creating.value = false
     } catch (error) {
         message.error('创建失败，请重试')
     } finally {
diff --git a/src/views/market/index.vue b/src/views/market/index.vue
index 7a290c2..3ee4a64 100644
--- a/src/views/market/index.vue
+++ b/src/views/market/index.vue
@@ -1,118 +1,121 @@
 <template>
   <div class="instance-create-container">
-    <div class="header">
-      <h1>算力中心</h1>
-      <h2>聚焦高效算力服务，为数字产业、智能应用提供强支撑</h2>
-    </div>
-    <div class="instance-create-body">
-      <!-- 筛选区域（保持不变） -->
-      <a-card class="card select-server">
-        <div class="list-filter">
-          <div class="filter-item"> <span class="filter-label">计费方式:</span>
-            <div class="filter-content"> <a-radio-group v-model:value="billingType" button-style="solid"
-                @change="getHostList"> <a-radio-button v-for="type in billingTypeOptions" :key="type.value"
-                  :value="type.value"> {{ type.label }} </a-radio-button> </a-radio-group> </div>
-          </div> <!-- 选择地区 -->
-          <div class="filter-item"> <span class="filter-label">选择地区:</span>
-            <div class="filter-content"> <a-radio-group v-model:value="selectedRegion" button-style="solid"
-                @change="getHostList">
-                <a-radio-button v-for="region in areaList" :key="region.center_id" :value="region.center_id"> {{
-                  region.center_name }}
-                </a-radio-button> </a-radio-group>
+    <a-spin :spinning="spinning">
+      <div class="header">
+        <h1>算力中心</h1>
+        <h2>聚焦高效算力服务，为数字产业、智能应用提供强支撑</h2>
+      </div>
+      <div class="instance-create-body">
+        <!-- 筛选区域（保持不变） -->
+        <a-card class="card select-server">
+          <div class="list-filter">
+            <div class="filter-item"> <span class="filter-label">计费方式:</span>
+              <div class="filter-content"> <a-radio-group v-model:value="billingType" button-style="solid"
+                  @change="getHostList"> <a-radio-button v-for="type in billingTypeOptions" :key="type.value"
+                    :value="type.value"> {{ type.label }} </a-radio-button> </a-radio-group> </div>
+            </div> <!-- 选择地区 -->
+            <div class="filter-item"> <span class="filter-label">选择地区:</span>
+              <div class="filter-content"> <a-radio-group v-model:value="selectedRegion" button-style="solid"
+                  @change="getHostList">
+                  <a-radio-button v-for="region in areaList" :key="region.center_id" :value="region.center_id"> {{
+                    region.center_name }}
+                  </a-radio-button> </a-radio-group>
+              </div>
             </div>
-          </div>
-          <div class="filter-item"> <span class="filter-label">GPU型号:</span>
-            <div class="filter-content">
-              <a-radio-group v-model:value="selectedGpuModels" button-style="solid" @change="getHostList">
-                <a-radio-button v-for="gpuItem in gpuList" :key="gpuItem.gpuType" :value="gpuItem.gpuType">
-                  {{ gpuItem.gpuType }}
-                  <span v-if="gpuItem.gpuType !== '全部'">{{ "(" + gpuItem.gpuAvailableNum + "/" + gpuItem.gpuNum + ")"
+            <div class="filter-item"> <span class="filter-label">GPU型号:</span>
+              <div class="filter-content">
+                <a-radio-group v-model:value="selectedGpuModels" button-style="solid" @change="getHostList">
+                  <a-radio-button v-for="gpuItem in gpuList" :key="gpuItem.gpuType" :value="gpuItem.gpuType">
+                    {{ gpuItem.gpuType }}
+                    <span v-if="gpuItem.gpuType !== '全部'">{{ "(" + gpuItem.gpuAvailableNum + "/" + gpuItem.gpuNum + ")"
                     }}</span>
-                </a-radio-button> </a-radio-group>
+                  </a-radio-button> </a-radio-group>
+              </div>
+            </div> <!-- GPU数量 -->
+            <div class="filter-item"> <span class="filter-label">GPU数量:</span>
+              <div class="filter-content"> <a-select :size="'large'" default-value="1" style="width: 200px"
+                  @change="handleGpuCountChange"> <a-select-option v-for="count in gpuCountOptions" :key="count"
+                    :value="count"> {{ count }} </a-select-option> </a-select> </div>
             </div>
-          </div> <!-- GPU数量 -->
-          <div class="filter-item"> <span class="filter-label">GPU数量:</span>
-            <div class="filter-content"> <a-select :size="'large'" default-value="1" style="width: 200px"
-                @change="handleGpuCountChange"> <a-select-option v-for="count in gpuCountOptions" :key="count"
-                  :value="count"> {{ count }} </a-select-option> </a-select> </div>
           </div>
-        </div>
-      </a-card>
+        </a-card>
 
-      <!-- 机器列表 -->
-      <a-card class="card machine-list">
-        <template v-if="allMachineList.length > 0">
-          <div class="image-card-container" style="min-height:300px;">
+        <!-- 机器列表 -->
+        <a-card class="card machine-list">
+          <template v-if="allMachineList.length > 0">
+            <a-spin :spinning="tableLoading">
+              <div class="image-card-container" style="min-height:300px;">
+                <div v-for="record in allMachineList" :key="record.id" class="image-card"
+                  :class="{ selected: selectedMachineId === record.id }" @click="handleSelectMachine(record.id)">
+                  <!-- 顶部 -->
+                  <div class="image-card-header">
+                    <div class="gpu-title">
+                      {{ record.name }}
+                    </div>
+                    <div class="gpu-availability">
+                      空闲 / 总量
+                      <strong style="font-size: 18px;">{{ record.gpuAvailableNum }}</strong> / {{ record.gpuNum }}
+                    </div>
+                  </div>
 
-            <div v-for="record in allMachineList" :key="record.id" class="image-card"
-              :class="{ selected: selectedMachineId === record.id }" @click="handleSelectMachine(record.id)">
-              <!-- 顶部 -->
-              <div class="image-card-header">
-                <div class="gpu-title">
-                  {{ record.name }}
-                </div>
-                <div class="gpu-availability">
-                  空闲 / 总量
-                  <strong style="font-size: 18px;">{{ record.gpuAvailableNum }}</strong> / {{ record.gpuNum }}
+                  <!-- 中部信息 -->
+                  <div class="image-card-info">
+                    <div class="info-item">
+                      <span class="info-item-name">CPU</span>
+                      <span class="info-item-account">{{ record.cpuNum }} 核</span>
+                    </div>
+                    <div class="info-item">
+                      <span class="info-item-name">内存</span>
+                      <span class="info-item-account">{{ record.memory }} GB</span>
+                    </div>
+                    <div class="info-item">
+                      <span class="info-item-name">显存</span>
+                      <span class="info-item-account">{{ record.vram }}</span>
+                    </div>
+                    <div class="info-item">
+                      <span class="info-item-name">系统盘</span>
+                      <span class="info-item-account">30 GB</span>
+                    </div>
+                  </div>
+
+                  <!-- 底部价格 -->
+                  <div class="image-card-footer">
+                    <div class="price">
+                      <span class="price-num">{{ record.price }}</span>
+                      <span class="price-unit">元/卡/小时</span>
+                    </div>
+                    <a-button type="primary" class="buy-btn" :disabled="record.freeGpu === 0"
+                      @click.stop="handleRentMachine(record)">
+                      立即创建
+                    </a-button>
+                  </div>
                 </div>
+
               </div>
-
-              <!-- 中部信息 -->
-              <div class="image-card-info">
-                <div class="info-item">
-                  <span class="info-item-name">CPU</span>
-                  <span class="info-item-account">{{ record.cpuNum }} 核</span>
-                </div>
-                <div class="info-item">
-                  <span class="info-item-name">内存</span>
-                  <span class="info-item-account">{{ record.memory }} GB</span>
-                </div>
-                <div class="info-item">
-                  <span class="info-item-name">显存</span>
-                  <span class="info-item-account">{{ record.vram }}</span>
-                </div>
-                <div class="info-item">
-                  <span class="info-item-name">系统盘</span>
-                  <span class="info-item-account">30 GB</span>
-                </div>
-              </div>
-
-              <!-- 底部价格 -->
-              <div class="image-card-footer">
-                <div class="price">
-                  <span class="price-num">{{ record.price }}</span>
-                  <span class="price-unit">元/卡/小时</span>
-                </div>
-                <a-button type="primary" class="buy-btn" :disabled="record.freeGpu === 0"
-                  @click.stop="handleRentMachine(record)">
-                  立即购买
-                </a-button>
-              </div>
-            </div>
-
+            </a-spin>
+          </template>
+          <template v-else>
+            <a-empty />
+          </template>
+          <!-- 分页 -->
+          <div class="pagination-container">
+            <a-pagination v-model:current="currentPage" v-model:pageSize="pageSize" :total="hostTotal" show-size-changer
+              show-quick-jumper />
           </div>
-        </template>
-        <template v-else>
-          <a-empty />
-        </template>
-        <!-- 分页 -->
-            <div class="pagination-container">
-              <a-pagination v-model:current="currentPage" v-model:pageSize="pageSize" :total="hostTotal"
-                show-size-changer show-quick-jumper />
-            </div>
-      </a-card>
-    </div>
+        </a-card>
+      </div>
+    </a-spin>
   </div>
 </template>
 
 
 <script setup lang="ts">
-import { ref, computed, reactive, watch } from 'vue'
+import { ref, computed, reactive, watch, onMounted } from 'vue'
 import { hostList, getAreaListApi, getGpuListApi } from '@/apis/market'
 import { message } from 'ant-design-vue'
 import type { TableColumnsType } from 'ant-design-vue'
 import { useRouter } from 'vue-router'
-
+const spinning = ref(false)
 const router = useRouter();
 // 响应式数据
 const hostTotal = ref(0)
@@ -127,9 +130,14 @@ const tableLoading = ref(false)
 // 分页相关
 const currentPage = ref(1)
 const pageSize = ref(10)
-getHostList()
-getAreaList()
-getGpuList()
+onMounted(async () => {
+  spinning.value = true
+  await getHostList()
+  await getAreaList()
+  await getGpuList()
+  spinning.value = false
+})
+
 async function getHostList() {
   tableLoading.value = true
   try {
@@ -187,13 +195,13 @@ const handleSelectMachine = (id: string) => {
 }
 // 一卡可租
 const handleRentMachine = (record: any) => {
-  router.push({path:"/layout/create",query:record})
+  router.push({ path: "/layout/create", query: record })
 
 }
 
-const handleGpuCountChange = (e:any) => {
+const handleGpuCountChange = (e: any) => {
   // console.log(e)
-  gpuCount.value=e
+  gpuCount.value = e
   getHostList()
   selectedMachineId.value = ''
   currentPage.value = 1