fix: 修改env断开session连接操作

7 files changed, 148 insertions, 101 deletions

diff --git a/public/config.json b/public/config.json
index 3f2ebcb..7ae4efd 100644
--- a/public/config.json
+++ b/public/config.json
@@ -1,3 +1,3 @@
 {
-  "baseUrl": "http://192.168.45.60/"
+  "baseUrl": "/"
 }
diff --git a/src/axios/index.js b/src/axios/index.js
index 5c0c736..a2d4006 100644
--- a/src/axios/index.js
+++ b/src/axios/index.js
@@ -1,13 +1,25 @@
 import axios from 'axios';
 import { includes } from 'lodash';
-import { logoutClear } from '@/utils/index';
+import { isDev, logoutClear } from '@/utils/index';
 
 const axiosInstance = axios.create({
   baseURL: '/',
 });
 
-const fetchAllowList = [
-];
+export async function setBaseUrl() {
+  let baseUrl;
+  if (isDev()) {
+    baseUrl = 'http://192.168.45.60/';
+  } else {
+    // 获取本地的config.json
+    const url = '/config.json?timestamp=' + new Date().getTime();
+    const result = await axiosInstance.get(url);
+    baseUrl = result.data.baseUrl;
+  }
+  axiosInstance.defaults.baseURL = baseUrl;
+}
+
+const fetchAllowList = [];
 
 axiosInstance.interceptors.request.use(
   (config) => {
@@ -50,12 +62,4 @@ axiosInstance.interceptors.response.use(
   }
 );
 
-export async function setBaseUrl() {
-  // 获取本地的config.json
-  const url = '/config.json?timestamp=' + new Date().getTime();
-  const result = await axiosInstance.get(url);
-  let baseUrl = result.data.baseUrl;
-  axiosInstance.defaults.baseURL = baseUrl;
-}
-
 export default axiosInstance;
diff --git a/src/components/codemirror/index.vue b/src/components/codemirror/index.vue
index 1562b4a..f1927ea 100644
--- a/src/components/codemirror/index.vue
+++ b/src/components/codemirror/index.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted, watch, onUnmounted, toRefs } from 'vue';
+import { ref, onMounted, watch, onBeforeUnmount, toRefs } from 'vue';
 import { useSystemStore } from '@/store/index';
 import Codemirror from 'codemirror-editor-vue3';
 // language
@@ -128,7 +128,7 @@ const editor = ref(null);
 onMounted(() => {
   editor.value?.cminstance?.on('keyup', showHint);
 });
