Skip to content

Commit

Permalink
feature: 保存布局设置
Browse files Browse the repository at this point in the history
  • Loading branch information
jsxiaosi committed Jan 4, 2022
1 parent aa662f6 commit 504eb4e
Show file tree
Hide file tree
Showing 15 changed files with 197 additions and 131 deletions.
80 changes: 40 additions & 40 deletions discard/store/module/app/index.ts
Original file line number Diff line number Diff line change
@@ -1,50 +1,50 @@
import { Module } from 'vuex'
import { Module } from 'vuex';

const actionTypes = {}
const actionTypes = {};

const mutationTypes = {
SET_COLLAPSEMENU: 'SET_COLLAPSEMENU',
SET_SIDEBARMODE: 'SET_SIDEBARMODE',
}
SET_COLLAPSEMENU: 'SET_COLLAPSEMENU',
SET_SIDEBARMODE: 'SET_SIDEBARMODE',
};

interface StoreUser {
collapseMenu: boolean
sidebarMode: string
layoute: object
collapseMenu: boolean;
sidebarMode: string;
layoute: object;
}

const locstorCollapse = localStorage.getItem('appCollapseMenu') || 'false'
const locMenu = JSON.parse(locstorCollapse)
const locstorCollapse = localStorage.getItem('appCollapseMenu') || 'false';
const locMenu = JSON.parse(locstorCollapse);

const locstorsSidebarMode = localStorage.getItem('appSidebarMode') || 'vertical'
console.log(locstorsSidebarMode)
const locstorsSidebarMode = localStorage.getItem('appSidebarMode') || 'vertical';
console.log(locstorsSidebarMode);

const store: Module<StoreUser, unknown> = {
namespaced: false, // 是否加上所属的模块名
state() {
return {
collapseMenu: locMenu || false,
sidebarMode: locstorsSidebarMode,
layoute: {},
}
},
mutations: {
[mutationTypes.SET_COLLAPSEMENU](state: StoreUser, payload: boolean) {
state.collapseMenu = payload
localStorage.setItem('appCollapseMenu', JSON.stringify(payload))
},
[mutationTypes.SET_SIDEBARMODE](state: StoreUser, payload: string) {
state.sidebarMode = payload
localStorage.setItem('appSidebarMode', payload)
},
},
actions: {},
getters: {
collapseMenu: (state) => state.collapseMenu,
sidebarMode: (state) => state.sidebarMode,
},
}

export { actionTypes, mutationTypes }

export default store
namespaced: false, // 是否加上所属的模块名
state() {
return {
collapseMenu: locMenu || false,
sidebarMode: locstorsSidebarMode,
layoute: {},
};
},
mutations: {
[mutationTypes.SET_COLLAPSEMENU](state: StoreUser, payload: boolean) {
state.collapseMenu = payload;
localStorage.setItem('appCollapseMenu', JSON.stringify(payload));
},
[mutationTypes.SET_SIDEBARMODE](state: StoreUser, payload: string) {
state.sidebarMode = payload;
localStorage.setItem('appSidebarMode', payload);
},
},
actions: {},
getters: {
collapseMenu: (state) => state.collapseMenu,
sidebarMode: (state) => state.sidebarMode,
},
};

export { actionTypes, mutationTypes };

