refactor: ♻️ 设置面板调整
This commit is contained in:
郝先瑞
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="setting-container">
|
||||
<h3 class="text-base font-bold">项目配置</h3>
|
||||
<el-text tag="b">项目配置</el-text>
|
||||
<el-divider>主题设置</el-divider>
|
||||
|
||||
<div class="flex-center">
|
||||
@@ -8,45 +8,51 @@
|
||||
v-model="isDark"
|
||||
:active-icon="Moon"
|
||||
:inactive-icon="Sunny"
|
||||
@change="handleThemeChange"
|
||||
@change="changeTheme"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<el-divider>界面设置</el-divider>
|
||||
<div class="py-[8px] flex-x-between">
|
||||
|
||||
<div class="py-1 flex-x-between">
|
||||
<el-text>主题颜色</el-text>
|
||||
<el-color-picker
|
||||
v-model="settingsStore.themeColor"
|
||||
:predefine="[
|
||||
'#409EFF',
|
||||
'#1890ff',
|
||||
'#304156',
|
||||
'#212121',
|
||||
'#11a983',
|
||||
'#13c2c2',
|
||||
'#6959CD',
|
||||
'#f5222d',
|
||||
]"
|
||||
@change="changeThemeColor"
|
||||
popper-class="theme-picker-dropdown"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="py-1 flex-x-between">
|
||||
<el-text>开启 Tags-View</el-text>
|
||||
<el-switch v-model="settingsStore.tagsView" />
|
||||
</div>
|
||||
|
||||
<div class="py-[8px] flex-x-between">
|
||||
<div class="py-1 flex-x-between">
|
||||
<span class="text-xs">固定 Header</span>
|
||||
<el-switch v-model="settingsStore.fixedHeader" />
|
||||
</div>
|
||||
|
||||
<div class="py-[8px] flex-x-between">
|
||||
<div class="py-1 flex-x-between">
|
||||
<span class="text-xs">侧边栏 Logo</span>
|
||||
<el-switch v-model="settingsStore.sidebarLogo" />
|
||||
</div>
|
||||
|
||||
<div class="py-[8px] flex-x-between">
|
||||
<div class="py-1 flex-x-between">
|
||||
<span class="text-xs">开启水印</span>
|
||||
<el-switch v-model="settingsStore.watermarkEnabled" />
|
||||
</div>
|
||||
|
||||
<el-divider>主题颜色</el-divider>
|
||||
|
||||
<ul class="w-full space-x-2 flex-x-center py-2">
|
||||
<li
|
||||
v-for="(color, index) in themeColors"
|
||||
:key="index"
|
||||
class="w-[30px] h-[30px] cursor-pointer flex-center color-white"
|
||||
:style="{ background: color }"
|
||||
@click="changeThemeColor(color)"
|
||||
>
|
||||
<i-ep-check v-show="color === currentThemeColor" />
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<el-divider>导航设置</el-divider>
|
||||
|
||||
<ul class="layout">
|
||||
@@ -95,10 +101,50 @@ import { useSettingsStore, usePermissionStore, useAppStore } from "@/store";
|
||||
import { Sunny, Moon } from "@element-plus/icons-vue";
|
||||
|
||||
const route = useRoute();
|
||||
|
||||
const appStore = useAppStore();
|
||||
const settingsStore = useSettingsStore();
|
||||
const permissionStore = usePermissionStore();
|
||||
/**
|
||||
* 切换布局
|
||||
*/
|
||||
function changeLayout(layout: string) {
|
||||
settingsStore.changeSetting({ key: "layout", value: layout });
|
||||
if (layout === "mix") {
|
||||
route.name && againActiveTop(route.name as string);
|
||||
} else if (layout === "top") {
|
||||
appStore.openSideBar();
|
||||
}
|
||||
}
|
||||
|
||||
function againActiveTop(newVal: string) {
|
||||
const parent = findOutermostParent(permissionStore.routes, newVal);
|
||||
if (appStore.activeTopMenu !== parent.path) {
|
||||
appStore.activeTopMenu(parent.path);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 切换主题颜色
|
||||
*/
|
||||
function changeThemeColor(color: string) {
|
||||
window.document.documentElement.style.setProperty(
|
||||
"--el-color-primary",
|
||||
color
|
||||
);
|
||||
settingsStore.changeSetting({ key: "themeColor", value: color });
|
||||
}
|
||||
|
||||
/**
|
||||
* 切换暗黑模式
|
||||
*/
|
||||
const isDark = ref<boolean>(settingsStore.theme === "dark");
|
||||
const changeTheme = (isDark: any) => {
|
||||
useToggle(isDark);
|
||||
settingsStore.changeSetting({
|
||||
key: "theme",
|
||||
value: isDark ? "dark" : "light",
|
||||
});
|
||||
};
|
||||
|
||||
function findOutermostParent(tree: any[], findName: string) {
|
||||
let parentMap: any = {};
|
||||
@@ -128,59 +174,6 @@ function findOutermostParent(tree: any[], findName: string) {
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* 切换布局
|
||||
*/
|
||||
function changeLayout(layout: string) {
|
||||
settingsStore.changeSetting({ key: "layout", value: layout });
|
||||
if (layout === "mix") {
|
||||
route.name && againActiveTop(route.name as string);
|
||||
} else if (layout === "top") {
|
||||
appStore.openSideBar();
|
||||
}
|
||||
}
|
||||
|
||||
function againActiveTop(newVal: string) {
|
||||
const parent = findOutermostParent(permissionStore.routes, newVal);
|
||||
if (appStore.activeTopMenu !== parent.path) {
|
||||
appStore.activeTopMenu(parent.path);
|
||||
}
|
||||
}
|
||||
|
||||
// 主题颜色
|
||||
const themeColors = ref<string[]>([
|
||||
"#409EFF",
|
||||
"#304156",
|
||||
"#11a983",
|
||||
"#13c2c2",
|
||||
"#6959CD",
|
||||
"#f5222d",
|
||||
]);
|
||||
|
||||
/**
|
||||
* 切换主题颜色
|
||||
*/
|
||||
function changeThemeColor(color: string) {
|
||||
document.documentElement.style.setProperty("--el-color-primary", color);
|
||||
settingsStore.changeSetting({ key: "themeColor", value: color });
|
||||
}
|
||||
|
||||
const currentThemeColor = computed(() => {
|
||||
return settingsStore.themeColor;
|
||||
});
|
||||
|
||||
/**
|
||||
* 切换暗黑模式
|
||||
*/
|
||||
const isDark = ref<boolean>(settingsStore.theme === "dark");
|
||||
const handleThemeChange = (isDark: any) => {
|
||||
useToggle(isDark);
|
||||
settingsStore.changeSetting({
|
||||
key: "theme",
|
||||
value: isDark ? "dark" : "light",
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
window.document.body.setAttribute("layout", settingsStore.layout);
|
||||
const theme = settingsStore.theme;
|
||||
@@ -261,4 +254,8 @@ onMounted(() => {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.theme-picker-dropdown) {
|
||||
z-index: 99999 !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -3,14 +3,14 @@
|
||||
<!-- 遮罩层 -->
|
||||
<div
|
||||
v-if="classObj.mobile && classObj.openSidebar"
|
||||
class="fixed z-1000 bg-black bg-opacity-20"
|
||||
class="fixed z-999 bg-black bg-opacity-30 wh-full top-0"
|
||||
@click="handleOutsideClick"
|
||||
></div>
|
||||
<Sidebar class="sidebar-container" />
|
||||
|
||||
<!-- 混合布局 -->
|
||||
<div v-if="layout === 'mix'" class="mix-container">
|
||||
<div class="mix-container__left">
|
||||
<div class="sidebar-container__left">
|
||||
<SidebarMenu :menu-list="mixLeftMenus" :base-path="activeTopMenuPath" />
|
||||
<div class="sidebar-toggle">
|
||||
<hamburger
|
||||
@@ -113,6 +113,15 @@ function toggleSidebar() {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.fixed-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 9;
|
||||
width: calc(100% - $sidebar-width);
|
||||
transition: width 0.28s;
|
||||
}
|
||||
|
||||
.sidebar-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
@@ -130,15 +139,6 @@ function toggleSidebar() {
|
||||
}
|
||||
}
|
||||
|
||||
.fixed-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 9;
|
||||
width: calc(100% - $sidebar-width);
|
||||
transition: width 0.28s;
|
||||
}
|
||||
|
||||
.main-container {
|
||||
position: relative;
|
||||
min-height: 100%;
|
||||
@@ -204,18 +204,12 @@ function toggleSidebar() {
|
||||
}
|
||||
}
|
||||
|
||||
&.hideSidebar {
|
||||
.sidebar-container {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mix-container {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
padding-top: $navbar-height;
|
||||
|
||||
&__left {
|
||||
.sidebar-container__left {
|
||||
position: relative;
|
||||
width: $sidebar-width;
|
||||
height: 100%;
|
||||
@@ -259,6 +253,11 @@ function toggleSidebar() {
|
||||
}
|
||||
|
||||
.hideSidebar {
|
||||
.fixed-header {
|
||||
left: $sidebar-width-collapsed;
|
||||
width: calc(100% - $sidebar-width-collapsed);
|
||||
}
|
||||
|
||||
.sidebar-container {
|
||||
width: $sidebar-width-collapsed !important;
|
||||
}
|
||||
@@ -267,55 +266,57 @@ function toggleSidebar() {
|
||||
margin-left: $sidebar-width-collapsed;
|
||||
}
|
||||
|
||||
.mix-container__left {
|
||||
.sidebar-container__left {
|
||||
width: $sidebar-width-collapsed;
|
||||
}
|
||||
|
||||
.fixed-header {
|
||||
left: $sidebar-width-collapsed;
|
||||
width: calc(100% - $sidebar-width-collapsed);
|
||||
}
|
||||
|
||||
&.mobile {
|
||||
.fixed-header {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.layout-left {
|
||||
.main-container {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.sidebar-container {
|
||||
pointer-events: none;
|
||||
transition-duration: 0.3s;
|
||||
transform: translate3d(-$sidebar-width, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
&.layout-top {
|
||||
.sidebar-container {
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
width: 100% !important;
|
||||
height: $navbar-height;
|
||||
|
||||
:deep(.el-scrollbar) {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
height: $navbar-height;
|
||||
}
|
||||
}
|
||||
|
||||
.main-container {
|
||||
padding-top: $navbar-height;
|
||||
margin-left: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// 顶部模式全局变量修改
|
||||
--el-menu-item-height: $navbar-height;
|
||||
&.layout-mix {
|
||||
.sidebar-container {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mobile {
|
||||
.fixed-header {
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.main-container {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&.hideSidebar {
|
||||
.sidebar-container {
|
||||
pointer-events: none;
|
||||
transition-duration: 0.3s;
|
||||
transform: translate3d(-210px, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
&.layout-top {
|
||||
.sidebar-container {
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
width: 100% !important;
|
||||
height: $navbar-height;
|
||||
|
||||
:deep(.el-scrollbar) {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
height: $navbar-height;
|
||||
}
|
||||
}
|
||||
|
||||
.main-container {
|
||||
padding-top: $navbar-height;
|
||||
margin-left: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// 顶部模式全局变量修改
|
||||
--el-menu-item-height: $navbar-height;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user