✨ 支持关闭所有终端连接

web/src/views/terminal/components/info-side.vue

@@ -208,7 +208,7 @@
       style="display: block;width: 80%;margin: 15px auto;"
       @click="clickInputCommand"
     >
-      命令输入框
+      长指令输入
     </el-button>
   </div>
 </template>

web/src/views/terminal/components/terminal.vue

@@ -3,10 +3,13 @@
     <div class="terminal_top">
       <div class="left_menu">
         <el-dropdown trigger="click">
-          <span class="link_text">新建连接<el-icon><arrow-down /></el-icon></span>
+          <span class="link_text">连接管理<el-icon><arrow-down /></el-icon></span>
           <template #dropdown>
             <el-dropdown-menu>
-              <el-dropdown-item v-for="(item, index) in hostList" :key="index" @click="handleCommandHost(item)">
+              <el-dropdown-item class="link_close_all" @click="handleCloseAllTab">
+                <span>关闭所有连接</span>
+              </el-dropdown-item>
+              <el-dropdown-item v-for="(item, index) in hostList" :key="index" @click="handleLinkHost(item)">
                 {{ item.name }} {{ item.host }}
               </el-dropdown-item>
             </el-dropdown-menu>
@@ -48,7 +51,7 @@
           <template #dropdown>
             <el-dropdown-menu>
               <el-dropdown-item @click="handleFullScreen">
-                <span>开启全屏</span>
+                <span>启用全屏</span>
               </el-dropdown-item>
               <el-dropdown-item @click="showSetting = true">
                 <span>终端设置</span>
@@ -184,7 +187,7 @@ const props = defineProps({
   }
 })
 
-const emit = defineEmits(['closed', 'removeTab', 'add-host',])
+const emit = defineEmits(['closed', 'close-all-tab', 'removeTab', 'add-host',])
 
 const showInputCommand = ref(false)
 const infoSideRef = ref(null)
@@ -254,7 +257,7 @@ const handleResizeTerminalSftp = () => {
   })
 }
 
-const handleCommandHost = (host) => {
+const handleLinkHost = (host) => {
   if (!host.isConfig) {
     $message.warning('请先配置SSH连接信息')
     hostFormVisible.value = true
@@ -264,6 +267,10 @@ const handleCommandHost = (host) => {
   emit('add-host', host)
 }
 
+const handleCloseAllTab = () => {
+  emit('close-all-tab')
+}
+
 const handleExecScript = (scriptObj) => {
   let { command } = scriptObj
   command += '\n'
@@ -526,4 +533,7 @@ const handleInputCommand = async (command) => {
 .action_icon {
   color: var(--el-color-primary);
 }
+.link_close_all:hover {
+  color: #ff4949!important;
+}
 </style>

web/src/views/terminal/index.vue

@@ -40,6 +40,7 @@
         :terminal-tabs="terminalTabs"
         @remove-tab="handleRemoveTab"
         @add-host="linkTerminal"
+        @close-all-tab="handleRemoveAllTab"
       />
     </div>
     <HostForm
@@ -74,8 +75,9 @@ let isAllConfssh = computed(() => {
   return hostList.value?.every(item => item.isConfig)
 })
 
-function linkTerminal(row) {
+function linkTerminal({ id }) {
-  const { name, host } = row
+  let targetHost = hostList.value.find(item => item.id === id)
+  const { host, name } = targetHost
   terminalTabs.push({ key: randomStr(16), name, host, status: CONNECTING })
 }
 
@@ -88,6 +90,10 @@ function handleRemoveTab(index) {
   terminalTabs.splice(index, 1)
 }
 
+function handleRemoveAllTab() {
+  terminalTabs.length = []
+}
+
 const handleUpdateList = async ({ host }) => {
   try {
     await $store.getHostList()