支持开启暗黑模式

RuoYi

2024-12-04 e212a0ab75e1c59d0d030ac0b2f07048f6a0f9cf

 src/layout/components/Settings/index.vue

@@ -38,131 +38,84 @@
    <div class="drawer-item">

      <span>开启 TopNav</span>

      <span class="comp-style">

        <el-switch v-model="topNav" class="drawer-switch" />

        <el-switch v-model="settingsStore.topNav" @change="topNavChange" class="drawer-switch" />

      </span>

    </div>



    <div class="drawer-item">

      <span>开启 Tags-Views</span>

      <span class="comp-style">

        <el-switch v-model="tagsView" class="drawer-switch" />

        <el-switch v-model="settingsStore.tagsView" class="drawer-switch" />

      </span>

    </div>



    <div class="drawer-item">

      <span>固定 Header</span>

      <span class="comp-style">

        <el-switch v-model="fixedHeader" class="drawer-switch" />

        <el-switch v-model="settingsStore.fixedHeader" class="drawer-switch" />

      </span>

    </div>



    <div class="drawer-item">

      <span>显示 Logo</span>

      <span class="comp-style">

        <el-switch v-model="sidebarLogo" class="drawer-switch" />

        <el-switch v-model="settingsStore.sidebarLogo" class="drawer-switch" />

      </span>

    </div>



    <div class="drawer-item">

      <span>动态标题</span>

      <span class="comp-style">

        <el-switch v-model="dynamicTitle" class="drawer-switch" />

        <el-switch v-model="settingsStore.dynamicTitle" class="drawer-switch" />

      </span>

    </div>



    <el-divider />



    <el-button size="small" type="primary" plain icon="DocumentAdd" @click="saveSetting">保存配置</el-button>

    <el-button size="small" plain icon="Refresh" @click="resetSetting">重置配置</el-button>

    <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 originElementPlus from 'element-plus/theme-chalk/index.css'

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 store = useStore();

const appStore = useAppStore()

const settingsStore = useSettingsStore()

const permissionStore = usePermissionStore()

const showSettings = ref(false);

const theme = ref(store.state.settings.theme);

const sideTheme = ref(store.state.settings.sideTheme);

const storeSettings = computed(() => store.state.settings);

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 */

const topNav = computed({

  get: () => storeSettings.value.topNav,

  set: (val) => {

    store.dispatch('settings/changeSetting', {

      key: 'topNav',

      value: val

    })

    if (!val) {

      store.commit("SET_SIDEBAR_ROUTERS", store.state.permission.defaultRoutes);

    }

function topNavChange(val) {

  if (!val) {

    appStore.toggleSideBarHide(false);

    permissionStore.setSidebarRouters(permissionStore.defaultRoutes);

  }

})

/** 是否需要tagview */

const tagsView = computed({

  get: () => storeSettings.value.tagsView,

  set: (val) => {

    store.dispatch('settings/changeSetting', {

      key: 'tagsView',

      value: val

    })

  }

})

/**是否需要固定头部 */

const fixedHeader = computed({

  get: () => storeSettings.value.fixedHeader,

  set: (val) => {

    store.dispatch('settings/changeSetting', {

      key: 'fixedHeader',

      value: val

    })

  }

})

/**是否需要侧边栏的logo */

const sidebarLogo = computed({

  get: () => storeSettings.value.sidebarLogo,

  set: (val) => {

    store.dispatch('settings/changeSetting', {

      key: 'sidebarLogo',

      value: val

    })

  }

})

/**是否需要侧边栏的动态网页的title */

const dynamicTitle = computed({

  get: () => storeSettings.value.dynamicTitle,

  set: (val) => {

    store.dispatch('settings/changeSetting', {

      key: 'dynamicTitle',

      value: val

    })

    // 动态设置网页标题

    useDynamicTitle()

  }

})

}



function themeChange(val) {

  store.dispatch('settings/changeSetting', {

    key: 'theme',

    value: val

  })

  theme.value = val;

  settingsStore.theme = val;

  handleThemeStyle(val);

}



function handleTheme(val) {

  store.dispatch('settings/changeSetting', {

    key: 'sideTheme',

    value: val

  })

  settingsStore.sideTheme = val;

  sideTheme.value = val;

}



function saveSetting() {

  proxy.$modal.loading("正在保存到本地，请稍候...");

  let layoutSetting = {

@@ -177,11 +130,13 @@
  localStorage.setItem("layout-setting", JSON.stringify(layoutSetting));

  setTimeout(proxy.$modal.closeLoading(), 1000)

}



function resetSetting() {

  proxy.$modal.loading("正在清除设置缓存并刷新，请稍候...");

  localStorage.removeItem("layout-setting")

  setTimeout("window.location.reload()", 1000)

}



function openSetting() {

  showSettings.value = true;

}

@@ -194,13 +149,15 @@
<style lang='scss' scoped>

.setting-drawer-title {

  margin-bottom: 12px;

  color: rgba(0, 0, 0, 0.85);

  color: var(--el-text-color-primary, rgba(0, 0, 0, 0.85));

  line-height: 22px;

  font-weight: bold;



  .drawer-title {

    font-size: 14px;

  }

}



.setting-drawer-block-checbox {

  display: flex;

  justify-content: flex-start;

@@ -219,13 +176,6 @@
      height: 48px;

    }



    .custom-img {

      width: 48px;

      height: 38px;

      border-radius: 5px;

      box-shadow: 1px 1px 2px #898484;

    }



    .setting-drawer-block-checbox-selectIcon {

      position: absolute;

      top: 0;

@@ -242,7 +192,7 @@
}



.drawer-item {

  color: rgba(0, 0, 0, 0.65);

  color: var(--el-text-color-regular, rgba(0, 0, 0, 0.65));

  padding: 12px 0;

  font-size: 14px;