| | |
| | | <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" /> |
| | | <div v-if="sideTheme === 'theme-dark'" class="setting-drawer-block-checbox-selectIcon" style="display: block;"> |
| | | <div v-if="sideTheme === 'theme-dark'" class="setting-drawer-block-checbox-selectIcon" style="display: block"> |
| | | <i aria-label="图标: check" class="anticon anticon-check"> |
| | | <svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" :fill="theme" aria-hidden="true" focusable="false" class> |
| | | <path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z" /> |
| | | <svg |
| | | viewBox="64 64 896 896" |
| | | data-icon="check" |
| | | width="1em" |
| | | height="1em" |
| | | :fill="theme" |
| | | aria-hidden="true" |
| | | focusable="false" |
| | | class |
| | | > |
| | | <path |
| | | d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z" |
| | | /> |
| | | </svg> |
| | | </i> |
| | | </div> |
| | | </div> |
| | | <div class="setting-drawer-block-checbox-item" @click="handleTheme('theme-light')"> |
| | | <img src="@/assets/images/light.svg" alt="light" /> |
| | | <div v-if="sideTheme === 'theme-light'" class="setting-drawer-block-checbox-selectIcon" style="display: block;"> |
| | | <div v-if="sideTheme === 'theme-light'" class="setting-drawer-block-checbox-selectIcon" style="display: block"> |
| | | <i aria-label="图标: check" class="anticon anticon-check"> |
| | | <svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" :fill="theme" aria-hidden="true" focusable="false" class> |
| | | <path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z" /> |
| | | <svg |
| | | viewBox="64 64 896 896" |
| | | data-icon="check" |
| | | width="1em" |
| | | height="1em" |
| | | :fill="theme" |
| | | aria-hidden="true" |
| | | focusable="false" |
| | | class |
| | | > |
| | | <path |
| | | d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z" |
| | | /> |
| | | </svg> |
| | | </i> |
| | | </div> |
| | |
| | | <div class="drawer-item"> |
| | | <span>主题颜色</span> |
| | | <span class="comp-style"> |
| | | <el-color-picker v-model="theme" :predefine="predefineColors" @change="themeChange"/> |
| | | <el-color-picker v-model="theme" :predefine="predefineColors" @change="themeChange" /> |
| | | </span> |
| | | </div> |
| | | <el-divider /> |
| | |
| | | <el-button type="primary" plain icon="DocumentAdd" @click="saveSetting">保存配置</el-button> |
| | | <el-button plain icon="Refresh" @click="resetSetting">重置配置</el-button> |
| | | </el-drawer> |
| | | |
| | | </template> |
| | | |
| | | <script setup> |
| | | import variables from '@/assets/styles/variables.module.scss' |
| | | import axios from 'axios' |
| | | import { ElLoading, ElMessage } from 'element-plus' |
| | | 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 variables from "@/assets/styles/variables.module.scss" |
| | | import axios from "axios" |
| | | import { ElLoading, ElMessage } from "element-plus" |
| | | 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" |
| | | |
| | | const { proxy } = getCurrentInstance(); |
| | | const { proxy } = getCurrentInstance() |
| | | 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 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"]) |
| | | |
| | | /** 是否需要topnav */ |
| | | function topNavChange(val) { |
| | | if (!val) { |
| | | appStore.toggleSideBarHide(false); |
| | | permissionStore.setSidebarRouters(permissionStore.defaultRoutes); |
| | | appStore.toggleSideBarHide(false) |
| | | permissionStore.setSidebarRouters(permissionStore.defaultRoutes) |
| | | } |
| | | } |
| | | |
| | | function themeChange(val) { |
| | | settingsStore.theme = val; |
| | | handleThemeStyle(val); |
| | | settingsStore.theme = val |
| | | handleThemeStyle(val) |
| | | } |
| | | function handleTheme(val) { |
| | | settingsStore.sideTheme = val; |
| | | sideTheme.value = val; |
| | | settingsStore.sideTheme = val |
| | | sideTheme.value = val |
| | | // Update body class to match the theme |
| | | document.querySelector("body").className = val === 'theme-dark' ? "themeDark" : "themeLight" |
| | | } |
| | | function saveSetting() { |
| | | proxy.$modal.loading("正在保存到本地,请稍候..."); |
| | | proxy.$modal.loading("正在保存到本地,请稍候...") |
| | | 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)); |
| | | 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) |
| | | } |
| | | function resetSetting() { |
| | | proxy.$modal.loading("正在清除设置缓存并刷新,请稍候..."); |
| | | proxy.$modal.loading("正在清除设置缓存并刷新,请稍候...") |
| | | localStorage.removeItem("layout-setting") |
| | | setTimeout("window.location.reload()", 1000) |
| | | } |
| | | function openSetting() { |
| | | showSettings.value = true; |
| | | showSettings.value = true |
| | | } |
| | | |
| | | defineExpose({ |
| | |
| | | }) |
| | | </script> |
| | | |
| | | <style lang='scss' scoped> |
| | | <style lang="scss" scoped> |
| | | .setting-drawer-title { |
| | | margin-bottom: 12px; |
| | | color: rgba(0, 0, 0, 0.85); |
| | |
| | | margin: -3px 8px 0px 0px; |
| | | } |
| | | } |
| | | </style> |
| | | </style> |