refactor: 机器操作界面调整

2025-11-02 15:30:25 +08:00 · 2024-02-07 21:14:29 +08:00
parent 20eb06fb28
commit 9dbf104ef1
8 changed files with 131 additions and 81 deletions
--- a/mayfly_go_web/package.json
+++ b/mayfly_go_web/package.json
@@ -17,7 +17,7 @@
    "countup.js": "^2.7.0",
    "cropperjs": "^1.5.11",
    "echarts": "^5.4.3",
-    "element-plus": "^2.5.3",
+    "element-plus": "^2.5.5",
    "js-base64": "^3.7.5",
    "jsencrypt": "^3.3.2",
    "lodash": "^4.17.21",
--- a/mayfly_go_web/src/components/monaco/MonacoEditorDialogComp.vue
+++ b/mayfly_go_web/src/components/monaco/MonacoEditorDialogComp.vue
@@ -119,8 +119,8 @@ const open = (optionProps: MonacoEditorDialogProps) => {
    }

    setTimeout(() => {
-        editorRef.value?.format();
        editorRef.value?.focus();
+        editorRef.value?.format();
    }, 300);

    state.dialogVisible = true;
--- a/mayfly_go_web/src/components/terminal/TerminalBody.vue
+++ b/mayfly_go_web/src/components/terminal/TerminalBody.vue
@@ -163,7 +163,7 @@ const fitTerminal = () => {
 };

 const focus = () => {
-    setTimeout(() => term.focus(), 400);
+    setTimeout(() => term.focus(), 100);
 };

 const clear = () => {
--- a/mayfly_go_web/src/views/ops/component/TagTree.vue
+++ b/mayfly_go_web/src/views/ops/component/TagTree.vue
@@ -17,7 +17,7 @@
                @node-contextmenu="nodeContextmenu"
            >
                <template #default="{ node, data }">
-                    <span>
+                    <span @dblclick="treeNodeDblclick(data)">
                        <span v-if="data.type.value == TagTreeNode.TagPath">
                            <tag-info :tag-path="data.label" />
                        </span>
@@ -25,7 +25,13 @@
                        <slot v-else :node="node" :data="data" name="prefix"></slot>

                        <span class="ml3" :title="data.labelRemark">
-                            <slot name="label" :data="data"> {{ data.label }}</slot>
+                            <slot name="label" :data="data" v-if="!data.disabled"> {{ data.label }}</slot>
+                            <!-- 禁用状态 -->
+                            <slot name="disabledLabel" :data="data" v-else>
+                                <el-link type="danger" disabled :underline="false">
+                                    {{ `${data.label}` }}
+                                </el-link>
+                            </slot>
                        </span>

                        <slot :node="node" :data="data" name="suffix"></slot>
@@ -135,15 +141,29 @@ const loadNode = async (node: any, resolve: any) => {

 const treeNodeClick = (data: any) => {
    emit('nodeClick', data);
-    if (data.type.nodeClickFunc) {
+    if (!data.disabled && !data.type.nodeDblclickFunc && data.type.nodeClickFunc) {
        data.type.nodeClickFunc(data);
    }
    // 关闭可能存在的右击菜单
    contextmenuRef.value.closeContextmenu();
 };

+// 树节点双击事件
+const treeNodeDblclick = (data: any) => {
+    // emit('nodeDblick', data);
+    if (!data.disabled && data.type.nodeDblclickFunc) {
+        data.type.nodeDblclickFunc(data);
+    }
+    // 关闭可能存在的右击菜单
+    contextmenuRef.value.closeContextmenu();
+};
+
 // 树节点右击事件
 const nodeContextmenu = (event: any, data: any) => {
+    if (data.disabled) {
+        return;
+    }
+
    // 加载当前节点是否需要显示右击菜单
    let items = data.type.contextMenuItems;
    if (!items || items.length == 0) {
--- a/mayfly_go_web/src/views/ops/component/tag.ts
+++ b/mayfly_go_web/src/views/ops/component/tag.ts
@@ -28,6 +28,11 @@ export class TagTreeNode {
     */
    isLeaf: boolean = false;

+    /**
+     * 是否禁用状态
+     */
+    disabled: boolean = false;
+
    /**
     * 额外需要传递的参数
     */
@@ -53,6 +58,11 @@ export class TagTreeNode {
        return this;
    }

+    withDisabled(disabled: boolean) {
+        this.disabled = disabled;
+        return this;
+    }
+
    withParams(params: any) {
        this.params = params;
        return this;
@@ -91,8 +101,14 @@ export class NodeType {

    loadNodesFunc: (parentNode: TagTreeNode) => Promise<TagTreeNode[]>;

+    /**
+     * 节点点击事件
+     */
    nodeClickFunc: (node: TagTreeNode) => void;

+    // 节点双击事件
+    nodeDblclickFunc: (node: TagTreeNode) => void;
+
    constructor(value: number) {
        this.value = value;
    }
@@ -117,6 +133,16 @@ export class NodeType {
        return this;
    }

+    /**
+     * 赋值节点双击事件回调函数
+     * @param func 节点双击事件回调函数
+     * @returns this
+     */
+    withNodeDblclickFunc(func: (node: TagTreeNode) => void) {
+        this.nodeDblclickFunc = func;
+        return this;
+    }
+
    /**
     * 赋值右击菜单按钮选项
     * @param contextMenuItems 右击菜单按钮选项
--- a/mayfly_go_web/src/views/ops/machine/MachineList.vue
+++ b/mayfly_go_web/src/views/ops/machine/MachineList.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="machine-list">
        <page-table
            ref="pageTableRef"
            :page-api="machineApi.list"
@@ -25,7 +25,7 @@
                <span v-if="!data.stat">-</span>
                <div v-else>
                    <el-row>
-                        <el-text size="small" style="font-size: 10px">
+                        <el-text size="small" class="font11">
                            内存(可用/总):
                            <span :class="getStatsFontClass(data.stat.memAvailable, data.stat.memTotal)"
                                >{{ formatByteSize(data.stat.memAvailable, 1) }}/{{ formatByteSize(data.stat.memTotal, 1) }}
@@ -33,7 +33,7 @@
                        </el-text>
                    </el-row>
                    <el-row>
-                        <el-text style="font-size: 10px" size="small">
+                        <el-text class="font11" size="small">
                            CPU(空闲): <span :class="getStatsFontClass(data.stat.cpuIdle, 100)">{{ data.stat.cpuIdle.toFixed(0) }}%</span>
                        </el-text>
                    </el-row>
@@ -44,7 +44,7 @@
                <span v-if="!data.stat?.fsInfos">-</span>
                <div v-else>
                    <el-row v-for="(i, idx) in data.stat.fsInfos.slice(0, 2)" :key="i.mountPoint">
-                        <el-text style="font-size: 10px" size="small" :class="getStatsFontClass(i.free, i.used + i.free)">
+                        <el-text class="font11" size="small" :class="getStatsFontClass(i.free, i.used + i.free)">
                            {{ i.mountPoint }} => {{ formatByteSize(i.free, 0) }}/{{ formatByteSize(i.used + i.free, 0) }}
                        </el-text>

@@ -55,7 +55,7 @@
                            </template>

                            <el-row v-for="i in data.stat.fsInfos.slice(2)" :key="i.mountPoint">
-                                <el-text style="font-size: 10px" size="small" :class="getStatsFontClass(i.free, i.used + i.free)">
+                                <el-text class="font11" size="small" :class="getStatsFontClass(i.free, i.used + i.free)">
                                    {{ i.mountPoint }} => {{ formatByteSize(i.free, 0) }}/{{ formatByteSize(i.used + i.free, 0) }}
                                </el-text>
                            </el-row>
@@ -464,7 +464,7 @@ const showRec = (row: any) => {
 </script>

 <style>
-.el-dialog__body {
+.machine-list .el-dialog {
    padding: 2px 2px;
 }

--- a/mayfly_go_web/src/views/ops/machine/MachineOp.vue
+++ b/mayfly_go_web/src/views/ops/machine/MachineOp.vue
@@ -8,11 +8,22 @@
                    ref="tagTreeRef"
                    :resource-type="TagResourceTypeEnum.Machine.value"
                    :tag-path-node-type="NodeTypeTagPath"
-                />
+                >
+                    <template #prefix="{ data }">
+                        <SvgIcon v-if="data.icon && data.params.status == 1" :name="data.icon.name" :color="data.icon.color" />
+                        <SvgIcon v-if="data.icon && data.params.status == -1" :name="data.icon.name" color="var(--el-color-danger)" />
+                    </template>
+
+                    <template #suffix="{ data }">
+                        <span style="color: #c4c9c4; font-size: 9px" v-if="data.type.value == MachineNodeType.Machine">{{
+                            ` ${data.params.username}@${data.params.ip}:${data.params.port}`
+                        }}</span>
+                    </template>
+                </tag-tree>
            </Pane>

            <Pane>
-                <div class="card pd5">
+                <div class="machine-terminal-tabs card pd5">
                    <el-tabs
                        v-if="state.tabs.size > 0"
                        type="card"
@@ -20,18 +31,18 @@
                        @tab-change="onTabChange"
                        style="width: 100%"
                        v-model="state.activeTermName"
-                        class="h100 machine-terminal-tabs"
+                        class="h100"
                    >
                        <el-tab-pane class="h100" closable v-for="dt in state.tabs.values()" :label="dt.label" :name="dt.key" :key="dt.key">
                            <template #label>
                                <el-popconfirm @confirm="handleReconnect(dt.key)" title="确认重新连接?">
                                    <template #reference>
-                                        <el-icon class="mr2" :color="dt.status == 1 ? '#67c23a' : '#f56c6c'" :title="dt.status == 1 ? '' : '点击重连'"
+                                        <el-icon class="mr5" :color="dt.status == 1 ? '#67c23a' : '#f56c6c'" :title="dt.status == 1 ? '' : '点击重连'"
                                            ><Connection />
                                        </el-icon>
                                    </template>
                                </el-popconfirm>
-                                <el-popover placement="bottom-start" trigger="hover" :width="250">
+                                <el-popover :show-after="1000" placement="bottom-start" trigger="hover" :width="250">
                                    <template #reference>
                                        <div>
                                            <span class="machine-terminal-tab-label">{{ dt.label }}</span>
@@ -41,6 +52,8 @@
                                        <el-descriptions :column="1" size="small">
                                            <el-descriptions-item label="机器名"> {{ dt.params?.name }} </el-descriptions-item>
                                            <el-descriptions-item label="host"> {{ dt.params?.ip }} : {{ dt.params?.port }} </el-descriptions-item>
+                                            <el-descriptions-item label="username"> {{ dt.params?.username }} </el-descriptions-item>
+                                            <el-descriptions-item label="remark"> {{ dt.params?.remark }} </el-descriptions-item>
                                        </el-descriptions>
                                    </template>
                                </el-popover>
@@ -50,7 +63,7 @@
                                <TerminalBody
                                    @status-change="terminalStatusChange(dt.key, $event)"
                                    :ref="(el) => setTerminalRef(el, dt.key)"
-                                    :socket-url="dt.terminalInfo.socketUrl"
+                                    :socket-url="dt.socketUrl"
                                />
                            </div>
                        </el-tab-pane>
@@ -84,16 +97,6 @@
                        </el-descriptions>
                    </el-dialog>

-                    <terminal-dialog ref="terminalDialogRef" :visibleMinimize="true">
-                        <template #headerTitle="{ terminalInfo }">
-                            {{ `${(terminalInfo.terminalId + '').slice(-2)}` }}
-                            <el-divider direction="vertical" />
-                            {{ `${terminalInfo.meta.username}@${terminalInfo.meta.ip}:${terminalInfo.meta.port}` }}
-                            <el-divider direction="vertical" />
-                            {{ terminalInfo.meta.name }}
-                        </template>
-                    </terminal-dialog>
-
                    <process-list v-model:visible="processDialog.visible" v-model:machineId="processDialog.machineId" />

                    <script-manage :title="serviceDialog.title" v-model:visible="serviceDialog.visible" v-model:machineId="serviceDialog.machineId" />
@@ -121,7 +124,6 @@ import TagTree from '../component/TagTree.vue';
 import { Splitpanes, Pane } from 'splitpanes';
 import { ContextmenuItem } from '@/components/contextmenu/index';
 // 组件
-const TerminalDialog = defineAsyncComponent(() => import('@/components/terminal/TerminalDialog.vue'));
 const ScriptManage = defineAsyncComponent(() => import('./ScriptManage.vue'));
 const FileConfList = defineAsyncComponent(() => import('./file/FileConfList.vue'));
 const MachineStats = defineAsyncComponent(() => import('./MachineStats.vue'));
@@ -131,7 +133,6 @@ import TerminalBody from '@/components/terminal/TerminalBody.vue';
 import { TerminalStatus } from '@/components/terminal/common';

 const router = useRouter();
-const terminalDialogRef: any = ref(null);

 const perms = {
    addMachine: 'machine:add',
@@ -156,13 +157,10 @@ const state = reactive({
        name: null,
        tagPath: '',
    },
-    pageData: [] as any[],
    infoDialog: {
        visible: false,
        data: null as any,
    },
-    // 当前选中数据
-    selectionData: [],
    serviceDialog: {
        visible: false,
        machineId: 0,
@@ -189,7 +187,7 @@ const state = reactive({
        title: '',
    },
    activeTermName: '',
-    tabs: new Map(),
+    tabs: new Map<string, any>(),
 });

 const { infoDialog, serviceDialog, processDialog, fileDialog, machineStatsDialog, machineRecDialog } = toRefs(state);
@@ -204,17 +202,24 @@ const NodeTypeTagPath = new NodeType(TagTreeNode.TagPath).withLoadNodesFunc(asyn
    const res = await search();
    // 把list 根据name字段排序
    res.list = res.list.sort((a: any, b: any) => a.name.localeCompare(b.name));
-    state.pageData = res.list;
-    return res.list.map((x: any) => new TagTreeNode(x.id, x.name, NodeTypeMachine(x)).withParams(x).withIsLeaf(true));
+    return res.list.map((x: any) =>
+        new TagTreeNode(x.id, x.name, NodeTypeMachine(x))
+            .withParams(x)
+            .withDisabled(x.status == -1)
+            .withIcon({
+                name: 'Monitor',
+                color: '#409eff',
+            })
+            .withIsLeaf(true)
+    );
 });

-let termIndex = 0;
 let openIds = {};

 const NodeTypeMachine = (machine: any) => {
    let contextMenuItems = [];
-    contextMenuItems.push(new ContextmenuItem('term', '打开终端').withIcon('Monitor').withOnClick(() => showTerminal(machine)));
-    contextMenuItems.push(new ContextmenuItem('term-ex', '打开终端(新窗口)').withIcon('Monitor').withOnClick(() => showTerminal(machine, true)));
+    contextMenuItems.push(new ContextmenuItem('term', '打开终端').withIcon('Monitor').withOnClick(() => openTerminal(machine)));
+    contextMenuItems.push(new ContextmenuItem('term-ex', '打开终端(新窗口)').withIcon('Monitor').withOnClick(() => openTerminal(machine, true)));
    contextMenuItems.push(new ContextmenuItem('detail', '详情').withIcon('More').withOnClick(() => showInfo(machine)));
    contextMenuItems.push(new ContextmenuItem('status', '状态').withIcon('Compass').withOnClick(() => showMachineStats(machine)));
    contextMenuItems.push(new ContextmenuItem('process', '进程').withIcon('DataLine').withOnClick(() => showProcess(machine)));
@@ -225,15 +230,22 @@ const NodeTypeMachine = (machine: any) => {

    contextMenuItems.push(new ContextmenuItem('files', '文件管理').withIcon('FolderOpened').withOnClick(() => showFileManage(machine)));
    contextMenuItems.push(new ContextmenuItem('scripts', '脚本管理').withIcon('Files').withOnClick(() => serviceManager(machine)));
-    return new NodeType(MachineNodeType.Machine).withContextMenuItems(contextMenuItems).withNodeClickFunc(() => {
-        state.pageData = [machine];
+    return new NodeType(MachineNodeType.Machine).withContextMenuItems(contextMenuItems).withNodeDblclickFunc(() => {
+        // for (let k of state.tabs.keys()) {
+        //     // 存在该机器相关的终端tab，则直接激活该tab
+        //     if (k.startsWith(`${machine.id}_${machine.username}_`)) {
+        //         state.activeTermName = k;
+        //         onTabChange();
+        //         return;
+        //     }
+        // }

-        showTerminal(machine);
+        openTerminal(machine);
    });
 };

-const showTerminal = (machine: any, ex?: boolean) => {
-    // 按住ctrl点击，则新建标签页打开, metaKey对应mac command键
+const openTerminal = (machine: any, ex?: boolean) => {
+    // 新窗口打开
    if (ex) {
        const { href } = router.resolve({
            path: `/machine/terminal`,
@@ -246,29 +258,21 @@ const showTerminal = (machine: any, ex?: boolean) => {
        return;
    }

-    let { name, id, username, ip, port } = machine;
+    let { name, id, username } = machine;

    // 同一个机器的终端打开多次，key后添加下划线和数字区分
    openIds[id] = openIds[id] ? ++openIds[id] : 1;
    let sameIndex = openIds[id];

-    const terminalId = Date.now();
-    let key = name + '_' + id + '_' + sameIndex + '_' + terminalId;
+    let key = `${id}_${username}_${sameIndex}`;
    // 只保留name的10个字，超出部分只保留前后4个字符，中间用省略号代替
    let label = name.length > 10 ? name.slice(0, 4) + '...' + name.slice(-4) : name;

    state.tabs.set(key, {
        key,
-        label: `${++termIndex}.${label}${sameIndex === 1 ? '' : ':' + sameIndex}`, // label组成为:总打开term次数+name+同一个机器打开的次数
+        label: `${label}${sameIndex === 1 ? '' : ':' + sameIndex}`, // label组成为:总打开term次数+name+同一个机器打开的次数
        params: machine,
-        terminalInfo: {
-            terminalId: terminalId,
-            status: TerminalStatus.NoConnected,
-            socketUrl: getMachineTerminalSocketUrl(id),
-            minTitle: `${name} [${(terminalId + '').slice(-2)}]`, // 截取terminalId最后两位区分多个terminal
-            minDesc: `${username}@${ip}:${port} (${name})`,
-            meta: machine,
-        },
+        socketUrl: getMachineTerminalSocketUrl(id),
    });
    state.activeTermName = key;
    fitTerminal();
@@ -291,7 +295,6 @@ const showMachineStats = async (machine: any) => {

 const search = async () => {
    const res = await machineApi.list.request(state.params);
-    state.pageData = res.list;
    return res;
 };

@@ -301,18 +304,6 @@ const showFileManage = (selectionData: any) => {
    state.fileDialog.title = `${selectionData.name} => ${selectionData.ip}`;
 };

-const getStatsFontClass = (available: number, total: number) => {
-    const p = available / total;
-    if (p < 0.1) {
-        return 'color-danger';
-    }
-    if (p < 0.2) {
-        return 'color-warning';
-    }
-
-    return 'color-success';
-};
-
 const showInfo = (info: any) => {
    state.infoDialog.data = info;
    state.infoDialog.visible = true;
@@ -343,8 +334,11 @@ const onRemoveTab = (targetName: string) => {
        } else {
            activeTermName = '';
        }
-        // 关闭连接
-        machineApi.closeCli.request({ id: state.tabs.get(targetName).params.id });
+
+        let info = state.tabs.get(targetName);
+        if (info) {
+            terminalRefs[info.key]?.close();
+        }

        state.tabs.delete(targetName);
        state.activeTermName = activeTermName;
@@ -355,6 +349,7 @@ const onRemoveTab = (targetName: string) => {
 const terminalStatusChange = (key: string, status: TerminalStatus) => {
    state.tabs.get(key).status = status;
 };
+
 const terminalRefs: any = {};
 const setTerminalRef = (el: any, key: any) => {
    if (key) {
@@ -362,7 +357,7 @@ const setTerminalRef = (el: any, key: any) => {
    }
 };

-const onResizeTagTree = (a) => {
+const onResizeTagTree = () => {
    fitTerminal();
 };

@@ -375,8 +370,9 @@ const fitTerminal = () => {
        let info = state.tabs.get(state.activeTermName);
        if (info) {
            terminalRefs[info.key]?.resize();
+            terminalRefs[info.key]?.focus();
        }
-    }, 500);
+    }, 100);
 };

 const handleReconnect = (key: string) => {
@@ -386,7 +382,13 @@ const handleReconnect = (key: string) => {

 <style lang="scss">
 .machine-terminal-tabs {
+    height: calc(100vh - 108px);
    --el-tabs-header-height: 30px;
+
+    .el-tabs {
+        --el-tabs-header-height: 30px;
+    }
+
    .machine-terminal-tab-label {
        font-size: 12px;
    }
@@ -394,13 +396,7 @@ const handleReconnect = (key: string) => {
        margin-bottom: 5px;
    }
    .el-tabs__item {
-        padding: 0 5px !important;
-    }
-}
-
-.machine-terminal-tree {
-    .el-tree-node__content {
-        font-size: 12px;
+        padding: 0 8px !important;
    }
 }
 </style>
--- a/server/internal/machine/mcm/client.go
+++ b/server/internal/machine/mcm/client.go
@@ -104,8 +104,16 @@ func (c *Cli) Close() {
 		c.sftpClient.Close()
 		c.sftpClient = nil
 	}
+
+	var sshTunnelMachineId uint64
 	if c.Info.SshTunnelMachine != nil {
-		logx.Infof("关闭机器的隧道信息: machineId=%d, sshTunnelMachineId=%d", c.Info.Id, c.Info.SshTunnelMachine.Id)
+		sshTunnelMachineId = c.Info.SshTunnelMachine.Id
+	}
+	if c.Info.TempSshMachineId != 0 {
+		sshTunnelMachineId = c.Info.TempSshMachineId
+	}
+	if sshTunnelMachineId != 0 {
+		logx.Infof("关闭机器的隧道信息: machineId=%d, sshTunnelMachineId=%d", c.Info.Id, sshTunnelMachineId)
 		CloseSshTunnelMachine(int(c.Info.SshTunnelMachine.Id), c.Info.GetTunnelId())
 	}
 }