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

package.json

@@ -21,6 +21,7 @@
     "@vueuse/core": "^6.5.3",
     "axios": "^0.22.0",
     "chroma-js": "^2.1.2",
+    "clipboard": "^2.0.8",
     "dayjs": "^1.10.7",
     "form-data": "^4.0.0",
     "naive-ui": "^2.19.3",

pnpm-lock.yaml

@@ -24,6 +24,7 @@ specifiers:
   '@vueuse/core': ^6.5.3
   axios: ^0.22.0
   chroma-js: ^2.1.2
+  clipboard: ^2.0.8
   commitizen: ^4.2.4
   cz-conventional-changelog: ^3.3.0
   cz-customizable: ^6.3.0
@@ -61,6 +62,7 @@ dependencies:
   '@vueuse/core': registry.npmmirror.com/@vueuse/core/6.5.3_vue@3.2.20
   axios: registry.npmmirror.com/axios/0.22.0
   chroma-js: registry.nlark.com/chroma-js/2.1.2
+  clipboard: registry.nlark.com/clipboard/2.0.8
   dayjs: registry.nlark.com/dayjs/1.10.7
   form-data: 4.0.0
   naive-ui: registry.npmmirror.com/naive-ui/2.19.3_vue@3.2.20
@@ -1631,6 +1633,16 @@ packages:
       string-width: registry.npmmirror.com/string-width/4.2.2
     dev: true
 
+  registry.nlark.com/clipboard/2.0.8:
+    resolution: {integrity: sha1-/8bBA90pZ6gwBfP2GXaqRlWkzbo=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/clipboard/download/clipboard-2.0.8.tgz?cache=0&sync_timestamp=1631691938930&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fclipboard%2Fdownload%2Fclipboard-2.0.8.tgz}
+    name: clipboard
+    version: 2.0.8
+    dependencies:
+      good-listener: registry.nlark.com/good-listener/1.2.2
+      select: registry.nlark.com/select/1.1.2
+      tiny-emitter: registry.nlark.com/tiny-emitter/2.1.0
+    dev: false
+
   registry.nlark.com/cliui/7.0.4:
     resolution: {integrity: sha1-oCZe5lVHb8gHrqnfPfjfd4OAi08=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/cliui/download/cliui-7.0.4.tgz}
     name: cliui
@@ -1963,6 +1975,12 @@ packages:
     version: 0.1.3
     dev: true
 
+  registry.nlark.com/delegate/3.2.0:
+    resolution: {integrity: sha1-tmtxwxWFIuirV0T3INjKDCr1kWY=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/delegate/download/delegate-3.2.0.tgz}
+    name: delegate
+    version: 3.2.0
+    dev: false
+
   registry.nlark.com/detect-indent/6.0.0:
     resolution: {integrity: sha1-Cr0PVJ9p/GZZolT+lnhhhrb1KP0=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/detect-indent/download/detect-indent-6.0.0.tgz}
     name: detect-indent
@@ -2714,6 +2732,14 @@ packages:
       slash: registry.nlark.com/slash/3.0.0
     dev: true
 
+  registry.nlark.com/good-listener/1.2.2:
+    resolution: {integrity: sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/good-listener/download/good-listener-1.2.2.tgz}
+    name: good-listener
+    version: 1.2.2
+    dependencies:
+      delegate: registry.nlark.com/delegate/3.2.0
+    dev: false
+
   registry.nlark.com/graceful-fs/4.2.8:
     resolution: {integrity: sha1-5BK40z9eAGWTy9PO5t+fLOu+gCo=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/graceful-fs/download/graceful-fs-4.2.8.tgz}
     name: graceful-fs
@@ -4184,6 +4210,12 @@ packages:
       chokidar: registry.nlark.com/chokidar/3.5.2
     dev: true
 
+  registry.nlark.com/select/1.1.2:
+    resolution: {integrity: sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/select/download/select-1.1.2.tgz}
+    name: select
+    version: 1.1.2
+    dev: false
+
   registry.nlark.com/semver-compare/1.0.0:
     resolution: {integrity: sha1-De4hahyUGrN+nvsXiPavxf9VN/w=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/semver-compare/download/semver-compare-1.0.0.tgz}
     name: semver-compare
@@ -4462,6 +4494,12 @@ packages:
       readable-stream: registry.nlark.com/readable-stream/3.6.0
     dev: true
 
+  registry.nlark.com/tiny-emitter/2.1.0:
+    resolution: {integrity: sha1-HRpW7fxRxD6GPLtTgqcjMONVVCM=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/tiny-emitter/download/tiny-emitter-2.1.0.tgz}
+    name: tiny-emitter
+    version: 2.1.0
+    dev: false
+
   registry.nlark.com/to-fast-properties/2.0.0:
     resolution: {integrity: sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/to-fast-properties/download/to-fast-properties-2.0.0.tgz}
     name: to-fast-properties

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() {
+function getExpendedKeys() {
-  return route.name as string;
+  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 type { ThemeSettings } from '@/interface';
-import { EnumAnimate, EnumMultiTabMode, EnumHorizontalMenuPosition } from '../enum';
+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;

windi.config.ts

@@ -1,5 +1,5 @@
 import { defineConfig } from 'windicss/helpers';
-import { themeSettings } from './src/settings';
+import themeSettings from './src/settings/theme.json';
 
 const {
   themeColor,