219 lines
6.3 KiB
Vue
219 lines
6.3 KiB
Vue
<template>
|
||
<el-dialog
|
||
v-model="visible"
|
||
width="600px"
|
||
top="120px"
|
||
title="本地设置"
|
||
:append-to-body="false"
|
||
:close-on-click-modal="false"
|
||
>
|
||
<el-tabs tab-position="top">
|
||
<el-tab-pane label="终端设置" lazy>
|
||
<el-form
|
||
ref="formRef"
|
||
label-suffix="："
|
||
label-width="100px"
|
||
:show-message="false"
|
||
>
|
||
<el-form-item label="终端主题" prop="theme">
|
||
<el-select v-model="theme" placeholder="" style="width: 100%;">
|
||
<el-option
|
||
v-for="(value, key) in themeList"
|
||
:key="key"
|
||
:label="key"
|
||
:value="key"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="终端字体" prop="fontSize">
|
||
<el-input-number v-model="fontSize" :min="12" :max="30" />
|
||
</el-form-item>
|
||
<el-form-item label="终端背景" prop="backgroundImage">
|
||
<ul class="background_list">
|
||
<li :class="background ? '' : 'active'" @click="changeBackground('')">
|
||
<el-image class="image">
|
||
<template #error>
|
||
<div class="theme_background_text">
|
||
主题背景
|
||
</div>
|
||
</template>
|
||
</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>
|
||
</ul>
|
||
<div class="custom_background">
|
||
<el-input
|
||
v-model="background"
|
||
clearable
|
||
placeholder="自定义背景图片url"
|
||
autocomplete="on"
|
||
/>
|
||
</div>
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="快捷操作">
|
||
<el-form
|
||
ref="formRef"
|
||
label-suffix="："
|
||
label-width="100px"
|
||
:show-message="false"
|
||
>
|
||
<el-form-item label="选中复制" prop="quickCopy">
|
||
<el-tooltip
|
||
effect="dark"
|
||
content="启用后选中文本自动复制到剪贴板(需https支持)"
|
||
placement="right"
|
||
>
|
||
<el-switch
|
||
v-model="quickCopy"
|
||
class="swtich"
|
||
inline-prompt
|
||
style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
|
||
active-text="开启"
|
||
inactive-text="关闭"
|
||
/>
|
||
</el-tooltip>
|
||
</el-form-item>
|
||
<el-form-item label="快捷粘贴" prop="quickPaste">
|
||
<el-tooltip
|
||
effect="dark"
|
||
content="启用后右键粘贴剪贴板内容(需https支持)"
|
||
placement="right"
|
||
>
|
||
<el-switch
|
||
v-model="quickPaste"
|
||
class="swtich"
|
||
inline-prompt
|
||
style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
|
||
active-text="开启"
|
||
inactive-text="关闭"
|
||
/>
|
||
</el-tooltip>
|
||
</el-form-item>
|
||
<el-form-item label="脚本执行" prop="autoExecuteScript">
|
||
<el-tooltip
|
||
effect="dark"
|
||
content="启用后从脚本库选中脚本后自动执行(回车操作)"
|
||
placement="right"
|
||
>
|
||
<el-switch
|
||
v-model="autoExecuteScript"
|
||
class="swtich"
|
||
inline-prompt
|
||
style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
|
||
active-text="自动"
|
||
inactive-text="手动"
|
||
/>
|
||
</el-tooltip>
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
<template #footer>
|
||
<span class="dialog_footer">
|
||
<el-button @click="visible = false">关闭</el-button>
|
||
</span>
|
||
</template>
|
||
</el-dialog>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed, getCurrentInstance } from 'vue'
|
||
import themeList from 'xterm-theme'
|
||
const { proxy: { $store } } = getCurrentInstance()
|
||
|
||
const props = defineProps({
|
||
show: {
|
||
required: true,
|
||
type: Boolean
|
||
}
|
||
})
|
||
const emit = defineEmits(['update:show',])
|
||
|
||
const defaultBackgroundImages = computed(() => $store.defaultBackgroundImages)
|
||
|
||
const visible = computed({
|
||
get: () => props.show,
|
||
set: (newVal) => emit('update:show', newVal)
|
||
})
|
||
const theme = computed({
|
||
get: () => $store.terminalConfig.themeName,
|
||
set: (newVal) => $store.setTerminalSetting({ themeName: newVal })
|
||
})
|
||
const background = computed({
|
||
get: () => $store.terminalConfig.background,
|
||
set: (newVal) => $store.setTerminalSetting({ background: newVal })
|
||
})
|
||
const fontSize = computed({
|
||
get: () => $store.terminalConfig.fontSize,
|
||
set: (newVal) => $store.setTerminalSetting({ fontSize: newVal })
|
||
})
|
||
const quickCopy = computed({
|
||
get: () => $store.terminalConfig.quickCopy,
|
||
set: (newVal) => $store.setTerminalSetting({ quickCopy: newVal })
|
||
})
|
||
const quickPaste = computed({
|
||
get: () => $store.terminalConfig.quickPaste,
|
||
set: (newVal) => $store.setTerminalSetting({ quickPaste: newVal })
|
||
})
|
||
const autoExecuteScript = computed({
|
||
get: () => $store.terminalConfig.autoExecuteScript,
|
||
set: (newVal) => $store.setTerminalSetting({ autoExecuteScript: newVal })
|
||
})
|
||
|
||
const changeBackground = (url) => {
|
||
background.value = url || ''
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.background_list {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
li {
|
||
width: 130px;
|
||
height: 75px;
|
||
box-sizing: border-box;
|
||
border-radius: 3px;
|
||
margin: 0 5px 5px 0;
|
||
display: flex;
|
||
align-items: center;
|
||
background: var(--el-fill-color-light);
|
||
color: var(--el-text-color-placeholder);
|
||
&:hover {
|
||
cursor: pointer;
|
||
box-shadow: 0 0 5px #1890ff;
|
||
}
|
||
&.active {
|
||
box-shadow: 0 0 5px #1890ff;
|
||
border: 1px solid #1890ff;
|
||
}
|
||
.image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.theme_background_text {
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
}
|
||
.custom_background {
|
||
width: 90%;
|
||
}
|
||
.dialog_footer {
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
</style>
|