fix: replace word form label with actual title

src/apis/dicts.ts

@@ -57,7 +57,7 @@ interface CreateDictRequest {
   name: string;
   valueTitle: string;
   meaningTitle: string;
-  extraTitle: string;
+  extraTitle?: string;
 }
 
 export const useCreateDict = () => async (request: CreateDictRequest) =>
@@ -75,7 +75,7 @@ interface UpdateDictRequest {
   name: string;
   valueTitle: string;
   meaningTitle: string;
-  extraTitle: string;
+  extraTitle?: string;
 }
 
 export const useUpdateDict = () => async (request: UpdateDictRequest) =>

src/apis/words.ts

@@ -14,7 +14,7 @@ export interface WordResult {
 interface CreateWordRequest {
   value: string;
   meaning: string;
-  extra: string;
+  extra?: string;
   dictID: number;
 }
 
@@ -32,7 +32,7 @@ interface UpdateWordRequest {
   id: number;
   value: string;
   meaning: string;
-  extra: string;
+  extra?: string;
   star: boolean;
 }
 

src/components/DictModal.tsx

@@ -36,13 +36,13 @@ const DictModal: React.FC<DictModalProps> = ({
           name: string;
           valueTitle: string;
           meaningTitle: string;
-          extraTitle: string;
+          extraTitle?: string;
         }) =>
           void (async () => {
             try {
               setLoading(true);
               if (initialDict) {
-                await updateDict({ ...initialDict, ...values });
+                await updateDict({ id: initialDict.id, ...values });
                 void message.success('更新成功');
               } else {
                 await createDict(values);
@@ -61,30 +61,30 @@ const DictModal: React.FC<DictModalProps> = ({
         }
       >
         <Form.Item
-          label="词库名称"
           name="name"
+          label="词库名称"
           rules={[{ required: true, message: '请输入词库名称' }]}
           validateTrigger="onBlur"
         >
           <Input placeholder="请输入词库名称" />
         </Form.Item>
         <Form.Item
-          label="单词标题"
           name="valueTitle"
+          label="单词标题"
           rules={[{ required: true, message: '请输入单词标题' }]}
           validateTrigger="onBlur"
         >
           <Input placeholder="请输入单词标题（如：英文/日文）" />
         </Form.Item>
         <Form.Item
-          label="词义标题"
           name="meaningTitle"
+          label="词义标题"
           rules={[{ required: true, message: '请输入词义标题' }]}
           validateTrigger="onBlur"
         >
           <Input placeholder="请输入词义标题（如：中文）" />
         </Form.Item>
-        <Form.Item label="附加标题" name="extraTitle">
+        <Form.Item name="extraTitle" label="附加标题">
           <Input placeholder="请输入附加标题（如：音标/假名）" />
         </Form.Item>
         <Form.Item label=" " colon={false}>

src/components/UserModal.tsx

@@ -55,8 +55,8 @@ const UserModal: React.FC<UserModalProps> = props => {
         }
       >
         <Form.Item
-          label="用户名"
           name="name"
+          label="用户名"
           rules={[
             { required: true, message: '请输入用户名' },
             { min: 2, max: 16, message: '用户名长度应在 2 到 16 之间' },
@@ -67,8 +67,8 @@ const UserModal: React.FC<UserModalProps> = props => {
           <Input placeholder="请输入用户名" />
         </Form.Item>
         <Form.Item
-          label="密码"
           name="password"
+          label="密码"
           rules={[
             { required: true, message: '请输入密码' },
             { min: 2, max: 16, message: '密码长度应在 2 到 16 之间' },

src/components/WordModal.tsx

@@ -1,18 +1,19 @@
 import React, { useState, useEffect } from 'react';
 import { Modal, Form, Input, Button, message } from 'antd';
 import type { ModalProps } from 'antd';
+import type { DictResult } from '../apis/dicts';
 import type { WordResult } from '../apis/words';
 import { useCreateWord, useUpdateWord } from '../apis/words';
 
 interface WordModalProps extends ModalProps {
-  dictID: number;
+  dict: DictResult;
   initialWord?: WordResult;
   refresh: () => void;
   onCancel: () => void;
 }
 
 const WordModal: React.FC<WordModalProps> = ({
-  dictID,
+  dict,
   initialWord,
   refresh,
   ...props
@@ -43,16 +44,24 @@ const WordModal: React.FC<WordModalProps> = ({
         wrapperCol={{ span: 18 }}
         form={form}
         preserve={false}
-        onFinish={(values: { value: string; meaning: string; extra: string }) =>
+        onFinish={(values: {
+          value: string;
+          meaning: string;
+          extra?: string;
+        }) =>
           void (async () => {
             try {
               setLoading(true);
               if (initialWord) {
-                await updateWord({ ...initialWord, ...values });
+                await updateWord({
+                  id: initialWord.id,
+                  ...values,
+                  star: initialWord.star,
+                });
                 void message.success('更新成功');
                 props.onCancel();
               } else {
-                await createWord({ ...values, dictID });
+                await createWord({ ...values, dictID: dict.id });
                 void message.success('创建成功');
                 form.resetFields();
               }
@@ -68,24 +77,26 @@ const WordModal: React.FC<WordModalProps> = ({
         }
       >
         <Form.Item
-          label="单词"
           name="value"
-          rules={[{ required: true, message: '请输入单词' }]}
+          label={dict.valueTitle}
+          rules={[{ required: true, message: `请输入${dict.valueTitle}` }]}
           validateTrigger="onBlur"
         >
-          <Input placeholder="请输入单词（如：good）" />
+          <Input placeholder={`请输入${dict.valueTitle}`} />
         </Form.Item>
         <Form.Item
-          label="词义"
           name="meaning"
-          rules={[{ required: true, message: '请输入词义' }]}
+          label={dict.meaningTitle}
+          rules={[{ required: true, message: `请输入${dict.meaningTitle}` }]}
           validateTrigger="onBlur"
         >
-          <Input placeholder="请输入词义（如：好的）" />
-        </Form.Item>
-        <Form.Item label="附加" name="extra">
-          <Input placeholder="请输入附加（如：[ɡʊd]）" />
+          <Input placeholder={`请输入${dict.meaningTitle}`} />
         </Form.Item>
+        {dict.extraTitle && (
+          <Form.Item name="extra" label={dict.extraTitle}>
+            <Input placeholder={`请输入${dict.extraTitle}`} />
+          </Form.Item>
+        )}
         <Form.Item label=" " colon={false}>
           <Button htmlType="submit" type="primary" loading={loading}>
             {initialWord ? '更新' : '创建'}

src/layout/PageLayout.module.css

@@ -9,7 +9,7 @@
   transition: all 0.3s;
 }
 
-.hide {
+.hidden {
   opacity: 0;
 }
 

src/layout/PageLayout.tsx

@@ -29,7 +29,7 @@ const PageLayout: React.FC = () => {
     <Layout>
       <Header className={styles.header}>
         <Row justify="space-between">
-          <Col className={`${styles.arrow} ${hideArrow ? styles.hide : ''}`}>
+          <Col className={`${styles.arrow} ${hideArrow ? styles.hidden : ''}`}>
             <Link to={pathname.slice(0, pathname.lastIndexOf('/'))}>
               <Button type="link" icon={<ArrowLeftOutlined />} />
             </Link>

src/pages/DictPage.tsx

@@ -176,13 +176,15 @@ const DictPage: React.FC = () => {
           </List.Item>
         )}
       />
-      <WordModal
-        dictID={parseInt(dictID)}
-        initialWord={initialWord}
-        refresh={refresh}
-        open={open}
-        onCancel={() => setOpen(false)}
-      />
+      {dict && (
+        <WordModal
+          dict={dict}
+          initialWord={initialWord}
+          refresh={refresh}
+          open={open}
+          onCancel={() => setOpen(false)}
+        />
+      )}
     </div>
   );
 };

src/pages/MemoPage.tsx

@@ -47,10 +47,10 @@ const MemoPage: React.FC = () => {
   const updateWord = useUpdateWord();
 
   useEffect(() => {
-    if (!shuffledWords && words?.list) {
+    if (words?.list) {
       setShuffledWords(_.shuffle(words.list));
     }
-  }, [shuffledWords, words?.list]);
+  }, [words?.list]);
 
   const mutateWordsList = (word: WordResult, index: number) =>
     shuffledWords &&
@@ -125,21 +125,23 @@ const MemoPage: React.FC = () => {
                   </Button>
                 )}
               </Col>
-              <Col className={styles.secondaryText} flex="1">
-                {showExtra ? (
-                  <Text>{shuffledWords[index].extra}</Text>
-                ) : (
-                  <Button
-                    type="text"
-                    block
-                    size="large"
-                    icon={<EyeOutlined />}
-                    onClick={() => setShowExtra(true)}
-                  >
-                    {dict.extraTitle}
-                  </Button>
-                )}
-              </Col>
+              {dict.extraTitle && (
+                <Col className={styles.secondaryText} flex="1">
+                  {showExtra ? (
+                    <Text>{shuffledWords[index].extra}</Text>
+                  ) : (
+                    <Button
+                      type="text"
+                      block
+                      size="large"
+                      icon={<EyeOutlined />}
+                      onClick={() => setShowExtra(true)}
+                    >
+                      {dict.extraTitle}
+                    </Button>
+                  )}
+                </Col>
+              )}
             </Row>
             <Row justify="center">
               <Col>