feat: 文件增加打开终端功能 (#2660)

Refs https://github.com/1Panel-dev/1Panel/issues/958

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': {

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',

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'),

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>