ssh_sso/ssp-admin-vue3/src/layout/nav/com-setting.vue

<!-- 全局设置组件 -->
<template>
    <div class="setting-drawer-box">
        <el-drawer
            v-model="appStore.isShowSetting"
            title="全局设置"
            size="300px"
        >
            <div style="height: 100%">
                <el-scrollbar>
                    <div style="padding: 0px 20px;">
                        <ComSettingLayoutMode></ComSettingLayoutMode>
                        <ComSettingTheme></ComSettingTheme>
                        <ComSettingTabStyle></ComSettingTabStyle>
                        <ComSettingSwitch></ComSettingSwitch>
                        <ComSettingMore></ComSettingMore>

                        <el-divider></el-divider>
                        <div class="btn-box">
                            <el-button icon="el-icon-Refresh" style="width: 100%;" @click="reset">一键重置</el-button>
                        </div>
                    </div>
                </el-scrollbar>
            </div>
        </el-drawer>
    </div>
</template>

<script setup name="com-setting">
import ComSettingTheme from './com-setting/com-setting-theme';
import ComSettingSwitch from './com-setting/com-setting-switch';
import ComSettingTabStyle from './com-setting/com-setting-tab-style';
import ComSettingLayoutMode from './com-setting/com-setting-layout-mode';
import ComSettingMore from './com-setting/com-setting-more';
import {useAppStore} from "../../store/app";
import {watch} from "vue";
import {useThemeStore} from "../../store/theme";
import {ElMessage} from "element-plus";
const appStore = useAppStore();
const themeStore = useThemeStore();

// 监听 themeStore，用户改动时，缓存下来
watch(themeStore, () => {
    localStorage.setItem('user-layout-theme', JSON.stringify(themeStore.$state));
})

// 恢复默认
const reset = function () {
    themeStore.resetTheme();
    ElMessage({message: '重置成功'})
}

</script>

<style scoped lang="scss">
.setting-drawer-box{
  :deep(.el-drawer__header){
    margin-bottom: 25px !important;
  }
  :deep(.el-drawer__body){
    padding: 0 !important;
    overflow: hidden;
  }
}
.btn-box{
  .el-button{border-radius: 2px !important;}
  padding-bottom: 50px;
}
</style>