From 95755802eed12e0dcd11f55ec584d3a836be2358 Mon Sep 17 00:00:00 2001
From: "Junpeng.Li" <1635975742@qq.com>
Date: Mon, 11 Apr 2022 14:01:38 +0800
Subject: [PATCH] =?UTF-8?q?1.=20=E6=96=B0=E5=A2=9E=E5=BF=AB=E9=80=9F?=
 =?UTF-8?q?=E5=91=BD=E4=BB=A4=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ssh-vue/src/api/fast-cmd.api.js               |  85 ++++++
 ssh-vue/src/components/fast-cmd/data-form.vue |  97 +++++++
 ssh-vue/src/components/fast-cmd/index.vue     | 273 ++++++++++++++++++
 .../src/components/session-list/data-form.vue |   2 +-
 ssh-vue/src/views/ssh/index.vue               |  74 ++++-
 ssh-vue/src/views/ssh/top-tool.vue            |  37 ++-
 6 files changed, 564 insertions(+), 4 deletions(-)
 create mode 100644 ssh-vue/src/api/fast-cmd.api.js
 create mode 100644 ssh-vue/src/components/fast-cmd/data-form.vue
 create mode 100644 ssh-vue/src/components/fast-cmd/index.vue

diff --git a/ssh-vue/src/api/fast-cmd.api.js b/ssh-vue/src/api/fast-cmd.api.js
new file mode 100644
index 0000000..721db36
--- /dev/null
+++ b/ssh-vue/src/api/fast-cmd.api.js
@@ -0,0 +1,85 @@
+const API_KEY = 'fast-cmds', SETTING_KEY = 'fast-setting'
+
+import {v1 as uuidv1} from 'uuid'
+
+/**
+ * 获取快速命令列表
+ * @returns {{}}
+ */
+export function findAll() {
+    const cmds = localStorage.getItem(API_KEY)
+    if (!cmds) {
+        return {}
+    }
+
+    return JSON.parse(cmds)
+}
+
+/**
+ * 根据ID获取一条快速命令
+ * @param id
+ * @returns {*}
+ */
+export function getById(id) {
+    return findAll()[id]
+}
+
+/**
+ * 添加快速命令
+ * @param data
+ */
+export function addCmd(data) {
+    const cmds = findAll()
+
+    data.id = uuidv1()
+    cmds[data.id] = data
+
+    localStorage.setItem(API_KEY, JSON.stringify(cmds))
+}
+
+/**
+ * 修改快速命令
+ * @param data
+ */
+export function editCmd(data) {
+    const cmds = findAll()
+    cmds[data.id] = data
+    localStorage.setItem(API_KEY, JSON.stringify(cmds))
+}
+
+/**
+ * 删除快速命令
+ * @param cmdId
+ */
+export function removeCmd(cmdId) {
+    const cmds = findAll()
+    delete cmds[cmdId]
+    localStorage.setItem(API_KEY, JSON.stringify(cmds))
+}
+
+/**
+ * 获取设置
+ * @returns {{mode: string, visible: boolean}|any}
+ */
+export function getStting() {
+    const setting = localStorage.getItem(SETTING_KEY)
+    if (!setting) {
+        return {
+            mode: 'single',
+            visible: false
+        }
+    }
+
+    return JSON.parse(setting)
+}
+
+/**
+ * 添加设置
+ * @param key
+ * @param value
+ */
+export function setSetting(key, value) {
+    const setting = getStting()
+    setting[key] = value
+    localStorage.setItem(SETTING_KEY, JSON.stringify(setting))
+}
diff --git a/ssh-vue/src/components/fast-cmd/data-form.vue b/ssh-vue/src/components/fast-cmd/data-form.vue
new file mode 100644
index 0000000..feb3174
--- /dev/null
+++ b/ssh-vue/src/components/fast-cmd/data-form.vue
@@ -0,0 +1,97 @@
+<!--
+ * 添加、编辑快速命令
+ *
+ * @author Junpeng.Li
+ * @date 2022-04-11 11:18
+ *
+ * 自定义事件：
+ *   - confirm(): 点击对话框中【确定】按钮时的回调函数
+-->
+<template>
+    <el-dialog
+        title="编辑命令"
+        :visible.sync="visible"
+        :close-on-click-modal="false"
+        :close-on-press-escape="false"
+        width="600px"
+    >
+        <el-form ref="form" :model="data" :rules="rules">
+            <el-form-item label="名称：" prop="name">
+                <el-input v-model="data.name"/>
+            </el-form-item>
+            <el-form-item label="命令：">
+                <el-input v-model="data.command"
+                          type="textarea"
+                          :rows="5"
+                          resize="none"
+                />
+            </el-form-item>
+        </el-form>
+
+        <!--<p style="font-size: 14px;color: #909399;">
+            转义字符：\r \n: new line, \t: tab, \a: bell, \b: backspace
+        </p>-->
+
+        <div slot="footer">
+            <el-button type="primary" @click="onSave">确 定</el-button>
+            <el-button @click="onCancel">取 消</el-button>
+        </div>
+    </el-dialog>
+</template>
+
+<script>
+
+    import {addCmd, editCmd} from '@/api/fast-cmd.api'
+
+    export default {
+        name: "data-form",
+        data() {
+            return {
+                visible: false,
+
+                data: {},
+
+                rules: {
+                    name: [
+                        {required: true, trigger: 'blur', message: '请输入名称'},
+                        {min: 1, max: 20, trigger: 'blur', message: '长度为 1 ~ 20 个字符'}
+                    ]
+                }
+            }
+        },
+
+        methods: {
+
+            open(data = {}) {
+                this.visible = true
+                this.data = JSON.parse(JSON.stringify(data))
+            },
+
+            onSave() {
+                this.$refs.form.validate(isValid => {
+                    if (!isValid) {
+                        return
+                    }
+
+                    if (this.data.id) {
+                        editCmd(this.data)
+                    } else {
+                        addCmd(this.data)
+                    }
+
+                    this.$emit('confirm')
+                    this.visible = false
+                })
+            },
+
+            onCancel() {
+                this.visible = false
+            }
+
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/ssh-vue/src/components/fast-cmd/index.vue b/ssh-vue/src/components/fast-cmd/index.vue
new file mode 100644
index 0000000..8b86092
--- /dev/null
+++ b/ssh-vue/src/components/fast-cmd/index.vue
@@ -0,0 +1,273 @@
+<!--
+ * 快速命令组件
+ *
+ * @author Junpeng.Li
+ * @date 2022-04-11 10:15
+ *
+ * 自定义事件：
+ *   - 无
+-->
+<template>
+    <div class="fast-cmd" :style="{
+        height: `${height - 1}px`
+    }">
+        <div class="__title">
+            <div class="__block">
+                {{title}}
+            </div>
+
+            <div class="__block __tool">
+                <el-select v-model="mode" placeholder="请选择"
+                           style="width: 120px;">
+                    <el-option
+                            v-for="item in [{
+                                value: SEND_MODE.SINGLE,
+                                label: '当前会话'
+                            }, {
+                                value: SEND_MODE.ALL,
+                                label: '全部会话'
+                            }]"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value"
+                    >
+                    </el-option>
+                </el-select>
+            </div>
+
+            <div class="__block __tool">
+                <el-button type="primary" @click="openAdd">创建</el-button>
+            </div>
+        </div>
+
+        <div class="__cmds">
+            <el-dropdown
+                    v-for="item in cmds"
+                    :key="item.id"
+                    class="__cmd"
+                    split-button
+                    trigger="click"
+                    @click="e => handleClick(e, item)"
+                    @command="e => handleCommand(e, item)"
+            >
+                {{item.name}}
+                <el-dropdown-menu slot="dropdown">
+                    <el-dropdown-item command="edit">编辑</el-dropdown-item>
+                    <el-dropdown-item command="remove">删除</el-dropdown-item>
+                </el-dropdown-menu>
+            </el-dropdown>
+        </div>
+
+        <data-form ref="dataForm" @confirm="loadData"/>
+    </div>
+</template>
+
+<script>
+
+    import {findAll,removeCmd, getStting, setSetting} from "@/api/fast-cmd.api"
+    import DataForm from './data-form'
+
+    import {object2Array} from '@/utils/jtool'
+
+    /**
+     * 发送模式
+     * @type {{ALL: string, SINGLE: string}}
+     */
+    const SEND_MODE = {
+        // 当前会话
+        SINGLE: 'single',
+
+        // 全部会话
+        ALL: 'all'
+    }
+
+    export default {
+        name: "fastCmd",
+
+        components: {
+            DataForm
+        },
+
+        props: {
+
+            /**
+             * 会话终端列表
+             */
+            terminals: {
+                type: Array,
+                default: () => []
+            },
+
+            /**
+             * 当前被激活的tab的索引
+             */
+            index: {
+                type: Number,
+                default: () => -1
+            },
+
+            /**
+             * 标题
+             */
+            title: {
+                type: String,
+                default: () => '快速命令'
+            }
+        },
+
+        data() {
+            return {
+
+                // 组件的高度, 单位: px
+                height: 155,
+
+                mode: SEND_MODE.SINGLE,
+
+                SEND_MODE,
+
+                // 命令列表
+                cmds: []
+
+            }
+        },
+
+        watch: {
+            mode(val) {
+                setSetting('mode', val)
+            }
+        },
+
+        mounted() {
+            this.loadData()
+            this.mode = getStting().mode
+        },
+
+        methods: {
+
+            /**
+             * 获取组件的高度
+             * @returns {number} 组件的高度, 单位: px
+             */
+            getHeight() {
+                return this.height;
+            },
+
+            /**
+             * 点击左侧按钮
+             * @param e
+             * @param item
+             */
+            handleClick(e, item) {
+                if (this.mode === SEND_MODE.SINGLE) {
+                    this.terminal.addText(item.command)
+                } else {
+                    this.terminals.forEach(terminal => {
+                        terminal.addText(item.command)
+                    })
+                }
+            },
+
+            /**
+             * 点击菜单项
+             * @param command
+             * @param item
+             */
+            handleCommand(command, item) {
+                switch (command) {
+                    case 'edit':
+                        this.openEdit(item)
+                        break;
+                    case 'remove':
+                        this.onRemove(item)
+                        break;
+                }
+            },
+
+            /**
+             * 加载快速命令列表
+             */
+            loadData() {
+                const cmds = findAll()
+                this.cmds = object2Array(cmds)
+            },
+
+            /**
+             * 打开创建对话框
+             */
+            openAdd() {
+                this.$refs.dataForm.open()
+            },
+
+            /**
+             * 打开修改对话框
+             * @param data
+             */
+            openEdit(data) {
+                this.$refs.dataForm.open(data)
+            },
+
+            /**
+             * 删除一条快速命令
+             * @param item
+             */
+            onRemove(item) {
+                this.$confirm('该操作将删除此快速命令，是否继续？', '提示', {
+                    confirmButtonText: '确定',
+                    cancelButtonText: '取消',
+                    type: 'warning'
+                }).then(() => {
+                    removeCmd(item.id)
+                    this.loadData()
+                }).catch(() => {})
+            }
+
+        },
+
+        computed: {
+            terminal() {
+                return this.terminals[this.index]
+            }
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+
+    .fast-cmd {
+        width: calc(100% - 20px);
+        border-top: 1px solid #dcdfe6;
+        padding: 0 10px;
+        background-color: #eee;
+
+        .__title {
+            width: 100%;
+            height: 40px;
+            line-height: 40px;
+            font-size: 18px;
+            color: #303133;
+
+            .__block {
+                float: left;
+            }
+
+            .__tool {
+                font-size: 14px;
+                margin-left: 20px;
+            }
+        }
+
+        .__cmds {
+            width: 100%;
+            height: calc(100% - 50px);
+            background-color: #fff;
+            border-radius: 4px;
+            overflow: auto;
+
+            .__cmd {
+                float: left;
+                margin: 10px;
+            }
+        }
+    }
+
+</style>
diff --git a/ssh-vue/src/components/session-list/data-form.vue b/ssh-vue/src/components/session-list/data-form.vue
index 6476ed9..4d9c6d0 100644
--- a/ssh-vue/src/components/session-list/data-form.vue
+++ b/ssh-vue/src/components/session-list/data-form.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
         <el-dialog
-                title="创建会话"
+                title="编辑会话"
                 :visible.sync="visible"
                 :close-on-click-modal="false"
                 :close-on-press-escape="false"
diff --git a/ssh-vue/src/views/ssh/index.vue b/ssh-vue/src/views/ssh/index.vue
index 72f68b2..0a8a174 100644
--- a/ssh-vue/src/views/ssh/index.vue
+++ b/ssh-vue/src/views/ssh/index.vue
@@ -11,6 +11,7 @@
                 :terminals="$refs.terminal"
                 :tab-active-name="terminalTabs.active"
                 :compile-com="compileCom()"
+                :fast-cmd-com="fastCmdCom()"
                 @connect="connect"
         />
 
@@ -40,8 +41,17 @@
             </el-tabs>
         </div>
 
+        <!-- 快速命令窗口组件 -->
+        <fast-cmd
+            ref="fastCmdRef"
+            v-if="fastCmd.visible"
+            :terminals="$refs.terminal"
+            :index="tabActiveIndex"
+        />
+
         <!-- 撰写窗口组件 -->
         <compile
+                title="撰写命令"
                 ref="compileRef"
                 v-if="compile.visible"
                 :terminals="$refs.terminal"
@@ -58,6 +68,9 @@
     import Compile from '@/components/compile/index'
     import {getSettings, setSettings} from "@/api/compile"
 
+    import FastCmd from '@/components/fast-cmd/index'
+    import { getStting as getFastCmdSetting, setSetting as setFastCmdSetting } from "@/api/fast-cmd.api"
+
     import {v1 as uuidv1} from 'uuid'
 
     export default {
@@ -67,7 +80,8 @@
             TopTool,
             XTerminal,
             TabMenu,
-            Compile
+            Compile,
+            FastCmd
         },
 
         data() {
@@ -95,6 +109,13 @@
                  */
                 compile: {
                     visible: false
+                },
+
+                /**
+                 * 快速命令组件
+                 */
+                fastCmd: {
+                    visible: false
                 }
             }
         },
@@ -117,6 +138,7 @@
 
         mounted() {
             this.compileCom().initSetting()
+            this.fastCmdCom().initSetting()
         },
 
         methods: {
@@ -270,6 +292,56 @@
 
                 }
 
+            },
+
+            /**
+             * 快速命令窗口组件相关的方法
+             */
+            fastCmdCom() {
+                const _this = this
+
+                return {
+                    /**
+                     * 打开快速命令窗口
+                     */
+                    open() {
+                        _this.fastCmd.visible = true
+
+                        _this.$nextTick(() => {
+                            const height = _this.$refs.fastCmdRef.getHeight()
+                            _this.setTabHeight(height)
+                            setFastCmdSetting('visible', true)
+                        })
+                    },
+
+                    /**
+                     * 关闭快速命令窗口
+                     */
+                    close() {
+                        const height = _this.$refs.fastCmdRef.getHeight()
+                        _this.setTabHeight(0 - height)
+                        setFastCmdSetting('visible', false)
+
+                        _this.fastCmd.visible = false
+                    },
+
+                    /**
+                     * 获取快速命令窗口的打开状态
+                     */
+                    getStatus() {
+                        return _this.fastCmd.visible
+                    },
+
+                    /**
+                     * 初始化快速命令的设置
+                     */
+                    initSetting() {
+                        const setting = getFastCmdSetting()
+                        if (setting.visible) {
+                            this.open()
+                        }
+                    }
+                }
             }
 
         },
