From be8601fe1fa2f2d0068863a7321c97840e1d6ca8 Mon Sep 17 00:00:00 2001
From: meetqy <meetqy@qq.com>
Date: Tue, 5 Dec 2023 14:51:39 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=8D=E5=90=8C=E4=B8=BB=E9=A2=98=E6=9B=B4?=
 =?UTF-8?q?=E5=8A=A0=E9=B2=9C=E6=98=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/electron/src/renderer/src/index.css      |  2 +-
 .../renderer/src/pages/basic/SyncCircle.tsx   | 21 ++++++--
 .../src/renderer/src/pages/basic/index.tsx    | 51 ++++++++++++-------
 .../electron/src/renderer/src/pages/color.tsx | 12 ++---
 4 files changed, 55 insertions(+), 31 deletions(-)

diff --git a/apps/electron/src/renderer/src/index.css b/apps/electron/src/renderer/src/index.css
index 7e5e2a1d..76152af5 100644
--- a/apps/electron/src/renderer/src/index.css
+++ b/apps/electron/src/renderer/src/index.css
@@ -7,7 +7,7 @@
 }
 
 .card-wrapper {
-  @apply rounded border border-base-content/10 bg-base-200 px-4;
+  @apply rounded-box border border-base-content/10 bg-base-200 px-4;
 
   .card-row {
     @apply flex justify-between py-3;
diff --git a/apps/electron/src/renderer/src/pages/basic/SyncCircle.tsx b/apps/electron/src/renderer/src/pages/basic/SyncCircle.tsx
index 94f3c994..a5b37405 100644
--- a/apps/electron/src/renderer/src/pages/basic/SyncCircle.tsx
+++ b/apps/electron/src/renderer/src/pages/basic/SyncCircle.tsx
@@ -71,10 +71,21 @@ export function SyncCircle({
   });
 
   const Description = () => {
-    let text = "等待同步";
-
-    if (data?.type === "reading") text = "读取中...";
-    else if (["image", "folder"].includes(data?.type ?? "")) text = "同步中...";
+    let text = "待同步数";
+
+    const { type = "" } = data ?? {};
+
+    switch (type) {
+      case "reading":
+        text = "读取中...";
+        break;
+      case "image":
+        text = "同步图片";
+        break;
+      case "folder":
+        text = "同步中...";
+        break;
+    }
 
     return (
       <p className="text-center text-xs text-neutral-content/70">{text}</p>
@@ -92,7 +103,7 @@ export function SyncCircle({
         } as React.CSSProperties
       }
     >
-      <p className="truncate text-center font-mono text-lg font-medium text-neutral-content">
+      <p className="truncate text-center font-mono text-lg font-medium text-info">
         {data?.count ?? pendingCount}
       </p>
 
diff --git a/apps/electron/src/renderer/src/pages/basic/index.tsx b/apps/electron/src/renderer/src/pages/basic/index.tsx
index d85055f5..d4db42f5 100644
--- a/apps/electron/src/renderer/src/pages/basic/index.tsx
+++ b/apps/electron/src/renderer/src/pages/basic/index.tsx
@@ -18,9 +18,6 @@ import { SyncCircle } from "./SyncCircle";
 const BasicPage = () => {
   const utils = trpc.useUtils();
 
-  // 同步中、初始化中 禁用按钮
-  const [disabled, setDisabled] = useState(false);
-
   const { data: config } = trpc.config.findUnique.useQuery();
 
   const { data: library } = trpc.library.findUnique.useQuery();
@@ -30,6 +27,12 @@ const BasicPage = () => {
     },
   });
 
+  // 同步中、初始化中 禁用按钮
+  const [disabled, setDisabled] = useState({
+    sync: library?.pendingCount === 0,
+    delete: false,
+  });
+
   const site = useSite();
 
   const onBeforeDeleteLibrary = () => {
@@ -63,6 +66,26 @@ const BasicPage = () => {
     }
   };
 
+  const SyncButton = () => {
+    if (config?.autoSync) {
+      return (
+        <button className="btn" disabled>
+          已开启自动同步
+        </button>
+      );
+    }
+
+    return (
+      <button
+        disabled={disabled.sync}
+        className="btn-neutral btn"
+        onClick={onClickSync}
+      >
+        {library?.pendingCount ? "同步" : "无需同步"}
+      </button>
+    );
+  };
+
   return (
     <Content title={<Title>基础信息</Title>}>
       <div className="px-4">
@@ -152,35 +175,25 @@ const BasicPage = () => {
               pendingCount={library?.pendingCount ?? 0}
               onListenData={(status) => {
                 if (status === "completed") {
-                  setDisabled(false);
+                  setDisabled({ sync: false, delete: false });
                 } else {
-                  !disabled && setDisabled(true);
+                  setDisabled({ sync: true, delete: true });
                 }
               }}
               onSyncData={(status) => {
                 if (status === "completed") {
-                  setDisabled(false);
+                  setDisabled({ sync: false, delete: false });
                 } else {
-                  !disabled && setDisabled(true);
+                  setDisabled({ sync: true, delete: true });
                 }
               }}
             />
           </div>
           <div className="w-1/2">
             <div className="m-auto flex h-full w-5/6 flex-col justify-center">
-              {config?.autoSync ? (
-                <button className="btn-disabled btn">已开启自动同步</button>
-              ) : (
-                <button
-                  disabled={disabled}
-                  className="btn-neutral btn"
-                  onClick={onClickSync}
-                >
-                  同步
-                </button>
-              )}
+              <SyncButton />
               <button
-                disabled={disabled}
+                disabled={disabled.delete}
                 className="btn-error btn-outline btn mt-4"
                 onClick={onBeforeDeleteLibrary}
               >
diff --git a/apps/electron/src/renderer/src/pages/color.tsx b/apps/electron/src/renderer/src/pages/color.tsx
index e78401a2..1d8b86ca 100644
--- a/apps/electron/src/renderer/src/pages/color.tsx
+++ b/apps/electron/src/renderer/src/pages/color.tsx
@@ -12,7 +12,7 @@ interface ItemProps {
 const Item = ({ color, onClick, active = false }: ItemProps) => {
   return (
     <div
-      className={`overflow-hidden rounded border border-base-content/20 hover:border-base-content/40 ${
+      className={`overflow-hidden rounded-box border border-base-content/20 hover:border-base-content/40 ${
         active ? "outline outline-2" : ""
       }`}
       data-set-theme={color}
@@ -58,7 +58,7 @@ const colorScheme = [
   ["cupcake", "light,angle"],
   ["bumblebee", "light,angle"],
   ["emerald", "light,angle"],
-  ["corporate", "light,right-angle"],
+  ["corporate", "light,angle"],
   ["synthwave", "dark,angle"],
   ["retro", "light,angle"],
   ["cyberpunk", "neutral,right-angle"],
@@ -67,22 +67,22 @@ const colorScheme = [
   ["garden", "light,angle"],
   ["forest", "dark,angle"],
   ["aqua", "neutral,angle"],
-  ["lofi", "light,right-angle"],
+  ["lofi", "light,angle"],
   ["pastel", "light,angle"],
   ["fantasy", "light,angle"],
-  ["wireframe", "light,right-angle"],
+  ["wireframe", "light,angle"],
   ["black", "dark,right-angle"],
   ["luxury", "dark,angle"],
   ["dracula", "dark,angle"],
   ["cmyk", "light,angle"],
   ["autumn", "light,angle"],
-  ["business", "dark,right-angle"],
+  ["business", "dark,angle"],
   ["acid", "light,angle"],
   ["lemonade", "light,angle"],
   ["night", "dark,angle"],
   ["coffee", "dark,angle"],
   ["winter", "light,angle"],
-  ["dim", "dark,right-angle"],
+  ["dim", "dark,angle"],
   ["nord", "light,angle"],
   ["sunset", "dark,angle"],
 ];