export default store;
25 changes: 16 additions & 9 deletions src/components/Application/AppTheme.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div class="theme" :class="{ 'theme-dark': isDark }" @click="toggleDarkMode">
<div class="theme" :class="{ 'theme-dark': isDark === 'dark' }" @click="toggleDarkMode">
<div class="theme-inner"></div>
<SvgIcon name="sun"></SvgIcon>
<SvgIcon name="moon"></SvgIcon>
Expand All @@ -10,20 +10,27 @@
import { ref } from 'vue';
import SvgIcon from '../SvgIcon/index.vue';
import { toggleTheme } from '@zougt/vite-plugin-theme-preprocessor/dist/browser-utils';
import { useAppStore } from '@/store/modules/app';
import { getAppCollapseMenu } from '@/hooks/appWindow';
// const toggleTheme = (scopeName = 'theme-default') => {
// document.documentElement.className = scopeName
// }
const isDark = ref<boolean>(false);
const appStore = useAppStore();
const { appConfigMode } = getAppCollapseMenu();
const isDark = ref<string>(appConfigMode.value.themeMode);
isDark.value = appConfigMode.value.themeMode;
toggleTheme({
scopeName: `variables-theme-${isDark.value}`,
});
const toggleDarkMode = () => {
isDark.value = !isDark.value;
console.log(isDark.value);
let scopeName = 'variables-theme-day';
if (isDark.value) scopeName = 'variables-theme-dark';
else scopeName = 'variables-theme-day';
console.log(scopeName);
isDark.value = isDark.value === 'day' ? 'dark' : 'day';
appConfigMode.value.themeMode = isDark.value;
appStore.setAppConfigMode(appConfigMode.value);
toggleTheme({
scopeName,
scopeName: `variables-theme-${isDark.value}`,
});
};
</script>
Expand Down
5 changes: 2 additions & 3 deletions src/hooks/appWindow.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import { useAppStore } from '@/store/modules/app';
export const getAppCollapseMenu = () => {
// const store = useStore()
const appStore = useAppStore();
const isCollapseMenu = computed(() => appStore.getCollapseMenu);
const sidebarMode = computed(() => appStore.getSidebarMode);
return { isCollapseMenu, sidebarMode };
const appConfigMode = computed(() => appStore.getAppConfigMode);
return { appConfigMode };
};
8 changes: 5 additions & 3 deletions src/layouts/components/Breadcrumb/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
></i>-->
<SvgIcon
class="breadcrumb-fold"
:class="{ 'breadcrumb-unfold': isCollapseMenu }"
:class="{ 'breadcrumb-unfold': isAppConfigMode.collapseMenu }"
name="fold"
color="#e3e3e3"
@click="handerShowElmenu"
Expand Down Expand Up @@ -74,11 +74,13 @@
watch(route, getBreadcrumb);
// 当前是否折叠导航栏
const { isCollapseMenu } = getAppCollapseMenu();
const { appConfigMode } = getAppCollapseMenu();
const isAppConfigMode = ref(appConfigMode.value);
const appStore = useAppStore();
// 折叠菜单事件
const handerShowElmenu = () => {
appStore.setCollapseMenu(!isCollapseMenu.value);
isAppConfigMode.value.collapseMenu = !isAppConfigMode.value.collapseMenu;
appStore.setAppConfigMode(isAppConfigMode.value);
};
</script>

Expand Down
11 changes: 9 additions & 2 deletions src/layouts/components/Navbart/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,11 @@
<SvgIcon class="logo" name="Vue" @click="drawer = true"></SvgIcon>
</div>
<div class="navbar-center">
<Sidebar v-if="sidebarMode === 'horizontal'" class="sidebar-horizontal" mode="horizontal" />
<Sidebar
v-if="appConfigMode.sidebarMode === 'horizontal'"
class="sidebar-horizontal"
mode="horizontal"
/>
</div>
<div class="navbar-right">
<AppTheme></AppTheme>
Expand Down Expand Up @@ -41,7 +45,7 @@
const drawer = ref(false);
const { sidebarMode } = getAppCollapseMenu();
const { appConfigMode } = getAppCollapseMenu();
// const options = ref([
// { name: '123', value: 'variables-theme-day' },
Expand Down Expand Up @@ -84,6 +88,9 @@
width: 100%;
height: 100%;
padding: 0 20px;
// .sidebar-horizontal {
// height: 54px;
// }
}
.navbar-right {
Expand Down
16 changes: 9 additions & 7 deletions src/layouts/components/Seting/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<el-tooltip content="左侧菜单模式" placement="bottom">
<div
class="sidebar_mode"
:class="{ 'sidebar_mode-select': sidebarMode === 'vertical' }"
:class="{ 'sidebar_mode-select': appConfigMode.sidebarMode === 'vertical' }"
@click="handerShowElmenu('vertical')"
>
<div></div>
Expand All @@ -17,7 +17,7 @@
<el-tooltip content="顶部菜单模式" placement="bottom">
<div
class="sidebar_mode"
:class="{ 'sidebar_mode-select': sidebarMode === 'horizontal' }"
:class="{ 'sidebar_mode-select': appConfigMode.sidebarMode === 'horizontal' }"
@click="handerShowElmenu('horizontal')"
>
<div></div>
Expand Down Expand Up @@ -53,12 +53,14 @@
},
);
const { sidebarMode } = getAppCollapseMenu();
const { appConfigMode } = getAppCollapseMenu();
const isAppConfigMode = ref(appConfigMode.value);
const appStore = useAppStore();
// 折叠菜单事件
const handerShowElmenu = (vale: string) => {
appStore.setSidebarMode(vale);
isAppConfigMode.value.sidebarMode = vale;
appStore.setAppConfigMode(isAppConfigMode.value);
};
</script>

