!72 发布 vue 版本 5.1.2 与 cloud 版本 2.1.2 Merge pull request !72 from 疯狂的狮子Li/temp

疯狂的狮子Li

2023-12-22 cc9b67d4676dd51a6b2d88e92607aca2629ee54d

 src/layout/components/Settings/index.vue

@@ -1,10 +1,9 @@
<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')">
      <div class="setting-drawer-block-checbox-item" @click="handleTheme(SideThemeEnum.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">
@@ -16,7 +15,7 @@
          </i>
        </div>
      </div>
      <div class="setting-drawer-block-checbox-item" @click="handleTheme('theme-light')">
      <div class="setting-drawer-block-checbox-item" @click="handleTheme(SideThemeEnum.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">
@@ -35,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>
@@ -89,6 +95,7 @@
import { handleThemeStyle } from '@/utils/theme'
import { ComponentInternalInstance } from "vue";
import { SettingTypeEnum } from "@/enums/SettingTypeEnum";
import { SideThemeEnum } from "@/enums/SideThemeEnum";

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const appStore = useAppStore()
@@ -102,7 +109,22 @@
const storeSettings = computed(() => settingsStore);
const predefineColors = ref(["#409EFF", "#ff4500", "#ff8c00", "#ffd700", "#90ee90", "#00ced1", "#1e90ff", "#c71585"]);

/** 是否需要topnav */
// 是否暗黑模式
const isDark = useDark({
  storageKey: 'useDarkKey',
  valueDark: 'dark',
  valueLight: 'light',
});
watch(isDark, ()=> {
  if (isDark.value) {
    settingsStore.changeSetting({ key: SettingTypeEnum.SIDE_THEME, value: SideThemeEnum.DARK })
  } else {
    settingsStore.changeSetting({ key: SettingTypeEnum.SIDE_THEME, value: sideTheme.value })
  }
})
const toggleDark = () => useToggle(isDark);

/** 是否需要topNav */
const topNav = computed({
    get: () => storeSettings.value.topNav,
    set: (val) => {
@@ -152,8 +174,13 @@
    }
}
const handleTheme = (val: string) => {
    settingsStore.changeSetting({ key: SettingTypeEnum.SIDE_THEME, value: val })
    sideTheme.value = val;
    if (isDark.value && val === SideThemeEnum.LIGHT) {
      // 暗黑模式颜色不变
      settingsStore.changeSetting({ key: SettingTypeEnum.SIDE_THEME, value: SideThemeEnum.DARK })
      return
    }
    settingsStore.changeSetting({ key: SettingTypeEnum.SIDE_THEME, value: val })
}
const saveSetting = () => {
    proxy?.$modal.loading("正在保存到本地，请稍候...");
@@ -234,7 +261,6 @@
}

.drawer-item {
  color: rgba(0, 0, 0, 0.65);
  padding: 12px 0;
  font-size: 14px;