升级依赖

package.json

@@ -18,19 +18,19 @@
     "url": "https://gitee.com/JavaLionLi/plus-ui.git"
   },
   "dependencies": {
-    "@element-plus/icons-vue": "2.1.0",
+    "@element-plus/icons-vue": "2.3.1",
     "@vueup/vue-quill": "1.2.0",
     "@vueuse/core": "10.7.0",
     "animate.css": "4.1.1",
     "await-to-js": "^3.0.0",
     "axios": "^1.3.4",
     "crypto-js": "^4.1.1",
-    "echarts": "5.4.0",
+    "echarts": "5.4.3",
     "element-plus": "2.4.3",
     "file-saver": "2.0.5",
     "fuse.js": "6.6.2",
-    "js-cookie": "3.0.1",
+    "js-cookie": "3.0.5",
-    "jsencrypt": "3.3.1",
+    "jsencrypt": "3.3.2",
     "nprogress": "0.2.0",
     "path-browserify": "1.0.1",
     "path-to-regexp": "6.2.0",
@@ -38,7 +38,7 @@
     "screenfull": "6.0.0",
     "vform3-builds": "3.0.8",
     "vue": "3.3.11",
-    "vue-cropper": "1.0.3",
+    "vue-cropper": "1.1.1",
     "vue-i18n": "9.2.2",
     "vue-router": "4.2.5",
     "vue-types": "5.1.1"
@@ -57,7 +57,7 @@
     "@unocss/preset-attributify": "^0.58.0",
     "@unocss/preset-icons": "^0.58.0",
     "@unocss/preset-uno": "^0.58.0",
-    "@vue/compiler-sfc": "3.2.45",
+    "@vue/compiler-sfc": "3.3.9",
     "@vitejs/plugin-vue": "4.5.2",
     "autoprefixer": "10.4.14",
     "eslint": "8.55.0",
@@ -72,13 +72,13 @@
     "husky": "7.0.4",
     "postcss": "^8.4.21",
     "prettier": "3.1.1",
-    "sass": "1.56.1",
+    "sass": "1.69.5",
     "typescript": "5.2.2",
     "unocss": "^0.58.0",
     "unplugin-auto-import": "0.17.2",
     "unplugin-icons": "0.18.1",
     "unplugin-vue-components": "0.26.0",
-    "unplugin-vue-setup-extend-plus": "0.4.9",
+    "unplugin-vue-setup-extend-plus": "1.0.0",
     "vite-plugin-compression": "0.5.1",
     "vite-plugin-svg-icons": "2.0.1",
     "vitest": "^0.29.7",

src/layout/components/Settings/index.vue

@@ -48,35 +48,35 @@
     <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" class="drawer-switch" @change="topNavChange" />
       </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" @change="dynamicTitleChange" />
       </span>
     </div>
 
@@ -93,7 +93,6 @@ import useAppStore from '@/store/modules/app';
 import useSettingsStore from '@/store/modules/settings';
 import usePermissionStore from '@/store/modules/permission';
 import { handleThemeStyle } from '@/utils/theme';
-import { SettingTypeEnum } from '@/enums/SettingTypeEnum';
 import { SideThemeEnum } from '@/enums/SideThemeEnum';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
@@ -113,72 +112,40 @@ const isDark = useDark({
   valueDark: 'dark',
   valueLight: 'light'
 });
+// 匹配菜单颜色
 watch(isDark, () => {
   if (isDark.value) {
-    settingsStore.changeSetting({ key: SettingTypeEnum.SIDE_THEME, value: SideThemeEnum.DARK });
+    settingsStore.sideTheme = SideThemeEnum.DARK;
   } else {
-    settingsStore.changeSetting({ key: SettingTypeEnum.SIDE_THEME, value: sideTheme.value });
+    settingsStore.sideTheme = sideTheme.value;
   }
 });
 const toggleDark = () => useToggle(isDark);
 
-/** 是否需要topNav */
+const topNavChange = (val) => {
-const topNav = computed({
-  get: () => storeSettings.value.topNav,
-  set: (val) => {
-    settingsStore.changeSetting({ key: SettingTypeEnum.TOP_NAV, value: val });
   if (!val) {
     appStore.toggleSideBarHide(false);
     permissionStore.setSidebarRouters(permissionStore.defaultRoutes);
   }
-  }
+};
-});
+
-/** 是否需要tagview */
+const dynamicTitleChange = () => {
-const tagsView = computed({
-  get: () => storeSettings.value.tagsView,
-  set: (val) => {
-    settingsStore.changeSetting({ key: SettingTypeEnum.TAGS_VIEW, value: val });
-  }
-});
-/**是否需要固定头部 */
-const fixedHeader = computed({
-  get: () => storeSettings.value.fixedHeader,
-  set: (val) => {
-    settingsStore.changeSetting({ key: SettingTypeEnum.FIXED_HEADER, value: val });
-  }
-});
-/**是否需要侧边栏的logo */
-const sidebarLogo = computed({
-  get: () => storeSettings.value.sidebarLogo,
-  set: (val) => {
-    settingsStore.changeSetting({ key: SettingTypeEnum.SIDEBAR_LOGO, value: val });
-  }
-});
-/**是否需要侧边栏的动态网页的title */
-const dynamicTitle = computed({
-  get: () => storeSettings.value.dynamicTitle,
-  set: (val) => {
-    settingsStore.changeSetting({ key: SettingTypeEnum.DYNAMIC_TITLE, value: val });
   // 动态设置网页标题
   useDynamicTitle();
-  }
+};
-});
 
 const themeChange = (val: string) => {
-  settingsStore.changeSetting({ key: SettingTypeEnum.THEME, value: val });
+  settingsStore.theme = val;
-  theme.value = val;
-  if (val) {
   handleThemeStyle(val);
-  }
 };
 const handleTheme = (val: string) => {
   sideTheme.value = val;
   if (isDark.value && val === SideThemeEnum.LIGHT) {
     // 暗黑模式颜色不变
-    settingsStore.changeSetting({ key: SettingTypeEnum.SIDE_THEME, value: SideThemeEnum.DARK });
+    settingsStore.sideTheme = SideThemeEnum.DARK;
     return;
   }
-  settingsStore.changeSetting({ key: SettingTypeEnum.SIDE_THEME, value: val });
+  settingsStore.sideTheme = val;
 };
 const saveSetting = () => {
   proxy?.$modal.loading('正在保存到本地，请稍候...');