perf: 走查问题调整
This commit is contained in:
rd
@ -26,6 +26,8 @@ export default defineComponent({
|
||||
|
||||
const currentRouteName = computed(() => route.name as string);
|
||||
const currentRouteGroup = computed(() => route.meta?.group ?? 'GroupMain');
|
||||
const isHomeRoute = computed(() => currentRouteName.value === 'Home');
|
||||
const showAiSearch = computed(() => !route.meta?.hideAiSearch);
|
||||
|
||||
const getCollapseMenuKey = (routeName: string): string => {
|
||||
let _key: string;
|
||||
@ -58,15 +60,27 @@ export default defineComponent({
|
||||
};
|
||||
const renderMenuItem = (item: typeMenuItem, hideLabel = false) => {
|
||||
const getMenuItemClass = () => {
|
||||
if (item.children?.length) {
|
||||
return getCollapseMenuKey(currentRouteName.value) === item.key ? 'active' : '';
|
||||
const hasChildren = item.children?.length;
|
||||
let target = !hasChildren ? 'sub-menu-item ' : '';
|
||||
if (hasChildren) {
|
||||
target += getCollapseMenuKey(currentRouteName.value) === item.key ? 'active' : '';
|
||||
} else {
|
||||
target += item.activeMatch?.includes(currentRouteName.value) ? 'active' : '';
|
||||
}
|
||||
return item.activeMatch?.includes(currentRouteName.value) ? 'active' : '';
|
||||
return target;
|
||||
};
|
||||
|
||||
return (
|
||||
<Menu.Item class={`menu-item ${getMenuItemClass()}`} onClick={() => onClickItem(item.routeName)}>
|
||||
<SvgIcon size="18" name={item.icon} alt="状态图标" class="color-#55585F flex-shrink-0" />
|
||||
{(() => {
|
||||
const isActive = getMenuItemClass() === 'active';
|
||||
const iconName = Array.isArray(item.icon)
|
||||
? isActive
|
||||
? item.icon[1] ?? item.icon[0]
|
||||
: item.icon[0]
|
||||
: item.icon;
|
||||
return <SvgIcon size="18" name={iconName as any} alt="状态图标" class="color-#55585F flex-shrink-0" />;
|
||||
})()}
|
||||
{!hideLabel && <span class="cts label">{item.label}</span>}
|
||||
</Menu.Item>
|
||||
);
|
||||
@ -117,20 +131,31 @@ export default defineComponent({
|
||||
initCollapse();
|
||||
};
|
||||
|
||||
watch(
|
||||
() => currentRouteGroup.value,
|
||||
() => {
|
||||
init();
|
||||
},
|
||||
{ immediate: false, deep: true },
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
init();
|
||||
});
|
||||
|
||||
return () => (
|
||||
<Menu class={`siderBar-wrap p-16px w-full h-full flex flex-col ${sidebarStore.menuCollapse ? 'menu-fold' : ''}`}>
|
||||
<Menu.Item
|
||||
class={`menu-item !mb-0 ${currentRouteName.value === 'Home' ? 'active' : ''}`}
|
||||
onClick={handleUserHome}
|
||||
>
|
||||
<img src={icon1} width={18} height={18} />
|
||||
{!sidebarStore.menuCollapse && <span class="cts label">智能搜索</span>}
|
||||
</Menu.Item>
|
||||
<div class="line w-full h-1px bg-#211F24 my-12px"></div>
|
||||
{showAiSearch.value && (
|
||||
<>
|
||||
<Menu.Item class={`menu-item !mb-0 ${isHomeRoute.value ? 'active' : ''}`} onClick={handleUserHome}>
|
||||
<img src={icon1} width={18} height={18} />
|
||||
{!sidebarStore.menuCollapse && (
|
||||
<span class="cts label">{isHomeRoute.value ? '开始工作' : '智能搜索'}</span>
|
||||
)}
|
||||
</Menu.Item>
|
||||
<div class="line w-full h-1px bg-#211F24 my-12px"></div>
|
||||
</>
|
||||
)}
|
||||
<div class="flex flex-col flex-1">
|
||||
<div class="menu-list flex-1">{renderMenuList()}</div>
|
||||
<div class="flex justify-end items-center">
|
||||
@ -175,13 +200,14 @@ export default defineComponent({
|
||||
color: #6d4cfe;
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
background-color: #fff !important;
|
||||
.label,
|
||||
.svg-icon {
|
||||
color: #6d4cfe;
|
||||
}
|
||||
}
|
||||
// &.active {
|
||||
// background-color: rgba(109, 76, 254, 0.08);
|
||||
// color: #6d4cfe;
|
||||
// .label,
|
||||
// .svg-icon {
|
||||
// color: #6d4cfe;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,9 +1,11 @@
|
||||
import { GROUP_WRITER_NAME } from '@/router/routes/modules/materialCenter-writer';
|
||||
export const GROUP_WRITER_NAME = 'GroupWriterMaterialCenter';
|
||||
export const GROUP_MANAGEMENT_NAME = 'GroupManagement';
|
||||
export const GROUP_MAIN_NAME = 'GroupMain';
|
||||
|
||||
export interface typeMenuItem {
|
||||
key?: string | number; // 菜单组key
|
||||
label?: string; // 菜单组标题
|
||||
icon?: string; // 菜单组图标
|
||||
icon?: string | [string, string]; // 菜单组图标
|
||||
routeName?: string; // 路由名称
|
||||
requireLogin?: boolean; // 是否需要登录
|
||||
requireAuth?: boolean; // 是否需要权限验证
|
||||
@ -12,11 +14,11 @@ export interface typeMenuItem {
|
||||
}
|
||||
|
||||
export const MENU_LIST = <Record<string, typeMenuItem[]>>{
|
||||
GroupMain: [
|
||||
[GROUP_MAIN_NAME]: [
|
||||
{
|
||||
key: 'ModAccountManage',
|
||||
label: '账号管理',
|
||||
icon: 'svg-accountManage',
|
||||
icon: ['svg-accountManage', 'svg-accountManage-active'],
|
||||
children: [
|
||||
{
|
||||
key: 'ModMediaAccountManage',
|
||||
@ -34,44 +36,44 @@ export const MENU_LIST = <Record<string, typeMenuItem[]>>{
|
||||
requireLogin: true,
|
||||
activeMatch: ['MediaAccountAccountDashboard', 'MediaAccountAccountDetails'],
|
||||
},
|
||||
{
|
||||
key: 'ModPutAccountManage',
|
||||
icon: 'svg-putAccountManage',
|
||||
label: '账户管理',
|
||||
routeName: 'PutAccountAccountManagement',
|
||||
requireLogin: true,
|
||||
activeMatch: ['PutAccountAccountManagement'],
|
||||
},
|
||||
{
|
||||
key: 'ModPutAccountData',
|
||||
icon: 'svg-putAccountData',
|
||||
label: '账户数据',
|
||||
routeName: 'PutAccountAccountData',
|
||||
requireLogin: true,
|
||||
activeMatch: ['PutAccountAccountData'],
|
||||
},
|
||||
{
|
||||
key: 'ModPutAccountAccountDashboard',
|
||||
icon: 'svg-putAccountAccountDashboard',
|
||||
label: '投放表现分析',
|
||||
routeName: 'PutAccountAccountDashboard',
|
||||
requireLogin: true,
|
||||
activeMatch: ['PutAccountAccountDashboard'],
|
||||
},
|
||||
{
|
||||
key: 'ModInvestmentGuidelines',
|
||||
icon: 'svg-putAccountInvestmentGuidelines',
|
||||
label: '投放指南',
|
||||
routeName: 'PutAccountInvestmentGuidelines',
|
||||
requireLogin: true,
|
||||
activeMatch: ['PutAccountInvestmentGuidelines', 'PutAccountInvestmentGuidelinesDetail'],
|
||||
},
|
||||
// {
|
||||
// key: 'ModPutAccountManage',
|
||||
// icon: 'svg-putAccountManage',
|
||||
// label: '账户管理',
|
||||
// routeName: 'PutAccountAccountManagement',
|
||||
// requireLogin: true,
|
||||
// activeMatch: ['PutAccountAccountManagement'],
|
||||
// },
|
||||
// {
|
||||
// key: 'ModPutAccountData',
|
||||
// icon: 'svg-putAccountData',
|
||||
// label: '账户数据',
|
||||
// routeName: 'PutAccountAccountData',
|
||||
// requireLogin: true,
|
||||
// activeMatch: ['PutAccountAccountData'],
|
||||
// },
|
||||
// {
|
||||
// key: 'ModPutAccountAccountDashboard',
|
||||
// icon: 'svg-putAccountAccountDashboard',
|
||||
// label: '投放表现分析',
|
||||
// routeName: 'PutAccountAccountDashboard',
|
||||
// requireLogin: true,
|
||||
// activeMatch: ['PutAccountAccountDashboard'],
|
||||
// },
|
||||
// {
|
||||
// key: 'ModInvestmentGuidelines',
|
||||
// icon: 'svg-putAccountInvestmentGuidelines',
|
||||
// label: '投放指南',
|
||||
// routeName: 'PutAccountInvestmentGuidelines',
|
||||
// requireLogin: true,
|
||||
// activeMatch: ['PutAccountInvestmentGuidelines', 'PutAccountInvestmentGuidelinesDetail'],
|
||||
// },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'ModMaterialCenter',
|
||||
label: '素材中心',
|
||||
icon: 'svg-materialCenter',
|
||||
icon: ['svg-materialCenter', 'svg-materialCenter-active'],
|
||||
children: [
|
||||
{
|
||||
key: 'ModMaterialCenterFinishedProductsWareHouse',
|
||||
@ -101,7 +103,7 @@ export const MENU_LIST = <Record<string, typeMenuItem[]>>{
|
||||
{
|
||||
key: 'ModTaskManage',
|
||||
label: '任务管理',
|
||||
icon: 'svg-taskManage',
|
||||
icon: ['svg-taskManage', 'svg-taskManage-active'],
|
||||
routeName: 'TaskManagement',
|
||||
},
|
||||
],
|
||||
@ -137,4 +139,39 @@ export const MENU_LIST = <Record<string, typeMenuItem[]>>{
|
||||
],
|
||||
},
|
||||
],
|
||||
[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'],
|
||||
},
|
||||
],
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
@ -28,11 +28,13 @@
|
||||
color: #6d4cfe;
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
background-color: #fff !important;
|
||||
.label,
|
||||
.svg-icon {
|
||||
color: #6d4cfe !important;
|
||||
&:not(.sub-menu-item) {
|
||||
&.active {
|
||||
background-color: #fff !important;
|
||||
.label,
|
||||
.svg-icon {
|
||||
color: #6d4cfe !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:not(:last-child) {
|
||||
|
||||
Reference in New Issue
Block a user