Merge branch 'main' of https://gitlab.guxuan.icu/Leo_Ding/GPU_Web

src/views/admin/instance/index.vue

@@ -35,11 +35,12 @@
     <!-- 表格 -->
     <div class="table-container">
       <a-table :dataSource="mockData" :columns="columns" bordered :pagination="paginationState" :loading="loading"
-        @change="onTableChange">
+        @change="onTableChange" :scroll="{ x: 'max-content' }">
         <!-- 状态列 -->
         <template #bodyCell="{ column, record }">
           <template v-if="column.key === 'status'">
-            <span :style="{ color: instanceStatus.get(record.status)?.color }">{{ instanceStatus.get(record.status)?.text
+            <span :style="{ color: instanceStatus.get(record.status)?.color }">{{
+              instanceStatus.get(record.status)?.text
             }}</span>
           </template>
 
@@ -66,6 +67,18 @@
               {{ payTypeDic.get(record.price_type) }}
             </span>
           </template>
+
+          <template v-else-if="column.key === 'ssh_link'">
+            <span>
+              {{
+                record.ssh_link
+                  ? JSON.parse(record.ssh_link)?.root_password|| 'N/A'
+              : 'N/A'
+              }}
+            </span>
+          </template>
+                        
+
           <!-- 操作列 -->
           <template v-else-if="column.key === 'actions'">
             <div class="action-buttons">
@@ -80,6 +93,13 @@
               <a-dropdown :trigger="['click']">
                 <template #overlay>
                   <a-menu @click="({ key }) => handleMenuClick(key, record)">
+                    <a-menu-item key="jupyterlab">
+                      <template #icon>
+                        <CheckCircleOutlined />
+                      </template>
+                      jupyterlab
+                    </a-menu-item>
+
                     <a-menu-item key="reset">
                       <template #icon>
                         <redo-outlined />
@@ -170,12 +190,11 @@
 <script lang="ts" setup>
 import { ref, onMounted, computed } from 'vue'
 import { useRouter } from 'vue-router'
-import { ExclamationCircleOutlined, ReloadOutlined, EyeOutlined, DownOutlined, RedoOutlined, DeleteOutlined } from '@ant-design/icons-vue'
+import { ExclamationCircleOutlined, ReloadOutlined, EyeOutlined, DownOutlined, RedoOutlined, DeleteOutlined, CheckCircleOutlined } from '@ant-design/icons-vue'
 import type { TableColumnType } from 'ant-design-vue'
 import { message } from 'ant-design-vue'
 import { hostCaseList } from '@/apis/admin'
 import { releaseCase, reStartCase } from '@/apis/home'
-import { get } from 'http'
 import { payTypeDic, instanceStatus } from '@/utils/dict'
 const router = useRouter()
 
@@ -212,16 +231,16 @@ const mockData = ref([])
 
 // 表格列定义
 const columns = ref<TableColumnType[]>([
-  { title: '实例ID', dataIndex: 'id', key: 'id', width: 150 },
+  { title: '实例ID', dataIndex: 'id', key: 'id', width: 100, fixed: 'left' },
-  { title: '名称', dataIndex: 'name', key: 'name', width: 180 },
+  { title: '名称', dataIndex: 'name', key: 'name', width: 200 },
-  { title: '状态', dataIndex: 'status', key: 'status', width: 100 },
+  { title: '状态', dataIndex: 'status', key: 'status', width: 200 },
-  { title: '规格详情', dataIndex: 'spec', key: 'spec', width: 200 },
+  { title: '规格详情', dataIndex: 'spec', key: 'spec', width: 250 },
-  { title: '健康状态', dataIndex: 'health_status', key: 'health_status', width: 120 },
+  { title: '健康状态', dataIndex: 'health_status', key: 'health_status', width: 250 },
-  { title: '付费方式', dataIndex: 'price_type', key: 'price_type', width: 120 },
+  { title: '付费方式', dataIndex: 'price_type', key: 'price_type', width: 250 },
-  { title: '释放时间', dataIndex: 'release_at', key: 'release_at', width: 120 },
+  { title: '释放时间', dataIndex: 'release_at', key: 'release_at', width: 250 },
-  { title: '停机时间', dataIndex: 'down_at', key: 'down_at', width: 120 },
+  { title: '停机时间', dataIndex: 'down_at', key: 'down_at', width: 250 },
-  { title: 'SSH登录', dataIndex: 'ssh_link', key: 'ssh_link', width: 150 },
+  { title: 'SSH登录', dataIndex: 'ssh_link', key: 'ssh_link', width: 250 },
-  { title: '操作', key: 'actions', width: 150 }
+  { title: '操作', key: 'actions', width: 150, fixed: 'right' }
 ])
 
 const getDataList = async () => {
@@ -309,6 +328,10 @@ const handleMenuClick = (key: string, record: any) => {
     case 'log':
       message.info('跳转到日志页面')
       break
+
+    case 'jupyterlab':
+      handleJupyterLab(record)
+      break
   }
 }
 
@@ -371,6 +394,25 @@ const handleRent = () => {
   router.push('/layout/market')
 }
 
+
+const handleJupyterLab = async (record: any) => {
+  try {
+    if (record.ssh_link) {
+      const linkObj = JSON.parse(record.ssh_link)
+      if (linkObj.proxy_host && linkObj.jupyter_token && linkObj.jupyter_port) {
+        const baseUrl = `http://${linkObj.proxy_host}:${linkObj.jupyter_port}/jupyter/lab?token=${linkObj.jupyter_token}`
+        console.log("====", baseUrl)
+        window.open(baseUrl, '_blank', 'noopener,noreferrer')
+      }
+    }
+
+  } catch (error) {
+    console.error('打开 JupyterLab 失败:', error)
+    message.error('打开 JupyterLab 失败，请稍后重试')
+  }
+}
+
+
 onMounted(() => {
   paginationState.value.total = mockData.value.length
 })

src/views/instanceCreate/index.vue

@@ -328,6 +328,9 @@ const handleCreate = async () => {
             return false;
         } else {
             message.success('实例创建成功！')
+            setTimeout(()=>{
+                router.push('/layout/admin/instance')
+            },1500)
             creating.value = false
         }