148 lines
3.3 KiB
Vue
148 lines
3.3 KiB
Vue
<template>
|
|
<div class="drawer-container">
|
|
<el-drawer v-model="drawerVisible" title="布局设置" size="280px">
|
|
<el-scrollbar>
|
|
<el-form label-width="100px" label-position="left">
|
|
<el-form-item label="布局模式">
|
|
<el-select v-model="layoutMode" placeholder="请选择" @change="handleLayoutModeChange">
|
|
<el-option label="默认布局" value="default" />
|
|
<el-option label="菜单布局" value="menu" />
|
|
<el-option label="顶部布局" value="top" />
|
|
</el-select>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="主题颜色">
|
|
<el-color-picker v-model="themeColor" @change="handleThemeChange" />
|
|
</el-form-item>
|
|
|
|
<el-divider>显示设置</el-divider>
|
|
|
|
<el-form-item label="显示标签栏">
|
|
<el-switch v-model="showTags" @change="handleShowTagsChange" />
|
|
</el-form-item>
|
|
|
|
<el-form-item label="显示面包屑">
|
|
<el-switch v-model="showBreadcrumb" @change="handleShowBreadcrumbChange" />
|
|
</el-form-item>
|
|
|
|
<el-divider>其他</el-divider>
|
|
|
|
<el-form-item>
|
|
<el-button type="primary" @click="handleReset">重置设置</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-scrollbar>
|
|
</el-drawer>
|
|
|
|
<div class="setting-btn" @click="drawerVisible = true">
|
|
<el-icon :size="24">
|
|
<component :is="'ElIconSetting'" />
|
|
</el-icon>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed } from 'vue'
|
|
import { useLayoutStore } from '../../stores/modules/layout'
|
|
import { ElMessage } from 'element-plus'
|
|
|
|
defineOptions({
|
|
name: 'LayoutSetting',
|
|
})
|
|
|
|
const layoutStore = useLayoutStore()
|
|
|
|
const drawerVisible = ref(false)
|
|
|
|
// 布局模式
|
|
const layoutMode = computed({
|
|
get: () => layoutStore.layoutMode,
|
|
set: (value) => {
|
|
layoutStore.setLayoutMode(value)
|
|
},
|
|
})
|
|
|
|
// 主题颜色
|
|
const themeColor = computed({
|
|
get: () => layoutStore.themeColor,
|
|
set: (value) => {
|
|
layoutStore.setThemeColor(value)
|
|
},
|
|
})
|
|
|
|
// 显示标签栏
|
|
const showTags = computed({
|
|
get: () => layoutStore.showTags,
|
|
set: (value) => {
|
|
layoutStore.setShowTags(value)
|
|
},
|
|
})
|
|
|
|
// 显示面包屑
|
|
const showBreadcrumb = computed({
|
|
get: () => layoutStore.showBreadcrumb,
|
|
set: (value) => {
|
|
layoutStore.setShowBreadcrumb(value)
|
|
},
|
|
})
|
|
|
|
// 布局模式变化
|
|
const handleLayoutModeChange = (value) => {
|
|
layoutStore.setLayoutMode(value)
|
|
ElMessage.success('布局模式已切换')
|
|
}
|
|
|
|
// 主题颜色变化
|
|
const handleThemeChange = (value) => {
|
|
layoutStore.setThemeColor(value)
|
|
}
|
|
|
|
// 显示标签栏变化
|
|
const handleShowTagsChange = (value) => {
|
|
layoutStore.setShowTags(value)
|
|
}
|
|
|
|
// 显示面包屑变化
|
|
const handleShowBreadcrumbChange = (value) => {
|
|
layoutStore.setShowBreadcrumb(value)
|
|
}
|
|
|
|
// 重置设置
|
|
const handleReset = () => {
|
|
layoutStore.resetTheme()
|
|
ElMessage.success('设置已重置')
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.drawer-container {
|
|
.setting-btn {
|
|
position: fixed;
|
|
top: 50%;
|
|
right: 0;
|
|
z-index: 9999;
|
|
width: 48px;
|
|
height: 48px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: var(--primary-color);
|
|
color: #fff;
|
|
border-radius: 6px 0 0 6px;
|
|
cursor: pointer;
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
transition: all 0.3s;
|
|
|
|
&:hover {
|
|
background: var(--primary-color);
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.el-icon {
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|