tongtong/vue3-element-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: ♻️ 设置面板代码优化

Browse Source
This commit is contained in:
Ray.Hao
2025-03-16 22:43:03 +08:00
parent 3ffd534710
commit 00e686e7a7
1 changed files with 112 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

188
src/layout/components/Settings/index.vue
View File

@@ -1,45 +1,68 @@
<template> <template>
<el-drawer v-model="settingsVisible" size="300" :title="$t('settings.project')"> <el-drawer
<el-divider>{{ $t("settings.theme") }}</el-divider> v-model="drawerVisible"
size="300"
:title="$t('settings.project')"
:before-close="handleCloseDrawer"
>
<section class="config-section">
<el-divider>{{ $t("settings.theme") }}</el-divider>
<div class="flex-center"> <div class="flex-center">
<el-switch v-model="isDark" active-icon="Moon" inactive-icon="Sunny" @change="changeTheme" /> <el-switch
</div> v-model="isDark"
active-icon="Moon"
inactive-icon="Sunny"
@change="handleThemeChange"
/>
</div>
</section>
<el-divider>{{ $t("settings.interface") }}</el-divider> <!-- 界面设置 -->
<section class="config-section">
<el-divider>{{ $t("settings.interface") }}</el-divider>
<div class="py-1 flex-x-between"> <div class="config-item flex-x-between">
<span class="text-xs">{{ $t("settings.themeColor") }}</span> <span class="text-xs">{{ $t("settings.themeColor") }}</span>
<ThemeColorPicker v-model="settingsStore.themeColor" @update:model-value="changeThemeColor" /> <el-color-picker
</div> v-model="selectedThemeColor"
:predefine="colorPresets"
popper-class="theme-picker-dropdown"
/>
</div>
<div class="py-1 flex-x-between"> <div class="config-item flex-x-between">
<span class="text-xs">{{ $t("settings.tagsView") }}</span> <span class="text-xs">{{ $t("settings.tagsView") }}</span>
<el-switch v-model="settingsStore.tagsView" /> <el-switch v-model="settingsStore.tagsView" />
</div> </div>
<div class="py-1 flex-x-between"> <div class="config-item flex-x-between">
<span class="text-xs">{{ $t("settings.sidebarLogo") }}</span> <span class="text-xs">{{ $t("settings.sidebarLogo") }}</span>
<el-switch v-model="settingsStore.sidebarLogo" /> <el-switch v-model="settingsStore.sidebarLogo" />
</div> </div>
<div class="py-1 flex-x-between"> <div class="config-item flex-x-between">
<span class="text-xs">{{ $t("settings.watermark") }}</span> <span class="text-xs">{{ $t("settings.watermark") }}</span>
<el-switch v-model="settingsStore.watermarkEnabled" /> <el-switch v-model="settingsStore.watermarkEnabled" />
</div> </div>
<div v-if="!isDark" class="py-1 flex-x-between"> <div v-if="!isDark" class="config-item flex-x-between">
<span class="text-xs">{{ $t("settings.sidebarColorScheme") }}</span> <span class="text-xs">{{ $t("settings.sidebarColorScheme") }}</span>
<el-radio-group v-model="sidebarColor" @change="changeSidebarColor"> <el-radio-group v-model="sidebarColor" @change="changeSidebarColor">
<el-radio :value="SidebarColorEnum.CLASSIC_BLUE">{{ $t("settings.classicBlue") }}</el-radio> <el-radio :value="SidebarColorEnum.CLASSIC_BLUE">
<el-radio :value="SidebarColorEnum.MINIMAL_WHITE"> {{ $t("settings.classicBlue") }}
{{ $t("settings.minimalWhite") }} </el-radio>
</el-radio> <el-radio :value="SidebarColorEnum.MINIMAL_WHITE">
</el-radio-group> {{ $t("settings.minimalWhite") }}
</div> </el-radio>
</el-radio-group>
</div>
</section>
<el-divider>{{ $t("settings.navigation") }}</el-divider> <!-- 布局设置 -->
<section class="config-section">
<LayoutSelect v-model="settingsStore.layout" @update:model-value="changeLayout" /> <el-divider>{{ $t("settings.navigation") }}</el-divider>
<LayoutSelect v-model="settingsStore.layout" @update:model-value="handleLayoutChange" />
</section>
</el-drawer> </el-drawer>
</template> </template>
@@ -48,6 +71,18 @@ import { LayoutEnum } from "@/enums/LayoutEnum";
import { ThemeEnum } from "@/enums/ThemeEnum"; import { ThemeEnum } from "@/enums/ThemeEnum";
import { SidebarColorEnum } from "@/enums/ThemeEnum"; import { SidebarColorEnum } from "@/enums/ThemeEnum";
import { useSettingsStore, usePermissionStore, useAppStore } from "@/store"; import { useSettingsStore, usePermissionStore, useAppStore } from "@/store";
// 颜色预设
const colorPresets = [
"#4080FF",
"#ff4500",
"#ff8c00",
"#90ee90",
"#00ced1",
"#1e90ff",
"#c71585",
"rgb(255, 120, 0)",
"hsva(120, 40, 94)",
];
const route = useRoute(); const route = useRoute();
const appStore = useAppStore(); const appStore = useAppStore();
@@ -57,32 +92,23 @@ const permissionStore = usePermissionStore();
const isDark = ref<boolean>(settingsStore.theme === ThemeEnum.DARK); const isDark = ref<boolean>(settingsStore.theme === ThemeEnum.DARK);
const sidebarColor = ref(settingsStore.sidebarColorScheme); const sidebarColor = ref(settingsStore.sidebarColorScheme);
const settingsVisible = computed({ const selectedThemeColor = computed({
get() { get: () => settingsStore.themeColor,
return settingsStore.settingsVisible; set: (value) => settingsStore.changeThemeColor(value),
}, });
set() {
settingsStore.settingsVisible = false; const drawerVisible = computed({
}, get: () => settingsStore.settingsVisible,
set: (value) => (settingsStore.settingsVisible = value),
}); });
/** /**
* 切换主题颜色 * 处理主题切换
* *
* @param color 颜色 * @param isDark 是否启用暗黑模式
*/ */
function changeThemeColor(color: string) { const handleThemeChange = (isDark: string | number | boolean) => {
settingsStore.changeThemeColor(color); settingsStore.changeTheme(isDark ? ThemeEnum.DARK : ThemeEnum.LIGHT);
}
/**
* 切换主题
*
* @param val 是否为暗黑模式
*/
const changeTheme = (val: any) => {
isDark.value = val;
settingsStore.changeTheme(isDark.value ? ThemeEnum.DARK : ThemeEnum.LIGHT);
}; };
/** /**
@@ -97,34 +123,25 @@ const changeSidebarColor = (val: any) => {
/** /**
* 切换布局 * 切换布局
* *
* @param layout 布局 LayoutEnum * @param layout - 布局模式
*/ */
function changeLayout(layout: LayoutEnum) { const handleLayoutChange = (layout: LayoutEnum) => {
settingsStore.changeLayout(layout); settingsStore.changeLayout(layout);
if (layout === LayoutEnum.MIX) { if (layout === LayoutEnum.MIX && route.name) {
route.name && againActiveTop(route.name as string); const topLevelRoute = findTopLevelRoute(permissionStore.routes, route.name as string);
if (appStore.activeTopMenuPath !== topLevelRoute.path) {
appStore.activeTopMenu(topLevelRoute.path);
}
} }
} };
/** /**
* 重新激活顶部菜单 * 查找路由的顶层父路由
*
* @param routeName 路由名称
*/
function againActiveTop(routeName: string) {
const parent = findOutermostParent(permissionStore.routes, routeName);
if (appStore.activeTopMenuPath !== parent.path) {
appStore.activeTopMenu(parent.path);
}
}
/**
* 查找最外层父级
* *
* @param tree 树形数据 * @param tree 树形数据
* @param findName 查找的名称 * @param findName 查找的名称
*/ */
function findOutermostParent(tree: any[], findName: string) { function findTopLevelRoute(tree: any[], findName: string) {
let parentMap: any = {}; let parentMap: any = {};
function buildParentMap(node: any, parent: any) { function buildParentMap(node: any, parent: any) {
@@ -148,9 +165,28 @@ function findOutermostParent(tree: any[], findName: string) {
} }
currentNode = parentMap[currentNode.name]; currentNode = parentMap[currentNode.name];
} }
return null; return null;
} }
/**
* 关闭抽屉前的回调
*/
const handleCloseDrawer = () => {
settingsStore.settingsVisible = false;
};
</script> </script>
<style lang="scss" scoped></style> <style lang="scss" scoped>
.config-section {
margin-bottom: 24px;
.config-item {
padding: 12px 0;
border-bottom: 1px solid var(--el-border-color-light);
&:last-child {
border-bottom: none;
}
}
}
</style>