Merge branch 'main' of http://113.45.157.195:3003/insiinc/re-mooc
This commit is contained in:
commit
44a57ce0bb
|
@ -7,5 +7,4 @@ import { db } from '@nice/common';
|
||||||
@Controller('post')
|
@Controller('post')
|
||||||
export class PostController {
|
export class PostController {
|
||||||
constructor(private readonly postService: PostService) {}
|
constructor(private readonly postService: PostService) {}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -15,7 +15,7 @@ import {
|
||||||
import { MessageService } from '../message/message.service';
|
import { MessageService } from '../message/message.service';
|
||||||
import { BaseService } from '../base/base.service';
|
import { BaseService } from '../base/base.service';
|
||||||
import { DepartmentService } from '../department/department.service';
|
import { DepartmentService } from '../department/department.service';
|
||||||
import { setPostRelation } from './utils';
|
import { setCourseInfo, setPostRelation } from './utils';
|
||||||
import EventBus, { CrudOperation } from '@server/utils/event-bus';
|
import EventBus, { CrudOperation } from '@server/utils/event-bus';
|
||||||
import { BaseTreeService } from '../base/base.tree.service';
|
import { BaseTreeService } from '../base/base.tree.service';
|
||||||
import { z } from 'zod';
|
import { z } from 'zod';
|
||||||
|
@ -180,6 +180,7 @@ export class PostService extends BaseTreeService<Prisma.PostDelegate> {
|
||||||
if (result) {
|
if (result) {
|
||||||
await setPostRelation({ data: result, staff });
|
await setPostRelation({ data: result, staff });
|
||||||
await this.setPerms(result, staff);
|
await this.setPerms(result, staff);
|
||||||
|
await setCourseInfo({ data: result });
|
||||||
}
|
}
|
||||||
|
|
||||||
return result;
|
return result;
|
||||||
|
|
|
@ -3,6 +3,7 @@ import {
|
||||||
EnrollmentStatus,
|
EnrollmentStatus,
|
||||||
Post,
|
Post,
|
||||||
PostType,
|
PostType,
|
||||||
|
SectionDto,
|
||||||
UserProfile,
|
UserProfile,
|
||||||
VisitType,
|
VisitType,
|
||||||
} from '@nice/common';
|
} from '@nice/common';
|
||||||
|
@ -123,3 +124,43 @@ export async function updateCourseEnrollmentStats(courseId: string) {
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export async function setCourseInfo({ data }: { data: Post }) {
|
||||||
|
// await db.term
|
||||||
|
|
||||||
|
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: SectionDto[] = descendants
|
||||||
|
.filter((descendant) => {
|
||||||
|
return (
|
||||||
|
descendant.type === PostType.SECTION &&
|
||||||
|
descendant.parentId === data.id
|
||||||
|
);
|
||||||
|
})
|
||||||
|
.map((section) => ({
|
||||||
|
...section,
|
||||||
|
lectures: [],
|
||||||
|
}));
|
||||||
|
const lectures = descendants.filter((descendant) => {
|
||||||
|
return (
|
||||||
|
descendant.type === PostType.LECTURE &&
|
||||||
|
sections.map((section) => section.id).includes(descendant.parentId)
|
||||||
|
);
|
||||||
|
});
|
||||||
|
sections.forEach((section) => {
|
||||||
|
section.lectures = lectures.filter(
|
||||||
|
(lecture) => lecture.parentId === section.id,
|
||||||
|
);
|
||||||
|
});
|
||||||
|
Object.assign(data, { sections });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -1,2 +1,7 @@
|
||||||
VITE_APP_TUS_URL=http://localhost:8080
|
VITE_APP_TUS_URL=http://localhost:8080
|
||||||
VITE_APP_API_URL=http://localhost:3000
|
VITE_APP_API_URL=http://localhost:3000
|
||||||
|
VITE_APP_SERVER_IP=192.168.252.239
|
||||||
|
VITE_APP_SERVER_PORT=3000
|
||||||
|
VITE_APP_UPLOAD_PORT=80
|
||||||
|
VITE_APP_VERSION=0.3.0
|
||||||
|
VITE_APP_APP_NAME=MOOC
|
||||||
|
|
|
@ -2,7 +2,7 @@ import CourseDetail from "@web/src/components/models/course/detail/CourseDetail"
|
||||||
import { useParams } from "react-router-dom";
|
import { useParams } from "react-router-dom";
|
||||||
|
|
||||||
export function CourseDetailPage() {
|
export function CourseDetailPage() {
|
||||||
const { id } = useParams();
|
const { id, lectureId } = useParams();
|
||||||
console.log("Course ID:", id);
|
console.log("Course ID:", id);
|
||||||
return <CourseDetail id={id}></CourseDetail>;
|
return <CourseDetail id={id} lectureId={lectureId}></CourseDetail>;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,7 @@
|
||||||
import { Checkbox, Divider, Radio, Space } from 'antd';
|
import { Checkbox, Divider, Radio, Space } from "antd";
|
||||||
import { categories, levels } from '../mockData';
|
import { categories, levels } from "../mockData";
|
||||||
|
import { api } from "@nice/client";
|
||||||
|
import { TaxonomySlug } from "@nice/common";
|
||||||
|
|
||||||
interface FilterSectionProps {
|
interface FilterSectionProps {
|
||||||
selectedCategory: string;
|
selectedCategory: string;
|
||||||
|
@ -14,6 +16,14 @@ export default function FilterSection({
|
||||||
onCategoryChange,
|
onCategoryChange,
|
||||||
onLevelChange,
|
onLevelChange,
|
||||||
}: FilterSectionProps) {
|
}: FilterSectionProps) {
|
||||||
|
const { data: levels, isLoading } = api.term.findMany.useQuery({
|
||||||
|
where: {
|
||||||
|
taxonomy: {
|
||||||
|
slug: TaxonomySlug.LEVEL,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
// const { data } = api.term;
|
||||||
return (
|
return (
|
||||||
<div className="bg-white p-6 rounded-lg shadow-sm space-y-6">
|
<div className="bg-white p-6 rounded-lg shadow-sm space-y-6">
|
||||||
<div>
|
<div>
|
||||||
|
@ -21,10 +31,9 @@ export default function FilterSection({
|
||||||
<Radio.Group
|
<Radio.Group
|
||||||
value={selectedCategory}
|
value={selectedCategory}
|
||||||
onChange={(e) => onCategoryChange(e.target.value)}
|
onChange={(e) => onCategoryChange(e.target.value)}
|
||||||
className="flex flex-col space-y-3"
|
className="flex flex-col space-y-3">
|
||||||
>
|
|
||||||
<Radio value="">全部课程</Radio>
|
<Radio value="">全部课程</Radio>
|
||||||
{categories.map(category => (
|
{categories.map((category) => (
|
||||||
<Radio key={category} value={category}>
|
<Radio key={category} value={category}>
|
||||||
{category}
|
{category}
|
||||||
</Radio>
|
</Radio>
|
||||||
|
@ -39,12 +48,11 @@ export default function FilterSection({
|
||||||
<Radio.Group
|
<Radio.Group
|
||||||
value={selectedLevel}
|
value={selectedLevel}
|
||||||
onChange={(e) => onLevelChange(e.target.value)}
|
onChange={(e) => onLevelChange(e.target.value)}
|
||||||
className="flex flex-col space-y-3"
|
className="flex flex-col space-y-3">
|
||||||
>
|
|
||||||
<Radio value="">全部难度</Radio>
|
<Radio value="">全部难度</Radio>
|
||||||
{levels.map(level => (
|
{levels?.map((level) => (
|
||||||
<Radio key={level} value={level}>
|
<Radio key={level.id} value={level.id}>
|
||||||
{level}
|
{level.name}
|
||||||
</Radio>
|
</Radio>
|
||||||
))}
|
))}
|
||||||
</Radio.Group>
|
</Radio.Group>
|
||||||
|
|
|
@ -1,21 +1,45 @@
|
||||||
import { useState, useMemo } from 'react';
|
import { useState, useMemo } from "react";
|
||||||
import { mockCourses } from './mockData';
|
import { mockCourses } from "./mockData";
|
||||||
import FilterSection from './components/FilterSection';
|
import FilterSection from "./components/FilterSection";
|
||||||
import CourseList from './components/CourseList';
|
import CourseList from "./components/CourseList";
|
||||||
|
import { api } from "@nice/client";
|
||||||
|
import { LectureType, PostType } from "@nice/common";
|
||||||
|
|
||||||
|
|
||||||
export default function CoursesPage() {
|
export default function CoursesPage() {
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const [currentPage, setCurrentPage] = useState(1);
|
const [currentPage, setCurrentPage] = useState(1);
|
||||||
const [selectedCategory, setSelectedCategory] = useState('');
|
const [selectedCategory, setSelectedCategory] = useState("");
|
||||||
const [selectedLevel, setSelectedLevel] = useState('');
|
const [selectedLevel, setSelectedLevel] = useState("");
|
||||||
const pageSize = 12;
|
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(() => {
|
const filteredCourses = useMemo(() => {
|
||||||
return mockCourses.filter(course => {
|
return mockCourses.filter((course) => {
|
||||||
const matchCategory = !selectedCategory || course.category === selectedCategory;
|
const matchCategory =
|
||||||
|
!selectedCategory || course.category === selectedCategory;
|
||||||
const matchLevel = !selectedLevel || course.level === selectedLevel;
|
const matchLevel = !selectedLevel || course.level === selectedLevel;
|
||||||
return matchCategory && matchLevel;
|
return matchCategory && matchLevel;
|
||||||
});
|
});
|
||||||
|
@ -28,7 +52,7 @@ export default function CoursesPage() {
|
||||||
|
|
||||||
const handlePageChange = (page: number) => {
|
const handlePageChange = (page: number) => {
|
||||||
setCurrentPage(page);
|
setCurrentPage(page);
|
||||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -41,11 +65,11 @@ export default function CoursesPage() {
|
||||||
<FilterSection
|
<FilterSection
|
||||||
selectedCategory={selectedCategory}
|
selectedCategory={selectedCategory}
|
||||||
selectedLevel={selectedLevel}
|
selectedLevel={selectedLevel}
|
||||||
onCategoryChange={category => {
|
onCategoryChange={(category) => {
|
||||||
setSelectedCategory(category);
|
setSelectedCategory(category);
|
||||||
setCurrentPage(1);
|
setCurrentPage(1);
|
||||||
}}
|
}}
|
||||||
onLevelChange={level => {
|
onLevelChange={(level) => {
|
||||||
setSelectedLevel(level);
|
setSelectedLevel(level);
|
||||||
setCurrentPage(1);
|
setCurrentPage(1);
|
||||||
}}
|
}}
|
||||||
|
|
|
@ -1,15 +1,15 @@
|
||||||
import { useState } from 'react';
|
import { useState } from "react";
|
||||||
import { Input, Layout, Avatar, Button, Dropdown } from 'antd';
|
import { Input, Layout, Avatar, Button, Dropdown } from "antd";
|
||||||
import { SearchOutlined, UserOutlined } from '@ant-design/icons';
|
import { EditFilled, SearchOutlined, UserOutlined } from "@ant-design/icons";
|
||||||
import { useAuth } from '@web/src/providers/auth-provider';
|
import { useAuth } from "@web/src/providers/auth-provider";
|
||||||
import { useNavigate } from 'react-router-dom';
|
import { useNavigate } from "react-router-dom";
|
||||||
import { UserMenu } from './UserMenu';
|
import { UserMenu } from "./UserMenu";
|
||||||
import { NavigationMenu } from './NavigationMenu';
|
import { NavigationMenu } from "./NavigationMenu";
|
||||||
|
|
||||||
const { Header } = Layout;
|
const { Header } = Layout;
|
||||||
|
|
||||||
export function MainHeader() {
|
export function MainHeader() {
|
||||||
const [searchValue, setSearchValue] = useState('');
|
const [searchValue, setSearchValue] = useState("");
|
||||||
const { isAuthenticated, user } = useAuth();
|
const { isAuthenticated, user } = useAuth();
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
@ -18,9 +18,8 @@ export function MainHeader() {
|
||||||
<div className="w-full max-w-screen-2xl px-4 md:px-6 mx-auto flex items-center justify-between h-full">
|
<div className="w-full max-w-screen-2xl px-4 md:px-6 mx-auto flex items-center justify-between h-full">
|
||||||
<div className="flex items-center space-x-8">
|
<div className="flex items-center space-x-8">
|
||||||
<div
|
<div
|
||||||
onClick={() => navigate('/')}
|
onClick={() => navigate("/")}
|
||||||
className="text-2xl font-bold bg-gradient-to-r from-primary-600 via-primary-500 to-primary-400 bg-clip-text text-transparent hover:scale-105 transition-transform cursor-pointer"
|
className="text-2xl font-bold bg-gradient-to-r from-primary-600 via-primary-500 to-primary-400 bg-clip-text text-transparent hover:scale-105 transition-transform cursor-pointer">
|
||||||
>
|
|
||||||
烽火慕课
|
烽火慕课
|
||||||
</div>
|
</div>
|
||||||
<NavigationMenu />
|
<NavigationMenu />
|
||||||
|
@ -29,32 +28,43 @@ export function MainHeader() {
|
||||||
<div className="group relative">
|
<div className="group relative">
|
||||||
<Input
|
<Input
|
||||||
size="large"
|
size="large"
|
||||||
prefix={<SearchOutlined className="text-gray-400 group-hover:text-blue-500 transition-colors" />}
|
prefix={
|
||||||
|
<SearchOutlined className="text-gray-400 group-hover:text-blue-500 transition-colors" />
|
||||||
|
}
|
||||||
placeholder="搜索课程"
|
placeholder="搜索课程"
|
||||||
className="w-72 rounded-full"
|
className="w-72 rounded-full"
|
||||||
value={searchValue}
|
value={searchValue}
|
||||||
onChange={(e) => setSearchValue(e.target.value)}
|
onChange={(e) => setSearchValue(e.target.value)}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
{isAuthenticated && (
|
||||||
|
<>
|
||||||
|
<Button
|
||||||
|
onClick={() => navigate("/course/editor")}
|
||||||
|
className="flex items-center space-x-1 bg-gradient-to-r from-blue-500 to-blue-600 text-white hover:from-blue-600 hover:to-blue-700 border-none shadow-md hover:shadow-lg transition-all"
|
||||||
|
icon={<EditFilled />}>
|
||||||
|
创建课程
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
{isAuthenticated ? (
|
{isAuthenticated ? (
|
||||||
<Dropdown
|
<Dropdown
|
||||||
overlay={<UserMenu />}
|
overlay={<UserMenu />}
|
||||||
trigger={['click']}
|
trigger={["click"]}
|
||||||
placement="bottomRight"
|
placement="bottomRight">
|
||||||
>
|
|
||||||
<Avatar
|
<Avatar
|
||||||
size="large"
|
size="large"
|
||||||
className="cursor-pointer hover:scale-105 transition-all bg-gradient-to-r from-blue-500 to-blue-600 text-white font-semibold"
|
className="cursor-pointer hover:scale-105 transition-all bg-gradient-to-r from-blue-500 to-blue-600 text-white font-semibold">
|
||||||
>
|
{(user?.showname ||
|
||||||
{(user?.showname || user?.username || '')[0]?.toUpperCase()}
|
user?.username ||
|
||||||
|
"")[0]?.toUpperCase()}
|
||||||
</Avatar>
|
</Avatar>
|
||||||
</Dropdown>
|
</Dropdown>
|
||||||
) : (
|
) : (
|
||||||
<Button
|
<Button
|
||||||
onClick={() => navigate('/login')}
|
onClick={() => navigate("/login")}
|
||||||
className="flex items-center space-x-1 bg-gradient-to-r from-blue-500 to-blue-600 text-white hover:from-blue-600 hover:to-blue-700 border-none shadow-md hover:shadow-lg transition-all"
|
className="flex items-center space-x-1 bg-gradient-to-r from-blue-500 to-blue-600 text-white hover:from-blue-600 hover:to-blue-700 border-none shadow-md hover:shadow-lg transition-all"
|
||||||
icon={<UserOutlined />}
|
icon={<UserOutlined />}>
|
||||||
>
|
|
||||||
登录
|
登录
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
)}
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
import MindEditor from "@web/src/components/common/editor/MindEditor";
|
import MindEditor from "@web/src/components/common/editor/MindEditor";
|
||||||
|
// import MindElixir, { MindElixirInstance } from "mind-elixir";
|
||||||
import { useEffect, useRef } from "react";
|
import { useEffect, useRef } from "react";
|
||||||
export default function PathsPage() {
|
export default function PathsPage() {
|
||||||
return <MindEditor></MindEditor>
|
// return <MindEditor></MindEditor>
|
||||||
}
|
}
|
|
@ -1,6 +1,6 @@
|
||||||
import { MindElixirInstance } from "mind-elixir";
|
import { MindElixirInstance } from "mind-elixir";
|
||||||
import { useRef, useEffect } from "react";
|
import { useRef, useEffect } from "react";
|
||||||
import MindElixir from 'mind-elixir';
|
import MindElixir from "mind-elixir";
|
||||||
|
|
||||||
export default function MindEditor() {
|
export default function MindEditor() {
|
||||||
const me = useRef<MindElixirInstance>();
|
const me = useRef<MindElixirInstance>();
|
||||||
|
|
|
@ -1,7 +1,13 @@
|
||||||
import { CourseDetailProvider } from "./CourseDetailContext";
|
import { CourseDetailProvider } from "./CourseDetailContext";
|
||||||
import CourseDetailLayout from "./CourseDetailLayout";
|
import CourseDetailLayout from "./CourseDetailLayout";
|
||||||
|
|
||||||
export default function CourseDetail({ id }: { id?: string }) {
|
export default function CourseDetail({
|
||||||
|
id,
|
||||||
|
lectureId,
|
||||||
|
}: {
|
||||||
|
id?: string;
|
||||||
|
lectureId?: string;
|
||||||
|
}) {
|
||||||
const iframeStyle = {
|
const iframeStyle = {
|
||||||
width: "50%",
|
width: "50%",
|
||||||
height: "100vh",
|
height: "100vh",
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
import { api,} from "@nice/client";
|
import { api } from "@nice/client";
|
||||||
import { courseDetailSelect, CourseDto } from "@nice/common";
|
import { courseDetailSelect, CourseDto } from "@nice/common";
|
||||||
import React, { createContext, ReactNode, useState } from "react";
|
import React, { createContext, ReactNode, useEffect, useState } from "react";
|
||||||
|
import { useNavigate } from "react-router-dom";
|
||||||
|
|
||||||
interface CourseDetailContextType {
|
interface CourseDetailContextType {
|
||||||
editId?: string; // 添加 editId
|
editId?: string; // 添加 editId
|
||||||
|
@ -22,12 +22,13 @@ export function CourseDetailProvider({
|
||||||
children,
|
children,
|
||||||
editId,
|
editId,
|
||||||
}: CourseFormProviderProps) {
|
}: CourseFormProviderProps) {
|
||||||
|
const navigate = useNavigate();
|
||||||
const { data: course, isLoading }: { data: CourseDto; isLoading: boolean } =
|
const { data: course, isLoading }: { data: CourseDto; isLoading: boolean } =
|
||||||
api.course.findFirst.useQuery(
|
(api.post as any).findFirst.useQuery(
|
||||||
{
|
{
|
||||||
where: { id: editId },
|
where: { id: editId },
|
||||||
include: {
|
include: {
|
||||||
sections: { include: { lectures: true } },
|
// sections: { include: { lectures: true } },
|
||||||
enrollments: true,
|
enrollments: true,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
@ -36,6 +37,10 @@ export function CourseDetailProvider({
|
||||||
const [selectedLectureId, setSelectedLectureId] = useState<
|
const [selectedLectureId, setSelectedLectureId] = useState<
|
||||||
string | undefined
|
string | undefined
|
||||||
>(undefined);
|
>(undefined);
|
||||||
|
useEffect(() => {
|
||||||
|
navigate(``)
|
||||||
|
|
||||||
|
}, [selectedLectureId, editId]);
|
||||||
const [isHeaderVisible, setIsHeaderVisible] = useState(true); // 新增
|
const [isHeaderVisible, setIsHeaderVisible] = useState(true); // 新增
|
||||||
return (
|
return (
|
||||||
<CourseDetailContext.Provider
|
<CourseDetailContext.Provider
|
||||||
|
|
|
@ -16,7 +16,8 @@ export default function CourseDetailLayout() {
|
||||||
const [isSyllabusOpen, setIsSyllabusOpen] = useState(false);
|
const [isSyllabusOpen, setIsSyllabusOpen] = useState(false);
|
||||||
return (
|
return (
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
<CourseDetailHeader /> {/* 添加 Header 组件 */}
|
<CourseDetailHeader />
|
||||||
|
{/* 添加 Header 组件 */}
|
||||||
{/* 主内容区域 */}
|
{/* 主内容区域 */}
|
||||||
{/* 为了防止 Header 覆盖内容,添加上边距 */}
|
{/* 为了防止 Header 覆盖内容,添加上边距 */}
|
||||||
<div className="pt-16">
|
<div className="pt-16">
|
||||||
|
|
|
@ -7,11 +7,12 @@ import {
|
||||||
import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/24/outline";
|
import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/24/outline";
|
||||||
import React, { useState, useRef, useContext } from "react";
|
import React, { useState, useRef, useContext } from "react";
|
||||||
import { motion, AnimatePresence } from "framer-motion";
|
import { motion, AnimatePresence } from "framer-motion";
|
||||||
import { SectionDto } from "@nice/common";
|
import { SectionDto, TaxonomySlug } from "@nice/common";
|
||||||
import { SyllabusHeader } from "./SyllabusHeader";
|
import { SyllabusHeader } from "./SyllabusHeader";
|
||||||
import { SectionItem } from "./SectionItem";
|
import { SectionItem } from "./SectionItem";
|
||||||
import { CollapsedButton } from "./CollapsedButton";
|
import { CollapsedButton } from "./CollapsedButton";
|
||||||
import { CourseDetailContext } from "../CourseDetailContext";
|
import { CourseDetailContext } from "../CourseDetailContext";
|
||||||
|
import { api } from "@nice/client";
|
||||||
|
|
||||||
interface CourseSyllabusProps {
|
interface CourseSyllabusProps {
|
||||||
sections: SectionDto[];
|
sections: SectionDto[];
|
||||||
|
@ -29,7 +30,11 @@ export const CourseSyllabus: React.FC<CourseSyllabusProps> = ({
|
||||||
const { isHeaderVisible } = useContext(CourseDetailContext);
|
const { isHeaderVisible } = useContext(CourseDetailContext);
|
||||||
const [expandedSections, setExpandedSections] = useState<string[]>([]);
|
const [expandedSections, setExpandedSections] = useState<string[]>([]);
|
||||||
const sectionRefs = useRef<{ [key: string]: HTMLDivElement | null }>({});
|
const sectionRefs = useRef<{ [key: string]: HTMLDivElement | null }>({});
|
||||||
|
// api.term.findMany.useQuery({
|
||||||
|
// where: {
|
||||||
|
// taxonomy: { slug: TaxonomySlug.CATEGORY },
|
||||||
|
// },
|
||||||
|
// });
|
||||||
const toggleSection = (sectionId: string) => {
|
const toggleSection = (sectionId: string) => {
|
||||||
setExpandedSections((prev) =>
|
setExpandedSections((prev) =>
|
||||||
prev.includes(sectionId)
|
prev.includes(sectionId)
|
||||||
|
|
|
@ -1,9 +1,8 @@
|
||||||
// components/CourseSyllabus/LectureItem.tsx
|
// components/CourseSyllabus/LectureItem.tsx
|
||||||
|
|
||||||
import { Lecture } from "@nice/common";
|
import { Lecture, LectureType } from "@nice/common";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { motion } from "framer-motion";
|
import { ClockCircleOutlined, FileTextOutlined, PlayCircleOutlined } from "@ant-design/icons"; // 使用 Ant Design 图标
|
||||||
import { ClockIcon, PlayCircleIcon } from "@heroicons/react/24/outline";
|
|
||||||
|
|
||||||
interface LectureItemProps {
|
interface LectureItemProps {
|
||||||
lecture: Lecture;
|
lecture: Lecture;
|
||||||
|
@ -14,23 +13,24 @@ export const LectureItem: React.FC<LectureItemProps> = ({
|
||||||
lecture,
|
lecture,
|
||||||
onClick,
|
onClick,
|
||||||
}) => (
|
}) => (
|
||||||
<motion.button
|
<div
|
||||||
initial={{ opacity: 0, x: -20 }}
|
className="w-full flex items-center gap-4 p-4 hover:bg-gray-50 text-left transition-colors cursor-pointer"
|
||||||
animate={{ opacity: 1, x: 0 }}
|
|
||||||
className="w-full flex items-center gap-4 p-4 hover:bg-gray-50 text-left transition-colors"
|
|
||||||
onClick={() => onClick(lecture.id)}>
|
onClick={() => onClick(lecture.id)}>
|
||||||
<PlayCircleIcon className="w-5 h-5 text-blue-500 flex-shrink-0" />
|
{lecture.type === LectureType.VIDEO && (
|
||||||
|
<PlayCircleOutlined className="w-5 h-5 text-blue-500 flex-shrink-0" />
|
||||||
|
)}
|
||||||
|
{lecture.type === LectureType.ARTICLE && (
|
||||||
|
<FileTextOutlined className="w-5 h-5 text-blue-500 flex-shrink-0" /> // 为文章类型添加图标
|
||||||
|
)}
|
||||||
<div className="flex-grow">
|
<div className="flex-grow">
|
||||||
<h4 className="font-medium text-gray-800">{lecture.title}</h4>
|
<h4 className="font-medium text-gray-800">{lecture.title}</h4>
|
||||||
{lecture.description && (
|
{lecture.subTitle && (
|
||||||
<p className="text-sm text-gray-500 mt-1">
|
<p className="text-sm text-gray-500 mt-1">{lecture.subTitle}</p>
|
||||||
{lecture.description}
|
|
||||||
</p>
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-1 text-sm text-gray-500">
|
<div className="flex items-center gap-1 text-sm text-gray-500">
|
||||||
<ClockIcon className="w-4 h-4" />
|
<ClockCircleOutlined className="w-4 h-4" />
|
||||||
<span>{lecture.duration}分钟</span>
|
<span>{lecture.duration}分钟</span>
|
||||||
</div>
|
</div>
|
||||||
</motion.button>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
@ -33,8 +33,8 @@ export const SectionItem = React.forwardRef<HTMLDivElement, SectionItemProps>(
|
||||||
{section.title}
|
{section.title}
|
||||||
</h3>
|
</h3>
|
||||||
<p className="text-sm text-gray-500">
|
<p className="text-sm text-gray-500">
|
||||||
{section.totalLectures}节课 ·{" "}
|
{section?.lectures?.length}节课 ·{" "}
|
||||||
{Math.floor(section.totalDuration / 60)}分钟
|
{/* {Math.floor(section?.totalDuration / 60)}分钟 */}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -43,7 +43,12 @@ export function CourseFormProvider({
|
||||||
const [form] = Form.useForm<CourseFormData>();
|
const [form] = Form.useForm<CourseFormData>();
|
||||||
const { create, update, createCourse } = usePost();
|
const { create, update, createCourse } = usePost();
|
||||||
const { data: course }: { data: CourseDto } = api.post.findFirst.useQuery(
|
const { data: course }: { data: CourseDto } = api.post.findFirst.useQuery(
|
||||||
{ where: { id: editId } },
|
{
|
||||||
|
where: { id: editId },
|
||||||
|
include: {
|
||||||
|
terms: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
{ enabled: Boolean(editId) }
|
{ enabled: Boolean(editId) }
|
||||||
);
|
);
|
||||||
const {
|
const {
|
||||||
|
@ -51,7 +56,7 @@ export function CourseFormProvider({
|
||||||
}: {
|
}: {
|
||||||
data: Taxonomy[];
|
data: Taxonomy[];
|
||||||
} = api.taxonomy.getAll.useQuery({
|
} = api.taxonomy.getAll.useQuery({
|
||||||
// type: ObjectType.COURSE,
|
type: ObjectType.COURSE,
|
||||||
});
|
});
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
@ -65,6 +70,9 @@ export function CourseFormProvider({
|
||||||
requirements: course?.meta?.requirements,
|
requirements: course?.meta?.requirements,
|
||||||
objectives: course?.meta?.objectives,
|
objectives: course?.meta?.objectives,
|
||||||
};
|
};
|
||||||
|
course.terms?.forEach((term) => {
|
||||||
|
formData[term.taxonomyId] = term.id; // 假设 taxonomyName 是您在 Form.Item 中使用的 name
|
||||||
|
});
|
||||||
form.setFieldsValue(formData);
|
form.setFieldsValue(formData);
|
||||||
}
|
}
|
||||||
}, [course, form]);
|
}, [course, form]);
|
||||||
|
@ -72,13 +80,24 @@ export function CourseFormProvider({
|
||||||
const onSubmit = async (values: CourseFormData) => {
|
const onSubmit = async (values: CourseFormData) => {
|
||||||
console.log(values);
|
console.log(values);
|
||||||
const sections = values?.sections || [];
|
const sections = values?.sections || [];
|
||||||
|
const termIds = taxonomies
|
||||||
|
.map((tax) => values[tax.id]) // 获取每个 taxonomy 对应的选中值
|
||||||
|
.filter((id) => id); // 过滤掉空值
|
||||||
|
|
||||||
const formattedValues = {
|
const formattedValues = {
|
||||||
...values,
|
...values,
|
||||||
meta: {
|
meta: {
|
||||||
requirements: values.requirements,
|
requirements: values.requirements,
|
||||||
objectives: values.objectives,
|
objectives: values.objectives,
|
||||||
},
|
},
|
||||||
|
terms: {
|
||||||
|
connect: termIds.map((id) => ({ id })), // 转换成 connect 格式
|
||||||
|
},
|
||||||
};
|
};
|
||||||
|
// 删除原始的 taxonomy 字段
|
||||||
|
taxonomies.forEach((tax) => {
|
||||||
|
delete formattedValues[tax.id];
|
||||||
|
});
|
||||||
delete formattedValues.requirements;
|
delete formattedValues.requirements;
|
||||||
delete formattedValues.objectives;
|
delete formattedValues.objectives;
|
||||||
delete formattedValues.sections;
|
delete formattedValues.sections;
|
||||||
|
|
|
@ -14,6 +14,7 @@ export function CourseBasicForm() {
|
||||||
value: key as CourseLevel,
|
value: key as CourseLevel,
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
|
|
||||||
const { form, taxonomies } = useCourseEditor();
|
const { form, taxonomies } = useCourseEditor();
|
||||||
return (
|
return (
|
||||||
<div className="max-w-2xl mx-auto space-y-6 p-6">
|
<div className="max-w-2xl mx-auto space-y-6 p-6">
|
||||||
|
@ -50,9 +51,11 @@ export function CourseBasicForm() {
|
||||||
},
|
},
|
||||||
]}
|
]}
|
||||||
label={tax.name}
|
label={tax.name}
|
||||||
name={tax.name}
|
name={tax.id}
|
||||||
key={index}>
|
key={index}>
|
||||||
<TermSelect taxonomyId={tax.id}></TermSelect>
|
<TermSelect
|
||||||
|
placeholder={`请选择${tax.name}`}
|
||||||
|
taxonomyId={tax.id}></TermSelect>
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
))}
|
))}
|
||||||
{/* <Form.Item name="level" label="难度等级">
|
{/* <Form.Item name="level" label="难度等级">
|
||||||
|
|
|
@ -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,
|
Collapse,
|
||||||
message,
|
message,
|
||||||
} from "antd";
|
} from "antd";
|
||||||
import React, { useCallback, useEffect, useState } from "react";
|
import React, { useEffect, useState } from "react";
|
||||||
import {
|
import {
|
||||||
DndContext,
|
DndContext,
|
||||||
closestCenter,
|
closestCenter,
|
||||||
|
@ -69,12 +69,16 @@ export const LectureList: React.FC<LectureListProps> = ({
|
||||||
enabled: !!sectionId,
|
enabled: !!sectionId,
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
|
// 用 lectures 初始化 items 状态
|
||||||
|
const [items, setItems] = useState<LectureData[]>(lectures);
|
||||||
|
|
||||||
|
// 当 lectures 变化时更新 items
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (lectures && !isLoading) {
|
if (!isLoading) {
|
||||||
setItems(lectures);
|
setItems(lectures);
|
||||||
}
|
}
|
||||||
}, [lectures, isLoading]);
|
}, [lectures, isLoading]);
|
||||||
const [items, setItems] = useState<LectureData[]>(lectures);
|
|
||||||
|
|
||||||
const sensors = useSensors(
|
const sensors = useSensors(
|
||||||
useSensor(PointerSensor),
|
useSensor(PointerSensor),
|
||||||
|
@ -96,12 +100,12 @@ export const LectureList: React.FC<LectureListProps> = ({
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="pl-8">
|
<div className="pl-8">
|
||||||
<div
|
{/* <Button
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
console.log(lectures);
|
console.log(lectures);
|
||||||
}}>
|
}}>
|
||||||
123
|
123
|
||||||
</div>
|
</Button> */}
|
||||||
<DndContext
|
<DndContext
|
||||||
sensors={sensors}
|
sensors={sensors}
|
||||||
collisionDetection={closestCenter}
|
collisionDetection={closestCenter}
|
||||||
|
@ -132,8 +136,8 @@ export const LectureList: React.FC<LectureListProps> = ({
|
||||||
icon={<PlusOutlined />}
|
icon={<PlusOutlined />}
|
||||||
className="mt-4"
|
className="mt-4"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setItems([
|
setItems((prevItems) => [
|
||||||
...items.filter((item) => !!item.id),
|
...prevItems.filter((item) => !!item.id),
|
||||||
{
|
{
|
||||||
id: null,
|
id: null,
|
||||||
title: "",
|
title: "",
|
||||||
|
|
|
@ -101,6 +101,7 @@ export const SortableSection: React.FC<SortableSectionProps> = ({
|
||||||
<div ref={setNodeRef} style={style} className="mb-4">
|
<div ref={setNodeRef} style={style} className="mb-4">
|
||||||
<Collapse>
|
<Collapse>
|
||||||
<Collapse.Panel
|
<Collapse.Panel
|
||||||
|
disabled={!field.id} // 添加此行以禁用未创建章节的展开
|
||||||
header={
|
header={
|
||||||
editing ? (
|
editing ? (
|
||||||
<Form
|
<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 { useAuth } from "@web/src/providers/auth-provider";
|
||||||
import { RolePerms } from "@nice/common";
|
import { RolePerms } from "@nice/common";
|
||||||
import TaxonomyModal from "./taxonomy-modal";
|
import TaxonomyModal from "./taxonomy-modal";
|
||||||
|
|
|
@ -42,7 +42,7 @@ export default function Speed() {
|
||||||
}}
|
}}
|
||||||
className={`px-2 py-1 text-lg whitespace-nowrap ${
|
className={`px-2 py-1 text-lg whitespace-nowrap ${
|
||||||
playbackSpeed === speed
|
playbackSpeed === speed
|
||||||
? "text-primaryHover font-bold"
|
? "text-primary-500 font-bold"
|
||||||
: "text-white hover:text-primaryHover"
|
: "text-white hover:text-primaryHover"
|
||||||
}`}>
|
}`}>
|
||||||
{speed}x
|
{speed}x
|
||||||
|
|
|
@ -56,11 +56,10 @@ export const routes: CustomRouteObject[] = [
|
||||||
{
|
{
|
||||||
index: true,
|
index: true,
|
||||||
element: <HomePage />,
|
element: <HomePage />,
|
||||||
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "paths",
|
path: "paths",
|
||||||
element: <PathsPage></PathsPage>
|
element: <PathsPage></PathsPage>,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "courses",
|
path: "courses",
|
||||||
|
@ -125,7 +124,7 @@ export const routes: CustomRouteObject[] = [
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: ":id?/detail", // 使用 ? 表示 id 参数是可选的
|
path: ":id?/detail/:lectureId?", // 使用 ? 表示 id 参数是可选的
|
||||||
element: <CourseDetailPage />,
|
element: <CourseDetailPage />,
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
|
|
@ -199,7 +199,8 @@ model Post {
|
||||||
terms Term[] @relation("post_term")
|
terms Term[] @relation("post_term")
|
||||||
order Float? @default(0) @map("order")
|
order Float? @default(0) @map("order")
|
||||||
duration Int?
|
duration Int?
|
||||||
|
rating Int? @default(0)
|
||||||
|
// 索引
|
||||||
// 日期时间类型字段
|
// 日期时间类型字段
|
||||||
createdAt DateTime @default(now()) @map("created_at")
|
createdAt DateTime @default(now()) @map("created_at")
|
||||||
publishedAt DateTime? @map("published_at") // 发布时间
|
publishedAt DateTime? @map("published_at") // 发布时间
|
||||||
|
@ -244,7 +245,6 @@ model PostAncestry {
|
||||||
relDepth Int @map("rel_depth")
|
relDepth Int @map("rel_depth")
|
||||||
ancestor Post? @relation("AncestorPosts", fields: [ancestorId], references: [id])
|
ancestor Post? @relation("AncestorPosts", fields: [ancestorId], references: [id])
|
||||||
descendant Post @relation("DescendantPosts", fields: [descendantId], references: [id])
|
descendant Post @relation("DescendantPosts", fields: [descendantId], references: [id])
|
||||||
|
|
||||||
// 复合索引优化
|
// 复合索引优化
|
||||||
// 索引建议
|
// 索引建议
|
||||||
@@index([ancestorId]) // 针对祖先的查询
|
@@index([ancestorId]) // 针对祖先的查询
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import { Prisma } from "@prisma/client";
|
import { Prisma } from "@prisma/client";
|
||||||
import { AppConfigSlug, RolePerms, TaxonomySlug } from "./enum";
|
import { AppConfigSlug, ObjectType, RolePerms, TaxonomySlug } from "./enum";
|
||||||
|
|
||||||
export const InitRoles: {
|
export const InitRoles: {
|
||||||
name: string;
|
name: string;
|
||||||
|
@ -50,7 +50,11 @@ export const InitRoles: {
|
||||||
permissions: Object.keys(RolePerms) as RolePerms[],
|
permissions: Object.keys(RolePerms) as RolePerms[],
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
export const InitTaxonomies: { name: string; slug: string }[] = [
|
export const InitTaxonomies: {
|
||||||
|
name: string;
|
||||||
|
slug: string;
|
||||||
|
objectType?: string[];
|
||||||
|
}[] = [
|
||||||
{
|
{
|
||||||
name: "分类",
|
name: "分类",
|
||||||
slug: TaxonomySlug.CATEGORY,
|
slug: TaxonomySlug.CATEGORY,
|
||||||
|
@ -58,6 +62,7 @@ export const InitTaxonomies: { name: string; slug: string }[] = [
|
||||||
{
|
{
|
||||||
name: "难度等级",
|
name: "难度等级",
|
||||||
slug: TaxonomySlug.LEVEL,
|
slug: TaxonomySlug.LEVEL,
|
||||||
|
objectType: [ObjectType.COURSE],
|
||||||
},
|
},
|
||||||
// {
|
// {
|
||||||
// name: "研判单元",
|
// name: "研判单元",
|
||||||
|
|
|
@ -6,8 +6,8 @@ export enum PostType {
|
||||||
POST_COMMENT = "post_comment",
|
POST_COMMENT = "post_comment",
|
||||||
COURSE_REVIEW = "course_review",
|
COURSE_REVIEW = "course_review",
|
||||||
COURSE = "couse",
|
COURSE = "couse",
|
||||||
LECTURE = "lecture",
|
|
||||||
SECTION = "section",
|
SECTION = "section",
|
||||||
|
LECTURE = "lecture",
|
||||||
}
|
}
|
||||||
export enum LectureType {
|
export enum LectureType {
|
||||||
VIDEO = "video",
|
VIDEO = "video",
|
||||||
|
|
|
@ -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 { StaffDto } from "./staff";
|
||||||
|
import { TermDto } from "./term";
|
||||||
|
|
||||||
export type PostComment = {
|
export type PostComment = {
|
||||||
id: string;
|
id: string;
|
||||||
|
@ -63,4 +71,5 @@ export type Course = Post & {
|
||||||
export type CourseDto = Course & {
|
export type CourseDto = Course & {
|
||||||
enrollments?: Enrollment[];
|
enrollments?: Enrollment[];
|
||||||
sections?: SectionDto[];
|
sections?: SectionDto[];
|
||||||
|
terms: Term[];
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue