feat: 默认隐藏悬浮刷新按钮(可在设置中切换)

package.json

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

src/components/NavBar.vue

@@ -5,14 +5,16 @@
         :tit-icon="currentTitleWhetherAsk" @on-click-icon="onClickNavbarIcon">
         <template #left>
           <div :class="isNeedBack ? 'icon-back' : 'icon-null'"></div>
+          <font-awesome-icon v-if="!isNeedBack && !showFloatingRefreshButton" @click.stop="refresh" class="fa-arrow-rotate-right" icon="fa-solid fa-arrow-rotate-right" />
+          <!-- <font-awesome-icon v-if="['/subs', '/sync'].includes(route.path) && !isNeedBack && showFloatingRefreshButton" @click.stop="setSimpleMode(true)" class="fa-plus" icon="fa-solid fa-plus" /> -->
         </template>
 
         <template #right>
           <font-awesome-icon v-if="isSimpleMode" @click.stop="setSimpleMode(false)" class="navBar-right-icon fa-toggle"
             icon="fa-solid fa-toggle-on " />
           <font-awesome-icon v-else @click.stop="setSimpleMode(true)" class="navBar-right-icon fa-toggle"
-            icon="fa-solid fa-toggle-off " />
-          <font-awesome-icon class="navBar-right-icon fa-lg" icon="fa-solid fa-language " />
+            icon="fa-solid fa-toggle-off" />
+          <font-awesome-icon class="navBar-right-icon fa-lg" icon="fa-solid fa-language" />
         </template>
       </nut-navbar>
     </nav>
@@ -45,14 +47,15 @@ import { useRoute, useRouter } from 'vue-router';
 import { useGlobalStore } from '@/store/global';
 import { storeToRefs } from 'pinia';
 import { Toast } from '@nutui/nutui';
+import { initStores } from "@/utils/initApp";
 
 const { t, locale } = useI18n();
 const router = useRouter();
 const route = useRoute();
 const globalStore = useGlobalStore();
 const showLangSwitchPopup = ref(false);
 const langList = ['zh', 'en'];
