From 3f9ad4b2df0e9f9ca1843c3f48d2f5d26d9abc3c Mon Sep 17 00:00:00 2001
From: mozzie <himozzie@foxmail.com>
Date: Wed, 8 Mar 2023 18:00:09 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20vr=E5=9B=BE=E6=AF=94=E4=BE=8B=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/view/Course/Create/Chatpter/index.tsx | 63 ++++++++++++++++++-
 1 file changed, 62 insertions(+), 1 deletion(-)

diff --git a/apps/admin/src/view/Course/Create/Chatpter/index.tsx b/apps/admin/src/view/Course/Create/Chatpter/index.tsx
index ff2fbc2..9fd791e 100644
--- a/apps/admin/src/view/Course/Create/Chatpter/index.tsx
+++ b/apps/admin/src/view/Course/Create/Chatpter/index.tsx
@@ -1,10 +1,71 @@
+import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons";
+import { Button, Col, Form, Input, Row, Space, Typography } from "antd";
+const { Text } = Typography;
+
 interface IProps {
   onChange?: Function;
   styles?: React.CSSProperties;
 }
 
 const Chatpter = (props: IProps) => {
-  return <div style={{ ...props.styles }}>123</div>;
+  const [form] = Form.useForm();
+
+  const onBlur = () => {
+    console.log(form.getFieldsValue().chapter);
+  };
+
+  return (
+    <div style={{ ...props.styles }}>
+      <Form form={form} style={{ maxWidth: 600 }}>
+        <Form.List name="chapter">
+          {(fields, { add, remove }, { errors }) => (
+            <>
+              {fields.map((field, index) => (
+                <Form.Item required={false} key={field.key}>
+                  <Form.Item
+                    {...field}
+                    validateTrigger={["onChange", "onBlur"]}
+                    rules={[{ required: true, message: "请输入章节名称" }]}
+                    noStyle
+                  >
+                    <Input
+                      placeholder="请输入章节名称"
+                      onBlur={onBlur}
+                      style={{ width: "60%" }}
+                    />
+                    <Text>{JSON.stringify(field)}</Text>
+                  </Form.Item>
+                  {fields.length > 1 ? (
+                    <MinusCircleOutlined onClick={() => remove(field.name)} />
+                  ) : null}
+                </Form.Item>
+              ))}
+              <Form.Item>
+                <Space>
+                  <Button
+                    type="dashed"
+                    onClick={() => add("The head item", 0)}
+                    block
+                    icon={<PlusOutlined />}
+                  >
+                    1级章节
+                  </Button>
+                  <Button
+                    type="primary"
+                    onClick={() => add("The head item", 0)}
+                    block
+                    icon={<PlusOutlined />}
+                  >
+                    2级章节
+                  </Button>
+                </Space>
+              </Form.Item>
+            </>
+          )}
+        </Form.List>
+      </Form>
+    </div>
+  );
 };
 
 export default Chatpter;