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 },