160 lines
3.5 KiB
Vue
160 lines
3.5 KiB
Vue
<template>
|
||
<el-dialog
|
||
v-model="visible"
|
||
width="600px"
|
||
top="120px"
|
||
title="终端设置"
|
||
:append-to-body="false"
|
||
:close-on-click-modal="false"
|
||
>
|
||
<el-form
|
||
ref="formRef"
|
||
label-suffix="："
|
||
label-width="60px"
|
||
: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="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 backgroundImages"
|
||
: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="backgroundUrl"
|
||
clearable
|
||
placeholder="自定义背景图片url"
|
||
autocomplete="on"
|
||
/>
|
||
</div>
|
||
</el-form-item>
|
||
</el-form>
|
||
<template #footer>
|
||
<span class="dialog_footer">
|
||
<el-button @click="visible = false">关闭</el-button>
|
||
</span>
|
||
</template>
|
||
</el-dialog>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed } from 'vue'
|
||
import themeList from 'xterm-theme'
|
||
|
||
const props = defineProps({
|
||
show: {
|
||
required: true,
|
||
type: Boolean
|
||
},
|
||
themeName: {
|
||
required: true,
|
||
type: String
|
||
},
|
||
background: {
|
||
required: true,
|
||
type: String
|
||
}
|
||
})
|
||
const emit = defineEmits(['update:show', 'update:themeName', 'update:background',])
|
||
|
||
const backgroundImages = ref([
|
||
'/terminal/03.png',
|
||
'/terminal/04.png',
|
||
'/terminal/01.png',
|
||
'/terminal/02.png',
|
||
'/terminal/05.png',
|
||
'/terminal/06.png',
|
||
'/terminal/07.jpg',
|
||
'/terminal/08.jpg',
|
||
'/terminal/09.png',
|
||
])
|
||
|
||
const visible = computed({
|
||
get: () => props.show,
|
||
set: (newVal) => emit('update:show', newVal)
|
||
})
|
||
const theme = computed({
|
||
get: () => props.themeName,
|
||
set: (newVal) => emit('update:themeName', newVal)
|
||
})
|
||
const backgroundUrl = computed({
|
||
get: () => props.background,
|
||
set: (newVal) => emit('update:background', newVal)
|
||
})
|
||
|
||
const changeBackground = (url) => {
|
||
backgroundUrl.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>
|