chore: optimize frontend (#293)

* main

* chore: update style

---------

Co-authored-by: JustSong <songquanpeng@foxmail.com>

web/src/pages/About/index.js

@@ -46,9 +46,7 @@ const About = () => {
             about.startsWith('https://') ? <iframe
               src={about}
               style={{ width: '100%', height: '100vh', border: 'none' }}
-            /> : <Segment>
-              <div style={{ fontSize: 'larger' }} dangerouslySetInnerHTML={{ __html: about }}></div>
-            </Segment>
+            /> : <div style={{ fontSize: 'larger' }} dangerouslySetInnerHTML={{ __html: about }}></div>
           }
         </>
       }

web/src/pages/TopUp/index.js

@@ -7,24 +7,32 @@ const TopUp = () => {
   const [redemptionCode, setRedemptionCode] = useState('');
   const [topUpLink, setTopUpLink] = useState('');
   const [userQuota, setUserQuota] = useState(0);
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
   const topUp = async () => {
     if (redemptionCode === '') {
       showInfo('请输入充值码！')
       return;
     }
-    const res = await API.post('/api/user/topup', {
-      key: redemptionCode
-    });
-    const { success, message, data } = res.data;
-    if (success) {
-      showSuccess('充值成功！');
-      setUserQuota((quota) => {
-        return quota + data;
+    setIsSubmitting(true);
+    try {
+      const res = await API.post('/api/user/topup', {
+        key: redemptionCode
       });
-      setRedemptionCode('');
-    } else {
-      showError(message);
+      const { success, message, data } = res.data;
+      if (success) {
+        showSuccess('充值成功！');
+        setUserQuota((quota) => {
+          return quota + data;
+        });
+        setRedemptionCode('');
+      } else {
+        showError(message);
+      }
+    } catch (err) {
+      showError('请求失败');
+    } finally {
+      setIsSubmitting(false); 
     }
   };
 
@@ -74,8 +82,8 @@ const TopUp = () => {
             <Button color='green' onClick={openTopUpLink}>
               获取兑换码
             </Button>
-            <Button color='yellow' onClick={topUp}>
-              充值
+            <Button color='yellow' onClick={topUp} disabled={isSubmitting}>
+                {isSubmitting ? '兑换中...' : '兑换'}
             </Button>
           </Form>
         </Grid.Column>
@@ -92,5 +100,4 @@ const TopUp = () => {
   );
 };
 
-
-export default TopUp;
+export default TopUp;