From f801f4fb11ff8ca08417a9ddf0231fb570fa26e3 Mon Sep 17 00:00:00 2001 From: 疯狂的狮子Li <15040126243@163.com> Date: 星期一, 24 七月 2023 16:47:51 +0800 Subject: [PATCH] fix 修复 固定页面header穿模问题 --- src/layout/components/Settings/index.vue | 225 +++++++++++++++++++++++++++++-------------------------- 1 files changed, 119 insertions(+), 106 deletions(-) diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue index 7e9d8b3..8eb7921 100644 --- a/src/layout/components/Settings/index.vue +++ b/src/layout/components/Settings/index.vue @@ -1,110 +1,7 @@ -<script setup lang="ts"> -import { useDynamicTitle } from '@/utils/dynamicTitle' -import useAppStore from '@/store/modules/app' -import useSettingsStore from '@/store/modules/settings' -import usePermissionStore from '@/store/modules/permission' -import { handleThemeStyle } from '@/utils/theme' -import { ComponentInternalInstance } from "vue"; -import { SettingTypeEnum } from "@/enums/SettingTypeEnum"; - -const { proxy } = getCurrentInstance() as ComponentInternalInstance; -const appStore = useAppStore() -const settingsStore = useSettingsStore() -const permissionStore = usePermissionStore() - - -const showSettings = ref(false); -const theme = ref(settingsStore.theme); -const sideTheme = ref(settingsStore.sideTheme); -const storeSettings = computed(() => settingsStore); -const predefineColors = ref(["#409EFF", "#ff4500", "#ff8c00", "#ffd700", "#90ee90", "#00ced1", "#1e90ff", "#c71585"]); - -/** 鏄惁闇�瑕乼opnav */ -const topNav = computed({ - get: () => storeSettings.value.topNav, - set: (val) => { - settingsStore.changeSetting({ key: SettingTypeEnum.TOP_NAV, value: val }) - if (!val) { - appStore.toggleSideBarHide(false); - permissionStore.setSidebarRouters(permissionStore.defaultRoutes); - } - } -}) -/** 鏄惁闇�瑕乼agview */ -const tagsView = computed({ - get: () => storeSettings.value.tagsView, - set: (val) => { - settingsStore.changeSetting({ key: SettingTypeEnum.TAGS_VIEW, value: val }) - } -}) -/**鏄惁闇�瑕佸浐瀹氬ご閮� */ -const fixedHeader = computed({ - get: () => storeSettings.value.fixedHeader, - set: (val) => { - settingsStore.changeSetting({ key: SettingTypeEnum.FIXED_HEADER, value: val }) - } -}) -/**鏄惁闇�瑕佷晶杈规爮鐨刲ogo */ -const sidebarLogo = computed({ - get: () => storeSettings.value.sidebarLogo, - set: (val) => { - settingsStore.changeSetting({ key: SettingTypeEnum.SIDEBAR_LOGO, value: val }) - } -}) -/**鏄惁闇�瑕佷晶杈规爮鐨勫姩鎬佺綉椤电殑title */ -const dynamicTitle = computed({ - get: () => storeSettings.value.dynamicTitle, - set: (val) => { - settingsStore.changeSetting({ key: SettingTypeEnum.DYNAMIC_TITLE, value: val }) - // 鍔ㄦ�佽缃綉椤垫爣棰� - useDynamicTitle() - } -}) - -const themeChange = (val: string | null) => { - settingsStore.changeSetting({ key: SettingTypeEnum.THEME, value: val }) - theme.value = val; - if (val) { - handleThemeStyle(val); - } -} -const handleTheme = (val: string) => { - settingsStore.changeSetting({ key: SettingTypeEnum.SIDE_THEME, value: val }) - sideTheme.value = val; -} -const saveSetting = () => { - proxy?.$modal.loading("姝e湪淇濆瓨鍒版湰鍦帮紝璇风◢鍊�..."); - let layoutSetting = { - "topNav": storeSettings.value.topNav, - "tagsView": storeSettings.value.tagsView, - "fixedHeader": storeSettings.value.fixedHeader, - "sidebarLogo": storeSettings.value.sidebarLogo, - "dynamicTitle": storeSettings.value.dynamicTitle, - "sideTheme": storeSettings.value.sideTheme, - "theme": storeSettings.value.theme - }; - localStorage.setItem("layout-setting", JSON.stringify(layoutSetting)); - setTimeout(() => {proxy?.$modal.closeLoading()}, 1000) -} -const resetSetting = () => { - proxy?.$modal.loading("姝e湪娓呴櫎璁剧疆缂撳瓨骞跺埛鏂帮紝璇风◢鍊�..."); - localStorage.removeItem("layout-setting") - setTimeout("window.location.reload()", 1000) -} -const openSetting = () => { - showSettings.value = true; -} - -defineExpose({ - openSetting, -}) -</script> - <template> <el-drawer v-model="showSettings" :withHeader="false" direction="rtl" size="300px" close-on-click-modal> - <div class="setting-drawer-title"> - <h3 class="drawer-title">涓婚椋庢牸璁剧疆</h3> - </div> + <h3 class="drawer-title">涓婚椋庢牸璁剧疆</h3> + <div class="setting-drawer-block-checbox"> <div class="setting-drawer-block-checbox-item" @click="handleTheme('theme-dark')"> <img src="@/assets/images/dark.svg" alt="dark" /> @@ -137,6 +34,13 @@ <el-color-picker v-model="theme" :predefine="predefineColors" @change="themeChange" /> </span> </div> + <div class="drawer-item"> + <span>娣辫壊妯″紡</span> + <span class="comp-style"> + <el-switch v-model="isDark" @change="toggleDark" class="drawer-switch" /> + </span> + </div> + <el-divider /> <h3 class="drawer-title">绯荤粺甯冨眬閰嶇疆</h3> @@ -182,6 +86,116 @@ <el-button plain icon="Refresh" @click="resetSetting">閲嶇疆閰嶇疆</el-button> </el-drawer> </template> + +<script setup lang="ts"> +import { useDynamicTitle } from '@/utils/dynamicTitle' +import useAppStore from '@/store/modules/app' +import useSettingsStore from '@/store/modules/settings' +import usePermissionStore from '@/store/modules/permission' +import { handleThemeStyle } from '@/utils/theme' +import { ComponentInternalInstance } from "vue"; +import { SettingTypeEnum } from "@/enums/SettingTypeEnum"; + +const { proxy } = getCurrentInstance() as ComponentInternalInstance; +const appStore = useAppStore() +const settingsStore = useSettingsStore() +const permissionStore = usePermissionStore() + + +const showSettings = ref(false); +const theme = ref(settingsStore.theme); +const sideTheme = ref(settingsStore.sideTheme); +const storeSettings = computed(() => settingsStore); +const predefineColors = ref(["#409EFF", "#ff4500", "#ff8c00", "#ffd700", "#90ee90", "#00ced1", "#1e90ff", "#c71585"]); + +// 鏄惁鏆楅粦妯″紡 +const isDark = useDark({ + storageKey: 'useDarkKey', + valueDark: 'dark', + valueLight: 'light', +}); +const toggleDark = () => useToggle(isDark); + +/** 鏄惁闇�瑕乼opNav */ +const topNav = computed({ + get: () => storeSettings.value.topNav, + set: (val) => { + settingsStore.changeSetting({ key: SettingTypeEnum.TOP_NAV, value: val }) + if (!val) { + appStore.toggleSideBarHide(false); + permissionStore.setSidebarRouters(permissionStore.defaultRoutes); + } + } +}) +/** 鏄惁闇�瑕乼agview */ +const tagsView = computed({ + get: () => storeSettings.value.tagsView, + set: (val) => { + settingsStore.changeSetting({ key: SettingTypeEnum.TAGS_VIEW, value: val }) + } +}) +/**鏄惁闇�瑕佸浐瀹氬ご閮� */ +const fixedHeader = computed({ + get: () => storeSettings.value.fixedHeader, + set: (val) => { + settingsStore.changeSetting({ key: SettingTypeEnum.FIXED_HEADER, value: val }) + } +}) +/**鏄惁闇�瑕佷晶杈规爮鐨刲ogo */ +const sidebarLogo = computed({ + get: () => storeSettings.value.sidebarLogo, + set: (val) => { + settingsStore.changeSetting({ key: SettingTypeEnum.SIDEBAR_LOGO, value: val }) + } +}) +/**鏄惁闇�瑕佷晶杈规爮鐨勫姩鎬佺綉椤电殑title */ +const dynamicTitle = computed({ + get: () => storeSettings.value.dynamicTitle, + set: (val) => { + settingsStore.changeSetting({ key: SettingTypeEnum.DYNAMIC_TITLE, value: val }) + // 鍔ㄦ�佽缃綉椤垫爣棰� + useDynamicTitle() + } +}) + +const themeChange = (val: string | null) => { + settingsStore.changeSetting({ key: SettingTypeEnum.THEME, value: val }) + theme.value = val; + if (val) { + handleThemeStyle(val); + } +} +const handleTheme = (val: string) => { + settingsStore.changeSetting({ key: SettingTypeEnum.SIDE_THEME, value: val }) + sideTheme.value = val; +} +const saveSetting = () => { + proxy?.$modal.loading("姝e湪淇濆瓨鍒版湰鍦帮紝璇风◢鍊�..."); + let layoutSetting = { + "topNav": storeSettings.value.topNav, + "tagsView": storeSettings.value.tagsView, + "fixedHeader": storeSettings.value.fixedHeader, + "sidebarLogo": storeSettings.value.sidebarLogo, + "dynamicTitle": storeSettings.value.dynamicTitle, + "sideTheme": storeSettings.value.sideTheme, + "theme": storeSettings.value.theme + }; + localStorage.setItem("layout-setting", JSON.stringify(layoutSetting)); + setTimeout(() => {proxy?.$modal.closeLoading()}, 1000) +} +const resetSetting = () => { + proxy?.$modal.loading("姝e湪娓呴櫎璁剧疆缂撳瓨骞跺埛鏂帮紝璇风◢鍊�..."); + localStorage.removeItem("layout-setting") + setTimeout("window.location.reload()", 1000) +} +const openSetting = () => { + showSettings.value = true; +} + +defineExpose({ + openSetting, +}) +</script> <style lang="scss" scoped> .setting-drawer-title { @@ -234,7 +248,6 @@ } .drawer-item { - color: rgba(0, 0, 0, 0.65); padding: 12px 0; font-size: 14px; -- Gitblit v1.9.3