From 09576b92d15173cbe8177e0f766314b3ae44cf3a Mon Sep 17 00:00:00 2001
From: AutJ <autumnal_joy@foxmail.com>
Date: Thu, 6 Mar 2025 20:34:46 +0800
Subject: [PATCH] =?UTF-8?q?optim:=20=E4=BC=98=E5=8C=96=E5=90=8C=E6=AD=A5?=
 =?UTF-8?q?=E8=BF=9B=E5=BA=A6=E7=AA=97=E5=8F=A3=E6=98=BE=E7=A4=BA=E5=8C=BA?=
 =?UTF-8?q?=E5=9F=9F=E5=A4=A7=E5=B0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../settingPages/SyncProgress.tsx             | 28 +++++++++++++++----
 utils/debounce.ts                             | 28 +++++++++++++++++++
 utils/throttle.ts                             | 17 +++++++++++
 3 files changed, 68 insertions(+), 5 deletions(-)
 create mode 100644 utils/debounce.ts
 create mode 100644 utils/throttle.ts

diff --git a/components/SettingsPanel/settingPages/SyncProgress.tsx b/components/SettingsPanel/settingPages/SyncProgress.tsx
index 5c532c8..273efd6 100644
--- a/components/SettingsPanel/settingPages/SyncProgress.tsx
+++ b/components/SettingsPanel/settingPages/SyncProgress.tsx
@@ -1,5 +1,6 @@
 import { ProgressKeyType, useQuestProgress } from "@hooks/useProgress";
-import React, { useMemo, useState } from "react";
+import debounce from "@utils/debounce";
+import React, { useEffect, useMemo, useState } from "react";
 import { Alert, Button, Form } from "react-bootstrap";
 
 export default function SyncProgress() {
@@ -40,14 +41,31 @@ export default function SyncProgress() {
     navigator.clipboard.writeText(allProgressStr);
   };
 
+  const [windowHeight, setWindowHeight] = useState(window.innerHeight);
+
+  useEffect(() => {
+    const onResize = debounce(() => {
+      setWindowHeight(window.innerHeight);
+    }, 100);
+    window.addEventListener("resize", onResize);
+
+    return () => {
+      window.removeEventListener("resize", onResize);
+    };
+  }, []);
+
   return (
     <div>
       <Button onClick={onFetchClick}>下载题目进度</Button>
       {syncStatus === "fetched" && (
         <div className="mt-3 position-relative">
-          <pre className="bg-light p-3 rounded">
-            <code>{allProgressStr}</code>
-          </pre>
+          <Form.Control
+            as="textarea"
+            rows={windowHeight / 100}
+            value={allProgressStr}
+            readOnly
+            disabled
+          />
           <Button
             variant="link"
             className="position-absolute top-0 end-0 p-2"
@@ -62,7 +80,7 @@ export default function SyncProgress() {
         <Form.Label>Input Progress Data:</Form.Label>
         <Form.Control
           as="textarea"
-          rows={5}
+          rows={windowHeight / 100}
           value={inputData}
           onChange={(e) => setInputData(e.target.value)}
         />
diff --git a/utils/debounce.ts b/utils/debounce.ts
new file mode 100644
index 0000000..6c7bbf6
--- /dev/null
+++ b/utils/debounce.ts
@@ -0,0 +1,28 @@
+function debounce<T extends (...args: unknown[]) => void>(
+  func: T,
+  wait: number,
+  immediate: boolean = false
+): (...args: Parameters<T>) => void {
+  let handle: ReturnType<typeof setTimeout> | undefined = undefined;
+
+  return (...args: Parameters<T>): void => {
+    const shouldCallNow = immediate && handle === undefined;
+
+    if (handle !== undefined) {
+      clearTimeout(handle);
+    }
+
+    handle = setTimeout(() => {
+      if (!immediate) {
+        func(...args);
+      }
+      handle = undefined;
+    }, wait);
+
+    if (shouldCallNow) {
+      func(...args);
+    }
+  };
+}
+
+export default debounce;
diff --git a/utils/throttle.ts b/utils/throttle.ts
new file mode 100644
index 0000000..e9e88db
--- /dev/null
+++ b/utils/throttle.ts
@@ -0,0 +1,17 @@
+function throttle<T extends (...args: unknown[]) => void>(
+  func: T,
+  wait: number
+): (...args: Parameters<T>) => void {
+  let prev = 0;
+
+  return (...args: Parameters<T>): void => {
+    const now = Date.now();
+
+    if (now - prev >= wait) {
+      func(...args);
+      prev = now;
+    }
+  };
+}
+
+export default throttle;