-const { isSimpleMode } = storeToRefs(globalStore);
+const { isSimpleMode, showFloatingRefreshButton } = storeToRefs(globalStore);
 
 const isNeedBack = computed(() => {
   return route.meta.needNavBack ?? false;
@@ -99,6 +102,15 @@ const setSimpleMode = (isSimpleMode: boolean) => {
   globalStore.setSimpleMode(isSimpleMode);
 };
 
+const refresh = () => {
+  if (['/subs', '/sync'].includes(route.path)) {
+    initStores(true, true, true);
+  } else {
+    window.location.reload();
+  }
+  
+};
+
 </script>
 
 <style lang="scss">
@@ -156,6 +168,20 @@ const setSimpleMode = (isSimpleMode: boolean) => {
         color: var(--icon-nav-bar-right);
       }
 
+      .fa-plus {
+        color: var(--icon-nav-bar-right);
+        position: absolute;
+        left: 45px;
+        top: 50%;
+        transform: translateY(-50%);
+      }
+      .fa-arrow-rotate-right {
+        color: var(--icon-nav-bar-right);
+        position: absolute;
+        left: 15px;
+        top: 50%;
+        transform: translateY(-50%);
+      }
       .fa-lg {
         position: absolute;
         right: 15px;

src/locales/en.ts

@@ -562,6 +562,7 @@ export default {
     isIC: 'Use original color for icons',
     isEditorCommon: 'Show editor common settings',
     isSimpleReicon: 'Show items refresh button',
+    showFloatingRefreshButton: 'Show floating refresh button',
     tabBar: 'Hide "Sync" Page',
     auto2: 'MoreSetting Key',
     hostapi: 'Custom Backend API',

src/locales/zh.ts

@@ -566,6 +566,7 @@ export default {
     isIC: '使用订阅图标原始颜色',
     isEditorCommon: '展示编辑页常用配置',
     isSimpleReicon: '展示订阅刷新按钮',
+    showFloatingRefreshButton: '显示悬浮刷新按钮',
     tabBar: '隐藏“Gist 同步”页',
     auto2: '自定义设置 Key',
     hostapi: '自定义后端 API',

src/store/global.ts

@@ -20,6 +20,7 @@ export const useGlobalStore = defineStore('globalStore', {
       isIconColor: localStorage.getItem('iconColor') === '1',
       isEditorCommon: localStorage.getItem('iseditorCommon') !== '1',
       isSimpleReicon: localStorage.getItem('isSimpleReicon') === '1',
+      showFloatingRefreshButton: localStorage.getItem('showFloatingRefreshButton') === '1',
       istabBar: localStorage.getItem('istabBar') === '1',
       ishostApi: getHostAPIUrl(),
     };
@@ -81,6 +82,14 @@ export const useGlobalStore = defineStore('globalStore', {
       }
       this.isSimpleReicon = isSimpleReicon;
     },
+    setShowFloatingRefreshButton(showFloatingRefreshButton: boolean) {
+      if (showFloatingRefreshButton) {
+        localStorage.setItem('showFloatingRefreshButton', '1');
+      } else {
+        localStorage.removeItem('showFloatingRefreshButton');
+      }
+      this.showFloatingRefreshButton = showFloatingRefreshButton;
+    },
     settabBar(istabBar: boolean) {
       if (istabBar) {
         localStorage.setItem('istabBar', '1');

src/types/store/globalStore.d.ts

@@ -10,6 +10,7 @@ interface GlobalStoreState {
   isIconColor: boolean;
   isEditorCommon: boolean;
   isSimpleReicon: boolean;
+  showFloatingRefreshButton: boolean;
   istabBar: boolean;
   ishostApi: string;
 }

src/views/Sub.vue

@@ -52,7 +52,7 @@
           :style="{ right: '16px', bottom: `${bottomSafeArea + 48 + 36}px` }"
         >
           <!-- 刷新 -->
-          <div class="drag-btn refresh" @click="refresh">
+          <div v-if="showFloatingRefreshButton" class="drag-btn refresh" @click="refresh">
             <font-awesome-icon icon="fa-solid fa-arrow-rotate-right" />
           </div>
 
@@ -209,7 +209,7 @@ const addSubBtnIsVisible = ref(false);
 const subsStore = useSubsStore();
 const globalStore = useGlobalStore();
 const { hasSubs, hasCollections, subs, collections } = storeToRefs(subsStore);
-const { isLoading, fetchResult, bottomSafeArea } = storeToRefs(globalStore);
+const { isLoading, fetchResult, bottomSafeArea, showFloatingRefreshButton } = storeToRefs(globalStore);
 const swipeDisabled = ref(false);
 const touchStartY = ref(null);
 const touchStartX = ref(null);

src/views/Sync.vue

@@ -163,7 +163,7 @@ const subsApi = useSubsApi();
 const globalStore = useGlobalStore();
 const artifactsStore = useArtifactsStore();
 const settingsStore = useSettingsStore();
-const { isLoading, fetchResult, bottomSafeArea } = storeToRefs(globalStore);
+const { isLoading, fetchResult, bottomSafeArea, showFloatingRefreshButton } = storeToRefs(globalStore);
 const { artifacts } = storeToRefs(artifactsStore);
 const { artifactStore: artifactStoreUrl } = storeToRefs(settingsStore);
 const { showNotify } = useAppNotifyStore();

src/views/settings/moreSetting.vue

@@ -59,6 +59,16 @@
           />
         </template>
       </nut-cell>
+      <nut-cell :title="$t(`moreSettingPage.showFloatingRefreshButton`)" class="cell-item">
+        <template v-slot:link>
+          <nut-switch
+            class="my-switch"
+            v-model="awShowFloatingRefreshButton"
+            size="mini"
+            @change="setShowFloatingRefreshButton"
+          />
+        </template>
+      </nut-cell>
 
       <nut-cell :title="$t(`moreSettingPage.tabBar`)" class="cell-item">
         <template v-slot:link>
@@ -168,6 +178,7 @@
     isIconColor,
     isEditorCommon,
     isSimpleReicon,
+    showFloatingRefreshButton,
     istabBar,
   } = storeToRefs(globalStore);
 
@@ -178,6 +189,7 @@
   const awIconColor = ref(false);
   const awEditorCommon = ref(false);
   const awSimpleReicon = ref(true);
+  const awShowFloatingRefreshButton = ref(false);
   const awtabBar = ref(true);
   // const isEditing = ref(false);
   const isInit = ref(false);
@@ -207,6 +219,10 @@
     globalStore.setSimpleReicon(isSimpleReicon);
   };
 
+  const setShowFloatingRefreshButton = (showFloatingRefreshButton: boolean) => {
+    globalStore.setShowFloatingRefreshButton(showFloatingRefreshButton);
+  };
+
   const settabBar = (istabBar: boolean) => {
     globalStore.settabBar(istabBar);
   };
@@ -337,6 +353,7 @@
     awEditorCommon.value = isEditorCommon.value;
     awEditorCommon.value = isEditorCommon.value;
     awSimpleReicon.value = isSimpleReicon.value;
+    awShowFloatingRefreshButton.value = showFloatingRefreshButton.value;
     awtabBar.value = istabBar.value;
     autoSwitch.value = isAuto();
     if (!isInit.value) {