fix: update favicon after changing site

src/pages/home/components/Favicon.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { PropType } from 'vue'
 import type { Site } from '@/types'
-import { FAVICON_MAP_SYMBOL, getDomainName, getFaviconUrl } from '@/utils'
+import { FAVICON_MAP_SYMBOL, getFaviconUrl } from '@/utils'
 
 const props = defineProps({
   site: {
@@ -20,46 +20,56 @@ const props = defineProps({
 
 const { iconStyle } = useIconStyle()
 
-const faviconMap = inject<Ref<Map<string, HTMLImageElement>>>(FAVICON_MAP_SYMBOL)!
+const faviconMap = inject<Ref<Map<number, HTMLImageElement | HTMLDivElement>>>(FAVICON_MAP_SYMBOL)!
 
 const $faviconBox = ref<HTMLDivElement>()
 
-const imgErr = ref(false)
-
 onMounted(() => {
-  const domain = getDomainName(props.site.url)
-  const img = domain ? faviconMap.value.get(domain) : null
+  const id = props.site.id
+  const img = faviconMap.value.get(id)
 
-  if (domain && !img) {
+  if (!img) {
     const img = new Image()
     img.src = props.site.favicon || getFaviconUrl(props.site.url)
     img.onload = () => {
       $faviconBox.value?.appendChild(img)
-      faviconMap.value.set(domain, img)
+      faviconMap.value.set(id, img)
     }
     img.onerror = () => {
-      imgErr.value = true
+      const favicon = document.createElement('div')
+      favicon.innerText = props.site.name.toLocaleUpperCase().charAt(0)
+      faviconMap.value.set(id, favicon)
+      $faviconBox.value?.appendChild(favicon)
     }
   }
-  else if (domain && img) {
+  else if (img) {
     $faviconBox.value?.appendChild(img)
   }
 })
 </script>
 
 <template>
-  <div ref="$faviconBox" class="favicon" :style="[iconStyle, { width: `${size}px`, height: `${size}px` }]">
-    <div v-if="imgErr" :style="{ backgroundColor: 'var(--primary-c)', fontSize: `${size / 2}px` }" h-full w-full flex-center scale-112 rounded-full text-white>
-      {{ site.name.toLocaleUpperCase().charAt(0) }}
-    </div>
-  </div>
+  <div ref="$faviconBox" class="favicon" :style="[iconStyle, { width: `${size}px`, height: `${size}px`, fontSize: `${size / 2}px` }]" />
 </template>
 
-<style>
-.favicon img{
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-  object-position: center;
+<style lang="scss">
+.favicon {
+  img, div {
+    width: 100%;
+    height: 100%;
+  }
+  img {
+    object-fit: contain;
+    object-position: center;
+  }
+  div {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #fff;
+    background-color: var(--primary-c);
+    transform: scale(1.12);
+    border-radius: 50%;
+  }
 }
 </style>

src/pages/home/components/SiteContainer.vue

@@ -4,7 +4,8 @@ import SiteModal from './SiteModal.vue'
 import SiteGroupList from './SiteGroupList.vue'
 import { FAVICON_MAP_SYMBOL } from '@/utils'
 
-const faviconMap = ref<Map<string, HTMLImageElement>>(new Map())
+// TODO 重置预设后清除 faviconMap
+const faviconMap = ref(new Map())
 
 provide(FAVICON_MAP_SYMBOL, faviconMap)
 </script>

src/pages/home/components/SiteModal.vue

@@ -1,8 +1,13 @@
 <script setup lang="ts">
+import { FAVICON_MAP_SYMBOL, getFaviconUrl } from '@/utils'
+
 const modalStore = useModalStore()
+const siteStore = useSiteStore()
 
 const inputStatus = ref<'error' | 'success'>('success')
 
+const faviconMap = inject<Ref<Map<number, HTMLImageElement | HTMLDivElement>>>(FAVICON_MAP_SYMBOL)!
+
 function handleCommit() {
   if (
     !modalStore.inputValues.name
@@ -12,6 +17,30 @@ function handleCommit() {
     setTimeout(() => inputStatus.value = 'success', 500)
     return
   }
+
+  // 更新图标
+  if (modalStore.target === 'site') {
+    const site = siteStore.getCurrentSite()
+    const favicon = faviconMap.value.get(site.id)!
+
+    const parent = favicon.parentElement!
+    const img = new Image()
+
+    img.src = site.favicon || getFaviconUrl(modalStore.inputValues.url)
+    img.onload = () => {
+      faviconMap.value.set(site.id, img)
+      parent.removeChild(favicon)
+      parent.appendChild(img)
+    }
+    img.onerror = () => {
+      const divEl = document.createElement('div')
+      divEl.innerText = site.name.toLocaleUpperCase().charAt(0)
+      faviconMap.value.set(site.id, divEl)
+      parent.removeChild(favicon)
+      parent.appendChild(divEl)
+    }
+  }
+
   modalStore.handleCommit()
 }
 </script>

src/stores/site.ts

@@ -91,6 +91,10 @@ export const useSiteStore = defineStore('site', () => {
     localStorage.removeItem('cache')
   }
 
+  function getCurrentSite() {
+    return data.value[cateIndex.value].groupList[groupIndex.value].siteList[siteIndex.value]
+  }
+
   return {
     data,
     customData,
@@ -111,5 +115,6 @@ export const useSiteStore = defineStore('site', () => {
     deleteCate,
     setData,
     restoreData,
+    getCurrentSite,
   }
 })