<template>
|
<el-drawer v-model="drawerVisible" title="布局设置" size="290px">
|
<el-divider class="divider" content-position="center">
|
<el-icon><Notification /></el-icon>
|
大屏主题
|
</el-divider>
|
<div class="layout-box">
|
<!-- 浅色样式 -->
|
<el-tooltip effect="dark" content="浅色样式" placement="top" :show-after="200">
|
<div
|
:class="['layout-item', 'screen-style-light', { 'is-active': screenStyle == 'light' }]"
|
@click="setScreenStyle('light')"
|
>
|
<div class="screen-style-content">
|
<div class="screen-header"></div>
|
<div class="screen-body">
|
<div class="screen-sidebar"></div>
|
<div class="screen-main"></div>
|
</div>
|
</div>
|
<el-icon v-if="screenStyle == 'light'">
|
<CircleCheckFilled />
|
</el-icon>
|
</div>
|
</el-tooltip>
|
|
<!-- 深色样式 -->
|
<el-tooltip effect="dark" content="深色样式" placement="top" :show-after="200">
|
<div
|
:class="['layout-item', 'screen-style-dark', { 'is-active': screenStyle == 'dark' }]"
|
@click="setScreenStyle('dark')"
|
>
|
<div class="screen-style-content">
|
<div class="screen-header"></div>
|
<div class="screen-body">
|
<div class="screen-sidebar"></div>
|
<div class="screen-main"></div>
|
</div>
|
</div>
|
<el-icon v-if="screenStyle == 'dark'">
|
<CircleCheckFilled />
|
</el-icon>
|
</div>
|
</el-tooltip>
|
</div>
|
<div class="layout-box">
|
<!-- 蓝色样式 -->
|
<el-tooltip effect="dark" content="蓝色样式" placement="top" :show-after="200">
|
<div
|
:class="['layout-item', 'screen-style-blue', { 'is-active': screenStyle == 'blue' }]"
|
@click="setScreenStyle('blue')"
|
>
|
<div class="screen-style-content">
|
<div class="screen-header"></div>
|
<div class="screen-body">
|
<div class="screen-sidebar"></div>
|
<div class="screen-main"></div>
|
</div>
|
</div>
|
<el-icon v-if="screenStyle == 'blue'">
|
<CircleCheckFilled />
|
</el-icon>
|
</div>
|
</el-tooltip>
|
</div>
|
<!-- 布局样式 -->
|
<el-divider class="divider" content-position="center">
|
<el-icon><Notification /></el-icon>
|
布局样式
|
</el-divider>
|
<div class="layout-box">
|
<el-tooltip effect="dark" content="纵向" placement="top" :show-after="200">
|
<div :class="['layout-item layout-vertical', { 'is-active': layout == 'vertical' }]" @click="setLayout('vertical')">
|
<div class="layout-dark"></div>
|
<div class="layout-container">
|
<div class="layout-light"></div>
|
<div class="layout-content"></div>
|
</div>
|
<el-icon v-if="layout == 'vertical'">
|
<CircleCheckFilled />
|
</el-icon>
|
</div>
|
</el-tooltip>
|
<el-tooltip effect="dark" content="经典" placement="top" :show-after="200">
|
<div :class="['layout-item layout-classic', { 'is-active': layout == 'classic' }]" @click="setLayout('classic')">
|
<div class="layout-dark"></div>
|
<div class="layout-container">
|
<div class="layout-light"></div>
|
<div class="layout-content"></div>
|
</div>
|
<el-icon v-if="layout == 'classic'">
|
<CircleCheckFilled />
|
</el-icon>
|
</div>
|
</el-tooltip>
|
</div>
|
<div class="theme-item">
|
<span>
|
侧边栏反转色
|
<el-tooltip effect="dark" content="侧边栏颜色变为深色模式" placement="top">
|
<el-icon><QuestionFilled /></el-icon>
|
</el-tooltip>
|
</span>
|
<el-switch v-model="asideInverted" @change="setAsideTheme" />
|
</div>
|
<div class="theme-item mb50">
|
<span>
|
头部反转色
|
<el-tooltip effect="dark" content="头部颜色变为深色模式" placement="top">
|
<el-icon><QuestionFilled /></el-icon>
|
</el-tooltip>
|
</span>
|
<el-switch v-model="headerInverted" @change="setHeaderTheme" />
|
</div>
|
|
<!-- 全局主题 -->
|
<el-divider class="divider" content-position="center">
|
<el-icon><ColdDrink /></el-icon>
|
全局主题
|
</el-divider>
|
<div class="theme-item">
|
<span>主题颜色</span>
|
<el-color-picker v-model="primary" :predefine="colorList" @change="changePrimary" />
|
</div>
|
<div class="theme-item">
|
<span>暗黑模式</span>
|
<SwitchDark />
|
</div>
|
<div class="theme-item">
|
<span>灰色模式</span>
|
<el-switch v-model="isGrey" @change="changeGreyOrWeak('grey', !!$event)" />
|
</div>
|
<div class="theme-item mb40">
|
<span>色弱模式</span>
|
<el-switch v-model="isWeak" @change="changeGreyOrWeak('weak', !!$event)" />
|
</div>
|
|
<!-- 界面设置 -->
|
<el-divider class="divider" content-position="center">
|
<el-icon><Setting /></el-icon>
|
界面设置
|
</el-divider>
|
<div class="theme-item">
|
<span>菜单折叠</span>
|
<el-switch v-model="isCollapse" />
|
</div>
|
<div class="theme-item">
|
<span>菜单手风琴</span>
|
<el-switch v-model="accordion" />
|
</div>
|
<div class="theme-item">
|
<span>水印</span>
|
<el-switch v-model="watermark" />
|
</div>
|
<div class="theme-item">
|
<span>面包屑</span>
|
<el-switch v-model="breadcrumb" />
|
</div>
|
<div class="theme-item">
|
<span>面包屑图标</span>
|
<el-switch v-model="breadcrumbIcon" />
|
</div>
|
<div class="theme-item">
|
<span>标签栏</span>
|
<el-switch v-model="tabs" />
|
</div>
|
<div class="theme-item">
|
<span>标签栏图标</span>
|
<el-switch v-model="tabsIcon" />
|
</div>
|
<div class="theme-item">
|
<span>页脚</span>
|
<el-switch v-model="footer" />
|
</div>
|
</el-drawer>
|
</template>
|
|
<script setup lang="ts">
|
import { ref } from "vue";
|
import { storeToRefs } from "pinia";
|
import { useTheme } from "@/hooks/useTheme";
|
import { useGlobalStore } from "@/stores/modules/global";
|
import { LayoutType, ScreenStyleType } from "@/stores/interface";
|
import { DEFAULT_PRIMARY } from "@/config";
|
import mittBus from "@/utils/mittBus";
|
import SwitchDark from "@/components/SwitchDark/index.vue";
|
import { ElMessage } from "element-plus";
|
const { changePrimary, changeGreyOrWeak, setAsideTheme, setHeaderTheme } = useTheme();
|
|
const globalStore = useGlobalStore();
|
const {
|
layout,
|
primary,
|
isGrey,
|
isWeak,
|
asideInverted,
|
headerInverted,
|
isCollapse,
|
accordion,
|
watermark,
|
breadcrumb,
|
breadcrumbIcon,
|
tabs,
|
tabsIcon,
|
footer,
|
screenStyle
|
} = storeToRefs(globalStore);
|
|
// 预定义主题颜色
|
const colorList = [
|
DEFAULT_PRIMARY,
|
"#daa96e",
|
"#0c819f",
|
"#409eff",
|
"#27ae60",
|
"#ff5c93",
|
"#e74c3c",
|
"#fd726d",
|
"#f39c12",
|
"#9b59b6"
|
];
|
|
// 设置布局方式
|
const setLayout = (val: LayoutType) => {
|
globalStore.setGlobalState("layout", val);
|
setAsideTheme();
|
};
|
// 设置大屏样式
|
const setScreenStyle = (color: ScreenStyleType) => {
|
if (color == "light") {
|
ElMessage.success("浅色样式");
|
} else {
|
ElMessage.success("深色样式");
|
}
|
color === "light" ? "light" : "dark";
|
localStorage.setItem("theme", color);
|
};
|
// 打开主题设置
|
const drawerVisible = ref(false);
|
mittBus.on("openThemeDrawer", () => (drawerVisible.value = true));
|
</script>
|
|
<style scoped lang="scss">
|
@import "./index";
|
|
// 大屏样式选项样式
|
.screen-style-content {
|
display: flex;
|
flex-direction: column;
|
width: 100%;
|
height: 60px;
|
overflow: hidden;
|
cursor: pointer;
|
border-radius: 6px;
|
.screen-header {
|
width: 100%;
|
height: 12px;
|
}
|
.screen-body {
|
display: flex;
|
width: 100%;
|
height: 58px;
|
.screen-sidebar {
|
width: 18px;
|
height: 100%;
|
}
|
.screen-main {
|
flex: 1;
|
height: 100%;
|
}
|
}
|
}
|
|
// 浅色样式
|
.screen-style-light {
|
.screen-header {
|
background-color: #f5f5f5;
|
border-bottom: 1px solid #e0e0e0;
|
}
|
.screen-sidebar {
|
background-color: #f9f9f9;
|
border-right: 1px solid #e0e0e0;
|
}
|
.screen-main {
|
background-color: #ffffff;
|
}
|
}
|
|
// 深色样式
|
.screen-style-dark {
|
.screen-header {
|
background-color: #1f1f1f;
|
border-bottom: 1px solid #383838;
|
}
|
.screen-sidebar {
|
background-color: #262626;
|
border-right: 1px solid #383838;
|
}
|
.screen-main {
|
background-color: #333333;
|
}
|
}
|
|
// 蓝色样式
|
.screen-style-blue {
|
.screen-header {
|
background-color: #1677ff;
|
border-bottom: 1px solid #4794ff;
|
}
|
.screen-sidebar {
|
background-color: #e6f4ff;
|
border-right: 1px solid #cce8ff;
|
}
|
.screen-main {
|
background-color: #f0f8ff;
|
}
|
}
|
|
// 选中状态
|
.layout-item.is-active {
|
border-color: var(--el-color-primary);
|
&.screen-style-light {
|
box-shadow: 0 0 5px rgb(0 0 0 / 10%);
|
}
|
&.screen-style-dark {
|
box-shadow: 0 0 5px rgb(237 2 2 / 100%);
|
}
|
&.screen-style-blue {
|
box-shadow: 0 0 5px rgb(22 119 255 / 30%);
|
}
|
}
|
</style>
|
