feat: sider调整
This commit is contained in:
rd
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user