feat: improve frontend (#387)

* fork

* fork

* chore: update style

---------

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

web/src/pages/Channel/EditChannel.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { Button, Form, Header, Input, Message, Segment } from 'semantic-ui-react';
-import { useParams } from 'react-router-dom';
+import { useParams, useNavigate } from 'react-router-dom';
 import { API, showError, showInfo, showSuccess, verifyJSON } from '../../helpers';
 import { CHANNEL_OPTIONS } from '../../constants';
 
@@ -12,9 +12,14 @@ const MODEL_MAPPING_EXAMPLE = {
 
 const EditChannel = () => {
   const params = useParams();
+  const navigate = useNavigate();
   const channelId = params.id;
   const isEdit = channelId !== undefined;
   const [loading, setLoading] = useState(isEdit);
+  const handleCancel = () => {
+    navigate('/channel');
+  };
+  
   const originInputs = {
     name: '',
     type: 1,
@@ -381,6 +386,7 @@ const EditChannel = () => {
               </Form.Field>
             )
           }
+          <Button onClick={handleCancel}>取消</Button>
           <Button type={isEdit ? 'button' : 'submit'} positive onClick={submit}>提交</Button>
         </Form>
       </Segment>

web/src/pages/Home/index.js

@@ -14,10 +14,11 @@ const Home = () => {
     const { success, message, data } = res.data;
     if (success) {
       let oldNotice = localStorage.getItem('notice');
-      if (data !== oldNotice && data !== '') {
-        showNotice(data);
-        localStorage.setItem('notice', data);
-      }
+        if (data !== oldNotice && data !== '') {
+            const htmlNotice = marked(data);
+            showNotice(htmlNotice, true);
+            localStorage.setItem('notice', data);
+        }
     } else {
       showError(message);
     }

web/src/pages/Redemption/EditRedemption.js

@@ -1,11 +1,12 @@
 import React, { useEffect, useState } from 'react';
 import { Button, Form, Header, Segment } from 'semantic-ui-react';
-import { useParams } from 'react-router-dom';
+import { useParams, useNavigate } from 'react-router-dom';
 import { API, downloadTextAsFile, showError, showSuccess } from '../../helpers';
 import { renderQuota, renderQuotaWithPrompt } from '../../helpers/render';
 
 const EditRedemption = () => {
   const params = useParams();
+  const navigate = useNavigate();
   const redemptionId = params.id;
   const isEdit = redemptionId !== undefined;
   const [loading, setLoading] = useState(isEdit);
@@ -17,6 +18,10 @@ const EditRedemption = () => {
   const [inputs, setInputs] = useState(originInputs);
   const { name, quota, count } = inputs;
 
+  const handleCancel = () => {
+    navigate('/redemption');
+  };
+  
   const handleInputChange = (e, { name, value }) => {
     setInputs((inputs) => ({ ...inputs, [name]: value }));
   };
@@ -113,6 +118,7 @@ const EditRedemption = () => {
             </>
           }
           <Button positive onClick={submit}>提交</Button>
+          <Button onClick={handleCancel}>取消</Button>
         </Form>
       </Segment>
     </>