feat: show index on memo page

src/layout/PageLayout.tsx

@@ -36,7 +36,7 @@ const PageLayout: React.FC = () => {
           </Col>
           <Col
             className={`${styles.title} ${hideArrow ? '' : styles.margin}`}
-            flex={1}
+            flex="1"
           >
             <Text strong>Woord</Text>
           </Col>

src/pages/MemoPage.module.css

@@ -13,6 +13,11 @@
 }
 
 .secondaryText {
-  line-height: 32px;
+  font-size: 16px;
+  line-height: 40px;
   text-align: center;
 }
+
+.right {
+  text-align: right;
+}

src/pages/MemoPage.tsx

@@ -115,6 +115,7 @@ const MemoPage: React.FC = () => {
                   <Button
                     type="text"
                     block
+                    size="large"
                     icon={<EyeOutlined />}
                     onClick={() => setShowValueOrMeaning(true)}
                   >
@@ -131,6 +132,7 @@ const MemoPage: React.FC = () => {
                   <Button
                     type="text"
                     block
+                    size="large"
                     icon={<EyeOutlined />}
                     onClick={() => setShowExtra(true)}
                   >
@@ -139,17 +141,7 @@ const MemoPage: React.FC = () => {
                 )}
               </Col>
             </Row>
-            <Row>
-              <Col flex="1">
-                <Button
-                  type="link"
-                  block
-                  disabled={index <= 0}
-                  onClick={() => mutateIndex(index - 1)}
-                >
-                  <ArrowLeftOutlined /> 上一个
-                </Button>
-              </Col>
+            <Row justify="center">
               <Col>
                 <Button
                   type={shuffledWords[index].star ? 'primary' : 'default'}
@@ -181,11 +173,26 @@ const MemoPage: React.FC = () => {
                   {shuffledWords[index].star ? '取消易错词' : '标记易错词'}
                 </Button>
               </Col>
+            </Row>
+            <Row align="middle">
               <Col flex="1">
+                <Button
+                  type="link"
+                  disabled={index <= 0}
+                  onClick={() => mutateIndex(index - 1)}
+                >
+                  <ArrowLeftOutlined /> 上一个
+                </Button>
+              </Col>
+              <Col>
+                <Text type="secondary">
+                  {index + 1} / {shuffledWords.length}
+                </Text>
+              </Col>
+              <Col className={styles.right} flex="1">
                 {index >= shuffledWords.length - 1 ? (
                   <Button
                     type="link"
-                    block
                     onClick={() => {
                       setShuffledWords(_.shuffle(shuffledWords));
                       mutateIndex(0);
@@ -194,11 +201,7 @@ const MemoPage: React.FC = () => {
                     再来一次 <ReloadOutlined />
                   </Button>
                 ) : (
-                  <Button
-                    type="link"
-                    block
-                    onClick={() => mutateIndex(index + 1)}
-                  >
+                  <Button type="link" onClick={() => mutateIndex(index + 1)}>
                     下一个 <ArrowRightOutlined />
                   </Button>
                 )}