Expand All @@ -74,7 +76,7 @@
justify-content: space-around;
.sidebar_mode-select {
border: 2px solid #{$mianColor};
border: 2px solid #409eff;
}
.sidebar_mode {
Expand All @@ -90,7 +92,7 @@
&:nth-child(1) {
width: 30%;
height: 100%;
background: #{$mianColor};
background: #409eff;
}
&:nth-child(2) {
Expand All @@ -110,7 +112,7 @@
&:nth-child(1) {
width: 100%;
height: 30%;
background: #{$mianColor};
background: #409eff;
box-shadow: 0 0 1px #888;
}
}
Expand Down
5 changes: 2 additions & 3 deletions src/layouts/components/Sidebar/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<el-menu
:default-active="activeMenyu"
:unique-opened="false"
:collapse="sidebarMode === 'horizontal' ? false : isCollapseMenu"
:collapse="appConfigMode.sidebarMode === 'horizontal' ? false : appConfigMode.collapseMenu"
:mode="mode"
>
<sidebar-item
Expand Down Expand Up @@ -40,11 +40,10 @@
if (meta.activeMenu) {
return meta.activeMenu;
}
console.log(path);
return path;
});
const { isCollapseMenu, sidebarMode } = getAppCollapseMenu();
const { appConfigMode } = getAppCollapseMenu();
// const isCollapse = ref(false)
</script>
Expand Down
6 changes: 3 additions & 3 deletions src/layouts/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@
<NavBart />
<!-- 侧边导航栏 -->
<Sidebar
v-if="sidebarMode === 'vertical'"
v-if="appConfigMode.sidebarMode === 'vertical'"
class="sidebar-container"
:class="{ hideSidebar: isCollapseMenu }"
:class="{ hideSidebar: appConfigMode.collapseMenu }"
mode="vertical"
/>
<div class="main-container">
Expand All @@ -27,7 +27,7 @@
import Breadcrumb from './components/Breadcrumb/index.vue';
import { getAppCollapseMenu } from '@/hooks/appWindow';
const { isCollapseMenu, sidebarMode } = getAppCollapseMenu();
const { appConfigMode } = getAppCollapseMenu();
</script>

<style lang="scss" scoped></style>
32 changes: 18 additions & 14 deletions src/store/modules/app.ts
Original file line number Diff line number Diff line change
@@ -1,35 +1,39 @@
import { defineStore } from 'pinia';
import { store } from '@/store';
import { appConfig } from '#/piniaStore';

interface AppState {
collapseMenu: boolean;
sidebarMode: string;
appConfigMode: appConfig;
}

let localAppConfig: appConfig = {
collapseMenu: false,
sidebarMode: 'vertical',
themeMode: 'day',
};

export const useAppStore = defineStore({
id: 'app',
state: (): AppState => ({
collapseMenu: false,
sidebarMode: 'vertical',
appConfigMode: localAppConfig,
}),
getters: {
getCollapseMenu(): boolean {
return this.collapseMenu;
},
getSidebarMode(): string {
return this.sidebarMode;
getAppConfigMode(): appConfig {
return this.appConfigMode;
},
},
actions: {
setCollapseMenu(collapseMenu: boolean): void {
this.collapseMenu = collapseMenu;
},
setSidebarMode(sidebarMode: string): void {
this.sidebarMode = sidebarMode;
setAppConfigMode(appConfigMode: appConfig): void {
localStorage.setItem('appConfigMode', JSON.stringify(appConfigMode));
this.appConfigMode = appConfigMode;
},
},
});

export function useAppStoreHook() {
return useAppStore(store);
}

export const setWindowAppConfig = (appConfig: appConfig) => {
if (appConfig) localAppConfig = appConfig;
};
6 changes: 5 additions & 1 deletion src/styles/sidebar.scss
Original file line number Diff line number Diff line change
Expand Up @@ -184,6 +184,7 @@
}

.el-sub-menu {
background-color: $menuBg;
overflow: hidden;

.sub-menu-svg {
Expand Down Expand Up @@ -245,7 +246,6 @@
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: $menuBg;

.el-sub-menu__icon-arrow {
position: relative !important;
Expand Down Expand Up @@ -338,7 +338,10 @@
// when menu collapsed
.el-menu--vertical,
.el-menu--horizontal {
background-color: $menuBg;
border: none;
.el-sub-menu > .el-sub-menu__title {
background-color: $menuItemBg;
&:hover {
color: $menuHoverText !important;
background-color: $menuHover;
Expand Down Expand Up @@ -372,6 +375,7 @@

.el-menu-item,
> .el-menu--popup .el-menu-item {
background-color: $menuItemBg;
// border-left: #{$menuItemBorderLeft} solid 3px;
&:hover {
color: $menuItemHoverText !important;
Expand Down
Loading

0 comments on commit 504eb4e

Please sign in to comment.