shuguang/easynode
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🐛 修复终端tab索引

Browse Source
This commit is contained in:
chaos-zhu 2024-08-05 16:00:40 +08:00
parent 7abb325c19
commit 856db2cf15
7 changed files with 20 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
web/index.html
View File

@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=0,user-scalable=yes">
<title>EasyNode</title>
<script src="//at.alicdn.com/t/c/font_3309550_x7zmcgwaxf.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12/dist/gsap.min.js"></script>
</head>
<body>

6
web/src/assets/scss/global.scss
View File

@ -41,12 +41,6 @@ body {
background-size: 58%;
}
html, body {
// min-width: 1200px;
// height: 100vh;
// overflow: hidden;
}
.link {
color: var(--el-color-primary);
cursor: pointer;

1
web/src/main.js
View File

@ -8,6 +8,7 @@ import globalComponents from './plugins/components'
import axios from '@/utils/axios'
import api from './api'
import App from './app.vue'
import 'animate.css'
import './assets/scss/reset.scss'
import './assets/scss/global.scss'
import './assets/scss/element-ui.scss'

2
web/src/views/server/components/host-form.vue
View File

@ -253,7 +253,7 @@
</template>
<script setup>
import { ref, reactive, computed, getCurrentInstance, nextTick } from 'vue'
import { ref, computed, getCurrentInstance, nextTick } from 'vue'
import { RSAEncrypt, AESEncrypt, randomStr } from '@utils/index.js'
const { proxy: { $api, $router, $message, $store } } = getCurrentInstance()

4
web/src/views/terminal/components/terminal-tab.vue
View File

@ -19,10 +19,6 @@ const props = defineProps({
host: {
required: true,
type: String
},
index: {
required: true,
type: Number
}
})

20
web/src/views/terminal/components/terminal.vue
View File

@ -114,15 +114,15 @@
>
<el-tab-pane
v-for="(item, index) in terminalTabs"
:key="index"
:key="item.key"
:label="item.name"
:name="index"
:closable="true"
class="el_tab_pane"
>
<div class="tab_content_wrap" :style="{ height: mainHeight + 'px' }">
<TerminalTab
ref="terminalRefs"
:index="index"
:host="item.host"
@input-command="terminalInput"
/>
@ -142,13 +142,14 @@
</template>
<script setup>
import { ref, computed, getCurrentInstance, watch, onMounted, onBeforeUnmount } from 'vue'
import { ref, computed, getCurrentInstance, watch, onMounted, onBeforeUnmount, nextTick } from 'vue'
import { ArrowDown } from '@element-plus/icons-vue'
import TerminalTab from './terminal-tab.vue'
import InfoSide from './info-side.vue'
import Sftp from './sftp.vue'
import InputCommand from '@/components/input-command/index.vue'
import HostForm from '../../server/components/host-form.vue'
// import { randomStr } from '@utils/index.js'
const { proxy: { $nextTick, $store, $message } } = getCurrentInstance()
@ -174,12 +175,10 @@ let updateHostData = ref(null)
const terminalTabs = computed(() => props.terminalTabs)
const terminalTabsLen = computed(() => props.terminalTabs.length)
const curHost = computed(() => terminalTabs.value[activeTabIndex.value])
let hostList = computed(() => $store.hostList)
const curHost = computed(() => hostList.value.find(item => item.host === terminalTabs.value[activeTabIndex.value]?.host))
let scriptList = computed(() => $store.scriptList)
// const closable = computed(() => terminalTabs.length > 1)
onMounted(() => {
handleResizeTerminalSftp()
window.addEventListener('resize', handleResizeTerminalSftp)
@ -266,10 +265,12 @@ const clickInputCommand = () => {
}
const removeTab = (index) => {
// terminalTabs.value.splice(index, 1)
emit('removeTab', index)
if (index !== activeTabIndex.value) return
activeTabIndex.value = 0
if (index === activeTabIndex.value) {
nextTick(() => {
activeTabIndex.value = 0
})
}
}
const handleFullScreen = () => {
@ -410,7 +411,6 @@ const handleInputCommand = async (command) => {
display: flex;
flex-direction: column;
position: relative;
.tab_content_wrap {
display: flex;
flex-direction: column;

10
web/src/views/terminal/index.vue
View File

@ -56,6 +56,7 @@ import { ref, computed, onActivated, getCurrentInstance, reactive, nextTick } fr
import { useRoute } from 'vue-router'
import Terminal from './components/terminal.vue'
import HostForm from '../server/components/host-form.vue'
import { randomStr } from '@utils/index.js'
const { proxy: { $store, $message } } = getCurrentInstance()
@ -74,8 +75,8 @@ let isAllConfssh = computed(() => {
})
function linkTerminal(row) {
// console.log(row)
terminalTabs.push(row)
const { name, host } = row
terminalTabs.push({ key: randomStr(16), name, host })
}
function handleUpdateHost(row) {
@ -104,7 +105,10 @@ onActivated(async () => {
await nextTick()
const { host } = route.query
if (!host) return
let targetHosts = hostList.value.filter(item => host.includes(item.host))
let targetHosts = hostList.value.filter(item => host.includes(item.host)).map(item => {
const { name, host } = item
return { key: randomStr(16), name, host }
})
if (!targetHosts || !targetHosts.length) return
terminalTabs.push(...targetHosts)
})