fix: remove icon cache

Zephyruso · Feb 19, 2025 · b9be5ae · b9be5ae
1 parent ae25805
commit b9be5ae
Show file tree

Hide file tree

Showing 7 changed files with 9 additions and 88 deletions.
diff --git a/src/components/proxies/ProxyIcon.vue b/src/components/proxies/ProxyIcon.vue
@@ -8,15 +8,14 @@
   <img
     v-else
     :style="style"
-    :src="cachedIcon"
+    :src="icon"
   />
 </template>
 
 <script setup lang="ts">
-import { getIconFromIndexedDB, saveIconToIndexedDB } from '@/helper/utils'
 import { iconMarginRight, iconSize } from '@/store/settings'
 import DOMPurify from 'dompurify'
-import { computed, onMounted, ref, watch } from 'vue'
+import { computed } from 'vue'
 
 const props = defineProps<{
   icon: string
@@ -39,47 +38,4 @@ const pureDom = computed(() => {
   if (!isDom.value) return
   return DOMPurify.sanitize(props.icon.replace(DOM_STARTS_WITH, ''))
 })
-
-const cachedIcon = ref()
-
-const fetchAndCacheIcon = async (key: string, iconUrl: string) => {
-  const response = await fetch(iconUrl)
-  const blob = await response.blob()
-  const reader = new FileReader()
-  reader.onload = async () => {
-    const dataUrl = reader.result as string
-    await saveIconToIndexedDB(key, dataUrl)
-    cachedIcon.value = dataUrl
-  }
-  reader.readAsDataURL(blob)
-}
-
-const loadIcon = async () => {
-  const key = props.icon
-  try {
-    const cachedData = await getIconFromIndexedDB(key)
-    if (cachedData) {
-      cachedIcon.value = cachedData
-    } else {
-      cachedIcon.value = props.icon
-      await fetchAndCacheIcon(key, key)
-    }
-  } catch {
-    cachedIcon.value = props.icon
-  }
-}
-
-const initIcon = () => {
-  if (!isDom.value) {
-    loadIcon()
-  } else {
-    cachedIcon.value = props.icon
-  }
-}
-
-onMounted(() => {
-  initIcon()
-})
-
-watch(() => props.icon, initIcon)
 </script>
diff --git a/src/components/settings/ZashboardSettings.vue b/src/components/settings/ZashboardSettings.vue
@@ -92,6 +92,9 @@
               max="100"
               v-model="dashboardTransparent"
               class="range max-w-64"
+              @touchstart.stop
+              @touchmove.stop
+              @touchend.stop
             />
           </div>
           <div class="flex items-center gap-2 md:hidden">
@@ -124,12 +127,7 @@
           >
             {{ $t('upgradeUI') }}
           </button>
-          <button
-            class="btn btn-sm"
-            @click="clearIconCache"
-          >
-            {{ $t('clearIconCache') }}
-          </button>
+          <div></div>
         </template>
 
         <button
@@ -150,12 +148,7 @@ import LanguageSelect from '@/components/settings/LanguageSelect.vue'
 import { useSettings } from '@/composables/settings'
 import { FONTS } from '@/constant'
 import { exportSettings } from '@/helper'
-import {
-  clearIconFromIndexedDB,
-  deleteBase64FromIndexedDB,
-  LOCAL_IMAGE,
-  saveBase64ToIndexedDB,
-} from '@/helper/utils'
+import { deleteBase64FromIndexedDB, LOCAL_IMAGE, saveBase64ToIndexedDB } from '@/helper/utils'
 import {
   autoUpgrade,
   customBackgroundURL,
@@ -206,10 +199,6 @@ const handlerClickUpgradeUI = async () => {
   }
 }
 
-const clearIconCache = async () => {
-  clearIconFromIndexedDB()
-}
-
 const themes = [
   'default',
   'light',

diff --git a/src/helper/utils.ts b/src/helper/utils.ts
@@ -105,11 +105,3 @@ const backgroundDB = useIndexedDB('base64')
 export const saveBase64ToIndexedDB = (val: string) => backgroundDB.put(BACKGROUND_IMAGE, val)
 export const getBase64FromIndexedDB = () => backgroundDB.get(BACKGROUND_IMAGE)
 export const deleteBase64FromIndexedDB = () => backgroundDB.clear()
-
-const iconDB = useIndexedDB('iconCache')
-
-export const saveIconToIndexedDB = iconDB.put
-export const getIconFromIndexedDB = (key: string) => iconDB.get(key)
-export const clearIconFromIndexedDB = () => iconDB.clear()
-export const getAllIconKeys = () => iconDB.getAllKeys()
-export const deleteIconFromIndexedDB = (key: string) => iconDB.del(key)
diff --git a/src/i18n/en.ts b/src/i18n/en.ts
@@ -76,7 +76,6 @@ const en = {
   bar: 'Bar',
   exportSettings: 'Export Settings',
   importSettings: 'Import Settings',
-  clearIconCache: 'Clear Icon Cache',
   unavailableProxy: 'Hide Unavailable Proxies',
   protocolTips:
     'You are trying to connect a http backend but the zashboard is served by https. This may cause connection error. Please allow the insecure content in your browser settings. The settings is on the left of the browser address bar.',

diff --git a/src/i18n/ru.ts b/src/i18n/ru.ts
@@ -78,7 +78,6 @@ const ru: LANG_MESSAGE = {
   bar: 'Полоса',
   exportSettings: 'Экспорт настроек',
   importSettings: 'Импорт настроек',
-  clearIconCache: 'Очистить кэш иконок',
   unavailableProxy: 'Скрыть недоступное',
   protocolTips:
     'Вы пытаетесь подключиться к http-бэкенду, но панель управления обслуживается через https. Это может вызвать ошибку подключения. Пожалуйста, разрешите небезопасный контент в настройках браузера. Настройки находятся слева от адресной строки.',

diff --git a/src/i18n/zh.ts b/src/i18n/zh.ts
@@ -78,7 +78,6 @@ const zh: LANG_MESSAGE = {
   bar: '条',
   exportSettings: '导出设置',
   importSettings: '导入设置',
-  clearIconCache: '清空图标缓存',
   unavailableProxy: '隐藏不可用节点',
   protocolTips:
     '您正在尝试连接一个http后端但zashboard是通过https提供的，这可能会导致连接错误，请在浏览器设置中允许不安全的内容，设置在浏览器地址栏左侧。',

diff --git a/src/store/proxies.ts b/src/store/proxies.ts
@@ -10,12 +10,11 @@ import {
 import { useNotification } from '@/composables/notification'
 import { IPV6_TEST_URL, NOT_CONNECTED, PROXY_TYPE } from '@/constant'
 import { isProxyGroup } from '@/helper'
-import { deleteIconFromIndexedDB, getAllIconKeys } from '@/helper/utils'
 import type { Proxy, ProxyProvider } from '@/types'
 import { useStorage } from '@vueuse/core'
-import { compact, debounce, difference, last } from 'lodash'
+import { debounce, last } from 'lodash'
 import pLimit from 'p-limit'
-import { computed, ref, watch } from 'vue'
+import { ref } from 'vue'
 import { activeConnections } from './connections'
 import {
   automaticDisconnection,
@@ -232,18 +231,6 @@ const getNowProxyNodeName = (name: string) => {
   return node.name
 }
 
-const allIcons = computed(() => {
-  return compact(Object.values(proxyMap.value).map((proxy) => proxy.icon))
-})
-
-watch(allIcons, async (values) => {
-  const allCachedIcons = await getAllIconKeys()
-
-  difference(allCachedIcons, values).forEach((icon) => {
-    deleteIconFromIndexedDB(icon)
-  })
-})
-
 const { showNotification } = useNotification()
 const latencyTip = (finished: number, total: number) => {
   const isFinished = finished === total