♻️ 重构终端设置项
This commit is contained in:
chaos-zhu
parent
203750c133
commit
70e867410f
@ -20,7 +20,26 @@ const useStore = defineStore({
|
||||
token: sessionStorage.getItem('token') || localStorage.getItem('token') || null,
|
||||
title: '',
|
||||
isDark: false,
|
||||
menuCollapse: localStorage.getItem('menuCollapse') === 'true'
|
||||
menuCollapse: localStorage.getItem('menuCollapse') === 'true',
|
||||
defaultBackgroundImages: [
|
||||
'https://wmimg.com/i/1099/2024/08/66c42ff3cd6ab.png',
|
||||
'https://wmimg.com/i/1099/2024/08/66c42ff3e3f45.png',
|
||||
'https://wmimg.com/i/1099/2024/08/66c42ff411ffb.png',
|
||||
'https://wmimg.com/i/1099/2024/08/66c42ff4c5753.png',
|
||||
'https://wmimg.com/i/1099/2024/08/66c42ff4e8b4d.jpg',
|
||||
'https://wmimg.com/i/1099/2024/08/66c42ff51ee3a.jpg',
|
||||
'https://wmimg.com/i/1099/2024/08/66c42ff5db377.png',
|
||||
'https://wmimg.com/i/1099/2024/08/66c42ff536a64.png',
|
||||
'https://wmimg.com/i/1099/2024/08/66c42ff51d8dd.png',
|
||||
],
|
||||
terminalConfig: {
|
||||
...{
|
||||
fontSize: 14,
|
||||
themeName: localStorage.getItem('themeName') || 'Afterglow',
|
||||
background: localStorage.getItem('terminalBackground') || ''
|
||||
},
|
||||
...(localStorage.getItem('terminalConfig') ? JSON.parse(localStorage.getItem('terminalConfig')) : {})
|
||||
}
|
||||
}),
|
||||
actions: {
|
||||
async setJwtToken(token, isSession = true) {
|
||||
@ -72,17 +91,11 @@ const useStore = defineStore({
|
||||
const { data: localScriptList } = await $api.getLocalScriptList()
|
||||
this.$patch({ localScriptList })
|
||||
},
|
||||
// getHostPing() {
|
||||
// setInterval(() => {
|
||||
// this.hostList.forEach((item) => {
|
||||
// const { host } = item
|
||||
// ping(`http://${ host }:${ 22022 }`)
|
||||
// .then((res) => {
|
||||
// item.ping = res
|
||||
// })
|
||||
// })
|
||||
// }, 2000)
|
||||
// },
|
||||
setTerminalSetting(setTarget = {}) {
|
||||
let newConfig = { ...this.terminalConfig, ...setTarget }
|
||||
localStorage.setItem('terminalConfig', JSON.stringify(newConfig))
|
||||
this.$patch({ terminalConfig: newConfig })
|
||||
},
|
||||
async wsClientsStatus() {
|
||||
// if (this.HostStatusSocket) this.HostStatusSocket.close()
|
||||
let socketInstance = io(this.serviceURI, {
|
||||
|
||||
@ -35,7 +35,7 @@
|
||||
</el-image>
|
||||
</li>
|
||||
<li
|
||||
v-for="url in backgroundImages"
|
||||
v-for="url in defaultBackgroundImages"
|
||||
:key="url"
|
||||
:class="background === url ? 'active' : ''"
|
||||
@click="changeBackground(url)"
|
||||
@ -65,60 +65,39 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import { computed, getCurrentInstance } from 'vue'
|
||||
import themeList from 'xterm-theme'
|
||||
const { proxy: { $store } } = getCurrentInstance()
|
||||
|
||||
const props = defineProps({
|
||||
show: {
|
||||
required: true,
|
||||
type: Boolean
|
||||
},
|
||||
themeName: {
|
||||
required: true,
|
||||
type: String
|
||||
},
|
||||
background: {
|
||||
required: true,
|
||||
type: [String, null,]
|
||||
},
|
||||
fontSize: {
|
||||
required: true,
|
||||
type: Number
|
||||
}
|
||||
})
|
||||
const emit = defineEmits(['update:show', 'update:themeName', 'update:background', 'update:fontSize',])
|
||||
const emit = defineEmits(['update:show',])
|
||||
|
||||
const backgroundImages = ref([
|
||||
'https://wmimg.com/i/1099/2024/08/66c42ff3cd6ab.png',
|
||||
'https://wmimg.com/i/1099/2024/08/66c42ff3e3f45.png',
|
||||
'https://wmimg.com/i/1099/2024/08/66c42ff411ffb.png',
|
||||
'https://wmimg.com/i/1099/2024/08/66c42ff4c5753.png',
|
||||
'https://wmimg.com/i/1099/2024/08/66c42ff4e8b4d.jpg',
|
||||
'https://wmimg.com/i/1099/2024/08/66c42ff51ee3a.jpg',
|
||||
'https://wmimg.com/i/1099/2024/08/66c42ff5db377.png',
|
||||
'https://wmimg.com/i/1099/2024/08/66c42ff536a64.png',
|
||||
'https://wmimg.com/i/1099/2024/08/66c42ff51d8dd.png',
|
||||
])
|
||||
const defaultBackgroundImages = computed(() => $store.defaultBackgroundImages)
|
||||
|
||||
const visible = computed({
|
||||
get: () => props.show,
|
||||
set: (newVal) => emit('update:show', newVal)
|
||||
})
|
||||
const theme = computed({
|
||||
get: () => props.themeName,
|
||||
set: (newVal) => emit('update:themeName', newVal)
|
||||
get: () => $store.terminalConfig.themeName,
|
||||
set: (newVal) => $store.setTerminalSetting({ themeName: newVal })
|
||||
})
|
||||
const backgroundUrl = computed({
|
||||
get: () => props.background,
|
||||
set: (newVal) => emit('update:background', newVal)
|
||||
const background = computed({
|
||||
get: () => $store.terminalConfig.background,
|
||||
set: (newVal) => $store.setTerminalSetting({ background: newVal })
|
||||
})
|
||||
const fontSize = computed({
|
||||
get: () => props.fontSize,
|
||||
set: (newVal) => emit('update:fontSize', newVal)
|
||||
get: () => $store.terminalConfig.fontSize,
|
||||
set: (newVal) => $store.setTerminalSetting({ fontSize: newVal })
|
||||
})
|
||||
|
||||
const changeBackground = (url) => {
|
||||
backgroundUrl.value = url || ''
|
||||
background.value = url || ''
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -21,6 +21,7 @@ import { SearchAddon } from '@xterm/addon-search'
|
||||
// import { SearchBarAddon } from 'xterm-addon-search-bar'
|
||||
import { WebLinksAddon } from '@xterm/addon-web-links'
|
||||
import socketIo from 'socket.io-client'
|
||||
import themeList from 'xterm-theme'
|
||||
import { terminalStatus } from '@/utils/enum'
|
||||
|
||||
const { CONNECTING, RECONNECTING, CONNECT_SUCCESS, CONNECT_FAIL } = terminalStatus
|
||||
@ -32,19 +33,6 @@ const props = defineProps({
|
||||
hostObj: {
|
||||
required: true,
|
||||
type: Object
|
||||
},
|
||||
fontSize: {
|
||||
required: false,
|
||||
default: 16,
|
||||
type: Number
|
||||
},
|
||||
theme: {
|
||||
required: true,
|
||||
type: Object
|
||||
},
|
||||
background: {
|
||||
required: true,
|
||||
type: [String, null,]
|
||||
}
|
||||
})
|
||||
|
||||
@ -66,9 +54,9 @@ const terminal = ref(null)
|
||||
const terminalRef = ref(null)
|
||||
|
||||
const token = computed(() => $store.token)
|
||||
const theme = computed(() => props.theme)
|
||||
const fontSize = computed(() => props.fontSize)
|
||||
const background = computed(() => props.background)
|
||||
const theme = computed(() => themeList[$store.terminalConfig.theme])
|
||||
const fontSize = computed(() => $store.terminalConfig.fontSize)
|
||||
const background = computed(() => $store.terminalConfig.background)
|
||||
const hostObj = computed(() => props.hostObj)
|
||||
const hostId = computed(() => hostObj.value.id)
|
||||
const host = computed(() => hostObj.value.host)
|
||||
|
||||
@ -134,9 +134,6 @@
|
||||
<TerminalTab
|
||||
ref="terminalRefs"
|
||||
:host-obj="item"
|
||||
:theme="themeObj"
|
||||
:background="terminalBackground"
|
||||
:font-size="terminalFontSize"
|
||||
@input-command="terminalInput"
|
||||
@cd-command="cdCommand"
|
||||
@ping-data="getPingData"
|
||||
@ -158,13 +155,7 @@
|
||||
@update-list="handleUpdateList"
|
||||
@closed="updateHostData = null"
|
||||
/>
|
||||
<TerminalSetting
|
||||
v-model:show="showSetting"
|
||||
v-model:themeName="themeName"
|
||||
v-model:background="terminalBackground"
|
||||
v-model:font-size="terminalFontSize"
|
||||
@closed="showSetting = false"
|
||||
/>
|
||||
<TerminalSetting v-model:show="showSetting" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -177,7 +168,6 @@ import Sftp from './sftp.vue'
|
||||
import InputCommand from '@/components/input-command/index.vue'
|
||||
import HostForm from '../../server/components/host-form.vue'
|
||||
import TerminalSetting from './terminal-setting.vue'
|
||||
import themeList from 'xterm-theme'
|
||||
import { terminalStatusList } from '@/utils/enum'
|
||||
|
||||
const { proxy: { $nextTick, $store, $message } } = getCurrentInstance()
|
||||
@ -204,31 +194,12 @@ const isSyncAllSession = ref(false)
|
||||
const hostFormVisible = ref(false)
|
||||
const updateHostData = ref(null)
|
||||
const showSetting = ref(false)
|
||||
const themeName = ref(localStorage.getItem('themeName') || 'Afterglow')
|
||||
let localTerminalBackground = localStorage.getItem('terminalBackground')
|
||||
const terminalBackground = ref(localTerminalBackground || '')
|
||||
let localTerminalFontSize = localStorage.getItem('terminalFontSize')
|
||||
const terminalFontSize = ref(Number(localTerminalFontSize) || 16)
|
||||
|
||||
const terminalTabs = computed(() => props.terminalTabs)
|
||||
const terminalTabsLen = computed(() => props.terminalTabs.length)
|
||||
const hostList = computed(() => $store.hostList)
|
||||
const curHost = computed(() => hostList.value.find(item => item.host === terminalTabs.value[activeTabIndex.value]?.host))
|
||||
const scriptList = computed(() => $store.scriptList)
|
||||
const themeObj = computed(() => themeList[themeName.value])
|
||||
|
||||
watch(themeName, (newVal) => {
|
||||
console.log('update theme:', newVal)
|
||||
localStorage.setItem('themeName', newVal)
|
||||
})
|
||||
watch(terminalBackground, (newVal) => {
|
||||
console.log('update terminalBackground:', newVal)
|
||||
localStorage.setItem('terminalBackground', newVal)
|
||||
})
|
||||
watch(terminalFontSize, (newVal) => {
|
||||
console.log('update terminalFontSize:', newVal)
|
||||
localStorage.setItem('terminalFontSize', newVal)
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
handleResizeTerminalSftp()
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user