From 46766a54fb4ae94bcc6ed06c880e4f1f92061dc9 Mon Sep 17 00:00:00 2001
From: chansee97 <chen.dev@foxmail.com>
Date: Mon, 10 Jun 2024 12:38:27 +0800
Subject: [PATCH] feat: local svg icon

---
 src/components/common/IconSelect.vue     | 50 +++++++++++++++++++++---
 src/components/common/NovaIcon.vue       | 32 ++++++++++++---
 src/layouts/components/header/Search.vue |  4 +-
 src/router/routes.static.ts              |  2 +-
 src/store/router/index.ts                |  7 +++-
 src/utils/icon.ts                        | 30 +++++++++++++-
 6 files changed, 108 insertions(+), 17 deletions(-)

diff --git a/src/components/common/IconSelect.vue b/src/components/common/IconSelect.vue
index 8629859..a98a07d 100644
--- a/src/components/common/IconSelect.vue
+++ b/src/components/common/IconSelect.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { mapEntries } from 'radash'
+
 interface Props {
   disabled?: boolean
 }
@@ -38,10 +40,34 @@ async function fetchIconAllList(nameList: string[]) {
   })
 }
 
-const iconLists = shallowRef<IconList[]>([])
+// 获取所有本地图标
+function generateLocalIconList() {
+  const localSvgList = import.meta.glob('@/assets/svg-icons/*.svg', {
+    query: '?raw',
+    import: 'default',
+    eager: true,
+  })
+
+  function getSvgName(path: string) {
+    const regex = /\/([^/]+)\.svg$/
+    const match = path.match(regex)
+    if (match) {
+      const fileName = match[1]
+      return fileName
+    }
+    return path
+  }
+  return mapEntries(localSvgList, (key, value) => {
+    return [getSvgName(key), value]
+  })
+}
+
+const iconList = shallowRef<IconList[]>([])
+const LocalIconList = shallowRef({})
 
 onMounted(async () => {
-  iconLists.value = await fetchIconAllList(nameList)
+  iconList.value = await fetchIconAllList(nameList)
+  LocalIconList.value = generateLocalIconList()
 })
 
 // 当前tab
