From eaa5e5e65ddc180b249285b50bbe40a90ec61c42 Mon Sep 17 00:00:00 2001
From: chaoszhu <ggchaos1022@gmail.com>
Date: Fri, 19 Jul 2024 12:04:29 +0800
Subject: [PATCH] =?UTF-8?q?:bug:=20=E4=BF=AE=E5=A4=8Dsocket=E5=93=8D?=
 =?UTF-8?q?=E5=BA=94=E6=95=B0=E6=8D=AEbug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/.eslintrc.js                              |   2 +-
 web/src/store/index.js                        |  13 +-
 web/src/views/group/index.vue                 |  23 +-
 web/src/views/index.vue                       |  20 +-
 web/src/views/server/components/host-form.vue |  19 +-
 web/src/views/server/index.vue                |  54 ++--
 web/src/views/terminal/index-old.vue          | 264 ++++++++++++++++
 web/src/views/terminal/index.vue              | 281 +++---------------
 8 files changed, 360 insertions(+), 316 deletions(-)
 create mode 100644 web/src/views/terminal/index-old.vue

diff --git a/web/.eslintrc.js b/web/.eslintrc.js
index 4e84b1f..8f105df 100644
--- a/web/.eslintrc.js
+++ b/web/.eslintrc.js
@@ -9,7 +9,7 @@ module.exports = {
   parser: 'vue-eslint-parser',
   parserOptions: {
     // parser: 'babel-eslint',
-    ecmaVersion: 2020,
+    ecmaVersion: 2022,
     sourceType: 'module',
     ecmaFeatures: {
       'jsx': true
diff --git a/web/src/store/index.js b/web/src/store/index.js
index 84fb1e4..7000824 100644
--- a/web/src/store/index.js
+++ b/web/src/store/index.js
@@ -29,13 +29,24 @@ const useStore = defineStore({
       sessionStorage.clear('token')
       this.$patch({ token: null })
     },
-    async getHostList() {
+    async getMainData() {
       const { data: groupList } = await $api.getGroupList()
       const { data: hostList } = await $api.getHostList()
+      // const { data: sshList } = await $api.getSshList()
       // console.log('hostList:', hostList)
       // console.log('groupList:', groupList)
       this.$patch({ hostList, groupList })
     },
+    async getHostList() {
+      const { data: hostList } = await $api.getHostList()
+      // console.log('hostList:', hostList)
+      this.$patch({ hostList })
+    },
+    async getGroupList() {
+      const { data: groupList } = await $api.getGroupList()
+      // console.log('groupList:', groupList)
+      this.$patch({ groupList })
+    },
     getHostPing() {
       setTimeout(() => {
         this.hostList.forEach((item) => {
diff --git a/web/src/views/group/index.vue b/web/src/views/group/index.vue
index 4ecf255..cb93a86 100644
--- a/web/src/views/group/index.vue
+++ b/web/src/views/group/index.vue
@@ -122,13 +122,12 @@
 </template>
 
 <script setup>
-import { ref, reactive, computed, onMounted, getCurrentInstance } from 'vue'
+import { ref, reactive, computed, getCurrentInstance } from 'vue'
 
 const { proxy: { $api, $message, $messageBox, $store } } = getCurrentInstance()
 
 const loading = ref(false)
 const visible = ref(false)
-const groupList = ref([])
 const groupForm = reactive({
   name: '',
   index: ''
@@ -167,15 +166,7 @@ const list = computed(() => {
   })
 })
 
-const getGroupList = () => {
-  loading.value = true
-  $api.getGroupList()
-    .then(({ data }) => {
-      groupList.value = data
-      // groupForm.index = data.length
-    })
-    .finally(() => loading.value = false)
-}
+let groupList = computed(() => $store.groupList || [])
 
 const addGroup = () => {
   groupFormRef.value.validate()
@@ -186,7 +177,8 @@ const addGroup = () => {
           $message.success('success')
           groupForm.name = ''
           groupForm.index = ''
-          getGroupList()
+          $store.getGroupList()
+          groupFormRef.value.resetFields()
         })
     })
 }
@@ -206,7 +198,7 @@ const updateGroup = () => {
         .then(() => {
           $message.success('success')
           visible.value = false
-          getGroupList()
+          $store.getGroupList()
         })
     })
 }
@@ -220,14 +212,11 @@ const deleteGroup = ({ id, name }) => {
     .then(async () => {
       await $api.deleteGroup(id)
       await $store.getHostList()
+      await $store.getGroupList()
       $message.success('success')
-      getGroupList()
     })
 }
 
-onMounted(() => {
-  getGroupList()
-})
 </script>
 
 <style lang="scss" scoped>
diff --git a/web/src/views/index.vue b/web/src/views/index.vue
index dc5daa5..285c235 100644
--- a/web/src/views/index.vue
+++ b/web/src/views/index.vue
@@ -3,7 +3,7 @@
     <AsideBox />
     <div class="main_container">
       <TopBar />
-      <router-view v-slot="{ Component }" class="router_box">
+      <router-view v-slot="{ Component }" v-loading="loading" class="router_box">
         <keep-alive>
           <component :is="Component" />
         </keep-alive>
@@ -13,8 +13,26 @@
 </template>
 
 <script setup>
+import { ref, onBeforeMount, getCurrentInstance } from 'vue'
 import AsideBox from '@/components/aside-box.vue'
 import TopBar from '@/components/top-bar.vue'
+
+const { proxy: { $store } } = getCurrentInstance()
+const loading = ref(true)
+
+const getMainData = async () => {
+  try {
+    loading.value = true
+    await $store.getMainData()
+  } finally {
+    loading.value = false
+  }
+}
+
+onBeforeMount(async () => {
+  await getMainData()
+})
+
 </script>
 
 <style lang="scss" scoped>
diff --git a/web/src/views/server/components/host-form.vue b/web/src/views/server/components/host-form.vue
index be91e58..1cbed5e 100644
--- a/web/src/views/server/components/host-form.vue
+++ b/web/src/views/server/components/host-form.vue
@@ -113,9 +113,9 @@
 </template>
 
 <script setup>
-import { ref, reactive, computed, watch, getCurrentInstance, nextTick } from 'vue'
+import { ref, reactive, computed, getCurrentInstance, nextTick } from 'vue'
 
-const { proxy: { $api, $message } } = getCurrentInstance()
+const { proxy: { $api, $message, $store } } = getCurrentInstance()
 
 const props = defineProps({
   show: {
@@ -143,7 +143,6 @@ const resetForm = () => ({
 
 const hostForm = reactive(resetForm())
 const oldHost = ref('')
-const groupList = ref([])
 const rules = reactive({
   group: { required: true, message: '选择一个分组' },
   name: { required: true, message: '输入主机别名', trigger: 'change' },
@@ -164,17 +163,7 @@ const visible = computed({
 
 const title = computed(() => props.defaultData ? '修改服务器' : '新增服务器')
 
-watch(() => props.show, (newVal) => {
-  if (!newVal) return
-  getGroupList()
-})
-
-const getGroupList = () => {
-  $api.getGroupList()
-    .then(({ data }) => {
-      groupList.value = data
-    })
-}
+let groupList = computed(() => $store.groupList || [])
 
 const handleClosed = () => {
   // console.log('handleClosed')
@@ -185,7 +174,7 @@ const handleClosed = () => {
 
 const setDefaultData = () => {
   if (!props.defaultData) return
-  console.log(props.defaultData)
+  // console.log(props.defaultData)
   let { name, host, index, expired, expiredNotify, consoleUrl, group, remark } = props.defaultData
   oldHost.value = host
   Object.assign(hostForm, { name, host, index, expired, expiredNotify, consoleUrl, group, remark })
diff --git a/web/src/views/server/index.vue b/web/src/views/server/index.vue
index fd00fbe..a9292d4 100644
--- a/web/src/views/server/index.vue
+++ b/web/src/views/server/index.vue
@@ -8,7 +8,7 @@
     </div>
     <div class="server_group_collapse">
       <el-collapse v-model="activeGroup">
-        <el-collapse-item v-for="(servers, groupName) in resList" :key="groupName" :name="groupName">
+        <el-collapse-item v-for="(servers, groupName) in groupHostList" :key="groupName" :name="groupName">
           <template #title>
             <div class="group_title">
               {{ groupName }}
@@ -37,40 +37,21 @@
 </template>
 
 <script setup>
-import { ref, onMounted, onBeforeUnmount, getCurrentInstance, reactive, computed, watch } from 'vue'
+import { ref, onBeforeUnmount, getCurrentInstance, computed, watch, onMounted } from 'vue'
 import { io } from 'socket.io-client'
 import HostForm from './components/host-form.vue'
-import Setting from './components/setting.vue'
 import HostCard from './components/host-card.vue'
 
-const { proxy: { $api, $store, $message, $notification, $router, $serviceURI } } = getCurrentInstance()
+const { proxy: { $store, $notification, $router, $serviceURI, $message } } = getCurrentInstance()
 
 const socket = ref(null)
-const loading = ref(true)
-const hostListStatus = ref([])
 const updateHostData = ref(null)
 const hostFormVisible = ref(false)
-const settingVisible = ref(false)
 const hiddenIp = ref(Number(localStorage.getItem('hiddenIp') || 0))
 const activeGroup = ref([])
 
-const handleLogout = () => {
-  $store.clearJwtToken()
-  $message({ type: 'success', message: '已安全退出', center: true })
-  $router.push('/login')
-}
-
-const getHostList = async () => {
-  try {
-    loading.value = true
-    await $store.getHostList()
-    connectIo()
-  } catch (err) {
-    loading.value = false
-  }
-}
-
 const connectIo = () => {
+  if (socket.value) socket.value.close()
   let socketInstance = io($serviceURI, {
     path: '/clients',
     forceNew: true,
@@ -80,16 +61,15 @@ const connectIo = () => {
   socket.value = socketInstance
   socketInstance.on('connect', () => {
     let flag = 5
-    loading.value = false
     console.log('clients websocket 已连接: ', socketInstance.id)
     let token = $store.token
     socketInstance.emit('init_clients_data', { token })
     socketInstance.on('clients_data', (data) => {
       if ((flag++ % 5) === 0) $store.getHostPing()
-      hostListStatus.value = $store.hostList.map(item => {
+      $store.hostList.forEach(item => {
         const { host } = item
         if (data[host] === null) return { ...item }
-        return Object.assign({}, item, data[host])
+        return Object.assign(item, data[host])
       })
     })
     socketInstance.on('token_verify_fail', (message) => {
@@ -105,14 +85,18 @@ const connectIo = () => {
     console.error('clients websocket 连接断开')
   })
   socketInstance.on('connect_error', (message) => {
-    loading.value = false
     console.error('clients websocket 连接出错: ', message)
   })
 }
 
-const handleUpdateList = () => {
-  if (socket.value) socket.value.close()
-  getHostList()
+const handleUpdateList = async () => {
+  try {
+    await $store.getHostList()
+    // connectIo()
+  } catch (err) {
+    $message.error('获取主机列表失败')
+    console.error('获取主机列表失败: ', err)
+  }
 }
 
 const handleUpdateHost = (defaultData) => {
@@ -125,7 +109,7 @@ const handleHiddenIP = () => {
   localStorage.setItem('hiddenIp', String(hiddenIp.value))
 }
 
-let resList = computed(() => {
+let groupHostList = computed(() => {
   let res = {}
   let hostList = $store.hostList
   let groupList = $store.groupList
@@ -146,15 +130,15 @@ let resList = computed(() => {
   return res
 })
 
-watch(resList, () => {
-  activeGroup.value = [...Object.keys(resList.value),]
+watch(groupHostList, () => {
+  activeGroup.value = [...Object.keys(groupHostList.value),]
 }, {
   immediate: true,
   deep: false
 })
 
-onMounted(async () => {
-  await getHostList()
+onMounted(() => {
+  connectIo()
 })
 
 onBeforeUnmount(() => {
diff --git a/web/src/views/terminal/index-old.vue b/web/src/views/terminal/index-old.vue
new file mode 100644
index 0000000..6c13026
--- /dev/null
+++ b/web/src/views/terminal/index-old.vue
@@ -0,0 +1,264 @@
+<template>
+  <div class="container">
+    <InfoSide
+      ref="infoSideRef"
+      v-model:show-input-command="showInputCommand"
+      :token="token"
+      :host="host"
+      :visible="visible"
+      @connect-sftp="connectSftp"
+      @click-input-command="clickInputCommand"
+    />
+    <section>
+      <div class="terminals">
+        <el-button class="full-screen-button" type="success" @click="handleFullScreen">
+          {{ isFullScreen ? '退出全屏' : '全屏' }}
+        </el-button>
+        <div class="visible" @click="handleVisibleSidebar">
+          <svg-icon name="icon-jiantou_zuoyouqiehuan" class="svg-icon" />
+        </div>
+        <el-tabs
+          v-model="activeTab"
+          type="border-card"
+          addable
+          tab-position="top"
+          @tab-remove="removeTab"
+          @tab-change="tabChange"
+          @tab-add="tabAdd"
+        >
+          <el-tab-pane
+            v-for="item in terminalTabs"
+            :key="item.key"
+            :label="item.title"
+            :name="item.key"
+            :closable="closable"
+          >
+            <TerminalTab
+              ref="terminalTabRefs"
+              :token="token"
+              :host="host"
+              :tab-key="item.key"
+            />
+          </el-tab-pane>
+        </el-tabs>
+      </div>
+      <div v-if="showSftp" class="sftp">
+        <SftpFooter :token="token" :host="host" @resize="resizeTerminal" />
+      </div>
+    </section>
+    <InputCommand v-model:show="showInputCommand" @input-command="handleInputCommand" />
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, computed, onBeforeMount, getCurrentInstance } from 'vue'
+import TerminalTab from './components/terminal-tab.vue'
+import InfoSide from './components/info-side.vue'
+import SftpFooter from './components/sftp-footer.vue'
+import InputCommand from '@/components/input-command/index.vue'
+
+const { proxy: { $store, $router, $route, $nextTick } } = getCurrentInstance()
+
+const name = ref('')
+const host = ref('')
+const token = $store.token
+const activeTab = ref('')
+const terminalTabs = reactive([])
+const isFullScreen = ref(false)
+const timer = ref(null)
+const showSftp = ref(false)
+const showInputCommand = ref(false)
+const visible = ref(true)
+const infoSideRef = ref(null)
+const terminalTabRefs = ref([])
+
+const closable = computed(() => terminalTabs.length > 1)
+
+onBeforeMount(() => {
+  if (!token) return $router.push('login')
+  let { host: routeHost, name: routeName } = $route.query
+  name.value = routeName
+  host.value = routeHost
+  document.title = `${ document.title }-${ routeName }`
+  let key = Date.now().toString()
+  terminalTabs.push({ title: routeName, key })
+  activeTab.value = key
+  registryDbClick()
+})
+
+// const windowBeforeUnload = () => {
+//   window.onbeforeunload = () => {
+//     return ''
+//   }
+// }
+
+const connectSftp = (flag) => {
+  showSftp.value = flag
+  resizeTerminal()
+}
+
+const clickInputCommand = () => {
+  showInputCommand.value = true
+}
+
+const tabAdd = () => {
+  if (timer.value) clearTimeout(timer.value)
+  timer.value = setTimeout(() => {
+    let title = name.value
+    let key = Date.now().toString()
+    terminalTabs.push({ title, key })
+    activeTab.value = key
+    tabChange(key)
+    registryDbClick()
+  }, 200)
+}
+
+const removeTab = (removeKey) => {
+  let idx = terminalTabs.findIndex(({ key }) => removeKey === key)
+  terminalTabs.splice(idx, 1)
+  if (removeKey !== activeTab.value) return
+  activeTab.value = terminalTabs[0].key
+}
+
+const tabChange = async (key) => {
+  await $nextTick()
+  const curTabTerminal = terminalTabRefs.value.find(({ tabKey }) => key === tabKey)
+  curTabTerminal?.focusTab()
+}
+
+const handleFullScreen = () => {
+  if (isFullScreen.value) document.exitFullscreen()
+  else document.getElementsByClassName('terminals')[0].requestFullscreen()
+  isFullScreen.value = !isFullScreen.value
+}
+
+const registryDbClick = () => {
+  $nextTick(() => {
+    let tabItems = Array.from(document.getElementsByClassName('el-tabs__item'))
+    tabItems.forEach(item => {
+      item.removeEventListener('dblclick', handleDblclick)
+      item.addEventListener('dblclick', handleDblclick)
+    })
+  })
+}
+
+const handleDblclick = (e) => {
+  if (terminalTabs.length > 1) {
+    let key = e.target.id.substring(4)
+    // console.log('dblclick', key)
+    removeTab(key)
+  }
+}
+
+const handleVisibleSidebar = () => {
+  visible.value = !visible.value
+  resizeTerminal()
+}
+
+const resizeTerminal = () => {
+  for (let terminalTabRef of terminalTabRefs.value) {
+    const { handleResize } = terminalTabRef || {}
+    handleResize && handleResize()
+  }
+}
+
+const handleInputCommand = async (command) => {
+  const curTabTerminal = terminalTabRefs.value.find(({ tabKey }) => activeTab.value === tabKey)
+  await $nextTick()
+  curTabTerminal?.focusTab()
+  curTabTerminal.handleInputCommand(`${ command }\n`)
+  showInputCommand.value = false
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  display: flex;
+  height: 100vh;
+
+  section {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    width: calc(100vw - 250px); // 减去左边栏
+
+    .terminals {
+      min-height: 150px;
+      flex: 1;
+      position: relative;
+
+      .full-screen-button {
+        position: absolute;
+        right: 10px;
+        top: 4px;
+        z-index: 99999;
+      }
+    }
+
+    .sftp {
+      border: 1px solid rgb(236, 215, 187);
+    }
+
+    .visible {
+      position: absolute;
+      z-index: 999999;
+      top: 13px;
+      left: 5px;
+      cursor: pointer;
+      transition: all 0.3s;
+
+      &:hover {
+        transform: scale(1.1);
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+.el-tabs {
+  border: none;
+}
+
+.el-tabs--border-card>.el-tabs__content {
+  padding: 0;
+}
+
+.el-tabs__header {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  user-select: none;
+}
+
+// .el-tabs__nav-scroll {
+//   .el-tabs__nav {
+//     // padding-left: 60px;
+//   }
+// }
+
+.el-tabs__new-tab {
+  position: absolute;
+  left: 18px;
+  font-size: 50px;
+  z-index: 98;
+}
+
+// .el-tabs--border-card {
+//   height: 100%;
+//   overflow: hidden;
+//   display: flex;
+//   flex-direction: column;
+// }
+
+.el-tabs__content {
+  flex: 1;
+}
+
+.el-icon.is-icon-close {
+  font-size: 13px;
+  position: absolute;
+  right: 0px;
+  top: 2px;
+}
+</style>
\ No newline at end of file
diff --git a/web/src/views/terminal/index.vue b/web/src/views/terminal/index.vue
index 6c13026..123be66 100644
--- a/web/src/views/terminal/index.vue
+++ b/web/src/views/terminal/index.vue
@@ -1,264 +1,53 @@
 <template>
-  <div class="container">
-    <InfoSide
-      ref="infoSideRef"
-      v-model:show-input-command="showInputCommand"
-      :token="token"
-      :host="host"
-      :visible="visible"
-      @connect-sftp="connectSftp"
-      @click-input-command="clickInputCommand"
-    />
-    <section>
-      <div class="terminals">
-        <el-button class="full-screen-button" type="success" @click="handleFullScreen">
-          {{ isFullScreen ? '退出全屏' : '全屏' }}
-        </el-button>
-        <div class="visible" @click="handleVisibleSidebar">
-          <svg-icon name="icon-jiantou_zuoyouqiehuan" class="svg-icon" />
-        </div>
-        <el-tabs
-          v-model="activeTab"
-          type="border-card"
-          addable
-          tab-position="top"
-          @tab-remove="removeTab"
-          @tab-change="tabChange"
-          @tab-add="tabAdd"
-        >
-          <el-tab-pane
-            v-for="item in terminalTabs"
-            :key="item.key"
-            :label="item.title"
-            :name="item.key"
-            :closable="closable"
-          >
-            <TerminalTab
-              ref="terminalTabRefs"
-              :token="token"
-              :host="host"
-              :tab-key="item.key"
-            />
-          </el-tab-pane>
-        </el-tabs>
-      </div>
-      <div v-if="showSftp" class="sftp">
-        <SftpFooter :token="token" :host="host" @resize="resizeTerminal" />
-      </div>
-    </section>
-    <InputCommand v-model:show="showInputCommand" @input-command="handleInputCommand" />
+  <div class="terminal_container">
+    <div v-if="showLinkTips" class="terminal_link_tips">
+      <h2 class="quick_link_text">快速连接</h2>
+      <el-table
+        :data="hostList"
+        :show-header="false"
+      >
+        <el-table-column prop="name" label="name" width="180" />
+        <el-table-column prop="host" label="host" width="180" />
+        <el-table-column prop="address" label="Address" />
+      </el-table>
+      <!-- <ul v-for="item in hostList" :key="item._id">
+        {{ item.name }}
+        {{ item.host }}
+        {{ item.name }}
+      </ul> -->
+    </div>
   </div>
 </template>
 
 <script setup>
-import { ref, reactive, computed, onBeforeMount, getCurrentInstance } from 'vue'
-import TerminalTab from './components/terminal-tab.vue'
-import InfoSide from './components/info-side.vue'
-import SftpFooter from './components/sftp-footer.vue'
-import InputCommand from '@/components/input-command/index.vue'
+import { ref, computed, getCurrentInstance } from 'vue'
 
-const { proxy: { $store, $router, $route, $nextTick } } = getCurrentInstance()
+const { proxy: { $store } } = getCurrentInstance()
 
-const name = ref('')
-const host = ref('')
-const token = $store.token
-const activeTab = ref('')
-const terminalTabs = reactive([])
-const isFullScreen = ref(false)
-const timer = ref(null)
-const showSftp = ref(false)
-const showInputCommand = ref(false)
-const visible = ref(true)
-const infoSideRef = ref(null)
-const terminalTabRefs = ref([])
+let showLinkTips = ref(true)
 
-const closable = computed(() => terminalTabs.length > 1)
+let hostList = computed(() => $store.hostList)
 
-onBeforeMount(() => {
-  if (!token) return $router.push('login')
-  let { host: routeHost, name: routeName } = $route.query
-  name.value = routeName
-  host.value = routeHost
-  document.title = `${ document.title }-${ routeName }`
-  let key = Date.now().toString()
-  terminalTabs.push({ title: routeName, key })
-  activeTab.value = key
-  registryDbClick()
-})
-
-// const windowBeforeUnload = () => {
-//   window.onbeforeunload = () => {
-//     return ''
-//   }
-// }
-
-const connectSftp = (flag) => {
-  showSftp.value = flag
-  resizeTerminal()
-}
-
-const clickInputCommand = () => {
-  showInputCommand.value = true
-}
-
-const tabAdd = () => {
-  if (timer.value) clearTimeout(timer.value)
-  timer.value = setTimeout(() => {
-    let title = name.value
-    let key = Date.now().toString()
-    terminalTabs.push({ title, key })
-    activeTab.value = key
-    tabChange(key)
-    registryDbClick()
-  }, 200)
-}
-
-const removeTab = (removeKey) => {
-  let idx = terminalTabs.findIndex(({ key }) => removeKey === key)
-  terminalTabs.splice(idx, 1)
-  if (removeKey !== activeTab.value) return
-  activeTab.value = terminalTabs[0].key
-}
-
-const tabChange = async (key) => {
-  await $nextTick()
-  const curTabTerminal = terminalTabRefs.value.find(({ tabKey }) => key === tabKey)
-  curTabTerminal?.focusTab()
-}
-
-const handleFullScreen = () => {
-  if (isFullScreen.value) document.exitFullscreen()
-  else document.getElementsByClassName('terminals')[0].requestFullscreen()
-  isFullScreen.value = !isFullScreen.value
-}
-
-const registryDbClick = () => {
-  $nextTick(() => {
-    let tabItems = Array.from(document.getElementsByClassName('el-tabs__item'))
-    tabItems.forEach(item => {
-      item.removeEventListener('dblclick', handleDblclick)
-      item.addEventListener('dblclick', handleDblclick)
-    })
-  })
-}
-
-const handleDblclick = (e) => {
-  if (terminalTabs.length > 1) {
-    let key = e.target.id.substring(4)
-    // console.log('dblclick', key)
-    removeTab(key)
-  }
-}
-
-const handleVisibleSidebar = () => {
-  visible.value = !visible.value
-  resizeTerminal()
-}
-
-const resizeTerminal = () => {
-  for (let terminalTabRef of terminalTabRefs.value) {
-    const { handleResize } = terminalTabRef || {}
-    handleResize && handleResize()
-  }
-}
-
-const handleInputCommand = async (command) => {
-  const curTabTerminal = terminalTabRefs.value.find(({ tabKey }) => activeTab.value === tabKey)
-  await $nextTick()
-  curTabTerminal?.focusTab()
-  curTabTerminal.handleInputCommand(`${ command }\n`)
-  showInputCommand.value = false
-}
 </script>
 
 <style lang="scss" scoped>
-.container {
-  display: flex;
-  height: 100vh;
-
-  section {
-    flex: 1;
+.terminal_container {
+  .terminal_link_tips {
+    width: 50%;
+    // margin: 0 auto;
     display: flex;
     flex-direction: column;
-    width: calc(100vw - 250px); // 减去左边栏
-
-    .terminals {
-      min-height: 150px;
-      flex: 1;
-      position: relative;
-
-      .full-screen-button {
-        position: absolute;
-        right: 10px;
-        top: 4px;
-        z-index: 99999;
-      }
-    }
-
-    .sftp {
-      border: 1px solid rgb(236, 215, 187);
-    }
-
-    .visible {
-      position: absolute;
-      z-index: 999999;
-      top: 13px;
-      left: 5px;
-      cursor: pointer;
-      transition: all 0.3s;
-
-      &:hover {
-        transform: scale(1.1);
-      }
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
+    .quick_link_text {
+      align-self: self-start;
+      margin: 0 10px;
+      font-size: 14px;
+      font-weight: 600;
+      line-height: 22px;
+      margin-bottom: 15px;
     }
   }
 }
 </style>
-
-<style lang="scss">
-.el-tabs {
-  border: none;
-}
-
-.el-tabs--border-card>.el-tabs__content {
-  padding: 0;
-}
-
-.el-tabs__header {
-  position: sticky;
-  top: 0;
-  z-index: 1;
-  user-select: none;
-}
-
-// .el-tabs__nav-scroll {
-//   .el-tabs__nav {
-//     // padding-left: 60px;
-//   }
-// }
-
-.el-tabs__new-tab {
-  position: absolute;
-  left: 18px;
-  font-size: 50px;
-  z-index: 98;
-}
-
-// .el-tabs--border-card {
-//   height: 100%;
-//   overflow: hidden;
-//   display: flex;
-//   flex-direction: column;
-// }
-
-.el-tabs__content {
-  flex: 1;
-}
-
-.el-icon.is-icon-close {
-  font-size: 13px;
-  position: absolute;
-  right: 0px;
-  top: 2px;
-}
-</style>
\ No newline at end of file