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

one-step-admin · Jan 17, 2024 · 4bccda4 · 4bccda4
1 parent 66d9e31
commit 4bccda4
Show file tree

Hide file tree

Showing 26 changed files with 80 additions and 131 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-app-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-main-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/iconify/index.json b/src/iconify/index.json
diff --git a/src/menu/index.ts b/src/menu/index.ts
@@ -3,7 +3,7 @@ import WindowExample from './modules/window.example'
 const menu = [
   {
     title: '演示',
-    icon: 'uim:box',
+    icon: 'i-uim:box',
     children: [
       WindowExample,
     ],

diff --git a/src/menu/modules/window.example.ts b/src/menu/modules/window.example.ts
@@ -1,6 +1,6 @@
 const menus: Menu.recordRaw = {
   title: '窗口功能',
-  icon: 'ri:window-2-line',
+  icon: 'i-ri:window-2-line',
   children: [
     {
       title: '打开新窗口',

diff --git a/src/views/components/AppSetting/index.vue b/src/views/components/AppSetting/index.vue
@@ -120,7 +120,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.switchMainMenuAndOpenWindow" :disabled="['single'].includes(settingsStore.settings.menu.menuMode)" />
@@ -129,7 +129,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" />
@@ -165,7 +165,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" />
@@ -180,7 +180,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" />
@@ -247,7 +247,7 @@ function handleCopy() {
     </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/views/components/Copyright/index.vue b/src/views/components/Copyright/index.vue
@@ -12,7 +12,7 @@ const settingsStore = useSettingsStore()
 <template>
   <footer v-if="route.meta.copyright ?? 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/views/components/Dashboard/Empty/index.vue b/src/views/components/Dashboard/Empty/index.vue
@@ -64,7 +64,7 @@ function open(url: string) {
         </div>
       </template>
       <HButton outline @click="open('https://one-step-admin.gitee.io')">
-        <SvgIcon name="ri:file-text-line" />
+        <SvgIcon name="i-ri:file-text-line" />
         开发文档
       </HButton>
       <HDropdownMenu
@@ -76,9 +76,9 @@ function open(url: string) {
         ]"
       >
         <HButton class="ml-2">
-          <SvgIcon name="ri:code-s-slash-line" />
+          <SvgIcon name="i-ri:code-s-slash-line" />
           代码仓库
-          <SvgIcon name="ep:arrow-down" />
+          <SvgIcon name="i-ep:arrow-down" />
         </HButton>
       </HDropdownMenu>
     </PageHeader>

diff --git a/src/views/components/Search/index.vue b/src/views/components/Search/index.vue
@@ -191,7 +191,7 @@ function handleOpen(windowName: string) {
             <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">
@@ -211,7 +211,7 @@ function handleOpen(windowName: string) {
                     </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>
@@ -223,16 +223,16 @@ function handleOpen(windowName: string) {
                   <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/views/components/Topbar/ColorScheme/index.vue b/src/views/components/Topbar/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/views/components/Topbar/Fullscreen/index.vue b/src/views/components/Topbar/Fullscreen/index.vue
@@ -10,6 +10,6 @@ const { isFullscreen, toggle } = useFullscreen()
 
 <template>
   <span 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/views/components/Topbar/NavSearch/index.vue b/src/views/components/Topbar/NavSearch/index.vue
@@ -12,7 +12,7 @@ const settingsStore = useSettingsStore()
 <template>
   <span class="flex-center cursor-pointer px-2 py-1" @click="eventBus.emit('global-search-toggle')">
     <span 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/views/components/Topbar/rightSide.vue b/src/views/components/Topbar/rightSide.vue
@@ -38,9 +38,9 @@ watch(() => userStore.avatar, () => {
     >
       <div 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/views/index.vue b/src/views/index.vue
@@ -57,7 +57,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>