-onUnmounted(() => {
+onBeforeUnmount(() => {
   editor.value?.cminstance?.off('keyup', showHint);
 });
 
diff --git a/src/components/monaco/index.vue b/src/components/monaco/index.vue
index 0ae61e2..98b0626 100644
--- a/src/components/monaco/index.vue
+++ b/src/components/monaco/index.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted, watch, onUnmounted, computed } from 'vue';
+import { ref, onMounted, watch, onBeforeUnmount, computed } from 'vue';
 import { useSystemStore } from '@/store/index';
 import { schema } from './schema';
 import * as monaco from 'monaco-editor';
@@ -117,7 +117,7 @@ watch(
 onMounted(() => {
   initEditor();
 });
-onUnmounted(() => {
+onBeforeUnmount(() => {
   editor.dispose();
 });
 
diff --git a/src/router/permissions.js b/src/router/permissions.js
index d8f2bac..6f913bf 100644
--- a/src/router/permissions.js
+++ b/src/router/permissions.js
@@ -72,6 +72,11 @@ const systemRoutes = {
       component: () => import('@/views/environments/index.vue'),
     },
     {
+      path: '/:workspace?/environments/:id/:sessionId/start',
+      name: 'environment_start',
+      component: () => import('@/views/environments/start.vue'),
+    },
+    {
       path: '/envMgts',
       name: 'envMgts',
       component: () => import('@/views/envMgts/index.vue'),
@@ -87,11 +92,6 @@ const systemRoutes = {
       component: () => import('@/views/envMgts/detail.vue'),
     },
     {
-      path: '/:workspace?/environments/:id/:sessionId/start',
-      name: 'environment_start',
-      component: () => import('@/views/environments/start.vue'),
-    },
-    {
       path: '/:workspace?/workspace/members',
       name: 'workspace_members',
       component: () => import('@/views/workspaces/members/index.vue'),
diff --git a/src/views/environments/index.vue b/src/views/environments/index.vue
index 8c726eb..782cb04 100644
--- a/src/views/environments/index.vue
+++ b/src/views/environments/index.vue
@@ -119,29 +119,30 @@
           <template #default="scope">
             <template v-if="scope.row.status === 1">
               <el-button
-                      v-has="'environment_start'"
-
-                      type="primary"
-                      class="environment-start"
-                      @click="start(scope.row.id)"
+                v-has="'environment_start'"
+                type="primary"
+                class="environment-start"
+                @click="start(scope.row.id)"
               >
                 <i class="asw-icon icon-start"></i>
                 {{ t('environment.start') }}
               </el-button>
             </template>
             <template v-else-if="scope.row.status === 2">
-              <el-button v-if="isSelfInUse(scope.row.session)"
-                         type="danger"
-                         class="environment-end"
-                         @click="endSession(scope.row)"
+              <el-button
+                v-if="isSelfInUse(scope.row.session)"
+                type="danger"
+                class="environment-end"
+                @click="endSession(scope.row)"
               >
                 <i class="asw-icon icon-End"></i>
                 {{ t('environment.end') }}
               </el-button>
-              <el-button v-else
-                      v-has="'environment_busy'"
-                      type="primary"
-                      class="environment-busy"
+              <el-button
+                v-else
+                v-has="'environment_busy'"
+                type="primary"
+                class="environment-busy"
               >
                 <i class="asw-icon icon-busy"></i>
                 {{ t('environment.busy') }}
@@ -155,15 +156,23 @@
 </template>
 
 <script setup>
-import { ref, reactive, onBeforeMount, computed, watch } from 'vue';
+import {
+  ref,
+  reactive,
+  onBeforeMount,
+  onBeforeUnmount,
+  computed,
+  watch,
+} from 'vue';
 import { useI18n } from 'vue-i18n';
 import {
   environmentListApi,
   myEnvironmentsListApi,
   environmentSessionApi,
-  environmentEndSessionApi} from '@/axios/api';
+  environmentEndSessionApi,
+} from '@/axios/api';
 import { ElMessage } from 'element-plus';
-import { toThousands, bytes } from '@/utils';
+import { toThousands, bytes, getUUID } from '@/utils';
 import { useSystemStore } from '@/store/index';
 import { useTable } from '@/hooks/useTable';
 import { useRouter } from 'vue-router';
@@ -235,13 +244,16 @@ const paginat = reactive({
 
 const disabledLoad = computed(() => loading.value || paginat.noMore);
 const isSelfInUse = computed(() => {
-  return (item)=> {
-    if(item && item.user && item.workspace) {
-      return item.user.id === userInfo.value.id && item.workspace.id ===  workspace.value.id;
+  return (item) => {
+    if (item && item.user && item.workspace) {
+      return (
+        item.user.id === userInfo.value.id &&
+        item.workspace.id === workspace.value.id
+      );
     } else {
       return false;
     }
-  }
+  };
 });
 
 const showAllEnvironmentList = () => {
@@ -260,22 +272,6 @@ const showEnvironmentList = (reset) => {
   } else {
     fetchMyList(reset);
   }
-}
-
-const endSession = async (row) => {
-  const params = {
-    workspaceId: workspace.value.id,
-  };
-  const res = await environmentEndSessionApi(
-      row.id,
-      row.session.id,
-      params
-  );
-  if (res.code == 200) {
-    showEnvironmentList();
-  } else {
-    ElMessage.error(res.msg || res.error);
-  }
 };
 
 const loadMore = () => {
@@ -354,7 +350,10 @@ const selectionChange = (val) => {
 
 const defaultSort = { prop: 'createTimestamp', order: 'descending' };
 // 排序
-const { orderBy, sortChange } = useTable('-create_timestamp', showEnvironmentList);
+const { orderBy, sortChange } = useTable(
+  '-create_timestamp',
+  showEnvironmentList
+);
 
 // 用户信息
 const userInfo = ref({});
@@ -371,6 +370,15 @@ const fileSize = (number) => {
   return data.value + ' ' + data.unit;
 };
 
+const packets = (summary) => {
+  let res;
+  try {
+    const packets = JSON.parse(summary).packets;
+    res = packets;
+  } catch (error) {}
+  return res;
+};
+
 // 启动
 const start = async (id) => {
   const params = {
@@ -387,20 +395,34 @@ const start = async (id) => {
         sessionId: res.data.record,
       },
     });
-    window.open(routeData.href, '_blank');
+    window.open(routeData.href, 'start' + id);
+  } else {
+    ElMessage.error(res.msg || res.error);
+  }
+};
+// 结束
+const endSession = async (row) => {
+  const params = {
+    workspaceId: workspace.value.id,
+  };
+  const res = await environmentEndSessionApi(row.id, row.session.id, params);
+  if (res.code == 200) {
+    showEnvironmentList();
   } else {
     ElMessage.error(res.msg || res.error);
   }
 };
 
-const packets = (summary) => {
-  let res;
-  try {
-    const packets = JSON.parse(summary).packets;
-    res = packets;
-  } catch (error) {}
-  return res;
+// 监听子页面点击end
+const childEnd = (e) => {
+  if (e.data.name == 'start') {
+    showEnvironmentList();
+  }
 };
+window.addEventListener('message', childEnd);
+onBeforeUnmount(() => {
+  window.removeEventListener('message', childEnd);
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/environments/start.vue b/src/views/environments/start.vue
index 918bd39..81552fb 100644
--- a/src/views/environments/start.vue
+++ b/src/views/environments/start.vue
@@ -3,7 +3,7 @@
     <div class="desktop-left">
       <div class="environment-header">
         <span>{{ environmentInfo.name }}</span>
-        <span>
+        <span v-show="environmentInfo.location">
           <span>{{ t('environment.location') }}: </span>
           <span>{{ environmentInfo.location }}</span>
         </span>
@@ -289,7 +289,7 @@
 
 <script setup>
 import { useRouter } from 'vue-router';
-import { ref, onMounted, onUnmounted, computed, reactive } from 'vue';
+import { ref, onMounted, onBeforeUnmount, computed, reactive } from 'vue';
 import { useI18n } from 'vue-i18n';
 import RFB from '@novnc/novnc/lib/rfb';
 import mitter from '@/utils/mitter';
@@ -557,6 +557,20 @@ const fileSize = (number) => {
   return data.value + ' ' + data.unit;
 };
 
+// 获取设备信息
+const loading = ref(false);
+const environmentInfo = ref({});
+const getData = async () => {
+  loading.value = true;
+  const res = await environmentDetailApi(routeParams.id);
+  if (res.code == 200) {
+    environmentInfo.value = res.data.record;
+  } else {
+    ElMessage.error(res.msg || res.error);
+  }
+  loading.value = false;
+};
+
 // 连接novnc
 const novncRef = ref(null);
 let rfb = null;
@@ -568,7 +582,7 @@ const connect = () => {
     window.location.protocol.indexOf('https') > -1 ? 'wss' : 'ws';
   let url = '';
   if (baseURL.startsWith('/')) {
-    url = `${protocol}://` + window.location.host + baseURL;
+    url = `${protocol}://${window.location.host}${baseURL}`;
   } else {
     url = baseURL.replace('http://', 'ws://').replace('https://', 'wss://');
   }
@@ -593,22 +607,49 @@ const connect = () => {
   rfb.qualityLevel = 9; // 是一个范围为[0-9]的整数，控制所需的JPEG质量。0表示低质量，9表示高质量。
 
   rfb._sock._websocket.onclose = (err) => {
-    ElMessage.error(err.reason);
+    if (err.reason) {
+      ElMessage.error(err.reason);
+    }
+    desktopEnd();
   };
 };
 
-// 获取设备信息
-const loading = ref(false);
-const environmentInfo = ref({});
-const getData = async () => {
-  loading.value = true;
-  const res = await environmentDetailApi(routeParams.id);
+const desktopEnd = () => {
+  childEnd();
+  window.close();
+  // Scripts may close only the windows that were opened by it
+  router.replace({
+    name: 'environments',
+    params: {
+      workspace: workspace.value.name,
+    },
+  });
+};
+
+// 结束会话
+mitter.on('desktopEnd', async () => {
+  const params = {
+    workspaceId: workspace.value.id,
+  };
+  const res = await environmentEndSessionApi(
+    routeParams.id,
+    routeParams.sessionId,
+    params
+  );
   if (res.code == 200) {
-    environmentInfo.value = res.data.record;
+    desktopEnd();
   } else {
     ElMessage.error(res.msg || res.error);
   }
-  loading.value = false;
+});
+
+// 向父页面发送end消息
+const childEnd = () => {
+  if (window.opener) {
+    window.opener.postMessage({
+      name: 'start',
+    });
+  }
 };
 
 const environmentBack = (e) => {
@@ -626,35 +667,15 @@ const environmentMenu = () => {
   rfb.sendKey('0xff1b', 'Escape', false);
 };
 
-const destroy = () => {
-  mitter.off('desktopEnd');
-  rfb.disconnect();
-};
-// 结束会话
-mitter.on('desktopEnd', async () => {
-  const params = {
-    workspaceId: workspace.value.id,
-  };
-  const res = await environmentEndSessionApi(
-    routeParams.id,
-    routeParams.sessionId,
-    params
-  );
-  if (res.code == 200) {
-    destroy();
-    window.close();
-  } else {
-    ElMessage.error(res.msg || res.error);
-  }
-});
 onMounted(async () => {
   getAppList();
   getDirectory(directoryPath.value);
   getData();
   connect();
 });
-onUnmounted(() => {
-  destroy();
+onBeforeUnmount(() => {
+  mitter.off('desktopEnd');
+  rfb.disconnect();
 });
 </script>