From 818f12d1ea7013dbe78dc84575c96fe6c189bb60 Mon Sep 17 00:00:00 2001 From: xiaoxian521 <1923740402@qq.com> Date: Sun, 16 Mar 2025 18:46:16 +0800 Subject: [PATCH 1/7] =?UTF-8?q?refactor:=20=E4=BD=BF=E7=94=A8`@iconify-jso?= =?UTF-8?q?n/*`=E5=8C=85=E6=9B=BF=E6=8D=A2=E4=B8=8D=E5=86=8D=E7=BB=B4?= =?UTF-8?q?=E6=8A=A4=E7=9A=84`@iconify-icons/*`=E4=BE=9D=E8=B5=96=EF=BC=8C?= =?UTF-8?q?=E7=A1=AE=E4=BF=9D=E5=9B=BE=E6=A0=87=E5=BA=93=E5=8F=AF=E6=8C=81?= =?UTF-8?q?=E7=BB=AD=E6=9B=B4=E6=96=B0=E5=B9=B6=E4=BC=98=E5=8C=96=E4=BD=BF?= =?UTF-8?q?=E7=94=A8=E4=BD=93=E9=AA=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- build/optimize.ts | 4 +- build/plugins.ts | 6 + package.json | 5 +- pnpm-lock.yaml | 116 +++++++++++++-- src/components/ReDialog/index.vue | 4 +- src/components/ReIcon/src/Select.vue | 2 +- .../ReIcon/src/iconifyIconOffline.ts | 6 +- src/components/ReIcon/src/offlineIcon.ts | 138 +++++++++--------- src/components/RePureTableBar/src/bar.tsx | 4 +- src/components/ReQrcode/src/index.tsx | 2 +- src/components/ReVxeTableBar/src/bar.tsx | 4 +- src/layout/components/lay-navbar/index.vue | 8 +- src/layout/components/lay-notice/index.vue | 2 +- src/layout/components/lay-panel/index.vue | 2 +- .../lay-search/components/SearchFooter.vue | 4 +- .../components/SearchHistoryItem.vue | 4 +- .../lay-search/components/SearchModal.vue | 2 +- src/layout/components/lay-setting/index.vue | 6 +- .../components/lay-sidebar/NavHorizontal.vue | 8 +- src/layout/components/lay-sidebar/NavMix.vue | 8 +- .../components/SidebarCenterCollapse.vue | 2 +- .../lay-sidebar/components/SidebarItem.vue | 8 +- .../components/SidebarLeftCollapse.vue | 2 +- .../components/SidebarTopCollapse.vue | 4 +- src/layout/components/lay-tag/index.vue | 10 +- src/layout/hooks/useNav.ts | 4 +- src/layout/hooks/useTag.ts | 14 +- src/layout/types.ts | 6 +- src/views/able/menu-tree.vue | 2 +- src/views/able/video.vue | 2 +- .../account-settings/components/Profile.vue | 2 +- src/views/account-settings/index.vue | 10 +- src/views/components/message.vue | 2 +- src/views/components/segmented.vue | 2 +- src/views/components/timeline.vue | 2 +- src/views/components/upload/form.vue | 2 +- src/views/components/upload/index.vue | 6 +- src/views/list/card/components/ListCard.vue | 2 +- src/views/list/card/index.vue | 2 +- src/views/login/components/LoginPhone.vue | 2 +- src/views/login/components/LoginRegist.vue | 6 +- src/views/login/components/LoginUpdate.vue | 4 +- src/views/login/index.vue | 8 +- src/views/monitor/logs/login/index.vue | 4 +- src/views/monitor/logs/operation/index.vue | 4 +- src/views/monitor/logs/system/hook.tsx | 2 +- src/views/monitor/logs/system/index.vue | 6 +- src/views/monitor/online/index.vue | 4 +- src/views/result/columns.tsx | 4 +- src/views/system/dept/index.vue | 8 +- src/views/system/menu/index.vue | 8 +- src/views/system/role/index.vue | 18 +-- src/views/system/user/index.vue | 16 +- src/views/system/user/tree.vue | 10 +- .../table/base/header-renderer/index.vue | 2 +- src/views/table/edit/demo1/index.vue | 4 +- src/views/table/edit/demo3/columns.tsx | 4 +- .../welcome/components/table/columns.tsx | 4 +- src/views/welcome/data.ts | 8 +- tsconfig.json | 1 + types/router.d.ts | 7 +- 61 files changed, 323 insertions(+), 230 deletions(-) diff --git a/build/optimize.ts b/build/optimize.ts index fbf706efb..a93266420 100644 --- a/build/optimize.ts +++ b/build/optimize.ts @@ -57,8 +57,8 @@ const include = [ /** * 在预构建中强制排除的依赖项 - * 温馨提示：所有以 `@iconify-icons/` 开头引入的的本地图标模块，都应该加入到下面的 `exclude` 里，因为平台推荐的使用方式是哪里需要哪里引入而且都是单个的引入，不需要预构建，直接让浏览器加载就好 + * 温馨提示：所有以 `@iconify-json/` 开头引入的的本地图标模块，都应该加入到下面的 `exclude` 里，因为平台推荐的使用方式是哪里需要哪里引入而且都是单个的引入，不需要预构建，直接让浏览器加载就好 */ -const exclude = ["@iconify-icons/ep", "@iconify-icons/ri"]; +const exclude = ["@iconify-json/ep", "@iconify-json/ri"]; export { include, exclude }; diff --git a/build/plugins.ts b/build/plugins.ts index ea8bbc3d3..3cfd321ee 100644 --- a/build/plugins.ts +++ b/build/plugins.ts @@ -3,6 +3,7 @@ import vue from "@vitejs/plugin-vue"; import { pathResolve } from "./utils"; import { viteBuildInfo } from "./info"; import svgLoader from "vite-svg-loader"; +import Icons from "unplugin-icons/vite"; import type { PluginOption } from "vite"; import vueJsx from "@vitejs/plugin-vue-jsx"; import { configCompressPlugin } from "./compress"; @@ -57,6 +58,11 @@ export function getPluginsList( }), // svg组件化支持 svgLoader(), + // 自动按需加载图标 + Icons({ + compiler: "vue3", + scale: 1 + }), VITE_CDN ? cdn : null, configCompressPlugin(VITE_COMPRESSION), // 线上环境删除console diff --git a/package.json b/package.json index 43f1a7db5..4fafc7ca4 100644 --- a/package.json +++ b/package.json @@ -119,8 +119,8 @@ "@commitlint/types": "^19.5.0", "@eslint/js": "^9.20.0", "@faker-js/faker": "^9.5.0", - "@iconify-icons/ep": "^1.2.12", - "@iconify-icons/ri": "^1.2.10", + "@iconify-json/ep": "^1.2.2", + "@iconify-json/ri": "^1.2.5", "@iconify/vue": "4.2.0", "@intlify/unplugin-vue-i18n": "^6.0.3", "@types/codemirror": "^5.60.15", @@ -166,6 +166,7 @@ "svgo": "^3.3.2", "tailwindcss": "3.4.17", "typescript": "^5.7.3", + "unplugin-icons": "^22.1.0", "vite": "^6.1.0", "vite-plugin-cdn-import": "^1.0.1", "vite-plugin-compression": "^0.5.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9312023a3..a984d5d28 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -219,12 +219,12 @@ importers: '@faker-js/faker': specifier: ^9.5.0 version: 9.5.0 - '@iconify-icons/ep': - specifier: ^1.2.12 - version: 1.2.12 - '@iconify-icons/ri': - specifier: ^1.2.10 - version: 1.2.10 + '@iconify-json/ep': + specifier: ^1.2.2 + version: 1.2.2 + '@iconify-json/ri': + specifier: ^1.2.5 + version: 1.2.5 '@iconify/vue': specifier: 4.2.0 version: 4.2.0(vue@3.5.13(typescript@5.7.3)) @@ -360,6 +360,9 @@ importers: typescript: specifier: ^5.7.3 version: 5.7.3 + unplugin-icons: + specifier: ^22.1.0 + version: 22.1.0(@vue/compiler-sfc@3.5.13) vite: specifier: ^6.1.0 version: 6.1.0(@types/node@20.17.19)(jiti@2.4.2)(sass@1.85.0)(yaml@2.7.0) @@ -401,6 +404,12 @@ packages: resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==} engines: {node: '>=6.0.0'} + '@antfu/install-pkg@1.0.0': + resolution: {integrity: sha512-xvX6P/lo1B3ej0OsaErAjqgFYzYVcJpamjLAFLYh9vRJngBrMoUG7aVnrGTeqM7yxbyTD5p3F2+0/QUEh8Vzhw==} + + '@antfu/utils@8.1.1': + resolution: {integrity: sha512-Mex9nXf9vR6AhcXmMrlz/HVgYYZpVGJ6YlPgwl7UnaFpnshXs6EK/oa5Gpf3CzENMjkvEx2tQtntGnb7UtSTOQ==} + '@babel/code-frame@7.26.2': resolution: {integrity: sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==} engines: {node: '>=6.9.0'} @@ -934,15 +943,18 @@ packages: resolution: {integrity: sha512-c7hNEllBlenFTHBky65mhq8WD2kbN9Q6gk0bTk8lSBvc554jpXSkST1iePudpt7+A/AQvuHs9EMqjHDXMY1lrA==} engines: {node: '>=18.18'} - '@iconify-icons/ep@1.2.12': - resolution: {integrity: sha512-8EJULn048sQq3fvytpQ5j40omnVOdBKpo+sXdYM35NRrqCe1BihxBesMcCOLWaocqkWia6uTQ3cnRHff4ZA11w==} + '@iconify-json/ep@1.2.2': + resolution: {integrity: sha512-/IH1GjQKH5uK7lQAOjwPxdjkU98OWUWnHYCdg/EkeebBKEteotaOMeEz5pR1egqMcI7zPFdFBTcGyCHla1ddQw==} - '@iconify-icons/ri@1.2.10': - resolution: {integrity: sha512-wNaXsQYK55WDUWCbcjvnwnODV4Jtsp+VC0duPanibEVu876TUYf6kdgTGtH7/GErBCNdJuJJbncG7vbOaeQi7w==} + '@iconify-json/ri@1.2.5': + resolution: {integrity: sha512-kWGimOXMZrlYusjBKKXYOWcKhbOHusFsmrmRGmjS7rH0BpML5A9/fy8KHZqFOwZfC4M6amObQYbh8BqO5cMC3w==} '@iconify/types@2.0.0': resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==} + '@iconify/utils@2.3.0': + resolution: {integrity: sha512-GmQ78prtwYW6EtzXRU1rY+KwOKfz32PD7iJh6Iyqw68GiKuoZ2A6pRtzWONz5VQJbp50mEjXh/7NkumtrAgRKA==} + '@iconify/vue@4.2.0': resolution: {integrity: sha512-CMynoz9BDWugDO2B7LU/s8L99dHCiqDGCjCki6bhVx5etZhw9x0BTV7wWRdj82jtl1yQTc+QQRcHQmSvUY6R+g==} peerDependencies: @@ -3007,6 +3019,10 @@ packages: resolution: {integrity: sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==} engines: {node: '>=18'} + globals@15.15.0: + resolution: {integrity: sha512-7ACyT3wmyp3I61S4fG682L0VA2RGD9otkqGJIwNUMF1SWUombIIk+af1unuDYgMm082aHYwD+mzJvv9Iu8dsgg==} + engines: {node: '>=18'} + globby@11.1.0: resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==} engines: {node: '>=10'} @@ -3524,6 +3540,9 @@ packages: known-css-properties@0.35.0: resolution: {integrity: sha512-a/RAk2BfKk+WFGhhOCAYqSiFLc34k8Mt/6NWRI4joER0EYUzXIcFivjjnoD3+XU1DggLn/tZc3DOAgke7l8a4A==} + kolorist@1.8.0: + resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==} + launch-ide@1.0.2: resolution: {integrity: sha512-h7U48fgoAdgIs2LLYHdwyL9xPGvWkVVAKo7U9PlLnNHR6UNp150hinAJBVWzd43gJ+GSqcvdbajdkKicx+cStQ==} @@ -3939,6 +3958,9 @@ packages: package-json-from-dist@1.0.1: resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==} + package-manager-detector@0.2.11: + resolution: {integrity: sha512-BEnLolu+yuz22S56CU1SUKq3XC3PkwD5wv4ikR4MfGvnRVcmzXR9DwSlW2fEamyTPyXHomBJRzgapeuBvRNzJQ==} + parent-module@1.0.1: resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==} engines: {node: '>=6'} @@ -4368,6 +4390,9 @@ packages: resolution: {integrity: sha512-YWWTjgABSKcvs/nWBi9PycY/JiPJqOD4JA6o9Sej2AtvSGarXxKC3OQSk4pAarbdQlKAh5D4FCQkJNkW+GAn3w==} engines: {node: '>=0.6'} + quansync@0.2.8: + resolution: {integrity: sha512-4+saucphJMazjt7iOM27mbFCk+D9dd/zmgMDCzRZ8MEoBfYp7lAvoN38et/phRQF6wOPMy/OROBGgoWeSKyluA==} + querystringify@2.2.0: resolution: {integrity: sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==} @@ -4995,6 +5020,29 @@ packages: resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==} engines: {node: '>= 10.0.0'} + unplugin-icons@22.1.0: + resolution: {integrity: sha512-ect2ZNtk1Zgwb0NVHd0C1IDW/MV+Jk/xaq4t8o6rYdVS3+L660ZdD5kTSQZvsgdwCvquRw+/wYn75hsweRjoIA==} + peerDependencies: + '@svgr/core': '>=7.0.0' + '@svgx/core': ^1.0.1 + '@vue/compiler-sfc': ^3.0.2 || ^2.7.0 + svelte: ^3.0.0 || ^4.0.0 || ^5.0.0 + vue-template-compiler: ^2.6.12 + vue-template-es2015-compiler: ^1.9.0 + peerDependenciesMeta: + '@svgr/core': + optional: true + '@svgx/core': + optional: true + '@vue/compiler-sfc': + optional: true + svelte: + optional: true + vue-template-compiler: + optional: true + vue-template-es2015-compiler: + optional: true + unplugin-utils@0.2.4: resolution: {integrity: sha512-8U/MtpkPkkk3Atewj1+RcKIjb5WBimZ/WSLhhR3w6SsIj8XJuKTacSP8g+2JhfSGw0Cb125Y+2zA/IzJZDVbhA==} engines: {node: '>=18.12.0'} @@ -5430,6 +5478,13 @@ snapshots: '@jridgewell/gen-mapping': 0.3.8 '@jridgewell/trace-mapping': 0.3.25 + '@antfu/install-pkg@1.0.0': + dependencies: + package-manager-detector: 0.2.11 + tinyexec: 0.3.2 + + '@antfu/utils@8.1.1': {} + '@babel/code-frame@7.26.2': dependencies: '@babel/helper-validator-identifier': 7.25.9 @@ -5964,16 +6019,29 @@ snapshots: '@humanwhocodes/retry@0.4.1': {} - '@iconify-icons/ep@1.2.12': + '@iconify-json/ep@1.2.2': dependencies: '@iconify/types': 2.0.0 - '@iconify-icons/ri@1.2.10': + '@iconify-json/ri@1.2.5': dependencies: '@iconify/types': 2.0.0 '@iconify/types@2.0.0': {} + '@iconify/utils@2.3.0': + dependencies: + '@antfu/install-pkg': 1.0.0 + '@antfu/utils': 8.1.1 + '@iconify/types': 2.0.0 + debug: 4.4.0 + globals: 15.15.0 + kolorist: 1.8.0 + local-pkg: 1.0.0 + mlly: 1.7.4 + transitivePeerDependencies: + - supports-color + '@iconify/vue@4.2.0(vue@3.5.13(typescript@5.7.3))': dependencies: '@iconify/types': 2.0.0 @@ -8387,6 +8455,8 @@ snapshots: globals@14.0.0: {} + globals@15.15.0: {} + globby@11.1.0: dependencies: array-union: 2.1.0 @@ -9102,6 +9172,8 @@ snapshots: known-css-properties@0.35.0: {} + kolorist@1.8.0: {} + launch-ide@1.0.2: dependencies: chalk: 4.1.1 @@ -9152,7 +9224,6 @@ snapshots: dependencies: mlly: 1.7.4 pkg-types: 1.3.1 - optional: true localforage@1.10.0: dependencies: @@ -9512,6 +9583,10 @@ snapshots: package-json-from-dist@1.0.1: {} + package-manager-detector@0.2.11: + dependencies: + quansync: 0.2.8 + parent-module@1.0.1: dependencies: callsites: 3.1.0 @@ -9895,6 +9970,8 @@ snapshots: dependencies: side-channel: 1.1.0 + quansync@0.2.8: {} + querystringify@2.2.0: {} queue-microtask@1.2.3: {} @@ -10587,6 +10664,18 @@ snapshots: universalify@2.0.1: {} + unplugin-icons@22.1.0(@vue/compiler-sfc@3.5.13): + dependencies: + '@antfu/install-pkg': 1.0.0 + '@iconify/utils': 2.3.0 + debug: 4.4.0 + local-pkg: 1.0.0 + unplugin: 2.2.0 + optionalDependencies: + '@vue/compiler-sfc': 3.5.13 + transitivePeerDependencies: + - supports-color + unplugin-utils@0.2.4: dependencies: pathe: 2.0.3 @@ -10602,7 +10691,6 @@ snapshots: dependencies: acorn: 8.14.0 webpack-virtual-modules: 0.6.2 - optional: true untyped@1.5.2: dependencies: diff --git a/src/components/ReDialog/index.vue b/src/components/ReDialog/index.vue index 23a0106e3..09f3e084a 100644 --- a/src/components/ReDialog/index.vue +++ b/src/components/ReDialog/index.vue @@ -8,8 +8,8 @@ import { } from "./index"; import { ref, computed } from "vue"; import { isFunction } from "@pureadmin/utils"; -import Fullscreen from "@iconify-icons/ri/fullscreen-fill"; -import ExitFullscreen from "@iconify-icons/ri/fullscreen-exit-fill"; +import Fullscreen from "~icons/ri/fullscreen-fill"; +import ExitFullscreen from "~icons/ri/fullscreen-exit-fill"; defineOptions({ name: "ReDialog" diff --git a/src/components/ReIcon/src/Select.vue b/src/components/ReIcon/src/Select.vue index 9c1366f06..8a9e95e58 100644 --- a/src/components/ReIcon/src/Select.vue +++ b/src/components/ReIcon/src/Select.vue @@ -2,7 +2,7 @@ import { IconJson } from "@/components/ReIcon/data"; import { cloneDeep, isAllEmpty } from "@pureadmin/utils"; import { ref, computed, CSSProperties, watch } from "vue"; -import Search from "@iconify-icons/ri/search-eye-line"; +import Search from "~icons/ri/search-eye-line"; type ParameterCSSProperties = (item?: string) => CSSProperties | undefined; diff --git a/src/components/ReIcon/src/iconifyIconOffline.ts b/src/components/ReIcon/src/iconifyIconOffline.ts index 4ba9dfc0a..feaf4e2d0 100644 --- a/src/components/ReIcon/src/iconifyIconOffline.ts +++ b/src/components/ReIcon/src/iconifyIconOffline.ts @@ -1,22 +1,18 @@ import { h, defineComponent } from "vue"; -import { Icon as IconifyIcon, addIcon } from "@iconify/vue/dist/offline"; // Iconify Icon在Vue里本地使用（用于内网环境） export default defineComponent({ name: "IconifyIconOffline", - components: { IconifyIcon }, props: { icon: { default: null } }, render() { - if (typeof this.icon === "object") addIcon(this.icon, this.icon); const attrs = this.$attrs; return h( - IconifyIcon, + this.icon, { - icon: this.icon, "aria-hidden": false, style: attrs?.style ? Object.assign(attrs.style, { outline: "none" }) diff --git a/src/components/ReIcon/src/offlineIcon.ts b/src/components/ReIcon/src/offlineIcon.ts index 2283a55d3..70d2625e7 100644 --- a/src/components/ReIcon/src/offlineIcon.ts +++ b/src/components/ReIcon/src/offlineIcon.ts @@ -1,70 +1,70 @@ -// 这里存放本地图标，在 src/layout/index.vue 文件中加载，避免在首启动加载 -import { addIcon } from "@iconify/vue/dist/offline"; +// // 这里存放本地图标，在 src/layout/index.vue 文件中加载，避免在首启动加载 +// import { addIcon } from "@iconify/vue/dist/offline"; -// 本地菜单图标，后端在路由的 icon 中返回对应的图标字符串并且前端在此处使用 addIcon 添加即可渲染菜单图标 -// @iconify-icons/ep -import Menu from "@iconify-icons/ep/menu"; -import Edit from "@iconify-icons/ep/edit"; -import SetUp from "@iconify-icons/ep/set-up"; -import Guide from "@iconify-icons/ep/guide"; -import Monitor from "@iconify-icons/ep/monitor"; -import Lollipop from "@iconify-icons/ep/lollipop"; -import Histogram from "@iconify-icons/ep/histogram"; -import HomeFilled from "@iconify-icons/ep/home-filled"; -addIcon("ep:menu", Menu); -addIcon("ep:edit", Edit); -addIcon("ep:set-up", SetUp); -addIcon("ep:guide", Guide); -addIcon("ep:monitor", Monitor); -addIcon("ep:lollipop", Lollipop); -addIcon("ep:histogram", Histogram); -addIcon("ep:home-filled", HomeFilled); -// @iconify-icons/ri -import Tag from "@iconify-icons/ri/bookmark-2-line"; -import Ppt from "@iconify-icons/ri/file-ppt-2-line"; -import Card from "@iconify-icons/ri/bank-card-line"; -import Role from "@iconify-icons/ri/admin-fill"; -import Info from "@iconify-icons/ri/file-info-line"; -import Dept from "@iconify-icons/ri/git-branch-line"; -import Table from "@iconify-icons/ri/table-line"; -import Links from "@iconify-icons/ri/links-fill"; -import Search from "@iconify-icons/ri/search-line"; -import FlUser from "@iconify-icons/ri/admin-line"; -import Setting from "@iconify-icons/ri/settings-3-line"; -import MindMap from "@iconify-icons/ri/mind-map"; -import BarChart from "@iconify-icons/ri/bar-chart-horizontal-line"; -import LoginLog from "@iconify-icons/ri/window-line"; -import Artboard from "@iconify-icons/ri/artboard-line"; -import SystemLog from "@iconify-icons/ri/file-search-line"; -import ListCheck from "@iconify-icons/ri/list-check"; -import UbuntuFill from "@iconify-icons/ri/ubuntu-fill"; -import OnlineUser from "@iconify-icons/ri/user-voice-line"; -import EditBoxLine from "@iconify-icons/ri/edit-box-line"; -import OperationLog from "@iconify-icons/ri/history-fill"; -import InformationLine from "@iconify-icons/ri/information-line"; -import TerminalWindowLine from "@iconify-icons/ri/terminal-window-line"; -import CheckboxCircleLine from "@iconify-icons/ri/checkbox-circle-line"; -addIcon("ri:bookmark-2-line", Tag); -addIcon("ri:file-ppt-2-line", Ppt); -addIcon("ri:bank-card-line", Card); -addIcon("ri:admin-fill", Role); -addIcon("ri:file-info-line", Info); -addIcon("ri:git-branch-line", Dept); -addIcon("ri:links-fill", Links); -addIcon("ri:table-line", Table); -addIcon("ri:search-line", Search); -addIcon("ri:admin-line", FlUser); -addIcon("ri:settings-3-line", Setting); -addIcon("ri:mind-map", MindMap); -addIcon("ri:bar-chart-horizontal-line", BarChart); -addIcon("ri:window-line", LoginLog); -addIcon("ri:file-search-line", SystemLog); -addIcon("ri:artboard-line", Artboard); -addIcon("ri:list-check", ListCheck); -addIcon("ri:ubuntu-fill", UbuntuFill); -addIcon("ri:user-voice-line", OnlineUser); -addIcon("ri:edit-box-line", EditBoxLine); -addIcon("ri:history-fill", OperationLog); -addIcon("ri:information-line", InformationLine); -addIcon("ri:terminal-window-line", TerminalWindowLine); -addIcon("ri:checkbox-circle-line", CheckboxCircleLine); +// // 本地菜单图标，后端在路由的 icon 中返回对应的图标字符串并且前端在此处使用 addIcon 添加即可渲染菜单图标 +// // @iconify-json/ep +// import Menu from "~icons/ep/menu"; +// import Edit from "~icons/ep/edit"; +// import SetUp from "~icons/ep/set-up"; +// import Guide from "~icons/ep/guide"; +// import Monitor from "~icons/ep/monitor"; +// import Lollipop from "~icons/ep/lollipop"; +// import Histogram from "~icons/ep/histogram"; +// import HomeFilled from "~icons/ep/home-filled"; +// addIcon("ep:menu", Menu); +// addIcon("ep:edit", Edit); +// addIcon("ep:set-up", SetUp); +// addIcon("ep:guide", Guide); +// addIcon("ep:monitor", Monitor); +// addIcon("ep:lollipop", Lollipop); +// addIcon("ep:histogram", Histogram); +// addIcon("ep:home-filled", HomeFilled); +// // @iconify-json/ri +// import Tag from "~icons/ri/bookmark-2-line"; +// import Ppt from "~icons/ri/file-ppt-2-line"; +// import Card from "~icons/ri/bank-card-line"; +// import Role from "~icons/ri/admin-fill"; +// import Info from "~icons/ri/file-info-line"; +// import Dept from "~icons/ri/git-branch-line"; +// import Table from "~icons/ri/table-line"; +// import Links from "~icons/ri/links-fill"; +// import Search from "~icons/ri/search-line"; +// import FlUser from "~icons/ri/admin-line"; +// import Setting from "~icons/ri/settings-3-line"; +// import MindMap from "~icons/ri/mind-map"; +// import BarChart from "~icons/ri/bar-chart-horizontal-line"; +// import LoginLog from "~icons/ri/window-line"; +// import Artboard from "~icons/ri/artboard-line"; +// import SystemLog from "~icons/ri/file-search-line"; +// import ListCheck from "~icons/ri/list-check"; +// import UbuntuFill from "~icons/ri/ubuntu-fill"; +// import OnlineUser from "~icons/ri/user-voice-line"; +// import EditBoxLine from "~icons/ri/edit-box-line"; +// import OperationLog from "~icons/ri/history-fill"; +// import InformationLine from "~icons/ri/information-line"; +// import TerminalWindowLine from "~icons/ri/terminal-window-line"; +// import CheckboxCircleLine from "~icons/ri/checkbox-circle-line"; +// addIcon("ri:bookmark-2-line", Tag); +// addIcon("ri:file-ppt-2-line", Ppt); +// addIcon("ri:bank-card-line", Card); +// addIcon("ri:admin-fill", Role); +// addIcon("ri:file-info-line", Info); +// addIcon("ri:git-branch-line", Dept); +// addIcon("ri:links-fill", Links); +// addIcon("ri:table-line", Table); +// addIcon("ri:search-line", Search); +// addIcon("ri:admin-line", FlUser); +// addIcon("ri:settings-3-line", Setting); +// addIcon("ri:mind-map", MindMap); +// addIcon("ri:bar-chart-horizontal-line", BarChart); +// addIcon("ri:window-line", LoginLog); +// addIcon("ri:file-search-line", SystemLog); +// addIcon("ri:artboard-line", Artboard); +// addIcon("ri:list-check", ListCheck); +// addIcon("ri:ubuntu-fill", UbuntuFill); +// addIcon("ri:user-voice-line", OnlineUser); +// addIcon("ri:edit-box-line", EditBoxLine); +// addIcon("ri:history-fill", OperationLog); +// addIcon("ri:information-line", InformationLine); +// addIcon("ri:terminal-window-line", TerminalWindowLine); +// addIcon("ri:checkbox-circle-line", CheckboxCircleLine); diff --git a/src/components/RePureTableBar/src/bar.tsx b/src/components/RePureTableBar/src/bar.tsx index de98fed89..815f5c071 100644 --- a/src/components/RePureTableBar/src/bar.tsx +++ b/src/components/RePureTableBar/src/bar.tsx @@ -18,8 +18,8 @@ import { getKeyList } from "@pureadmin/utils"; -import Fullscreen from "@iconify-icons/ri/fullscreen-fill"; -import ExitFullscreen from "@iconify-icons/ri/fullscreen-exit-fill"; +import Fullscreen from "~icons/ri/fullscreen-fill"; +import ExitFullscreen from "~icons/ri/fullscreen-exit-fill"; import DragIcon from "@/assets/table-bar/drag.svg?component"; import ExpandIcon from "@/assets/table-bar/expand.svg?component"; import RefreshIcon from "@/assets/table-bar/refresh.svg?component"; diff --git a/src/components/ReQrcode/src/index.tsx b/src/components/ReQrcode/src/index.tsx index 981271525..20f57ce44 100644 --- a/src/components/ReQrcode/src/index.tsx +++ b/src/components/ReQrcode/src/index.tsx @@ -11,7 +11,7 @@ import "./index.scss"; import propTypes from "@/utils/propTypes"; import { isString, cloneDeep } from "@pureadmin/utils"; import QRCode, { type QRCodeRenderersOptions } from "qrcode"; -import RefreshRight from "@iconify-icons/ep/refresh-right"; +import RefreshRight from "~icons/ep/refresh-right"; interface QrcodeLogo { src?: string; diff --git a/src/components/ReVxeTableBar/src/bar.tsx b/src/components/ReVxeTableBar/src/bar.tsx index 2e5216cac..769a103bf 100644 --- a/src/components/ReVxeTableBar/src/bar.tsx +++ b/src/components/ReVxeTableBar/src/bar.tsx @@ -12,8 +12,8 @@ import { getCurrentInstance } from "vue"; -import Fullscreen from "@iconify-icons/ri/fullscreen-fill"; -import ExitFullscreen from "@iconify-icons/ri/fullscreen-exit-fill"; +import Fullscreen from "~icons/ri/fullscreen-fill"; +import ExitFullscreen from "~icons/ri/fullscreen-exit-fill"; import DragIcon from "@/assets/table-bar/drag.svg?component"; import ExpandIcon from "@/assets/table-bar/expand.svg?component"; import RefreshIcon from "@/assets/table-bar/refresh.svg?component"; diff --git a/src/layout/components/lay-navbar/index.vue b/src/layout/components/lay-navbar/index.vue index 691d880ef..b346be487 100644 --- a/src/layout/components/lay-navbar/index.vue +++ b/src/layout/components/lay-navbar/index.vue @@ -9,10 +9,10 @@ import LaySidebarBreadCrumb from "../lay-sidebar/components/SidebarBreadCrumb.vu import LaySidebarTopCollapse from "../lay-sidebar/components/SidebarTopCollapse.vue"; import GlobalizationIcon from "@/assets/svg/globalization.svg?component"; -import AccountSettingsIcon from "@iconify-icons/ri/user-settings-line"; -import LogoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line"; -import Setting from "@iconify-icons/ri/settings-3-line"; -import Check from "@iconify-icons/ep/check"; +import AccountSettingsIcon from "~icons/ri/user-settings-line"; +import LogoutCircleRLine from "~icons/ri/logout-circle-r-line"; +import Setting from "~icons/ri/settings-3-line"; +import Check from "~icons/ep/check"; const { layout, diff --git a/src/layout/components/lay-notice/index.vue b/src/layout/components/lay-notice/index.vue index d85cf0f73..6ea5fb7db 100644 --- a/src/layout/components/lay-notice/index.vue +++ b/src/layout/components/lay-notice/index.vue @@ -3,7 +3,7 @@ import { useI18n } from "vue-i18n"; import { ref, computed } from "vue"; import { noticesData } from "./data"; import NoticeList from "./components/NoticeList.vue"; -import BellIcon from "@iconify-icons/ep/bell"; +import BellIcon from "~icons/ep/bell"; const { t } = useI18n(); const noticesNum = ref(0); diff --git a/src/layout/components/lay-panel/index.vue b/src/layout/components/lay-panel/index.vue index c0c5cc4f0..ba25bc206 100644 --- a/src/layout/components/lay-panel/index.vue +++ b/src/layout/components/lay-panel/index.vue @@ -4,7 +4,7 @@ import { emitter } from "@/utils/mitt"; import { onClickOutside } from "@vueuse/core"; import { ref, computed, onMounted, onBeforeUnmount } from "vue"; import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange"; -import CloseIcon from "@iconify-icons/ep/close"; +import CloseIcon from "~icons/ep/close"; const target = ref(null); const show = ref(false); diff --git a/src/layout/components/lay-search/components/SearchFooter.vue b/src/layout/components/lay-search/components/SearchFooter.vue index d8350d0fe..17be4c8be 100644 --- a/src/layout/components/lay-search/components/SearchFooter.vue +++ b/src/layout/components/lay-search/components/SearchFooter.vue @@ -3,8 +3,8 @@ import { useI18n } from "vue-i18n"; import { useNav } from "@/layout/hooks/useNav"; import MdiKeyboardEsc from "@/assets/svg/keyboard_esc.svg?component"; import EnterOutlined from "@/assets/svg/enter_outlined.svg?component"; -import ArrowUpLine from "@iconify-icons/ri/arrow-up-line"; -import ArrowDownLine from "@iconify-icons/ri/arrow-down-line"; +import ArrowUpLine from "~icons/ri/arrow-up-line"; +import ArrowDownLine from "~icons/ri/arrow-down-line"; withDefaults(defineProps<{ total: number }>(), { total: 0 diff --git a/src/layout/components/lay-search/components/SearchHistoryItem.vue b/src/layout/components/lay-search/components/SearchHistoryItem.vue index 0ee9f1940..9ea67ae30 100644 --- a/src/layout/components/lay-search/components/SearchHistoryItem.vue +++ b/src/layout/components/lay-search/components/SearchHistoryItem.vue @@ -2,8 +2,8 @@ import type { optionsItem } from "../types"; import { transformI18n } from "@/plugins/i18n"; import { useRenderIcon } from "@/components/ReIcon/src/hooks"; -import StarIcon from "@iconify-icons/ep/star"; -import CloseIcon from "@iconify-icons/ep/close"; +import StarIcon from "~icons/ep/star"; +import CloseIcon from "~icons/ep/close"; interface Props { item: optionsItem; diff --git a/src/layout/components/lay-search/components/SearchModal.vue b/src/layout/components/lay-search/components/SearchModal.vue index f6993f6f6..f40ee34d1 100644 --- a/src/layout/components/lay-search/components/SearchModal.vue +++ b/src/layout/components/lay-search/components/SearchModal.vue @@ -13,7 +13,7 @@ import { ref, computed, shallowRef, watch } from "vue"; import { useDebounceFn, onKeyStroke } from "@vueuse/core"; import { usePermissionStoreHook } from "@/store/modules/permission"; import { cloneDeep, isAllEmpty, storageLocal } from "@pureadmin/utils"; -import SearchIcon from "@iconify-icons/ri/search-line"; +import SearchIcon from "~icons/ri/search-line"; interface Props { /** 弹窗显隐 */ diff --git a/src/layout/components/lay-setting/index.vue b/src/layout/components/lay-setting/index.vue index db931ba4d..72ae4304e 100644 --- a/src/layout/components/lay-setting/index.vue +++ b/src/layout/components/lay-setting/index.vue @@ -19,9 +19,9 @@ import Segmented, { type OptionsType } from "@/components/ReSegmented"; import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange"; import { useDark, useGlobal, debounce, isNumber } from "@pureadmin/utils"; -import Check from "@iconify-icons/ep/check"; -import LeftArrow from "@iconify-icons/ri/arrow-left-s-line"; -import RightArrow from "@iconify-icons/ri/arrow-right-s-line"; +import Check from "~icons/ep/check"; +import LeftArrow from "~icons/ri/arrow-left-s-line"; +import RightArrow from "~icons/ri/arrow-right-s-line"; import DayIcon from "@/assets/svg/day.svg?component"; import DarkIcon from "@/assets/svg/dark.svg?component"; import SystemIcon from "@/assets/svg/system.svg?component"; diff --git a/src/layout/components/lay-sidebar/NavHorizontal.vue b/src/layout/components/lay-sidebar/NavHorizontal.vue index 6a2cd87ec..e94a8bdba 100644 --- a/src/layout/components/lay-sidebar/NavHorizontal.vue +++ b/src/layout/components/lay-sidebar/NavHorizontal.vue @@ -12,10 +12,10 @@ import LaySidebarItem from "../lay-sidebar/components/SidebarItem.vue"; import LaySidebarFullScreen from "../lay-sidebar/components/SidebarFullScreen.vue"; import GlobalizationIcon from "@/assets/svg/globalization.svg?component"; -import AccountSettingsIcon from "@iconify-icons/ri/user-settings-line"; -import LogoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line"; -import Setting from "@iconify-icons/ri/settings-3-line"; -import Check from "@iconify-icons/ep/check"; +import AccountSettingsIcon from "~icons/ri/user-settings-line"; +import LogoutCircleRLine from "~icons/ri/logout-circle-r-line"; +import Setting from "~icons/ri/settings-3-line"; +import Check from "~icons/ep/check"; const menuRef = ref(); const showLogo = ref( diff --git a/src/layout/components/lay-sidebar/NavMix.vue b/src/layout/components/lay-sidebar/NavMix.vue index c1562f2bc..ba0576d8c 100644 --- a/src/layout/components/lay-sidebar/NavMix.vue +++ b/src/layout/components/lay-sidebar/NavMix.vue @@ -13,10 +13,10 @@ import LaySidebarExtraIcon from "../lay-sidebar/components/SidebarExtraIcon.vue" import LaySidebarFullScreen from "../lay-sidebar/components/SidebarFullScreen.vue"; import GlobalizationIcon from "@/assets/svg/globalization.svg?component"; -import AccountSettingsIcon from "@iconify-icons/ri/user-settings-line"; -import LogoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line"; -import Setting from "@iconify-icons/ri/settings-3-line"; -import Check from "@iconify-icons/ep/check"; +import AccountSettingsIcon from "~icons/ri/user-settings-line"; +import LogoutCircleRLine from "~icons/ri/logout-circle-r-line"; +import Setting from "~icons/ri/settings-3-line"; +import Check from "~icons/ep/check"; const menuRef = ref(); const defaultActive = ref(null); diff --git a/src/layout/components/lay-sidebar/components/SidebarCenterCollapse.vue b/src/layout/components/lay-sidebar/components/SidebarCenterCollapse.vue index 0f41fcca4..8aba97f3d 100644 --- a/src/layout/components/lay-sidebar/components/SidebarCenterCollapse.vue +++ b/src/layout/components/lay-sidebar/components/SidebarCenterCollapse.vue @@ -4,7 +4,7 @@ import { useI18n } from "vue-i18n"; import { useGlobal } from "@pureadmin/utils"; import { useNav } from "@/layout/hooks/useNav"; -import ArrowLeft from "@iconify-icons/ri/arrow-left-double-fill"; +import ArrowLeft from "~icons/ri/arrow-left-double-fill"; interface Props { isActive: boolean; diff --git a/src/layout/components/lay-sidebar/components/SidebarItem.vue b/src/layout/components/lay-sidebar/components/SidebarItem.vue index edf4e8fe8..c87a70dbf 100644 --- a/src/layout/components/lay-sidebar/components/SidebarItem.vue +++ b/src/layout/components/lay-sidebar/components/SidebarItem.vue @@ -17,10 +17,10 @@ import { useAttrs } from "vue"; -import ArrowUp from "@iconify-icons/ep/arrow-up-bold"; -import EpArrowDown from "@iconify-icons/ep/arrow-down-bold"; -import ArrowLeft from "@iconify-icons/ep/arrow-left-bold"; -import ArrowRight from "@iconify-icons/ep/arrow-right-bold"; +import ArrowUp from "~icons/ep/arrow-up-bold"; +import EpArrowDown from "~icons/ep/arrow-down-bold"; +import ArrowLeft from "~icons/ep/arrow-left-bold"; +import ArrowRight from "~icons/ep/arrow-right-bold"; const attrs = useAttrs(); const { layout, isCollapse, tooltipEffect, getDivStyle } = useNav(); diff --git a/src/layout/components/lay-sidebar/components/SidebarLeftCollapse.vue b/src/layout/components/lay-sidebar/components/SidebarLeftCollapse.vue index c007d3b8a..32ea646f1 100644 --- a/src/layout/components/lay-sidebar/components/SidebarLeftCollapse.vue +++ b/src/layout/components/lay-sidebar/components/SidebarLeftCollapse.vue @@ -4,7 +4,7 @@ import { useI18n } from "vue-i18n"; import { useGlobal } from "@pureadmin/utils"; import { useNav } from "@/layout/hooks/useNav"; -import MenuFold from "@iconify-icons/ri/menu-fold-fill"; +import MenuFold from "~icons/ri/menu-fold-fill"; interface Props { isActive: boolean; diff --git a/src/layout/components/lay-sidebar/components/SidebarTopCollapse.vue b/src/layout/components/lay-sidebar/components/SidebarTopCollapse.vue index c2f1b5ad0..0461b1636 100644 --- a/src/layout/components/lay-sidebar/components/SidebarTopCollapse.vue +++ b/src/layout/components/lay-sidebar/components/SidebarTopCollapse.vue @@ -1,7 +1,7 @@ diff --git a/src/views/table/edit/demo1/index.vue b/src/views/table/edit/demo1/index.vue index 6beea0cd3..4b5096bfc 100644 --- a/src/views/table/edit/demo1/index.vue +++ b/src/views/table/edit/demo1/index.vue @@ -2,8 +2,8 @@ import { useColumns } from "./columns"; import Empty from "../empty.svg?component"; import { useRenderIcon } from "@/components/ReIcon/src/hooks"; -import AddFill from "@iconify-icons/ep/plus"; -import Delete from "@iconify-icons/ep/delete"; +import AddFill from "~icons/ep/plus"; +import Delete from "~icons/ep/delete"; const { columns, dataList, onAdd, onDel } = useColumns(); diff --git a/src/views/table/edit/demo3/columns.tsx b/src/views/table/edit/demo3/columns.tsx index 776941663..62cda66ae 100644 --- a/src/views/table/edit/demo3/columns.tsx +++ b/src/views/table/edit/demo3/columns.tsx @@ -1,8 +1,8 @@ import { ref, computed } from "vue"; import { tableDataEdit } from "../data"; -import EditPen from "@iconify-icons/ep/edit-pen"; -import Check from "@iconify-icons/ep/check"; +import EditPen from "~icons/ep/edit-pen"; +import Check from "~icons/ep/check"; export function useColumns() { const editMap = ref({}); diff --git a/src/views/welcome/components/table/columns.tsx b/src/views/welcome/components/table/columns.tsx index c6d0b8e0c..e56ad7e70 100644 --- a/src/views/welcome/components/table/columns.tsx +++ b/src/views/welcome/components/table/columns.tsx @@ -2,8 +2,8 @@ import { tableData } from "../../data"; import { delay } from "@pureadmin/utils"; import { ref, onMounted, reactive } from "vue"; import type { PaginationProps } from "@pureadmin/table"; -import ThumbUp from "@iconify-icons/ri/thumb-up-line"; -import Hearts from "@iconify-icons/ri/hearts-line"; +import ThumbUp from "~icons/ri/thumb-up-line"; +import Hearts from "~icons/ri/hearts-line"; import Empty from "./empty.svg?component"; export function useColumns() { diff --git a/src/views/welcome/data.ts b/src/views/welcome/data.ts index 3bb502116..86ce0f7cf 100644 --- a/src/views/welcome/data.ts +++ b/src/views/welcome/data.ts @@ -1,8 +1,8 @@ import { dayjs, cloneDeep, getRandomIntBetween } from "./utils"; -import GroupLine from "@iconify-icons/ri/group-line"; -import Question from "@iconify-icons/ri/question-answer-line"; -import CheckLine from "@iconify-icons/ri/chat-check-line"; -import Smile from "@iconify-icons/ri/star-smile-line"; +import GroupLine from "~icons/ri/group-line"; +import Question from "~icons/ri/question-answer-line"; +import CheckLine from "~icons/ri/chat-check-line"; +import Smile from "~icons/ri/star-smile-line"; const days = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"]; diff --git a/tsconfig.json b/tsconfig.json index fdbd4a668..4cbdd3992 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -35,6 +35,7 @@ "vite/client", "element-plus/global", "@pureadmin/table/volar", + "unplugin-icons/types/vue", "@pureadmin/descriptions/volar" ] }, diff --git a/types/router.d.ts b/types/router.d.ts index a03ba0e35..c0f3eaf07 100644 --- a/types/router.d.ts +++ b/types/router.d.ts @@ -15,9 +15,9 @@ declare global { /** 菜单名称（兼容国际化、非国际化，如何用国际化的写法就必须在根目录的`locales`文件夹下对应添加） `必填` */ title: string; /** 菜单图标 `可选` */ - icon?: string | FunctionalComponent | IconifyIcon; + icon?: string | FunctionalComponent; /** 菜单名称右侧的额外图标 */ - extraIcon?: string | FunctionalComponent | IconifyIcon; + extraIcon?: string | FunctionalComponent; /** 是否在菜单中显示（默认`true`）`可选` */ showLink?: boolean; /** 是否显示父级菜单 `可选` */ @@ -91,7 +91,7 @@ declare global { /** 菜单名称（兼容国际化、非国际化，如何用国际化的写法就必须在根目录的`locales`文件夹下对应添加）`必填` */ title: string; /** 菜单图标 `可选` */ - icon?: string | FunctionalComponent | IconifyIcon; + icon?: string | FunctionalComponent; /** 是否在菜单中显示（默认`true`）`可选` */ showLink?: boolean; /** 菜单升序排序，值越高排的越后（只针对顶级路由）`可选` */ @@ -104,5 +104,6 @@ declare global { // https://router.vuejs.org/zh/guide/advanced/meta.html#typescript declare module "vue-router" { + // eslint-disable-next-line @typescript-eslint/no-empty-object-type interface RouteMeta extends CustomizeRouteMeta {} } From 2d06dc1dd883d7dd882f6c121650c3bcc9653433 Mon Sep 17 00:00:00 2001 From: xiaoxian521 <1923740402@qq.com> Date: Thu, 20 Mar 2025 15:57:13 +0800 Subject: [PATCH 2/7] chore: update --- package.json | 1 + pnpm-lock.yaml | 3 + src/components/ReIcon/index.ts | 8 ++ src/components/ReIcon/src/hooks.ts | 9 +- .../ReIcon/src/iconifyIconOffline.ts | 46 +++++--- src/components/ReIcon/src/offlineIcon.ts | 109 ++++++++++++------ src/router/modules/able.ts | 2 +- src/router/modules/about.ts | 2 +- src/router/modules/board.ts | 2 +- src/router/modules/chatai.ts | 2 +- src/router/modules/codemirror.ts | 2 +- src/router/modules/components.ts | 2 +- src/router/modules/editor.ts | 2 +- src/router/modules/error.ts | 2 +- src/router/modules/flowchart.ts | 2 +- src/router/modules/form.ts | 2 +- src/router/modules/formdesign.ts | 2 +- src/router/modules/ganttastic.ts | 2 +- src/router/modules/guide.ts | 2 +- src/router/modules/home.ts | 2 +- src/router/modules/list.ts | 4 +- src/router/modules/markdown.ts | 2 +- src/router/modules/mind.ts | 2 +- src/router/modules/nested.ts | 2 +- src/router/modules/ppt.ts | 2 +- src/router/modules/result.ts | 2 +- src/router/modules/table.ts | 2 +- src/router/modules/vueflow.ts | 2 +- 28 files changed, 147 insertions(+), 75 deletions(-) diff --git a/package.json b/package.json index 4fafc7ca4..51383d83e 100644 --- a/package.json +++ b/package.json @@ -121,6 +121,7 @@ "@faker-js/faker": "^9.5.0", "@iconify-json/ep": "^1.2.2", "@iconify-json/ri": "^1.2.5", + "@iconify/utils": "^2.3.0", "@iconify/vue": "4.2.0", "@intlify/unplugin-vue-i18n": "^6.0.3", "@types/codemirror": "^5.60.15", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a984d5d28..c8401903f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -225,6 +225,9 @@ importers: '@iconify-json/ri': specifier: ^1.2.5 version: 1.2.5 + '@iconify/utils': + specifier: ^2.3.0 + version: 2.3.0 '@iconify/vue': specifier: 4.2.0 version: 4.2.0(vue@3.5.13(typescript@5.7.3)) diff --git a/src/components/ReIcon/index.ts b/src/components/ReIcon/index.ts index 9f77a1eb6..358c33acc 100644 --- a/src/components/ReIcon/index.ts +++ b/src/components/ReIcon/index.ts @@ -13,3 +13,11 @@ const IconSelect = iconSelect; const FontIcon = fontIcon; export { IconifyIconOffline, IconifyIconOnline, IconSelect, FontIcon }; + +export function getIconOffline(icon: string) { + if (icon && icon.includes("/")) { + return icon.replace("/", ":"); + } else { + return icon; + } +} diff --git a/src/components/ReIcon/src/hooks.ts b/src/components/ReIcon/src/hooks.ts index 300a25deb..68bb810a0 100644 --- a/src/components/ReIcon/src/hooks.ts +++ b/src/components/ReIcon/src/hooks.ts @@ -1,6 +1,11 @@ import type { iconType } from "./types"; import { h, defineComponent, type Component } from "vue"; -import { IconifyIconOnline, IconifyIconOffline, FontIcon } from "../index"; +import { + FontIcon, + getIconOffline, + IconifyIconOnline, + IconifyIconOffline +} from "../index"; /** * 支持 `iconfont`、自定义 `svg` 以及 `iconify` 中所有的图标 @@ -52,7 +57,7 @@ export function useRenderIcon(icon: any, attrs?: iconType): Component { const IconifyIcon = icon && icon.includes(":") ? IconifyIconOnline : IconifyIconOffline; return h(IconifyIcon, { - icon: icon, + icon: getIconOffline(icon), ...attrs }); } diff --git a/src/components/ReIcon/src/iconifyIconOffline.ts b/src/components/ReIcon/src/iconifyIconOffline.ts index feaf4e2d0..e5782b2ec 100644 --- a/src/components/ReIcon/src/iconifyIconOffline.ts +++ b/src/components/ReIcon/src/iconifyIconOffline.ts @@ -1,27 +1,47 @@ import { h, defineComponent } from "vue"; +import { Icon as IconifyIcon, addIcon } from "@iconify/vue/dist/offline"; // Iconify Icon在Vue里本地使用（用于内网环境） export default defineComponent({ name: "IconifyIconOffline", + components: { IconifyIcon }, props: { icon: { default: null } }, render() { + if (typeof this.icon === "object") addIcon(this.icon, this.icon); const attrs = this.$attrs; - return h( - this.icon, - { - "aria-hidden": false, - style: attrs?.style - ? Object.assign(attrs.style, { outline: "none" }) - : { outline: "none" }, - ...attrs - }, - { - default: () => [] - } - ); + if (typeof this.icon === "string") { + return h( + IconifyIcon, + { + icon: this.icon, + "aria-hidden": false, + style: attrs?.style + ? Object.assign(attrs.style, { outline: "none" }) + : { outline: "none" }, + ...attrs + }, + { + default: () => [] + } + ); + } else { + return h( + this.icon, + { + "aria-hidden": false, + style: attrs?.style + ? Object.assign(attrs.style, { outline: "none" }) + : { outline: "none" }, + ...attrs + }, + { + default: () => [] + } + ); + } } }); diff --git a/src/components/ReIcon/src/offlineIcon.ts b/src/components/ReIcon/src/offlineIcon.ts index 70d2625e7..d7197032c 100644 --- a/src/components/ReIcon/src/offlineIcon.ts +++ b/src/components/ReIcon/src/offlineIcon.ts @@ -1,8 +1,9 @@ -// // 这里存放本地图标，在 src/layout/index.vue 文件中加载，避免在首启动加载 -// import { addIcon } from "@iconify/vue/dist/offline"; +// 这里存放本地图标，在 src/layout/index.vue 文件中加载，避免在首启动加载 +import { getIcons } from "@iconify/utils"; +import { addCollection } from "@iconify/vue/dist/offline"; -// // 本地菜单图标，后端在路由的 icon 中返回对应的图标字符串并且前端在此处使用 addIcon 添加即可渲染菜单图标 -// // @iconify-json/ep +// 本地菜单图标，后端在路由的 icon 中返回对应的图标字符串并且前端在此处使用 addIcon 添加即可渲染菜单图标 +// @iconify-json/ep // import Menu from "~icons/ep/menu"; // import Edit from "~icons/ep/edit"; // import SetUp from "~icons/ep/set-up"; @@ -11,15 +12,22 @@ // import Lollipop from "~icons/ep/lollipop"; // import Histogram from "~icons/ep/histogram"; // import HomeFilled from "~icons/ep/home-filled"; -// addIcon("ep:menu", Menu); -// addIcon("ep:edit", Edit); -// addIcon("ep:set-up", SetUp); -// addIcon("ep:guide", Guide); -// addIcon("ep:monitor", Monitor); -// addIcon("ep:lollipop", Lollipop); -// addIcon("ep:histogram", Histogram); -// addIcon("ep:home-filled", HomeFilled); -// // @iconify-json/ri + +import { icons as iconsEp } from "@iconify-json/ep"; +addCollection( + getIcons(iconsEp, [ + "menu", + "edit", + "set-up", + "guide", + "monitor", + "lollipop", + "histogram", + "home-filled" + ]) +); + +// @iconify-json/ri // import Tag from "~icons/ri/bookmark-2-line"; // import Ppt from "~icons/ri/file-ppt-2-line"; // import Card from "~icons/ri/bank-card-line"; @@ -44,27 +52,54 @@ // import InformationLine from "~icons/ri/information-line"; // import TerminalWindowLine from "~icons/ri/terminal-window-line"; // import CheckboxCircleLine from "~icons/ri/checkbox-circle-line"; -// addIcon("ri:bookmark-2-line", Tag); -// addIcon("ri:file-ppt-2-line", Ppt); -// addIcon("ri:bank-card-line", Card); -// addIcon("ri:admin-fill", Role); -// addIcon("ri:file-info-line", Info); -// addIcon("ri:git-branch-line", Dept); -// addIcon("ri:links-fill", Links); -// addIcon("ri:table-line", Table); -// addIcon("ri:search-line", Search); -// addIcon("ri:admin-line", FlUser); -// addIcon("ri:settings-3-line", Setting); -// addIcon("ri:mind-map", MindMap); -// addIcon("ri:bar-chart-horizontal-line", BarChart); -// addIcon("ri:window-line", LoginLog); -// addIcon("ri:file-search-line", SystemLog); -// addIcon("ri:artboard-line", Artboard); -// addIcon("ri:list-check", ListCheck); -// addIcon("ri:ubuntu-fill", UbuntuFill); -// addIcon("ri:user-voice-line", OnlineUser); -// addIcon("ri:edit-box-line", EditBoxLine); -// addIcon("ri:history-fill", OperationLog); -// addIcon("ri:information-line", InformationLine); -// addIcon("ri:terminal-window-line", TerminalWindowLine); -// addIcon("ri:checkbox-circle-line", CheckboxCircleLine); +// import ChatSearchLine from "~icons/ri/chat-search-line"; +import { icons as iconsRi } from "@iconify-json/ri"; +addCollection( + getIcons(iconsRi, [ + "bookmark-2-line", + "file-ppt-2-line", + "bank-card-line", + "admin-fill", + "file-info-line", + "git-branch-line", + "table-line", + "links-fill", + "search-line", + "admin-line", + "settings-3-line", + "mind-map", + "bar-chart-horizontal-line", + "window-line", + "artboard-line", + "file-search-line", + "list-check", + "ubuntu-fill", + "user-voice-line", + "edit-box-line", + "history-fill", + "information-line", + "terminal-window-line", + "checkbox-circle-line", + "chat-search-line", + "code-box-line", + "markdown-line" + ]) +); + +// { +// "prefix": "ri", +// "icons": { +// "bookmark-2-line": { +// "body": "" +// }, +// "information-line": { +// "body": "" +// }, +// "search-line": { +// "body": "" +// } +// }, +// "lastModified": 1734422306, +// "width": 24, +// "height": 24 +// } diff --git a/src/router/modules/able.ts b/src/router/modules/able.ts index dc4868632..5f205a325 100644 --- a/src/router/modules/able.ts +++ b/src/router/modules/able.ts @@ -5,7 +5,7 @@ export default { path: "/able", redirect: "/able/watermark", meta: { - icon: "ri:ubuntu-fill", + icon: "ri/ubuntu-fill", title: $t("menus.pureAble"), rank: able }, diff --git a/src/router/modules/about.ts b/src/router/modules/about.ts index 47a5555ba..d9975ba8f 100644 --- a/src/router/modules/about.ts +++ b/src/router/modules/about.ts @@ -5,7 +5,7 @@ export default { path: "/about", redirect: "/about/index", meta: { - icon: "ri:file-info-line", + icon: "ri/file-info-line", title: $t("menus.pureAbout"), rank: about }, diff --git a/src/router/modules/board.ts b/src/router/modules/board.ts index afac34675..799e1f3df 100644 --- a/src/router/modules/board.ts +++ b/src/router/modules/board.ts @@ -6,7 +6,7 @@ export default { path: "/board", redirect: "/board/index", meta: { - icon: "ri:artboard-line", + icon: "ri/artboard-line", title: $t("menus.pureBoard"), rank: board }, diff --git a/src/router/modules/chatai.ts b/src/router/modules/chatai.ts index 10180f73c..8a8f97fc5 100644 --- a/src/router/modules/chatai.ts +++ b/src/router/modules/chatai.ts @@ -4,7 +4,7 @@ export default { path: "/chatai", redirect: "/chatai/index", meta: { - icon: "ri:chat-search-line", + icon: "ri/chat-search-line", title: "chat-ai", rank: chatai }, diff --git a/src/router/modules/codemirror.ts b/src/router/modules/codemirror.ts index 752c881e4..4831b7365 100644 --- a/src/router/modules/codemirror.ts +++ b/src/router/modules/codemirror.ts @@ -5,7 +5,7 @@ export default { path: "/codemirror", redirect: "/codemirror/index", meta: { - icon: "ri:code-box-line", + icon: "ri/code-box-line", title: $t("menus.pureCodeMirror"), rank: codemirror }, diff --git a/src/router/modules/components.ts b/src/router/modules/components.ts index 386072d79..b8854d9b7 100644 --- a/src/router/modules/components.ts +++ b/src/router/modules/components.ts @@ -5,7 +5,7 @@ export default { path: "/components", redirect: "/components/dialog", meta: { - icon: "ep:menu", + icon: "ep/menu", title: $t("menus.pureComponents"), rank: components }, diff --git a/src/router/modules/editor.ts b/src/router/modules/editor.ts index a5e1ec9fc..d29c806bb 100644 --- a/src/router/modules/editor.ts +++ b/src/router/modules/editor.ts @@ -5,7 +5,7 @@ export default { path: "/editor", redirect: "/editor/index", meta: { - icon: "ep:edit", + icon: "ep/edit", title: $t("menus.pureEditor"), rank: editor }, diff --git a/src/router/modules/error.ts b/src/router/modules/error.ts index 359a7631a..bd6d7053b 100644 --- a/src/router/modules/error.ts +++ b/src/router/modules/error.ts @@ -5,7 +5,7 @@ export default { path: "/error", redirect: "/error/403", meta: { - icon: "ri:information-line", + icon: "ri/information-line", // showLink: false, title: $t("menus.pureAbnormal"), rank: error diff --git a/src/router/modules/flowchart.ts b/src/router/modules/flowchart.ts index 05dd31bfb..c1463aade 100644 --- a/src/router/modules/flowchart.ts +++ b/src/router/modules/flowchart.ts @@ -5,7 +5,7 @@ export default { path: "/flow-chart", redirect: "/flow-chart/index", meta: { - icon: "ep:set-up", + icon: "ep/set-up", title: $t("menus.pureFlowChart"), rank: flowchart }, diff --git a/src/router/modules/form.ts b/src/router/modules/form.ts index 4f5afa785..758664f59 100644 --- a/src/router/modules/form.ts +++ b/src/router/modules/form.ts @@ -5,7 +5,7 @@ export default { path: "/form", redirect: "/form/index", meta: { - icon: "ri:edit-box-line", + icon: "ri/edit-box-line", title: $t("menus.pureSchemaForm"), rank: form }, diff --git a/src/router/modules/formdesign.ts b/src/router/modules/formdesign.ts index d6891279d..271f3d286 100644 --- a/src/router/modules/formdesign.ts +++ b/src/router/modules/formdesign.ts @@ -6,7 +6,7 @@ export default { path: "/form-design", redirect: "/form-design/index", meta: { - icon: "ri:terminal-window-line", + icon: "ri/terminal-window-line", title: $t("menus.pureFormDesign"), rank: formdesign }, diff --git a/src/router/modules/ganttastic.ts b/src/router/modules/ganttastic.ts index a9bcd70a1..b925462c5 100644 --- a/src/router/modules/ganttastic.ts +++ b/src/router/modules/ganttastic.ts @@ -5,7 +5,7 @@ export default { path: "/ganttastic", redirect: "/ganttastic/index", meta: { - icon: "ri:bar-chart-horizontal-line", + icon: "ri/bar-chart-horizontal-line", title: $t("menus.pureGanttastic"), rank: ganttastic }, diff --git a/src/router/modules/guide.ts b/src/router/modules/guide.ts index cf2bf7fd6..be3bba2a8 100644 --- a/src/router/modules/guide.ts +++ b/src/router/modules/guide.ts @@ -5,7 +5,7 @@ export default { path: "/guide", redirect: "/guide/index", meta: { - icon: "ep:guide", + icon: "ep/guide", title: $t("menus.pureGuide"), rank: guide }, diff --git a/src/router/modules/home.ts b/src/router/modules/home.ts index 8bdc39f92..330127143 100644 --- a/src/router/modules/home.ts +++ b/src/router/modules/home.ts @@ -9,7 +9,7 @@ export default { component: Layout, redirect: "/welcome", meta: { - icon: "ep:home-filled", + icon: "ep/home-filled", title: $t("menus.pureHome"), rank: home }, diff --git a/src/router/modules/list.ts b/src/router/modules/list.ts index 659584608..190dafa43 100644 --- a/src/router/modules/list.ts +++ b/src/router/modules/list.ts @@ -5,7 +5,7 @@ export default { path: "/list", redirect: "/list/card", meta: { - icon: "ri:list-check", + icon: "ri/list-check", title: $t("menus.pureList"), rank: list }, @@ -15,7 +15,7 @@ export default { name: "CardList", component: () => import("@/views/list/card/index.vue"), meta: { - icon: "ri:bank-card-line", + icon: "ri/bank-card-line", title: $t("menus.pureCardList"), showParent: true } diff --git a/src/router/modules/markdown.ts b/src/router/modules/markdown.ts index bff0c2b60..7fc04f7db 100644 --- a/src/router/modules/markdown.ts +++ b/src/router/modules/markdown.ts @@ -5,7 +5,7 @@ export default { path: "/markdown", redirect: "/markdown/index", meta: { - icon: "ri:markdown-line", + icon: "ri/markdown-line", title: $t("menus.pureMarkdown"), rank: markdown }, diff --git a/src/router/modules/mind.ts b/src/router/modules/mind.ts index 49109c704..3308b89b1 100644 --- a/src/router/modules/mind.ts +++ b/src/router/modules/mind.ts @@ -6,7 +6,7 @@ export default { path: "/mind-map", redirect: "/mind-map/index", meta: { - icon: "ri:mind-map", + icon: "ri/mind-map", title: $t("menus.pureMindMap"), rank: mind }, diff --git a/src/router/modules/nested.ts b/src/router/modules/nested.ts index bc42f4623..67c63260b 100644 --- a/src/router/modules/nested.ts +++ b/src/router/modules/nested.ts @@ -6,7 +6,7 @@ export default { redirect: "/nested/menu1/menu1-1", meta: { title: $t("menus.pureMenus"), - icon: "ep:histogram", + icon: "ep/histogram", rank: nested }, children: [ diff --git a/src/router/modules/ppt.ts b/src/router/modules/ppt.ts index 4d7f9fea3..d4f32ac1a 100644 --- a/src/router/modules/ppt.ts +++ b/src/router/modules/ppt.ts @@ -5,7 +5,7 @@ export default { path: "/ppt", redirect: "/ppt/index", meta: { - icon: "ri:file-ppt-2-line", + icon: "ri/file-ppt-2-line", title: "PPT", rank: ppt }, diff --git a/src/router/modules/result.ts b/src/router/modules/result.ts index 4e894c164..356558868 100644 --- a/src/router/modules/result.ts +++ b/src/router/modules/result.ts @@ -5,7 +5,7 @@ export default { path: "/result", redirect: "/result/success", meta: { - icon: "ri:checkbox-circle-line", + icon: "ri/checkbox-circle-line", title: $t("menus.pureResult"), rank: result }, diff --git a/src/router/modules/table.ts b/src/router/modules/table.ts index b7752c985..23ba2487d 100644 --- a/src/router/modules/table.ts +++ b/src/router/modules/table.ts @@ -5,7 +5,7 @@ export default { path: "/table", redirect: "/table/index", meta: { - icon: "ri:table-line", + icon: "ri/table-line", title: $t("menus.pureTable"), rank: table }, diff --git a/src/router/modules/vueflow.ts b/src/router/modules/vueflow.ts index 02f3892fd..50e430c65 100644 --- a/src/router/modules/vueflow.ts +++ b/src/router/modules/vueflow.ts @@ -4,7 +4,7 @@ export default { path: "/vue-flow", redirect: "/vue-flow/index", meta: { - icon: "ep:set-up", + icon: "ep/set-up", title: "vue-flow", rank: vueflow }, From 6ab64a99062c9c764835a897dd3515f03429585d Mon Sep 17 00:00:00 2001 From: xiaoxian521 <1923740402@qq.com> Date: Sat, 22 Mar 2025 13:26:02 +0800 Subject: [PATCH 3/7] chore: update --- src/components/ReIcon/src/hooks.ts | 9 ++------- src/components/ReIcon/src/iconifyIconOffline.ts | 3 ++- src/views/login/components/LoginPhone.vue | 3 ++- src/views/login/components/LoginRegist.vue | 3 ++- src/views/login/components/LoginUpdate.vue | 3 ++- src/views/login/index.vue | 3 ++- 6 files changed, 12 insertions(+), 12 deletions(-) diff --git a/src/components/ReIcon/src/hooks.ts b/src/components/ReIcon/src/hooks.ts index 68bb810a0..adaac65af 100644 --- a/src/components/ReIcon/src/hooks.ts +++ b/src/components/ReIcon/src/hooks.ts @@ -1,11 +1,6 @@ import type { iconType } from "./types"; import { h, defineComponent, type Component } from "vue"; -import { - FontIcon, - getIconOffline, - IconifyIconOnline, - IconifyIconOffline -} from "../index"; +import { FontIcon, IconifyIconOnline, IconifyIconOffline } from "../index"; /** * 支持 `iconfont`、自定义 `svg` 以及 `iconify` 中所有的图标 @@ -57,7 +52,7 @@ export function useRenderIcon(icon: any, attrs?: iconType): Component { const IconifyIcon = icon && icon.includes(":") ? IconifyIconOnline : IconifyIconOffline; return h(IconifyIcon, { - icon: getIconOffline(icon), + icon, ...attrs }); } diff --git a/src/components/ReIcon/src/iconifyIconOffline.ts b/src/components/ReIcon/src/iconifyIconOffline.ts index e5782b2ec..d902a6611 100644 --- a/src/components/ReIcon/src/iconifyIconOffline.ts +++ b/src/components/ReIcon/src/iconifyIconOffline.ts @@ -1,4 +1,5 @@ import { h, defineComponent } from "vue"; +import { getIconOffline } from "../index"; import { Icon as IconifyIcon, addIcon } from "@iconify/vue/dist/offline"; // Iconify Icon在Vue里本地使用（用于内网环境） @@ -17,7 +18,7 @@ export default defineComponent({ return h( IconifyIcon, { - icon: this.icon, + icon: getIconOffline(this.icon), "aria-hidden": false, style: attrs?.style ? Object.assign(attrs.style, { outline: "none" }) diff --git a/src/views/login/components/LoginPhone.vue b/src/views/login/components/LoginPhone.vue index ded9251ab..6247704bd 100644 --- a/src/views/login/components/LoginPhone.vue +++ b/src/views/login/components/LoginPhone.vue @@ -10,6 +10,7 @@ import { useVerifyCode } from "../utils/verifyCode"; import { useUserStoreHook } from "@/store/modules/user"; import { useRenderIcon } from "@/components/ReIcon/src/hooks"; import Iphone from "~icons/ep/iphone"; +import Keyhole from "~icons/ri/shield-keyhole-line"; const { t } = useI18n(); const loading = ref(false); @@ -64,7 +65,7 @@ function onBack() { v-model="ruleForm.verifyCode" clearable :placeholder="t('login.pureSmsVerifyCode')" - :prefix-icon="useRenderIcon('ri:shield-keyhole-line')" + :prefix-icon="useRenderIcon(Keyhole)" /> { v-model="ruleForm.verifyCode" clearable :placeholder="t('login.pureVerifyCode')" - :prefix-icon="useRenderIcon('ri:shield-keyhole-line')" + :prefix-icon="useRenderIcon(Keyhole)" >