aadd
This commit is contained in:
ditiqi
parent
548187169f
commit
ad38c5ca39
|
|
@ -1,639 +0,0 @@
|
||||||
import {
|
|
||||||
PlusOutlined,
|
|
||||||
DragOutlined,
|
|
||||||
DeleteOutlined,
|
|
||||||
CaretRightOutlined,
|
|
||||||
SaveOutlined,
|
|
||||||
} from "@ant-design/icons";
|
|
||||||
import {
|
|
||||||
Form,
|
|
||||||
Alert,
|
|
||||||
Button,
|
|
||||||
Input,
|
|
||||||
Select,
|
|
||||||
Space,
|
|
||||||
Collapse,
|
|
||||||
message,
|
|
||||||
} from "antd";
|
|
||||||
import React, { useCallback, useEffect, useState } from "react";
|
|
||||||
import {
|
|
||||||
DndContext,
|
|
||||||
closestCenter,
|
|
||||||
KeyboardSensor,
|
|
||||||
PointerSensor,
|
|
||||||
useSensor,
|
|
||||||
useSensors,
|
|
||||||
DragEndEvent,
|
|
||||||
} from "@dnd-kit/core";
|
|
||||||
import { api, emitDataChange } from "@nice/client";
|
|
||||||
import {
|
|
||||||
arrayMove,
|
|
||||||
SortableContext,
|
|
||||||
sortableKeyboardCoordinates,
|
|
||||||
useSortable,
|
|
||||||
verticalListSortingStrategy,
|
|
||||||
} from "@dnd-kit/sortable";
|
|
||||||
import { CSS } from "@dnd-kit/utilities";
|
|
||||||
import QuillEditor from "../../../../common/editor/quill/QuillEditor";
|
|
||||||
import { TusUploader } from "../../../../common/uploader/TusUploader";
|
|
||||||
import { Lecture, LectureType, PostType } from "@nice/common";
|
|
||||||
import { useCourseEditor } from "../context/CourseEditorContext";
|
|
||||||
import { usePost } from "@nice/client";
|
|
||||||
import toast from "react-hot-toast";
|
|
||||||
interface SectionData {
|
|
||||||
id: string;
|
|
||||||
title: string;
|
|
||||||
content?: string;
|
|
||||||
courseId?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface LectureData {
|
|
||||||
id: string;
|
|
||||||
title: string;
|
|
||||||
type?: LectureType;
|
|
||||||
content?: string;
|
|
||||||
sectionId?: string;
|
|
||||||
}
|
|
||||||
const useCourseActions = () => {
|
|
||||||
const { create, update, softDeleteByIds } = usePost();
|
|
||||||
|
|
||||||
const softDeleteById = useCallback(
|
|
||||||
async (id: string) => {
|
|
||||||
console.log("oftDeleteById");
|
|
||||||
softDeleteByIds.mutateAsync(
|
|
||||||
{
|
|
||||||
ids: [id],
|
|
||||||
}
|
|
||||||
// {
|
|
||||||
// onSettled: () => {
|
|
||||||
// message.success("删除成功");
|
|
||||||
// emitDataChange(
|
|
||||||
// ObjectType.DEPARTMENT,
|
|
||||||
// props.data as any,
|
|
||||||
// CrudOperation.DELETED
|
|
||||||
// );
|
|
||||||
// },
|
|
||||||
// }
|
|
||||||
);
|
|
||||||
return;
|
|
||||||
// return Promise.resolve({ id: "1", title: values.title || "" });
|
|
||||||
},
|
|
||||||
[update]
|
|
||||||
);
|
|
||||||
const updateSection = useCallback(
|
|
||||||
(values: Partial<SectionData>) => {
|
|
||||||
console.log("updateSection", values);
|
|
||||||
return Promise.resolve({ id: "1", title: values.title || "" });
|
|
||||||
},
|
|
||||||
[update]
|
|
||||||
);
|
|
||||||
|
|
||||||
const createSection = useCallback(
|
|
||||||
async (values: Partial<SectionData>, courseId: string) => {
|
|
||||||
console.log("createSection", values);
|
|
||||||
const section = await create.mutateAsync({
|
|
||||||
data: {
|
|
||||||
title: values?.title,
|
|
||||||
type: PostType.SECTION,
|
|
||||||
parentId: courseId,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
return section;
|
|
||||||
},
|
|
||||||
[create]
|
|
||||||
);
|
|
||||||
|
|
||||||
return { updateSection, createSection, softDeleteById };
|
|
||||||
};
|
|
||||||
|
|
||||||
const updateLecture = (values: Partial<LectureData>): Promise<LectureData> => {
|
|
||||||
console.log("updateLecture", values);
|
|
||||||
return Promise.resolve({ id: "1", title: values.title || "" });
|
|
||||||
};
|
|
||||||
|
|
||||||
const createLecture = (values: Partial<LectureData>): Promise<LectureData> => {
|
|
||||||
console.log("createLecture", values);
|
|
||||||
return Promise.resolve({ id: "1", title: values.title || "" });
|
|
||||||
};
|
|
||||||
|
|
||||||
const CourseContentFormHeader = () => (
|
|
||||||
<Alert
|
|
||||||
type="info"
|
|
||||||
message="创建您的课程大纲"
|
|
||||||
description={
|
|
||||||
<>
|
|
||||||
<p>通过组织清晰的章节和课时,帮助学员更好地学习。建议:</p>
|
|
||||||
<ul className="mt-2 list-disc list-inside">
|
|
||||||
<li>将相关内容组织到章节中</li>
|
|
||||||
<li>每个章节建议包含 3-7 个课时</li>
|
|
||||||
<li>课时可以是视频、文章或测验</li>
|
|
||||||
</ul>
|
|
||||||
</>
|
|
||||||
}
|
|
||||||
className="mb-8"
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
|
|
||||||
const CourseSectionEmpty = () => (
|
|
||||||
<div className="text-center py-12 bg-gray-50 rounded-lg border-2 border-dashed">
|
|
||||||
<div className="text-gray-500">
|
|
||||||
<PlusOutlined className="text-4xl mb-4" />
|
|
||||||
<h3 className="text-lg font-medium mb-2">开始创建您的课程内容</h3>
|
|
||||||
<p className="text-sm">点击下方按钮添加第一个章节</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
interface SortableSectionProps {
|
|
||||||
id: string;
|
|
||||||
courseId?: string;
|
|
||||||
field: SectionData;
|
|
||||||
remove: () => void;
|
|
||||||
children: React.ReactNode;
|
|
||||||
}
|
|
||||||
|
|
||||||
const SortableSection: React.FC<SortableSectionProps> = ({
|
|
||||||
id,
|
|
||||||
field,
|
|
||||||
remove,
|
|
||||||
courseId,
|
|
||||||
children,
|
|
||||||
}) => {
|
|
||||||
const {
|
|
||||||
attributes,
|
|
||||||
listeners,
|
|
||||||
setNodeRef,
|
|
||||||
transform,
|
|
||||||
transition,
|
|
||||||
isDragging,
|
|
||||||
} = useSortable({ id });
|
|
||||||
|
|
||||||
const [form] = Form.useForm();
|
|
||||||
const [editing, setEditing] = useState(field.id ? false : true);
|
|
||||||
const [loading, setLoading] = useState(false);
|
|
||||||
const { createSection, updateSection } = useCourseActions();
|
|
||||||
const handleSave = async () => {
|
|
||||||
if (!courseId) {
|
|
||||||
toast.error("课程未创建，请先填写课程基本信息完成创建");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
try {
|
|
||||||
setLoading(true);
|
|
||||||
const values = await form.validateFields();
|
|
||||||
const result = field.id
|
|
||||||
? await updateSection(values)
|
|
||||||
: await createSection(values, courseId);
|
|
||||||
field.id = result.id;
|
|
||||||
setEditing(false);
|
|
||||||
message.success("保存成功");
|
|
||||||
} catch (error) {
|
|
||||||
console.log(error);
|
|
||||||
message.error("保存失败");
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const style = {
|
|
||||||
transform: CSS.Transform.toString(transform),
|
|
||||||
transition,
|
|
||||||
backgroundColor: isDragging ? "#f5f5f5" : undefined,
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div ref={setNodeRef} style={style} className="mb-4">
|
|
||||||
<Collapse>
|
|
||||||
<Collapse.Panel
|
|
||||||
header={
|
|
||||||
editing ? (
|
|
||||||
<Form
|
|
||||||
form={form}
|
|
||||||
className="flex items-center gap-4">
|
|
||||||
<Form.Item
|
|
||||||
name="title"
|
|
||||||
className="mb-0 flex-1"
|
|
||||||
initialValue={field?.title}>
|
|
||||||
<Input placeholder="章节标题" />
|
|
||||||
</Form.Item>
|
|
||||||
<Space>
|
|
||||||
<Button
|
|
||||||
onClick={handleSave}
|
|
||||||
loading={loading}
|
|
||||||
icon={<SaveOutlined />}
|
|
||||||
type="primary">
|
|
||||||
保存
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
onClick={() => {
|
|
||||||
setEditing(false);
|
|
||||||
if (!id) {
|
|
||||||
remove();
|
|
||||||
}
|
|
||||||
}}>
|
|
||||||
取消
|
|
||||||
</Button>
|
|
||||||
</Space>
|
|
||||||
</Form>
|
|
||||||
) : (
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<Space>
|
|
||||||
<DragOutlined
|
|
||||||
{...attributes}
|
|
||||||
{...listeners}
|
|
||||||
className="cursor-move"
|
|
||||||
/>
|
|
||||||
<span>{field.title || "未命名章节"}</span>
|
|
||||||
</Space>
|
|
||||||
<Space>
|
|
||||||
<Button
|
|
||||||
type="link"
|
|
||||||
onClick={() => setEditing(true)}>
|
|
||||||
编辑
|
|
||||||
</Button>
|
|
||||||
<Button type="link" danger onClick={remove}>
|
|
||||||
删除
|
|
||||||
</Button>
|
|
||||||
</Space>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
key={field.id || "new"}>
|
|
||||||
{children}
|
|
||||||
</Collapse.Panel>
|
|
||||||
</Collapse>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
interface SortableLectureProps {
|
|
||||||
field: LectureData;
|
|
||||||
remove: () => void;
|
|
||||||
sectionFieldKey: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const SortableLecture: React.FC<SortableLectureProps> = ({
|
|
||||||
field,
|
|
||||||
remove,
|
|
||||||
sectionFieldKey,
|
|
||||||
}) => {
|
|
||||||
const {
|
|
||||||
attributes,
|
|
||||||
listeners,
|
|
||||||
setNodeRef,
|
|
||||||
transform,
|
|
||||||
transition,
|
|
||||||
isDragging,
|
|
||||||
} = useSortable({ id: field?.id });
|
|
||||||
const { create, update } = usePost();
|
|
||||||
const [form] = Form.useForm();
|
|
||||||
const [editing, setEditing] = useState(field?.id ? false : true);
|
|
||||||
const [loading, setLoading] = useState(false);
|
|
||||||
const lectureType = Form.useWatch("type", form) || LectureType.ARTICLE;
|
|
||||||
const handleSave = async () => {
|
|
||||||
try {
|
|
||||||
setLoading(true);
|
|
||||||
const values = await form.validateFields();
|
|
||||||
let result;
|
|
||||||
try {
|
|
||||||
if (!field.id) {
|
|
||||||
result = await create.mutateAsync({
|
|
||||||
data: {
|
|
||||||
parentId: sectionFieldKey,
|
|
||||||
type: PostType.LECTURE,
|
|
||||||
title: values?.title,
|
|
||||||
meta: {
|
|
||||||
type: values?.type,
|
|
||||||
},
|
|
||||||
resources: {
|
|
||||||
connect: (values?.resourceIds || []).map(
|
|
||||||
(fileId) => ({
|
|
||||||
fileId,
|
|
||||||
})
|
|
||||||
),
|
|
||||||
},
|
|
||||||
content: values?.content,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
result = await update.mutateAsync({
|
|
||||||
where: {
|
|
||||||
id: field?.id,
|
|
||||||
},
|
|
||||||
data: {
|
|
||||||
title: values?.title,
|
|
||||||
meta: {
|
|
||||||
type: values?.type,
|
|
||||||
},
|
|
||||||
resources: {
|
|
||||||
connect: (values?.resourceIds || []).map(
|
|
||||||
(fileId) => ({
|
|
||||||
fileId,
|
|
||||||
})
|
|
||||||
),
|
|
||||||
},
|
|
||||||
content: values?.content,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
console.log(err);
|
|
||||||
}
|
|
||||||
|
|
||||||
field.id = result.id;
|
|
||||||
setEditing(false);
|
|
||||||
message.success("保存成功");
|
|
||||||
} catch (error) {
|
|
||||||
message.error("保存失败");
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const style = {
|
|
||||||
transform: CSS.Transform.toString(transform),
|
|
||||||
transition,
|
|
||||||
borderBottom: "1px solid #f0f0f0",
|
|
||||||
backgroundColor: isDragging ? "#f5f5f5" : undefined,
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div ref={setNodeRef} style={style} className="p-4">
|
|
||||||
{editing ? (
|
|
||||||
<Form form={form} initialValues={field}>
|
|
||||||
<div className="flex gap-4">
|
|
||||||
<Form.Item
|
|
||||||
name="title"
|
|
||||||
initialValue={field?.title}
|
|
||||||
className="mb-0 flex-1"
|
|
||||||
rules={[{ required: true }]}>
|
|
||||||
<Input placeholder="课时标题" />
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item
|
|
||||||
name="type"
|
|
||||||
className="mb-0 w-32"
|
|
||||||
initialValue={LectureType.ARTICLE}
|
|
||||||
rules={[{ required: true }]}>
|
|
||||||
<Select
|
|
||||||
placeholder="选择类型"
|
|
||||||
options={[
|
|
||||||
{ label: "视频", value: LectureType.VIDEO },
|
|
||||||
{
|
|
||||||
label: "文章",
|
|
||||||
value: LectureType.ARTICLE,
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
</Form.Item>
|
|
||||||
</div>
|
|
||||||
<div className="mt-4 flex flex-1 ">
|
|
||||||
{lectureType === LectureType.VIDEO ? (
|
|
||||||
<Form.Item
|
|
||||||
name="resourceIds"
|
|
||||||
className="mb-0 flex-1"
|
|
||||||
rules={[{ required: true }]}>
|
|
||||||
<TusUploader />
|
|
||||||
</Form.Item>
|
|
||||||
) : (
|
|
||||||
<Form.Item
|
|
||||||
name="content"
|
|
||||||
className="mb-0 flex-1"
|
|
||||||
rules={[{ required: true }]}>
|
|
||||||
<QuillEditor />
|
|
||||||
</Form.Item>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mt-4 flex justify-end gap-2">
|
|
||||||
<Button
|
|
||||||
onClick={handleSave}
|
|
||||||
loading={loading}
|
|
||||||
type="primary"
|
|
||||||
icon={<SaveOutlined />}>
|
|
||||||
保存
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
onClick={() => {
|
|
||||||
setEditing(false);
|
|
||||||
if (!field?.id) {
|
|
||||||
remove();
|
|
||||||
}
|
|
||||||
}}>
|
|
||||||
取消
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</Form>
|
|
||||||
) : (
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<Space>
|
|
||||||
<DragOutlined
|
|
||||||
{...attributes}
|
|
||||||
{...listeners}
|
|
||||||
className="cursor-move"
|
|
||||||
/>
|
|
||||||
<CaretRightOutlined />
|
|
||||||
<span>{field?.title || "未命名课时"}</span>
|
|
||||||
</Space>
|
|
||||||
<Space>
|
|
||||||
<Button type="link" onClick={() => setEditing(true)}>
|
|
||||||
编辑
|
|
||||||
</Button>
|
|
||||||
<Button type="link" danger onClick={remove}>
|
|
||||||
删除
|
|
||||||
</Button>
|
|
||||||
</Space>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
interface LectureListProps {
|
|
||||||
field: SectionData;
|
|
||||||
sectionId: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const LectureList: React.FC<LectureListProps> = ({ field, sectionId }) => {
|
|
||||||
const { softDeleteByIds } = usePost();
|
|
||||||
const { data: lectures = [], isLoading } = (
|
|
||||||
api.post.findMany as any
|
|
||||||
).useQuery(
|
|
||||||
{
|
|
||||||
where: {
|
|
||||||
parentId: sectionId,
|
|
||||||
type: PostType.LECTURE,
|
|
||||||
deletedAt: null,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
enabled: !!sectionId,
|
|
||||||
}
|
|
||||||
);
|
|
||||||
useEffect(() => {
|
|
||||||
if (lectures && !isLoading) {
|
|
||||||
setItems(lectures);
|
|
||||||
}
|
|
||||||
}, [lectures, isLoading]);
|
|
||||||
const [items, setItems] = useState<LectureData[]>(lectures);
|
|
||||||
|
|
||||||
const sensors = useSensors(
|
|
||||||
useSensor(PointerSensor),
|
|
||||||
useSensor(KeyboardSensor, {
|
|
||||||
coordinateGetter: sortableKeyboardCoordinates,
|
|
||||||
})
|
|
||||||
);
|
|
||||||
|
|
||||||
const handleDragEnd = (event: DragEndEvent) => {
|
|
||||||
const { active, over } = event;
|
|
||||||
if (!over || active.id === over.id) return;
|
|
||||||
|
|
||||||
setItems((items) => {
|
|
||||||
const oldIndex = items.findIndex((item) => item.id === active.id);
|
|
||||||
const newIndex = items.findIndex((item) => item.id === over.id);
|
|
||||||
return arrayMove(items, oldIndex, newIndex);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="pl-8">
|
|
||||||
<div
|
|
||||||
onClick={() => {
|
|
||||||
console.log(lectures);
|
|
||||||
}}>
|
|
||||||
123
|
|
||||||
</div>
|
|
||||||
<DndContext
|
|
||||||
sensors={sensors}
|
|
||||||
collisionDetection={closestCenter}
|
|
||||||
onDragEnd={handleDragEnd}>
|
|
||||||
<SortableContext
|
|
||||||
items={items}
|
|
||||||
strategy={verticalListSortingStrategy}>
|
|
||||||
{items.map((lecture) => (
|
|
||||||
<SortableLecture
|
|
||||||
key={lecture.id}
|
|
||||||
field={lecture}
|
|
||||||
remove={async () => {
|
|
||||||
if (lecture?.id) {
|
|
||||||
await softDeleteByIds.mutateAsync({
|
|
||||||
ids: [lecture.id],
|
|
||||||
});
|
|
||||||
}
|
|
||||||
setItems(lectures);
|
|
||||||
}}
|
|
||||||
sectionFieldKey={sectionId}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</SortableContext>
|
|
||||||
</DndContext>
|
|
||||||
<Button
|
|
||||||
type="dashed"
|
|
||||||
block
|
|
||||||
icon={<PlusOutlined />}
|
|
||||||
className="mt-4"
|
|
||||||
onClick={() => {
|
|
||||||
setItems([
|
|
||||||
...items.filter((item) => !!item.id),
|
|
||||||
{ id: null, title: "" },
|
|
||||||
]);
|
|
||||||
}}>
|
|
||||||
添加课时
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const CourseContentForm: React.FC = () => {
|
|
||||||
const { editId } = useCourseEditor();
|
|
||||||
const sensors = useSensors(
|
|
||||||
useSensor(PointerSensor),
|
|
||||||
useSensor(KeyboardSensor, {
|
|
||||||
coordinateGetter: sortableKeyboardCoordinates,
|
|
||||||
})
|
|
||||||
);
|
|
||||||
const { softDeleteByIds } = usePost();
|
|
||||||
const { data: sections = [], isLoading } = api.post.findMany.useQuery(
|
|
||||||
{
|
|
||||||
where: {
|
|
||||||
parentId: editId,
|
|
||||||
type: PostType.SECTION,
|
|
||||||
deletedAt: null,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
enabled: !!editId,
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
const [items, setItems] = useState<any[]>(sections);
|
|
||||||
useEffect(() => {
|
|
||||||
if (sections && !isLoading) {
|
|
||||||
setItems(sections);
|
|
||||||
}
|
|
||||||
}, [sections]);
|
|
||||||
const handleDragEnd = (event: DragEndEvent) => {
|
|
||||||
const { active, over } = event;
|
|
||||||
if (!over || active.id === over.id) return;
|
|
||||||
|
|
||||||
setItems((items) => {
|
|
||||||
const oldIndex = items.findIndex((item) => item.id === active.id);
|
|
||||||
const newIndex = items.findIndex((item) => item.id === over.id);
|
|
||||||
return arrayMove(items, oldIndex, newIndex);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="max-w-4xl mx-auto p-6">
|
|
||||||
<CourseContentFormHeader />
|
|
||||||
|
|
||||||
{items.length === 0 ? (
|
|
||||||
<CourseSectionEmpty />
|
|
||||||
) : (
|
|
||||||
<DndContext
|
|
||||||
sensors={sensors}
|
|
||||||
collisionDetection={closestCenter}
|
|
||||||
onDragEnd={handleDragEnd}>
|
|
||||||
<SortableContext
|
|
||||||
items={items}
|
|
||||||
strategy={verticalListSortingStrategy}>
|
|
||||||
{items.map((section, index) => (
|
|
||||||
<SortableSection
|
|
||||||
courseId={editId}
|
|
||||||
key={section.id}
|
|
||||||
id={section.id}
|
|
||||||
field={section}
|
|
||||||
remove={async () => {
|
|
||||||
if (section?.id) {
|
|
||||||
await softDeleteByIds.mutateAsync({
|
|
||||||
ids: [section.id],
|
|
||||||
});
|
|
||||||
}
|
|
||||||
setItems(sections);
|
|
||||||
}}>
|
|
||||||
<LectureList
|
|
||||||
field={section}
|
|
||||||
sectionId={section.id}
|
|
||||||
/>
|
|
||||||
</SortableSection>
|
|
||||||
))}
|
|
||||||
</SortableContext>
|
|
||||||
</DndContext>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<Button
|
|
||||||
type="dashed"
|
|
||||||
block
|
|
||||||
icon={<PlusOutlined />}
|
|
||||||
className="mt-4"
|
|
||||||
onClick={() => {
|
|
||||||
setItems([
|
|
||||||
...items.filter((item) => !!item.id),
|
|
||||||
{ id: null, title: "" },
|
|
||||||
]);
|
|
||||||
}}>
|
|
||||||
添加章节
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default CourseContentForm;
|
|
||||||
Loading…
Reference in New Issue