诗词注解优化

dist/asset-manifest.json

@@ -1,16 +1,16 @@
 {
   "/umi.css": "/umi.3237de05.css",
-  "/umi.js": "/umi.c87e198f.js",
+  "/umi.js": "/umi.f1794508.js",
   "/t__plugin-layout__Layout.css": "/t__plugin-layout__Layout.44b8ae54.chunk.css",
   "/t__plugin-layout__Layout.js": "/t__plugin-layout__Layout.85d3f9bc.async.js",
-  "/p__PoemPage.js": "/p__PoemPage.27a1870e.async.js",
+  "/p__PoemPage.js": "/p__PoemPage.172ee8ed.async.js",
   "/p__404.css": "/p__404.572eeed8.chunk.css",
   "/p__404.js": "/p__404.341bc6c9.async.js",
   "/799.f321cbac.async.js": "/799.f321cbac.async.js",
   "/105.2ed7a7f1.chunk.css": "/105.2ed7a7f1.chunk.css",
   "/105.a25c9d08.async.js": "/105.a25c9d08.async.js",
-  "/502.7bff7c20.chunk.css": "/502.7bff7c20.chunk.css",
-  "/502.219197d7.async.js": "/502.219197d7.async.js",
+  "/594.7bff7c20.chunk.css": "/594.7bff7c20.chunk.css",
+  "/594.dbe33938.async.js": "/594.dbe33938.async.js",
   "/icons/icon-512x512.png": "/icons/icon-512x512.png",
   "/favicon.ico": "/favicon.ico",
   "/logo.svg": "/logo.svg",

dist/index.html

@@ -249,6 +249,6 @@
       </div>
     </div>
 
-    <script src="/umi.c87e198f.js"></script>
+    <script src="/umi.f1794508.js"></script>
   </body>
 </html>

dist/poem/index.html

@@ -249,6 +249,6 @@
       </div>
     </div>
 
-    <script src="/umi.c87e198f.js"></script>
+    <script src="/umi.f1794508.js"></script>
   </body>
 </html>

src/pages/PoemPage/components/PoemForm.tsx

@@ -1,12 +1,11 @@
 import AuthorSelect from '@/components/AuthorSelect';
+import { poemDetailUsingGET, savePoemUsingPOST } from '@/services/luigi/poem';
+import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
 import { DrawerForm, ProFormText, ProFormTextArea } from '@ant-design/pro-form';
-import { Button, Form, message } from 'antd';
+import { Button, Form, Input, message, Col, Row } from 'antd';
 import React, { useRef } from 'react';
 
-import { poemDetailUsingGET, savePoemUsingPOST } from '@/services/luigi/poem';
-
 import type { ProFormInstance } from '@ant-design/pro-form';
-
 const PoemForm: React.FC<{
   triggerText: string;
   formTitle: string;
@@ -57,13 +56,6 @@ const PoemForm: React.FC<{
         placeholder="请输入"
       />
       <ProFormText width="md" name="line" label="首行" placeholder="请输入" />
-      <ProFormTextArea
-        fieldProps={{ autoSize: true }}
-        width="md"
-        name="note"
-        label="解析"
-        placeholder="请输入"
-      />
       <ProFormTextArea
         fieldProps={{ autoSize: true }}
         width="md"
@@ -71,6 +63,72 @@ const PoemForm: React.FC<{
         label="翻译"
         placeholder="请输入"
       />
+      <Form.List name="noteList">
+        {(fields, { add, remove }, { errors }) => (
+          <>
+            <Form.Item label="注解" required={false}>
+              {fields.map((field) => (
+                <Row style={{ marginBottom: '20px' }} key={field.key} justify="space-between">
+                  <Col span={10}>
+                    <Form.Item
+                      {...field}
+                      label="引文"
+                      name={[field.name, 'citation']}
+                      validateTrigger={['onChange', 'onBlur']}
+                      rules={[
+                        {
+                          required: true,
+                          whitespace: true,
+                          message: '引文不能为空',
+                        },
+                      ]}
+                      noStyle
+                    >
+                      <Input placeholder="引文" />
+                    </Form.Item>
+                  </Col>
+                  <Col span={10}>
+                    <Form.Item
+                      {...field}
+                      label="注释"
+                      name={[field.name, 'annotation']}
+                      validateTrigger={['onChange', 'onBlur']}
+                      rules={[
+                        {
+                          required: true,
+                          whitespace: true,
+                          message: '注释不能为空',
+                        },
+                      ]}
+                      noStyle
+                    >
+                      <Input placeholder="注释" />
+                    </Form.Item>
+                  </Col>
+
+                  {fields.length > 0 ? (
+                    <MinusCircleOutlined
+                      className="dynamic-delete-button"
+                      onClick={() => remove(field.name)}
+                    />
+                  ) : null}
+                </Row>
+              ))}
+              <Form.Item>
+                <Button
+                  type="dashed"
+                  onClick={() => add()}
+                  style={{ width: '60%' }}
+                  icon={<PlusOutlined />}
+                >
+                  添加注解
+                </Button>
+                <Form.ErrorList errors={errors} />
+              </Form.Item>
+            </Form.Item>
+          </>
+        )}
+      </Form.List>
     </DrawerForm>
   );
 };