From 89eab211e49652198e1a54f288aeb378728e3a87 Mon Sep 17 00:00:00 2001
From: streakingman <z_max_y@163.com>
Date: Tue, 4 Oct 2022 16:48:23 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BA=A4=E4=BA=92=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ConfigDialog.tsx         | 10 +++++-
 src/components/ThemeChanger.module.scss | 44 ++++++++++++++++++-------
 src/components/ThemeChanger.tsx         |  7 ++--
 3 files changed, 46 insertions(+), 15 deletions(-)

diff --git a/src/components/ConfigDialog.tsx b/src/components/ConfigDialog.tsx
index 15cdf00..f22ee1b 100644
--- a/src/components/ConfigDialog.tsx
+++ b/src/components/ConfigDialog.tsx
@@ -256,8 +256,11 @@ export const ConfigDialog: FC<{
             });
     };
 
+    const [uploading, setUploading] = useState<boolean>(false);
     // 生成二维码和链接
     const onGenQrLinkClick = () => {
+        if (uploading) return;
+        setUploading(true);
         setConfigError('');
         generateTheme()
             .then((theme) => {
@@ -273,6 +276,7 @@ export const ConfigDialog: FC<{
                     setConfigError(
                         '五分钟内只能上传一次（用的人有点多十分抱歉😭），先保存预览看看效果把~'
                     );
+                    setUploading(false);
                     return;
                 }
 
@@ -294,11 +298,15 @@ export const ConfigDialog: FC<{
                     .catch(({ error }) => {
                         setConfigError(error);
                         setGenLink('');
+                    })
+                    .finally(() => {
+                        setUploading(false);
                     });
             })
             .catch((e) => {
                 setConfigError(e);
                 setGenLink('');
+                setUploading(false);
             });
     };
 
@@ -499,7 +507,7 @@ export const ConfigDialog: FC<{
                     保存并预览
                 </button>
                 <button className="flex-grow" onClick={onGenQrLinkClick}>
-                    生成二维码&链接
+                    生成二维码&链接{uploading && '...'}
                 </button>
                 <button className="flex-grow" onClick={closeMethod}>
                     关闭
diff --git a/src/components/ThemeChanger.module.scss b/src/components/ThemeChanger.module.scss
index c186400..0961501 100644
--- a/src/components/ThemeChanger.module.scss
+++ b/src/components/ThemeChanger.module.scss
@@ -1,3 +1,17 @@
+@keyframes gradient {
+    0% {
+        background-position: 0 50%;
+    }
+
+    50% {
+        background-position: 100% 50%;
+    }
+
+    100% {
+        background-position: 0 50%;
+    }
+}
+
 .container {
     position: fixed;
     right: 8px;
@@ -21,7 +35,7 @@
         position: absolute;
         right: 0;
         top: 0;
-        transition: 0.3s;
+        transition: 0.4s;
         overflow: hidden;
 
         img {
@@ -31,18 +45,26 @@
         }
     }
 
+    .diy{
+        width: 52px;
+        font-weight: 900;
+        font-size: 18px;
+        background-image: linear-gradient(
+                45deg,
+                #ee7752,
+                #e73c7e,
+                #23a6d5,
+                #23d5ab
+        );
+        background-size: 400% 400%;
+        background-position: 0 0;
+        animation: gradient 6s ease infinite;
+    }
+
     &.open {
         .diy {
-            width: 80px;
-            font-weight: 900;
-            font-size: 18px;
-            background-image: linear-gradient(
-                    -45deg,
-                    #ee7752,
-                    #e73c7e,
-                    #23a6d5,
-                    #23d5ab
-            );
+            width: 86px;
+            animation: gradient 2s ease infinite;
         }
     }
 }
diff --git a/src/components/ThemeChanger.tsx b/src/components/ThemeChanger.tsx
index 29441f6..b85b342 100644
--- a/src/components/ThemeChanger.tsx
+++ b/src/components/ThemeChanger.tsx
@@ -59,11 +59,12 @@ export const ThemeChanger: FC<{
                     onDiyClick();
                 }}
                 style={{
-                    opacity: open ? 1 : 0.3,
-                    transform: open ? `translateY(-${110 * 6}%)` : '',
+                    transform: open
+                        ? `translateY(-${110 * 6}%)`
+                        : 'translateY(-110%)',
                 }}
             >
-                DIY!
+                {open ? '点我整活' : 'DIY!'}
             </div>
             <div
                 onClick={() => setOpen(!open)}