renxiaodong/lingji-work-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: 走查问题调整

Browse Source
This commit is contained in:
rd
2025-08-29 12:03:04 +08:00
parent 83d11f1f53
commit 98d7adc550
23 changed files with 289 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/layouts/components/siderBar/index.vue
View File

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