chore: update default theme style

web/default/src/pages/Redemption/EditRedemption.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Button, Form, Header, Segment } from 'semantic-ui-react';
+import { Button, Form, Card } from 'semantic-ui-react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { API, downloadTextAsFile, showError, showSuccess } from '../../helpers';
 import { renderQuota, renderQuotaWithPrompt } from '../../helpers/render';
@@ -13,7 +13,7 @@ const EditRedemption = () => {
   const originInputs = {
     name: '',
     quota: 100000,
-    count: 1
+    count: 1,
   };
   const [inputs, setInputs] = useState(originInputs);
   const { name, quota, count } = inputs;
@@ -21,7 +21,7 @@ const EditRedemption = () => {
   const handleCancel = () => {
     navigate('/redemption');
   };
-  
+
   const handleInputChange = (e, { name, value }) => {
     setInputs((inputs) => ({ ...inputs, [name]: value }));
   };
@@ -49,10 +49,13 @@ const EditRedemption = () => {
     localInputs.quota = parseInt(localInputs.quota);
     let res;
     if (isEdit) {
-      res = await API.put(`/api/redemption/`, { ...localInputs, id: parseInt(redemptionId) });
+      res = await API.put(`/api/redemption/`, {
+        ...localInputs,
+        id: parseInt(redemptionId),
+      });
     } else {
       res = await API.post(`/api/redemption/`, {
-        ...localInputs
+        ...localInputs,
       });
     }
     const { success, message, data } = res.data;
@@ -67,61 +70,67 @@ const EditRedemption = () => {
       showError(message);
     }
     if (!isEdit && data) {
-      let text = "";
+      let text = '';
       for (let i = 0; i < data.length; i++) {
-        text += data[i] + "\n";
+        text += data[i] + '\n';
       }
       downloadTextAsFile(text, `${inputs.name}.txt`);
     }
   };
 
   return (
-    <>
-      <Segment loading={loading}>
-        <Header as='h3'>{isEdit ? '更新兑换码信息' : '创建新的兑换码'}</Header>
-        <Form autoComplete='new-password'>
-          <Form.Field>
-            <Form.Input
-              label='名称'
-              name='name'
-              placeholder={'请输入名称'}
-              onChange={handleInputChange}
-              value={name}
-              autoComplete='new-password'
-              required={!isEdit}
-            />
-          </Form.Field>
-          <Form.Field>
-            <Form.Input
-              label={`额度${renderQuotaWithPrompt(quota)}`}
-              name='quota'
-              placeholder={'请输入单个兑换码中包含的额度'}
-              onChange={handleInputChange}
-              value={quota}
-              autoComplete='new-password'
-              type='number'
-            />
-          </Form.Field>
-          {
-            !isEdit && <>
-              <Form.Field>
-                <Form.Input
-                  label='生成数量'
-                  name='count'
-                  placeholder={'请输入生成数量'}
-                  onChange={handleInputChange}
-                  value={count}
-                  autoComplete='new-password'
-                  type='number'
-                />
-              </Form.Field>
-            </>
-          }
-          <Button positive onClick={submit}>提交</Button>
-          <Button onClick={handleCancel}>取消</Button>
-        </Form>
-      </Segment>
-    </>
+    <div className='dashboard-container'>
+      <Card fluid className='chart-card'>
+        <Card.Content>
+          <Card.Header className='header'>
+            {isEdit ? '更新兑换码信息' : '创建新的兑换码'}
+          </Card.Header>
+          <Form loading={loading} autoComplete='new-password'>
+            <Form.Field>
+              <Form.Input
+                label='名称'
+                name='name'
+                placeholder={'请输入名称'}
+                onChange={handleInputChange}
+                value={name}
+                autoComplete='new-password'
+                required={!isEdit}
+              />
+            </Form.Field>
+            <Form.Field>
+              <Form.Input
+                label={`额度${renderQuotaWithPrompt(quota)}`}
+                name='quota'
+                placeholder={'请输入单个兑换码中包含的额度'}
+                onChange={handleInputChange}
+                value={quota}
+                autoComplete='new-password'
+                type='number'
+              />
+            </Form.Field>
+            {!isEdit && (
+              <>
+                <Form.Field>
+                  <Form.Input
+                    label='生成数量'
+                    name='count'
+                    placeholder={'请输入生成数量'}
+                    onChange={handleInputChange}
+                    value={count}
+                    autoComplete='new-password'
+                    type='number'
+                  />
+                </Form.Field>
+              </>
+            )}
+            <Button positive onClick={submit}>
+              提交
+            </Button>
+            <Button onClick={handleCancel}>取消</Button>
+          </Form>
+        </Card.Content>
+      </Card>
+    </div>
   );
 };