add

apps/web/src/app/main/courses/components/FilterSection.tsx

@@ -1,10 +1,12 @@
-import { Checkbox, Divider, Radio, Space , Spin} from 'antd';
+import { Checkbox, Divider, Radio, Space, Spin } from "antd";
-import { categories, levels } from '../mockData';
+import { categories, levels } from "../mockData";
-import { TaxonomySlug, TermDto } from '@nice/common';
+import { TaxonomySlug, TermDto } from "@nice/common";
 
-import { useEffect, useMemo } from 'react';
+import { useEffect, useMemo } from "react";
-import { api } from '@nice/client';
+import { api } from "@nice/client";
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams } from "react-router-dom";
+import TermTree from "@web/src/components/models/term/term-tree";
+import TermSelect from "@web/src/components/models/term/term-select";
 
 interface FilterSectionProps {
 	selectedCategory: string;
@@ -18,74 +20,72 @@ interface GetTaxonomyProps {
 	isLoading: boolean;
 }
 
-function useGetTaxonomy({type}) : GetTaxonomyProps {
+function useGetTaxonomy({ type }): GetTaxonomyProps {
-  const {data,isLoading} :{data:TermDto[],isLoading:boolean}= api.term.findMany.useQuery({
+	const { data, isLoading }: { data: TermDto[]; isLoading: boolean } =
-      where:{
+		api.term.findMany.useQuery({
+			where: {
 				taxonomy: {
 					//TaxonomySlug.CATEGORY
-          slug:type
+					slug: type,
-        }
 				},
-      include:{
-        children :true
 			},
-      take:10, // 只取前10个
+			include: {
+				children: true,
+			},
+			take: 10, // 只取前10个
 			orderBy: {
-          createdAt: 'desc', // 按创建时间降序排列
+				createdAt: "desc", // 按创建时间降序排列
 			},
-  })
+		});
 	const categories = useMemo(() => {
-      const allCategories = isLoading ? [] : data?.map((course) => course.name);
+		const allCategories = isLoading
+			? []
+			: data?.map((course) => course.name);
 		return [...Array.from(new Set(allCategories))];
 	}, [data]);
-  return {categories,isLoading}
+	return { categories, isLoading };
 }
 
-
 export default function FilterSection({
 	selectedCategory,
 	selectedLevel,
 	onCategoryChange,
 	onLevelChange,
 }: FilterSectionProps) {
-  const gateGory : GetTaxonomyProps = useGetTaxonomy({
+	const gateGory: GetTaxonomyProps = useGetTaxonomy({
 		type: TaxonomySlug.CATEGORY,
-  })
+	});
-  const levels : GetTaxonomyProps = useGetTaxonomy({
+	const levels: GetTaxonomyProps = useGetTaxonomy({
 		type: TaxonomySlug.LEVEL,
-  })
+	});
 
-  const [searchParams,setSearchParams] = useSearchParams()
+	const [searchParams, setSearchParams] = useSearchParams();
 	useEffect(() => {
-    if(searchParams.get('category')) onCategoryChange(searchParams.get('category'))
+		if (searchParams.get("category"))
-  },[searchParams.get('category')])
+			onCategoryChange(searchParams.get("category"));
+	}, [searchParams.get("category")]);
+
+	const { data: taxonomies } = api.taxonomy.getAll.useQuery({});
 
 	return (
 		<div className="bg-white p-6 rounded-lg shadow-sm space-y-6">
-      <div>
+      <Form>
-        <h3 className="text-lg font-medium mb-4">课程分类</h3>
-        <Radio.Group
-          value={selectedCategory}
-          onChange={(e) => onCategoryChange(e.target.value)}
-          className="flex flex-col space-y-3"
-        >
-        {
-          gateGory.isLoading?
-          (<Spin/>)
-          :
-          (
-          <>
-            <Radio value="" >全部课程</Radio>
-            {gateGory.categories.map(category => (
-              <Radio key={category} value={category}>
-                {category}
-              </Radio>
-            ))}
-          </>)
-        }
         
-        </Radio.Group>
+      </Form>
+			{taxonomies.map((tax) => {
+				return (
+					<>
+						<div>
+							<h3 className="text-lg font-medium mb-4">
+								{tax?.name}
+							</h3>
+							<TermSelect
+								multiple
+								taxonomyId={tax?.id}></TermSelect>
 						</div>
+					</>
+				);
+			})}
 
 			<Divider className="my-6" />
 
@@ -94,23 +94,19 @@ export default function FilterSection({
 				<Radio.Group
 					value={selectedLevel}
 					onChange={(e) => onLevelChange(e.target.value)}
-          className="flex flex-col space-y-3"
+					className="flex flex-col space-y-3">
-        >
+					{levels.isLoading ? (
-          {
+						<Spin />
-            levels.isLoading ?
+					) : (
-            (<Spin/>)
-            :
-            (
 						<>
 							<Radio value="">全部难度</Radio>
-            {levels.categories.map(level => (
+							{levels.categories.map((level) => (
 								<Radio key={level} value={level}>
 									{level}
 								</Radio>
 							))}
-          </>)
+						</>
-          }
+					)}
-          
 				</Radio.Group>
 			</div>
 		</div>

apps/web/src/app/main/courses/page.tsx

@@ -3,80 +3,107 @@ import { mockCourses } from "./mockData";
 import FilterSection from "./components/FilterSection";
 import CourseList from "./components/CourseList";
 import { api } from "@nice/client";
-import { courseDetailSelect, CourseDto, LectureType, PostType } from "@nice/common";
+import {
+	courseDetailSelect,
+	CourseDto,
+	LectureType,
+	PostType,
+} from "@nice/common";
 import { useSearchParams } from "react-router-dom";
 import { set } from "idb-keyval";
 
-
 export default function CoursesPage() {
 	const [currentPage, setCurrentPage] = useState(1);
 	const [selectedCategory, setSelectedCategory] = useState("");
 	const [selectedLevel, setSelectedLevel] = useState("");
 	const pageSize = 9;
-	const [isAll,setIsAll] = useState(true)
+	const [isAll, setIsAll] = useState(true);
 	const [searchParams, setSearchParams] = useSearchParams();
-	let coursesData = []
+	let coursesData = [];
- 	let isCourseLoading = false
+	let isCourseLoading = false;
-	if(!searchParams.get('searchValue')){
+	if (!searchParams.get("searchValue")) {
-		console.log('no category')
+		console.log("no category");
-		const {data,isLoading} = api.post.findManyWithPagination.useQuery({
+		const { data, isLoading } = api.post.findManyWithPagination.useQuery({
 			where: {
 				type: PostType.COURSE,
-				terms:isAll?{}:{
+				terms: isAll
+					? {}
+					: {
 							some: {
-						OR : [
+								OR: [
-							selectedCategory?{name:selectedCategory}:{},
+									selectedCategory
-							selectedLevel?{name:selectedLevel}:{}
+										? { name: selectedCategory }
+										: {},
+									selectedLevel
+										? { name: selectedLevel }
+										: {},
 								],
 							},
 						},
-	
 			},
-			select:courseDetailSelect
+			select: courseDetailSelect,
 		});
-		coursesData = data?.items
+		coursesData = data?.items;
-		isCourseLoading = isLoading
+		isCourseLoading = isLoading;
-	}else{
+	} else {
-		console.log('searchValue:'+searchParams.get('searchValue'))
+		console.log("searchValue:" + searchParams.get("searchValue"));
-		const searchValue = searchParams.get('searchValue')
+		const searchValue = searchParams.get("searchValue");
-		const {data,isLoading} = api.post.findManyWithPagination.useQuery({
+		const { data, isLoading } = api.post.findManyWithPagination.useQuery({
 			where: {
 				type: PostType.COURSE,
-				OR:[
+				OR: [
-					{ title: { contains: searchValue, mode: 'insensitive' } },
+					{ title: { contains: searchValue, mode: "insensitive" } },
-					{ subTitle: { contains: searchValue, mode: 'insensitive' } }, 
+					{
-					{ content: { contains: searchValue, mode: 'insensitive' } },
+						subTitle: {
-					{ terms: { some: { name: { contains: searchValue, mode: 'insensitive' } } } }
+							contains: searchValue,
-				]
+							mode: "insensitive",
 						},
-			select:courseDetailSelect
+					},
-		})
+					{ content: { contains: searchValue, mode: "insensitive" } },
-		coursesData = data?.items
+					{
-		isCourseLoading = isLoading
+						terms: {
+							some: {
+								name: {
+									contains: searchValue,
+									mode: "insensitive",
+								},
+							},
+						},
+					},
+				],
+			},
+			select: courseDetailSelect,
+		});
+		coursesData = data?.items;
+		isCourseLoading = isLoading;
 	}
 	useEffect(() => {
-		if(searchParams.get('searchValue')==''){
+		if (searchParams.get("searchValue") == "") {
-			setSelectedCategory('');
+			setSelectedCategory("");
-			setSelectedLevel('')
+			setSelectedLevel("");
 		}
-	}, [searchParams.get('searchValue')]);
+	}, [searchParams.get("searchValue")]);
 	const filteredCourses = useMemo(() => {
 		return isCourseLoading ? [] : coursesData;
 	}, [isCourseLoading, coursesData, selectedCategory, selectedLevel]);
 
-	const paginatedCourses :CourseDto[]= useMemo(() => {
+	const paginatedCourses: CourseDto[] = useMemo(() => {
 		const startIndex = (currentPage - 1) * pageSize;
-		return isCourseLoading ? [] : (filteredCourses.slice(startIndex, startIndex + pageSize) as any as CourseDto[]);
+		return isCourseLoading
+			? []
+			: (filteredCourses.slice(
+					startIndex,
+					startIndex + pageSize
+				) as any as CourseDto[]);
 	}, [filteredCourses, currentPage]);
 
 	const handlePageChange = (page: number) => {
 		setCurrentPage(page);
 		window.scrollTo({ top: 0, behavior: "smooth" });
 	};
-	useEffect(()=>{
+	useEffect(() => {
-		setCurrentPage(1)
+		setCurrentPage(1);
-	},[])
+	}, []);
-
 
 	return (
 		<div className="min-h-screen bg-gray-50">
@@ -92,14 +119,14 @@ export default function CoursesPage() {
 									console.log(category);
 									setSelectedCategory(category);
 									setCurrentPage(1);
-									setIsAll(!category)
+									setIsAll(!category);
-									setSearchParams({ searchValue: ''});
+									setSearchParams({ searchValue: "" });
 								}}
 								onLevelChange={(level) => {
 									setSelectedLevel(level);
 									setCurrentPage(1);
-									setIsAll(!level)
+									setIsAll(!level);
-									setSearchParams({ searchValue: ''});
+									setSearchParams({ searchValue: "" });
 								}}
 							/>
 						</div>

apps/web/src/app/main/home/page.tsx

@@ -1,10 +1,11 @@
-import HeroSection from './components/HeroSection';
+import HeroSection from "./components/HeroSection";
-import CategorySection from './components/CategorySection';
+import CategorySection from "./components/CategorySection";
-import CoursesSection from './components/CoursesSection';
+import CoursesSection from "./components/CoursesSection";
-import FeaturedTeachersSection from './components/FeaturedTeachersSection';
+import FeaturedTeachersSection from "./components/FeaturedTeachersSection";
-import { api } from '@nice/client';
+import { api } from "@nice/client";
-import { useEffect, useState } from 'react';
+import { useEffect, useState } from "react";
-interface Courses{
+import TermTree from "@web/src/components/models/term/term-tree";
+interface Courses {
 	id: number;
 	title: string;
 	instructor: string;
@@ -17,7 +18,6 @@ interface Courses{
 	thumbnail: string;
 }
 const HomePage = () => {
-  // const mockCourses = [
 	//   {
 	//     id: 1,
 	//     title: 'Python 零基础入门',
@@ -115,27 +115,29 @@ const HomePage = () => {
 	//     thumbnail: '/images/course8.jpg',
 	//   },
 	// ];
-  const { data ,isLoading}: { data: Courses[] , isLoading:boolean} = api.post.findMany.useQuery({
+	const { data, isLoading }: { data: Courses[]; isLoading: boolean } =
+		api.post.findMany.useQuery({
 			where: {},
 			include: {
 				instructors: true,
 			},
 			orderBy: {
-      createdAt: 'desc' // 按创建时间降序排列
+				createdAt: "desc", // 按创建时间降序排列
 			},
-    take: 8 // 只获取前8个课程
+			take: 8, // 只获取前8个课程
 		});
 	useEffect(() => {
 		if (data) {
-      console.log('mockCourses data:', data);
+			console.log("mockCourses data:", data);
 		}
 	}, [data]);
 
 	// 数据处理逻辑
-// 修正依赖数组
+	// 修正依赖数组
-return (
+	return (
 		<div className="min-h-screen">
 			<HeroSection />
+			
 			<CoursesSection
 				title="推荐课程"
 				description="最受欢迎的精品课程，助你快速成长"
@@ -157,7 +159,7 @@ return (
 			<CategorySection />
 			{/* <FeaturedTeachersSection /> */}
 		</div>
-);
+	);
 };
 
 export default HomePage;

apps/web/src/components/models/term/term-select.tsx

@@ -23,7 +23,7 @@ export default function TermSelect({
 	value,
 	onChange,
 	className,
-	placeholder = "选择单位",
+	placeholder = "选择分类",
 	multiple = false,
 	taxonomyId,
 	domainId,

apps/web/src/components/models/term/term-tree.tsx

@@ -0,0 +1,199 @@
+import React, { useEffect, useState, useCallback } from "react";
+import { Tree } from "antd";
+import type { DataNode, TreeProps } from "antd/es/tree";
+import { getUniqueItems } from "@nice/common";
+import { api } from "@nice/client";
+
+interface TermData {
+	value?: string;
+	children?: TermData[];
+	key?: string;
+	hasChildren?: boolean;
+	isLeaf?: boolean;
+	pId?: string;
+	title?: React.ReactNode;
+	data?: any;
+	order?: string;
+	id?: string;
+}
+
+interface TermTreeProps {
+	defaultValue?: string | string[];
+	value?: string | string[];
+	onChange?: (value: string | string[]) => void;
+	multiple?: boolean;
+	taxonomyId?: string;
+	disabled?: boolean;
+	className?: string;
+	domainId?: string;
+	style?: React.CSSProperties;
+}
+
+const TermTree: React.FC<TermTreeProps> = ({
+	defaultValue,
+	value,
+	onChange,
+	className,
+	multiple = false,
+	taxonomyId,
+	domainId,
+	disabled = false,
+	style,
+}) => {
+	const utils = api.useUtils();
+	const [treeData, setTreeData] = useState<TermData[]>([]);
+
+	const processTermData = (terms: TermData[]): TermData[] => {
+		return terms.map((term) => ({
+			...term,
+			key: term.key || term.id || "",
+			title: term.title || term.value,
+			children: term.children
+				? processTermData(term.children)
+				: undefined,
+		}));
+	};
+
+	const fetchParentTerms = useCallback(
+		async (termIds: string | string[], taxonomyId?: string) => {
+			const idsArray = Array.isArray(termIds)
+				? termIds
+				: [termIds].filter(Boolean);
+			try {
+				const result = await utils.term.getParentSimpleTree.fetch({
+					termIds: idsArray,
+					taxonomyId,
+					domainId,
+				});
+				return processTermData(result);
+			} catch (error) {
+				console.error(
+					"Error fetching parent terms for termIds",
+					idsArray,
+					":",
+					error
+				);
+				throw error;
+			}
+		},
+		[utils, domainId]
+	);
+
+	const fetchTerms = useCallback(async () => {
+		try {
+			const rootTerms = await utils.term.getChildSimpleTree.fetch({
+				taxonomyId,
+				domainId,
+			});
+			let combinedTerms = processTermData(rootTerms);
+			if (defaultValue) {
+				const defaultTerms = await fetchParentTerms(
+					defaultValue,
+					taxonomyId
+				);
+				combinedTerms = getUniqueItems(
+					[...treeData, ...combinedTerms, ...defaultTerms],
+					"key"
+				);
+			}
+			if (value) {
+				const valueTerms = await fetchParentTerms(value, taxonomyId);
+				combinedTerms = getUniqueItems(
+					[...treeData, ...combinedTerms, ...valueTerms],
+					"key"
+				);
+			}
+
+			setTreeData(combinedTerms);
+		} catch (error) {
+			console.error("Error fetching terms:", error);
+		}
+	}, [
+		defaultValue,
+		value,
+		taxonomyId,
+		utils,
+		fetchParentTerms,
+		domainId,
+		treeData,
+	]);
+
+	useEffect(() => {
+		fetchTerms();
+	}, [fetchTerms]);
+
+	const onLoadData = async ({ key }: any) => {
+		try {
+			const result = await utils.term.getChildSimpleTree.fetch({
+				termIds: [key],
+				taxonomyId,
+				domainId,
+			});
+			const processedResult = processTermData(result);
+			const newItems = getUniqueItems(
+				[...treeData, ...processedResult],
+				"key"
+			);
+			setTreeData(newItems);
+		} catch (error) {
+			console.error(
+				"Error loading data for node with key",
+				key,
+				":",
+				error
+			);
+		}
+	};
+
+	const handleCheck: TreeProps["onCheck"] = (checkedKeys, info) => {
+		if (onChange) {
+			if (multiple) {
+				onChange(checkedKeys as string[]);
+			} else {
+				onChange((checkedKeys as string[])[0] || "");
+			}
+		}
+	};
+
+	const handleExpand = async (expandedKeys: React.Key[]) => {
+		try {
+			const allKeyIds = expandedKeys
+				.map((key) => key.toString())
+				.filter(Boolean);
+			const expandedNodes = await utils.term.getChildSimpleTree.fetch({
+				termIds: allKeyIds,
+				taxonomyId,
+				domainId,
+			});
+			const processedNodes = processTermData(expandedNodes);
+			const newItems = getUniqueItems(
+				[...treeData, ...processedNodes],
+				"key"
+			);
+			setTreeData(newItems);
+		} catch (error) {
+			console.error(
+				"Error expanding nodes with keys",
+				expandedKeys,
+				":",
+				error
+			);
+		}
+	};
+
+	return (
+		<Tree
+			checkable={multiple}
+			disabled={disabled}
+			className={className}
+			style={style}
+			treeData={treeData as DataNode[]}
+			checkedKeys={Array.isArray(value) ? value : value ? [value] : []}
+			onCheck={handleCheck}
+			loadData={onLoadData}
+			onExpand={handleExpand}
+		/>
+	);
+};
+
+export default TermTree;

apps/web/src/components/models/term/util.ts

@@ -1,4 +1,5 @@
-import { TreeDataNode } from "@nice/common"
+import { TreeDataNode } from "@nice/common";
+import React from "react";
 export const treeVisitor = (
 	data: TreeDataNode[],
 	key: React.Key,