fix: remove icon cache

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>

src/components/settings/ZashboardSettings.vue

@@ -57,11 +57,11 @@
           </div>
         </div>
         <div class="flex flex-col gap-2">
-          <div class="flex flex-col gap-2 sm:flex-row sm:items-center">
+          <div class="flex items-center gap-2">
             <span class="shrink-0"> {{ $t('customBackgroundURL') }} </span>
             <div class="join">
               <TextInput
-                class="join-item flex-1"
+                class="join-item max-w-64 flex-1"
                 v-model="customBackgroundURL"
                 :clearable="true"
                 @update:modelValue="handlerBackgroundURLChange"
@@ -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">
@@ -104,9 +107,8 @@
           </div>
         </div>
       </div>
-
       <div
-        class="flex items-center gap-2"
+        class="flex items-center gap-2 max-sm:hidden"
         v-if="!isSingBox"
       >
         {{ $t('autoUpgrade') }}
@@ -124,12 +126,18 @@
           >
             {{ $t('upgradeUI') }}
           </button>
-          <button
-            class="btn btn-sm"
-            @click="clearIconCache"
+          <div
+            class="btn btn-sm flex items-center gap-2 pl-4 sm:hidden"
+            v-if="!isSingBox"
+            @click="autoUpgrade = !autoUpgrade"
           >
-            {{ $t('clearIconCache') }}
-          </button>
+            {{ $t('autoUpgrade') }}
+            <input
+              class="toggle"
+              type="checkbox"
+              v-model="autoUpgrade"
+            />
+          </div>
         </template>
 
         <button
@@ -150,12 +158,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 +209,6 @@ const handlerClickUpgradeUI = async () => {
   }
 }
 
-const clearIconCache = async () => {
-  clearIconFromIndexedDB()
-}
-
 const themes = [
   'default',
   'light',

src/helper/utils.ts

@@ -3,8 +3,12 @@ import { useMediaQuery } from '@vueuse/core'
 export const twoColumn = useMediaQuery('(min-width: 810px)')
 export const twoColumnWithSidebar = useMediaQuery('(min-width: 1130px)')
 export const isMiddleScreen = useMediaQuery('(max-width: 768px)')
+export const isPWA = (() => {
+  return window.matchMedia('(display-mode: standalone)').matches || navigator.standalone
+})()
 
 const BACKGROUND_IMAGE = 'background-image'
+
 export const LOCAL_IMAGE = 'local-image'
 
 const useIndexedDB = (dbKey: string) => {
@@ -105,11 +109,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)

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.',
@@ -113,7 +112,7 @@ const en = {
   globalIP: 'Global IP',
   networkInfo: 'Network Info',
   autoSwitch: 'Auto Switch',
-  customBackgroundURL: 'Custom Background URL',
+  customBackgroundURL: 'Background URL',
   splitOverviewPage: 'Split Overview Page',
   manageHiddenGroup: 'Manage Hidden Groups',
   showIPAndConnectionInfo: 'Show IP and Connection Info',

src/i18n/ru.ts

@@ -78,7 +78,6 @@ const ru: LANG_MESSAGE = {
   bar: 'Полоса',
   exportSettings: 'Экспорт настроек',
   importSettings: 'Импорт настроек',
-  clearIconCache: 'Очистить кэш иконок',
   unavailableProxy: 'Скрыть недоступное',
   protocolTips:
     'Вы пытаетесь подключиться к http-бэкенду, но панель управления обслуживается через https. Это может вызвать ошибку подключения. Пожалуйста, разрешите небезопасный контент в настройках браузера. Настройки находятся слева от адресной строки.',
@@ -116,7 +115,7 @@ const ru: LANG_MESSAGE = {
   globalIP: 'Мировой IP',
   networkInfo: 'Информация о сети',
   autoSwitch: 'Автоматическое',
-  customBackgroundURL: 'Пользовательский URL фона',
+  customBackgroundURL: 'URL фона',
   splitOverviewPage: 'Разделить страницу с обзором',
   manageHiddenGroup: 'Управление скрытыми группами',
   showIPAndConnectionInfo: 'Показать IP и информацию о соединениях',

src/i18n/zh.ts

@@ -78,7 +78,6 @@ const zh: LANG_MESSAGE = {
   bar: '条',
   exportSettings: '导出设置',
   importSettings: '导入设置',
-  clearIconCache: '清空图标缓存',
   unavailableProxy: '隐藏不可用节点',
   protocolTips:
     '您正在尝试连接一个http后端但zashboard是通过https提供的，这可能会导致连接错误，请在浏览器设置中允许不安全的内容，设置在浏览器地址栏左侧。',
@@ -115,7 +114,7 @@ const zh: LANG_MESSAGE = {
   globalIP: '全球节点 IP',
   networkInfo: '网络信息',
   autoSwitch: '自动切换',
-  customBackgroundURL: '自定义背景 URL',
+  customBackgroundURL: '背景 URL',
   splitOverviewPage: '分离概览页',
   manageHiddenGroup: '管理隐藏代理组',
   showIPAndConnectionInfo: '显示 IP 和连接信息',

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

src/views/HomePage.vue

@@ -87,6 +87,7 @@ import { useSettings } from '@/composables/settings'
 import { useSwipeRouter } from '@/composables/swipe'
 import { PROXY_TAB_TYPE, ROUTE_ICON_MAP, ROUTE_NAME, RULE_TAB_TYPE } from '@/constant'
 import { getUrlFromBackend, renderRoutes } from '@/helper'
+import { isPWA } from '@/helper/utils'
 import { fetchConfigs } from '@/store/config'
 import { initConnections } from '@/store/connections'
 import { initLogs } from '@/store/logs'
@@ -99,10 +100,6 @@ import { useDocumentVisibility } from '@vueuse/core'
 import { computed, ref, watch, type Component } from 'vue'
 import { RouterView, useRoute, useRouter } from 'vue-router'
 
-const isPWA = (() => {
-  return window.matchMedia('(display-mode: standalone)').matches || navigator.standalone
-})()
-
 const ctrlsMap: Record<string, Component> = {
   [ROUTE_NAME.connections]: ConnectionCtrl,
   [ROUTE_NAME.logs]: LogsCtrl,