-
-
-
@@ -40,6 +55,9 @@
import XTerminal from '@/components/xterm-terminal'
import TabMenu from './tab-menu'
+ import Compile from '@/components/compile/index'
+ import {getSettings, setSettings} from "@/api/compile"
+
import {v1 as uuidv1} from 'uuid'
export default {
@@ -48,11 +66,15 @@
components: {
TopTool,
XTerminal,
- TabMenu
+ TabMenu,
+ Compile
},
data() {
return {
+ /**
+ * 会话列表的tab对象
+ */
terminalTabs: {
active: 'tab-0',
@@ -61,12 +83,42 @@
name: '新建会话',
host: null,
port: 22
- }]
+ }],
+ // tab组件中，height样式为calc(100% - ${height}px)，其中${height}的height就是该字段值，默认为54
+ height: 54
+
+ },
+
+ /**
+ * 撰写窗口组件对象
+ */
+ compile: {
+ visible: false
}
}
},
+ watch: {
+ /**
+ * 切换tab标签时，重置terminal大小，防止浏览器窗口大小改变时除当前外其他的tab标签内的terminal大小计算错误
+ */
+ 'terminalTabs.active'(name) {
+ const terminals = this.$refs.terminal
+
+ // 如果首次创建新的连接，就不需要重置大小，因为默认就已经就算大小了
+ if (terminals.length !== this.terminalTabs.tabs.length) {
+ return
+ }
+
+ this.resizeTerminal(name)
+ }
+ },
+
+ mounted() {
+ this.compileCom().initSetting()
+ },
+
methods: {
/**
@@ -131,6 +183,93 @@
*/
renameTabName(name, index) {
this.terminalTabs.tabs[index].name = name
+ },
+
+ /**
+ * 判断指定终端是否是激活状态
+ * @param termKey terminal组件的key
+ * @return {boolean}
+ * - true：指定的终端是当前激活的
+ * - false: 指定的终端不是当前激活的
+ */
+ termIsActive(termKey) {
+ const index = parseInt(this.terminalTabs.active.split('-')[1])
+ const terminal = this.$refs.terminal[index]
+ return terminal.$props.connInfo._key === termKey
+ },
+
+ /**
+ * 重置指定tab中的终端尺寸
+ * @param tabName tab中的name属性值
+ */
+ resizeTerminal(tabName) {
+ this.$nextTick(() => {
+ const index = parseInt(tabName.split('-')[1])
+ this.$refs.terminal[index].resize()
+ })
+ },
+
+ /**
+ * 设置tab的height，这里的height是calc(100% - ${height}px)中的${height}
+ */
+ setTabHeight(height, isResize = true) {
+ if (typeof height !== 'number') {
+ return
+ }
+
+ this.terminalTabs.height += height
+
+ if (isResize) {
+ this.resizeTerminal(this.terminalTabs.active)
+ }
+ },
+
+ /**
+ * 撰写窗口组件的相关方法
+ */
+ compileCom() {
+ const _this = this
+
+ return {
+
+ /**
+ * 打开撰写窗口
+ */
+ open() {
+ _this.compile.visible = true
+ _this.$nextTick(() => {
+ _this.setTabHeight(_this.$refs.compileRef.getHeight())
+ setSettings('visible', true)
+ })
+ },
+
+ /**
+ * 关闭撰写窗口
+ */
+ close() {
+ _this.setTabHeight(0 - _this.$refs.compileRef.getHeight())
+ _this.compile.visible = false
+ setSettings('visible', false)
+ },
+
+ /**
+ * 获取撰写窗口的打开状态
+ */
+ getStatus() {
+ return _this.compile.visible
+ },
+
+ /**
+ * 初始化撰写窗口的设置
+ */
+ initSetting() {
+ if (getSettings().visible) {
+ this.open()
+ }
+ }
+
+ }
+
}
},
@@ -142,6 +281,14 @@
*/
tabsLen() {
return this.terminalTabs.tabs.length
+ },
+
+ /**
+ * 当前tab页被激活的索引
+ * @returns {number}
+ */
+ tabActiveIndex() {
+ return parseInt(this.terminalTabs.active.split('-')[1])
}
}
}
@@ -173,7 +320,7 @@
}
/* 目的是让高度自适应以后容易计算出terminal的行数 */
- .el-tabs >>> .el-tabs__content {
+ .el-tabs > > > .el-tabs__content {
height: calc(100% - 56px);
.el-tab-pane {
diff --git a/ssh-vue/src/views/ssh/top-tool.vue b/ssh-vue/src/views/ssh/top-tool.vue
index 9a13efd3e0da2319e3987b4bc57c2a92a20cd73a..024611ce030ec4aa40faeed084eb4ad1d5a5c32f 100644
--- a/ssh-vue/src/views/ssh/top-tool.vue
+++ b/ssh-vue/src/views/ssh/top-tool.vue
@@ -11,6 +11,7 @@
@@ -34,9 +36,51 @@
components: {SessionList},
+ props: {
+
+ /**
+ * 终端列表
+ */
+ terminals: {
+ type: Array,
+ default: () => []
+ },
+
+ /**
+ * 当前被激活的tab标签中name属性的值
+ */
+ tabActiveName: {
+ type: String,
+ default: () => null
+ },
+
+ /**
+ * 撰写窗口
+ */
+ compileCom: {
+ type: Object,
+ default: () => {
+ return {
+ // 打开
+ open() {},
+
+ // 关闭
+ close() {},
+
+ // 获取状态，打开还是关闭
+ getStatus() {}
+ }
+ }
+ }
+
+ },
+
data() {
return {
+ /**
+ * 会话列表对话框
+ */
sessionList: {
visible: false
}
@@ -46,13 +90,58 @@
methods: {
+ /**
+ * 打开会话列表对话框
+ */
openSessionList() {
this.sessionList.visible = true
},
+ /**
+ * 调用terminal连接指令
+ * @param data
+ */
connect(data) {
this.sessionList.visible = false
this.$emit('connect', data)
+ },
+
+ /**
+ * 打开撰写窗口
+ */
+ openCompile() {
+ if (this.compileCom.getStatus()) {
+ this.compileCom.close()
+ } else {
+ this.compileCom.open()
+ }
+ }
+
+ },
+
+ computed: {
+
+ /**
+ * 当前tab的index
+ * @returns {number}
+ */
+ index() {
+ if (this.tabActiveName) {
+ return parseInt(this.tabActiveName.split('-')[1])
+ }
+
+ return -1;
+ },
+
+ /**
+ * 当前tab内的terminal组件实例
+ */
+ terminal() {
+ if (this.index === -1) {
+ return null
+ }
+
+ return this.terminals[this.index]
}
}