From bcb9ccc0ceceaabb845f00e9f3539e1b53b45cf6 Mon Sep 17 00:00:00 2001
From: qiuyuan <qiuyuan@yonyou.com>
Date: Fri, 5 Dec 2025 14:48:38 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/admin.ts                             |   5 +-
 .../admin/account/cost/flow/dayDetail.vue     |   8 -
 src/views/admin/instance/index.vue            | 328 ++++++------------
 3 files changed, 104 insertions(+), 237 deletions(-)

diff --git a/src/apis/admin.ts b/src/apis/admin.ts
index c04dd23..ebd7ecf 100644
--- a/src/apis/admin.ts
+++ b/src/apis/admin.ts
@@ -5,4 +5,7 @@ import request from '@/utils/index'
 export const orderList = (params:any) => request.get('/v1/order/pay_list',{params})
 
 // 我的订单
-export const useList = (params:any) => request.get('/v1/order/use_list',{params})
\ No newline at end of file
+export const useList = (params:any) => request.get('/v1/order/use_list',{params})
+
+// 容器实例列表
+export const hostCaseList = (params:any) => request.get('/v1/hostCase/list',{params})
diff --git a/src/views/admin/account/cost/flow/dayDetail.vue b/src/views/admin/account/cost/flow/dayDetail.vue
index a413315..49b1ebe 100644
--- a/src/views/admin/account/cost/flow/dayDetail.vue
+++ b/src/views/admin/account/cost/flow/dayDetail.vue
@@ -41,14 +41,6 @@ import { ref,onBeforeMount } from 'vue'
 import { usePagination } from '@/hooks'
 import { orderList } from '@/apis/admin'
 import dayjs from 'dayjs'
-// const listData=ref([ {title:1}])
-// const paginationState=ref({
-//             total: 0,
-//         current: 1,
-//         pageSize: 10,
-//         showTotal: (total) => `总 ${total} 条数据`,
-//         pageSizeOptions: ['10', '20', '30', '40'],
-// })
 const { listData, loading, showLoading, hideLoading, paginationState, resetPagination, searchFormData } = usePagination()
 const columns = ref([
     { title: '日期', dataIndex: 'created_at', key: 'created_at' },
diff --git a/src/views/admin/instance/index.vue b/src/views/admin/instance/index.vue
index af523dc..9a50cbc 100644
--- a/src/views/admin/instance/index.vue
+++ b/src/views/admin/instance/index.vue
@@ -25,7 +25,7 @@
           </span>
         </div> -->
       </div>
-      
+
       <div class="header-bottom">
         <div class="header-actions">
           <a-button type="primary" @click="handleRent" class="action-btn">租用新实例</a-button>
@@ -35,226 +35,98 @@
           </a-button>
         </div>
         <div class="header-filter">
-          <a-select 
-            placeholder="筛选标签" 
-            style="width: 160px;"
-            size="large"
-          >
+          <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"
-          />
+          <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 />
+      <a-table :dataSource="listData" :columns="columns" bordered :pagination="paginationState" @change="onTableChange">
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'gpu_model'">
+            <div>
+              {{ 'GPU型号:' + record.gpu_model,'GPU数量:' + record.gpu_count ,'单卡显存GB:' + record.gpu_memory_gb , 'CPU核数:' + record.cpu_cores , '内存（MB）:' + record.memory_mb}}
             </div>
-            <div class="empty-text">暂无数据</div>
-            <div class="empty-desc">当前没有实例数据，您可以租用新实例开始使用</div>
-          </div>
+          </template>
         </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';
-
+<script lang="ts" setup>
+import { ref, onBeforeMount } from 'vue'
+import { usePagination } from '@/hooks'
+import { hostCaseList } from '@/apis/admin'
 import { useRouter } from 'vue-router'
+const router = useRouter()
+import dayjs from 'dayjs'
+const { listData, loading, showLoading, hideLoading, paginationState, resetPagination, searchFormData } = usePagination()
+const columns = ref([
+  { title: '实例ID/名称', dataIndex: 'id', key: 'id' },
+  { title: '状态', dataIndex: 'status', key: 'status' },
+  { title: '规格详情', dataIndex: 'gpu_model', key: 'gpu_model' },
+  { title: '本地磁盘', dataIndex: 'system_disk', key: 'system_disk' },
+  { title: '健康状态', dataIndex: 'health_status', key: 'health_status' },
+  { title: '付费方式', dataIndex: 'price_type', key: 'price_type' },
+  { title: '释放时间', dataIndex: 'release_at', key: 'release_at' },
+  { title: '停机时间', dataIndex: 'down_at', key: 'down_at' },
+  { title: 'SSH登陆', dataIndex: 'ssh_link', key: 'ssh_link' },
+  { title: '操作', dataIndex: 'aciton', key: 'aciton' },
+])
+onBeforeMount(() => {
+  getPageList()
 
+})
+const getPageList = async () => {
+  try {
+    const { pageSize, current } = paginationState
+    const res: any = await hostCaseList({ pageSize: pageSize, pageNum: current });
+    listData.value = res.list;
+    paginationState.total = res?.Total;
 
-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,
-  },
+  } catch (error: any) {
+    console.error('产品优势请求失败:', error);
+  }
+}
+/**
+ * 分页
+ */
+function onTableChange({ current, pageSize }) {
+  paginationState.current = current
+  paginationState.pageSize = pageSize
+  getPageList()
+}
+/**
+ * 搜索
+ */
+function handleSearch() {
+  resetPagination()
+  getPageList()
+}
+/**
+ * 重置
+ */
+function handleResetSearch() {
+  searchFormData.value = {}
+  resetPagination()
+  getPageList()
+}
 
-  setup() {
-    const router = useRouter()
-    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 = () => {
-      router.push('/layout/admin/instanceCreate');
-    };
-
-    const handleRenew = () => {
-      console.log('批量续费');
-    };
-
-    const onSearch = (value: string) => {
-      console.log('搜索:', value);
-    };
-
-    return {
-      columns,
-      dataSource,
-      loading,
-      currentPage,
-      pageSize,
-      total,
-      handleRent,
-      handleRenew,
-      onSearch,
-    };
-  },
-});
+// 租用实例
+const handleRent = () => {
+  router.push('/layout/admin/instanceCreate');
+}
 </script>
 
 <style scoped lang="scss">
