增强终端背景设定

This commit is contained in:
chaos-zhu 2024-10-21 22:02:01 +08:00
parent 6273a9498e
commit a72ab84cee
4 changed files with 39 additions and 64 deletions

View File

@ -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

View File

@ -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 })

View File

@ -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>

View File

@ -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)