feat: 增加图片支持，整站图标改用 unocss icon 方式使用，方便在内网环境使用

fantastic-admin · Jan 17, 2024 · 52b25d1 · 52b25d1
1 parent 42da962
commit 52b25d1
Show file tree

Hide file tree

Showing 28 changed files with 81 additions and 82 deletions.
diff --git a/scripts/generate.icons.ts b/scripts/generate.icons.ts
@@ -1,5 +1,6 @@
 import path from 'node:path'
 import process from 'node:process'
+import { exec } from 'node:child_process'
 import fs from 'fs-extra'
 import inquirer from 'inquirer'
 import { lookupCollection, lookupCollections } from '@iconify/json'
@@ -74,6 +75,8 @@ async function generateIcons() {
       path.resolve(process.cwd(), 'src/iconify/data.json'),
       collectionsMeta,
     )
+
+    exec('eslint src/iconify/data.json src/iconify/index.json --cache --fix')
   })
 }
 

diff --git a/src/components/FileUpload/index.vue b/src/components/FileUpload/index.vue
@@ -73,7 +73,7 @@ const onSuccess: UploadProps['onSuccess'] = (res, file, fileList) => {
     drag
   >
     <div class="slot">
-      <SvgIcon name="ep:upload-filled" class="el-icon--upload" />
+      <SvgIcon name="i-ep:upload-filled" class="el-icon--upload" />
       <div class="el-upload__text">
         将文件拖到此处，或<em>点击上传</em>
       </div>

diff --git a/src/components/ImageUpload/index.vue b/src/components/ImageUpload/index.vue
@@ -103,7 +103,7 @@ const onSuccess: UploadProps['onSuccess'] = (res) => {
       <ElImage v-if="url === ''" :src="url === '' ? placeholder : url" :style="`width:${width}px;height:${height}px;`" fit="fill">
         <template #error>
           <div class="image-slot" :style="`width:${width}px;height:${height}px;`">
-            <SvgIcon name="ep:plus" class="icon" />
+            <SvgIcon name="i-ep:plus" class="icon" />
           </div>
         </template>
       </ElImage>
@@ -112,10 +112,10 @@ const onSuccess: UploadProps['onSuccess'] = (res) => {
         <div class="mask">
           <div class="actions">
             <span title="预览" @click.stop="preview">
-              <SvgIcon name="ep:zoom-in" class="icon" />
+              <SvgIcon name="i-ep:zoom-in" class="icon" />
             </span>
             <span title="移除" @click.stop="remove">
-              <SvgIcon name="ep:delete" class="icon" />
+              <SvgIcon name="i-ep:delete" class="icon" />
             </span>
           </div>
         </div>

diff --git a/src/components/ImagesUpload/index.vue b/src/components/ImagesUpload/index.vue
@@ -107,16 +107,16 @@ const onSuccess: UploadProps['onSuccess'] = (res) => {
       <div class="mask">
         <div class="actions">
           <span title="预览" @click="preview(index)">
-            <SvgIcon name="ep:zoom-in" class="icon" />
+            <SvgIcon name="i-ep:zoom-in" class="icon" />
           </span>
           <span title="移除" @click="remove(index)">
-            <SvgIcon name="ep:delete" class="icon" />
+            <SvgIcon name="i-ep:delete" class="icon" />
           </span>
           <span v-show="url.length > 1" title="左移" :class="{ disabled: index === 0 }" @click="move(index, 'left')">
-            <SvgIcon name="ep:back" class="icon" />
+            <SvgIcon name="i-ep:back" class="icon" />
           </span>
           <span v-show="url.length > 1" title="右移" :class="{ disabled: index === url.length - 1 }" @click="move(index, 'right')">
-            <SvgIcon name="ep:right" class="icon" />
+            <SvgIcon name="i-ep:right" class="icon" />
           </span>
         </div>
       </div>
@@ -135,7 +135,7 @@ const onSuccess: UploadProps['onSuccess'] = (res) => {
       class="images-upload"
     >
       <div class="image-slot" :style="`width:${width}px;height:${height}px;`">
-        <SvgIcon name="ep:plus" class="icon" />
+        <SvgIcon name="i-ep:plus" class="icon" />
       </div>
       <div v-show="uploadData.progress.percent" class="progress" :style="`width:${width}px;height:${height}px;`">
         <ElImage :src="uploadData.progress.preview" :style="`width:${width}px;height:${height}px;`" fit="fill" />

diff --git a/src/components/PageMain/index.vue b/src/components/PageMain/index.vue
@@ -41,7 +41,7 @@ function unCollaspe() {
       <slot />
     </div>
     <div v-if="isCollaspe" class="collaspe absolute bottom-0 w-full cursor-pointer from-transparent to-[var(--g-container-bg)] bg-gradient-to-b pb-2 pt-10 text-center" @click="unCollaspe">
-      <SvgIcon name="ep:arrow-down" class="text-xl op-30 transition-opacity hover:op-100" />
+      <SvgIcon name="i-ep:arrow-down" class="text-xl op-30 transition-opacity hover:op-100" />
     </div>
   </div>
 </template>
diff --git a/src/components/SearchBar/index.vue b/src/components/SearchBar/index.vue
@@ -40,7 +40,7 @@ function toggle() {
     <slot :fold="fold" :toggle="toggle" />
     <div v-if="showToggle" class="absolute bottom-0 left-0 w-full translate-y-1/2 text-center">
       <button class="h-5 inline-flex cursor-pointer select-none items-center border-size-0 rounded bg-[var(--g-bg)] px-2 text-xs font-medium outline-none" @click="toggle">
-        <SvgIcon :name="fold ? 'ep:caret-bottom' : 'ep:caret-top' " />
+        <SvgIcon :name="fold ? 'i-ep:caret-bottom' : 'i-ep:caret-top' " />
       </button>
     </div>
   </div>

diff --git a/src/components/SvgIcon/index.vue b/src/components/SvgIcon/index.vue
@@ -1,42 +1,30 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue'
-import { isOfflineUse } from '@/iconify/index.json'
 
 defineOptions({
   name: 'SvgIcon',
 })
 
 const props = defineProps<{
   name: string
-  async?: boolean
   flip?: 'horizontal' | 'vertical' | 'both'
   rotate?: number
   color?: string
   size?: string | number
 }>()
 
 const outputType = computed(() => {
-  if (props.name.indexOf('i-') === 0) {
-    return (props.async || isOfflineUse) ? 'svg' : 'css'
+  if (/^https?:\/\//.test(props.name)) {
+    return 'img'
   }
-  else if (props.name.includes(':')) {
-    return 'svg'
+  else if (/i-[^:]+:[^:]+/.test(props.name)) {
+    return 'unocss'
   }
-  else {
-    return 'custom'
-  }
-})
-
-const outputName = computed(() => {
-  if (props.name.indexOf('i-') === 0) {
-    let conversionName = props.name
-    if (props.async || isOfflineUse) {
-      conversionName = conversionName.replace('i-', '')
-    }
-    return conversionName
+  else if (props.name.includes(':')) {
+    return 'iconify'
   }
   else {
-    return props.name
+    return 'svg'
   }
 })
 
@@ -68,11 +56,11 @@ const style = computed(() => {
 </script>
 
 <template>
-  <i class="relative h-[1em] w-[1em] flex-inline items-center justify-center fill-current leading-[1em]" :style="style">
-    <i v-if="outputType === 'css'" :class="outputName" />
-    <Icon v-else-if="outputType === 'svg'" :icon="outputName" />
-    <svg v-else h-1em w-1em aria-hidden="true">
-      <use :xlink:href="`#icon-${outputName}`" />
+  <i class="relative h-[1em] w-[1em] flex-inline items-center justify-center fill-current leading-[1em]" :class="{ [name]: outputType === 'unocss' }" :style="style">
+    <Icon v-if="outputType === 'iconify'" :icon="name" />
+    <svg v-else-if="outputType === 'svg'" class="h-[1em] w-[1em]" aria-hidden="true">
+      <use :xlink:href="`#icon-${name}`" />
     </svg>
+    <img v-else-if="outputType === 'img'" :src="name" class="h-[1em] w-[1em]">
   </i>
 </template>
diff --git a/src/components/Trend/index.vue b/src/components/Trend/index.vue
@@ -33,6 +33,6 @@ const isUp = computed(() => {
     <span v-if="prefix" class="prefix">{{ prefix }}</span>
     <span class="text">{{ value }}</span>
     <span v-if="suffix" class="suffix">{{ suffix }}</span>
-    <SvgIcon name="ep:caret-top" :rotate="isUp ? 0 : 180" class="ml-1 transition" />
+    <SvgIcon name="i-ep:caret-top" :rotate="isUp ? 0 : 180" class="ml-1 transition" />
   </div>
 </template>
diff --git a/src/iconify/data.json b/src/iconify/data.json
diff --git a/src/layouts/components/AppSetting/index.vue b/src/layouts/components/AppSetting/index.vue
@@ -126,7 +126,7 @@ function handleCopy() {
       <div class="label">
         主导航切换跳转
         <HTooltip text="开启该功能后，切换主导航时，页面自动跳转至该主导航下，次导航里第一个导航">
-          <SvgIcon name="ri:question-line" />
+          <SvgIcon name="i-ri:question-line" />
         </HTooltip>
       </div>
       <HToggle v-model="settingsStore.settings.menu.switchMainMenuAndPageJump" :disabled="['single'].includes(settingsStore.settings.menu.menuMode)" />
@@ -135,7 +135,7 @@ function handleCopy() {
       <div class="label">
         次导航保持展开一个
         <HTooltip text="开启该功能后，次导航只保持单个菜单的展开">
-          <SvgIcon name="ri:question-line" />
+          <SvgIcon name="i-ri:question-line" />
         </HTooltip>
       </div>
       <HToggle v-model="settingsStore.settings.menu.subMenuUniqueOpened" />
@@ -186,7 +186,7 @@ function handleCopy() {
       <div class="label">
         导航搜索
         <HTooltip text="对导航进行快捷搜索">
-          <SvgIcon name="ri:question-line" />
+          <SvgIcon name="i-ri:question-line" />
         </HTooltip>
       </div>
       <HToggle v-model="settingsStore.settings.toolbar.navSearch" />
@@ -201,7 +201,7 @@ function handleCopy() {
       <div class="label">
         页面刷新
         <HTooltip text="使用框架内提供的刷新功能进行页面刷新">
-          <SvgIcon name="ri:question-line" />
+          <SvgIcon name="i-ri:question-line" />
         </HTooltip>
       </div>
       <HToggle v-model="settingsStore.settings.toolbar.pageReload" />
@@ -210,7 +210,7 @@ function handleCopy() {
       <div class="label">
         颜色主题
         <HTooltip text="开启后可在明亮/暗黑模式中切换">
-          <SvgIcon name="ri:question-line" />
+          <SvgIcon name="i-ri:question-line" />
         </HTooltip>
       </div>
       <HToggle v-model="settingsStore.settings.toolbar.colorScheme" />
@@ -273,7 +273,7 @@ function handleCopy() {
       <div class="label">
         是否启用
         <HTooltip text="该功能开启时，登录成功默认进入主页，反之则默认进入导航栏里第一个导航页面">
-          <SvgIcon name="ri:question-line" />
+          <SvgIcon name="i-ri:question-line" />
         </HTooltip>
       </div>
       <HToggle v-model="settingsStore.settings.home.enable" />
@@ -282,7 +282,7 @@ function handleCopy() {
       <div class="label">
         主页名称
         <HTooltip text="开启国际化时，该设置无效">
-          <SvgIcon name="ri:question-line" />
+          <SvgIcon name="i-ri:question-line" />
         </HTooltip>
       </div>
       <HInput v-model="settingsStore.settings.home.title" />
@@ -300,7 +300,7 @@ function handleCopy() {
       <div class="label">
         载入进度条
         <HTooltip text="该功能开启时，跳转路由会看到页面顶部有进度条">
-          <SvgIcon name="ri:question-line" />
+          <SvgIcon name="i-ri:question-line" />
         </HTooltip>
       </div>
       <HToggle v-model="settingsStore.settings.app.enableProgress" />
@@ -309,14 +309,14 @@ function handleCopy() {
       <div class="label">
         动态标题
         <HTooltip text="该功能开启时，页面标题会显示当前路由标题，格式为“页面标题 - 网站名称”；关闭时则显示网站名称，网站名称在项目根目录下 .env.* 文件里配置">
-          <SvgIcon name="ri:question-line" />
+          <SvgIcon name="i-ri:question-line" />
         </HTooltip>
       </div>
       <HToggle v-model="settingsStore.settings.app.enableDynamicTitle" />
     </div>
     <template v-if="isSupported" #footer>
       <HButton block @click="handleCopy">
-        <SvgIcon name="ep:document-copy" />
+        <SvgIcon name="i-ep:document-copy" />
         复制配置
       </HButton>
     </template>

diff --git a/src/layouts/components/BackTop/index.vue b/src/layouts/components/BackTop/index.vue
@@ -38,7 +38,7 @@ function handleClick() {
   <Teleport to="body">
     <Transition v-bind="transitionClass">
       <div v-if="scrollTop && scrollTop >= 200" class="fixed bottom-4 right-4 z-1000 h-12 w-12 flex cursor-pointer items-center justify-center rounded-full bg-white shadow-lg ring-1 ring-stone-3 ring-inset dark:bg-dark hover:bg-stone-1 dark:ring-stone-7 dark:hover:bg-dark/50" @click="handleClick">
-        <SvgIcon name="icon-park-outline:to-top-one" :size="24" />
+        <SvgIcon name="i-icon-park-outline:to-top-one" :size="24" />
       </div>
     </Transition>
   </Teleport>

diff --git a/src/layouts/components/Copyright/index.vue b/src/layouts/components/Copyright/index.vue
@@ -11,7 +11,7 @@ const settingsStore = useSettingsStore()
 <template>
   <footer v-if="settingsStore.settings.copyright.enable" class="copyright">
     <span>Copyright</span>
-    <SvgIcon name="ri:copyright-line" :size="18" />
+    <SvgIcon name="i-ri:copyright-line" :size="18" />
     <span v-if="settingsStore.settings.copyright.dates">{{ settingsStore.settings.copyright.dates }}</span>
     <template v-if="settingsStore.settings.copyright.company">
       <a v-if="settingsStore.settings.copyright.website" :href="settingsStore.settings.copyright.website" target="_blank" rel="noopener">{{ settingsStore.settings.copyright.company }}</a>

diff --git a/src/layouts/components/Search/index.vue b/src/layouts/components/Search/index.vue
@@ -285,7 +285,7 @@ function pageJump(path: listTypes['path'], link: listTypes['link']) {
             <DialogPanel class="relative h-full max-h-4/5 w-full flex flex-col text-left sm:max-w-2xl">
               <div class="flex flex-col overflow-y-auto rounded-xl bg-white shadow-xl dark:bg-stone-8">
                 <div class="flex items-center px-4 py-3" border-b="~ solid stone-2 dark:stone-7">
-                  <SvgIcon name="ep:search" :size="18" class="text-stone-5" />
+                  <SvgIcon name="i-ep:search" :size="18" class="text-stone-5" />
                   <input ref="searchInputRef" v-model="searchInput" placeholder="搜索页面，支持标题、URL模糊查询" class="w-full border-0 rounded-md bg-transparent px-3 text-base text-dark dark:text-white focus:outline-none placeholder-stone-4 dark:placeholder-stone-5" @keydown.esc="eventBus.emit('global-search-toggle')" @keydown.up.prevent="keyUp" @keydown.down.prevent="keyDown" @keydown.enter.prevent="keyEnter">
                 </div>
                 <DialogDescription class="relative m-0 of-y-hidden">
@@ -305,7 +305,7 @@ function pageJump(path: listTypes['path'], link: listTypes['link']) {
                     </template>
                     <template v-else>
                       <div flex="center col" py-6 text-stone-5>
-                        <SvgIcon name="tabler:mood-empty" :size="40" />
+                        <SvgIcon name="i-tabler:mood-empty" :size="40" />
                         <p m-2 text-base>
                           没有找到你想要的
                         </p>
@@ -317,16 +317,16 @@ function pageJump(path: listTypes['path'], link: listTypes['link']) {
                   <div class="flex gap-8">
                     <div class="inline-flex items-center gap-1 text-xs">
                       <HKbd>
-                        <SvgIcon name="ion:md-return-left" :size="14" />
+                        <SvgIcon name="i-ion:md-return-left" :size="14" />
                       </HKbd>
                       <span>访问</span>
                     </div>
                     <div class="inline-flex items-center gap-1 text-xs">
                       <HKbd>
-                        <SvgIcon name="ant-design:caret-up-filled" :size="14" />
+                        <SvgIcon name="i-ant-design:caret-up-filled" :size="14" />
                       </HKbd>
                       <HKbd>
-                        <SvgIcon name="ant-design:caret-down-filled" :size="14" />
+                        <SvgIcon name="i-ant-design:caret-down-filled" :size="14" />
                       </HKbd>
                       <span>切换</span>
                     </div>

diff --git a/src/layouts/components/Topbar/Toolbar/ColorScheme/index.vue b/src/layouts/components/Topbar/Toolbar/ColorScheme/index.vue
@@ -38,6 +38,6 @@ function toggleColorScheme(event: MouseEvent) {
 
 <template>
   <span class="flex-center cursor-pointer px-2 py-1" @click="toggleColorScheme">
-    <SvgIcon :name="settingsStore.settings.app.colorScheme === 'light' ? 'ri:sun-line' : 'ri:moon-line'" />
+    <SvgIcon :name="settingsStore.settings.app.colorScheme === 'light' ? 'i-ri:sun-line' : 'i-ri:moon-line'" />
   </span>
 </template>
diff --git a/src/layouts/components/Topbar/Toolbar/Fullscreen/index.vue b/src/layouts/components/Topbar/Toolbar/Fullscreen/index.vue
@@ -13,6 +13,6 @@ const { isFullscreen, toggle } = useFullscreen()
 
 <template>
   <span v-if="settingsStore.mode === 'pc'" class="flex-center cursor-pointer px-2 py-1" @click="toggle">
-    <SvgIcon :name="isFullscreen ? 'ri:fullscreen-exit-line' : 'ri:fullscreen-line'" />
+    <SvgIcon :name="isFullscreen ? 'i-ri:fullscreen-exit-line' : 'i-ri:fullscreen-line'" />
   </span>
 </template>
diff --git a/src/layouts/components/Topbar/Toolbar/NavSearch/index.vue b/src/layouts/components/Topbar/Toolbar/NavSearch/index.vue
@@ -11,9 +11,9 @@ const settingsStore = useSettingsStore()
 
 <template>
   <span class="flex-center cursor-pointer px-2 py-1" @click="eventBus.emit('global-search-toggle')">
-    <SvgIcon v-if="settingsStore.mode === 'mobile'" name="ri:search-line" />
+    <SvgIcon v-if="settingsStore.mode === 'mobile'" name="i-ri:search-line" />
     <span v-else class="group inline-flex cursor-pointer items-center gap-1 whitespace-nowrap rounded-2 bg-stone-1 px-2 py-1.5 text-dark ring-stone-3 ring-inset transition dark:bg-stone-9 dark:text-white hover:ring-1 dark:ring-stone-7">
-      <SvgIcon name="ri:search-line" />
+      <SvgIcon name="i-ri:search-line" />
       <span class="text-sm text-stone-5 transition group-hover:text-dark dark:group-hover:text-white">搜索</span>
       <HKbd v-if="settingsStore.settings.navSearch.enableHotkeys" class="ml-2">{{ settingsStore.os === 'mac' ? '⌥' : 'Alt' }} S</HKbd>
     </span>

diff --git a/src/layouts/components/Topbar/Toolbar/PageReload/index.vue b/src/layouts/components/Topbar/Toolbar/PageReload/index.vue
@@ -8,6 +8,6 @@ const mainPage = useMainPage()
 
 <template>
   <span class="flex-center cursor-pointer px-2 py-1" @click="mainPage.reload()">
-    <SvgIcon name="iconoir:refresh-double" />
+    <SvgIcon name="i-iconoir:refresh-double" />
   </span>
 </template>
diff --git a/src/layouts/components/Topbar/Toolbar/rightSide.vue b/src/layouts/components/Topbar/Toolbar/rightSide.vue
@@ -45,9 +45,9 @@ watch(() => userStore.avatar, () => {
     >
       <div class="flex-center gap-1">
         <img v-if="userStore.avatar && !avatarError" :src="userStore.avatar" :onerror="() => (avatarError = true)" class="h-[24px] w-[24px] rounded-full">
-        <SvgIcon v-else name="carbon:user-avatar-filled-alt" :size="24" class="text-gray-400" />
+        <SvgIcon v-else name="i-carbon:user-avatar-filled-alt" :size="24" class="text-gray-400" />
         {{ userStore.account }}
-        <SvgIcon name="ep:caret-bottom" />
+        <SvgIcon name="i-ep:caret-bottom" />
       </div>
     </HDropdownMenu>
   </div>

diff --git a/src/layouts/components/views/link.vue b/src/layouts/components/views/link.vue
@@ -23,7 +23,7 @@ function open() {
     <Transition name="slide-right" mode="out-in" appear>
       <PageMain :key="route.meta.link" class="flex flex-1 flex-col justify-center">
         <div class="flex flex-col items-center">
-          <SvgIcon name="icon-park-twotone:planet" :size="120" class="text-ui-primary/80" />
+          <SvgIcon name="i-icon-park-twotone:planet" :size="120" class="text-ui-primary/80" />
           <div class="my-2 text-xl text-dark dark:text-white">
             是否访问此链接
           </div>
@@ -35,7 +35,7 @@ function open() {
             </HTooltip>
           </div>
           <HButton class="my-4" @click="open">
-            <SvgIcon name="ri:external-link-fill" />
+            <SvgIcon name="i-ri:external-link-fill" />
             立即访问
           </HButton>
         </div>

diff --git a/src/layouts/index.vue b/src/layouts/index.vue
@@ -101,7 +101,7 @@ const enableAppSetting = import.meta.env.VITE_APP_SETTING === 'true'
     <HotkeysIntro />
     <template v-if="enableAppSetting">
       <div class="app-setting" @click="eventBus.emit('global-app-setting-toggle')">
-        <SvgIcon name="uiw:setting-o" class="icon" />
+        <SvgIcon name="i-uiw:setting-o" class="icon" />
       </div>
       <AppSetting />
     </template>

diff --git a/src/layouts/ui-kit/HDialog.vue b/src/layouts/ui-kit/HDialog.vue
@@ -65,7 +65,7 @@ function close() {
                 <DialogTitle m-0 text-lg text-dark dark:text-white>
                   {{ title }}
                 </DialogTitle>
-                <SvgIcon name="carbon:close" cursor-pointer @click="close" />
+                <SvgIcon name="i-carbon:close" cursor-pointer @click="close" />
               </div>
               <DialogDescription m-0 overflow-y-auto p-4>
                 <slot />