@@ -279,14 +151,14 @@ export default defineComponent({
   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;
@@ -294,7 +166,7 @@ export default defineComponent({
       line-height: 1.4;
       white-space: nowrap;
     }
-    
+
     .warning-tip {
       display: flex;
       align-items: flex-start;
@@ -303,7 +175,7 @@ export default defineComponent({
       line-height: 1.4;
       flex: 1;
       margin-top: 4px;
-      
+
       .warning-icon {
         margin-right: 8px;
         font-size: 16px;
@@ -312,13 +184,13 @@ export default defineComponent({
       }
     }
   }
-  
+
   .header-quick-actions {
     display: flex;
     gap: 24px;
     align-items: center;
     flex-wrap: wrap;
-    
+
     .quick-action-item {
       display: flex;
       align-items: center;
@@ -328,11 +200,11 @@ export default defineComponent({
       cursor: pointer;
       transition: color 0.3s;
       white-space: nowrap;
-      
+
       &:hover {
         color: #40a9ff;
       }
-      
+
       .quick-action-icon {
         margin-right: 6px;
         font-size: 14px;
@@ -349,18 +221,18 @@ export default defineComponent({
   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;
@@ -369,7 +241,7 @@ export default defineComponent({
       justify-content: center;
     }
   }
-  
+
   .header-filter {
     display: flex;
     gap: 12px;
@@ -388,25 +260,25 @@ export default defineComponent({
   .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;
@@ -415,7 +287,7 @@ export default defineComponent({
     border-radius: 4px;
     font-size: 12px;
   }
-  
+
   :deep(.status-stopped) {
     color: #ff4d4f;
     background: #fff2f0;
@@ -434,24 +306,24 @@ export default defineComponent({
   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;
@@ -466,7 +338,7 @@ export default defineComponent({
       flex-direction: column;
       gap: 12px;
     }
-    
+
     .header-quick-actions {
       gap: 16px;
     }
@@ -477,37 +349,37 @@ export default defineComponent({
   .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%;