diff --git a/ssh-vue/src/views/ssh/top-tool.vue b/ssh-vue/src/views/ssh/top-tool.vue
index 024611c..cd21563 100644
--- a/ssh-vue/src/views/ssh/top-tool.vue
+++ b/ssh-vue/src/views/ssh/top-tool.vue
@@ -12,6 +12,8 @@
         <div class="__block">
             <el-button type="primary" @click="openSessionList">会话列表</el-button>
             <el-button type="primary" @click="openCompile">撰写窗口</el-button>
+            <el-button type="primary" @click="openFastCmd">快速命令</el-button>
+            <el-button type="primary" @click="openCompile">文件传输</el-button>
         </div>
 
         <el-dialog
@@ -23,7 +25,6 @@
         >
             <session-list @connect="connect"/>
         </el-dialog>
-
     </div>
 </template>
 
@@ -34,7 +35,9 @@
     export default {
         name: "top-tool",
 
-        components: {SessionList},
+        components: {
+            SessionList
+        },
 
         props: {
 
@@ -71,6 +74,25 @@
                         getStatus() {}
                     }
                 }
+            },
+
+            /**
+             * 快速命令窗口组件
+             */
+            fastCmdCom: {
+                type: Object,
+                default: () => {
+                    return {
+                        // 打开
+                        open() {},
+
+                        // 关闭
+                        close() {},
+
+                        // 获取组件的打开状态
+                        getStatus() {}
+                    }
+                }
             }
 
         },
@@ -115,6 +137,17 @@
                 } else {
                     this.compileCom.open()
                 }
+            },
+
+            /**
+             * 打开快速命令窗口
+             */
+            openFastCmd() {
+                if (this.fastCmdCom.getStatus()) {
+                    this.fastCmdCom.close()
+                } else {
+                    this.fastCmdCom.open()
+                }
             }
 
         },
-- 
Gitee