feat: 启用新的默认图标, 可在设置中恢复(感谢 @ccc63)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sub-store-front-end",
-  "version": "2.14.78",
+  "version": "2.14.79",
   "private": true,
   "scripts": {
     "dev": "vite --host",

src/components/ArtifactsListItem.vue

@@ -88,7 +88,8 @@
 </template>
 
 <script lang="ts" setup>
-import logoIcon from '@/assets/icons/logo.svg';
+import logoIcon from '@/assets/icons/logo.png';
+import logoRedIcon from '@/assets/icons/logo-red.png';
 import singboxIcon from '@/assets/icons/sing-box.png';
 import clashIcon from '@/assets/icons/clash.png';
 import clashMetaIcon from '@/assets/icons/clashmeta.png';
@@ -124,7 +125,7 @@ import { useGlobalStore } from '@/store/global';
 import { useHostAPI } from '@/hooks/useHostAPI';
 const globalStore = useGlobalStore();
 
-const { isLeftRight, isSimpleMode, isIconColor } = storeToRefs(globalStore);
+const { isLeftRight, isSimpleMode, isIconColor, isDefaultIcon } = storeToRefs(globalStore);
 const { copy, isSupported } = useClipboard();
 const { toClipboard: copyFallback } = useV3Clipboard();
 
@@ -210,7 +211,7 @@ const icon = computed(() => {
     case 'Surfboard':
       return isIconColor.value ? surfboardColorIcon: surfboardIcon;
     default:
-      return logoIcon;
+      return isDefaultIcon.value ? logoIcon : logoRedIcon;
   }
 });
 

src/components/FileListItem.vue

@@ -168,7 +168,8 @@
 <script lang="ts" setup>
   import { useSubsApi } from '@/api/subs';
   import { useFilesApi } from '@/api/files';
-  import icon from '@/assets/icons/logo.svg';
+  import logoIcon from '@/assets/icons/logo.png';
+  import logoRedIcon from '@/assets/icons/logo-red.png';
   import { usePopupRoute } from '@/hooks/usePopupRoute';
   import { useAppNotifyStore } from '@/store/appNotify';
   import { useGlobalStore } from '@/store/global';
@@ -220,13 +221,17 @@
     isLeftRight,
     isIconColor,
     isSimpleReicon,
+    isDefaultIcon
   } = storeToRefs(globalStore);
 
   const displayName =
     props[props.type].displayName || props[props.type]['display-name'];
 
   const name = props[props.type].name;
   const { flows } = storeToRefs(subsStore);
