lin
This commit is contained in:
parent
7fd2173dd2
commit
29340b8bb2
|
|
@ -1,7 +0,0 @@
|
|||
import CourseDetail from "@web/src/components/models/course/detail/CourseDetail";
|
||||
import { useParams } from "react-router-dom";
|
||||
|
||||
export function CourseDetailPage() {
|
||||
const { id, lectureId } = useParams();
|
||||
return <CourseDetail id={id} lectureId={lectureId}></CourseDetail>;
|
||||
}
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
import { Checkbox, List } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
export function CoursePreviewTabmsg({data}){
|
||||
|
||||
|
||||
const renderItem = (item) => (
|
||||
<List.Item>
|
||||
<List.Item.Meta
|
||||
title={item.title}
|
||||
description={item.description}
|
||||
/>
|
||||
</List.Item>
|
||||
);
|
||||
|
||||
return(
|
||||
<div className='my-2'>
|
||||
<List
|
||||
dataSource={data}
|
||||
split={false}
|
||||
renderItem={renderItem}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
import type { MenuProps } from 'antd';
|
||||
import { Menu } from 'antd';
|
||||
|
||||
type MenuItem = Required<MenuProps>['items'][number];
|
||||
|
||||
export function CourseCatalog(){
|
||||
return (
|
||||
<>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,73 +0,0 @@
|
|||
import { useEffect } from "react";
|
||||
import { CoursePreviewMsg } from "@web/src/app/main/course/preview/type.ts";
|
||||
import { Button, Tabs, Image, Skeleton } from "antd";
|
||||
import type { TabsProps } from "antd";
|
||||
import { PlayCircleOutlined } from "@ant-design/icons";
|
||||
export function CoursePreviewAllmsg({
|
||||
previewMsg,
|
||||
items,
|
||||
isLoading,
|
||||
}: {
|
||||
previewMsg?: CoursePreviewMsg;
|
||||
items: TabsProps["items"];
|
||||
isLoading: boolean;
|
||||
}) {
|
||||
useEffect(() => {
|
||||
console.log(previewMsg);
|
||||
});
|
||||
const TapOnChange = (key: string) => {
|
||||
console.log(key);
|
||||
};
|
||||
return (
|
||||
<div className="min-h-screen max-w-7xl mx-auto px-6 lg:px-8">
|
||||
<div className="overflow-auto flex justify-around align-items-center w-full mx-auto my-8">
|
||||
<div className="relative w-[600px] h-[340px] m-4 overflow-hidden flex justify-center items-center">
|
||||
<Image
|
||||
src={
|
||||
previewMsg.isLoading
|
||||
? "error"
|
||||
: previewMsg.videoPreview
|
||||
}
|
||||
alt="example"
|
||||
preview={false}
|
||||
className="w-full h-full object-cover z-0"
|
||||
fallback="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMIAAADDCAYAAADQvc6UAAABRWlDQ1BJQ0MgUHJvZmlsZQAAKJFjYGASSSwoyGFhYGDIzSspCnJ3UoiIjFJgf8LAwSDCIMogwMCcmFxc4BgQ4ANUwgCjUcG3awyMIPqyLsis7PPOq3QdDFcvjV3jOD1boQVTPQrgSkktTgbSf4A4LbmgqISBgTEFyFYuLykAsTuAbJEioKOA7DkgdjqEvQHEToKwj4DVhAQ5A9k3gGyB5IxEoBmML4BsnSQk8XQkNtReEOBxcfXxUQg1Mjc0dyHgXNJBSWpFCYh2zi+oLMpMzyhRcASGUqqCZ16yno6CkYGRAQMDKMwhqj/fAIcloxgHQqxAjIHBEugw5sUIsSQpBobtQPdLciLEVJYzMPBHMDBsayhILEqEO4DxG0txmrERhM29nYGBddr//5/DGRjYNRkY/l7////39v///y4Dmn+LgeHANwDrkl1AuO+pmgAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAwqADAAQAAAABAAAAwwAAAAD9b/HnAAAHlklEQVR4Ae3dP3PTWBSGcbGzM6GCKqlIBRV0dHRJFarQ0eUT8LH4BnRU0NHR0UEFVdIlFRV7TzRksomPY8uykTk/zewQfKw/9znv4yvJynLv4uLiV2dBoDiBf4qP3/ARuCRABEFAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghgg0Aj8i0JO4OzsrPv69Wv+hi2qPHr0qNvf39+iI97soRIh4f3z58/u7du3SXX7Xt7Z2enevHmzfQe+oSN2apSAPj09TSrb+XKI/f379+08+A0cNRE2ANkupk+ACNPvkSPcAAEibACyXUyfABGm3yNHuAECRNgAZLuYPgEirKlHu7u7XdyytGwHAd8jjNyng4OD7vnz51dbPT8/7z58+NB9+/bt6jU/TI+AGWHEnrx48eJ/EsSmHzx40L18+fLyzxF3ZVMjEyDCiEDjMYZZS5wiPXnyZFbJaxMhQIQRGzHvWR7XCyOCXsOmiDAi1HmPMMQjDpbpEiDCiL358eNHurW/5SnWdIBbXiDCiA38/Pnzrce2YyZ4//59F3ePLNMl4PbpiL2J0L979+7yDtHDhw8vtzzvdGnEXdvUigSIsCLAWavHp/+qM0BcXMd/q25n1vF57TYBp0a3mUzilePj4+7k5KSLb6gt6ydAhPUzXnoPR0dHl79WGTNCfBnn1uvSCJdegQhLI1vvCk+fPu2ePXt2tZOYEV6/fn31dz+shwAR1sP1cqvLntbEN9MxA9xcYjsxS1jWR4AIa2Ibzx0tc44fYX/16lV6NDFLXH+YL32jwiACRBiEbf5KcXoTIsQSpzXx4N28Ja4BQoK7rgXiydbHjx/P25TaQAJEGAguWy0+2Q8PD6/Ki4R8EVl+bzBOnZY95fq9rj9zAkTI2SxdidBHqG9+skdw43borCXO/ZcJdraPWdv22uIEiLA4q7nvvCug8WTqzQveOH26fodo7g6uFe/a17W3+nFBAkRYENRdb1vkkz1CH9cPsVy/jrhr27PqMYvENYNlHAIesRiBYwRy0V+8iXP8+/fvX11Mr7L7ECueb/r48eMqm7FuI2BGWDEG8cm+7G3NEOfmdcTQw4h9/55lhm7DekRYKQPZF2ArbXTAyu4kDYB2YxUzwg0gi/41ztHnfQG26HbGel/crVrm7tNY+/1btkOEAZ2M05r4FB7r9GbAIdxaZYrHdOsgJ/wCEQY0J74TmOKnbxxT9n3FgGGWWsVdowHtjt9Nnvf7yQM2aZU/TIAIAxrw6dOnAWtZZcoEnBpNuTuObWMEiLAx1HY0ZQJEmHJ3HNvGCBBhY6jtaMoEiJB0Z29vL6ls58vxPcO8/zfrdo5qvKO+d3Fx8Wu8zf1dW4p/cPzLly/dtv9Ts/EbcvGAHhHyfBIhZ6NSiIBTo0LNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiEC/wGgKKC4YMA4TAAAAABJRU5ErkJggg=="
|
||||
/>
|
||||
<div className="w-[600px] h-[360px] absolute top-0 z-10 bg-black opacity-30 transition-opacity duration-300 ease-in-out hover:opacity-70 cursor-pointer">
|
||||
<PlayCircleOutlined className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-white text-4xl z-10" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col justify-between w-2/5 content-start h-[340px] my-4 overflow-hidden">
|
||||
{isLoading ? (
|
||||
<Skeleton className="my-5" active />
|
||||
) : (
|
||||
<>
|
||||
<span className="text-3xl font-bold my-3 ">
|
||||
{previewMsg.Title}
|
||||
</span>
|
||||
<span className="text-xl font-semibold my-3 text-gray-700">
|
||||
{previewMsg.SubTitle}
|
||||
</span>
|
||||
<span className="text-lg font-light my-3 text-gray-500 text-clip">
|
||||
{previewMsg.Description}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
|
||||
<Button block type="primary" size="large">
|
||||
{" "}
|
||||
查看课程{" "}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="overflow-auto w-11/12 mx-auto my-8">
|
||||
<Tabs
|
||||
defaultActiveKey="1"
|
||||
tabBarGutter={100}
|
||||
items={items}
|
||||
onChange={TapOnChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,81 +0,0 @@
|
|||
import { Skeleton, type TabsProps } from 'antd';
|
||||
import { CoursePreviewAllmsg } from "./components/coursePreviewAllmsg";
|
||||
import { CoursePreviewTabmsg } from "./components/couresPreviewTabmsg";
|
||||
import { CoursePreviewMsg } from "./type";
|
||||
import { api } from '@nice/client'
|
||||
import { useNavigate, useParams } from 'react-router-dom';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { courseDetailSelect, CourseDto } from '@nice/common';
|
||||
|
||||
export function CoursePreview(){
|
||||
const { id } = useParams()
|
||||
const { data:course,isLoading:courseIsLoading}:{data:CourseDto,isLoading:boolean}= api.post.findFirst.useQuery({
|
||||
where:{
|
||||
id
|
||||
},
|
||||
select:courseDetailSelect
|
||||
})
|
||||
// course.sections[0].lectures[0]
|
||||
// `/course/${course.id}/detail/${Lecture.id}`
|
||||
useEffect(() => {
|
||||
if(!courseIsLoading){
|
||||
setPreviewMsg({
|
||||
videoPreview: course?.meta?.thumbnail,
|
||||
Title: course?.title,
|
||||
SubTitle:course?.subTitle,
|
||||
Description:course?.content,
|
||||
ToCourseUrl:`/course/${id}`,
|
||||
isLoading:courseIsLoading
|
||||
})
|
||||
}
|
||||
|
||||
},[courseIsLoading])
|
||||
const [previewMsg,setPreviewMsg] = useState({
|
||||
videoPreview: '',
|
||||
Title: '',
|
||||
SubTitle:'',
|
||||
Description:'',
|
||||
ToCourseUrl:'',
|
||||
isLoading:courseIsLoading
|
||||
})
|
||||
const tapData = [
|
||||
{
|
||||
title: '掌握R语言的基本概念语法',
|
||||
description: '学生将学习R语言和RStudio的基本知识',
|
||||
},
|
||||
{
|
||||
title: '掌握R语言的基本概念语法',
|
||||
description: '学生将学习R语言的变量、数据类型、循环和条件语句等',
|
||||
},
|
||||
{
|
||||
title: '掌握R语言的数据导入管理',
|
||||
description: '学生将学会如何将数据导入R环境，并且使用各种类型的数据',
|
||||
},
|
||||
{
|
||||
title: '掌握R语言的基本数据清洗',
|
||||
description: '学生将学会使用R语言进行数据清洗、整理和管理',
|
||||
},
|
||||
{
|
||||
title: '掌握R语言的基本数据统计',
|
||||
description: '学生将学会使用R语言进行基本的数据统计',
|
||||
},
|
||||
{
|
||||
title: '掌握R语言的基本绘图功能',
|
||||
description: '学生将学会使用R语言基本的绘图功能和ggplot2的应用',
|
||||
},
|
||||
];
|
||||
const isLoading = false
|
||||
const items: TabsProps['items'] = [
|
||||
{
|
||||
key: '1',
|
||||
label: '课程学习目标',
|
||||
children: isLoading ? <Skeleton className='my-5' active />: <CoursePreviewTabmsg data={tapData}/>,
|
||||
}
|
||||
];
|
||||
|
||||
return(
|
||||
<div className="min-h-screen">
|
||||
<CoursePreviewAllmsg previewMsg= {previewMsg} isLoading={courseIsLoading } items = {items}></CoursePreviewAllmsg>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
export interface CoursePreviewMsg {
|
||||
videoPreview: string;
|
||||
Title: string;
|
||||
SubTitle: string;
|
||||
Description: string;
|
||||
ToCourseUrl: string;
|
||||
isLoading: boolean;
|
||||
}
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
import { useMainContext } from "../../layout/MainProvider";
|
||||
import { PostType, Prisma } from "@nice/common";
|
||||
import PostList from "@web/src/components/models/course/list/PostList";
|
||||
import CourseCard from "@web/src/components/models/post/SubPost/CourseCard";
|
||||
|
||||
export function CoursesContainer() {
|
||||
const { searchCondition, termsCondition } = useMainContext();
|
||||
return (
|
||||
<>
|
||||
<PostList
|
||||
renderItem={(post) => <CourseCard post={post}></CourseCard>}
|
||||
params={{
|
||||
pageSize: 12,
|
||||
where: {
|
||||
type: PostType.COURSE,
|
||||
...termsCondition,
|
||||
...searchCondition,
|
||||
},
|
||||
}}
|
||||
cols={4}></PostList>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default CoursesContainer;
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
import BasePostLayout from "../layout/BasePost/BasePostLayout";
|
||||
import CoursesContainer from "./components/CoursesContainer";
|
||||
import { useEffect } from "react";
|
||||
import { useMainContext } from "../layout/MainProvider";
|
||||
import { PostType } from "@nice/common";
|
||||
export default function CoursesPage() {
|
||||
const { setSearchMode } = useMainContext();
|
||||
useEffect(() => {
|
||||
setSearchMode(PostType.COURSE);
|
||||
}, [setSearchMode]);
|
||||
return (
|
||||
<>
|
||||
<BasePostLayout>
|
||||
<CoursesContainer></CoursesContainer>
|
||||
</BasePostLayout>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,107 +0,0 @@
|
|||
import React, { useState, useCallback, useEffect, useMemo } from "react";
|
||||
import { Typography, Skeleton } from "antd";
|
||||
import { stringToColor, TaxonomySlug, TermDto } from "@nice/common";
|
||||
import { api, useTrainSituation } from "@nice/client";
|
||||
import LookForMore from "./LookForMore";
|
||||
import CategorySectionCard from "./CategorySectionCard";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useMainContext } from "../../layout/MainProvider";
|
||||
import { useAuth } from "@web/src/providers/auth-provider";
|
||||
|
||||
const { Title, Text } = Typography;
|
||||
const CategorySection = () => {
|
||||
const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
|
||||
const { selectedTerms, setSelectedTerms } = useMainContext();
|
||||
const {
|
||||
data: courseCategoriesData,
|
||||
isLoading,
|
||||
}: { data: TermDto[]; isLoading: boolean } = api.term.findMany.useQuery({
|
||||
where: {
|
||||
taxonomy: {
|
||||
slug: TaxonomySlug.CATEGORY,
|
||||
},
|
||||
parentId: null,
|
||||
},
|
||||
take: 8,
|
||||
});
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleMouseEnter = useCallback((index: number) => {
|
||||
setHoveredIndex(index);
|
||||
}, []);
|
||||
|
||||
const handleMouseLeave = useCallback(() => {
|
||||
setHoveredIndex(null);
|
||||
}, []);
|
||||
|
||||
const handleMouseClick = useCallback((categoryId: string) => {
|
||||
setSelectedTerms({
|
||||
...selectedTerms,
|
||||
[TaxonomySlug.CATEGORY]: [categoryId],
|
||||
});
|
||||
navigate("/courses");
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
}, []);
|
||||
|
||||
|
||||
const {user} = useAuth()
|
||||
const {create} = useTrainSituation()
|
||||
useEffect(() => {
|
||||
if (user?.id) {
|
||||
create.mutate({
|
||||
data: {
|
||||
//staffId: user.id, // 确保类型匹配
|
||||
mustTrainTime: "1",
|
||||
alreadyTrainTime: "1",
|
||||
//trainContentId: "cm83w52dr00ff3jc8ep4uf4a4",
|
||||
staff: { connect: { id: user.id } },
|
||||
trainContent: { connect: { id: "cm847lcc805ne123v81l5h13e" } }
|
||||
}
|
||||
});
|
||||
console.log("create score time")
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<section className="py-8 relative overflow-hidden">
|
||||
<div className="max-w-screen-2xl mx-auto px-4 relative">
|
||||
<div className="text-center mb-12">
|
||||
<Title
|
||||
level={2}
|
||||
className="font-bold text-5xl mb-6 bg-gradient-to-r from-gray-900 via-gray-700 to-gray-800 bg-clip-text text-transparent motion-safe:animate-gradient-x">
|
||||
探索课程分类
|
||||
</Title>
|
||||
<Text type="secondary" className="text-xl font-light">
|
||||
选择你感兴趣的方向，开启学习之旅
|
||||
</Text>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{isLoading ? (
|
||||
<Skeleton paragraph={{ rows: 4 }}></Skeleton>
|
||||
) : (
|
||||
courseCategoriesData?.filter(c=>!c.deletedAt)?.map((category, index) => {
|
||||
const categoryColor = stringToColor(category.name);
|
||||
const isHovered = hoveredIndex === index;
|
||||
|
||||
return (
|
||||
<CategorySectionCard
|
||||
key={index}
|
||||
index={index}
|
||||
category={category}
|
||||
categoryColor={categoryColor}
|
||||
isHovered={isHovered}
|
||||
handleMouseEnter={handleMouseEnter}
|
||||
handleMouseLeave={handleMouseLeave}
|
||||
handleMouseClick={handleMouseClick}
|
||||
/>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
<LookForMore to={"/courses"}></LookForMore>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default CategorySection;
|
||||
|
|
@ -1,58 +0,0 @@
|
|||
import { useNavigate } from "react-router-dom";
|
||||
import { Typography } from "antd";
|
||||
export default function CategorySectionCard({handleMouseClick, index,handleMouseEnter,handleMouseLeave,category,categoryColor,isHovered,}) {
|
||||
const navigate = useNavigate()
|
||||
const { Title, Text } = Typography;
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className="group relative min-h-[130px] rounded-2xl transition-all duration-700 ease-out cursor-pointer will-change-transform hover:-translate-y-2"
|
||||
onMouseEnter={() => handleMouseEnter(index)}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
aria-label={`查看${category.name}课程类别`}
|
||||
onClick={()=>{
|
||||
handleMouseClick(category.id)
|
||||
}}
|
||||
>
|
||||
<div className="absolute -inset-0.5 bg-gradient-to-r from-gray-200 to-gray-300 opacity-50 rounded-2xl transition-all duration-700 group-hover:opacity-75" />
|
||||
<div
|
||||
className={`absolute inset-0 rounded-2xl bg-gradient-to-br from-white to-gray-50 shadow-lg transition-all duration-700 ease-out ${isHovered
|
||||
? "scale-[1.02] bg-opacity-95"
|
||||
: "scale-100 bg-opacity-90"
|
||||
}`}
|
||||
/>
|
||||
<div
|
||||
className={`absolute inset-0 rounded-2xl transition-all duration-700 ease-out ${isHovered
|
||||
? "shadow-[0_8px_30px_rgb(0,0,0,0.12)]"
|
||||
: "shadow-none opacity-0"
|
||||
}`}
|
||||
/>
|
||||
<div
|
||||
className={`absolute w-1/2 top-0 left-1/2 -translate-x-1/2 h-1 rounded-full transition-all duration-500 ease-out `}
|
||||
style={{
|
||||
backgroundColor: categoryColor,
|
||||
}}
|
||||
/>
|
||||
<div className="relative w-full h-full p-6">
|
||||
<div className="flex w-2/3 absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 flex-col space-y-4 mb-4">
|
||||
<Text
|
||||
strong
|
||||
className="text-xl font-medium tracking-wide">
|
||||
{category.name}
|
||||
</Text>
|
||||
</div>
|
||||
<div
|
||||
className={` mt-6 absolute bottom-4 right-6 text-sm font-medium flex items-center space-x-2 transition-all duration-500 ease-out `}
|
||||
style={{ color: categoryColor }}>
|
||||
<span>了解更多</span>
|
||||
<span
|
||||
className={`transform transition-all duration-500 ease-out `}>
|
||||
→
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,112 +0,0 @@
|
|||
import React, { useState, useMemo, ReactNode } from "react";
|
||||
import { Typography, Skeleton } from "antd";
|
||||
import { TaxonomySlug, TermDto } from "@nice/common";
|
||||
import { api } from "@nice/client";
|
||||
import { CoursesSectionTag } from "./CoursesSectionTag";
|
||||
import LookForMore from "./LookForMore";
|
||||
import PostList from "@web/src/components/models/course/list/PostList";
|
||||
interface GetTaxonomyProps {
|
||||
categories: string[];
|
||||
isLoading: boolean;
|
||||
}
|
||||
function useGetTaxonomy({ type }): GetTaxonomyProps {
|
||||
const { data, isLoading }: { data: TermDto[]; isLoading: boolean } =
|
||||
api.term.findMany.useQuery({
|
||||
where: {
|
||||
taxonomy: {
|
||||
slug: type,
|
||||
},
|
||||
parentId: null,
|
||||
},
|
||||
take: 11, // 只取前10个
|
||||
});
|
||||
const categories = useMemo(() => {
|
||||
const allCategories = isLoading
|
||||
? []
|
||||
: data?.filter(c=>!c.deletedAt)?.map((course) => course.name);
|
||||
return [...Array.from(new Set(allCategories))];
|
||||
}, [data]);
|
||||
return { categories, isLoading };
|
||||
}
|
||||
const { Title, Text } = Typography;
|
||||
interface CoursesSectionProps {
|
||||
title: string;
|
||||
description: string;
|
||||
initialVisibleCoursesCount?: number;
|
||||
postType:string;
|
||||
render?:(post)=>ReactNode;
|
||||
to:string
|
||||
}
|
||||
const CoursesSection: React.FC<CoursesSectionProps> = ({
|
||||
title,
|
||||
description,
|
||||
initialVisibleCoursesCount = 8,
|
||||
postType,
|
||||
render,
|
||||
to
|
||||
}) => {
|
||||
const [selectedCategory, setSelectedCategory] = useState<string>("全部");
|
||||
const gateGory: GetTaxonomyProps = useGetTaxonomy({
|
||||
type: TaxonomySlug.CATEGORY,
|
||||
});
|
||||
return (
|
||||
<section className="relative py-16 overflow-hidden ">
|
||||
<div className="max-w-screen-2xl mx-auto px-4 relative">
|
||||
<div className="flex justify-between items-end mb-12 ">
|
||||
<div>
|
||||
<Title
|
||||
level={2}
|
||||
className="font-bold text-5xl mb-6 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
|
||||
{title}
|
||||
</Title>
|
||||
<Text
|
||||
type="secondary"
|
||||
className="text-xl font-light text-gray-600">
|
||||
{description}
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mb-12 flex flex-wrap gap-4">
|
||||
{gateGory.isLoading ? (
|
||||
<Skeleton paragraph={{ rows: 2 }}></Skeleton>
|
||||
) : (
|
||||
<>
|
||||
{["全部", ...gateGory.categories].map(
|
||||
(category, idx) => (
|
||||
<CoursesSectionTag
|
||||
key={idx}
|
||||
category={category}
|
||||
selectedCategory={selectedCategory}
|
||||
setSelectedCategory={
|
||||
setSelectedCategory
|
||||
}
|
||||
/>
|
||||
)
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<PostList
|
||||
renderItem={(post) => render(post)}
|
||||
params={{
|
||||
page: 1,
|
||||
pageSize: initialVisibleCoursesCount,
|
||||
where: {
|
||||
terms: !(selectedCategory === "全部")
|
||||
? {
|
||||
some: {
|
||||
name: selectedCategory,
|
||||
},
|
||||
}
|
||||
: {},
|
||||
type: postType
|
||||
},
|
||||
}}
|
||||
showPagination={false}
|
||||
cols={4}></PostList>
|
||||
<LookForMore to={to}></LookForMore>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
export default CoursesSection;
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
import { Tag } from "antd";
|
||||
|
||||
export function CoursesSectionTag({category, selectedCategory, setSelectedCategory}) {
|
||||
return (
|
||||
<>
|
||||
<Tag
|
||||
key={category}
|
||||
color={
|
||||
selectedCategory === category
|
||||
? "blue"
|
||||
: "default"
|
||||
}
|
||||
onClick={() => {
|
||||
setSelectedCategory(category);
|
||||
}}
|
||||
className={`px-6 py-2 text-base cursor-pointer rounded-full transition-all duration-300 ${selectedCategory === category
|
||||
? "bg-blue-600 text-white shadow-lg"
|
||||
: "bg-white text-gray-600 hover:bg-gray-100"
|
||||
}`}>
|
||||
{category}
|
||||
</Tag>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,222 +0,0 @@
|
|||
import React, { useRef } from 'react';
|
||||
import { Typography, Tag, Carousel } from 'antd';
|
||||
import { StarFilled, UserOutlined, ReadOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons';
|
||||
|
||||
const { Title, Text } = Typography;
|
||||
|
||||
interface Teacher {
|
||||
name: string;
|
||||
title: string;
|
||||
avatar: string;
|
||||
courses: number;
|
||||
students: number;
|
||||
rating: number;
|
||||
description: string;
|
||||
}
|
||||
|
||||
const featuredTeachers: Teacher[] = [
|
||||
{
|
||||
name: '张教授',
|
||||
title: '资深前端开发专家',
|
||||
avatar: '/images/teacher1.jpg',
|
||||
courses: 12,
|
||||
students: 25000,
|
||||
rating: 4.9,
|
||||
description: '前 BAT 高级工程师，10年+开发经验'
|
||||
},
|
||||
{
|
||||
name: '李教授',
|
||||
title: '算法与数据结构专家',
|
||||
avatar: '/images/teacher2.jpg',
|
||||
courses: 8,
|
||||
students: 18000,
|
||||
rating: 4.8,
|
||||
description: '计算机博士，专注算法教育8年'
|
||||
},
|
||||
{
|
||||
name: '王博士',
|
||||
title: '人工智能研究员',
|
||||
avatar: '/images/teacher3.jpg',
|
||||
courses: 15,
|
||||
students: 30000,
|
||||
rating: 4.95,
|
||||
description: '人工智能领域专家，曾主导多个大型AI项目'
|
||||
},
|
||||
{
|
||||
name: '陈教授',
|
||||
title: '云计算架构师',
|
||||
avatar: '/images/teacher4.jpg',
|
||||
courses: 10,
|
||||
students: 22000,
|
||||
rating: 4.85,
|
||||
description: '知名云服务提供商技术总监，丰富的实战经验'
|
||||
},
|
||||
{
|
||||
name: '郑老师',
|
||||
title: '移动开发专家',
|
||||
avatar: '/images/teacher5.jpg',
|
||||
courses: 14,
|
||||
students: 28000,
|
||||
rating: 4.88,
|
||||
description: '资深移动端开发者，著名互联网公司技术专家'
|
||||
}
|
||||
];
|
||||
|
||||
const generateGradientColors = (name: string) => {
|
||||
// 优化的哈希函数
|
||||
const hash = name.split('').reduce((acc, char, index) => {
|
||||
return char.charCodeAt(0) + ((acc << 5) - acc) + index;
|
||||
}, 0);
|
||||
|
||||
// 定义蓝色色相范围（210-240）
|
||||
const blueHueStart = 210;
|
||||
const blueHueRange = 30;
|
||||
|
||||
// 基础蓝色色相 - 将哈希值映射到蓝色范围内
|
||||
const baseHue = blueHueStart + Math.abs(hash % blueHueRange);
|
||||
|
||||
// 生成第二个蓝色色相，保持在蓝色范围内
|
||||
let secondHue = baseHue + 15; // 在基础色相的基础上略微偏移
|
||||
if (secondHue > blueHueStart + blueHueRange) {
|
||||
secondHue -= blueHueRange;
|
||||
}
|
||||
|
||||
// 基于输入字符串的特征调整饱和度和亮度
|
||||
const nameLength = name.length;
|
||||
const saturation = Math.max(65, Math.min(85, 75 + (nameLength % 10))); // 65-85%范围
|
||||
const lightness = Math.max(45, Math.min(65, 55 + (hash % 10))); // 45-65%范围
|
||||
|
||||
// 为第二个颜色稍微调整饱和度和亮度,创造层次感
|
||||
const saturation2 = Math.max(60, saturation - 5);
|
||||
const lightness2 = Math.min(70, lightness + 5);
|
||||
|
||||
return {
|
||||
from: `hsl(${Math.round(baseHue)}, ${Math.round(saturation)}%, ${Math.round(lightness)}%)`,
|
||||
to: `hsl(${Math.round(secondHue)}, ${Math.round(saturation2)}%, ${Math.round(lightness2)}%)`
|
||||
};
|
||||
};
|
||||
|
||||
const FeaturedTeachersSection: React.FC = () => {
|
||||
const carouselRef = useRef<any>(null);
|
||||
|
||||
const settings = {
|
||||
dots: true,
|
||||
infinite: true,
|
||||
speed: 500,
|
||||
slidesToShow: 4,
|
||||
slidesToScroll: 1,
|
||||
autoplay: true,
|
||||
autoplaySpeed: 5000,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1024,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
slidesToScroll: 1
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 640,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
const TeacherCard = ({ teacher }: { teacher: Teacher }) => {
|
||||
const gradientColors = generateGradientColors(teacher.name);
|
||||
return (
|
||||
<div className="p-8">
|
||||
<div className="bg-white rounded-2xl shadow-[0_4px_20px_-2px_rgba(0,0,0,0.1)] overflow-hidden transform transition-all duration-300 hover:shadow-[0_8px_30px_-4px_rgba(0,0,0,0.15)] hover:-translate-y-1">
|
||||
<div className="relative h-48" style={{
|
||||
background: `linear-gradient(to right, ${gradientColors.from}, ${gradientColors.to})`
|
||||
}}>
|
||||
<img
|
||||
src={teacher.avatar}
|
||||
alt={teacher.name}
|
||||
className="absolute left-1/2 bottom-0 transform -translate-x-1/2 translate-y-1/2 w-24 h-24 rounded-full border-4 border-white object-cover shadow-lg"
|
||||
/>
|
||||
</div>
|
||||
<div className="pt-16 p-6 min-h-[280px] flex flex-col">
|
||||
<div className="text-center mb-4">
|
||||
<Title level={4} className="mb-1">
|
||||
{teacher.name}
|
||||
</Title>
|
||||
<Tag color="blue" className="text-sm">
|
||||
{teacher.title}
|
||||
</Tag>
|
||||
</div>
|
||||
|
||||
<Text type="secondary" className="block text-center mb-6 line-clamp-2 min-h-[3rem]">
|
||||
{teacher.description}
|
||||
</Text>
|
||||
|
||||
<div className="grid grid-cols-3 gap-4 border-t pt-4">
|
||||
<div className="text-center">
|
||||
<div className="flex items-center justify-center gap-1 text-blue-600">
|
||||
<ReadOutlined className="text-lg" />
|
||||
<span className="font-bold">{teacher.courses}</span>
|
||||
</div>
|
||||
<Text type="secondary" className="text-sm">课程</Text>
|
||||
</div>
|
||||
<div className="text-center border-x">
|
||||
<div className="flex items-center justify-center gap-1 text-blue-600">
|
||||
<UserOutlined className="text-lg" />
|
||||
<span className="font-bold">{(teacher.students / 1000).toFixed(1)}k</span>
|
||||
</div>
|
||||
<Text type="secondary" className="text-sm">学员</Text>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="flex items-center justify-center gap-1 text-blue-600">
|
||||
<StarFilled className="text-lg" />
|
||||
<span className="font-bold">{teacher.rating}</span>
|
||||
</div>
|
||||
<Text type="secondary" className="text-sm">评分</Text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="py-20 px-4 bg-gradient-to-b from-gray-50/50 to-transparent">
|
||||
<div className="max-w-screen-2xl mx-auto">
|
||||
<div className="relative z-10 text-center mb-16">
|
||||
<Title level={2} className="font-bold text-4xl mb-4">
|
||||
优秀讲师
|
||||
</Title>
|
||||
<Text type="secondary" className="text-lg">
|
||||
业界专家实战分享，传授独家经验
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
<div className="relative group">
|
||||
<Carousel ref={carouselRef} {...settings}>
|
||||
{featuredTeachers.map((teacher, index) => (
|
||||
<TeacherCard key={index} teacher={teacher} />
|
||||
))}
|
||||
</Carousel>
|
||||
|
||||
<button
|
||||
onClick={() => carouselRef.current?.prev()}
|
||||
className="absolute left-0 top-1/2 -translate-y-1/2 -ml-4 w-10 h-10 bg-white rounded-full shadow-lg flex items-center justify-center hover:bg-gray-50 transition-colors opacity-0 group-hover:opacity-100"
|
||||
>
|
||||
<LeftOutlined />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => carouselRef.current?.next()}
|
||||
className="absolute right-0 top-1/2 -translate-y-1/2 -mr-4 w-10 h-10 bg-white rounded-full shadow-lg flex items-center justify-center hover:bg-gray-50 transition-colors opacity-0 group-hover:opacity-100"
|
||||
>
|
||||
<RightOutlined />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default FeaturedTeachersSection;
|
||||
|
|
@ -1,164 +0,0 @@
|
|||
import React, {
|
||||
useRef,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useState,
|
||||
} from "react";
|
||||
import { Carousel, Typography } from "antd";
|
||||
import {
|
||||
TeamOutlined,
|
||||
BookOutlined,
|
||||
StarOutlined,
|
||||
LeftOutlined,
|
||||
RightOutlined,
|
||||
EyeOutlined,
|
||||
} from "@ant-design/icons";
|
||||
import type { CarouselRef } from "antd/es/carousel";
|
||||
import { api, useAppConfig } from "@nice/client";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
interface PlatformStat {
|
||||
icon: React.ReactNode;
|
||||
value: number;
|
||||
label: string;
|
||||
}
|
||||
|
||||
const HeroSection = () => {
|
||||
const carouselRef = useRef<CarouselRef>(null);
|
||||
const { statistics, slides, slideLinks = [] } = useAppConfig();
|
||||
const [countStatistics, setCountStatistics] = useState<number>(4);
|
||||
const navigator = useNavigate()
|
||||
const platformStats: PlatformStat[] = useMemo(() => {
|
||||
return [
|
||||
{
|
||||
icon: <TeamOutlined />,
|
||||
value: statistics.staffs,
|
||||
label: "注册学员",
|
||||
},
|
||||
{
|
||||
icon: <StarOutlined />,
|
||||
value: statistics.courses,
|
||||
label: "精品课程",
|
||||
},
|
||||
{
|
||||
icon: <BookOutlined />,
|
||||
value: statistics.lectures,
|
||||
label: "课程章节",
|
||||
},
|
||||
{
|
||||
icon: <EyeOutlined />,
|
||||
value: statistics.reads,
|
||||
label: "播放次数",
|
||||
},
|
||||
];
|
||||
}, [statistics]);
|
||||
const handlePrev = useCallback(() => {
|
||||
carouselRef.current?.prev();
|
||||
}, []);
|
||||
|
||||
const handleNext = useCallback(() => {
|
||||
carouselRef.current?.next();
|
||||
}, []);
|
||||
|
||||
const countNonZeroValues = (statistics: Record<string, number>): number => {
|
||||
return Object.values(statistics).filter((value) => value !== 0).length;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const count = countNonZeroValues(statistics);
|
||||
console.log(count);
|
||||
setCountStatistics(count);
|
||||
}, [statistics]);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<section className="relative ">
|
||||
<div className="group">
|
||||
<Carousel
|
||||
ref={carouselRef}
|
||||
autoplay
|
||||
effect="fade"
|
||||
className="h-[600px] mb-24"
|
||||
dots={{
|
||||
className: "carousel-dots !bottom-32 !z-20",
|
||||
}}>
|
||||
{Array.isArray(slides) ? (
|
||||
slides.map((item, index) => (
|
||||
<div key={index} className="relative h-[600px] cursor-pointer"
|
||||
onClick={()=>{
|
||||
if(slideLinks?.[index])window.open(slideLinks?.[index],"_blank")
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="absolute inset-0 bg-cover bg-center transform transition-[transform,filter] duration-[2000ms] group-hover:scale-105 group-hover:brightness-110 will-change-[transform,filter]"
|
||||
style={{
|
||||
//backgroundImage: `url(https://s.cn.bing.net/th?id=OHR.GiantCuttlefish_ZH-CN0670915878_1920x1080.webp&qlt=50)`,
|
||||
backgroundImage: `url(${item})`,
|
||||
backfaceVisibility: "hidden",
|
||||
}}
|
||||
/>
|
||||
{/* <div
|
||||
className={`absolute inset-0 bg-gradient-to-r ${item.color} to-transparent opacity-90 mix-blend-overlay transition-opacity duration-500`}
|
||||
/> */}
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent" />
|
||||
|
||||
{/* Content Container */}
|
||||
<div className="relative h-full max-w-7xl mx-auto px-6 lg:px-8"></div>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div></div>
|
||||
)}
|
||||
</Carousel>
|
||||
|
||||
{/* Navigation Buttons */}
|
||||
<button
|
||||
onClick={handlePrev}
|
||||
className="absolute left-4 md:left-8 top-1/2 -translate-y-1/2 z-10 opacity-0 group-hover:opacity-100 transition-all duration-300 bg-black/20 hover:bg-black/30 w-12 h-12 flex items-center justify-center rounded-full transform hover:scale-110 hover:shadow-lg"
|
||||
aria-label="Previous slide">
|
||||
<LeftOutlined className="text-white text-xl" />
|
||||
</button>
|
||||
<button
|
||||
onClick={handleNext}
|
||||
className="absolute right-4 md:right-8 top-1/2 -translate-y-1/2 z-10 opacity-0 group-hover:opacity-100 transition-all duration-300 bg-black/20 hover:bg-black/30 w-12 h-12 flex items-center justify-center rounded-full transform hover:scale-110 hover:shadow-lg"
|
||||
aria-label="Next slide">
|
||||
<RightOutlined className="text-white text-xl" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Stats Container */}
|
||||
{countStatistics > 1 && (
|
||||
<div className="absolute -bottom-20 left-1/2 -translate-x-1/2 w-3/5 max-w-6xl px-4">
|
||||
<div
|
||||
className={`rounded-2xl grid grid-cols-${countStatistics} lg:grid-cols-${countStatistics} md:grid-cols-${countStatistics} gap-4 md:gap-8 p-6 md:p-8 bg-white border shadow-xl hover:shadow-2xl transition-shadow duration-500 will-change-[transform,box-shadow]`}>
|
||||
{platformStats.map((stat, index) => {
|
||||
return stat.value ? (
|
||||
<div
|
||||
key={index}
|
||||
className="text-center transform hover:-translate-y-1 hover:scale-105 transition-transform duration-300 ease-out">
|
||||
<div className="inline-flex items-center justify-center w-16 h-16 mb-4 rounded-full bg-primary-50 text-primary-600 text-3xl transition-colors duration-300 group-hover:text-primary-700">
|
||||
{stat.icon}
|
||||
</div>
|
||||
<div className="text-2xl font-bold bg-gradient-to-r from-gray-800 to-gray-600 bg-clip-text text-transparent mb-1.5">
|
||||
{stat.value}
|
||||
</div>
|
||||
<div className="text-gray-600 font-medium">
|
||||
{stat.label}
|
||||
</div>
|
||||
</div>
|
||||
) : null;
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default HeroSection;
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
import { ArrowRightOutlined } from "@ant-design/icons";
|
||||
import { Button } from "antd";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
export default function LookForMore({to}:{to:string}) {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<>
|
||||
<div className="flex items-center gap-4 justify-between mt-12">
|
||||
<div className="h-[1px] flex-grow bg-gradient-to-r from-transparent via-gray-300 to-transparent"></div>
|
||||
<div className="flex justify-end">
|
||||
<Button
|
||||
type="link"
|
||||
onClick={() => {
|
||||
navigate(to)
|
||||
window.scrollTo({top: 0,behavior: "smooth"});
|
||||
}}
|
||||
className="flex items-center gap-2 text-gray-600 hover:text-blue-600 font-medium transition-colors duration-300">
|
||||
查看更多
|
||||
<ArrowRightOutlined />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
|
||||
}
|
||||
|
|
@ -1,34 +1,9 @@
|
|||
import HeroSection from "./components/HeroSection";
|
||||
import CategorySection from "./components/CategorySection";
|
||||
import CoursesSection from "./components/CoursesSection";
|
||||
import { PostType } from "@nice/common";
|
||||
import PathCard from "@web/src/components/models/post/SubPost/PathCard";
|
||||
import CourseCard from "@web/src/components/models/post/SubPost/CourseCard";
|
||||
import React from "react"
|
||||
|
||||
|
||||
const HomePage = () => {
|
||||
|
||||
return (
|
||||
<div className="min-h-screen">
|
||||
<HeroSection />
|
||||
<CoursesSection
|
||||
title="最受欢迎的思维导图"
|
||||
description="深受追捧的思维导图，点亮你的智慧人生"
|
||||
postType={PostType.PATH}
|
||||
render={(post)=><PathCard post={post}></PathCard>}
|
||||
to={"path"}
|
||||
/>
|
||||
<CoursesSection
|
||||
title="推荐课程"
|
||||
description="最受欢迎的精品课程，助你快速成长"
|
||||
postType={PostType.COURSE}
|
||||
render={(post)=> <CourseCard post={post}></CourseCard>}
|
||||
to={"/courses"}
|
||||
/>
|
||||
|
||||
<CategorySection />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default HomePage;
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<div >
|
||||
首页
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
import { ReactNode, useEffect } from "react";
|
||||
import FilterSection from "./FilterSection";
|
||||
import { useMainContext } from "../MainProvider";
|
||||
|
||||
export function BasePostLayout({
|
||||
children,
|
||||
showSearchMode = false,
|
||||
}: {
|
||||
children: ReactNode;
|
||||
showSearchMode?: boolean;
|
||||
}) {
|
||||
const { setShowSearchMode } = useMainContext();
|
||||
useEffect(() => {
|
||||
setShowSearchMode(showSearchMode);
|
||||
}, [showSearchMode]);
|
||||
return (
|
||||
<>
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<div className=" flex">
|
||||
<div className="w-1/6">
|
||||
<FilterSection></FilterSection>
|
||||
</div>
|
||||
<div className="w-5/6 p-4 py-8">{children}</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
export default BasePostLayout;
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
import { Divider } from "antd";
|
||||
import { api } from "@nice/client";
|
||||
import { useMainContext } from "../MainProvider";
|
||||
import TermParentSelector from "@web/src/components/models/term/term-parent-selector";
|
||||
import SearchModeRadio from "./SearchModeRadio";
|
||||
export default function FilterSection() {
|
||||
const { data: taxonomies } = api.taxonomy.getAll.useQuery({});
|
||||
const { selectedTerms, setSelectedTerms, showSearchMode } =
|
||||
useMainContext();
|
||||
const handleTermChange = (slug: string, selected: string[]) => {
|
||||
setSelectedTerms({
|
||||
...selectedTerms,
|
||||
[slug]: selected, // 更新对应 slug 的选择
|
||||
});
|
||||
};
|
||||
return (
|
||||
<div className=" flex z-0 p-6 flex-col mt-4 space-y-6 overscroll-contain overflow-x-hidden">
|
||||
{showSearchMode && <SearchModeRadio></SearchModeRadio>}
|
||||
{taxonomies?.map((tax, index) => {
|
||||
const items = Object.entries(selectedTerms).find(
|
||||
([key, items]) => key === tax.slug
|
||||
)?.[1];
|
||||
return (
|
||||
<div key={index}>
|
||||
<h3 className="text-lg font-medium mb-4">
|
||||
{tax?.name}
|
||||
{/* {JSON.stringify(items)} */}
|
||||
</h3>
|
||||
<TermParentSelector
|
||||
value={items}
|
||||
// slug={tax?.slug}
|
||||
className="w-70 max-h-[400px] overscroll-contain overflow-x-hidden"
|
||||
onChange={(selected) =>
|
||||
handleTermChange(
|
||||
tax?.slug,
|
||||
selected as string[]
|
||||
)
|
||||
}
|
||||
taxonomyId={tax?.id}></TermParentSelector>
|
||||
<Divider></Divider>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
import { useMainContext } from "../MainProvider";
|
||||
import { Radio, Space, Typography } from "antd";
|
||||
import { PostType } from "@nice/common"; // Assuming PostType is defined in this path
|
||||
|
||||
export default function SearchModeRadio() {
|
||||
const { searchMode, setSearchMode } = useMainContext();
|
||||
|
||||
const handleModeChange = (e) => {
|
||||
setSearchMode(e.target.value);
|
||||
};
|
||||
|
||||
return (
|
||||
<Space direction="vertical" align="start" className="mb-2">
|
||||
<h3 className="text-lg font-medium mb-4">只搜索</h3>
|
||||
<Radio.Group
|
||||
value={searchMode}
|
||||
onChange={handleModeChange}
|
||||
buttonStyle="solid">
|
||||
<Radio.Button value={PostType.COURSE}>视频课程</Radio.Button>
|
||||
<Radio.Button value={PostType.PATH}>思维导图</Radio.Button>
|
||||
<Radio.Button value="both">所有资源</Radio.Button>
|
||||
</Radio.Group>
|
||||
</Space>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,76 +0,0 @@
|
|||
import {
|
||||
CloudOutlined,
|
||||
FileSearchOutlined,
|
||||
HomeOutlined,
|
||||
MailOutlined,
|
||||
PhoneOutlined,
|
||||
} from "@ant-design/icons";
|
||||
|
||||
export function MainFooter() {
|
||||
return (
|
||||
<footer className="bg-gradient-to-b from-slate-800 to-slate-900 relative z-10 text-secondary-200">
|
||||
<div className="container mx-auto px-4 py-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
{/* 开发组织信息 */}
|
||||
<div className="text-center md:text-left space-y-2">
|
||||
<h3 className="text-white font-semibold text-sm flex items-center justify-center md:justify-start">
|
||||
软件与数据小组
|
||||
</h3>
|
||||
<p className="text-gray-400 text-xs italic">
|
||||
提供技术支持
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 联系方式 */}
|
||||
<div className="text-center space-y-2">
|
||||
<div className="flex items-center justify-center space-x-2">
|
||||
<PhoneOutlined className="text-gray-400" />
|
||||
<span className="text-gray-300 text-xs">
|
||||
628532
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-center space-x-2">
|
||||
<MailOutlined className="text-gray-400" />
|
||||
<span className="text-gray-300 text-xs">
|
||||
ruanjian1@tx3l.nb.kj
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 系统链接 */}
|
||||
<div className="text-center md:text-right space-y-2">
|
||||
<div className="flex items-center justify-center md:justify-end space-x-4">
|
||||
<a
|
||||
href="https://27.57.72.21"
|
||||
className="text-gray-400 hover:text-white transition-colors"
|
||||
title="访问门户网站">
|
||||
<HomeOutlined className="text-lg" />
|
||||
</a>
|
||||
<a
|
||||
href="https://27.57.72.14"
|
||||
className="text-gray-400 hover:text-white transition-colors"
|
||||
title="访问烽火青云">
|
||||
<CloudOutlined className="text-lg" />
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="http://27.57.72.38"
|
||||
className="text-gray-400 hover:text-white transition-colors"
|
||||
title="访问烽火律询">
|
||||
<FileSearchOutlined className="text-lg" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 版权信息 */}
|
||||
<div className="border-t border-gray-700/50 mt-4 pt-4 text-center">
|
||||
<p className="text-gray-400 text-xs">
|
||||
© {new Date().getFullYear()} 南天烽火. All rights
|
||||
reserved.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,107 +1,46 @@
|
|||
import { Input, Button } from "antd";
|
||||
import { PlusOutlined, SearchOutlined, UserOutlined } from "@ant-design/icons";
|
||||
import { useAuth } from "@web/src/providers/auth-provider";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
import { UserMenu } from "./UserMenu/UserMenu";
|
||||
import { NavigationMenu } from "./NavigationMenu";
|
||||
import { useMainContext } from "./MainProvider";
|
||||
import { env } from "@web/src/env";
|
||||
export function MainHeader() {
|
||||
const { isAuthenticated, user } = useAuth();
|
||||
const { id } = useParams();
|
||||
const navigate = useNavigate();
|
||||
const { searchValue, setSearchValue } = useMainContext();
|
||||
import { Layout, Menu, Avatar, Button } from 'antd';
|
||||
import { UserOutlined, SettingOutlined } from '@ant-design/icons';
|
||||
import { useNavigate, Outlet, useLocation } from 'react-router-dom';
|
||||
import NavigationMenu from './NavigationMenu';
|
||||
|
||||
return (
|
||||
<div className="select-none w-full flex items-center justify-between bg-white shadow-md border-b border-gray-100 fixed z-30 py-2 px-4 md:px-6">
|
||||
{/* 左侧区域 - 设置为不收缩 */}
|
||||
<div className="flex items-center justify-start space-x-4 flex-shrink-0">
|
||||
<img src="/logo.svg" className="h-12 w-12" />
|
||||
<div
|
||||
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 whitespace-nowrap">
|
||||
{env.APP_NAME}
|
||||
</div>
|
||||
<NavigationMenu />
|
||||
</div>
|
||||
const { Sider, Content } = Layout;
|
||||
|
||||
{/* 右侧区域 - 可以灵活收缩 */}
|
||||
<div className="flex justify-end gap-2 md:gap-4 flex-shrink">
|
||||
<div className="flex items-center gap-2 md:gap-4">
|
||||
<Input
|
||||
size="large"
|
||||
prefix={
|
||||
<SearchOutlined className="text-gray-400 group-hover:text-blue-500 transition-colors" />
|
||||
}
|
||||
placeholder="搜索课程"
|
||||
className="w-full md:w-96 rounded-full"
|
||||
value={searchValue}
|
||||
onClick={(e) => {
|
||||
if (
|
||||
!window.location.pathname.startsWith("/search")
|
||||
) {
|
||||
navigate(`/search`);
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: "smooth",
|
||||
});
|
||||
}
|
||||
}}
|
||||
onChange={(e) => setSearchValue(e.target.value)}
|
||||
onPressEnter={(e) => {
|
||||
if (
|
||||
!window.location.pathname.startsWith("/search")
|
||||
) {
|
||||
navigate(`/search`);
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: "smooth",
|
||||
});
|
||||
}
|
||||
}}
|
||||
/>
|
||||
{isAuthenticated && (
|
||||
<>
|
||||
<Button
|
||||
size="large"
|
||||
shape="round"
|
||||
icon={<PlusOutlined></PlusOutlined>}
|
||||
onClick={() => {
|
||||
const url = "/course/editor";
|
||||
navigate(url);
|
||||
}}
|
||||
type="primary">
|
||||
{"创建课程"}
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
{isAuthenticated && (
|
||||
<Button
|
||||
size="large"
|
||||
shape="round"
|
||||
onClick={() => {
|
||||
window.location.href = "/path/editor";
|
||||
}}
|
||||
ghost
|
||||
type="primary"
|
||||
icon={<PlusOutlined></PlusOutlined>}>
|
||||
创建思维导图
|
||||
</Button>
|
||||
)}
|
||||
{isAuthenticated ? (
|
||||
<UserMenu />
|
||||
) : (
|
||||
<Button
|
||||
type="primary"
|
||||
size="large"
|
||||
shape="round"
|
||||
onClick={() => navigate("/login")}
|
||||
icon={<UserOutlined />}>
|
||||
登录
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
export default function MainHeader() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<Layout className="h-screen">
|
||||
{/* 左侧导航栏 */}
|
||||
<Sider
|
||||
width={280}
|
||||
className=" flex flex-col"
|
||||
>
|
||||
{/* 用户头像区域 */}
|
||||
<div className="p-6 border-b">
|
||||
<div className="relative group flex justify-center">
|
||||
<Avatar
|
||||
size={120}
|
||||
icon={<UserOutlined />}
|
||||
className=" transition-all duration-300"
|
||||
/>
|
||||
<Button
|
||||
type="text"
|
||||
icon={<SettingOutlined />}
|
||||
className="!absolute bottom-0 right-6 opacity-0 group-hover:opacity-100 transition-opacity duration-300"
|
||||
onClick={() => navigate('/profile')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<NavigationMenu></NavigationMenu>
|
||||
</Sider>
|
||||
{/* 新增可滚动内容区域 */}
|
||||
<Layout className="flex-1">
|
||||
<Content className="overflow-auto">
|
||||
<Outlet />
|
||||
</Content>
|
||||
</Layout>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,21 +1,11 @@
|
|||
import { Layout } from "antd";
|
||||
import { Outlet } from "react-router-dom";
|
||||
import { MainHeader } from "./MainHeader";
|
||||
import { MainFooter } from "./MainFooter";
|
||||
import { MainProvider } from "./MainProvider";
|
||||
import MainHeader from "./MainHeader";
|
||||
import { Content } from "antd/es/layout/layout";
|
||||
export default function MainLayout() {
|
||||
return (
|
||||
<>
|
||||
<MainHeader />
|
||||
</>
|
||||
|
||||
const { Content } = Layout;
|
||||
|
||||
export function MainLayout() {
|
||||
return (
|
||||
<MainProvider>
|
||||
<div className=" min-h-screen bg-gray-100">
|
||||
<MainHeader />
|
||||
<Content className=" flex-grow pt-16 bg-gray-50 ">
|
||||
<Outlet />
|
||||
</Content>
|
||||
<MainFooter />
|
||||
</div>
|
||||
</MainProvider>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
|
@ -1,109 +0,0 @@
|
|||
import { PostType, Prisma } from "@nice/common";
|
||||
import React, {
|
||||
createContext,
|
||||
ReactNode,
|
||||
useContext,
|
||||
useMemo,
|
||||
useState,
|
||||
} from "react";
|
||||
import { useDebounce } from "use-debounce";
|
||||
interface SelectedTerms {
|
||||
[key: string]: string[]; // 每个 slug 对应一个 string 数组
|
||||
}
|
||||
|
||||
interface MainContextType {
|
||||
searchValue?: string;
|
||||
selectedTerms?: SelectedTerms;
|
||||
setSearchValue?: React.Dispatch<React.SetStateAction<string>>;
|
||||
setSelectedTerms?: React.Dispatch<React.SetStateAction<SelectedTerms>>;
|
||||
searchCondition?: Prisma.PostWhereInput;
|
||||
termsCondition?: Prisma.PostWhereInput;
|
||||
searchMode?: PostType.COURSE | PostType.PATH | "both";
|
||||
setSearchMode?: React.Dispatch<
|
||||
React.SetStateAction<PostType.COURSE | PostType.PATH | "both">
|
||||
>;
|
||||
showSearchMode?: boolean;
|
||||
setShowSearchMode?: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
}
|
||||
|
||||
const MainContext = createContext<MainContextType | null>(null);
|
||||
interface MainProviderProps {
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
export function MainProvider({ children }: MainProviderProps) {
|
||||
const [searchMode, setSearchMode] = useState<
|
||||
PostType.COURSE | PostType.PATH | "both"
|
||||
>("both");
|
||||
const [showSearchMode, setShowSearchMode] = useState<boolean>(false);
|
||||
const [searchValue, setSearchValue] = useState<string>("");
|
||||
const [debouncedValue] = useDebounce<string>(searchValue, 500);
|
||||
const [selectedTerms, setSelectedTerms] = useState<SelectedTerms>({}); // 初始化状态
|
||||
const termFilters = useMemo(() => {
|
||||
return Object.entries(selectedTerms)
|
||||
.filter(([, terms]) => terms.length > 0)
|
||||
?.map(([, terms]) => terms);
|
||||
}, [selectedTerms]);
|
||||
|
||||
const termsCondition: Prisma.PostWhereInput = useMemo(() => {
|
||||
return termFilters && termFilters?.length > 0
|
||||
? {
|
||||
AND: termFilters.map((termFilter) => ({
|
||||
terms: {
|
||||
some: {
|
||||
id: {
|
||||
in: termFilter, // 确保至少有一个 term.id 在当前 termFilter 中
|
||||
},
|
||||
},
|
||||
},
|
||||
})),
|
||||
}
|
||||
: {};
|
||||
}, [termFilters]);
|
||||
const searchCondition: Prisma.PostWhereInput = useMemo(() => {
|
||||
const containTextCondition: Prisma.StringNullableFilter = {
|
||||
contains: debouncedValue,
|
||||
mode: "insensitive" as Prisma.QueryMode, // 使用类型断言
|
||||
};
|
||||
return debouncedValue
|
||||
? {
|
||||
OR: [
|
||||
{ title: containTextCondition },
|
||||
{ subTitle: containTextCondition },
|
||||
{ content: containTextCondition },
|
||||
{
|
||||
terms: {
|
||||
some: {
|
||||
name: containTextCondition,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
: {};
|
||||
}, [debouncedValue]);
|
||||
return (
|
||||
<MainContext.Provider
|
||||
value={{
|
||||
searchValue,
|
||||
setSearchValue,
|
||||
selectedTerms,
|
||||
setSelectedTerms,
|
||||
searchCondition,
|
||||
termsCondition,
|
||||
searchMode,
|
||||
setSearchMode,
|
||||
showSearchMode,
|
||||
setShowSearchMode,
|
||||
}}>
|
||||
{children}
|
||||
</MainContext.Provider>
|
||||
);
|
||||
}
|
||||
export const useMainContext = () => {
|
||||
const context = useContext(MainContext);
|
||||
if (!context) {
|
||||
throw new Error("useMainContext must be used within MainProvider");
|
||||
}
|
||||
return context;
|
||||
};
|
||||
|
|
@ -1,59 +1,37 @@
|
|||
import { useAuth } from "@web/src/providers/auth-provider";
|
||||
import { Menu } from "antd";
|
||||
import { useMemo } from "react";
|
||||
import { useNavigate, useLocation } from "react-router-dom";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
export const NavigationMenu = () => {
|
||||
const navigate = useNavigate();
|
||||
const { isAuthenticated } = useAuth();
|
||||
const { pathname } = useLocation();
|
||||
|
||||
const menuItems = useMemo(() => {
|
||||
const baseItems = [
|
||||
{ key: "home", path: "/", label: "首页" },
|
||||
{ key: "path", path: "/path", label: "全部思维导图" },
|
||||
{ key: "courses", path: "/courses", label: "所有课程" },
|
||||
];
|
||||
|
||||
if (!isAuthenticated) {
|
||||
return baseItems;
|
||||
} else {
|
||||
return [
|
||||
...baseItems,
|
||||
{ key: "my-duty", path: "/my-duty", label: "我创建的课程" },
|
||||
{ key: "my-learning", path: "/my-learning", label: "我学习的课程" },
|
||||
{ key: "my-duty-path", path: "/my-duty-path", label: "我创建的思维导图" },
|
||||
{ key: "my-path", path: "/my-path", label: "我学习的思维导图" },
|
||||
];
|
||||
}
|
||||
}, [isAuthenticated]);
|
||||
|
||||
const selectedKey = useMemo(() => {
|
||||
const normalizePath = (path: string): string => path.replace(/\/$/, "");
|
||||
return pathname === '/' ? "home" : menuItems.find((item) => normalizePath(pathname) === item.path)?.key || "";
|
||||
}, [pathname]);
|
||||
|
||||
return (
|
||||
<Menu
|
||||
mode="horizontal"
|
||||
className="border-none font-medium"
|
||||
disabledOverflow={true}
|
||||
selectedKeys={[selectedKey]}
|
||||
onClick={({ key }) => {
|
||||
const selectedItem = menuItems.find((item) => item.key === key);
|
||||
if (selectedItem) navigate(selectedItem.path);
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: "smooth",
|
||||
});
|
||||
}}>
|
||||
{menuItems.map(({ key, label }) => (
|
||||
<Menu.Item
|
||||
key={key}
|
||||
className="text-gray-600 hover:text-blue-600">
|
||||
{label}
|
||||
</Menu.Item>
|
||||
))}
|
||||
</Menu>
|
||||
);
|
||||
};
|
||||
export default function NavigationMenu() {
|
||||
const navigate = useNavigate();
|
||||
// 导航菜单项配置
|
||||
const menuItems = [
|
||||
{ key: 'home', label: '首页', path: '/' },
|
||||
{ key: 'staff', label: '人员总览', path: '/staff' },
|
||||
{ key: 'day', label: '日统计', path: '/day' },
|
||||
{ key: 'month', label: '月统计', path: '/month' },
|
||||
{ key: 'year', label: '年度统计', path: '/year' }
|
||||
];
|
||||
return (
|
||||
<>
|
||||
{/* 导航菜单 */}
|
||||
<Menu
|
||||
theme="dark"
|
||||
mode="inline"
|
||||
className="!bg-transparent !border-0 pt-4 [&_.ant-menu-item]:!mt-2"
|
||||
defaultSelectedKeys={['home']}
|
||||
>
|
||||
{menuItems.map((item) => (
|
||||
<Menu.Item
|
||||
key={item.key}
|
||||
className="!h-14 !flex !items-center !text-gray-300 hover:!text-white group !rounded-lg mx-4"
|
||||
onClick={() => navigate(item.path)}
|
||||
>
|
||||
<div className="flex items-center justify-center w-full px-4 transition-all duration-300 h-full rounded-lg">
|
||||
<span className="text-xl font-medium">{item.label}</span>
|
||||
</div>
|
||||
</Menu.Item>
|
||||
))}
|
||||
</Menu>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
import { Button, Drawer, Modal } from "antd";
|
||||
import React, { useContext, useEffect, useState } from "react";
|
||||
|
||||
import { UserEditorContext } from "./UserMenu";
|
||||
import UserForm from "./UserForm";
|
||||
|
||||
export default function UserEditModal() {
|
||||
const { formLoading, modalOpen, setModalOpen, form } =
|
||||
useContext(UserEditorContext);
|
||||
const handleOk = () => {
|
||||
form.submit();
|
||||
};
|
||||
return (
|
||||
<Modal
|
||||
width={400}
|
||||
onOk={handleOk}
|
||||
centered
|
||||
open={modalOpen}
|
||||
confirmLoading={formLoading}
|
||||
onCancel={() => {
|
||||
setModalOpen(false);
|
||||
}}
|
||||
title={"编辑个人信息"}>
|
||||
<UserForm />
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,164 +0,0 @@
|
|||
import { Button, Form, Input, Spin, Switch, message } from "antd";
|
||||
import { useContext, useEffect } from "react";
|
||||
import { useStaff } from "@nice/client";
|
||||
import DepartmentSelect from "@web/src/components/models/department/department-select";
|
||||
import { api } from "@nice/client";
|
||||
|
||||
import { useAuth } from "@web/src/providers/auth-provider";
|
||||
import AvatarUploader from "@web/src/components/common/uploader/AvatarUploader";
|
||||
import { StaffDto } from "@nice/common";
|
||||
import { UserEditorContext } from "./UserMenu";
|
||||
import toast from "react-hot-toast";
|
||||
export default function StaffForm() {
|
||||
const { user } = useAuth();
|
||||
const { create, update } = useStaff(); // Ensure you have these methods in your hooks
|
||||
const { formLoading, modalOpen, setModalOpen, domainId, setDomainId, form, setFormLoading, } = useContext(UserEditorContext);
|
||||
const {
|
||||
data,
|
||||
isLoading,
|
||||
}: {
|
||||
data: StaffDto;
|
||||
isLoading: boolean;
|
||||
} = api.staff.findFirst.useQuery(
|
||||
{ where: { id: user?.id } },
|
||||
{ enabled: !!user?.id }
|
||||
);
|
||||
const { isRoot } = useAuth();
|
||||
async function handleFinish(values: any) {
|
||||
const {
|
||||
username,
|
||||
showname,
|
||||
deptId,
|
||||
domainId,
|
||||
password,
|
||||
phoneNumber,
|
||||
officerId,
|
||||
enabled,
|
||||
avatar,
|
||||
photoUrl,
|
||||
email,
|
||||
rank,
|
||||
office,
|
||||
} = values;
|
||||
setFormLoading(true);
|
||||
try {
|
||||
if (data && user?.id) {
|
||||
await update.mutateAsync({
|
||||
where: { id: data.id },
|
||||
data: {
|
||||
username,
|
||||
deptId,
|
||||
showname,
|
||||
domainId,
|
||||
password,
|
||||
phoneNumber,
|
||||
officerId,
|
||||
enabled,
|
||||
avatar,
|
||||
},
|
||||
});
|
||||
}
|
||||
toast.success("提交成功");
|
||||
setModalOpen(false);
|
||||
} catch (err: any) {
|
||||
toast.error(err.message);
|
||||
} finally {
|
||||
setFormLoading(false);
|
||||
}
|
||||
}
|
||||
useEffect(() => {
|
||||
form.resetFields();
|
||||
console.log('cc', data);
|
||||
|
||||
if (data) {
|
||||
form.setFieldValue("username", data.username);
|
||||
form.setFieldValue("showname", data.showname);
|
||||
form.setFieldValue("domainId", data.domainId);
|
||||
form.setFieldValue("deptId", data.deptId);
|
||||
form.setFieldValue("officerId", data.officerId);
|
||||
form.setFieldValue("phoneNumber", data.phoneNumber);
|
||||
form.setFieldValue("enabled", data.enabled);
|
||||
form.setFieldValue("avatar", data.avatar);
|
||||
}
|
||||
}, [data]);
|
||||
// useEffect(() => {
|
||||
// if (!data && domainId) {
|
||||
// form.setFieldValue("domainId", domainId);
|
||||
// form.setFieldValue("deptId", domainId);
|
||||
// }
|
||||
// }, [domainId, data as any]);
|
||||
return (
|
||||
<div className="relative">
|
||||
{isLoading && (
|
||||
<div className="absolute h-full inset-0 flex items-center justify-center bg-white bg-opacity-50 z-10">
|
||||
<Spin />
|
||||
</div>
|
||||
)}
|
||||
<Form
|
||||
disabled={isLoading}
|
||||
form={form}
|
||||
layout="vertical"
|
||||
requiredMark="optional"
|
||||
autoComplete="off"
|
||||
onFinish={handleFinish}>
|
||||
<div className=" flex items-center gap-4 mb-2">
|
||||
<div>
|
||||
<Form.Item name={"avatar"} label="头像" noStyle>
|
||||
<AvatarUploader
|
||||
placeholder="点击上传头像"
|
||||
className="rounded-lg"
|
||||
style={{
|
||||
width: "120px",
|
||||
height: "150px",
|
||||
}}></AvatarUploader>
|
||||
</Form.Item>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-2 flex-1">
|
||||
<Form.Item
|
||||
noStyle
|
||||
rules={[{ required: true }]}
|
||||
name={"showname"}
|
||||
label="名称">
|
||||
<Input
|
||||
placeholder="请输入姓名"
|
||||
allowClear
|
||||
autoComplete="new-name" // 使用非标准的自动完成值
|
||||
spellCheck={false}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={"domainId"}
|
||||
label="所属域"
|
||||
noStyle
|
||||
rules={[{ required: true }]}>
|
||||
<DepartmentSelect
|
||||
placeholder="选择域"
|
||||
onChange={(value) => {
|
||||
setDomainId(value as string);
|
||||
}}
|
||||
domain={true}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
noStyle
|
||||
name={"deptId"}
|
||||
label="所属单位"
|
||||
rules={[{ required: true }]}>
|
||||
<DepartmentSelect rootId={domainId} />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item noStyle label="密码" name={"password"}>
|
||||
<Input.Password
|
||||
placeholder="修改密码"
|
||||
spellCheck={false}
|
||||
visibilityToggle
|
||||
autoComplete="new-password"
|
||||
/>
|
||||
</Form.Item>
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,246 +0,0 @@
|
|||
import { useClickOutside } from "@web/src/hooks/useClickOutside";
|
||||
import { useAuth } from "@web/src/providers/auth-provider";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import React, {
|
||||
useState,
|
||||
useRef,
|
||||
useCallback,
|
||||
useMemo,
|
||||
createContext,
|
||||
} from "react";
|
||||
import { Avatar } from "@web/src/components/common/element/Avatar";
|
||||
import {
|
||||
UserOutlined,
|
||||
SettingOutlined,
|
||||
LogoutOutlined,
|
||||
} from "@ant-design/icons";
|
||||
import { FormInstance, Spin } from "antd";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { MenuItemType } from "./types";
|
||||
import { RolePerms } from "@nice/common";
|
||||
import { useForm } from "antd/es/form/Form";
|
||||
import UserEditModal from "./UserEditModal";
|
||||
const menuVariants = {
|
||||
hidden: { opacity: 0, scale: 0.95, y: -10 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
scale: 1,
|
||||
y: 0,
|
||||
transition: {
|
||||
type: "spring",
|
||||
stiffness: 300,
|
||||
damping: 30,
|
||||
},
|
||||
},
|
||||
exit: {
|
||||
opacity: 0,
|
||||
scale: 0.95,
|
||||
y: -10,
|
||||
transition: {
|
||||
duration: 0.2,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const UserEditorContext = createContext<{
|
||||
domainId: string;
|
||||
setDomainId: React.Dispatch<React.SetStateAction<string>>;
|
||||
modalOpen: boolean;
|
||||
setModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
form: FormInstance<any>;
|
||||
formLoading: boolean;
|
||||
setFormLoading: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
}>({
|
||||
modalOpen: false,
|
||||
domainId: undefined,
|
||||
setDomainId: undefined,
|
||||
setModalOpen: undefined,
|
||||
form: undefined,
|
||||
formLoading: undefined,
|
||||
setFormLoading: undefined,
|
||||
});
|
||||
|
||||
export function UserMenu() {
|
||||
const [form] = useForm();
|
||||
const [formLoading, setFormLoading] = useState<boolean>();
|
||||
const [showMenu, setShowMenu] = useState(false);
|
||||
const menuRef = useRef<HTMLDivElement>(null);
|
||||
const { user, logout, isLoading, hasSomePermissions } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
useClickOutside(menuRef, () => setShowMenu(false));
|
||||
const [modalOpen, setModalOpen] = useState<boolean>(false);
|
||||
const [domainId, setDomainId] = useState<string>();
|
||||
const toggleMenu = useCallback(() => {
|
||||
setShowMenu((prev) => !prev);
|
||||
}, []);
|
||||
const canManageAnyStaff = useMemo(() => {
|
||||
return hasSomePermissions(RolePerms.MANAGE_ANY_STAFF);
|
||||
}, [user]);
|
||||
const menuItems: MenuItemType[] = useMemo(
|
||||
() =>
|
||||
[
|
||||
{
|
||||
icon: <UserOutlined className="text-lg" />,
|
||||
label: "个人信息",
|
||||
action: () => {
|
||||
setModalOpen(true);
|
||||
},
|
||||
},
|
||||
|
||||
canManageAnyStaff && {
|
||||
icon: <SettingOutlined className="text-lg" />,
|
||||
label: "设置",
|
||||
action: () => {
|
||||
navigate("/admin/staff");
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
icon: <LogoutOutlined className="text-lg" />,
|
||||
label: "注销",
|
||||
action: () => logout(),
|
||||
},
|
||||
].filter(Boolean),
|
||||
[logout]
|
||||
);
|
||||
|
||||
const handleMenuItemClick = useCallback((action: () => void) => {
|
||||
action();
|
||||
setShowMenu(false);
|
||||
}, []);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center w-10 h-10">
|
||||
<Spin size="small" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<UserEditorContext.Provider
|
||||
value={{
|
||||
formLoading,
|
||||
setFormLoading,
|
||||
form,
|
||||
domainId,
|
||||
modalOpen,
|
||||
setDomainId,
|
||||
setModalOpen,
|
||||
}}>
|
||||
<div ref={menuRef} className="relative">
|
||||
<motion.button
|
||||
aria-label="用户菜单"
|
||||
aria-haspopup="true"
|
||||
aria-expanded={showMenu}
|
||||
aria-controls="user-menu"
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
onClick={toggleMenu}
|
||||
className="flex items-center rounded-full transition-all duration-200 ease-in-out">
|
||||
{/* Avatar 容器，相对定位 */}
|
||||
<div className="relative">
|
||||
<Avatar
|
||||
src={user?.avatar}
|
||||
name={user?.showname || user?.username}
|
||||
size={40}
|
||||
className="ring-2 ring-white hover:ring-[#00538E]/90
|
||||
transition-all duration-200 ease-in-out shadow-md
|
||||
hover:shadow-lg focus:outline-none
|
||||
focus:ring-2 focus:ring-[#00538E]/80 focus:ring-offset-2
|
||||
focus:ring-offset-white "
|
||||
/>
|
||||
{/* 小绿点 */}
|
||||
<span
|
||||
className="absolute bottom-0 right-0 h-3 w-3
|
||||
rounded-full bg-emerald-500 ring-2 ring-white
|
||||
shadow-sm transition-transform duration-200
|
||||
ease-in-out hover:scale-110"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
</motion.button>
|
||||
|
||||
<AnimatePresence>
|
||||
{showMenu && (
|
||||
<motion.div
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
exit="exit"
|
||||
variants={menuVariants}
|
||||
role="menu"
|
||||
id="user-menu"
|
||||
aria-orientation="vertical"
|
||||
aria-labelledby="user-menu-button"
|
||||
style={{ zIndex: 100 }}
|
||||
className="absolute right-0 mt-3 w-64 origin-top-right
|
||||
bg-white rounded-xl overflow-hidden shadow-lg
|
||||
border border-[#E5EDF5]">
|
||||
{/* User Profile Section */}
|
||||
<div
|
||||
className="px-4 py-4 bg-gradient-to-b from-[#F6F9FC] to-white
|
||||
border-b border-[#E5EDF5] ">
|
||||
<div className="flex items-center space-x-4">
|
||||
<Avatar
|
||||
src={user?.avatar}
|
||||
name={user?.showname || user?.username}
|
||||
size={40}
|
||||
className="ring-2 ring-white shadow-sm"
|
||||
/>
|
||||
<div className="flex flex-col space-y-0.5">
|
||||
<span className="text-sm font-semibold text-[#00538E]">
|
||||
{user?.showname || user?.username}
|
||||
</span>
|
||||
<span className="text-xs text-[#718096] flex items-center gap-1.5">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse"></span>
|
||||
在线
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Menu Items */}
|
||||
<div className="p-2">
|
||||
{menuItems.map((item, index) => (
|
||||
<button
|
||||
key={index}
|
||||
role="menuitem"
|
||||
tabIndex={showMenu ? 0 : -1}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleMenuItemClick(item.action);
|
||||
}}
|
||||
className={`flex items-center gap-3 w-full px-4 py-3
|
||||
text-sm font-medium rounded-lg transition-all
|
||||
focus:outline-none
|
||||
focus:ring-2 focus:ring-[#00538E]/20
|
||||
group relative overflow-hidden
|
||||
active:scale-[0.99]
|
||||
${
|
||||
item.label === "注销"
|
||||
? "text-[#B22234] hover:bg-red-50/80 hover:text-red-700"
|
||||
: "text-[#00538E] hover:bg-[#E6EEF5] hover:text-[#003F6A]"
|
||||
}`}>
|
||||
<span
|
||||
className={`w-5 h-5 flex items-center justify-center
|
||||
transition-all duration-200 ease-in-out
|
||||
group-hover:scale-110 group-hover:rotate-6
|
||||
group-hover:translate-x-0.5 ${
|
||||
item.label === "注销"
|
||||
? "group-hover:text-red-600"
|
||||
: "group-hover:text-[#003F6A]"
|
||||
}`}>
|
||||
{item.icon}
|
||||
</span>
|
||||
<span>{item.label}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
<UserEditModal></UserEditModal>
|
||||
</UserEditorContext.Provider>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
import React, { ReactNode } from "react";
|
||||
export interface MenuItemType {
|
||||
icon: ReactNode;
|
||||
label: string;
|
||||
action: () => void;
|
||||
}
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
import PostList from "@web/src/components/models/course/list/PostList";
|
||||
import { useAuth } from "@web/src/providers/auth-provider";
|
||||
import { useMainContext } from "../../layout/MainProvider";
|
||||
import { PostType } from "@nice/common";
|
||||
import PathCard from "@web/src/components/models/post/SubPost/PathCard";
|
||||
|
||||
export default function MyDutyPathContainer() {
|
||||
const { user } = useAuth();
|
||||
const { searchCondition, termsCondition } = useMainContext();
|
||||
return (
|
||||
<>
|
||||
<PostList
|
||||
renderItem={(post) => <PathCard post={post}></PathCard>}
|
||||
params={{
|
||||
pageSize: 12,
|
||||
where: {
|
||||
type: PostType.PATH,
|
||||
authorId: user?.id,
|
||||
...termsCondition,
|
||||
...searchCondition,
|
||||
},
|
||||
}}
|
||||
cols={4}></PostList>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
import { useEffect } from "react";
|
||||
import BasePostLayout from "../layout/BasePost/BasePostLayout";
|
||||
import { useMainContext } from "../layout/MainProvider";
|
||||
import { PostType } from "@nice/common";
|
||||
import MyDutyPathContainer from "./components/MyDutyPathContainer";
|
||||
|
||||
export default function MyDutyPathPage() {
|
||||
const { setSearchMode } = useMainContext();
|
||||
useEffect(() => {
|
||||
setSearchMode(PostType.PATH);
|
||||
}, [setSearchMode]);
|
||||
return (
|
||||
<BasePostLayout>
|
||||
<MyDutyPathContainer></MyDutyPathContainer>
|
||||
</BasePostLayout>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
import PostList from "@web/src/components/models/course/list/PostList";
|
||||
import { useAuth } from "@web/src/providers/auth-provider";
|
||||
import { PostType } from "@nice/common";
|
||||
import { useMainContext } from "../../layout/MainProvider";
|
||||
import PostCard from "@web/src/components/models/post/PostCard";
|
||||
import CourseCard from "@web/src/components/models/post/SubPost/CourseCard";
|
||||
|
||||
export default function MyDutyListContainer() {
|
||||
const { user } = useAuth();
|
||||
const { searchCondition, termsCondition } = useMainContext();
|
||||
return (
|
||||
<>
|
||||
<PostList
|
||||
renderItem={(post) => <CourseCard post={post}></CourseCard>}
|
||||
params={{
|
||||
pageSize: 12,
|
||||
where: {
|
||||
type: PostType.COURSE,
|
||||
authorId: user.id,
|
||||
...termsCondition,
|
||||
...searchCondition,
|
||||
},
|
||||
}}
|
||||
cols={4}></PostList>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
import BasePostLayout from "../layout/BasePost/BasePostLayout";
|
||||
import MyDutyListContainer from "./components/MyDutyListContainer";
|
||||
import { useEffect } from "react";
|
||||
import { useMainContext } from "../layout/MainProvider";
|
||||
import { PostType } from "@nice/common";
|
||||
export default function MyDutyPage() {
|
||||
const { setSearchMode } = useMainContext();
|
||||
useEffect(() => {
|
||||
setSearchMode(PostType.COURSE);
|
||||
}, [setSearchMode]);
|
||||
return (
|
||||
<BasePostLayout>
|
||||
<MyDutyListContainer></MyDutyListContainer>
|
||||
</BasePostLayout>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
import PostList from "@web/src/components/models/course/list/PostList";
|
||||
import { useAuth } from "@web/src/providers/auth-provider";
|
||||
import { useMainContext } from "../../layout/MainProvider";
|
||||
import { PostType } from "@nice/common";
|
||||
import PostCard from "@web/src/components/models/post/PostCard";
|
||||
import CourseCard from "@web/src/components/models/post/SubPost/CourseCard";
|
||||
|
||||
export default function MyLearningListContainer() {
|
||||
const { user } = useAuth();
|
||||
const { searchCondition, termsCondition } = useMainContext();
|
||||
return (
|
||||
<>
|
||||
<PostList
|
||||
renderItem={(post) => <CourseCard post={post}></CourseCard>}
|
||||
params={{
|
||||
pageSize: 12,
|
||||
where: {
|
||||
type: PostType.COURSE,
|
||||
students: {
|
||||
some: {
|
||||
id: user?.id,
|
||||
},
|
||||
},
|
||||
...termsCondition,
|
||||
...searchCondition,
|
||||
},
|
||||
}}
|
||||
cols={4}></PostList>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
import { useEffect } from "react";
|
||||
import BasePostLayout from "../layout/BasePost/BasePostLayout";
|
||||
import { useMainContext } from "../layout/MainProvider";
|
||||
import MyLearningListContainer from "./components/MyLearningListContainer";
|
||||
import { PostType } from "@nice/common";
|
||||
|
||||
export default function MyLearningPage() {
|
||||
const { setSearchMode } = useMainContext();
|
||||
useEffect(() => {
|
||||
setSearchMode(PostType.COURSE);
|
||||
}, [setSearchMode]);
|
||||
return (
|
||||
<BasePostLayout>
|
||||
<MyLearningListContainer></MyLearningListContainer>
|
||||
</BasePostLayout>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
import PostList from "@web/src/components/models/course/list/PostList";
|
||||
import { useAuth } from "@web/src/providers/auth-provider";
|
||||
|
||||
import { PostType } from "@nice/common";
|
||||
import { useMainContext } from "../../layout/MainProvider";
|
||||
import PostCard from "@web/src/components/models/post/PostCard";
|
||||
import PathCard from "@web/src/components/models/post/SubPost/PathCard";
|
||||
|
||||
export default function MyPathListContainer() {
|
||||
const { user } = useAuth();
|
||||
const { searchCondition, termsCondition } = useMainContext();
|
||||
return (
|
||||
<>
|
||||
<PostList
|
||||
renderItem={(post) => <PathCard post={post}></PathCard>}
|
||||
params={{
|
||||
pageSize: 12,
|
||||
where: {
|
||||
type: PostType.PATH,
|
||||
students: {
|
||||
some: {
|
||||
id: user?.id,
|
||||
},
|
||||
},
|
||||
|
||||
...termsCondition,
|
||||
...searchCondition,
|
||||
},
|
||||
}}
|
||||
cols={4}></PostList>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
import { useEffect } from "react";
|
||||
import BasePostLayout from "../layout/BasePost/BasePostLayout";
|
||||
import { useMainContext } from "../layout/MainProvider";
|
||||
import MyPathListContainer from "./components/MyPathListContainer";
|
||||
import { PostType } from "@nice/common";
|
||||
|
||||
export default function MyPathPage() {
|
||||
const { setSearchMode } = useMainContext();
|
||||
useEffect(() => {
|
||||
setSearchMode(PostType.PATH);
|
||||
}, [setSearchMode]);
|
||||
return (
|
||||
<BasePostLayout>
|
||||
<MyPathListContainer></MyPathListContainer>
|
||||
</BasePostLayout>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
import { BookOutlined, EyeOutlined, TeamOutlined } from "@ant-design/icons";
|
||||
import { Typography } from "antd";
|
||||
import { PostDto } from "@nice/common";
|
||||
|
||||
const { Title, Text } = Typography;
|
||||
const DeptInfo = ({ post }: { post: PostDto }) => {
|
||||
return (
|
||||
<div className="gap-1 flex items-center justify-between flex-grow">
|
||||
<div className=" flex justify-start gap-1 items-center">
|
||||
<TeamOutlined className="text-blue-500 text-lg transform group-hover:scale-110 transition-transform duration-300" />
|
||||
{post?.depts && post?.depts?.length > 0 ? (
|
||||
<Text className="font-medium text-blue-500 hover:text-blue-600 transition-colors duration-300 truncate max-w-[120px]">
|
||||
{post?.depts?.length > 1
|
||||
? `${post.depts[0].name}等`
|
||||
: post?.depts?.[0]?.name}
|
||||
</Text>
|
||||
) : (
|
||||
<Text className="font-medium text-blue-500 hover:text-blue-600 transition-colors duration-300 truncate max-w-[120px]">
|
||||
未设置单位
|
||||
</Text>
|
||||
)}
|
||||
</div>
|
||||
{post && (
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="gap-1 text-xs font-medium text-gray-500 flex items-center">
|
||||
浏览量
|
||||
<EyeOutlined />
|
||||
{`${post?.views || 0}`}
|
||||
</span>
|
||||
{post?.studentIds && post?.studentIds?.length > 0 && (
|
||||
<span className="gap-1 text-xs font-medium text-gray-500 flex items-center">
|
||||
<BookOutlined />
|
||||
{`${post?.studentIds?.length || 0}`}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default DeptInfo;
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
import PostList from "@web/src/components/models/course/list/PostList";
|
||||
import { useMainContext } from "../../layout/MainProvider";
|
||||
import { PostType, Prisma } from "@nice/common";
|
||||
import PostCard from "@web/src/components/models/post/PostCard";
|
||||
import PathCard from "@web/src/components/models/post/SubPost/PathCard";
|
||||
|
||||
export function PathListContainer() {
|
||||
const { searchCondition, termsCondition } = useMainContext();
|
||||
return (
|
||||
<>
|
||||
<PostList
|
||||
renderItem={(post) => <PathCard post={post}></PathCard>}
|
||||
params={{
|
||||
pageSize: 12,
|
||||
where: {
|
||||
type: PostType.PATH,
|
||||
...termsCondition,
|
||||
...searchCondition,
|
||||
},
|
||||
}}
|
||||
cols={4}></PostList>
|
||||
</>
|
||||
);
|
||||
}
|
||||
export default PathListContainer;
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
import { Tag } from "antd";
|
||||
import { PostDto, TaxonomySlug, TermDto } from "@nice/common";
|
||||
|
||||
const TermInfo = ({ terms = [] }: { terms?: TermDto[] }) => {
|
||||
return (
|
||||
<div>
|
||||
{terms && terms?.length > 0 ? (
|
||||
<div className="flex gap-2 mb-4">
|
||||
{terms
|
||||
?.sort((a, b) =>
|
||||
String(a?.taxonomy?.id || "").localeCompare(
|
||||
String(b?.taxonomy?.id || "")
|
||||
)
|
||||
)
|
||||
?.map((term: any) => {
|
||||
return (
|
||||
<Tag
|
||||
key={term.id}
|
||||
color={
|
||||
term?.taxonomy?.slug ===
|
||||
TaxonomySlug.CATEGORY
|
||||
? "green"
|
||||
: term?.taxonomy?.slug ===
|
||||
TaxonomySlug.LEVEL
|
||||
? "blue"
|
||||
: "orange"
|
||||
}
|
||||
className="px-3 py-1 rounded-full border-0">
|
||||
{term.name}
|
||||
</Tag>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex gap-2 mb-4">
|
||||
<Tag
|
||||
color={"orange"}
|
||||
className="px-3 py-1 rounded-full border-0">
|
||||
{"未设置分类"}
|
||||
</Tag>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TermInfo;
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
import MindEditor from "@web/src/components/common/editor/MindEditor";
|
||||
import { PostDetailProvider } from "@web/src/components/models/course/detail/PostDetailContext";
|
||||
import { useParams } from "react-router-dom";
|
||||
|
||||
export default function PathEditorPage() {
|
||||
const { id } = useParams();
|
||||
return (
|
||||
<PostDetailProvider editId={id}>
|
||||
<MindEditor id={id}></MindEditor>;
|
||||
</PostDetailProvider>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
import { useEffect } from "react";
|
||||
import BasePostLayout from "../layout/BasePost/BasePostLayout";
|
||||
import { useMainContext } from "../layout/MainProvider";
|
||||
import PathListContainer from "./components/PathListContainer";
|
||||
import { PostType } from "@nice/common";
|
||||
import { PostDetailProvider } from "@web/src/components/models/course/detail/PostDetailContext";
|
||||
import { useParams } from "react-router-dom";
|
||||
|
||||
export default function PathPage() {
|
||||
const { setSearchMode } = useMainContext();
|
||||
useEffect(() => {
|
||||
setSearchMode(PostType.PATH);
|
||||
}, [setSearchMode]);
|
||||
const { id } = useParams();
|
||||
return (
|
||||
<BasePostLayout>
|
||||
<PathListContainer></PathListContainer>
|
||||
</BasePostLayout>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
import PostList from "@web/src/components/models/course/list/PostList";
|
||||
import { useMainContext } from "../../layout/MainProvider";
|
||||
import PostCard from "@web/src/components/models/post/PostCard";
|
||||
import { PostType } from "@nice/common";
|
||||
import CourseCard from "@web/src/components/models/post/SubPost/CourseCard";
|
||||
import PathCard from "@web/src/components/models/post/SubPost/PathCard";
|
||||
const POST_TYPE_COMPONENTS = {
|
||||
[PostType.COURSE]: CourseCard,
|
||||
[PostType.PATH]: PathCard,
|
||||
};
|
||||
export default function SearchListContainer() {
|
||||
const { searchCondition, termsCondition, searchMode } = useMainContext();
|
||||
|
||||
return (
|
||||
<>
|
||||
<PostList
|
||||
renderItem={(post) => {
|
||||
const Component =
|
||||
POST_TYPE_COMPONENTS[post.type] || PostCard;
|
||||
return <Component post={post} />;
|
||||
}}
|
||||
params={{
|
||||
pageSize: 12,
|
||||
where: {
|
||||
type: searchMode === "both" ? undefined : searchMode,
|
||||
...termsCondition,
|
||||
...searchCondition,
|
||||
},
|
||||
}}
|
||||
cols={4}></PostList>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
import { useEffect } from "react";
|
||||
import BasePostLayout from "../layout/BasePost/BasePostLayout";
|
||||
import SearchListContainer from "./components/SearchContainer";
|
||||
import { useMainContext } from "../layout/MainProvider";
|
||||
|
||||
export default function SearchPage() {
|
||||
const { setShowSearchMode, setSearchValue } = useMainContext();
|
||||
useEffect(() => {
|
||||
setShowSearchMode(true);
|
||||
return () => {
|
||||
setShowSearchMode(false);
|
||||
setSearchValue("");
|
||||
};
|
||||
}, [setShowSearchMode]);
|
||||
return (
|
||||
<BasePostLayout>
|
||||
<SearchListContainer></SearchListContainer>
|
||||
</BasePostLayout>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
export default function MyCoursePage() {
|
||||
return (
|
||||
<div>
|
||||
My Course Page
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
export default function ProfilesPage() {
|
||||
return <>Profiles</>
|
||||
}
|
||||
|
|
@ -0,0 +1,260 @@
|
|||
import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
|
||||
import { api, useStaff } from "@nice/client";
|
||||
import { Button, Form, Input, Modal, Select, Table } from "antd";
|
||||
import { StaffDto } from "@nice/common";
|
||||
import { useEffect, useState } from "react";
|
||||
import toast from "react-hot-toast";
|
||||
|
||||
export default function StaffMessage() {
|
||||
const initialValues = {
|
||||
username: "",
|
||||
deptId: "",
|
||||
absent: "是",
|
||||
};
|
||||
const { create, update } = useStaff();
|
||||
const [searchName, setSearchName] = useState("");
|
||||
const { data: staffs, isLoading } = api.staff.findMany.useQuery({
|
||||
where: {
|
||||
username: {
|
||||
contains: searchName
|
||||
}
|
||||
}
|
||||
});
|
||||
console.log(staffs);
|
||||
const [form] = Form.useForm();
|
||||
const [visible, setVisible] = useState(false);
|
||||
const [editingRecord, setEditingRecord] = useState<StaffDto | null>(null);
|
||||
const colnums = [
|
||||
{
|
||||
title: "姓名",
|
||||
dataIndex: "username",
|
||||
key: "username",
|
||||
},
|
||||
{
|
||||
title: "部门",
|
||||
dataIndex: "deptId",
|
||||
key: "deptId",
|
||||
},
|
||||
{
|
||||
title: "在位",
|
||||
dataIndex: "absent",
|
||||
key: "absent",
|
||||
render: (_, record) => (
|
||||
<Select
|
||||
// defaultValue={record.absent ? "是" : "否"}
|
||||
style={{ width: 120 }}
|
||||
onChange={async (value) => {
|
||||
try {
|
||||
await update.mutateAsync({
|
||||
where: { id: record.id },
|
||||
data: { absent: value }
|
||||
});
|
||||
toast.success("状态更新成功");
|
||||
} catch (error) {
|
||||
toast.error("状态更新失败");
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Select.Option value="是">是</Select.Option>
|
||||
<Select.Option value="否">否</Select.Option>
|
||||
</Select>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
key: "action",
|
||||
render: (_, record) => (
|
||||
<Button
|
||||
type="primary"
|
||||
key={record.id}
|
||||
onClick={() => handleEdit(record)}>编辑</Button>
|
||||
),
|
||||
}
|
||||
];
|
||||
|
||||
const handleNew = () => {
|
||||
form.setFieldsValue(initialValues);
|
||||
setVisible(true);
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (editingRecord) {
|
||||
form.setFieldsValue(editingRecord);
|
||||
console.log(editingRecord);
|
||||
}
|
||||
}, [editingRecord]);
|
||||
|
||||
const handleEdit = (record) => {
|
||||
setEditingRecord(record);
|
||||
form.setFieldsValue(editingRecord);
|
||||
setVisible(true);
|
||||
};
|
||||
|
||||
const handleOk = async () => {
|
||||
const values = await form.getFieldsValue();
|
||||
const orderValue = values.order ? parseFloat(values.order) : null;
|
||||
console.log(values.username);
|
||||
try {
|
||||
if (editingRecord && editingRecord.id) {
|
||||
// console.log(editingRecord);
|
||||
const result = await update.mutateAsync(
|
||||
{
|
||||
where: {
|
||||
id: editingRecord.id,
|
||||
},
|
||||
data: {
|
||||
username: values.username,
|
||||
deptId: values.deptId,
|
||||
order: orderValue,
|
||||
updatedAt: new Date()
|
||||
}
|
||||
}
|
||||
);
|
||||
// console.log(result);
|
||||
} else {
|
||||
await create.mutateAsync(
|
||||
{
|
||||
data: {
|
||||
username: values.username,
|
||||
deptId: values.deptId,
|
||||
order: orderValue,
|
||||
createdAt: new Date(),
|
||||
showname: values.username,
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
toast.success("保存成功");
|
||||
setVisible(false);
|
||||
} catch (error) {
|
||||
toast.error("保存失败");
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
setVisible(false);
|
||||
};
|
||||
|
||||
const handleSearch = (e) => {
|
||||
setSearchName(e.target.value);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="p-2 min-h-screen bg-gradient-to-br">
|
||||
<Form>
|
||||
<div className="p-4 h-full flex flex-col"> {/* 修改为flex布局 */}
|
||||
<div className="max-w-full mx-auto flex-1 flex flex-col"> {/* 添加flex容器 */}
|
||||
{/* 头部区域保持不变... */}
|
||||
<div className="flex justify-between mb-4 space-x-4 items-center">
|
||||
<div className="text-2xl">XX 公司人员信息表</div>
|
||||
<div className="relative w-1/3">
|
||||
<Input
|
||||
placeholder="输入姓名搜索"
|
||||
onChange={handleSearch}
|
||||
className="pl-10 w-full border"
|
||||
/>
|
||||
<MagnifyingGlassIcon className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 " />
|
||||
</div>
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={handleNew}
|
||||
className=" font-bold py-2 px-4 rounded"
|
||||
>
|
||||
新建人员
|
||||
</Button>
|
||||
</div>
|
||||
{/* 表格容器增加flex布局 */}
|
||||
{isLoading ? (
|
||||
<div className="flex justify-center mt-4">
|
||||
<div className="animate-spin rounded-full h-10 w-10 border-4"></div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex-1 min-h-[calc(100vh-200px)]">
|
||||
<Table
|
||||
key={"username"}
|
||||
columns={colnums}
|
||||
dataSource={staffs}
|
||||
className="bg-gray-900/50 backdrop-blur-sm border-2
|
||||
[&_.ant-table-tbody>tr>td]:!text-lg
|
||||
[&_.ant-table-tbody>tr>td]:!py-5
|
||||
[&_.ant-table-thead>tr>th]:!text-lg
|
||||
[&_.ant-table-thead>tr>th]:!py-5
|
||||
h-full"
|
||||
tableLayout="fixed"
|
||||
pagination={{
|
||||
position: ["bottomCenter"],
|
||||
pageSize: 15
|
||||
}}
|
||||
onRow={(record) => ({
|
||||
className: "hover:bg-gray-800/50 transition-colors even:bg-gray-800/50 hover:shadow-lg hover:shadow-blue-500/20",
|
||||
})}
|
||||
>
|
||||
<thead className="">
|
||||
<tr>
|
||||
{colnums.map((column) => (
|
||||
<th
|
||||
key={column.key}
|
||||
className="px-4 border-b-2" // 简化样式
|
||||
>
|
||||
{column.title}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody> {/* 移除原有text-gray-300 */}
|
||||
{staffs?.map((record) => (
|
||||
<tr
|
||||
key={record.id}
|
||||
className="border-b border-blue-400/10"
|
||||
>
|
||||
{colnums.map((column) => (
|
||||
<td
|
||||
key={column.key}
|
||||
className="px-4 border" // 简化样式
|
||||
>
|
||||
{column.render?.(record[column.dataIndex], record) || record[column.dataIndex]}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</Table>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 模态框样式更新 */}
|
||||
<Modal
|
||||
title="编辑员工信息"
|
||||
visible={visible}
|
||||
onOk={handleOk}
|
||||
onCancel={handleCancel}
|
||||
className="[&_.ant-modal-content]:bg-gray-800 [&_.ant-modal-title]:text-gray-100"
|
||||
>
|
||||
<Form
|
||||
form={form}
|
||||
initialValues={initialValues}
|
||||
>
|
||||
<Form.Item
|
||||
name={"username"}
|
||||
label="姓名"
|
||||
// labelClassName="text-gray-300"
|
||||
>
|
||||
<Input className="rounded-lg" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={"order"}
|
||||
label="序号"
|
||||
// labelClassName="text-gray-300"
|
||||
>
|
||||
<Input className=" rounded-lg" />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -6,25 +6,10 @@ import {
|
|||
useParams,
|
||||
} from "react-router-dom";
|
||||
import ErrorPage from "../app/error";
|
||||
import WithAuth from "../components/utils/with-auth";
|
||||
import LoginPage from "../app/login";
|
||||
import HomePage from "../app/main/home/page";
|
||||
import { CourseDetailPage } from "../app/main/course/detail/page";
|
||||
import { CourseBasicForm } from "../components/models/course/editor/form/CourseBasicForm";
|
||||
import CourseContentForm from "../components/models/course/editor/form/CourseContentForm/CourseContentForm";
|
||||
import CourseEditorLayout from "../components/models/course/editor/layout/CourseEditorLayout";
|
||||
import { MainLayout } from "../app/main/layout/MainLayout";
|
||||
import CoursesPage from "../app/main/courses/page";
|
||||
import PathPage from "../app/main/path/page";
|
||||
import { adminRoute } from "./admin-route";
|
||||
import PathEditorPage from "../app/main/path/editor/page";
|
||||
|
||||
import { CoursePreview } from "../app/main/course/preview/page";
|
||||
import MyLearningPage from "../app/main/my-learning/page";
|
||||
import MyDutyPage from "../app/main/my-duty/page";
|
||||
import MyPathPage from "../app/main/my-path/page";
|
||||
import SearchPage from "../app/main/search/page";
|
||||
import MyDutyPathPage from "../app/main/my-duty-path/page";
|
||||
import StaffMessage from "../app/main/staffpage/page";
|
||||
import MainLayout from "../app/main/layout/MainLayout";
|
||||
interface CustomIndexRouteObject extends IndexRouteObject {
|
||||
name?: string;
|
||||
breadcrumb?: string;
|
||||
|
|
@ -60,103 +45,15 @@ export const routes: CustomRouteObject[] = [
|
|||
children: [
|
||||
{
|
||||
index: true,
|
||||
element: <HomePage />,
|
||||
element: <HomePage></HomePage>,
|
||||
},
|
||||
{
|
||||
path: "path",
|
||||
children: [
|
||||
{
|
||||
index: true,
|
||||
element: <PathPage></PathPage>,
|
||||
},
|
||||
{
|
||||
path: "editor/:id?",
|
||||
element: (
|
||||
<PathEditorPage></PathEditorPage>
|
||||
),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: "courses",
|
||||
element: <CoursesPage></CoursesPage>,
|
||||
},
|
||||
{
|
||||
path: "my-path",
|
||||
element: (
|
||||
<WithAuth>
|
||||
<MyPathPage></MyPathPage>
|
||||
</WithAuth>
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "my-duty-path",
|
||||
element: (
|
||||
<WithAuth>
|
||||
<MyDutyPathPage></MyDutyPathPage>
|
||||
</WithAuth>
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "my-duty",
|
||||
element: (
|
||||
<WithAuth>
|
||||
<MyDutyPage></MyDutyPage>
|
||||
</WithAuth>
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "my-learning",
|
||||
element: (
|
||||
<WithAuth>
|
||||
<MyLearningPage></MyLearningPage>
|
||||
</WithAuth>
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "search",
|
||||
element: <SearchPage></SearchPage>,
|
||||
},
|
||||
{
|
||||
path: "course/:id?/detail/:lectureId?", // 使用 ? 表示 id 参数是可选的
|
||||
element: <CourseDetailPage />,
|
||||
path: "/staff",
|
||||
element: <StaffMessage></StaffMessage>,
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
{
|
||||
path: "course",
|
||||
children: [
|
||||
{
|
||||
path: ":id?/editor",
|
||||
element: (
|
||||
<WithAuth>
|
||||
<CourseEditorLayout></CourseEditorLayout>
|
||||
</WithAuth>
|
||||
),
|
||||
children: [
|
||||
{
|
||||
index: true,
|
||||
element: (
|
||||
<WithAuth>
|
||||
<CourseBasicForm></CourseBasicForm>
|
||||
</WithAuth>
|
||||
),
|
||||
},
|
||||
|
||||
{
|
||||
path: "content",
|
||||
element: (
|
||||
<WithAuth>
|
||||
<CourseContentForm></CourseContentForm>
|
||||
</WithAuth>
|
||||
),
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
adminRoute,
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
|
|||
Loading…
Reference in New Issue