refactor(icons): 移除离线图标依赖并改用CSS类

移除 `@iconify/icons-flat-color-icons/folder`、`@iconify/icons-material-symbols/menu` 和 `@iconify/icons-mdi/button-pointer` 的显式导入与离线图标包装导出。将树组件和菜单视图中的图标使用方式从组件实例更改为CSS类(例如 `icons-[flat-color-icons--folder]`)。这消除了对特定离线图标包的依赖,使图标管理更统一并可能减少打包体积。
This commit is contained in:
dap
2026-01-23 11:21:01 +08:00
parent d475b29e9f
commit 87706ad425
3 changed files with 18 additions and 30 deletions

View File

@@ -2,9 +2,11 @@ import type { VxeGridProps } from '#/adapter/vxe-table';
import type { ID } from '#/api/common';
import type { MenuOption } from '#/api/system/menu/model';
import { h, markRaw } from 'vue';
import { h } from 'vue';
import { FolderIcon, MenuIcon, OkButtonIcon, VbenIcon } from '@vben/icons';
import { VbenIcon } from '@vben/icons';
import { menuTypes } from '#/views/system/menu/data';
export interface Permission {
checked: boolean;
@@ -16,12 +18,6 @@ export interface MenuPermissionOption extends MenuOption {
permissions: Permission[];
}
const menuTypes = {
C: { icon: markRaw(MenuIcon), value: '菜单' },
F: { icon: markRaw(OkButtonIcon), value: '按钮' },
M: { icon: markRaw(FolderIcon), value: '目录' },
};
export const nodeOptions = [
{ label: '节点关联', value: true },
{ label: '节点独立', value: false },

View File

@@ -4,7 +4,7 @@ import type { VxeGridProps } from '#/adapter/vxe-table';
import { h } from 'vue';
import { DictEnum } from '@vben/constants';
import { FolderIcon, MenuIcon, OkButtonIcon, VbenIcon } from '@vben/icons';
import { VbenIcon } from '@vben/icons';
import { $t } from '@vben/locales';
import { getPopupContainer } from '@vben/utils';
@@ -51,10 +51,19 @@ export const yesNoOptions = [
];
// M目录 C菜单 F按钮
const menuTypes = {
C: { icon: MenuIcon, value: '菜单' },
F: { icon: OkButtonIcon, value: '按钮' },
M: { icon: FolderIcon, value: '目录' },
export const menuTypes = {
C: {
icon: <span class="icons-[flat-color-icons--folder]"></span>,
value: '菜单',
},
F: {
icon: <span class="icons-[mdi--button-pointer]"></span>,
value: '按钮',
},
M: {
icon: <span class="icons-[material-symbols--menu]"></span>,
value: '目录',
},
};
export const columns: VxeGridProps['columns'] = [
{

View File

@@ -1,8 +1,5 @@
import { createIconifyOfflineIcon } from '@vben-core/icons';
import folderIcon from '@iconify/icons-flat-color-icons/folder';
import menuIcon from '@iconify/icons-material-symbols/menu';
import okButtonIcon from '@iconify/icons-mdi/button-pointer';
import dingdingFill from '@iconify/icons-ri/dingding-fill';
import giteeIcon from '@iconify/icons-simple-icons/gitee';
@@ -17,17 +14,3 @@ export const GiteeIcon = createIconifyOfflineIcon(
'simple-icons:gitee',
giteeIcon,
);
// 菜单类型 目录/按钮/菜单
export const FolderIcon = createIconifyOfflineIcon(
'flat-color-icons:folder',
folderIcon,
);
export const OkButtonIcon = createIconifyOfflineIcon(
'mdi:button-pointer',
okButtonIcon,
);
export const MenuIcon = createIconifyOfflineIcon(
'material-symbols:menu',
menuIcon,
);