✨ 增强终端背景设定

web/src/store/index.js

@@ -23,21 +23,21 @@ const useStore = defineStore({
     isDark: false,
     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',
+      'linear-gradient(-225deg, #CBBACC 0%, #2580B3 100%)',
+      'linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%)',
+      'linear-gradient(to top, #6a85b6 0%, #bac8e0 100%)',
+      'linear-gradient(to top, #7028e4 0%, #e5b2ca 100%)',
+      'linear-gradient(to top, #9be15d 0%, #00e3ae 100%)',
+      'linear-gradient(60deg, #abecd6 0%, #fbed96 100%)',
+      'linear-gradient(-20deg, #2b5876 0%, #4e4376 100%)',
+      'linear-gradient(to top, #1e3c72 0%, #1e3c72 1%, #2a5298 100%)',
+      'linear-gradient(to right, #243949 0%, #517fa4 100%)',
     ],
     terminalConfig: {
       ...{
         fontSize: 16,
         themeName: 'Afterglow',
-        background: '',
+        background: 'linear-gradient(-225deg, #CBBACC 0%, #2580B3 100%)',
         quickCopy: isHttps(),
         quickPaste: isHttps(),
         autoExecuteScript: false

web/src/views/terminal/components/info-side.vue

@@ -196,22 +196,6 @@
         </div>
       </el-descriptions-item>
     </el-descriptions>
-
-    <!-- <el-divider content-position="center">FEATURE</el-divider> -->
-    <!-- <el-button
-      :type="sftpStatus ? 'primary' : 'success'"
-      style="display: block;width: 80%;margin: 30px auto;"
-      @click="handleSftp"
-    >
-      {{ sftpStatus ? '关闭SFTP' : '连接SFTP' }}
-    </el-button> -->
-    <!-- <el-button
-      :type="inputCommandStyle ? 'primary' : 'success'"
-      style="display: block;width: 80%;margin: 15px auto;"
-      @click="clickInputCommand"
-    >
-      长指令输入
-    </el-button> -->
   </div>
 </template>
 <script setup>
@@ -228,18 +212,12 @@ const props = defineProps({
     required: true,
     type: Boolean
   },
-  showInputCommand: {
-    required: true,
-    type: Boolean
-  },
   pingData: {
     required: true,
     type: Object
   }
 })
 
-// const emit = defineEmits(['update:inputCommandStyle', 'click-input-command',])
-
 const socket = ref(null)
 const pingTimer = ref(null)
 
@@ -275,12 +253,6 @@ const input = computed(() => {
   if (inputMb >= 1) return `${ inputMb.toFixed(2) } MB/s`
   return `${ (inputMb * 1024).toFixed(1) } KB/s`
 })
-// const inputCommandStyle = computed({
-//   get: () => props.showInputCommand,
-//   set: (val) => {
-//     emit('update:inputCommandStyle', val)
-//   }
-// })
 
 const pingMs = computed(() => {
   let curPingData = props.pingData[host.value] || {}
@@ -288,11 +260,6 @@ const pingMs = computed(() => {
   return Number(curPingData?.time).toFixed(0)
 })
 
-// const clickInputCommand = () => {
-//   inputCommandStyle.value = true
-//   emit('click-input-command')
-// }
-
 const handleCopy = async () => {
   await navigator.clipboard.writeText(host.value)
   $message.success({ message: 'success', center: true })

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

@@ -1,11 +1,12 @@
 <template>
-  <el-dialog
+  <el-drawer
     v-model="visible"
-    width="600px"
-    top="120px"
     title="本地设置"
-    :append-to-body="false"
-    :close-on-click-modal="false"
+    :direction="isMobileScreen ? 'ttb' : 'ltr'"
+    :close-on-click-modal="true"
+    :close-on-press-escape="true"
+    :modal="true"
+    modal-class="local_setting_drawer"
   >
     <el-tabs tab-position="top">
       <el-tab-pane label="终端设置" lazy>
@@ -26,7 +27,7 @@
             </el-select>
           </el-form-item>
           <el-form-item label="终端字体" prop="fontSize">
-            <el-input-number v-model="fontSize" :min="12" :max="30" />
+            <el-input-number v-model="fontSize" :min="6" :max="30" />
           </el-form-item>
           <el-form-item label="终端背景" prop="backgroundImage">
             <ul class="background_list">
@@ -40,13 +41,12 @@
                 </el-image>
               </li>
               <li
-                v-for="url in defaultBackgroundImages"
-                :key="url"
-                :class="background === url ? 'active' : ''"
-                @click="changeBackground(url)"
-              >
-                <el-image class="image" :src="url" />
-              </li>
+                v-for="item in defaultBackgroundImages"
+                :key="item"
+                :class="background === item ? 'active' : ''"
+                :style="`background: ${item};`"
+                @click="changeBackground(item)"
+              />
             </ul>
             <div class="custom_background">
               <el-input
@@ -122,12 +122,13 @@
         <el-button @click="visible = false">关闭</el-button>
       </span>
     </template>
-  </el-dialog>
+  </el-drawer>
 </template>
 
 <script setup>
 import { computed, getCurrentInstance } from 'vue'
 import themeList from 'xterm-theme'
+import useMobileWidth from '@/composables/useMobileWidth'
 const { proxy: { $store } } = getCurrentInstance()
 
 const props = defineProps({
@@ -138,6 +139,7 @@ const props = defineProps({
 })
 const emit = defineEmits(['update:show',])
 
+const { isMobileScreen } = useMobileWidth()
 const defaultBackgroundImages = computed(() => $store.defaultBackgroundImages)
 
 const visible = computed({
@@ -169,8 +171,8 @@ const autoExecuteScript = computed({
   set: (newVal) => $store.setTerminalSetting({ autoExecuteScript: newVal })
 })
 
-const changeBackground = (url) => {
-  background.value = url || ''
+const changeBackground = (item) => {
+  background.value = item || ''
 }
 </script>
 
@@ -216,3 +218,12 @@ const changeBackground = (url) => {
   justify-content: center;
 }
 </style>
+
+<style lang="scss">
+.local_setting_drawer {
+  .el-drawer__header {
+    margin-bottom: 0 !important;
+  }
+}
+
+</style>

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

@@ -62,7 +62,7 @@ const terminal = ref(null)
 const terminalRef = ref(null)
 
 const token = computed(() => $store.token)
-const theme = computed(() => themeList[$store.terminalConfig.theme])
+const theme = computed(() => themeList[$store.terminalConfig.themeName])
 const fontSize = computed(() => $store.terminalConfig.fontSize)
 const background = computed(() => $store.terminalConfig.background)
 const hostObj = computed(() => props.hostObj)
@@ -99,10 +99,8 @@ watch(fontSize, () => {
 watch(background, (newVal) => {
   nextTick(() => {
     if (newVal) {
-      // terminal.value.options.theme.background = '#00000080'
       terminal.value.options.theme = { ...theme.value, background: '#00000080' }
-      terminalRef.value.style.backgroundImage = `url(${ background.value })`
-      terminalRef.value.style.backgroundImage = `url(${ background.value })`
+      terminalRef.value.style.backgroundImage = background.value?.startsWith('http') ? `url(${ background.value })` : `${ background.value }`
       // terminalRef.value.style.backgroundImage = `linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)), url(${ background.value })`
     } else {
       terminal.value.options.theme = theme.value
@@ -335,7 +333,6 @@ function extractLastCdPath(text) {
 
 const onData = () => {
   term.value.onData((key) => {
-    console.log('key: ', key)
     if (socketConnected.value === false) return
     if (isLongPressCtrl.value || isLongPressAlt.value) {
       const keyCode = key.toUpperCase().charCodeAt(0)