From 811f820644053606e50624c2f184f9669f3eff7e Mon Sep 17 00:00:00 2001 From: Soybean Date: Fri, 23 Sep 2022 00:15:00 +0800 Subject: [PATCH] =?UTF-8?q?feat(projects):=20refactor=20icon=20system,=20u?= =?UTF-8?q?nify=20icon=20usage=20[=E9=87=8D=E6=9E=84=E5=9B=BE=E6=A0=87?= =?UTF-8?q?=E7=B3=BB=E7=BB=9F=EF=BC=8C=E7=BB=9F=E4=B8=80=E5=9B=BE=E6=A0=87?= =?UTF-8?q?=E7=94=A8=E6=B3=95]?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env | 7 +++ build/plugins/index.ts | 2 +- build/plugins/unplugin.ts | 57 ++++++++++-------- mock/model/route.ts | 34 ++++++++--- src/assets/{svg => svg-icon}/activity.svg | 0 src/assets/{svg => svg-icon}/at-sign.svg | 0 src/assets/{svg => svg-icon}/avatar.svg | 0 src/assets/{svg => svg-icon}/banner.svg | 0 src/assets/{svg => svg-icon}/cast.svg | 0 src/assets/{svg => svg-icon}/chrome.svg | 0 src/assets/{svg => svg-icon}/copy.svg | 0 src/assets/{svg => svg-icon}/custom-icon.svg | 0 src/assets/{svg => svg-icon}/empty-data.svg | 0 src/assets/{svg => svg-icon}/heart.svg | 0 src/assets/{svg => svg-icon}/logo-fill.svg | 0 src/assets/{svg => svg-icon}/logo.svg | 0 .../{svg => svg-icon}/network-error.svg | 0 src/assets/svg-icon/no-icon.svg | 1 + .../{svg => svg-icon}/no-permission.svg | 0 src/assets/{svg => svg-icon}/not-found.svg | 0 .../{svg => svg-icon}/service-error.svg | 0 src/assets/{svg => svg-icon}/wind.svg | 0 .../business/LoadingEmptyWrapper.vue | 4 +- src/components/common/ExceptionBase.vue | 6 +- src/components/common/SystemLogo.vue | 4 +- src/components/custom/IconSelect.vue | 19 +++--- src/components/custom/SvgIcon.vue | 49 +++++++++++---- src/composables/icon.ts | 60 +++++++++++++++++++ src/composables/index.ts | 1 + .../GlobalHeader/components/MessageList.vue | 5 +- .../GlobalHeader/components/UserAvatar.vue | 9 +-- .../GlobalSearch/components/SearchResult.vue | 3 +- .../TabDetail/components/ContextMenu.vue | 15 ++--- .../GlobalTab/components/TabDetail/index.vue | 7 ++- src/router/modules/document.ts | 26 +++++++- src/typings/env.d.ts | 8 +++ src/typings/route.d.ts | 6 +- src/utils/common/icon.ts | 39 ------------ src/utils/common/index.ts | 1 - src/utils/router/menu.ts | 25 +++++--- src/views/component/button/index.vue | 3 +- .../analysis/components/DataCard/index.vue | 3 +- .../components/WorkbenchHeader/index.vue | 2 +- .../components/ShortcutsCard.vue | 4 +- .../components/TechnologyCard.vue | 4 +- .../components/WorkbenchMain/index.vue | 4 +- src/views/plugin/icon/index.vue | 18 +++--- 47 files changed, 270 insertions(+), 156 deletions(-) rename src/assets/{svg => svg-icon}/activity.svg (100%) rename src/assets/{svg => svg-icon}/at-sign.svg (100%) rename src/assets/{svg => svg-icon}/avatar.svg (100%) rename src/assets/{svg => svg-icon}/banner.svg (100%) rename src/assets/{svg => svg-icon}/cast.svg (100%) rename src/assets/{svg => svg-icon}/chrome.svg (100%) rename src/assets/{svg => svg-icon}/copy.svg (100%) rename src/assets/{svg => svg-icon}/custom-icon.svg (100%) rename src/assets/{svg => svg-icon}/empty-data.svg (100%) rename src/assets/{svg => svg-icon}/heart.svg (100%) rename src/assets/{svg => svg-icon}/logo-fill.svg (100%) rename src/assets/{svg => svg-icon}/logo.svg (100%) rename src/assets/{svg => svg-icon}/network-error.svg (100%) create mode 100644 src/assets/svg-icon/no-icon.svg rename src/assets/{svg => svg-icon}/no-permission.svg (100%) rename src/assets/{svg => svg-icon}/not-found.svg (100%) rename src/assets/{svg => svg-icon}/service-error.svg (100%) rename src/assets/{svg => svg-icon}/wind.svg (100%) create mode 100644 src/composables/icon.ts delete mode 100644 src/utils/common/icon.ts diff --git a/.env b/.env index 9daec0b6..94de8bfa 100644 --- a/.env +++ b/.env @@ -11,3 +11,10 @@ VITE_AUTH_ROUTE_MODE=dynamic # 路由首页(根路由重定向), 用于static模式的权限路由，dynamic模式取决于后端返回的路由首页 VITE_ROUTE_HOME_PATH=/dashboard/analysis + +# iconify图标作为组件的前缀 +VITE_ICON_PREFFIX=icon + +# 本地SVG图标作为组件的前缀, 请注意一定要包含 VITE_ICON_PREFFIX +# 格式 {VITE_ICON_PREFFIX}-{本地图标集合名称} +VITE_ICON_LOCAL_PREFFIX=icon-local diff --git a/build/plugins/index.ts b/build/plugins/index.ts index 73540167..5ca6534c 100644 --- a/build/plugins/index.ts +++ b/build/plugins/index.ts @@ -15,7 +15,7 @@ import compress from './compress'; * @param viteEnv - 环境变量配置 */ export function setupVitePlugins(viteEnv: ImportMetaEnv): (PluginOption | PluginOption[])[] { - const plugins = [vue(), vueJsx(), VitePWA(), html(viteEnv), ...unplugin, unocss(), mock, progress()]; + const plugins = [vue(), vueJsx(), VitePWA(), html(viteEnv), ...unplugin(viteEnv), unocss(), mock, progress()]; if (viteEnv.VITE_VISUALIZER === 'Y') { plugins.push(visualizer as PluginOption); diff --git a/build/plugins/unplugin.ts b/build/plugins/unplugin.ts index 70044431..a054f579 100644 --- a/build/plugins/unplugin.ts +++ b/build/plugins/unplugin.ts @@ -7,29 +7,38 @@ import { FileSystemIconLoader } from 'unplugin-icons/loaders'; import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'; import { getSrcPath } from '../utils'; -const srcPath = getSrcPath(); +export default function unplugin(viteEnv: ImportMetaEnv) { + const { VITE_ICON_PREFFIX, VITE_ICON_LOCAL_PREFFIX } = viteEnv; -const customIconPath = `${srcPath}/assets/svg`; + const srcPath = getSrcPath(); + const localIconPath = `${srcPath}/assets/svg-icon`; -export default [ - VueMacros(), - Icons({ - compiler: 'vue3', - customCollections: { - custom: FileSystemIconLoader(customIconPath) - }, - scale: 1, - defaultClass: 'inline-block' - }), - Components({ - dts: 'src/typings/components.d.ts', - types: [{ from: 'vue-router', names: ['RouterLink', 'RouterView'] }], - resolvers: [NaiveUiResolver(), IconsResolver({ customCollections: ['custom'], componentPrefix: 'icon' })] - }), - createSvgIconsPlugin({ - iconDirs: [customIconPath], - symbolId: 'icon-custom-[dir]-[name]', - inject: 'body-last', - customDomId: '__CUSTOM_SVG_ICON__' - }) -]; + /** 本地svg图标集合名称 */ + const collectionName = VITE_ICON_LOCAL_PREFFIX.replace(`${VITE_ICON_PREFFIX}-`, ''); + + return [ + VueMacros(), + Icons({ + compiler: 'vue3', + customCollections: { + [collectionName]: FileSystemIconLoader(localIconPath) + }, + scale: 1, + defaultClass: 'inline-block' + }), + Components({ + dts: 'src/typings/components.d.ts', + types: [{ from: 'vue-router', names: ['RouterLink', 'RouterView'] }], + resolvers: [ + NaiveUiResolver(), + IconsResolver({ customCollections: [collectionName], componentPrefix: VITE_ICON_PREFFIX }) + ] + }), + createSvgIconsPlugin({ + iconDirs: [localIconPath], + symbolId: `${VITE_ICON_LOCAL_PREFFIX}-[dir]-[name]`, + inject: 'body-last', + customDomId: '__SVG_ICON_LOCAL__' + }) + ]; +} diff --git a/mock/model/route.ts b/mock/model/route.ts index 4d6943fc..2a678361 100644 --- a/mock/model/route.ts +++ b/mock/model/route.ts @@ -74,7 +74,7 @@ export const routeModel: Record = { meta: { title: '项目文档', requiresAuth: true, - customIcon: 'logo' + localIcon: 'logo' } }, { @@ -83,7 +83,7 @@ export const routeModel: Record = { meta: { title: '项目文档(外链)', requiresAuth: true, - customIcon: 'logo', + localIcon: 'logo', href: 'https://docs.soybean.pro/' } } @@ -250,7 +250,7 @@ export const routeModel: Record = { meta: { title: '图标', requiresAuth: true, - customIcon: 'custom-icon' + localIcon: 'custom-icon' } }, { @@ -555,7 +555,7 @@ export const routeModel: Record = { meta: { title: 'vue文档', requiresAuth: true, - icon: 'mdi:vuejs' + icon: 'logos:vue' } }, { @@ -565,16 +565,36 @@ export const routeModel: Record = { meta: { title: 'vite文档', requiresAuth: true, - icon: 'simple-icons:vite' + icon: 'logos:vitejs' + } + }, + { + name: 'document_naive', + path: '/document/naive', + component: 'self', + meta: { + title: 'naive文档', + requiresAuth: true, + icon: 'logos:naiveui' } }, { name: 'document_project', path: '/document/project', + component: 'self', + meta: { + title: '项目文档', + requiresAuth: true, + localIcon: 'logo' + } + }, + { + name: 'document_project-link', + path: '/document/project-link', meta: { title: '项目文档(外链)', requiresAuth: true, - icon: 'mdi:file-link-outline', + localIcon: 'logo', href: 'https://docs.soybean.pro/' } } @@ -741,7 +761,7 @@ export const routeModel: Record = { meta: { title: '图标', requiresAuth: true, - customIcon: 'custom-icon' + localIcon: 'custom-icon' } }, { diff --git a/src/assets/svg/activity.svg b/src/assets/svg-icon/activity.svg similarity index 100% rename from src/assets/svg/activity.svg rename to src/assets/svg-icon/activity.svg diff --git a/src/assets/svg/at-sign.svg b/src/assets/svg-icon/at-sign.svg similarity index 100% rename from src/assets/svg/at-sign.svg rename to src/assets/svg-icon/at-sign.svg diff --git a/src/assets/svg/avatar.svg b/src/assets/svg-icon/avatar.svg similarity index 100% rename from src/assets/svg/avatar.svg rename to src/assets/svg-icon/avatar.svg diff --git a/src/assets/svg/banner.svg b/src/assets/svg-icon/banner.svg similarity index 100% rename from src/assets/svg/banner.svg rename to src/assets/svg-icon/banner.svg diff --git a/src/assets/svg/cast.svg b/src/assets/svg-icon/cast.svg similarity index 100% rename from src/assets/svg/cast.svg rename to src/assets/svg-icon/cast.svg diff --git a/src/assets/svg/chrome.svg b/src/assets/svg-icon/chrome.svg similarity index 100% rename from src/assets/svg/chrome.svg rename to src/assets/svg-icon/chrome.svg diff --git a/src/assets/svg/copy.svg b/src/assets/svg-icon/copy.svg similarity index 100% rename from src/assets/svg/copy.svg rename to src/assets/svg-icon/copy.svg diff --git a/src/assets/svg/custom-icon.svg b/src/assets/svg-icon/custom-icon.svg similarity index 100% rename from src/assets/svg/custom-icon.svg rename to src/assets/svg-icon/custom-icon.svg diff --git a/src/assets/svg/empty-data.svg b/src/assets/svg-icon/empty-data.svg similarity index 100% rename from src/assets/svg/empty-data.svg rename to src/assets/svg-icon/empty-data.svg diff --git a/src/assets/svg/heart.svg b/src/assets/svg-icon/heart.svg similarity index 100% rename from src/assets/svg/heart.svg rename to src/assets/svg-icon/heart.svg diff --git a/src/assets/svg/logo-fill.svg b/src/assets/svg-icon/logo-fill.svg similarity index 100% rename from src/assets/svg/logo-fill.svg rename to src/assets/svg-icon/logo-fill.svg diff --git a/src/assets/svg/logo.svg b/src/assets/svg-icon/logo.svg similarity index 100% rename from src/assets/svg/logo.svg rename to src/assets/svg-icon/logo.svg diff --git a/src/assets/svg/network-error.svg b/src/assets/svg-icon/network-error.svg similarity index 100% rename from src/assets/svg/network-error.svg rename to src/assets/svg-icon/network-error.svg diff --git a/src/assets/svg-icon/no-icon.svg b/src/assets/svg-icon/no-icon.svg new file mode 100644 index 00000000..734de7f9 --- /dev/null +++ b/src/assets/svg-icon/no-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/svg/no-permission.svg b/src/assets/svg-icon/no-permission.svg similarity index 100% rename from src/assets/svg/no-permission.svg rename to src/assets/svg-icon/no-permission.svg diff --git a/src/assets/svg/not-found.svg b/src/assets/svg-icon/not-found.svg similarity index 100% rename from src/assets/svg/not-found.svg rename to src/assets/svg-icon/not-found.svg diff --git a/src/assets/svg/service-error.svg b/src/assets/svg-icon/service-error.svg similarity index 100% rename from src/assets/svg/service-error.svg rename to src/assets/svg-icon/service-error.svg diff --git a/src/assets/svg/wind.svg b/src/assets/svg-icon/wind.svg similarity index 100% rename from src/assets/svg/wind.svg rename to src/assets/svg-icon/wind.svg diff --git a/src/components/business/LoadingEmptyWrapper.vue b/src/components/business/LoadingEmptyWrapper.vue index f170d0ce..b331ae26 100644 --- a/src/components/business/LoadingEmptyWrapper.vue +++ b/src/components/business/LoadingEmptyWrapper.vue @@ -7,13 +7,13 @@
- +

{{ emptyDesc }}

- +

{{ networkErrorDesc }}

diff --git a/src/components/common/ExceptionBase.vue b/src/components/common/ExceptionBase.vue index f7a7e728..5cc3cd3d 100644 --- a/src/components/common/ExceptionBase.vue +++ b/src/components/common/ExceptionBase.vue @@ -1,9 +1,9 @@