diff --git a/src/assets/svg/svg-managementAccount-active.svg b/src/assets/svg/svg-managementAccount-active.svg new file mode 100644 index 0000000..50d03f4 --- /dev/null +++ b/src/assets/svg/svg-managementAccount-active.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/svg/svg-managementAccount.svg b/src/assets/svg/svg-managementAccount.svg index cbe43b7..8901716 100644 --- a/src/assets/svg/svg-managementAccount.svg +++ b/src/assets/svg/svg-managementAccount.svg @@ -1,6 +1,6 @@ - - - - - - \ No newline at end of file + + + + + + diff --git a/src/assets/svg/svg-managementEnterprise-active.svg b/src/assets/svg/svg-managementEnterprise-active.svg new file mode 100644 index 0000000..fccce66 --- /dev/null +++ b/src/assets/svg/svg-managementEnterprise-active.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/svg/svg-managementEnterprise.svg b/src/assets/svg/svg-managementEnterprise.svg index 0cd10b0..329e1ae 100644 --- a/src/assets/svg/svg-managementEnterprise.svg +++ b/src/assets/svg/svg-managementEnterprise.svg @@ -1,10 +1,3 @@ - - - - - - - - - - \ No newline at end of file + + + diff --git a/src/assets/svg/svg-managementPerson-active.svg b/src/assets/svg/svg-managementPerson-active.svg new file mode 100644 index 0000000..c5a8e93 --- /dev/null +++ b/src/assets/svg/svg-managementPerson-active.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/svg/svg-managementPerson.svg b/src/assets/svg/svg-managementPerson.svg index 961dfd6..7e6bfd6 100644 --- a/src/assets/svg/svg-managementPerson.svg +++ b/src/assets/svg/svg-managementPerson.svg @@ -1,6 +1,5 @@ - - - - - - \ No newline at end of file + + + + + diff --git a/src/layouts/components/siderBar/index.vue b/src/layouts/components/siderBar/index.vue index 8a43904..9e9611d 100644 --- a/src/layouts/components/siderBar/index.vue +++ b/src/layouts/components/siderBar/index.vue @@ -70,10 +70,18 @@ export default defineComponent({ } router.push({ name: targetRoute }); }; - const renderMenuItem = (item: typeMenuItem, hideLabel = false) => { + const renderMenuItem = ({ + item, + hideLabel = false, + menuItemClass = '', + }: { + item: typeMenuItem; + hideLabel?: boolean; + menuItemClass?: string; + }) => { const getMenuItemClass = () => { const hasChildren = item.children?.length; - let target = !hasChildren ? 'sub-menu-item ' : ''; + let target = ''; if (hasChildren) { target += getCollapseMenuKey(currentRouteName.value) === item.key ? 'active' : ''; } else { @@ -83,9 +91,9 @@ export default defineComponent({ }; return ( - onClickItem(item)}> + onClickItem(item)}> {(() => { - const isActive = getMenuItemClass() === 'active'; + const isActive = getMenuItemClass().includes('active'); const iconName = Array.isArray(item.icon) ? isActive ? item.icon[1] ?? item.icon[0] @@ -100,7 +108,7 @@ export default defineComponent({ const renderMenuList = () => { return currentMenuList.value.map((item) => { if (!item.children) { - return renderMenuItem(item, collapsed.value); + return renderMenuItem({ item, hideLabel: collapsed.value }); } return ( {item.children.map((child) => { - return renderMenuItem(child); + return renderMenuItem({ item: child, menuItemClass: 'sub-menu-item' }); })} ); }, }} > - {renderMenuItem(item, collapsed.value)} + {renderMenuItem({ item, hideLabel: collapsed.value })} ); }); @@ -224,14 +232,6 @@ export default defineComponent({ color: #6d4cfe !important; } } - // &.active { - // background-color: rgba(109, 76, 254, 0.08); - // color: #6d4cfe; - // .label, - // .svg-icon { - // color: #6d4cfe; - // } - // } } } } diff --git a/src/layouts/components/siderBar/menu-list.ts b/src/layouts/components/siderBar/menu-list.ts index a94e3ed..eb882d5 100644 --- a/src/layouts/components/siderBar/menu-list.ts +++ b/src/layouts/components/siderBar/menu-list.ts @@ -139,39 +139,34 @@ export const MENU_LIST = >{ ], }, ], - [GROUP_MANAGEMENT_NAME]:[ + [GROUP_MANAGEMENT_NAME]:[ { - key: 'ModManagement', - label: '管理中心', - icon: ['svg-management', 'svg-management-active'], - children: [ - { - key: 'ModManagementPerson', - icon: 'svg-managementPerson', - label: '个人信息', - routeName: 'ManagementPerson', - requireLogin: true, - activeMatch: [ - 'ManagementPerson', - ], - }, - { - key: 'ModManagementEnterprise', - icon: 'svg-managementEnterprise', - label: '企业信息', - routeName: 'ManagementEnterprise', - requireLogin: true, - activeMatch: ['ManagementEnterprise'], - }, - { - key: 'ModManagementAccount', - icon: 'svg-managementAccount', - label: '账号管理', - routeName: 'ManagementAccount', - requireLogin: true, - activeMatch: ['ManagementAccount'], - }, + key: 'ModManagementPerson', + icon: ['svg-managementPerson', 'svg-managementPerson-active'], + label: '个人信息', + routeName: 'ManagementPerson', + requireLogin: true, + activeMatch: [ + 'ManagementPerson', ], - } + }, + { + key: 'ModManagementEnterprise', + icon: ['svg-managementEnterprise', 'svg-managementEnterprise-active'], + label: '企业信息', + routeName: 'ManagementEnterprise', + requireLogin: true, + activeMatch: [ + 'ManagementEnterprise', + ], + }, + { + key: 'ModManagementAccount', + icon: ['svg-managementAccount', 'svg-managementAccount-active'], + label: '账号管理', + routeName: 'ManagementAccount', + requireLogin: true, + activeMatch: ['ManagementAccount'], + }, ] }; diff --git a/src/views/components/management/person/index.vue b/src/views/components/management/person/index.vue index bbfc063..ae09421 100644 --- a/src/views/components/management/person/index.vue +++ b/src/views/components/management/person/index.vue @@ -1,8 +1,6 @@