fix(projects): 完善侧边菜单展开逻辑

src/layouts/BasicLayout/components/GlobalSider/components/DefaultSider/index.vue

@@ -18,7 +18,9 @@
           :collapsed-width="theme.menuStyle.collapsedWidth"
           :collapsed-icon-size="22"
           :options="menus"
+          :expanded-keys="expandedKeys"
           @update:value="handleUpdateMenu"
+          @update:expanded-keys="handleUpdateExpandedKeys"
         />
       </n-scrollbar>
     </div>
@@ -26,7 +28,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { NLayoutSider, NScrollbar, NMenu } from 'naive-ui';
 import type { MenuOption } from 'naive-ui';
@@ -60,15 +62,33 @@ const menuWidth = computed(() => {
   return collapsed ? collapsedWidth : modeWidth;
 });
 
-const activeKey = computed(() => getActiveKey());
+const activeKey = computed(() => route.name as string);
+const expandedKeys = ref<string[]>(getExpendedKeys());
 
-function getActiveKey() {
-  return route.name as string;
+function getExpendedKeys() {
+  const keys: string[] = [];
+  route.matched.forEach(item => {
+    if (item.children && item.children.length) {
+      keys.push(item.name as string);
+    }
+  });
+  return keys;
 }
 
 function handleUpdateMenu(key: string, item: MenuOption) {
   const menuItem = item as GlobalMenuOption;
   router.push(menuItem.routePath);
 }
+
+function handleUpdateExpandedKeys(keys: string[]) {
+  expandedKeys.value = keys;
+}
+
+watch(
+  () => route.name,
+  () => {
+    expandedKeys.value = getExpendedKeys();
+  }
+);
 </script>
 <style scoped></style>

src/layouts/BasicLayout/components/SettingDrawer/components/ThemeConfig/index.vue

@@ -0,0 +1,27 @@
+<template>
+  <n-divider title-placement="center">主题配置</n-divider>
+  <n-space vertical>
+    <n-button ref="copyRef" type="primary" :block="true">拷贝当前配置</n-button>
+    <n-button ref="resetRef" type="warning" :block="true">重置当前配置</n-button>
+  </n-space>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { NDivider, NSpace, NButton } from 'naive-ui';
+// import Clipboard from 'clipboard';
+// import { useThemeStore } from '@/store';
+
+// const theme = useThemeStore();
+const copyRef = ref<HTMLElement | null>(null);
+const resetRef = ref<HTMLElement | null>(null);
+
+// function handleSuccess() {
+//   window.$dialog?.success({
+//     title: '操作成功',
+//     content: '复制成功,请替换 src/settings/theme.json的内容！',
+//     positiveText: '确定'
+//   });
+// }
+</script>
+<style scoped></style>

src/layouts/BasicLayout/components/SettingDrawer/components/index.ts

@@ -3,5 +3,6 @@ import NavMode from './NavMode/index.vue';
 import SystemTheme from './SystemTheme/index.vue';
 import PageFunc from './PageFunc/index.vue';
 import PageView from './PageView/index.vue';
+import ThemeConfig from './ThemeConfig/index.vue';
 
-export { DarkMode, NavMode, SystemTheme, PageFunc, PageView };
+export { DarkMode, NavMode, SystemTheme, PageFunc, PageView, ThemeConfig };

src/settings/index.ts

@@ -1,3 +1,3 @@
-import themeSettings from './theme';
+import { themeSettings, defaultThemeSettings } from './theme';
 
-export { themeSettings };
+export { themeSettings, defaultThemeSettings };

src/settings/theme.json

@@ -0,0 +1,112 @@
+{
+	"darkMode": false,
+	"themeColor": "#409EFF",
+	"themeColorList": [
+			"#409EFF",
+			"#2d8cf0",
+			"#0960bd",
+			"#009688",
+			"#536dfe",
+			"#ff5c93",
+			"#ee4f12",
+			"#0096c7",
+			"#9c27b0",
+			"#ff9800",
+			"#FF3D68",
+			"#00C1D4",
+			"#71EFA3",
+			"#171010",
+			"#78DEC7",
+			"#1768AC",
+			"#FB9300",
+			"#FC5404"
+	],
+	"otherColor": {
+			"info": "#2080f0",
+			"success": "#67C23A",
+			"warning": "#E6A23C",
+			"error": "#F56C6C"
+	},
+	"navStyle": {
+			"mode": "vertical",
+			"theme": "light"
+	},
+	"menuStyle": {
+			"width": 200,
+			"collapsedWidth": 64,
+			"mixWidth": 80,
+			"mixCollapsedWidth": 48,
+			"splitMenu": false,
+			"horizontalPosition": "flex-start",
+			"horizontalPositionList": [
+					{
+							"value": "flex-start",
+							"label": "居左"
+					},
+					{
+							"value": "center",
+							"label": "居中"
+					},
+					{
+							"value": "flex-end",
+							"label": "居右"
+					}
+			]
+	},
+	"headerStyle": {
+			"height": 56,
+			"bgColor": "#fff"
+	},
+	"multiTabStyle": {
+			"height": 44,
+			"visible": true,
+			"bgColor": "#fff",
+			"mode": "chrome",
+			"modeList": [
+					{
+							"value": "button",
+							"label": "按钮风格"
+					},
+					{
+							"value": "chrome",
+							"label": "谷歌风格"
+					}
+			]
+	},
+	"crumbsStyle": {
+			"visible": true,
+			"showIcon": false
+	},
+	"pageStyle": {
+			"animate": true,
+			"animateType": "fade-slide",
+			"animateTypeList": [
+					{
+							"value": "zoom-fade",
+							"label": "渐变"
+					},
+					{
+							"value": "zoom-out",
+							"label": "闪现"
+					},
+					{
+							"value": "fade-slide",
+							"label": "滑动"
+					},
+					{
+							"value": "fade",
+							"label": "消退"
+					},
+					{
+							"value": "fade-bottom",
+							"label": "底部消退"
+					},
+					{
+							"value": "fade-scale",
+							"label": "缩放消退"
+					}
+			]
+	},
+	"fixedHeaderAndTab": true,
+	"showReload": true
+}

src/settings/theme.ts

@@ -1,5 +1,6 @@
-import type { ThemeSettings } from '../interface';
-import { EnumAnimate, EnumMultiTabMode, EnumHorizontalMenuPosition } from '../enum';
+import type { ThemeSettings } from '@/interface';
+import { EnumAnimate, EnumMultiTabMode, EnumHorizontalMenuPosition } from '@/enum';
+import customThemeSettings from './theme.json';
 
 const themeColorList = [
   '#409EFF',
@@ -22,7 +23,7 @@ const themeColorList = [
   '#FC5404'
 ];
 
-const themeSettings: ThemeSettings = {
+const defaultThemeSettings: ThemeSettings = {
   darkMode: false,
   themeColor: themeColorList[0],
   themeColorList,
@@ -83,4 +84,6 @@ const themeSettings: ThemeSettings = {
   showReload: true
 };
 
-export default themeSettings;
+export const themeSettings = (customThemeSettings as ThemeSettings) || defaultThemeSettings;
+
+export { defaultThemeSettings };

src/store/modules/theme/index.ts

@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia';
 import type { GlobalThemeOverrides } from 'naive-ui';
-import { themeSettings } from '@/settings';
+import { themeSettings, defaultThemeSettings } from '@/settings';
 import { store } from '@/store';
 import type { ThemeSettings, NavMode, MultiTabMode, AnimateType, HorizontalMenuPosition } from '@/interface';
 import { getHoverAndPressedColor } from './helpers';
@@ -57,6 +57,10 @@ const themeStore = defineStore({
     }
   },
   actions: {
+    /** 设置默认配置 */
+    setDefaultThemeStore() {
+      Object.assign(this, defaultThemeSettings);
+    },
     /** 设置暗黑模式 */
     handleDarkMode(isDark: boolean) {
       this.darkMode = isDark;