bd4rr/vue-naive-admin
1
0
Fork 0
mirror of https://github.com/zclzone/vue-naive-admin.git synced 2025-05-01 06:39:01 +08:00
Code

style: 修改菜单选中样式

Browse Source
This commit is contained in:
zclzone 2024-04-03 17:58:41 +08:00
parent e135be93af
commit 9615ec9aa8
3 changed files with 15 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/layouts/components/SideMenu.vue
View File

@ -59,14 +59,19 @@ function handleMenuSelect(key, item) {
</script> </script>
<style lang="scss"> <style lang="scss">
.side-menu:not(.n-menu--collapsed) { .side-menu {
.n-menu-item-content { .n-menu-item-content__icon {
&::before { border: 1px solid rgb(229, 231, 235);
left: 8px; border-radius: 4px;
right: 8px; }
} .n-menu-item-content--child-active,
&.n-menu-item-content--selected::before { .n-menu-item-content--selected {
border-left: 4px solid var(--primary-color); .n-menu-item-content__icon {
border-color: var(--primary-color);
background-color: var(--primary-color);
i {
color: #fff;
}
} }
} }
} }

2
src/settings.js
View File

@ -63,7 +63,6 @@ export const basePermissions = [
type: 'MENU', type: 'MENU',
path: 'https://apifox.com/apidoc/shared-ff4a4d32-c0d1-4caf-b0ee-6abc130f734a', path: 'https://apifox.com/apidoc/shared-ff4a4d32-c0d1-4caf-b0ee-6abc130f734a',
icon: 'i-me:apifox', icon: 'i-me:apifox',
iconMode: 'bg',
order: 2, order: 2,
enable: true, enable: true,
show: true, show: true,
@ -74,7 +73,6 @@ export const basePermissions = [
type: 'MENU', type: 'MENU',
path: 'https://www.naiveui.com/zh-CN/os-theme', path: 'https://www.naiveui.com/zh-CN/os-theme',
icon: 'i-me:naiveui', icon: 'i-me:naiveui',
iconMode: 'bg',
order: 3, order: 3,
enable: true, enable: true,
show: true, show: true,

4
src/store/modules/permission.js
View File

@ -34,7 +34,7 @@ export const usePermissionStore = defineStore('permission', {
key: route.name, key: route.name,
path: route.path, path: route.path,
originPath: route.meta.originPath, originPath: route.meta.originPath,
icon: () => h('i', { class: `${route.meta.icon} text-16` }), icon: () => h('i', { class: `${route.meta.icon} text-14` }),
order: item.order ?? 0, order: item.order ?? 0,
} }
const children = item.children?.filter((item) => item.type === 'MENU') || [] const children = item.children?.filter((item) => item.type === 'MENU') || []
@ -61,7 +61,7 @@ export const usePermissionStore = defineStore('permission', {
component: item.component, component: item.component,
meta: { meta: {
originPath, originPath,
icon: item.icon + ({ bg: '', mask: '?mask' }[item.iconMode] ?? '?mask'), icon: item.icon + '?mask',
title: item.name, title: item.name,
layout: item.layout, layout: item.layout,
keepAlive: !!item.keepAlive, keepAlive: !!item.keepAlive,