feat: 添加图标库,更新菜单与页面标签中的icon相关功能与样式
This commit is contained in:
@@ -4,21 +4,17 @@ import { useRouter, useRoute, RouterView } from 'vue-router';
|
||||
import { Layout, Menu, Modal, Breadcrumb, Dropdown, message } from 'ant-design-vue';
|
||||
import type { MenuProps } from 'ant-design-vue';
|
||||
import {
|
||||
DashboardOutlined,
|
||||
EditOutlined,
|
||||
InfoCircleOutlined,
|
||||
LogoutOutlined,
|
||||
MenuFoldOutlined,
|
||||
MenuUnfoldOutlined,
|
||||
SettingOutlined,
|
||||
TransactionOutlined,
|
||||
TrophyOutlined,
|
||||
} from '@ant-design/icons-vue';
|
||||
import { useMenuStore } from '@/stores/menuStore';
|
||||
import { useUserStore } from '@/stores/userStore';
|
||||
import { useTabsStore } from '@/stores/tabsStore';
|
||||
import { useState, useBreadcrumb, auth } from '@/hooks';
|
||||
import { ChangePasswordModal, PageTabs } from '@/components';
|
||||
import { renderRouteIcon } from '@/utils/routeIcon';
|
||||
import logoutSvg from '@/assets/img/icon/logout.svg';
|
||||
import styles from './BasicLayout.module.less';
|
||||
|
||||
@@ -47,22 +43,9 @@ const footerStyle: CSSProperties = {
|
||||
userSelect: 'none',
|
||||
};
|
||||
|
||||
/**
|
||||
* 图标名 → 组件映射
|
||||
* 后端下发的 icon 字符串在此映射为 antd icon 组件
|
||||
* 扩展新图标只需在此添加一行
|
||||
*/
|
||||
const ICON_MAP: Record<string, any> = {
|
||||
DashboardOutlined,
|
||||
InfoCircleOutlined,
|
||||
SettingOutlined,
|
||||
TransactionOutlined,
|
||||
TrophyOutlined,
|
||||
};
|
||||
|
||||
/**
|
||||
* 将 menuStore 中的 menuItems 转为 antd Menu 的 items 格式
|
||||
* 递归处理 iconName → icon VNode
|
||||
* 递归处理 iconName → vue-icons-plus 图标 VNode
|
||||
*/
|
||||
function resolveMenuItems(items: any[]): MenuProps['items'] {
|
||||
return items.map((item) => {
|
||||
@@ -71,9 +54,8 @@ function resolveMenuItems(items: any[]): MenuProps['items'] {
|
||||
label: item.label,
|
||||
};
|
||||
|
||||
// iconName 字符串转为 VNode
|
||||
if (item.iconName && ICON_MAP[item.iconName]) {
|
||||
resolved.icon = () => h(ICON_MAP[item.iconName]);
|
||||
if (item.iconName) {
|
||||
resolved.icon = () => renderRouteIcon(item.iconName, { size: 16 });
|
||||
}
|
||||
|
||||
if (item.children?.length) {
|
||||
|
||||
Reference in New Issue
Block a user