♻️ 重构终端设置项

web/src/store/index.js

@@ -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() {
+    setTerminalSetting(setTarget = {}) {
-    //   setInterval(() => {
+      let newConfig = { ...this.terminalConfig, ...setTarget }
-    //     this.hostList.forEach((item) => {
+      localStorage.setItem('terminalConfig', JSON.stringify(newConfig))
-    //       const { host } = item
+      this.$patch({ terminalConfig: newConfig })
-    //       ping(`http://${ host }:${ 22022 }`)
+    },
-    //         .then((res) => {
-    //           item.ping = res
-    //         })
-    //     })
-    //   }, 2000)
-    // },
     async wsClientsStatus() {
       // if (this.HostStatusSocket) this.HostStatusSocket.close()
       let socketInstance = io(this.serviceURI, {

web/src/views/terminal/components/terminal-setting.vue

@@ -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([
+const defaultBackgroundImages = computed(() => $store.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',
-])
 
 const visible = computed({
   get: () => props.show,
   set: (newVal) => emit('update:show', newVal)
 })
 const theme = computed({
-  get: () => props.themeName,
+  get: () => $store.terminalConfig.themeName,
-  set: (newVal) => emit('update:themeName', newVal)
+  set: (newVal) => $store.setTerminalSetting({ themeName: newVal })
 })
-const backgroundUrl = computed({
+const background = computed({
-  get: () => props.background,
+  get: () => $store.terminalConfig.background,
-  set: (newVal) => emit('update:background', newVal)
+  set: (newVal) => $store.setTerminalSetting({ background: newVal })
 })
 const fontSize = computed({
-  get: () => props.fontSize,
+  get: () => $store.terminalConfig.fontSize,
-  set: (newVal) => emit('update:fontSize', newVal)
+  set: (newVal) => $store.setTerminalSetting({ fontSize: newVal })
 })
 
 const changeBackground = (url) => {
-  backgroundUrl.value = url || ''
+  background.value = url || ''
 }
 </script>
 

web/src/views/terminal/components/terminal-tab.vue

@@ -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 theme = computed(() => themeList[$store.terminalConfig.theme])
-const fontSize = computed(() => props.fontSize)
+const fontSize = computed(() => $store.terminalConfig.fontSize)
-const background = computed(() => props.background)
+const background = computed(() => $store.terminalConfig.background)
 const hostObj = computed(() => props.hostObj)
 const hostId = computed(() => hostObj.value.id)
 const host = computed(() => hostObj.value.host)

web/src/views/terminal/components/terminal.vue

@@ -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
+    <TerminalSetting v-model:show="showSetting" />
-      v-model:show="showSetting"
-      v-model:themeName="themeName"
-      v-model:background="terminalBackground"
-      v-model:font-size="terminalFontSize"
-      @closed="showSetting = false"
-    />
   </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()