Merge pull request #544 from meetqy/520-同步按钮容易引起歧义-1

不同主题更加鲜明

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;

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>
 

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}
               >

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"],
 ];