feat: Enhance reading state management and sync functionality

- Added a flag to prevent multiple sync operations in the Header component.
- Updated visibility change event to handle reading completion state.
- Set reading completion state when the operation panel closes.
- Adjusted beforeunload event to mark reading as finished when not in Electron.

src/containers/header/component.tsx

@@ -40,12 +40,12 @@ import { driveList } from "../../constants/driveList";
 import SupportDialog from "../../components/dialogs/supportDialog";
 import SyncService from "../../utils/storage/syncService";
 import { LocalFileManager } from "../../utils/file/localFile";
-import { updateUserConfig } from "../../utils/request/user";
 import packageJson from "../../../package.json";
 declare var window: any;
 
 class Header extends React.Component<HeaderProps, HeaderState> {
   timer: any;
+  private isSyncing: boolean = false;
   constructor(props: HeaderProps) {
     super(props);
 
@@ -132,8 +132,13 @@ class Header extends React.Component<HeaderProps, HeaderState> {
     });
     this.props.handleCloudSyncFunc(this.handleCloudSync);
     document.addEventListener("visibilitychange", async (event) => {
-      if (document.visibilityState === "visible" && !isElectron) {
+      if (
+        document.visibilityState === "visible" &&
+        !isElectron &&
+        ConfigService.getReaderConfig("isFinishWebReading") === "yes"
+      ) {
         this.handleFinishReading();
+        ConfigService.setReaderConfig("isFinishWebReading", "no");
       }
     });
   }
@@ -347,12 +352,19 @@ class Header extends React.Component<HeaderProps, HeaderState> {
     this.setState({ isSync: isSyncing });
   };
   handleCloudSync = async (): Promise<false | undefined> => {
-    this.timer = await showTaskProgress(this.handleSyncStateChange);
-    if (!this.timer) {
-      this.setState({ isSync: false });
+    if (this.isSyncing) {
+      console.info("Sync already in progress, skipping...");
       return false;
     }
+    this.isSyncing = true;
+
     try {
+      this.timer = await showTaskProgress(this.handleSyncStateChange);
+      if (!this.timer) {
+        this.setState({ isSync: false });
+        return false;
+      }
+
       let res = await this.beforeSync();
       if (!res) {
         clearInterval(this.timer);
@@ -376,6 +388,8 @@ class Header extends React.Component<HeaderProps, HeaderState> {
       clearInterval(this.timer);
       this.setState({ isSync: false });
       return false;
+    } finally {
+      this.isSyncing = false;
     }
     setTimeout(() => {
       toast.dismiss("syncing");
@@ -383,7 +397,7 @@ class Header extends React.Component<HeaderProps, HeaderState> {
     return;
   };
   handleSuccess = async () => {
-    if (ConfigService.getItem("isFinshReading") !== "yes") {
+    if (ConfigService.getItem("isFinshReading") !== "yes" || !isElectron) {
       this.props.handleFetchBooks();
     }
 

src/containers/panels/operationPanel/component.tsx

@@ -85,6 +85,7 @@ class OperationPanel extends React.Component<
         window.close();
       }
     } else {
+      ConfigService.setReaderConfig("isFinishWebReading", "yes");
       window.close();
     }
   }

src/pages/reader/component.tsx

@@ -11,8 +11,8 @@ import { Tooltip } from "react-tooltip";
 import "./index.css";
 import Book from "../../models/Book";
 import DatabaseService from "../../utils/storage/databaseService";
-import BookUtil from "../../utils/file/bookUtil";
 import ConvertDialog from "../../components/dialogs/convertDialog";
+import { isElectron } from "react-device-detect";
 
 let lock = false; //prevent from clicking too fasts
 let throttleTime =
@@ -67,6 +67,12 @@ class Reader extends React.Component<ReaderProps, ReaderState> {
         );
       }
     }, 5000);
+
+    window.addEventListener("beforeunload", function (event) {
+      if (!isElectron) {
+        ConfigService.setReaderConfig("isFinishWebReading", "yes");
+      }
+    });
     window.addEventListener("mousemove", () => {
       isMouseMoving = true;
       setTimeout(() => {