From 01d3b7ee7e19e09b598886915205eb48ba69170a Mon Sep 17 00:00:00 2001
From: qiuyuan <qiuyuan@yonyou.com>
Date: Tue, 2 Dec 2025 14:10:33 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/market/index.vue | 1555 ++++++++++++++++++++++++++++++++++++
 1 file changed, 1555 insertions(+)
 create mode 100644 src/views/market/index.vue

diff --git a/src/views/market/index.vue b/src/views/market/index.vue
new file mode 100644
index 0000000..9719274
--- /dev/null
+++ b/src/views/market/index.vue
@@ -0,0 +1,1555 @@
+<template>
+  <div class="instance-create-container">
+    <!-- 警告提示 -->
+    <a-alert class="autodl-tip" message="严禁使用WebUI等算法生成违禁图片、严禁挖矿，一经发现立即封号！" type="warning" show-icon closable />
+
+    <!-- 服务器选择 -->
+    <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-radio-group v-model:value="billingType" button-style="solid" @change="handleBillingTypeChange">
+              <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="handleRegionChange">
+              <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-radio-button>
+            </a-radio-group>
+          </div>
+        </div>
+
+        <!-- 专区选择 -->
+        <div class="filter-item" v-if="showZones">
+          <span class="filter-label">选择专区:</span>
+          <div class="filter-content">
+            <a-radio-group v-model:value="selectedZone" button-style="solid" @change="handleZoneChange">
+              <a-radio-button v-for="zone in availableZones" :key="zone.value" :value="zone.value">
+                {{ zone.label }}
+              </a-radio-button>
+            </a-radio-group>
+          </div>
+        </div>
+
+        <!-- GPU型号 -->
+        <div class="filter-item">
+          <span class="filter-label">GPU型号:</span>
+          <div class="filter-content">
+            <a-checkbox-group v-model:value="selectedGpuModels" @change="handleGpuModelChange">
+              <a-checkbox value="all" :disabled="selectedGpuModels.length > 0 && selectedGpuModels[0] !== 'all'">全部</a-checkbox>
+              <a-checkbox v-for="model in availableGpuModels" :key="model.value" :value="model.value" :disabled="model.available === 0">
+                {{ model.label }}
+                <span class="note"> ({{ model.available }}/{{ model.total }})</span>
+              </a-checkbox>
+            </a-checkbox-group>
+          </div>
+        </div>
+
+        <!-- GPU数量 -->
+        <div class="filter-item">
+          <span class="filter-label">GPU数量:</span>
+          <div class="filter-content">
+            <a-radio-group v-model:value="gpuCount" button-style="solid" @change="handleGpuCountChange">
+              <a-radio-button v-for="count in gpuCountOptions" :key="count" :value="count" :disabled="isGpuCountDisabled(count)">
+                {{ count }}
+              </a-radio-button>
+            </a-radio-group>
+          </div>
+        </div>
+      </div>
+    </a-card>
+
+    <!-- 机器列表区域 -->
+    <a-card class="card machine-list" title="机器列表">
+
+      <!-- 新的卡片式布局 -->
+      <div class="machine-card-container">
+        <div 
+          v-for="record in paginatedMachineList" 
+          :key="record.id" 
+          class="machine-card"
+          :class="{ 'selected-card': selectedMachineId === record.id }"
+          @click="handleSelectMachine(record.id)"
+        >
+          <!-- 卡片头部信息 -->
+          <div class="card-header">
+            <div class="location-info">
+              <span>{{ record.region === 'beijingDC2' ? '北京B区' : record.region }}</span>
+              <span class="separator">/</span>
+              <span>{{ record.machineName }}</span>
+              <span class="id-code">
+                ｜ {{ record.id }}
+                  <span style="margin-left: 20px;">可租用至：2027-01-01</span>
+              </span>
+            </div>
+
+            <div class="gpu-spec">
+              <div class="gpu-model">{{ record.gpuModel }}</div>
+              <div class="gpu-memory">/ {{ record.gpuMemory }}</div>
+              <div class="availability">
+                空闲/总量 <span style="font-size: 18px;color: #333;">{{ record.freeGpu }}</span> / {{ record.totalGpu }}
+              </div>
+            </div>
+
+
+          </div>
+
+          <!-- 主要规格信息 -->
+          <div class="card-body">
+            
+
+            <div class="specs-grid">
+              <!-- 每GPU分配 -->
+              <div class="spec-column">
+                <div class="spec-title">每GPU分配</div>
+                <div class="spec-item">
+                  <div class="spec-label">CPU:</div>
+                  <div class="spec-value">{{ record.cpuCores }} 核, {{ record.cpuModel }}</div>
+                </div>
+                <div class="spec-item">
+                  <div class="spec-label">内存:</div>
+                  <div class="spec-value">{{ record.memory }} GB</div>
+                </div>
+              </div>
+
+              <!-- 硬盘 -->
+              <div class="spec-column">
+                <div class="spec-title">硬盘</div>
+                <div class="spec-item">
+                  <div class="spec-label">系统盘:</div>
+                  <div class="spec-value">30 GB</div>
+                </div>
+                <div class="spec-item">
+                  <div class="spec-label">数据盘:</div>
+                  <div class="spec-value">{{ record.dataDisk }} GB，可扩容 {{ record.expandableDisk }} GB</div>
+                </div>
+              </div>
+
+              <!-- 其它信息 -->
+              <div class="spec-column">
+                <div class="spec-title">其它</div>
+                <div class="spec-item">
+                  <div class="spec-label">GPU驱动:</div>
+                  <div class="spec-value">{{ record.driver }}</div>
+                </div>
+                <div class="spec-item">
+                  <div class="spec-label">CUDA版本:</div>
+                  <div class="spec-value">{{ record.cuda }}</div>
+                </div>
+              </div>
+
+              <!-- 价格信息 -->
+              <div class="price-column">
+                <div class="price-info">
+                  <div class="current-price">
+                    ¥<strong>{{ getPrice(record) }}</strong>/时
+                  </div>
+                  <div class="original-price">
+                    ¥{{ getOriginalPrice(record) }}/时
+                  </div>
+                  <div class="discount-badge">
+                    <span class="discount-icon">💰</span>
+                    <span class="discount-text">9.5折</span>
+                  </div>
+                  <div class="member-note">
+                    会员最低享9.5折 ¥2.98/时
+                  </div>
+                  <a-button type="primary" class="rent-button" @click="handleRentMachine(record.id)">
+                    {{ record.freeGpu > 0 ? '1卡可租' : '暂不可租' }}
+                  </a-button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 分页 -->
+      <div class="pagination-container">
+        <a-pagination
+          v-model:current="currentPage"
+          v-model:pageSize="pageSize"
+          :total="filteredMachineList.length"
+          :show-size-changer="true"
+          :page-size-options="['10', '20', '50', '100']"
+          show-quick-jumper
+          show-total
+          :show-total="total => `共 ${total} 台机器`"
+          @change="handlePageChange"
+          @showSizeChange="handlePageSizeChange"
+        />
+      </div>
+
+      <!-- 空状态 -->
+      <div v-if="filteredMachineList.length === 0" class="empty-state">
+        <a-empty description="暂无可用机器，请尝试调整筛选条件" />
+      </div>
+    </a-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, reactive, watch } from 'vue'
+import { message } from 'ant-design-vue'
+import type { TableColumnsType } from 'ant-design-vue'
+import { useRouter } from 'vue-router'
+const router = useRouter();
+// 类型定义
+interface Machine {
+  id: string
+  machineName: string
+  gpuModel: string
+  gpuMemory: string
+  freeGpu: number
+  totalGpu: number
+  cpuCores: number
+  memory: number
+  cpuModel: string
+  dataDisk: number
+  expandableDisk: number
+  driver: string
+  cuda: string
+  basePrice: number
+  originalPrice?: number
+  region: string
+  zone: string
+  availableGpuCount: number
+}
+
+interface GpuModelOption {
+  value: string
+  label: string
+  available: number
+  total: number
+  regions: string[]
+}
+
+interface RegionOption {
+  value: string
+  label: string
+  tag?: { color: string; text: string }
+}
+
+interface ZoneOption {
+  value: string
+  label: string
+  regions: string[]
+}
+
+interface Coupon {
+  id: string
+  name: string
+  amount: number
+  type: string
+}
+
+// 响应式数据
+const billingType = ref('weekly')
+const selectedRegion = ref('beijingDC2')
+const selectedZone = ref('')
+const selectedGpuModels = ref<string[]>(['RTX 5090'])
+const gpuCount = ref(1)
+const selectedMachineId = ref('')
+const needExpand = ref(false)
+const expandSize = ref(100)
+const imageType = ref('platformImage')
+const selectedImage = ref<string[]>([])
+const selectedCoupon = ref('')
+const tableLoading = ref(false)
+const creating = ref(false)
+
+// 分页相关
+const currentPage = ref(1)
+const pageSize = ref(10)
+
+// 所有机器数据
+const allMachineList = ref<Machine[]>([
+  {
+    id: '5fb545beac',
+    machineName: '336机',
+    gpuModel: 'vGPU-48GB',
+    gpuMemory: '48 GB',
+    freeGpu: 1,
+    totalGpu: 10,
+    cpuCores: 20,
+    memory: 90,
+    cpuModel: 'Xeon(R) Platinum 8470Q',
+    dataDisk: 50,
+    expandableDisk: 110,
+    driver: '580.76.05',
+    cuda: '≤ 13.0',
+    basePrice: 2.98,
+    originalPrice: 3.14,
+    region: 'beijingDC2',
+    zone: 'beijingB',
+    availableGpuCount: 10
+  },
+  {
+    id: '1b0d49b68a',
+    machineName: '494机',
+    gpuModel: 'RTX 5090',
+    gpuMemory: '32GB',
+    freeGpu: 6,
+    totalGpu: 8,
+    cpuCores: 25,
+    memory: 90,
+    cpuModel: 'Xeon(R) Platinum 8470Q',
+    dataDisk: 50,
+    expandableDisk: 7500,
+    driver: '580.76.05',
+    cuda: '13.0',
+    basePrice: 437.00,
+    originalPrice: 460.00,
+    region: 'beijingDC2',
+    zone: 'beijingDC3',
+    availableGpuCount: 8
+  },
+  {
+    id: '63af4ab7db',
+    machineName: '518机',
+    gpuModel: 'RTX 5090',
+    gpuMemory: '32GB',
+    freeGpu: 6,
+    totalGpu: 8,
+    cpuCores: 25,
+    memory: 90,
+    cpuModel: 'Xeon(R) Platinum 8470Q',
+    dataDisk: 50,
+    expandableDisk: 7105,
+    driver: '580.76.05',
+    cuda: '13.0',
+    basePrice: 437.00,
+    originalPrice: 460.00,
+    region: 'beijingDC2',
+    zone: 'beijingDC4',
+    availableGpuCount: 8
+  },
+  {
+    id: 'ff5d489b4f',
+    machineName: '495机',
+    gpuModel: 'RTX 5090',
+    gpuMemory: '32GB',
+    freeGpu: 6,
+    totalGpu: 8,
+    cpuCores: 25,
+    memory: 90,
+    cpuModel: 'Xeon(R) Platinum 8470Q',
+    dataDisk: 50,
+    expandableDisk: 6700,
+    driver: '580.76.05',
+    cuda: '13.0',
+    basePrice: 437.00,
+    originalPrice: 460.00,
+    region: 'beijingDC2',
+    zone: 'beijingDC3',
+    availableGpuCount: 8
+  },
+  {
+    id: 'a1b2c3d4e5',
+    machineName: '600机',
+    gpuModel: 'RTX PRO 6000',
+    gpuMemory: '48GB',
+    freeGpu: 4,
+    totalGpu: 8,
+    cpuCores: 32,
+    memory: 128,
+    cpuModel: 'Xeon(R) Platinum 8470Q',
+    dataDisk: 100,
+    expandableDisk: 8000,
+    driver: '580.76.05',
+    cuda: '13.0',
+    basePrice: 589.00,
+    region: 'westDC3',
+    zone: 'beijingDC4',
+    availableGpuCount: 8
+  },
+  {
+    id: 'f6g7h8i9j0',
+    machineName: '601机',
+    gpuModel: 'vGPU-48GB',
+    gpuMemory: '48GB',
+    freeGpu: 8,
+    totalGpu: 12,
+    cpuCores: 48,
+    memory: 192,
+    cpuModel: 'Xeon(R) Platinum 8470Q',
+    dataDisk: 150,
+    expandableDisk: 10000,
+    driver: '580.76.05',
+    cuda: '13.0',
+    basePrice: 689.00,
+    region: 'chongqingDC1',
+    zone: 'neimengDC2',
+    availableGpuCount: 12
+  },
+  {
+    id: 'k1l2m3n4o5',
+    machineName: '602机',
+    gpuModel: 'RTX 4090',
+    gpuMemory: '24GB',
+    freeGpu: 3,
+    totalGpu: 8,
+    cpuCores: 20,
+    memory: 80,
+    cpuModel: 'Xeon(R) Platinum 8470Q',
+    dataDisk: 50,
+    expandableDisk: 5000,
+    driver: '580.76.05',
+    cuda: '13.0',
+    basePrice: 389.00,
+    originalPrice: 410.00,
+    region: 'beijingDC1',
+    zone: 'shanghaiDC1',
+    availableGpuCount: 8
+  }
+])
+
+// GPU型号配置
+const gpuModelConfig = ref<GpuModelOption[]>([
+  { value: 'RTX 5090', label: 'RTX 5090', available: 685, total: 3280, regions: ['beijingDC2', 'beijingDC1', 'chongqingDC1'] },
+  { value: 'RTX PRO 6000', label: 'RTX PRO 6000', available: 0, total: 8, regions: ['westDC3'] },
+  { value: 'vGPU-48GB', label: 'vGPU-48GB', available: 31, total: 250, regions: ['chongqingDC1', 'neimengDC3'] },
+  { value: 'vGPU-48GB-425W', label: 'vGPU-48GB-425W', available: 58, total: 160, regions: ['neimengDC3'] },
+  { value: 'RTX 5090 D', label: 'RTX 5090 D', available: 1, total: 11, regions: ['beijingDC2'] },
+  { value: 'RTX 4090', label: 'RTX 4090', available: 3, total: 1000, regions: ['beijingDC1', 'foshanDC1'] },
+  { value: 'CPU', label: 'CPU', available: 0, total: 44, regions: ['beijingDC2', 'beijingDC1'] }
+])
+
+// 配置数据
+const billingTypeOptions = ref([
+  { value: 'payg', label: '按量计费' },
+  { value: 'daily', label: '包日' },
+  { value: 'weekly', label: '包周' },
+  { value: 'monthly', label: '包月' }
+])
+
+const regions = ref<RegionOption[]>([
+  { value: 'beijingDC2', label: '北京B区' },
+  { value: 'westDC3', label: '西北B区', tag: { color: 'red', text: 'PRO6000' } },
+  { value: 'chongqingDC1', label: '重庆A区' },
+  { value: 'neimengDC3', label: '内蒙B区' },
+  { value: 'beijingDC1', label: '北京A区' },
+  { value: 'foshanDC1', label: '佛山区' }
+])
+
+const zones = ref<ZoneOption[]>([
+  { value: 'beijingB', label: '北京B区', regions: ['beijingDC2'] },
+  { value: 'beijingDC4', label: 'L20专区', regions: ['beijingDC2'] },
+  { value: 'beijingDC3', label: 'V100专区', regions: ['beijingDC2'] },
+  { value: 'neimengDC2', label: 'A800专区', regions: ['neimengDC3'] },
+  { value: 'shanghaiDC1', label: '摩尔线程专区', regions: ['beijingDC1'] },
+  { value: 'guangdongDC1', label: '华为昇腾专区', regions: ['foshanDC1'] }
+])
+
+const gpuCountOptions = [1, 2, 3, 4, 5, 6, 7, 8, 10, 12]
+
+// 优惠券数据
+const availableCoupons = ref<Coupon[]>([
+  { id: 'coupon1', name: '新用户优惠券', amount: 50, type: 'discount' },
+  { id: 'coupon2', name: '周年庆优惠', amount: 100, type: 'discount' }
+])
+
+// 镜像选项
+const imageOptions = ref([
+  {
+    value: 'pytorch',
+    label: 'PyTorch',
+    children: [
+      {
+        value: '1.12.0',
+        label: '1.12.0',
+        children: [
+          {
+            value: 'python3.8',
+            label: 'Python 3.8',
+            children: [
+              { value: 'cuda11.6', label: 'CUDA 11.6' },
+              { value: 'cuda11.7', label: 'CUDA 11.7' }
+            ]
+          }
+        ]
+      }
+    ]
+  }
+])
+
+// 表格列定义
+const columns: TableColumnsType = [
+  {
+    title: '',
+    key: 'action',
+    width: 50
+  },
+  {
+    title: '主机ID',
+    dataIndex: 'id',
+    key: 'id',
+    width: 120
+  },
+  {
+    title: '算力型号/显存',
+    key: 'gpuModel',
+    width: 150
+  },
+  {
+    title: '空闲GPU',
+    key: 'gpuInfo',
+    width: 100,
+    sorter: (a: Machine, b: Machine) => a.freeGpu - b.freeGpu
+  },
+  {
+    title: '每GPU分配',
+    key: 'cpuInfo',
+    width: 120
+  },
+  {
+    title: 'CPU型号',
+    dataIndex: 'cpuModel',
+    key: 'cpuModel',
+    width: 180
+  },
+  {
+    title: '硬盘',
+    key: 'disk',
+    width: 140,
+    sorter: (a: Machine, b: Machine) => a.dataDisk - b.dataDisk
+  },
+  {
+    title: '驱动/CUDA',
+    key: 'driver',
+    width: 140
+  },
+  {
+    title: '价格(单卡)',
+    key: 'price',
+    width: 160
+  }
+]
+
+// 计算属性
+const cpuCores = computed(() => {
+  const machine = allMachineList.value.find(m => m.id === selectedMachineId.value)
+  return machine ? machine.cpuCores * gpuCount.value : 20 * gpuCount.value
+})
+
+const memory = computed(() => {
+  const machine = allMachineList.value.find(m => m.id === selectedMachineId.value)
+  return machine ? machine.memory * gpuCount.value : 90 * gpuCount.value
+})
+
+// 计费单位
+const billingUnit = computed(() => {
+  switch (billingType.value) {
+    case 'payg': return '小时'
+    case 'daily': return '天'
+    case 'weekly': return '周'
+    case 'monthly': return '月'
+    default: return '周'
+  }
+})
+
+// 可用的GPU型号（根据地区筛选）
+const availableGpuModels = computed(() => {
+  return gpuModelConfig.value.filter(model =>
+    model.regions.includes(selectedRegion.value)
+  )
+})
+
+// 选中的GPU型号标签
+const selectedGpuModelLabel = computed(() => {
+  if (selectedGpuModels.value.length === 0) return '未选择'
+  const model = gpuModelConfig.value.find(m => m.value === selectedGpuModels.value[0])
+  return model ? model.label : selectedGpuModels.value[0]
+})
+
+// 过滤后的机器列表
+const filteredMachineList = computed(() => {
+  let filtered = allMachineList.value.filter(machine => {
+    // 按地区筛选
+    if (machine.region !== selectedRegion.value) return false
+
+    // 按专区筛选（如果有选择专区）
+    if (selectedZone.value && machine.zone !== selectedZone.value) return false
+
+    // 按GPU型号筛选
+    if (selectedGpuModels.value.length > 0 && !selectedGpuModels.value.includes('all')) {
+      if (!selectedGpuModels.value.includes(machine.gpuModel)) return false
+    }
+
+    // 按GPU数量筛选：机器的可用GPU数量要大于等于选择的GPU数量
+    if (machine.availableGpuCount < gpuCount.value) return false
+
+    // 确保有足够的空闲GPU
+    if (machine.freeGpu < gpuCount.value) return false
+
+    return true
+  })
+
+  return filtered
+})
+
+// 分页后的机器列表
+const paginatedMachineList = computed(() => {
+  const start = (currentPage.value - 1) * pageSize.value
+  const end = start + pageSize.value
+  return filteredMachineList.value.slice(start, end)
+})
+
+const showZones = computed(() => {
+  return availableZones.value.length > 0
+})
+
+const availableZones = computed(() => {
+  return zones.value.filter(zone => zone.regions.includes(selectedRegion.value))
+})
+
+const totalDiskSize = computed(() => {
+  return needExpand.value ? 50 + expandSize.value : 50
+})
+
+const maxExpandSize = computed(() => {
+  const machine = allMachineList.value.find(m => m.id === selectedMachineId.value)
+  return machine ? machine.expandableDisk : 0
+})
+
+const totalPrice = computed(() => {
+  const machine = allMachineList.value.find(m => m.id === selectedMachineId.value)
+  if (!machine) return '0.00'
+
+  let price = machine.basePrice * gpuCount.value
+  
+  // 硬盘扩容费用
+  if (needExpand.value && expandSize.value > 0) {
+    const diskPricePerGB = 0.1 // 假设每GB 0.1元/周
+    price += diskPricePerGB * expandSize.value
+  }
+  
+  // 优惠券折扣
+  if (selectedCoupon.value) {
+    const coupon = availableCoupons.value.find(c => c.id === selectedCoupon.value)
+    if (coupon) {
+      price = Math.max(0, price - coupon.amount)
+    }
+  }
+
+  // 计费方式转换
+  if (billingType.value === 'payg') price = price / (7 * 24)
+  else if (billingType.value === 'daily') price = price / 7
+  else if (billingType.value === 'monthly') price = price * 4
+
+  return price.toFixed(2)
+})
+
+const originalTotalPrice = computed(() => {
+  const machine = allMachineList.value.find(m => m.id === selectedMachineId.value)
+  if (!machine || !machine.originalPrice) return ''
+
+  let price = machine.originalPrice * gpuCount.value
+  if (billingType.value === 'payg') price = price / (7 * 24)
+  else if (billingType.value === 'daily') price = price / 7
+  else if (billingType.value === 'monthly') price = price * 4
+
+  return price.toFixed(2)
+})
+
+const canCreate = computed(() => {
+  return selectedMachineId.value && selectedImage.value.length > 0
+})
+
+// 价格计算方法
+const getPrice = (record: Machine) => {
+  const basePrice = record.basePrice
+  switch (billingType.value) {
+    case 'payg': return (basePrice / (7 * 24)).toFixed(2)
+    case 'daily': return (basePrice / 7).toFixed(2)
+    case 'weekly': return basePrice.toFixed(2)
+    case 'monthly': return (basePrice * 4).toFixed(2)
+    default: return basePrice.toFixed(2)
+  }
+}
+
+const getOriginalPrice = (record: Machine) => {
+  if (!record.originalPrice) return ''
+  const originalPrice = record.originalPrice
+  switch (billingType.value) {
+    case 'payg': return (originalPrice / (7 * 24)).toFixed(2)
+    case 'daily': return (originalPrice / 7).toFixed(2)
+    case 'weekly': return originalPrice.toFixed(2)
+    case 'monthly': return (originalPrice * 4).toFixed(2)
+    default: return originalPrice.toFixed(2)
+  }
+}
+
+// 价格明细计算
+const gpuPrice = computed(() => {
+  const machine = allMachineList.value.find(m => m.id === selectedMachineId.value)
+  if (!machine) return '0.00'
+
+  let price = machine.basePrice * gpuCount.value
+  if (billingType.value === 'payg') price = price / (7 * 24)
+  else if (billingType.value === 'daily') price = price / 7
+  else if (billingType.value === 'monthly') price = price * 4
+
+  return price.toFixed(2)
+})
+
+const diskPrice = computed(() => {
+  if (!needExpand.value || expandSize.value <= 0) return '0.00'
+  // 假设每GB硬盘费用为0.1元/周
+  const pricePerGB = 0.1
+  let price = pricePerGB * expandSize.value
+  if (billingType.value === 'payg') price = price / (7 * 24)
+  else if (billingType.value === 'daily') price = price / 7
+  else if (billingType.value === 'monthly') price = price * 4
+
+  return price.toFixed(2)
+})
+
+const couponDiscount = computed(() => {
+  if (!selectedCoupon.value) return '0.00'
+  const coupon = availableCoupons.value.find(c => c.id === selectedCoupon.value)
+  if (!coupon) return '0.00'
+  
+  let discount = coupon.amount
+  if (billingType.value === 'payg') discount = discount / (7 * 24)
+  else if (billingType.value === 'daily') discount = discount / 7
+  else if (billingType.value === 'monthly') discount = discount * 4
+  
+  return discount.toFixed(2)
+})
+
+const showPriceBreakdown = computed(() => {
+  return diskPrice.value !== '0.00' || couponDiscount.value !== '0.00'
+})
+
+// 方法
+const handleRowClick = (record: Machine) => {
+  selectedMachineId.value = record.id
+}
+
+const handleSelectMachine = (id: string) => {
+  selectedMachineId.value = id
+}
+
+const getRowClassName = (record: Machine) => {
+  return selectedMachineId.value === record.id ? 'selected-row' : ''
+}
+
+// 一卡可租
+const handleRentMachine = (id:string) => {   
+   router.push("/layout/create")            
+
+}
+
+const handleBillingTypeChange = () => {
+  console.log('计费方式改变:', billingType.value)
+}
+
+const handleRegionChange = () => {
+  console.log('地区改变:', selectedRegion.value)
+  if (availableGpuModels.value.length > 0) {
+    selectedGpuModels.value = [availableGpuModels.value[0].value]
+  } else {
+    selectedGpuModels.value = []
+  }
+  selectedZone.value = ''
+  selectedMachineId.value = ''
+  currentPage.value = 1
+}
+
+const handleZoneChange = () => {
+  console.log('专区改变:', selectedZone.value)
+  selectedMachineId.value = ''
+  currentPage.value = 1
+}
+
+const handleGpuModelChange = () => {
+  console.log('GPU型号改变:', selectedGpuModels.value)
+  selectedMachineId.value = ''
+  currentPage.value = 1
+}
+
+const handleGpuCountChange = () => {
+  console.log('GPU数量改变:', gpuCount.value)
+  selectedMachineId.value = ''
+  currentPage.value = 1
+}
+
+const handleImageTypeChange = () => {
+  console.log('镜像类型改变:', imageType.value)
+  selectedImage.value = []
+}
+
+// 分页处理方法
+const handlePageChange = (page: number, pageSize?: number) => {
+  currentPage.value = page
+  if (pageSize) {
+    pageSize.value = pageSize
+  }
+}
+
+const handlePageSizeChange = (current: number, size: number) => {
+  currentPage.value = 1
+  pageSize.value = size
+}
+
+const isGpuCountDisabled = (count: number) => {
+  const machine = filteredMachineList.value.find(m => m.id === selectedMachineId.value)
+  return machine ? count > machine.availableGpuCount : false
+}
+
+const filter = (inputValue: string, path: any[]) => {
+  return path.some(option =>
+    option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1
+  )
+}
+
+const handleCreate = async () => {
+  creating.value = true
+  try {
+    await new Promise(resolve => setTimeout(resolve, 2000))
+    message.success('实例创建成功！')
+  } catch (error) {
+    message.error('创建失败，请重试')
+  } finally {
+    creating.value = false
+  }
+}
+
+const handleCancel = () => {
+  window.history.back()
+}
+
+// 监听选中的机器列表，自动选择第一个可用的机器
+watch(filteredMachineList, (newList) => {
+  if (newList.length > 0 && !selectedMachineId.value) {
+    selectedMachineId.value = newList[0].id
+  } else if (newList.length === 0) {
+    selectedMachineId.value = ''
+  }
+  // 重置到第一页
+  currentPage.value = 1
+}, { immediate: true })
+
+// 监听器
+watch(needExpand, (newVal) => {
+  if (!newVal) {
+    expandSize.value = 100
+  }
+})
+
+watch(selectedMachineId, (newId) => {
+  if (newId && needExpand.value) {
+    const machine = allMachineList.value.find(m => m.id === newId)
+    if (machine && expandSize.value > machine.expandableDisk) {
+      expandSize.value = machine.expandableDisk
+    }
+  }
+})
+
+// 初始化时设置默认的GPU型号
+if (availableGpuModels.value.length > 0) {
+  selectedGpuModels.value = [availableGpuModels.value[0].value]
+}
+</script>
+
+<style scoped>
+/* 强制让容器参与文档流并允许增长 */
+.instance-create-container {
+  display: block;
+  width: 90%;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 24px;
+  background: #fff;
+  box-sizing: border-box;
+  /* 关键：确保它能自然撑高 */
+  min-height: fit-content;
+  height: auto;
+}
+
+.breadcrumb {
+  margin-bottom: 16px;
+}
+
+.autodl-tip {
+  margin-bottom: 24px;
+}
+
+.card {
+  margin-bottom: 24px;
+}
+
+.select-server {
+  margin-bottom: 24px;
+}
+
+.machine-list {
+  margin-bottom: 24px;
+}
+
+.list-filter {
+  margin-bottom: 16px;
+}
+
+.filter-item {
+  display: flex;
+  margin-bottom: 24px;
+  align-items: flex-start;
+}
+
+.filter-label {
+  width: 80px;
+  margin-right: 16px;
+  font-weight: 500;
+  flex-shrink: 0;
+  line-height: 32px;
+}
+
+.filter-content {
+  flex: 1;
+}
+
+.region-tag {
+  margin-left: 8px;
+}
+
+.machine-table {
+  margin-top: 24px;
+}
+
+.table-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.table-header .label {
+  font-weight: 500;
+  font-size: 16px;
+}
+
+.table-header .total-count {
+  color: #666;
+  font-size: 14px;
+}
+
+.machine-id-info .machine-id {
+  font-weight: 500;
+}
+
+.machine-id-info .machine-name {
+  color: #666;
+  font-size: 12px;
+  margin-top: 2px;
+}
+
+.gpu-info .gpu-name {
+  font-weight: 500;
+}
+
+.gpu-info .gpu-memory {
+  color: #666;
+  font-size: 12px;
+}
+
+.gpu-availability .free-count {
+  font-weight: bold;
+  color: #52c41a;
+}
+
+.gpu-availability .separator {
+  margin: 0 4px;
+  color: #666;
+}
+
+.gpu-availability .total-count {
+  color: #666;
+}
+
+.cpu-memory-info,
+.disk-info,
+.driver-info {
+  font-size: 12px;
+  line-height: 1.4;
+}
+
+.disk-info .expandable-note {
+  color: #1890ff;
+  font-size: 11px;
+  margin-top: 2px;
+}
+
+.price-info {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.price-info .current-price {
+  color: #f7412d;
+  font-weight: 500;
+  font-size: 14px;
+}
+
+.price-info .original-price {
+  text-decoration: line-through;
+  color: #999;
+  font-size: 12px;
+}
+
+.price-info .billing-unit {
+  color: #999;
+  font-size: 12px;
+  margin-top: 2px;
+}
+
+.price-info .rentable-tag {
+  background-color: #f6ffed;
+  border: 1px solid #b7eb8f;
+  color: #52c41a;
+  padding: 1px 6px;
+  border-radius: 4px;
+  font-size: 11px;
+  margin-top: 4px;
+}
+
+.empty-state {
+  padding: 40px 0;
+  text-align: center;
+}
+
+.pagination-container {
+  margin-top: 24px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.data-disk-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.disk-base {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.free-disk {
+  color: #52c41a;
+  font-weight: 500;
+}
+
+.disk-expand {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.expand-label {
+  font-weight: 500;
+}
+
+.expand-note {
+  color: #666;
+  font-size: 12px;
+}
+
+.instance-spec .spec-content {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 24px;
+}
+
+.spec-item {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 120px;
+}
+
+.spec-label {
+  color: #666;
+  font-size: 12px;
+}
+
+.spec-value {
+  font-weight: 500;
+}
+
+.image-type {
+  margin-bottom: 0;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.config-link {
+  font-size: 14px;
+}
+
+.image-tip {
+  color: #666;
+  font-size: 12px;
+  margin-bottom: 12px;
+}
+
+.image-tag {
+  margin-left: 8px;
+}
+
+.coupon-content {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.coupon-balance {
+  color: #666;
+  font-size: 12px;
+}
+
+.footer-actions {
+  background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
+  padding: 20px 0;
+  border-top: 1px solid #e8e8e8;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-top: 40px;
+  width: 100%;
+}
+
+.price-summary {
+  display: flex;
+  align-items: flex-start;
+  gap: 32px;
+}
+
+.price-main {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.total-label {
+  font-size: 14px;
+  color: #666;
+  font-weight: 500;
+}
+
+.price-display {
+  display: flex;
+  align-items: baseline;
+  gap: 4px;
+}
+
+.total-price {
+  font-size: 32px;
+  font-weight: 700;
+  color: #f7412d;
+  line-height: 1;
+}
+
+.price-unit {
+  font-size: 14px;
+  color: #999;
+  font-weight: 500;
+}
+
+.original-price-container {
+  margin-top: 2px;
+}
+
+.original-total-price {
+  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;
+}
+
+.breakdown-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 16px;
+  font-size: 12px;
+}
+
+.breakdown-label {
+  color: #666;
+  white-space: nowrap;
+}
+
+.breakdown-value {
+  color: #333;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.breakdown-value.discount {
+  color: #52c41a;
+}
+
+.action-buttons {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+}
+
+.cancel-btn {
+  padding: 0 24px;
+  height: 48px;
+  font-weight: 500;
+  border: 1px solid #d9d9d9;
+  border-radius: 8px;
+}
+
+.cancel-btn:hover {
+  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;
+}
+
+.create-btn:hover {
+  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;
+}
+
+.selected-row {
+  background-color: #f0f7ff !important;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .instance-create-container {
+    width: 100%;
+    padding: 16px;
+  }
+
+  .footer-actions {
+    flex-direction: column;
+    gap: 20px;
+    padding: 16px 0;
+  }
+
+  .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;
+  }
+
+  .filter-item {
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .filter-label {
+    width: 100%;
+    margin-right: 0;
+  }
+}
+
+:deep(.ant-radio-button-wrapper) {
+  margin-right: 8px;
+}
+
+:deep(.ant-table-thead > tr > th) {
+  background-color: #fafafa;
+  font-weight: 500;
+}
+
+:deep(.ant-table-row) {
+  cursor: pointer;
+}
+
+:deep(.ant-table-row:hover) {
+  background-color: #f5f5f5;
+}
+
+:deep(.ant-pagination) {
+  font-size: 14px;
+}
+
+:deep(.ant-pagination-total-text) {
+  margin-right: 16px;
+}
+
+/* 新增的卡片式布局样式 */
+.machine-card-container {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin-top: 24px;
+}
+
+.machine-card {
+  border: 1px solid #d9d9d9;
+  border-radius: 8px;
+  background: white;
+  transition: all 0.2s ease;
+  cursor: pointer;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+}
+
+.machine-card:hover {
+  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+  transform: translateY(-1px);
+}
+
+.selected-card {
+  border-color: #1890ff;
+  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+}
+
+.card-header {
+  padding: 16px 24px;
+  background: #f8f9fa;
+  border-bottom: 1px solid #e8e8e8;
+  /* display: flex;
+  justify-content: space-between;
+  align-items: center; */
+}
+
+.location-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  color: #666;
+}
+
+.location-info .separator {
+  color: #ccc;
+}
+
+.id-code {
+  font-size: 12px;
+  color: #999;
+}
+
+.available-info {
+  font-size: 12px;
+  color: #999;
+}
+
+.card-body {
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.gpu-spec {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  margin-top: 15px;
+}
+
+.gpu-model {
+  font-size: 18px;
+  font-weight: 500;
+  color: #333;
+}
+
+.gpu-memory {
+  font-size: 18px;
+  color: #333;
+  font-weight: 500;
+}
+
+.availability {
+  font-size: 12px;
+  color: #999;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding-left: 20px;
+}
+
+.specs-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+  gap: 24px;
+  margin-top: 16px;
+}
+
+.spec-column {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.spec-title {
+  font-size: 12px;
+  color: #666;
+  font-weight: 500;
+}
+
+.spec-item {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.spec-label {
+  font-size: 12px;
+  color: #999;
+}
+
+.spec-value {
+  font-size: 14px;
+  color: #333;
+  word-break: break-all;
+}
+
+.price-column {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 12px;
+}
+
+.price-info {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 8px;
+  width: 100%;
+}
+
+.current-price {
+  font-size: 18px;
+  font-weight: 500;
+  color: #f7412d;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.original-price {
+  font-size: 12px;
+  color: #999;
+  text-decoration: line-through;
+}
+
+.discount-badge {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  background: #fff5e6;
+  border: 1px solid #ffe4b5;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+}
+
+.discount-icon {
+  font-size: 12px;
+}
+
+.discount-text {
+  color: #f7412d;
+  font-weight: 500;
+}
+
+.member-note {
+  font-size: 12px;
+  color: #666;
+  margin-top: 4px;
+}
+
+.rent-button {
+  width: 100px;
+  height: 32px;
+  font-size: 12px;
+  border-radius: 4px;
+  margin-top: 8px;
+}
+
+/* 响应式设计 - 小屏幕适配 */
+@media (max-width: 768px) {
+  .specs-grid {
+    grid-template-columns: 1fr 1fr;
+    gap: 16px;
+  }
+  
+  .price-column {
+    grid-column: span 2;
+  }
+  
+  .card-header {
+    flex-direction: column;
+    gap: 8px;
+    padding: 12px 16px;
+  }
+  
+  .location-info {
+    flex-direction: column;
+    gap: 4px;
+  }
+  
+  .available-info {
+    font-size: 10px;
+  }
+}
+</style>
\ No newline at end of file