From 35728817330e021d34f9205d1471d4722e220c00 Mon Sep 17 00:00:00 2001
From: xream <xream@icloud.com>
Date: Wed, 10 Jan 2024 01:30:58 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=BB=98=E8=AE=A4=E9=9A=90=E8=97=8F?=
 =?UTF-8?q?=E6=82=AC=E6=B5=AE=E5=88=B7=E6=96=B0=E6=8C=89=E9=92=AE(?=
 =?UTF-8?q?=E5=8F=AF=E5=9C=A8=E8=AE=BE=E7=BD=AE=E4=B8=AD=E5=88=87=E6=8D=A2?=
 =?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                       |  2 +-
 src/components/NavBar.vue          | 32 +++++++++++++++++++++++++++---
 src/locales/en.ts                  |  1 +
 src/locales/zh.ts                  |  1 +
 src/store/global.ts                |  9 +++++++++
 src/types/store/globalStore.d.ts   |  1 +
 src/views/Sub.vue                  |  4 ++--
 src/views/Sync.vue                 |  2 +-
 src/views/settings/moreSetting.vue | 17 ++++++++++++++++
 9 files changed, 62 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index 6c9b30671..6c005b7d4 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index c9adc1a7a..8264d7379 100644
--- a/src/components/NavBar.vue
+++ b/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,6 +47,7 @@ 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();
@@ -52,7 +55,7 @@ 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;
diff --git a/src/locales/en.ts b/src/locales/en.ts
index 97c47586c..ef530692e 100644
--- a/src/locales/en.ts
+++ b/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',
diff --git a/src/locales/zh.ts b/src/locales/zh.ts
index c3f373a07..67d74c57a 100644
--- a/src/locales/zh.ts
+++ b/src/locales/zh.ts
@@ -566,6 +566,7 @@ export default {
     isIC: '使用订阅图标原始颜色',
     isEditorCommon: '展示编辑页常用配置',
     isSimpleReicon: '展示订阅刷新按钮',
+    showFloatingRefreshButton: '显示悬浮刷新按钮',
     tabBar: '隐藏“Gist 同步”页',
     auto2: '自定义设置 Key',
     hostapi: '自定义后端 API',
diff --git a/src/store/global.ts b/src/store/global.ts
index 2eceec638..b46d65f69 100644
--- a/src/store/global.ts
+++ b/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');
diff --git a/src/types/store/globalStore.d.ts b/src/types/store/globalStore.d.ts
index 61d25bdcd..47a473f0f 100644
--- a/src/types/store/globalStore.d.ts
+++ b/src/types/store/globalStore.d.ts
@@ -10,6 +10,7 @@ interface GlobalStoreState {
   isIconColor: boolean;
   isEditorCommon: boolean;
   isSimpleReicon: boolean;
+  showFloatingRefreshButton: boolean;
   istabBar: boolean;
   ishostApi: string;
 }
diff --git a/src/views/Sub.vue b/src/views/Sub.vue
index 797ccb415..e30cd85bc 100644
--- a/src/views/Sub.vue
+++ b/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);
diff --git a/src/views/Sync.vue b/src/views/Sync.vue
index d81ca0755..c43e076af 100644
--- a/src/views/Sync.vue
+++ b/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();
diff --git a/src/views/settings/moreSetting.vue b/src/views/settings/moreSetting.vue
index 79db5140c..5454244b1 100644
--- a/src/views/settings/moreSetting.vue
+++ b/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) {