From 3c3fd5fd78d98ef1742d3835b38e784113459205 Mon Sep 17 00:00:00 2001
From: zhengkunwang <31820853+zhengkunwang223@users.noreply.github.com>
Date: Tue, 24 Oct 2023 17:55:27 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=87=E4=BB=B6=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E6=89=93=E5=BC=80=E7=BB=88=E7=AB=AF=E5=8A=9F=E8=83=BD=20(#2660?=
 =?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Refs https://github.com/1Panel-dev/1Panel/issues/958
---
 frontend/src/components/terminal/index.vue      | 15 +++++++++++++--
 frontend/src/routers/modules/host.ts            |  1 +
 .../src/views/host/file-management/index.vue    |  8 ++++++++
 .../src/views/host/terminal/terminal/index.vue  | 17 ++++++++++++++---
 4 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/terminal/index.vue b/frontend/src/components/terminal/index.vue
index 706bab7af..b6edaf519 100644
--- a/frontend/src/components/terminal/index.vue
+++ b/frontend/src/components/terminal/index.vue
@@ -15,8 +15,9 @@ const termReady = ref(false);
 const webSocketReady = ref(false);
 const term = ref();
 const terminalSocket = ref<WebSocket>();
-const heartbeatTimer = ref<number>();
+const heartbeatTimer = ref<NodeJS.Timer>();
 const latency = ref(0);
+const initCmd = ref('');
 
 const readyWatcher = watch(
     () => webSocketReady.value && termReady.value,
@@ -32,12 +33,14 @@ interface WsProps {
     endpoint: string;
     args: string;
     error: string;
+    initCmd: string;
 }
 const acceptParams = (props: WsProps) => {
     nextTick(() => {
         if (props.error.length !== 0) {
             initError(props.error);
         } else {
+            initCmd.value = props.initCmd;
             init(props.endpoint, props.args);
         }
     });
@@ -162,6 +165,9 @@ const initWebSocket = (endpoint_: string, args: string = '') => {
 
 const runRealTerminal = () => {
     webSocketReady.value = true;
+    if (initCmd.value !== '') {
+        sendMsg(initCmd.value);
+    }
 };
 
 const onWSReceive = (message: MessageEvent) => {
@@ -169,7 +175,12 @@ const onWSReceive = (message: MessageEvent) => {
     switch (wsMsg.type) {
         case 'cmd': {
             term.value.element && term.value.focus();
-            wsMsg.data && term.value.write(Base64.decode(wsMsg.data)); // 这里理论上不用判断，但是Redis和Ctr还没实现Alive处理，所以exit后会一直发数据，todo
+            let receiveMsg = Base64.decode(wsMsg.data);
+            if (initCmd.value != '') {
+                receiveMsg = receiveMsg.replace(initCmd.value.trim(), '').trim();
+                initCmd.value = '';
+            }
+            wsMsg.data && term.value.write(receiveMsg);
             break;
         }
         case 'heartbeat': {
diff --git a/frontend/src/routers/modules/host.ts b/frontend/src/routers/modules/host.ts
index 50f60f9e7..63a05ac28 100644
--- a/frontend/src/routers/modules/host.ts
+++ b/frontend/src/routers/modules/host.ts
@@ -43,6 +43,7 @@ const hostRouter = {
         {
             path: '/hosts/terminal',
             name: 'Terminal',
+            props: true,
             component: () => import('@/views/host/terminal/index.vue'),
             meta: {
                 title: 'menu.terminal',
diff --git a/frontend/src/views/host/file-management/index.vue b/frontend/src/views/host/file-management/index.vue
index 81e28ebfe..871f965b4 100644
--- a/frontend/src/views/host/file-management/index.vue
+++ b/frontend/src/views/host/file-management/index.vue
@@ -85,6 +85,10 @@
                             </el-button>
                         </el-button-group>
 
+                        <el-button class="btn" @click="toTerminal">
+                            {{ $t('menu.terminal') }}
+                        </el-button>
+
                         <el-button-group class="copy-button" v-if="moveOpen">
                             <el-tooltip class="box-item" effect="dark" :content="$t('file.paste')" placement="bottom">
                                 <el-button plain @click="openPaste">{{ $t('file.paste') }}</el-button>
@@ -758,6 +762,10 @@ const toFavorite = (row: File.Favorite) => {
     }
 };
 
+const toTerminal = () => {
+    router.push({ path: '/hosts/terminal', query: { path: req.path } });
+};
+
 const buttons = [
     {
         label: i18n.global.t('file.open'),
diff --git a/frontend/src/views/host/terminal/terminal/index.vue b/frontend/src/views/host/terminal/terminal/index.vue
index dd78eed45..9c628b9b3 100644
--- a/frontend/src/views/host/terminal/terminal/index.vue
+++ b/frontend/src/views/host/terminal/terminal/index.vue
@@ -64,10 +64,10 @@
                 <template #label>
                     <el-button v-popover="popoverRef" class="tagButton" icon="Plus"></el-button>
                     <el-popover ref="popoverRef" width="250px" trigger="hover" virtual-triggering persistent>
-                        <div style="margin-left: 10px">
+                        <div class="ml-2.5">
                             <el-button link type="primary" @click="onNewSsh">{{ $t('terminal.createConn') }}</el-button>
                         </div>
-                        <div style="margin-left: 10px">
+                        <div class="ml-2.5">
                             <el-button link type="primary" @click="onNewLocal">
                                 {{ $t('terminal.localhost') }}
                             </el-button>
@@ -128,7 +128,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, getCurrentInstance, watch, nextTick, computed } from 'vue';
+import { ref, getCurrentInstance, watch, nextTick, computed, onMounted } from 'vue';
 import Terminal from '@/components/terminal/index.vue';
 import HostDialog from '@/views/host/terminal/terminal/host-create.vue';
 import type Node from 'element-plus/es/components/tree/src/model/node';
@@ -139,6 +139,7 @@ import { Host } from '@/api/interface/host';
 import { getHostTree, testByID } from '@/api/modules/host';
 import { getCommandList } from '@/api/modules/host';
 import { GlobalStore } from '@/store';
+import router from '@/routers';
 
 const dialogRef = ref();
 const ctx = getCurrentInstance() as any;
@@ -183,6 +184,7 @@ interface Tree {
     label: string;
     children?: Tree[];
 }
+const initCmd = ref('');
 
 const acceptParams = async () => {
     globalStore.isFullScreen = false;
@@ -358,8 +360,10 @@ const onConnTerminal = async (title: string, wsID: number, isLocal?: boolean) =>
             ctx.refs[`t-${terminalValue.value}`][0].acceptParams({
                 endpoint: '/api/v1/terminals',
                 args: `id=${wsID}`,
+                initCmd: initCmd.value,
                 error: res.data ? '' : 'Authentication failed.  Please check the host information !',
             });
+        initCmd.value = '';
     });
     tabIndex++;
 };
@@ -377,6 +381,13 @@ defineExpose({
     acceptParams,
     cleanTimer,
 });
+
+onMounted(() => {
+    if (router.currentRoute.value.query.path) {
+        const path = String(router.currentRoute.value.query.path);
+        initCmd.value = `cd ${path} \n`;
+    }
+});
 </script>
 
 <style lang="scss" scoped>