@@ -70,9 +96,9 @@ function handleSelectIconTag(icon: string) {
 const icons = computed(() => {
   const hasTag = !!currentTag.value
   if (hasTag)
-    return iconLists.value[currentTab.value]?.categories[currentTag.value]
+    return iconList.value[currentTab.value]?.categories[currentTag.value]
   else
-    return iconLists.value[currentTab.value].icons
+    return iconList.value[currentTab.value].icons
 })
 
 // 符合搜索条件的图标列表
@@ -119,7 +145,19 @@ function clearIcon() {
     </template>
 
     <n-tabs :value="currentTab" type="line" animated placement="left" @update:value="handleChangeTab">
-      <n-tab-pane v-for="(list, index) in iconLists" :key="list.prefix" :name="index" :tab="list.title">
+      <n-tab-pane name="local" tab="local">
+        <n-flex :size="2">
+          <n-el
+            v-for="(_icon, key) in LocalIconList" :key="key"
+            class="hover:(text-[var(--primary-color)] ring-1) ring-[var(--primary-color)] p-1 rounded flex-center"
+            :title="`local:${key}`"
+            @click="handleSelectIcon(`local:${key}`)"
+          >
+            <nova-icon :icon="`local:${key}`" :size="24" />
+          </n-el>
+        </n-flex>
+      </n-tab-pane>
+      <n-tab-pane v-for="(list, index) in iconList" :key="list.prefix" :name="index" :tab="list.title">
         <n-flex vertical>
           <n-flex size="small">
             <n-tag
@@ -136,7 +174,7 @@ function clearIcon() {
             :placeholder="$t('components.iconSelector.searchPlaceholder')"
           />
 
-          <div class="h-410px">
+          <div>
             <n-flex :size="2">
               <n-el
                 v-for="(icon) in visibleIcons" :key="icon"
diff --git a/src/components/common/NovaIcon.vue b/src/components/common/NovaIcon.vue
index 8fc1283..02cfcae 100644
--- a/src/components/common/NovaIcon.vue
+++ b/src/components/common/NovaIcon.vue
@@ -13,18 +13,40 @@ interface iconPorps {
 }
 const props = withDefaults(defineProps<iconPorps>(), {
   size: 18,
+  isLocal: false,
 })
+
+const isLocal = computed(() => {
+  return props.icon && props.icon.startsWith('local:')
+})
+
+function getLocalIcon(icon: string) {
+  const svgName = icon.replace('local:', '')
+  const svg = import.meta.glob('@/assets/svg-icons/*.svg', {
+    query: '?raw',
+    import: 'default',
+    eager: true,
+  })
+  return svg[`/src/assets/svg-icons/${svgName}.svg`]
+}
 </script>
 
 <template>
   <n-icon
-    v-if="props.icon"
-    :size="props.size"
-    :depth="props.depth"
-    :color="props.color"
+    v-if="icon && !isLocal"
+    :size="size"
+    :depth="depth"
+    :color="color"
   >
-    <Icon :icon="props.icon" />
+    <Icon :icon="icon" />
   </n-icon>
+  <n-icon
+    v-if="icon && isLocal"
+    :size="size"
+    :depth="depth"
+    :color="color"
+    v-html="getLocalIcon(icon)"
+  />
 </template>
 
 <style scoped></style>
diff --git a/src/layouts/components/header/Search.vue b/src/layouts/components/header/Search.vue
index 04d7f09..acea1d4 100644
--- a/src/layouts/components/header/Search.vue
+++ b/src/layouts/components/header/Search.vue
@@ -183,7 +183,9 @@ function handleMouseEnter(index: number) {
           @mousemove="setKeyboardFalse"
         >
           <div class="grid grid-rows-2 grid-cols-[40px_1fr_30px] h-full p-2">
-            <nova-icon :icon="option.icon" class="row-span-2 place-self-center" />
+            <div class="row-span-2 place-self-center">
+              <nova-icon :icon="option.icon" />
+            </div>
             <span>{{ option.label }}</span>
             <icon-park-outline-right class="row-span-2 place-self-center" />
             <span class="op-70">{{ option.value }}</span>
diff --git a/src/router/routes.static.ts b/src/router/routes.static.ts
index 2036244..3418296 100644
--- a/src/router/routes.static.ts
+++ b/src/router/routes.static.ts
@@ -208,7 +208,7 @@ export const staticRoutes: AppRoute.RowRoute[] = [
     path: '/demo/icons',
     title: '图标',
     requiresAuth: true,
-    icon: 'icon-park-outline:winking-face-with-open-eyes',
+    icon: 'local:cool',
     componentPath: '/demo/icons/index.vue',
     id: 22,
     pid: 13,
diff --git a/src/store/router/index.ts b/src/store/router/index.ts
index e94892d..ac1908b 100644
--- a/src/store/router/index.ts
+++ b/src/store/router/index.ts
@@ -1,4 +1,4 @@
-import { createMenus, createRoutes } from './helper'
+import { createMenus, createRoutes, generateCacheRoutes } from './helper'
 import { $t, local } from '@/utils'
 import { router } from '@/router'
 import { fetchUserRoutes } from '@/service'
@@ -16,9 +16,9 @@ export const useRouteStore = defineStore('route-store', {
   state: (): RoutesStatus => {
     return {
       isInitAuthRoute: false,
+      activeMenu: null,
       menus: [],
       rowRoutes: [],
-      activeMenu: null,
       cacheRoutes: [],
     }
   },
@@ -79,6 +79,9 @@ export const useRouteStore = defineStore('route-store', {
       // Generate side menu
       this.menus = createMenus(rowRoutes)
 
+      // Generate the route cache
+      this.cacheRoutes = generateCacheRoutes(rowRoutes)
+
       this.isInitAuthRoute = true
     },
   },
diff --git a/src/utils/icon.ts b/src/utils/icon.ts
index cfccc55..4f779a6 100644
--- a/src/utils/icon.ts
+++ b/src/utils/icon.ts
@@ -1,6 +1,32 @@
 import { Icon } from '@iconify/vue'
 import { NIcon } from 'naive-ui'
 
-export function renderIcon(icon: string, props?: import('naive-ui').IconProps) {
-  return () => h(NIcon, props, { default: () => h(Icon, { icon }) })
+export function renderIcon(icon?: string, props?: import('naive-ui').IconProps) {
+  if (!icon)
+    return
+
+  return () => createIcon(icon, props)
+}
+
+export function createIcon(icon?: string, props?: import('naive-ui').IconProps) {
+  if (!icon)
+    return
+
+  const isLocal = icon.startsWith('local:')
+  let innerIcon: any
+  if (isLocal) {
+    const svgName = icon.replace('local:', '')
+    const svg = import.meta.glob('@/assets/svg-icons/*.svg', {
+      query: '?raw',
+      import: 'default',
+      eager: true,
+    })
+    const target = svg[`/src/assets/svg-icons/${svgName}.svg`]
+    innerIcon = h(NIcon, { ...props, innerHTML: target })
+  }
+  else {
+    innerIcon = h(NIcon, props, { default: () => h(Icon, { icon }) })
+  }
+
+  return innerIcon
 }