add
This commit is contained in:
ditiqi
parent
c740898a44
commit
0afb73a458
|
|
@ -6,6 +6,5 @@ import { db } from '@nice/common';
|
|||
|
||||
@Controller('post')
|
||||
export class PostController {
|
||||
constructor(private readonly postService: PostService) { }
|
||||
|
||||
constructor(private readonly postService: PostService) {}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -123,3 +123,30 @@ export async function updateCourseEnrollmentStats(courseId: string) {
|
|||
},
|
||||
});
|
||||
}
|
||||
export async function setCourseInfo(data: Post) {
|
||||
if (data?.type === PostType.COURSE) {
|
||||
const ancestries = await db.postAncestry.findMany({
|
||||
where: {
|
||||
ancestorId: data.id,
|
||||
},
|
||||
select: {
|
||||
id: true,
|
||||
descendant: true,
|
||||
},
|
||||
});
|
||||
const descendants = ancestries.map((ancestry) => ancestry.descendant);
|
||||
const sections = descendants.filter((descendant) => {
|
||||
return (
|
||||
descendant.type === PostType.SECTION && descendant.parentId === data.id
|
||||
);
|
||||
});
|
||||
const lectures = descendants.filter((descendant) => {
|
||||
return (
|
||||
descendant.type === PostType.LECTURE &&
|
||||
sections.map((section) => section.id).includes(descendant.parentId)
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
Object.assign(data, {});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,54 +1,54 @@
|
|||
import { Checkbox, Divider, Radio, Space } from 'antd';
|
||||
import { categories, levels } from '../mockData';
|
||||
import { Checkbox, Divider, Radio, Space } from "antd";
|
||||
import { categories, levels } from "../mockData";
|
||||
import { api } from "@nice/client";
|
||||
|
||||
interface FilterSectionProps {
|
||||
selectedCategory: string;
|
||||
selectedLevel: string;
|
||||
onCategoryChange: (category: string) => void;
|
||||
onLevelChange: (level: string) => void;
|
||||
selectedCategory: string;
|
||||
selectedLevel: string;
|
||||
onCategoryChange: (category: string) => void;
|
||||
onLevelChange: (level: string) => void;
|
||||
}
|
||||
|
||||
export default function FilterSection({
|
||||
selectedCategory,
|
||||
selectedLevel,
|
||||
onCategoryChange,
|
||||
onLevelChange,
|
||||
selectedCategory,
|
||||
selectedLevel,
|
||||
onCategoryChange,
|
||||
onLevelChange,
|
||||
}: FilterSectionProps) {
|
||||
return (
|
||||
<div className="bg-white p-6 rounded-lg shadow-sm space-y-6">
|
||||
<div>
|
||||
<h3 className="text-lg font-medium mb-4">课程分类</h3>
|
||||
<Radio.Group
|
||||
value={selectedCategory}
|
||||
onChange={(e) => onCategoryChange(e.target.value)}
|
||||
className="flex flex-col space-y-3"
|
||||
>
|
||||
<Radio value="">全部课程</Radio>
|
||||
{categories.map(category => (
|
||||
<Radio key={category} value={category}>
|
||||
{category}
|
||||
</Radio>
|
||||
))}
|
||||
</Radio.Group>
|
||||
</div>
|
||||
// const { data } = api.term;
|
||||
return (
|
||||
<div className="bg-white p-6 rounded-lg shadow-sm space-y-6">
|
||||
<div>
|
||||
<h3 className="text-lg font-medium mb-4">课程分类</h3>
|
||||
<Radio.Group
|
||||
value={selectedCategory}
|
||||
onChange={(e) => onCategoryChange(e.target.value)}
|
||||
className="flex flex-col space-y-3">
|
||||
<Radio value="">全部课程</Radio>
|
||||
{categories.map((category) => (
|
||||
<Radio key={category} value={category}>
|
||||
{category}
|
||||
</Radio>
|
||||
))}
|
||||
</Radio.Group>
|
||||
</div>
|
||||
|
||||
<Divider className="my-6" />
|
||||
<Divider className="my-6" />
|
||||
|
||||
<div>
|
||||
<h3 className="text-lg font-medium mb-4">难度等级</h3>
|
||||
<Radio.Group
|
||||
value={selectedLevel}
|
||||
onChange={(e) => onLevelChange(e.target.value)}
|
||||
className="flex flex-col space-y-3"
|
||||
>
|
||||
<Radio value="">全部难度</Radio>
|
||||
{levels.map(level => (
|
||||
<Radio key={level} value={level}>
|
||||
{level}
|
||||
</Radio>
|
||||
))}
|
||||
</Radio.Group>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
<div>
|
||||
<h3 className="text-lg font-medium mb-4">难度等级</h3>
|
||||
<Radio.Group
|
||||
value={selectedLevel}
|
||||
onChange={(e) => onLevelChange(e.target.value)}
|
||||
className="flex flex-col space-y-3">
|
||||
<Radio value="">全部难度</Radio>
|
||||
{levels.map((level) => (
|
||||
<Radio key={level} value={level}>
|
||||
{level}
|
||||
</Radio>
|
||||
))}
|
||||
</Radio.Group>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,73 +1,100 @@
|
|||
import { useState, useMemo } from 'react';
|
||||
import { mockCourses } from './mockData';
|
||||
import FilterSection from './components/FilterSection';
|
||||
import CourseList from './components/CourseList';
|
||||
import { useState, useMemo } from "react";
|
||||
import { mockCourses } from "./mockData";
|
||||
import FilterSection from "./components/FilterSection";
|
||||
import CourseList from "./components/CourseList";
|
||||
import { api } from "@nice/client";
|
||||
import { LectureType, PostType } from "@nice/common";
|
||||
|
||||
export default function CoursesPage() {
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [selectedCategory, setSelectedCategory] = useState('');
|
||||
const [selectedLevel, setSelectedLevel] = useState('');
|
||||
const pageSize = 12;
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [selectedCategory, setSelectedCategory] = useState("");
|
||||
const [selectedLevel, setSelectedLevel] = useState("");
|
||||
const pageSize = 12;
|
||||
const { data, isLoading } = api.post.findManyWithPagination.useQuery({
|
||||
where: {
|
||||
type: PostType.COURSE,
|
||||
terms: {
|
||||
some: {
|
||||
AND: [
|
||||
...(selectedCategory
|
||||
? [
|
||||
{
|
||||
name: selectedCategory,
|
||||
},
|
||||
]
|
||||
: []),
|
||||
...(selectedLevel
|
||||
? [
|
||||
{
|
||||
name: selectedLevel,
|
||||
},
|
||||
]
|
||||
: []),
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
const filteredCourses = useMemo(() => {
|
||||
return mockCourses.filter((course) => {
|
||||
const matchCategory =
|
||||
!selectedCategory || course.category === selectedCategory;
|
||||
const matchLevel = !selectedLevel || course.level === selectedLevel;
|
||||
return matchCategory && matchLevel;
|
||||
});
|
||||
}, [selectedCategory, selectedLevel]);
|
||||
|
||||
const filteredCourses = useMemo(() => {
|
||||
return mockCourses.filter(course => {
|
||||
const matchCategory = !selectedCategory || course.category === selectedCategory;
|
||||
const matchLevel = !selectedLevel || course.level === selectedLevel;
|
||||
return matchCategory && matchLevel;
|
||||
});
|
||||
}, [selectedCategory, selectedLevel]);
|
||||
const paginatedCourses = useMemo(() => {
|
||||
const startIndex = (currentPage - 1) * pageSize;
|
||||
return filteredCourses.slice(startIndex, startIndex + pageSize);
|
||||
}, [filteredCourses, currentPage]);
|
||||
|
||||
const paginatedCourses = useMemo(() => {
|
||||
const startIndex = (currentPage - 1) * pageSize;
|
||||
return filteredCourses.slice(startIndex, startIndex + pageSize);
|
||||
}, [filteredCourses, currentPage]);
|
||||
const handlePageChange = (page: number) => {
|
||||
setCurrentPage(page);
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
};
|
||||
|
||||
const handlePageChange = (page: number) => {
|
||||
setCurrentPage(page);
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
};
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
<div className="flex gap-4">
|
||||
{/* 左侧筛选区域 */}
|
||||
<div className="lg:w-1/5">
|
||||
<div className="sticky top-24">
|
||||
<FilterSection
|
||||
selectedCategory={selectedCategory}
|
||||
selectedLevel={selectedLevel}
|
||||
onCategoryChange={(category) => {
|
||||
setSelectedCategory(category);
|
||||
setCurrentPage(1);
|
||||
}}
|
||||
onLevelChange={(level) => {
|
||||
setSelectedLevel(level);
|
||||
setCurrentPage(1);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
<div className="flex gap-4">
|
||||
{/* 左侧筛选区域 */}
|
||||
<div className="lg:w-1/5">
|
||||
<div className="sticky top-24">
|
||||
<FilterSection
|
||||
selectedCategory={selectedCategory}
|
||||
selectedLevel={selectedLevel}
|
||||
onCategoryChange={category => {
|
||||
setSelectedCategory(category);
|
||||
setCurrentPage(1);
|
||||
}}
|
||||
onLevelChange={level => {
|
||||
setSelectedLevel(level);
|
||||
setCurrentPage(1);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 右侧课程列表区域 */}
|
||||
<div className="lg:w-4/5">
|
||||
<div className="bg-white p-6 rounded-lg shadow-sm">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<span className="text-gray-600">
|
||||
共找到 {filteredCourses.length} 门课程
|
||||
</span>
|
||||
</div>
|
||||
<CourseList
|
||||
courses={paginatedCourses}
|
||||
total={filteredCourses.length}
|
||||
pageSize={pageSize}
|
||||
currentPage={currentPage}
|
||||
onPageChange={handlePageChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
{/* 右侧课程列表区域 */}
|
||||
<div className="lg:w-4/5">
|
||||
<div className="bg-white p-6 rounded-lg shadow-sm">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<span className="text-gray-600">
|
||||
共找到 {filteredCourses.length} 门课程
|
||||
</span>
|
||||
</div>
|
||||
<CourseList
|
||||
courses={paginatedCourses}
|
||||
total={filteredCourses.length}
|
||||
pageSize={pageSize}
|
||||
currentPage={currentPage}
|
||||
onPageChange={handlePageChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
import { api,} from "@nice/client";
|
||||
import { api } from "@nice/client";
|
||||
import { courseDetailSelect, CourseDto } from "@nice/common";
|
||||
import React, { createContext, ReactNode, useState } from "react";
|
||||
|
||||
|
||||
interface CourseDetailContextType {
|
||||
editId?: string; // 添加 editId
|
||||
course?: CourseDto;
|
||||
|
|
@ -23,7 +22,7 @@ export function CourseDetailProvider({
|
|||
editId,
|
||||
}: CourseFormProviderProps) {
|
||||
const { data: course, isLoading }: { data: CourseDto; isLoading: boolean } =
|
||||
api.course.findFirst.useQuery(
|
||||
(api.post as any).findFirst.useQuery(
|
||||
{
|
||||
where: { id: editId },
|
||||
include: {
|
||||
|
|
|
|||
|
|
@ -16,7 +16,8 @@ export default function CourseDetailLayout() {
|
|||
const [isSyllabusOpen, setIsSyllabusOpen] = useState(false);
|
||||
return (
|
||||
<div className="relative">
|
||||
<CourseDetailHeader /> {/* 添加 Header 组件 */}
|
||||
<CourseDetailHeader />
|
||||
{/* 添加 Header 组件 */}
|
||||
{/* 主内容区域 */}
|
||||
{/* 为了防止 Header 覆盖内容，添加上边距 */}
|
||||
<div className="pt-16">
|
||||
|
|
|
|||
|
|
@ -43,7 +43,12 @@ export function CourseFormProvider({
|
|||
const [form] = Form.useForm<CourseFormData>();
|
||||
const { create, update, createCourse } = usePost();
|
||||
const { data: course }: { data: CourseDto } = api.post.findFirst.useQuery(
|
||||
{ where: { id: editId } },
|
||||
{
|
||||
where: { id: editId },
|
||||
include: {
|
||||
terms: true,
|
||||
},
|
||||
},
|
||||
{ enabled: Boolean(editId) }
|
||||
);
|
||||
const {
|
||||
|
|
@ -51,7 +56,7 @@ export function CourseFormProvider({
|
|||
}: {
|
||||
data: Taxonomy[];
|
||||
} = api.taxonomy.getAll.useQuery({
|
||||
// type: ObjectType.COURSE,
|
||||
type: ObjectType.COURSE,
|
||||
});
|
||||
const navigate = useNavigate();
|
||||
|
||||
|
|
@ -65,6 +70,9 @@ export function CourseFormProvider({
|
|||
requirements: course?.meta?.requirements,
|
||||
objectives: course?.meta?.objectives,
|
||||
};
|
||||
course.terms?.forEach((term) => {
|
||||
formData[term.taxonomyId] = term.id; // 假设 taxonomyName 是您在 Form.Item 中使用的 name
|
||||
});
|
||||
form.setFieldsValue(formData);
|
||||
}
|
||||
}, [course, form]);
|
||||
|
|
@ -72,13 +80,24 @@ export function CourseFormProvider({
|
|||
const onSubmit = async (values: CourseFormData) => {
|
||||
console.log(values);
|
||||
const sections = values?.sections || [];
|
||||
const termIds = taxonomies
|
||||
.map((tax) => values[tax.id]) // 获取每个 taxonomy 对应的选中值
|
||||
.filter((id) => id); // 过滤掉空值
|
||||
|
||||
const formattedValues = {
|
||||
...values,
|
||||
meta: {
|
||||
requirements: values.requirements,
|
||||
objectives: values.objectives,
|
||||
},
|
||||
terms: {
|
||||
connect: termIds.map((id) => ({ id })), // 转换成 connect 格式
|
||||
},
|
||||
};
|
||||
// 删除原始的 taxonomy 字段
|
||||
taxonomies.forEach((tax) => {
|
||||
delete formattedValues[tax.name];
|
||||
});
|
||||
delete formattedValues.requirements;
|
||||
delete formattedValues.objectives;
|
||||
delete formattedValues.sections;
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ export function CourseBasicForm() {
|
|||
value: key as CourseLevel,
|
||||
})
|
||||
);
|
||||
|
||||
const { form, taxonomies } = useCourseEditor();
|
||||
return (
|
||||
<div className="max-w-2xl mx-auto space-y-6 p-6">
|
||||
|
|
@ -50,7 +51,7 @@ export function CourseBasicForm() {
|
|||
},
|
||||
]}
|
||||
label={tax.name}
|
||||
name={tax.name}
|
||||
name={tax.id}
|
||||
key={index}>
|
||||
<TermSelect taxonomyId={tax.id}></TermSelect>
|
||||
</Form.Item>
|
||||
|
|
|
|||
|
|
@ -1,604 +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;
|
||||
meta?: {
|
||||
type?: LectureType;
|
||||
fieldIds?: [];
|
||||
};
|
||||
content?: string;
|
||||
sectionId?: string;
|
||||
}
|
||||
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 {
|
||||
courseId?: string;
|
||||
field: SectionData;
|
||||
remove: () => void;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
const SortableSection: React.FC<SortableSectionProps> = ({
|
||||
field,
|
||||
remove,
|
||||
courseId,
|
||||
children,
|
||||
}) => {
|
||||
const {
|
||||
attributes,
|
||||
listeners,
|
||||
setNodeRef,
|
||||
transform,
|
||||
transition,
|
||||
isDragging,
|
||||
} = useSortable({ id: field?.id });
|
||||
|
||||
const [form] = Form.useForm();
|
||||
const [editing, setEditing] = useState(field.id ? false : true);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const { create, update } = usePost();
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!courseId) {
|
||||
toast.error("课程未创建，请先填写课程基本信息完成创建");
|
||||
return;
|
||||
}
|
||||
try {
|
||||
setLoading(true);
|
||||
const values = await form.validateFields();
|
||||
let result;
|
||||
try {
|
||||
if (!field?.id) {
|
||||
result = await create.mutateAsync({
|
||||
data: {
|
||||
title: values?.title,
|
||||
type: PostType.SECTION,
|
||||
parentId: courseId,
|
||||
},
|
||||
});
|
||||
} else {
|
||||
result = await update.mutateAsync({
|
||||
data: {
|
||||
title: values?.title,
|
||||
},
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
|
||||
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 (!field?.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(["meta", "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?.meta?.type,
|
||||
fileIds: values?.meta?.fileIds,
|
||||
},
|
||||
resources: {
|
||||
connect: (values?.meta?.fileIds || []).map(
|
||||
(fileId) => ({
|
||||
fileId,
|
||||
})
|
||||
),
|
||||
},
|
||||
content: values?.content,
|
||||
},
|
||||
});
|
||||
} else {
|
||||
result = await update.mutateAsync({
|
||||
where: {
|
||||
id: field?.id,
|
||||
},
|
||||
data: {
|
||||
title: values?.title,
|
||||
meta: {
|
||||
type: values?.meta?.type,
|
||||
fieldIds: values?.meta?.fileIds,
|
||||
},
|
||||
resources: {
|
||||
connect: (values?.meta?.fileIds || []).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={["meta", "type"]}
|
||||
className="mb-0 w-32"
|
||||
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={["meta", "fileIds"]}
|
||||
className="mb-0 flex-1"
|
||||
rules={[{ required: true }]}>
|
||||
<TusUploader multiple={false} />
|
||||
</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: "",
|
||||
meta: {
|
||||
type: LectureType.ARTICLE,
|
||||
},
|
||||
},
|
||||
]);
|
||||
}}>
|
||||
添加课时
|
||||
</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}
|
||||
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;
|
||||
|
|
@ -15,7 +15,7 @@ import {
|
|||
Collapse,
|
||||
message,
|
||||
} from "antd";
|
||||
import React, { useCallback, useEffect, useState } from "react";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import {
|
||||
DndContext,
|
||||
closestCenter,
|
||||
|
|
@ -69,12 +69,16 @@ export const LectureList: React.FC<LectureListProps> = ({
|
|||
enabled: !!sectionId,
|
||||
}
|
||||
);
|
||||
|
||||
// 用 lectures 初始化 items 状态
|
||||
const [items, setItems] = useState<LectureData[]>(lectures);
|
||||
|
||||
// 当 lectures 变化时更新 items
|
||||
useEffect(() => {
|
||||
if (lectures && !isLoading) {
|
||||
if (!isLoading) {
|
||||
setItems(lectures);
|
||||
}
|
||||
}, [lectures, isLoading]);
|
||||
const [items, setItems] = useState<LectureData[]>(lectures);
|
||||
|
||||
const sensors = useSensors(
|
||||
useSensor(PointerSensor),
|
||||
|
|
@ -96,12 +100,12 @@ export const LectureList: React.FC<LectureListProps> = ({
|
|||
|
||||
return (
|
||||
<div className="pl-8">
|
||||
<div
|
||||
{/* <Button
|
||||
onClick={() => {
|
||||
console.log(lectures);
|
||||
}}>
|
||||
123
|
||||
</div>
|
||||
</Button> */}
|
||||
<DndContext
|
||||
sensors={sensors}
|
||||
collisionDetection={closestCenter}
|
||||
|
|
@ -132,8 +136,8 @@ export const LectureList: React.FC<LectureListProps> = ({
|
|||
icon={<PlusOutlined />}
|
||||
className="mt-4"
|
||||
onClick={() => {
|
||||
setItems([
|
||||
...items.filter((item) => !!item.id),
|
||||
setItems((prevItems) => [
|
||||
...prevItems.filter((item) => !!item.id),
|
||||
{
|
||||
id: null,
|
||||
title: "",
|
||||
|
|
|
|||
|
|
@ -120,6 +120,7 @@ export const SortableSection: React.FC<SortableSectionProps> = ({
|
|||
<div ref={setNodeRef} style={style} className="mb-4">
|
||||
<Collapse>
|
||||
<Collapse.Panel
|
||||
disabled={!field.id} // 添加此行以禁用未创建章节的展开
|
||||
header={
|
||||
editing ? (
|
||||
<Form
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { createContext, useMemo, useState } from "react";
|
||||
import React, { createContext, useMemo, useState } from "react";
|
||||
import { useAuth } from "@web/src/providers/auth-provider";
|
||||
import { RolePerms } from "@nice/common";
|
||||
import TaxonomyModal from "./taxonomy-modal";
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ export default function Speed() {
|
|||
}}
|
||||
className={`px-2 py-1 text-lg whitespace-nowrap ${
|
||||
playbackSpeed === speed
|
||||
? "text-primaryHover font-bold"
|
||||
? "text-primary-500 font-bold"
|
||||
: "text-white hover:text-primaryHover"
|
||||
}`}>
|
||||
{speed}x
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { Prisma } from "@prisma/client";
|
||||
import { AppConfigSlug, RolePerms, TaxonomySlug } from "./enum";
|
||||
import { AppConfigSlug, ObjectType, RolePerms, TaxonomySlug } from "./enum";
|
||||
|
||||
export const InitRoles: {
|
||||
name: string;
|
||||
|
|
@ -50,7 +50,11 @@ export const InitRoles: {
|
|||
permissions: Object.keys(RolePerms) as RolePerms[],
|
||||
},
|
||||
];
|
||||
export const InitTaxonomies: { name: string; slug: string }[] = [
|
||||
export const InitTaxonomies: {
|
||||
name: string;
|
||||
slug: string;
|
||||
objectType?: string[];
|
||||
}[] = [
|
||||
{
|
||||
name: "分类",
|
||||
slug: TaxonomySlug.CATEGORY,
|
||||
|
|
@ -58,6 +62,7 @@ export const InitTaxonomies: { name: string; slug: string }[] = [
|
|||
{
|
||||
name: "难度等级",
|
||||
slug: TaxonomySlug.LEVEL,
|
||||
objectType: [ObjectType.COURSE],
|
||||
},
|
||||
// {
|
||||
// name: "研判单元",
|
||||
|
|
|
|||
|
|
@ -1,5 +1,13 @@
|
|||
import { Post, Department, Staff, Enrollment } from "@prisma/client";
|
||||
import {
|
||||
Post,
|
||||
Department,
|
||||
Staff,
|
||||
Enrollment,
|
||||
Taxonomy,
|
||||
Term,
|
||||
} from "@prisma/client";
|
||||
import { StaffDto } from "./staff";
|
||||
import { TermDto } from "./term";
|
||||
|
||||
export type PostComment = {
|
||||
id: string;
|
||||
|
|
@ -63,4 +71,5 @@ export type Course = Post & {
|
|||
export type CourseDto = Course & {
|
||||
enrollments?: Enrollment[];
|
||||
sections?: SectionDto[];
|
||||
terms: Term[];
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue