GTsoft/ruoyi-plus-soybean
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Soybean 2021-10-12 16:22:07 +08:00
parent 73505d914f
commit b5f05128ab
10 changed files with 219 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -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",

38
pnpm-lock.yaml
View File

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

28
src/layouts/BasicLayout/components/GlobalSider/components/DefaultSider/index.vue
View File

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

27
src/layouts/BasicLayout/components/SettingDrawer/components/ThemeConfig/index.vue Normal file
View File

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

3
src/layouts/BasicLayout/components/SettingDrawer/components/index.ts
View File

@ -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 };

4
src/settings/index.ts
View File

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

112
src/settings/theme.json Normal file
View File

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

11
src/settings/theme.ts
View File

@ -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 };

6
src/store/modules/theme/index.ts
View File

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

2
windi.config.ts
View File

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