样式修改

zhangwencui

2026-06-18 9f5e18cc415cd3fef13f105ffeabae3c01ba9665

 src/layout/components/Settings/index.vue

@@ -1,204 +1,280 @@
<template>

  <el-drawer v-model="showSettings" :withHeader="false" direction="rtl" size="300px">

    <div class="setting-drawer-title">

      <h3 class="drawer-title">主题风格设置</h3>

    </div>

    <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;">

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

          </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;">

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

          </i>

        </div>

      </div>

    </div>

  <el-drawer v-model="showSettings"

             direction="rtl"

             size="300px">

    <!--    <div class="setting-drawer-title">-->

    <!--      <h3 class="drawer-title">主题风格设置</h3>-->

    <!--    </div>-->

    <!--    <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"-->

    <!--        >-->

    <!--          <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>-->

    <!--          </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"-->

    <!--        >-->

    <!--          <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>-->

    <!--          </i>-->

    <!--        </div>-->

    <!--      </div>-->

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

    <div class="drawer-item">

      <span>显示模式</span>

      <span class="comp-style">

        <el-select v-model="settingsStore.darkMode"

                   placeholder="请选择"

                   style="width: 130px"

                   @change="darkModeChange">

          <el-option v-for="item in darkModeOptions"

                     :key="item.value"

                     :label="item.label"

                     :value="item.value" />

        </el-select>

      </span>

    </div>

    <el-divider />



    <h3 class="drawer-title">系统布局配置</h3>



    <div class="drawer-item">

      <span>开启 TopNav</span>

      <span class="comp-style">

        <el-switch v-model="settingsStore.topNav" @change="topNavChange" 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="settingsStore.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="settingsStore.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="settingsStore.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="settingsStore.dynamicTitle" class="drawer-switch" />

        <el-switch v-model="settingsStore.dynamicTitle"

                   class="drawer-switch" />

      </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-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 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 { 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([

    "#5BA0D2",

    "#81D8D0",

    "#E85827",

    "#5BA0D2",

    "#F9DC24",

    "#B05923",

    "#003153",

    "#8F4B28",

    "#4C0009",

  ]);

  const darkModeOptions = ref([

    { label: "跟随系统", value: "auto" },

    { label: "浅色", value: "light" },

    { label: "深色", value: "dark" },

  ]);



/** 是否需要topnav */

function topNavChange(val) {

  if (!val) {

    appStore.toggleSideBarHide(false)

    permissionStore.setSidebarRouters(permissionStore.defaultRoutes)

  /** 是否需要topnav */

  function topNavChange(val) {

    if (!val) {

      appStore.toggleSideBarHide(false);

      permissionStore.setSidebarRouters(permissionStore.defaultRoutes);

    }

  }

}



function themeChange(val) {

  settingsStore.theme = val

  handleThemeStyle(val)

}



function handleTheme(val) {

  settingsStore.sideTheme = val

  sideTheme.value = val

}



function saveSetting() {

  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

  function themeChange(val) {

    settingsStore.theme = val;

    handleThemeStyle(val);

  }

  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 darkModeChange(val) {

    settingsStore.setDarkMode(val);

  }



function openSetting() {

  showSettings.value = true

}

  function handleTheme(val) {

    settingsStore.sideTheme = val;

    sideTheme.value = val;

  }



defineExpose({

  openSetting

})

  function saveSetting() {

    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,

      darkMode: storeSettings.value.darkMode,

    };

    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;

  }



  defineExpose({

    openSetting,

  });

</script>



<style lang='scss' scoped>

.setting-drawer-title {

  margin-bottom: 12px;

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

  line-height: 22px;

  font-weight: bold;

<style lang="scss" scoped>

  .setting-drawer-title {

    margin-bottom: 12px;

    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;

  align-items: center;

  margin-top: 10px;

  margin-bottom: 20px;



  .setting-drawer-block-checbox-item {

    position: relative;

    margin-right: 16px;

    border-radius: 2px;

    cursor: pointer;



    img {

      width: 48px;

      height: 48px;

    }



    .setting-drawer-block-checbox-selectIcon {

      position: absolute;

      top: 0;

      right: 0;

      width: 100%;

      height: 100%;

      padding-top: 15px;

      padding-left: 24px;

      color: #1890ff;

      font-weight: 700;

    .drawer-title {

      font-size: 14px;

    }

  }

}



.drawer-item {

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

  padding: 12px 0;

  font-size: 14px;

  .setting-drawer-block-checbox {

    display: flex;

    justify-content: flex-start;

    align-items: center;

    margin-top: 10px;

    margin-bottom: 20px;



  .comp-style {

    float: right;

    margin: -3px 8px 0px 0px;

    .setting-drawer-block-checbox-item {

      position: relative;

      margin-right: 16px;

      border-radius: 2px;

      cursor: pointer;



      img {

        width: 48px;

        height: 48px;

      }



      .setting-drawer-block-checbox-selectIcon {

        position: absolute;

        top: 0;

        right: 0;

        width: 100%;

        height: 100%;

        padding-top: 15px;

        padding-left: 24px;

        color: #1890ff;

        font-weight: 700;

        font-size: 14px;

      }

    }

  }

}

</style>


  .drawer-item {

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

    padding: 12px 0;

    font-size: 14px;



    .comp-style {

      float: right;

      margin: -3px 8px 0px 0px;

    }

  }

</style>