From 22ea512030e7bfc516b4ce38944b4342cc888185 Mon Sep 17 00:00:00 2001
From: qiuyuan <qiuyuan@yonyou.com>
Date: Mon, 9 Feb 2026 17:34:29 +0800
Subject: [PATCH] 1

---
 src/views/admin/instance/index.vue | 54 +++++++++++++++++++++++-------
 src/views/instanceCreate/index.vue |  3 ++
 2 files changed, 45 insertions(+), 12 deletions(-)

diff --git a/src/views/admin/instance/index.vue b/src/views/admin/instance/index.vue
index dd58f96..2027bca 100644
--- a/src/views/admin/instance/index.vue
+++ b/src/views/admin/instance/index.vue
@@ -35,7 +35,7 @@
     <!-- 表格 -->
     <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'">
@@ -80,6 +80,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,7 +177,7 @@
 <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'
@@ -212,16 +219,16 @@ const mockData = ref([])
 
 // 表格列定义
 const columns = ref<TableColumnType[]>([
-  { title: '实例ID', dataIndex: 'id', key: 'id', width: 150 },
-  { title: '名称', dataIndex: 'name', key: 'name', width: 180 },
-  { title: '状态', dataIndex: 'status', key: 'status', width: 100 },
-  { title: '规格详情', dataIndex: 'spec', key: 'spec', width: 200 },
-  { title: '健康状态', dataIndex: 'health_status', key: 'health_status', width: 120 },
-  { title: '付费方式', dataIndex: 'price_type', key: 'price_type', width: 120 },
-  { title: '释放时间', dataIndex: 'release_at', key: 'release_at', width: 120 },
-  { title: '停机时间', dataIndex: 'down_at', key: 'down_at', width: 120 },
-  { title: 'SSH登录', dataIndex: 'ssh_link', key: 'ssh_link', width: 150 },
-  { title: '操作', key: 'actions', width: 150 }
+  { title: '实例ID', dataIndex: 'id', key: 'id', width: 100,fixed: 'left' },
+  { title: '名称', dataIndex: 'name', key: 'name', width: 200 },
+  { title: '状态', dataIndex: 'status', key: 'status', width: 200 },
+  { title: '规格详情', dataIndex: 'spec', key: 'spec', width: 250 },
+  { title: '健康状态', dataIndex: 'health_status', key: 'health_status', width: 250 },
+  { title: '付费方式', dataIndex: 'price_type', key: 'price_type', width: 250 },
+  { title: '释放时间', dataIndex: 'release_at', key: 'release_at', width: 250 },
+  { title: '停机时间', dataIndex: 'down_at', key: 'down_at', width: 250 },
+  { title: 'SSH登录', dataIndex: 'ssh_link', key: 'ssh_link', width: 250 },
+  { title: '操作', key: 'actions', width: 150,fixed:'right' }
 ])
 
 const getDataList = async () => {
@@ -309,6 +316,10 @@ const handleMenuClick = (key: string, record: any) => {
     case 'log':
       message.info('跳转到日志页面')
       break
+
+    case 'jupyterlab':
+      handleJupyterLab(record)
+      break
   }
 }
 
@@ -371,6 +382,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){
+        const baseUrl = `http://${linkObj.proxy_host}:5784/jupyter?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
 })
diff --git a/src/views/instanceCreate/index.vue b/src/views/instanceCreate/index.vue
index 90b03d8..8922cba 100644
--- a/src/views/instanceCreate/index.vue
+++ b/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
         }