From cae4b2b914cecd1c5e97e48c4a277e028e856a12 Mon Sep 17 00:00:00 2001
From: qiuyuan <qiuyuan@yonyou.com>
Date: Tue, 25 Nov 2025 14:49:18 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E5=AE=B9=E5=99=A8=E5=AE=9E=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.ts                      |  19 +-
 src/views/admin/index.vue                |   2 +-
 src/views/admin/instance/index.vue       | 513 +++++++++++++++++++++++
 src/views/admin/instanceCreate/index.vue |   0
 4 files changed, 525 insertions(+), 9 deletions(-)
 create mode 100644 src/views/admin/instance/index.vue
 create mode 100644 src/views/admin/instanceCreate/index.vue

diff --git a/src/router/index.ts b/src/router/index.ts
index 26cdc55..299374f 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -3,14 +3,7 @@ import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
 import Layout from "@/components/Layout.vue";
 import { Components } from "ant-design-vue/es/date-picker/generatePicker";
 
-const HomeView = () => import("@/views/home/index.vue");
-const FileStore = () => import("@/views/controlPanel/fileStore/index.vue");
-// 账号安全
-const AccountSecurity = () =>
-  import("@/views/controlPanel/account/security/index.vue");
-// 访问记录
-const AccountHistory = () =>
-  import("@/views/controlPanel/account/history/index.vue");
+
 
 const routes: RouteRecordRaw[] = [
   {
@@ -57,6 +50,16 @@ const routes: RouteRecordRaw[] = [
             name: "AdminHome",
             component: () => import("@/views/admin/home/index.vue"),
           },
+          {
+            path: "instance",
+            name: "Instance",
+            component: () => import("@/views/admin/instance/index.vue"),
+          },
+          {
+            path: "instanceCreate",
+            name: "InstanceCreate",
+            component: () => import("@/views/admin/instanceCreate/index.vue"),
+          },
           {
             path: "fileStore",
             name: "FileStore",
diff --git a/src/views/admin/index.vue b/src/views/admin/index.vue
index abb508d..67024cd 100644
--- a/src/views/admin/index.vue
+++ b/src/views/admin/index.vue
@@ -43,7 +43,7 @@ interface MenuItem {
 
 const menuItems: MenuItem[] = [
   { path: '/layout/overview', name: '总览', icon: HomeOutlined },
-  { path: '/layout/container', name: '容器实例', icon: ConsoleSqlOutlined },
+  { path: '/layout/admin/instance', name: '容器实例', icon: ConsoleSqlOutlined },
   { path: '/layout/admin/fileStore', name: '文件存储', icon: FolderOpenOutlined },
   { path: '/layout/admin/image', name: '镜像', icon: GlobalOutlined },
   { path: '/layout/publicData', name: '公开数据', icon: LaptopOutlined },
diff --git a/src/views/admin/instance/index.vue b/src/views/admin/instance/index.vue
new file mode 100644
index 0000000..8177c00
--- /dev/null
+++ b/src/views/admin/instance/index.vue
@@ -0,0 +1,513 @@
+<template>
+  <div class="instance-list">
+    <!-- 顶部标题和操作区域 -->
+    <div class="header-section">
+      <div class="header-top">
+        <div class="header-left">
+          <span class="page-title">容器实例</span>
+          <span class="warning-tip">
+            <exclamation-circle-outlined class="warning-icon" />
+            实例连续关机15天会释放实例，实例释放会导致数据清空且不可恢复，释放前实例在数据在。
+          </span>
+        </div>
+        <!-- <div class="header-quick-actions">
+          <span class="quick-action-item">
+            <bell-outlined class="quick-action-icon" />
+            订阅GPU通知
+          </span>
+          <span class="quick-action-item">
+            <key-outlined class="quick-action-icon" />
+            设置密钥登录
+          </span>
+          <span class="quick-action-item">
+            <appstore-outlined class="quick-action-icon" />
+            小程序管理实例
+          </span>
+        </div> -->
+      </div>
+      
+      <div class="header-bottom">
+        <div class="header-actions">
+          <a-button type="primary" @click="handleRent" class="action-btn">租用新实例</a-button>
+          <!-- <a-button @click="handleRenew" class="action-btn">批量续费</a-button> -->
+          <a-button class="refresh-btn">
+            <reload-outlined />
+          </a-button>
+        </div>
+        <div class="header-filter">
+          <a-select 
+            placeholder="筛选标签" 
+            style="width: 160px;"
+            size="large"
+          >
+            <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>
+          <a-input-search
+            placeholder="搜索实例名称/ID"
+            style="width: 240px; margin-left: 12px;"
+            size="large"
+            @search="onSearch"
+          />
+        </div>
+      </div>
+    </div>
+
+    <!-- 表格 -->
+    <div class="table-container">
+      <a-table
+        :columns="columns"
+        :data-source="dataSource"
+        :pagination="false"
+        :loading="loading"
+        row-key="id"
+        class="instance-table"
+      >
+        <template #empty>
+          <div class="empty-state">
+            <div class="empty-icon">
+              <inbox-outlined />
+            </div>
+            <div class="empty-text">暂无数据</div>
+            <div class="empty-desc">当前没有实例数据，您可以租用新实例开始使用</div>
+          </div>
+        </template>
+      </a-table>
+    </div>
+
+    <!-- 分页 -->
+    <div class="pagination-container">
+      <div class="pagination-left">
+        <span class="total-text">共 {{ total }} 条</span>
+      </div>
+      <div class="pagination-center">
+        <a-pagination
+          v-model:current="currentPage"
+          v-model:page-size="pageSize"
+          :total="total"
+          :page-size-options="['10', '20', '50', '100']"
+          show-size-changer
+          show-quick-jumper
+          size="small"
+        />
+      </div>
+      <div class="pagination-right">
+        <span class="goto-text">前往</span>
+        <a-input-number 
+          v-model:value="currentPage" 
+          :min="1" 
+          :max="Math.ceil(total / pageSize)" 
+          size="small"
+          style="width: 60px; margin: 0 8px;"
+        />
+        <span class="goto-text">页</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, h } from 'vue';
+import { Button, Table, Input, Select, Pagination, InputNumber } from 'ant-design-vue';
+import { 
+  ReloadOutlined, 
+  ExclamationCircleOutlined, 
+  BellOutlined, 
+  KeyOutlined, 
+  AppstoreOutlined,
+  InboxOutlined 
+} from '@ant-design/icons-vue';
+
+export default defineComponent({
+  name: 'InstanceList',
+  components: {
+    AButton: Button,
+    ATable: Table,
+    AInput: Input,
+    AInputSearch: Input.Search,
+    ASelect: Select,
+    ASelectOption: Select.Option,
+    APagination: Pagination,
+    AInputNumber: InputNumber,
+    ReloadOutlined,
+    ExclamationCircleOutlined,
+    BellOutlined,
+    KeyOutlined,
+    AppstoreOutlined,
+    InboxOutlined,
+  },
+  setup() {
+    const loading = ref(false);
+    const currentPage = ref(1);
+    const pageSize = ref(10);
+    const total = ref(0);
+
+    // 表格列配置
+    const columns = [
+      {
+        title: '实例ID / 名称',
+        dataIndex: 'id',
+        key: 'id',
+        width: 200,
+      },
+      {
+        title: '状态',
+        dataIndex: 'status',
+        key: 'status',
+        width: 120,
+        customRender: ({ text }: { text: string }) => {
+          return h('span', { class: `status-${text.toLowerCase()}` }, text);
+        },
+      },
+      {
+        title: '规格详情',
+        dataIndex: 'spec',
+        key: 'spec',
+        width: 150,
+      },
+      {
+        title: '本地磁盘',
+        dataIndex: 'disk',
+        key: 'disk',
+        width: 120,
+      },
+      {
+        title: '健康状态',
+        dataIndex: 'health',
+        key: 'health',
+        width: 120,
+      },
+      {
+        title: '付费方式',
+        dataIndex: 'payment',
+        key: 'payment',
+        width: 120,
+      },
+      {
+        title: '释放时间/停机时间',
+        dataIndex: 'releaseTime',
+        key: 'releaseTime',
+        width: 180,
+      },
+      {
+        title: 'SSH登录',
+        dataIndex: 'ssh',
+        key: 'ssh',
+        width: 120,
+      },
+      {
+        title: '快捷工具',
+        dataIndex: 'tools',
+        key: 'tools',
+        width: 120,
+      },
+      {
+        title: '操作',
+        dataIndex: 'action',
+        key: 'action',
+        width: 150,
+      },
+    ];
+
+    // 数据源
+    const dataSource = ref([]);
+
+    // 模拟数据（可从接口获取）
+    const fetchInstances = () => {
+      loading.value = true;
+      setTimeout(() => {
+        dataSource.value = [];
+        total.value = 0;
+        loading.value = false;
+      }, 500);
+    };
+
+    fetchInstances();
+
+    const handleRent = () => {
+      console.log('租用新实例');
+    };
+
+    const handleRenew = () => {
+      console.log('批量续费');
+    };
+
+    const onSearch = (value: string) => {
+      console.log('搜索:', value);
+    };
+
+    return {
+      columns,
+      dataSource,
+      loading,
+      currentPage,
+      pageSize,
+      total,
+      handleRent,
+      handleRenew,
+      onSearch,
+    };
+  },
+});
+</script>
+
+<style scoped lang="scss">
+.instance-list {
+  padding: 24px;
+  background: #f5f7fa;
+  min-height: 100vh;
+}
+
+.header-section {
+  background: #fff;
+  border-radius: 8px;
+  padding: 20px;
+  margin-bottom: 20px;
+  border: 1px solid #e8e8e8;
+}
+
+.header-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 20px;
+  flex-wrap: wrap;
+  gap: 16px;
+  
+  .header-left {
+    display: flex;
+    align-items: flex-start;
+    gap: 16px;
+    flex: 1;
+    min-width: 300px;
+    
+    .page-title {
+      font-size: 20px;
+      font-weight: 600;
+      color: #1f2d3d;
+      line-height: 1.4;
+      white-space: nowrap;
+    }
+    
+    .warning-tip {
+      display: flex;
+      align-items: flex-start;
+      color: #ff7f00;
+      font-size: 14px;
+      line-height: 1.4;
+      flex: 1;
+      margin-top: 4px;
+      
+      .warning-icon {
+        margin-right: 8px;
+        font-size: 16px;
+        margin-top: 2px;
+        flex-shrink: 0;
+      }
+    }
+  }
+  
+  .header-quick-actions {
+    display: flex;
+    gap: 24px;
+    align-items: center;
+    flex-wrap: wrap;
+    
+    .quick-action-item {
+      display: flex;
+      align-items: center;
+      color: #1890ff;
+      font-size: 14px;
+      font-weight: 500;
+      cursor: pointer;
+      transition: color 0.3s;
+      white-space: nowrap;
+      
+      &:hover {
+        color: #40a9ff;
+      }
+      
+      .quick-action-icon {
+        margin-right: 6px;
+        font-size: 14px;
+      }
+    }
+  }
+}
+
+.header-bottom {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 16px;
+  padding-top: 16px;
+  border-top: 1px solid #f0f0f0;
+  
+  .header-actions {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+    
+    .action-btn {
+      height: 36px;
+      padding: 0 16px;
+      font-weight: 500;
+    }
+    
+    .refresh-btn {
+      height: 36px;
+      width: 36px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+  
+  .header-filter {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+  }
+}
+
+.table-container {
+  background: #fff;
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid #e8e8e8;
+}
+
+.instance-table {
+  .empty-state {
+    padding: 60px 20px;
+    text-align: center;
+    
+    .empty-icon {
+      font-size: 64px;
+      color: #d9d9d9;
+      margin-bottom: 16px;
+    }
+    
+    .empty-text {
+      font-size: 16px;
+      color: #8c8c8c;
+      margin-bottom: 8px;
+    }
+    
+    .empty-desc {
+      font-size: 14px;
+      color: #bfbfbf;
+    }
+  }
+  
+  // 状态样式
+  :deep(.status-running) {
+    color: #52c41a;
+    background: #f6ffed;
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 12px;
+  }
+  
+  :deep(.status-stopped) {
+    color: #ff4d4f;
+    background: #fff2f0;
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 12px;
+  }
+}
+
+.pagination-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 24px;
+  padding: 16px 20px;
+  background: #fff;
+  border-radius: 8px;
+  border: 1px solid #e8e8e8;
+  
+  .pagination-left {
+    .total-text {
+      color: #8c8c8c;
+      font-size: 14px;
+    }
+  }
+  
+  .pagination-center {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+  }
+  
+  .pagination-right {
+    display: flex;
+    align-items: center;
+    
+    .goto-text {
+      color: #8c8c8c;
+      font-size: 14px;
+    }
+  }
+}
+
+// 响应式设计
+@media (max-width: 1200px) {
+  .header-top {
+    .header-left {
+      flex-direction: column;
+      gap: 12px;
+    }
+    
+    .header-quick-actions {
+      gap: 16px;
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .instance-list {
+    padding: 16px;
+  }
+  
+  .header-top {
+    flex-direction: column;
+    align-items: stretch;
+    
+    .header-left {
+      min-width: auto;
+    }
+    
+    .header-quick-actions {
+      justify-content: flex-start;
+    }
+  }
+  
+  .header-bottom {
+    flex-direction: column;
+    align-items: stretch;
+    
+    .header-actions {
+      justify-content: flex-start;
+    }
+    
+    .header-filter {
+      justify-content: flex-start;
+    }
+  }
+  
+  .pagination-container {
+    flex-direction: column;
+    gap: 16px;
+    
+    .pagination-left,
+    .pagination-right {
+      width: 100%;
+      justify-content: center;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/admin/instanceCreate/index.vue b/src/views/admin/instanceCreate/index.vue
new file mode 100644
index 0000000..e69de29

From 82bc25b6ec253d3a4fc9fa66127cfa27f575443e Mon Sep 17 00:00:00 2001
From: qiuyuan <qiuyuan@yonyou.com>
Date: Wed, 26 Nov 2025 10:41:59 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E5=AE=B9=E5=99=A8=E5=AE=9E=E4=BE=8B?=
 =?UTF-8?q?=E7=95=8C=E9=9D=A2=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/admin/instance/index.vue       |    7 +-
 src/views/admin/instanceCreate/index.vue | 1248 ++++++++++++++++++++++
 2 files changed, 1254 insertions(+), 1 deletion(-)

diff --git a/src/views/admin/instance/index.vue b/src/views/admin/instance/index.vue
index 8177c00..af523dc 100644
--- a/src/views/admin/instance/index.vue
+++ b/src/views/admin/instance/index.vue
@@ -119,6 +119,9 @@ import {
   InboxOutlined 
 } from '@ant-design/icons-vue';
 
+import { useRouter } from 'vue-router'
+
+
 export default defineComponent({
   name: 'InstanceList',
   components: {
@@ -137,7 +140,9 @@ export default defineComponent({
     AppstoreOutlined,
     InboxOutlined,
   },
+
   setup() {
+    const router = useRouter()
     const loading = ref(false);
     const currentPage = ref(1);
     const pageSize = ref(10);
@@ -226,7 +231,7 @@ export default defineComponent({
     fetchInstances();
 
     const handleRent = () => {
-      console.log('租用新实例');
+      router.push('/layout/admin/instanceCreate');
     };
 
     const handleRenew = () => {
diff --git a/src/views/admin/instanceCreate/index.vue b/src/views/admin/instanceCreate/index.vue
index e69de29..a4974ed 100644
--- a/src/views/admin/instanceCreate/index.vue
+++ b/src/views/admin/instanceCreate/index.vue
@@ -0,0 +1,1248 @@
+<template>
+    <div class="instance-create-container">
+        <!-- 面包屑导航 -->
+        <a-breadcrumb class="breadcrumb">
+            <a-breadcrumb-item>
+                <a href="/layout/admin/instance">容器实例</a>
+            </a-breadcrumb-item>
+            <a-breadcrumb-item>创建实例</a-breadcrumb-item>
+        </a-breadcrumb>
+
+        <!-- 警告提示 -->
+        <a-alert class="autodl-tip" message="严禁使用WebUI等算法生成违禁图片、严禁挖矿，一经发现立即封号！" type="warning" show-icon closable />
+
+        <!-- 计费方式 -->
+        <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-group>
+                <a href="/docs/price/" target="_blank" class="billing-link">计费规则</a>
+            </div>
+            <div class="note">
+                创建完主机后仍然可以转换计费方式。如选择按量计费，价格发生变动以实例开机时的价格为准
+            </div>
+        </a-card>
+
+        <!-- 服务器选择 -->
+        <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="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>
+
+            <!-- 主机表格 -->
+            <div class="machine-table">
+                <div class="table-header">
+                    <span class="label">选择主机:</span>
+                    <span class="total-count">共 {{ filteredMachineList.length }} 台可用主机</span>
+                </div>
+                <a-table :columns="columns" :data-source="filteredMachineList" :pagination="false"
+                    :row-selection="{ type: 'radio', selectedRowKeys: [selectedMachineId] }" @row-click="handleRowClick"
+                    :row-class-name="getRowClassName" :loading="tableLoading" size="middle">
+                    <template #bodyCell="{ column, record }">
+                        <template v-if="column.key === 'action'">
+                            <a-radio :checked="selectedMachineId === record.id"
+                                @change="() => handleSelectMachine(record.id)" />
+                        </template>
+                        <template v-else-if="column.key === 'gpuModel'">
+                            <div class="gpu-info">
+                                <div class="gpu-name">{{ record.gpuModel }}</div>
+                                <div class="gpu-memory">{{ record.gpuMemory }}</div>
+                            </div>
+                        </template>
+                        <template v-else-if="column.key === 'gpuInfo'">
+                            <div class="gpu-availability">
+                                <span class="free-count">{{ record.freeGpu }}</span>
+                                <span class="separator">/</span>
+                                <span class="total-count">{{ record.totalGpu }}</span>
+                            </div>
+                        </template>
+                        <template v-else-if="column.key === 'cpuInfo'">
+                            <div class="cpu-memory-info">
+                                <div>CPU：{{ record.cpuCores }}核</div>
+                                <div>内存：{{ record.memory }}GB</div>
+                            </div>
+                        </template>
+                        <template v-else-if="column.key === 'disk'">
+                            <div class="disk-info">
+                                <div>数据盘：{{ record.dataDisk }}GB</div>
+                                <div>可扩容：{{ record.expandableDisk }}GB</div>
+                            </div>
+                        </template>
+                        <template v-else-if="column.key === 'driver'">
+                            <div class="driver-info">
+                                <div>驱动：{{ record.driver }}</div>
+                                <div>CUDA：{{ record.cuda }}</div>
+                            </div>
+                        </template>
+                        <template v-else-if="column.key === 'price'">
+                            <div class="price-info">
+                                <div class="current-price">
+                                    ￥{{ getPrice(record) }}/{{ billingUnit }}
+                                </div>
+                                <div v-if="record.originalPrice" class="original-price">
+                                    ￥{{ getOriginalPrice(record) }}/{{ billingUnit }}
+                                </div>
+                            </div>
+                        </template>
+                    </template>
+                </a-table>
+
+                <!-- 空状态 -->
+                <div v-if="filteredMachineList.length === 0" class="empty-state">
+                    <a-empty description="暂无可用主机，请调整筛选条件" />
+                </div>
+            </div>
+        </a-card>
+
+        <!-- 数据盘 -->
+        <a-card class="card data-disk" title="数据盘配置">
+            <div class="data-disk-content">
+                <div class="disk-base">
+                    <span class="free-disk">免费50GB SSD</span>
+                    <a-checkbox v-model:checked="needExpand">需要扩容</a-checkbox>
+                </div>
+                <div v-if="needExpand" class="disk-expand">
+                    <span class="expand-label">扩容大小:</span>
+                    <a-input-number v-model:value="expandSize" :min="1" :max="maxExpandSize" addon-after="GB"
+                        placeholder="请输入扩容大小" />
+                    <span class="expand-note">最大可扩容 {{ maxExpandSize }}GB</span>
+                </div>
+            </div>
+        </a-card>
+
+        <!-- 实例规格描述 -->
+        <a-card class="card instance-spec" title="实例规格">
+            <div class="spec-content">
+                <div class="spec-item">
+                    <span class="spec-label">GPU型号</span>
+                    <span class="spec-value">{{ selectedGpuModelLabel }} * {{ gpuCount }}卡</span>
+                </div>
+                <div class="spec-item">
+                    <span class="spec-label">CPU</span>
+                    <span class="spec-value">{{ cpuCores }}核心</span>
+                </div>
+                <div class="spec-item">
+                    <span class="spec-label">内存</span>
+                    <span class="spec-value">{{ memory }}GB</span>
+                </div>
+                <div class="spec-item">
+                    <span class="spec-label">系统盘</span>
+                    <span class="spec-value">30GB</span>
+                </div>
+                <div class="spec-item">
+                    <span class="spec-label">数据盘</span>
+                    <span class="spec-value">{{ totalDiskSize }}GB SSD</span>
+                </div>
+            </div>
+        </a-card>
+
+        <!-- 镜像选择 -->
+        <a-card class="card image-selection" title="镜像选择">
+            <a-form layout="vertical">
+                <a-form-item class="image-type">
+                    <a-radio-group v-model:value="imageType" button-style="solid">
+                        <a-radio-button value="platformImage">基础镜像</a-radio-button>
+                        <a-radio-button value="CodeWithGPU">
+                            社区镜像
+                            <a-tag color="red" class="image-tag">hot</a-tag>
+                        </a-radio-button>
+                        <a-radio-button value="customImage">我的镜像</a-radio-button>
+                    </a-radio-group>
+                    <a href="/docs/base_config/" target="_blank" class="config-link">没有我要的环境？</a>
+                </a-form-item>
+
+                <a-form-item v-if="imageType === 'platformImage'">
+                    <div class="basic-image">
+                        <div class="image-tip">
+                            基础镜像包含常用基本软件，如：深度学习框架、Miniconda等。如需其他软件可创建后安装
+                        </div>
+                        <a-cascader v-model:value="selectedImage" :options="imageOptions"
+                            placeholder="请选择框架名称/框架版本/Python版本/CUDA版本" style="width: 400px" :show-search="{ filter }" />
+                    </div>
+                    <div class="note">创建完成后仍然可以更换其他镜像</div>
+                </a-form-item>
+            </a-form>
+        </a-card>
+
+        <!-- 优惠券 -->
+        <a-card class="card coupon-selection" title="优惠券">
+            <div class="coupon-content">
+                <a-select v-model:value="selectedCoupon" placeholder="请选择优惠券" style="width: 200px" allow-clear>
+                    <a-select-option value="">不使用优惠券</a-select-option>
+                    <a-select-option v-for="coupon in availableCoupons" :key="coupon.id" :value="coupon.id">
+                        {{ coupon.name }} - ￥{{ coupon.amount }}
+                    </a-select-option>
+                </a-select>
+                <div class="coupon-balance">
+                    可用优惠券：{{ availableCoupons.length }} 张
+                </div>
+            </div>
+        </a-card>
+
+        <!-- 底部操作栏 -->
+        <div class="footer-actions">
+            <div class="price-summary">
+                <div class="price-main">
+                    <span class="total-label">总计：</span>
+                    <div class="price-display">
+                        <span class="total-price">￥{{ totalPrice }}</span>
+                        <span class="price-unit">/{{ billingUnit }}</span>
+                    </div>
+                    <div v-if="originalTotalPrice" class="original-price-container">
+                        <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>
+                <a-button type="primary" size="large" @click="handleCreate" :loading="creating" :disabled="!canCreate"
+                    class="create-btn">
+                    <template #icon>
+                        <PlusOutlined />
+                    </template>
+                    立即创建
+                </a-button>
+            </div>
+        </div>
+    </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'
+
+// 类型定义
+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(5)
+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 allMachineList = ref<Machine[]>([
+    {
+        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 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: '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: 100
+    },
+    {
+        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: 150
+    },
+    {
+        title: '硬盘',
+        key: 'disk',
+        width: 140,
+        sorter: (a: Machine, b: Machine) => a.dataDisk - b.dataDisk
+    },
+    {
+        title: '驱动/CUDA',
+        key: 'driver',
+        width: 140
+    },
+    {
+        title: '价格(单卡)',
+        key: 'price',
+        width: 140
+    }
+]
+
+// 计算属性
+const cpuCores = computed(() => 25 * gpuCount.value)
+const memory = computed(() => 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 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 (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 * gpuCount.value
+    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 * gpuCount.value
+    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 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 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 = ''
+}
+
+const handleZoneChange = () => {
+    console.log('专区改变:', selectedZone.value)
+    selectedMachineId.value = ''
+}
+
+const handleGpuModelChange = () => {
+    console.log('GPU型号改变:', selectedGpuModels.value)
+    selectedMachineId.value = ''
+}
+
+const handleGpuCountChange = () => {
+    console.log('GPU数量改变:', gpuCount.value)
+    selectedMachineId.value = ''
+}
+
+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 = ''
+    }
+}, { 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]
+}
+
+// 价格明细计算
+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)
+    return coupon ? coupon.amount.toFixed(2) : '0.00'
+})
+
+const showPriceBreakdown = computed(() => {
+    return diskPrice !== '0.00' || couponDiscount !== '0.00'
+})
+</script>
+
+<style scoped>
+.instance-create-container {
+    padding: 24px;
+    /* max-width: 1400px;
+  margin: 0 auto; */
+    background-color: #fff;
+}
+
+.breadcrumb {
+    margin-bottom: 16px;
+}
+
+.autodl-tip {
+    margin-bottom: 24px;
+}
+
+.card {
+    margin-bottom: 24px;
+}
+
+.billing-content {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    margin-bottom: 8px;
+}
+
+.billing-link {
+    font-size: 14px;
+    color: #1890ff;
+    text-decoration: none;
+}
+
+.note {
+    font-size: 12px;
+    color: #666;
+    margin-top: 8px;
+}
+
+.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;
+}
+
+.table-header .total-count {
+    color: #666;
+    font-size: 14px;
+}
+
+.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;
+}
+
+.price-info .current-price {
+    color: #f7412d;
+    font-weight: 500;
+}
+
+.price-info .original-price {
+    text-decoration: line-through;
+    color: #999;
+    font-size: 12px;
+}
+
+.empty-state {
+    padding: 40px 0;
+}
+
+.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;
+}
+
+.config-link {
+    margin-left: 16px;
+    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 {
+  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;
+}
+
+.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;
+}
+
+/* 响应式设计 */
+@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;
+  }
+}
+
+.price-unit {
+    color: #666;
+}
+
+.original-total-price {
+    text-decoration: line-through;
+    color: #999;
+    font-size: 14px;
+}
+
+.action-buttons {
+    display: flex;
+    gap: 12px;
+}
+
+.selected-row {
+    background-color: #f0f7ff !important;
+}
+
+: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;
+}
+</style>
\ No newline at end of file