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"> <meta name="viewport" content="width=device-width, initial-scale=0,user-scalable=yes">
<title>EasyNode</title> <title>EasyNode</title>
<script src="//at.alicdn.com/t/c/font_3309550_x7zmcgwaxf.js"></script> <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> </head>
<body> <body>

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

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

1
web/src/main.js
View File

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

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

@ -253,7 +253,7 @@
</template> </template>
<script setup> <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' import { RSAEncrypt, AESEncrypt, randomStr } from '@utils/index.js'
const { proxy: { $api, $router, $message, $store } } = getCurrentInstance() 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: { host: {
required: true, required: true,
type: String type: String
},
index: {
required: true,
type: Number
} }
}) })

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

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