feat: sider调整
This commit is contained in:
rd
@ -1,9 +1,10 @@
|
||||
<script setup>
|
||||
import { Layout } from 'ant-design-vue';
|
||||
import Navbar from "./components/navbar"
|
||||
import SiderBar from "./components/siderBar"
|
||||
import Navbar from './components/navbar';
|
||||
import SiderBar from './components/siderBar';
|
||||
|
||||
import { useAppStore } from '@/stores';
|
||||
import { useSidebarStore } from '@/stores/modules/side-bar';
|
||||
import { useResponsive } from '@/hooks';
|
||||
import JoinModal from '@/components/join-modal.vue';
|
||||
import { getQueryParam } from '@/utils/helper';
|
||||
@ -15,6 +16,7 @@ import { useRoute } from 'vue-router';
|
||||
const joinEnterpriseVisible = ref(false);
|
||||
const joinModalRef = ref(null);
|
||||
const appStore = useAppStore();
|
||||
const sidebarStore = useSidebarStore();
|
||||
const userStore = useUserStore();
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
@ -29,14 +31,11 @@ const showSider = computed(() => {
|
||||
});
|
||||
|
||||
const menuWidth = computed(() => {
|
||||
return appStore.menuCollapse ? 48 : appStore.menuWidth;
|
||||
return sidebarStore.menuCollapse ? appStore.menuWidthFold : appStore.menuWidth;
|
||||
});
|
||||
const collapsed = computed(() => {
|
||||
return appStore.menuCollapse;
|
||||
return sidebarStore.menuCollapse;
|
||||
});
|
||||
// const showSidebar = computed(() => {
|
||||
// return !(route.meta && route.meta.hideSidebar);
|
||||
// });
|
||||
|
||||
onMounted(() => {
|
||||
checkHasInviteCode();
|
||||
@ -63,7 +62,6 @@ const checkHasInviteCode = () => {
|
||||
<Layout class="flex layout-content-wrap">
|
||||
<Layout.Sider
|
||||
v-if="showSider"
|
||||
class="layout-sider"
|
||||
v-model="collapsed"
|
||||
:width="menuWidth"
|
||||
collapsible
|
||||
|
||||
@ -1,203 +1,184 @@
|
||||
<script lang="tsx">
|
||||
import { Menu } from 'ant-design-vue';
|
||||
import { Dropdown, Menu } from 'ant-design-vue';
|
||||
import type { RouteMeta, RouteRecordRaw } from 'vue-router';
|
||||
import { useRoute } from 'vue-router';
|
||||
import SvgIcon from '@/components/svg-icon/index.vue';
|
||||
|
||||
import { useAppStore } from '@/stores';
|
||||
import { useSidebarStore } from '@/stores/modules/side-bar';
|
||||
import { listenerRouteChange } from '@/utils/route-listener';
|
||||
import { openWindow, regexUrl } from '@/utils';
|
||||
import useMenuTree from './use-menu-tree';
|
||||
import { MENU_LIST } from './menu-list';
|
||||
import type { typeMenuItem } from './menu-list';
|
||||
|
||||
import icon1 from '@/assets/img/agent/icon1.png';
|
||||
|
||||
export default defineComponent({
|
||||
emit: ['collapse'],
|
||||
setup() {
|
||||
const appStore = useAppStore();
|
||||
// const appStore = useAppStore();
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const { menuTree } = useMenuTree();
|
||||
const collapsed = computed({
|
||||
get() {
|
||||
if (appStore.device === 'desktop') return appStore.menuCollapse;
|
||||
return false;
|
||||
},
|
||||
set(value: boolean) {
|
||||
appStore.updateSettings({ menuCollapse: value });
|
||||
},
|
||||
});
|
||||
const topMenu = computed(() => appStore.topMenu);
|
||||
const openKeys = ref<string[]>([]);
|
||||
const selectedKey = ref<string[]>([]);
|
||||
|
||||
const sidebarStore = useSidebarStore();
|
||||
const onMenuItemClick = (item: RouteRecordRaw) => {
|
||||
if (regexUrl.test(item.path)) {
|
||||
openWindow(item.path);
|
||||
selectedKey.value = [item.name as string];
|
||||
return;
|
||||
}
|
||||
// Eliminate external link side effects
|
||||
const { hideInMenu, activeMenu } = item.meta as RouteMeta;
|
||||
if (route.name === item.name && !hideInMenu && !activeMenu) {
|
||||
selectedKey.value = [item.name as string];
|
||||
return;
|
||||
}
|
||||
// Trigger router change
|
||||
router.push({
|
||||
name: item.name,
|
||||
});
|
||||
};
|
||||
const findMenuOpenKeys = (target: string) => {
|
||||
const result: string[] = [];
|
||||
let isFind = false;
|
||||
const backtrack = (item: RouteRecordRaw, keys: string[]) => {
|
||||
if (item.name === target) {
|
||||
isFind = true;
|
||||
result.push(...keys);
|
||||
return;
|
||||
}
|
||||
if (item.children?.length) {
|
||||
item.children.forEach((el) => {
|
||||
backtrack(el, [...keys, el.name as string]);
|
||||
});
|
||||
}
|
||||
};
|
||||
menuTree.value.forEach((el: RouteRecordRaw) => {
|
||||
if (isFind) return; // Performance optimization
|
||||
backtrack(el, [el.name as string]);
|
||||
});
|
||||
return result;
|
||||
};
|
||||
listenerRouteChange((newRoute) => {
|
||||
const { requiresAuth, activeMenu, hideInMenu } = newRoute.meta;
|
||||
// if (requiresAuth && (!hideInMenu || activeMenu)) {
|
||||
if (!hideInMenu || activeMenu) {
|
||||
const menuOpenKeys = findMenuOpenKeys((activeMenu || newRoute.name) as string);
|
||||
const keySet = new Set([...menuOpenKeys, ...openKeys.value]);
|
||||
openKeys.value = [...keySet];
|
||||
selectedKey.value = [activeMenu || menuOpenKeys[menuOpenKeys.length - 1]];
|
||||
|
||||
// 自动设置 activeMenuId
|
||||
sidebarStore.setActiveMenuIdByRoute(newRoute);
|
||||
}
|
||||
}, true);
|
||||
const setCollapse = (val: boolean) => {
|
||||
if (appStore.device === 'desktop') appStore.updateSettings({ menuCollapse: val });
|
||||
};
|
||||
const renderSubMenu = () => {
|
||||
function travel(_route: RouteRecordRaw[] = [], nodes: any[] = []) {
|
||||
if (!Array.isArray(_route)) return nodes;
|
||||
_route.forEach((element) => {
|
||||
// 跳过没有 name 的菜单项，防止 key 报错
|
||||
if (!element?.name) return;
|
||||
const currentMenuList = ref<typeMenuItem[]>([]);
|
||||
const currentMenuModInfo = ref<typeMenuItem>({});
|
||||
|
||||
const icon = element?.meta?.icon
|
||||
? (() => {
|
||||
if (typeof element.meta.icon === 'string') {
|
||||
return (
|
||||
<svg class="w-16px h-16px">
|
||||
<use xlinkHref={element.meta.icon} />
|
||||
</svg>
|
||||
);
|
||||
} else {
|
||||
return h(element.meta.icon as object);
|
||||
}
|
||||
})()
|
||||
: null;
|
||||
const currentRouteName = computed(() => route.name as string);
|
||||
const currentRouteGroup = computed(() => route.meta?.group ?? 'GroupMain');
|
||||
|
||||
if (element.children && element.children.length > 0) {
|
||||
nodes.push(
|
||||
<a-sub-menu
|
||||
key={String(element.name)}
|
||||
v-slots={{
|
||||
icon,
|
||||
title: () => element?.meta?.locale || '',
|
||||
}}
|
||||
>
|
||||
{travel(element.children)}
|
||||
</a-sub-menu>,
|
||||
);
|
||||
} else {
|
||||
nodes.push(
|
||||
<a-menu-item key={String(element.name)} v-slots={{ icon }} onClick={() => onMenuItemClick(element)}>
|
||||
{element?.meta?.locale || ''}
|
||||
</a-menu-item>,
|
||||
);
|
||||
const getCollapseMenuKey = (routeName: string): string => {
|
||||
let _key: string;
|
||||
for (let i = 0; i < currentMenuList.value.length; i++) {
|
||||
const menuItem = currentMenuList.value[i];
|
||||
|
||||
// 检查是否有list子级
|
||||
if (menuItem.children?.length > 0) {
|
||||
for (let j = 0; j < menuItem.children.length; j++) {
|
||||
const subMenuItem = menuItem.children[j];
|
||||
if (subMenuItem.activeMatch?.includes(routeName)) {
|
||||
currentMenuModInfo.value = menuItem;
|
||||
_key = menuItem.key;
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
return nodes;
|
||||
} else {
|
||||
// 没有list子级，直接检查当前项
|
||||
if (menuItem.routeName === routeName) {
|
||||
currentMenuModInfo.value = menuItem;
|
||||
_key = menuItem.key;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
return travel(menuTree.value ?? []);
|
||||
return _key;
|
||||
};
|
||||
const onClickItem = (name: string) => {
|
||||
router.push({ name });
|
||||
};
|
||||
const renderMenuItem = (item: typeMenuItem, hideLabel = false) => {
|
||||
const getMenuItemClass = () => {
|
||||
if (item.children?.length) {
|
||||
return getCollapseMenuKey(currentRouteName.value) === item.key ? 'active' : '';
|
||||
}
|
||||
return item.activeMatch?.includes(currentRouteName.value) ? 'active' : '';
|
||||
};
|
||||
|
||||
return (
|
||||
<Menu.Item class={`menu-item ${getMenuItemClass()}`} onClick={() => onClickItem(item.routeName)}>
|
||||
<SvgIcon size="18" name={item.icon} alt="状态图标" class="color-#55585F flex-shrink-0" />
|
||||
{!hideLabel && <span class="cts label">{item.label}</span>}
|
||||
</Menu.Item>
|
||||
);
|
||||
};
|
||||
const renderMenuList = () => {
|
||||
return currentMenuList.value.map((item) => {
|
||||
if (!item.children) {
|
||||
return renderMenuItem(item, sidebarStore.menuCollapse);
|
||||
}
|
||||
return (
|
||||
<Dropdown
|
||||
overlayClassName="layout-sider-dropdown-xt"
|
||||
placement="rightTop"
|
||||
v-slots={{
|
||||
overlay: () => {
|
||||
return (
|
||||
<div class="p-8px bg-#fff container">
|
||||
{item.children.map((child) => {
|
||||
return renderMenuItem(child);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
}}
|
||||
>
|
||||
{renderMenuItem(item, sidebarStore.menuCollapse)}
|
||||
</Dropdown>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
const initMenuList = () => {
|
||||
const groupMenuList = MENU_LIST?.[currentRouteGroup.value as string];
|
||||
currentMenuList.value = cloneDeep(groupMenuList);
|
||||
};
|
||||
const initCollapse = () => {
|
||||
getCollapseMenuKey(currentRouteName.value);
|
||||
|
||||
if (currentMenuModInfo.value) {
|
||||
sidebarStore.setActiveMenuKey(currentMenuModInfo.value?.key);
|
||||
}
|
||||
};
|
||||
const init = () => {
|
||||
// 初始化菜单数据
|
||||
initMenuList();
|
||||
|
||||
// 初始化菜单展开项
|
||||
initCollapse();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
init();
|
||||
});
|
||||
|
||||
return () => (
|
||||
<a-menu
|
||||
mode={topMenu.value ? 'horizontal' : 'vertical'}
|
||||
v-model:collapsed={collapsed.value}
|
||||
v-model:open-keys={openKeys.value}
|
||||
show-collapse-button={appStore.device !== 'mobile'}
|
||||
auto-open={false}
|
||||
selected-keys={selectedKey.value}
|
||||
auto-open-selected={true}
|
||||
level-indent={24}
|
||||
style="height: 100%;width:100%;"
|
||||
onCollapse={setCollapse}
|
||||
>
|
||||
{renderSubMenu()}
|
||||
</a-menu>
|
||||
<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={() => onClickItem('Home')}
|
||||
>
|
||||
<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>
|
||||
<div class="flex flex-col flex-1">
|
||||
<div class="menu-list flex-1">{renderMenuList()}</div>
|
||||
<div class="flex justify-end items-center">
|
||||
<div
|
||||
class="flex fold-btn items-center cursor-pointer"
|
||||
onClick={() => {
|
||||
sidebarStore.setMenuCollapse();
|
||||
}}
|
||||
>
|
||||
{sidebarStore.menuCollapse ? (
|
||||
<icon-menu-unfold size={16} class="color-#55585F icon mr-4px" />
|
||||
) : (
|
||||
<icon-menu-fold size={16} class="color-#55585F icon mr-4px" />
|
||||
)}
|
||||
{!sidebarStore.menuCollapse && <span class="cts !color-#55585F flex-shrink-0">展开</span>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Menu>
|
||||
);
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep(.arco-menu-inner) {
|
||||
padding: 20px 24px 0 12px !important;
|
||||
.arco-menu-inline-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
margin-bottom: 12px;
|
||||
@import './style.scss';
|
||||
</style>
|
||||
<style lang="scss">
|
||||
@import './style.scss';
|
||||
.layout-sider-dropdown-xt {
|
||||
.container {
|
||||
border-radius: 8px;
|
||||
.arco-menu-icon {
|
||||
margin-right: 8px;
|
||||
}
|
||||
.arco-menu-title {
|
||||
color: var(--Text-2, #3c4043);
|
||||
font-family: $font-family-medium;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px; /* 137.5% */
|
||||
}
|
||||
&:hover {
|
||||
background: var(--BG-200, #f2f3f5) !important;
|
||||
}
|
||||
&.arco-menu-selected {
|
||||
.arco-menu-title {
|
||||
color: var(--Brand-Brand-6, #6d4cfe) !important;
|
||||
background: var(--BG-White, #fff);
|
||||
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
|
||||
.menu-item {
|
||||
@include menu-item;
|
||||
padding: 8px;
|
||||
&:hover {
|
||||
background: rgba(109, 76, 254, 0.08);
|
||||
color: #6d4cfe;
|
||||
.svg-icon {
|
||||
color: #6d4cfe;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.arco-icon {
|
||||
&:not(.arco-icon-down) {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
.arco-menu-item {
|
||||
border-radius: 8px;
|
||||
.arco-menu-item-inner {
|
||||
color: var(--Text-3, #737478);
|
||||
font-family: $font-family-regular;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px; /* 137.5% */
|
||||
}
|
||||
&:hover {
|
||||
background: var(--BG-200, #f2f3f5) !important;
|
||||
}
|
||||
&.arco-menu-selected {
|
||||
background: var(--Brand-Brand-1, #f0edff) !important;
|
||||
.arco-menu-item-inner {
|
||||
color: var(--Brand-Brand-6, #6d4cfe) !important;
|
||||
&.active {
|
||||
.label,
|
||||
.svg-icon {
|
||||
color: #6d4cfe;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
125
src/layouts/components/siderBar/menu-list.ts
Normal file
125
src/layouts/components/siderBar/menu-list.ts
Normal file
@ -0,0 +1,125 @@
|
||||
export interface typeMenuItem {
|
||||
key?: string | number; // 菜单组key
|
||||
label?: string; // 菜单组标题
|
||||
icon?: string; // 菜单组图标
|
||||
routeName?: string; // 路由名称
|
||||
requireLogin?: boolean; // 是否需要登录
|
||||
requireAuth?: boolean; // 是否需要权限验证
|
||||
activeMatch?: string[]; // 菜单高亮路由组匹配
|
||||
children?: typeMenuItem[]; // 子菜单列表
|
||||
}
|
||||
|
||||
export const MENU_LIST = <Record<string, typeMenuItem[]>>{
|
||||
GroupMain: [
|
||||
{
|
||||
key: 'ModAccountManage',
|
||||
label: '账号管理',
|
||||
icon: 'svg-accountManage',
|
||||
children: [
|
||||
{
|
||||
key: 'ModMediaAccountManage',
|
||||
icon: 'svg-mediaAccountManage',
|
||||
label: '账号管理',
|
||||
routeName: 'MediaAccountAccountManagement',
|
||||
requireLogin: true,
|
||||
activeMatch: ['MediaAccountAccountManagement'],
|
||||
},
|
||||
{
|
||||
key: 'ModMediaAccountData',
|
||||
icon: 'svg-mediaAccountData',
|
||||
label: '账号数据',
|
||||
routeName: 'MediaAccountAccountDashboard',
|
||||
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: 'ModMaterialCenter',
|
||||
label: '素材中心',
|
||||
icon: 'svg-materialCenter',
|
||||
children: [
|
||||
{
|
||||
key: 'ModMediaFinishProductsWareHouse',
|
||||
icon: 'svg-finishProductsWareHouse',
|
||||
label: '成品库',
|
||||
routeName: 'FinishProductsWareHouse',
|
||||
requireLogin: true,
|
||||
activeMatch: ['FinishProductsWareHouse', 'FinishProductsWareHouseWriter'],
|
||||
},
|
||||
{
|
||||
key: 'ModMediaRawMaterialStorage',
|
||||
icon: 'svg-rawMaterialStorage',
|
||||
label: '原料库',
|
||||
routeName: 'RawMaterialStorage',
|
||||
requireLogin: true,
|
||||
activeMatch: ['RawMaterialStorage', 'RawMaterialStorageWriter'],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'ModTaskManage',
|
||||
label: '任务管理',
|
||||
icon: 'svg-taskManage',
|
||||
routeName: 'TaskManagement',
|
||||
},
|
||||
],
|
||||
GroupMainWriter: [
|
||||
{
|
||||
key: 'ModMaterialCenter',
|
||||
label: '素材中心',
|
||||
icon: 'svg-materialCenter',
|
||||
children: [
|
||||
{
|
||||
key: 'ModMediaFinishProductsWareHouseWriter',
|
||||
icon: 'svg-finishProductsWareHouseWriter',
|
||||
label: '成品库',
|
||||
routeName: 'FinishProductsWareHouseWriter',
|
||||
requireLogin: true,
|
||||
activeMatch: ['FinishProductsWareHouseWriter', 'FinishProductsWareHouseWriter'],
|
||||
},
|
||||
{
|
||||
key: 'ModMediaRawMaterialStorageWriter',
|
||||
icon: 'svg-rawMaterialStorageWriter',
|
||||
label: '原料库',
|
||||
routeName: 'RawMaterialStorageWriter',
|
||||
requireLogin: true,
|
||||
activeMatch: ['RawMaterialStorageWriter', 'RawMaterialStorageWriter'],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
71
src/layouts/components/siderBar/style.scss
Normal file
71
src/layouts/components/siderBar/style.scss
Normal file
@ -0,0 +1,71 @@
|
||||
@mixin menu-item {
|
||||
border-radius: 8px;
|
||||
backdrop-filter: blur(100px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// justify-content: center;
|
||||
padding: 8px 12px;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
.label {
|
||||
transition: all 0.3s;
|
||||
margin-left: 8px;
|
||||
flex: auto;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.ant-menu-title-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
&:hover {
|
||||
background: rgba(109, 76, 254, 0.08);
|
||||
color: #6d4cfe;
|
||||
.label,
|
||||
.svg-icon {
|
||||
color: #6d4cfe;
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
background: #fff !important;
|
||||
.label,
|
||||
.svg-icon {
|
||||
color: #6d4cfe !important;
|
||||
}
|
||||
}
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
&.ant-menu-item-selected {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
.siderBar-wrap {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
color: inherit;
|
||||
.cts {
|
||||
color: #211f24;
|
||||
font-family: $font-family-regular;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
}
|
||||
.menu-item {
|
||||
@include menu-item;
|
||||
}
|
||||
.line {
|
||||
opacity: 0.06;
|
||||
}
|
||||
.fold-btn {
|
||||
&:hover {
|
||||
.cts,
|
||||
.icon {
|
||||
color: #6d4cfe !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -9,11 +9,9 @@ import { useSidebarStore } from '@/stores/modules/side-bar';
|
||||
export default function useMenuTree() {
|
||||
const router = useRouter();
|
||||
const appRoutes = router.options?.routes ?? [];
|
||||
console.log({appRoutes})
|
||||
|
||||
const sidebarStore = useSidebarStore();
|
||||
const appRoute = computed(() => {
|
||||
const _filterRoutes = appRoutes.filter((v) => v.meta?.id === sidebarStore.activeMenuId);
|
||||
const _filterRoutes = appRoutes.filter((v) => v.meta?.id === sidebarStore.activeMenuKey);
|
||||
return _filterRoutes;
|
||||
});
|
||||
const menuTree = computed(() => {
|
||||
|
||||
Reference in New Issue
Block a user