+  const icon = computed(() => {
+    return isDefaultIcon.value ? logoIcon : logoRedIcon;
+  })
   const collectionDetail = computed(() => {
     const nameList = props?.collection.subscriptions || [];
     if (nameList.length === 0) {

src/components/PreviewPanel.vue

@@ -52,7 +52,7 @@
   import v2ray from '@/assets/icons/v2ray.png';
   import singbox from '@/assets/icons/sing-box.png';
   import clashmeta from '@/assets/icons/clashmeta.png';
-  import logoicon from '@/assets/icons/logo.svg';
+  import logoIcon from '@/assets/icons/logo.png';
   import { useClipboard } from '@vueuse/core';
   import useV3Clipboard from 'vue-clipboard3';
   import { useAppNotifyStore } from '@/store/appNotify';
@@ -89,7 +89,7 @@
     {
       name: general,
       path: null,
-      icon: logoicon,
+      icon: logoIcon,
     },
     {
       name: 'Stash',

src/components/SubListItem.vue

@@ -192,7 +192,8 @@
 
 <script lang="ts" setup>
   import { useSubsApi } from '@/api/subs';
-  import icon from '@/assets/icons/logo.svg';
+  import logoIcon from '@/assets/icons/logo.png';
+  import logoRedIcon from '@/assets/icons/logo-red.png';
   import PreviewPanel from '@/components/PreviewPanel.vue';
   import { usePopupRoute } from '@/hooks/usePopupRoute';
   import { useAppNotifyStore } from '@/store/appNotify';
@@ -244,13 +245,17 @@
     isLeftRight,
     isIconColor,
     isSimpleReicon,
+    isDefaultIcon,
   } = storeToRefs(globalStore);
 
   const displayName =
     props[props.type].displayName || props[props.type]['display-name'];
 
   const name = props[props.type].name;
   const { flows } = storeToRefs(subsStore);
+  const icon = computed(() => {
+    return isDefaultIcon.value ? logoIcon : logoRedIcon;
+  })
   const collectionDetail = computed(() => {
     const nameList = props?.collection.subscriptions || [];
     if (nameList.length === 0) {

src/locales/en.ts

@@ -621,6 +621,7 @@ export default {
     simple: 'Simple Mode',
     islr: 'Card right swipe to call out',
     isIC: 'Use original color for custom icons',
+    isDefaultIcon: 'Restore default icon',
     isEditorCommon: 'Show editor common settings',
     isSimpleReicon: 'Show items refresh button',
     showFloatingRefreshButton: 'Show floating refresh button',

src/locales/zh.ts

@@ -625,6 +625,7 @@ export default {
     simple: '简洁模式',
     islr: '卡片右滑呼出',
     isIC: '自定义图标使用原始颜色',
+    isDefaultIcon: '恢复默认图标',
     isEditorCommon: '展示编辑页常用配置',
     isSimpleReicon: '展示订阅刷新按钮',
     showFloatingRefreshButton: '显示悬浮刷新按钮',

src/store/global.ts

@@ -13,6 +13,7 @@ export const useGlobalStore = defineStore('globalStore', {
       isFlowFetching: true,
       fetchResult: false,
       bottomSafeArea: 0,
+      isDefaultIcon: false,
       isDarkMode: false,
       env: {},
       isSimpleMode: localStorage.getItem('isSimpleMode') === '1',
@@ -68,6 +69,14 @@ export const useGlobalStore = defineStore('globalStore', {
       }
       this.isIconColor = iconColor;
     },
+    setIsDefaultIcon(isDefaultIcon: boolean) {
+      if (isDefaultIcon) {
+        localStorage.setItem('isDefaultIcon', '1');
+      } else {
+        localStorage.removeItem('isDefaultIcon');
+      }
+      this.isDefaultIcon = isDefaultIcon;
+    },
     setEditorCommon(isEditorCommon: boolean) {
       if (!isEditorCommon) {
         localStorage.setItem('iseditorCommon', '1');

src/types/store/globalStore.d.ts

@@ -1,5 +1,6 @@
 interface GlobalStoreState {
   isLoading: boolean;
+  isDefaultIcon: boolean;
   isFlowFetching: boolean;
   fetchResult: boolean;
   bottomSafeArea: number;

src/views/SubEditor.vue

@@ -170,13 +170,13 @@
               >
                 <div class="sub-img-wrapper">
                   <nut-avatar
-                    class="sub-item-customer-icon"
+                    :class="{ 'sub-item-customer-icon': !isIconColor }"
                     v-if="item[2]"
                     size="32"
                     :url="item[2]"
                     bg-color=""
                   ></nut-avatar>
-                  <span>{{ item[1] }}</span>
+                  <span>&nbsp;{{ item[1] }}</span>
                 </div>
               </nut-checkbox>
             </nut-checkboxgroup>
@@ -235,7 +235,8 @@
 <script lang="ts" setup>
   import { useArtifactsStore } from "@/store/artifacts";
   import { useSubsApi } from '@/api/subs';
-  import icon from '@/assets/icons/logo.svg';
+  import logoIcon from '@/assets/icons/logo.png';
+  import logoRedIcon from '@/assets/icons/logo-red.png';
   import { usePopupRoute } from '@/hooks/usePopupRoute';
   import { useAppNotifyStore } from '@/store/appNotify';
   import { useGlobalStore } from '@/store/global';
@@ -275,7 +276,7 @@
   const { showNotify } = useAppNotifyStore();
 
   const globalStore = useGlobalStore();
-  const { bottomSafeArea, isEditorCommon } = storeToRefs(globalStore);
+  const { bottomSafeArea, isEditorCommon, isDefaultIcon, isIconColor } = storeToRefs(globalStore);
   const padding = bottomSafeArea.value + 'px';
 
   const sub = computed(() => subsStore.getOneSub(configName));
@@ -286,7 +287,7 @@
       return [
         item.name,
         item.displayName || item['display-name'] || item.name,
-        item.icon || icon,
+        item.icon || (isDefaultIcon.value ? logoIcon : logoRedIcon),
       ];
     });
   });

src/views/settings/moreSetting.vue

@@ -27,6 +27,16 @@
         </template>
       </nut-cell>
 
+      <nut-cell :title="$t(`moreSettingPage.isDefaultIcon`)" class="cell-item">
+        <template v-slot:link>
+          <nut-switch
+            class="my-switch"
+            v-model="awIsDefaultIcon"
+            size="mini"
+            @change="setIsDefaultIcon"
+          />
+        </template>
+      </nut-cell>
       <nut-cell :title="$t(`moreSettingPage.isIC`)" class="cell-item">
         <template v-slot:link>
           <nut-switch
@@ -186,6 +196,7 @@
     isLeftRight,
     ishostApi,
     isIconColor,
+    isDefaultIcon,
     isEditorCommon,
     isSimpleReicon,
     showFloatingRefreshButton,
@@ -198,6 +209,7 @@
   const SimpleSwitch = ref(false);
   const LeftRight = ref(false);
   const awIconColor = ref(false);
+  const awIsDefaultIcon = ref(false);
   const awEditorCommon = ref(false);
   const awSimpleReicon = ref(true);
   const awShowFloatingRefreshButton = ref(false);
@@ -222,6 +234,9 @@
   const setIconColor = (isIconColor: boolean) => {
     globalStore.setIconColor(isIconColor);
   };
+  const setIsDefaultIcon = (isDefaultIcon: boolean) => {
+    globalStore.setIsDefaultIcon(isDefaultIcon);
+  };
 
   const setEditorCommon = (isIconColor: boolean) => {
     globalStore.setEditorCommon(isIconColor);
@@ -365,6 +380,7 @@
     LeftRight.value = isLeftRight.value;
     autoSwitchSync.value = autoDownloadGistSync.value;
     awIconColor.value = isIconColor.value;
+    awIsDefaultIcon.value = isDefaultIcon.value;
     awEditorCommon.value = isEditorCommon.value;
     awEditorCommon.value = isEditorCommon.value;
     awSimpleReicon.value = isSimpleReicon.value;