显示带复习显示

src/pages/Memory/index.tsx

@@ -1,14 +1,14 @@
-import {Button, message, Modal} from 'antd';
-import React, {useEffect, useState} from 'react';
-import {PageHeaderWrapper} from '@ant-design/pro-layout';
-import {useSingleState} from 'nice-hooks';
+import { Button, message, Modal } from 'antd';
+import React, { useEffect, useState } from 'react';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import { useSingleState } from 'nice-hooks';
 import Quill from '@/pages/Memory/components/Quill';
 import UpdateForm from '@/pages/Memory/components/UpdateForm';
-import {TableListItem} from '../MemoryList/data.d';
+import { TableListItem } from '../MemoryList/data.d';
 import service from './service';
 import styles from './index.less';
-import {DownOutlined, ExclamationCircleOutlined} from '@ant-design/icons/lib';
-import {getRandom, getTextFromHtml} from "@/utils/utils";
+import { DownOutlined, ExclamationCircleOutlined } from '@ant-design/icons/lib';
+import { getRandom, getTextFromHtml } from '@/utils/utils';
 
 enum Step {
   MAIN = 0,
@@ -27,7 +27,7 @@ const TableList: React.FC<{}> = () => {
   const [showMore, setShowMore] = useState(false);
   let counting = false;
 
-  const {confirm} = Modal;
+  const { confirm } = Modal;
 
   const [state, setState] = useSingleState<State>({
     remindCount: 0,
@@ -62,7 +62,7 @@ const TableList: React.FC<{}> = () => {
       const res = await service.countRemind({});
       hide();
       if (res.success) {
-        setState({remindCount: parseInt(res.data, 10)});
+        setState({ remindCount: parseInt(res.data, 10) });
       }
       counting = false;
     } catch (error) {
@@ -82,7 +82,6 @@ const TableList: React.FC<{}> = () => {
     });
   };
 
-
   /**
    * 处理返回值
    * @param res
@@ -91,24 +90,23 @@ const TableList: React.FC<{}> = () => {
     // 只要有返回值，就使按钮可见
     setBtnDisable(false);
     if (res.success) {
-      setMemory({...memory, ...res.data});
+      setMemory({ ...memory, ...res.data });
     } else {
-      setState({step: Step.MAIN});
+      setState({ step: Step.MAIN });
     }
   };
 
   const memorySuccess = async (factorInt: number) => {
     setBtnDisable(true);
-    memoryRes(await service.memorySuccess({id: memory.id, factor: factorInt * getRandom()}));
+    memoryRes(await service.memorySuccess({ id: memory.id, factor: factorInt * getRandom() }));
   };
 
-
   const findNextLine = async () => {
     const res = await service.findNext({});
     if (res.success) {
-      setMemory({...memory, ...res.data});
+      setMemory({ ...memory, ...res.data });
     } else {
-      setState({step: Step.MAIN});
+      setState({ step: Step.MAIN });
     }
   };
 
@@ -119,7 +117,7 @@ const TableList: React.FC<{}> = () => {
       if (ev.key === ' ' && state.step === Step.MEMORY) {
         ev.preventDefault(); // 关闭浏览器快捷键
         if (state.showBack === false) {
-          setState({showBack: true});
+          setState({ showBack: true });
         } else {
           memorySuccess(2);
         }
@@ -127,36 +125,35 @@ const TableList: React.FC<{}> = () => {
         // 空格刷新
         // 如果待复习大于0，则直接进去
         if (state.remindCount > 0) {
-          setState({step: Step.MEMORY});
+          setState({ step: Step.MEMORY });
         } else {
           // 刷新一下，再判断是否应该去复习
           countRemind();
           if (state.remindCount > 0) {
-            setState({step: Step.MEMORY});
+            setState({ step: Step.MEMORY });
           }
         }
       } else if (ev.key.toLowerCase() === 'e') {
         // 快捷 E，进入编辑、新建页面
-        setState({step: Step.ADD});
+        setState({ step: Step.ADD });
       } else if (ev.key.toLowerCase() === 'escape') {
         // esc键回到主页
-        setState({step: Step.MAIN});
+        setState({ step: Step.MAIN });
       }
     };
-  }
+  };
 
   useEffect(() => {
     countRemind();
     setTimeout(() => {
       countRemind();
     }, 1000 * 60 * 60); // 每隔一个小时查询一次
-    bindShortKey()
-
+    bindShortKey();
   }, []);
 
   useEffect(() => {
     // 关闭背面，清空 memory
-    setState({showBack: false});
+    setState({ showBack: false });
     clearMemory();
 
     if (state.step === Step.MAIN) {
@@ -165,7 +162,7 @@ const TableList: React.FC<{}> = () => {
     } else if (state.step === Step.MEMORY) {
       findNextLine();
     }
-  }, [state.step])
+  }, [state.step]);
 
   useEffect(() => {
     // 判断是否为主页面刷新
@@ -174,10 +171,10 @@ const TableList: React.FC<{}> = () => {
     }
     // 进入复习页面后
     // 如果没有文字，并且也没有图片
-    if (getTextFromHtml(memory.back).length === 0 && memory.back.indexOf("img") < 0) {
-      setState({showBack: true});
+    if (getTextFromHtml(memory.back).length === 0 && memory.back.indexOf('img') < 0) {
+      setState({ showBack: true });
     } else {
-      setState({showBack: false});
+      setState({ showBack: false });
     }
     // 隐藏更多按钮
     setShowMore(false);
@@ -187,19 +184,25 @@ const TableList: React.FC<{}> = () => {
     <PageHeaderWrapper title={false}>
       {state.step === Step.MAIN ? (
         <div>
-          <div>待复习: {state.remindCount}</div>
-          <p/>
-          <Button type="primary" size="large" onClick={() => {
-            if (state.remindCount <= 0) {
-              message.info('已经复习完了哟！');
-              return;
-            }
-            setState({step: Step.MEMORY})
-          }}>
+          <div>
+            待复习：<b>{state.remindCount}</b>
+          </div>
+          <p />
+          <Button
+            type="primary"
+            size="large"
+            onClick={() => {
+              if (state.remindCount <= 0) {
+                message.info('已经复习完了哟！');
+                return;
+              }
+              setState({ step: Step.MEMORY });
+            }}
+          >
             复习
           </Button>
-          <p/>
-          <Button type="primary" size="large" onClick={() => setState({step: Step.ADD})}>
+          <p />
+          <Button type="primary" size="large" onClick={() => setState({ step: Step.ADD })}>
             添加
           </Button>
         </div>
@@ -209,23 +212,14 @@ const TableList: React.FC<{}> = () => {
         <div>
           正面：
           <p />
-          <Quill
-            theme="bubble"
-            readonly
-            onChange={() => {
-            }} value={memory.front}/>
-          <p/>
+          <Quill theme="bubble" readonly onChange={() => {}} value={memory.front} />
+          <p />
           {state.showBack ? (
-
             <div>
               反面：
               <p />
-              <Quill
-                theme="bubble"
-                readonly
-                onChange={() => {
-                }} value={memory.back}/>
-              <p/>
+              <Quill theme="bubble" readonly onChange={() => {}} value={memory.back} />
+              <p />
               <div className={styles.divBottom}>
                 <Button
                   type="primary"
@@ -258,12 +252,17 @@ const TableList: React.FC<{}> = () => {
                 </Button>
                 <span> </span>
 
-                <Button type="text" onClick={() => {
-                  setShowMore(!showMore);
-                }}><DownOutlined/></Button>
+                <Button
+                  type="text"
+                  onClick={() => {
+                    setShowMore(!showMore);
+                  }}
+                >
+                  <DownOutlined />
+                </Button>
                 {showMore ? (
                   <div>
-                    <p/>
+                    <p />
                     <div>
                       <Button
                         type="primary"
@@ -293,7 +292,7 @@ const TableList: React.FC<{}> = () => {
                         onClick={async () => {
                           confirm({
                             title: '确定删除吗?',
-                            icon: <ExclamationCircleOutlined/>,
+                            icon: <ExclamationCircleOutlined />,
                             content: '删除后无法恢复',
                             okText: '确定',
                             okType: 'danger',
@@ -311,12 +310,12 @@ const TableList: React.FC<{}> = () => {
                         删除
                       </Button>
                     </div>
-                    <p/>
+                    <p />
                     <div>
                       <Button
                         type="primary"
                         onClick={() => {
-                          setState({step: Step.ADD});
+                          setState({ step: Step.ADD });
                         }}
                       >
                         编辑
@@ -325,7 +324,7 @@ const TableList: React.FC<{}> = () => {
                       <Button
                         type="primary"
                         onClick={() => {
-                          setState({step: Step.MAIN});
+                          setState({ step: Step.MAIN });
                         }}
                       >
                         关闭
@@ -340,7 +339,7 @@ const TableList: React.FC<{}> = () => {
               <Button
                 type="primary"
                 onClick={() => {
-                  setState({showBack: true});
+                  setState({ showBack: true });
                 }}
               >
                 显示反面
@@ -354,7 +353,7 @@ const TableList: React.FC<{}> = () => {
         <UpdateForm
           onCancel={() => {
             bindShortKey();
-            setState({step: Step.MAIN});
+            setState({ step: Step.MAIN });
           }}
           modalVisible={state.step === Step.ADD}
           values={memory}