feat: vr图比例调整

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;