当前位置：首页 > news >正文

Vue3.5 企业级管理系统实战（十五）：其他全局设置项

news 来源：原创 2025/5/29 3:02:56

在设置面板中，除了主题颜色的选择设置，还可以添加其他全局配置选项，如 tagsView 导航栏，Logo 的显示隐藏配置等。

1 Settings 的 Pinia 配置

在 src/stores/settings.ts 中添加要持久存储的全局配置项，这里是 tagsView 和 sidebarLogo，代码如下：

//src/stores/settings.ts
import variables from "@/style/variables.module.scss";// 定义一个名为 "setting" 的 Vuex 存储，用于管理应用的设置
export const useSettingStore = defineStore("setting",() => {// 如果选择的是同样的主题颜色，就不更改，节省const settings = reactive({theme: variables.theme, //当前选择的颜色originalTheme: "", //正在应用的颜色tagsView: true,sidebarLogo: true});type ISetting = typeof settings;// 定义一个方法来更改设置const changeSetting = <T extends keyof ISetting>({key,value}: {key: T;value: ISetting[T];}) => {settings[key] = value;};return { changeSetting, settings };},{persist: {storage: sessionStorage, // 使用 sessionStorage 作为持久化存储pick: ["settings.theme", "settings.tagsView", "settings.sidebarLogo"] // 仅持久化 theme、tagsView、sidebarLogo 三个设置}}
);

2 Settings 组件

在 src/layout/components/Settings/index.vue 中增加要添加的全局配置内容，代码如下：

//src/layout/components/Settings/index.vue
<template><div class="drawer-item"><span>主题色</span><theme-picker></theme-picker></div><div class="drawer-item"><span>是否展示TagsView</span><el-switch v-model="isShowTagsView"></el-switch></div><div class="drawer-item"><span>是否展示Logo</span><el-switch v-model="isShowLogo"></el-switch></div>
</template><script lang="ts" setup>
import { useSettingStore } from "@/stores/settings";const settingsStore = useSettingStore();
const sidebarLogo = computed(() => settingsStore.settings.sidebarLogo);
const tagsView = computed(() => settingsStore.settings.tagsView);const isShowTagsView = computed({get() {return tagsView.value;},set(val: boolean) {settingsStore.changeSetting({ key: "tagsView", value: val });}
});const isShowLogo = computed({get() {return sidebarLogo.value;},set(val: boolean) {settingsStore.changeSetting({ key: "sidebarLogo", value: val });}
});
</script>

3 添加页面控制

3.1 TagsView 配置

3.1.1 导出样式高度

在 src/style/variables.module.scss 中将需要参与高度计算的样式变量导出（navBarHeight、tagsViewHeight）并在 src/style/variables.module.scss.d.ts 中定义类型，代码如下：

//src/style/variables.module.scss
$sideBarWidth: 210px;
$navBarHeight: 50px;
$tagsViewHeight: 34px;// 导航颜色
$menuText: #bfcbd9;
// 导航激活的颜色
$menuActiveText: #409eff;
// 菜单背景色
$menuBg: #304156;
$theme: #409eff;:export {menuText: $menuText;menuActiveText: $menuActiveText;menuBg: $menuBg;theme: $theme;navBarHeight: $navBarHeight;tagsViewHeight: $tagsViewHeight;
}

//src/style/variables.module.scss.d.ts
interface IVaraibles {menuText: string;menuActiveText: string;menuBg: string;theme: string;navBarHeight: string;tagsViewHeight: string;
}export const varaibles: IVaraibles;
export default varaibles;

3.1.2 页面修改

在 src/layout/index.vue 中添加选项控制属性，并根据 tagsView 的显示隐藏状态，动态计算页面高度，代码如下：

//src/layout/index.vue
<template><div class="app-wrapper"><div class="sidebar-container"><sidebar></sidebar></div><div class="main-container"><div class="header"><!--  上边包含收缩的导航条 --><navbar @showSetting="openSetting"></navbar><tags-view v-if="isShowTagsView"></tags-view></div><div class="app-main"><app-main></app-main></div></div><right-panel v-model="setting" title="设置"><!-- 设置功能 --><Settings></Settings></right-panel></div>
</template><script lang="ts" setup>
import { useSettingStore } from "@/stores/settings";
import variables from "@/style/variables.module.scss";const setting = ref(false);
const openSetting = () => {setting.value = true;
};const settingsStore = useSettingStore();
const isShowTagsView = computed(() => settingsStore.settings.tagsView);const outerHeight = computed(() => {return ((isShowTagsView.value? parseInt(variables.navBarHeight) + parseInt(variables.tagsViewHeight): parseInt(variables.navBarHeight)) + "px");
});
</script>
<style lang="scss" scoped>
.app-wrapper {@apply flex w-full h-full;.app-main {@apply overflow-hidden pos-relative;min-height: calc(100vh - v-bind(outerHeight));}.sidebar-container {// 跨组件设置样式@apply bg-[var(--menu-bg)];:deep(.sidebar-container-menu:not(.el-menu--collapse)) {@apply w-[var(--sidebar-width)];}}.main-container {@apply flex flex-col flex-1 overflow-hidden;}
}
</style>

3.2 Logo 配置

3.2.1 Logo 组件开发

开发 Logo 组件，在 src/layout/components/Sidebar 下新建 logo.vue，代码如下：

//src/layout/components/Sidebar/logo.vue
<template><div class="sidebar-logo-container" :class="{ collapse }"><transition name="logo-fade"><router-link to="/" :key="collapse ? 'a' : 'b'" class="sidebar-logo"><img :src="logo" alt="" /><h1 v-if="!collapse" class="sidebar-logo-title">Vue admin</h1></router-link></transition></div>
</template><script lang="ts" setup>
import logo from "@/assets/vue.svg";
defineProps({collapse: {type: Boolean}
});
</script><style scoped lang="scss">
.sidebar-logo {@apply w-full h-60px lead-60px flex items-center justify-center;
}
.sidebar-logo-title {@apply inline-block text-20px text-white mx-10px;
}.logo-fade-enter-from,
.logo-fade-leave-to {@apply opacity-0;
}
.logo-fade-enter-active {@apply transition-opacity duration-150;
}
</style>

3.2.2 页面引入

在 src/layout/components/Sidebar/index.vue 中引入 Logo 组件，代码如下：

//src/layout/components/Sidebar/index.vue
<template><div><logo v-if="sidebarLogo" :collapse="sidebar.opened"></logo><el-menuclass="sidebar-container-menu"router:default-active="defaultActive":background-color="varaibles.menuBg":text-color="varaibles.menuText":active-text-color="theme":collapse="sidebar.opened"><sidebar-itemv-for="route in routes":key="route.path":item="route":base-path="route.path"/><!-- 增加父路径，用于el-menu-item渲染的时候拼接 --></el-menu></div><!-- :collapse="true" -->
</template><script lang="ts" setup>
import { useAppStore } from "@/stores/app";
import varaibles from "@/style/variables.module.scss";
import { routes } from "@/router";
import { useSettingStore } from "@/stores/settings";const route = useRoute();const { sidebar } = useAppStore();const defaultActive = computed(() => {// .....return route.path;
});const settingsStore = useSettingStore();
const theme = computed(() => settingsStore.settings.theme);const sidebarLogo = computed(() => settingsStore.settings.sidebarLogo);
</script><style scoped></style>

完成后，npm run dev 启动，页面效果如下：