fix: 交互优化

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

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 @@
         }
     }
 
-    &.open {
-        .diy {
-            width: 80px;
+    .diy{
+        width: 52px;
         font-weight: 900;
         font-size: 18px;
         background-image: linear-gradient(
-                    -45deg,
+                45deg,
                 #ee7752,
                 #e73c7e,
                 #23a6d5,
                 #23d5ab
         );
+        background-size: 400% 400%;
+        background-position: 0 0;
+        animation: gradient 6s ease infinite;
+    }
+
+    &.open {
+        .diy {
+            width: 86px;
+            animation: gradient 2s ease infinite;
         }
     }
 }

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