addd

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

@@ -10,27 +10,39 @@ import { useMainContext } from "../../layout/MainProvider";
 
 export default function FilterSection() {
 	const { data: taxonomies } = api.taxonomy.getAll.useQuery({});
-	const { setSelectedTerms } = useMainContext();
+	const { selectedTerms, setSelectedTerms } = useMainContext();
-	const handleTermChange = (slug, selected) => {
+	const handleTermChange = (slug: string, selected: string[]) => {
-		setSelectedTerms((prev) => ({
+		setSelectedTerms({
-			...prev,
+			...selectedTerms,
 			[slug]: selected, // 更新对应 slug 的选择
-		}));
+		});
 	};
 	return (
 		<div className="bg-white p-6 rounded-lg shadow-sm space-y-6 h-full">
 			{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}
 						</h3>
 						<TermSelect
+							// open
 							className="w-72"
+							value={items}
+							dropdownRender={(menu) => (
+								<div style={{ padding: "8px" }}>{menu}</div>
+							)}
+							dropdownStyle={{ maxHeight: 400, overflow: "auto" }}
 							multiple
 							taxonomyId={tax?.id}
 							onChange={(selected) =>
-								handleTermChange(tax?.slug, selected)
+								handleTermChange(
+									tax?.slug,
+									selected as string[]
+								)
 							}></TermSelect>
 						{index < taxonomies.length - 1 && (
 							<Divider className="my-6" />

apps/web/src/app/main/courses/layout/AllCoursesLayout.tsx

@@ -1,8 +1,5 @@
-import { useMainContext } from "../../layout/MainProvider";
-import CourseList from "../../../../components/models/course/list/CourseList";
 import FilterSection from "../components/FilterSection";
 import CoursesContainer from "../components/CoursesContainer";
-
 export function AllCoursesLayout() {
 	return (
 		<>

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

@@ -1,22 +1,4 @@
-import { useState, useMemo, useEffect } from "react";
-import FilterSection from "./components/FilterSection";
-import CourseList from "../../../components/models/course/list/CourseList";
-import { api } from "@nice/client";
-import {
-	courseDetailSelect,
-	CourseDto,
-	LectureType,
-	PostType,
-} from "@nice/common";
-import { useSearchParams } from "react-router-dom";
-import { set } from "idb-keyval";
-import { useMainContext } from "../layout/MainProvider";
 import AllCoursesLayout from "./layout/AllCoursesLayout";
-
-interface paginationData {
-	items: CourseDto[];
-	totalPages: number;
-}
 export default function CoursesPage() {
 	return (
 		<>

apps/web/src/app/main/layout/MainProvider.tsx

@@ -2,6 +2,7 @@ import React, { createContext, ReactNode, useContext, useState } from "react";
 interface SelectedTerms {
 	[key: string]: string[]; // 每个 slug 对应一个 string 数组
 }
+
 interface MainContextType {
 	searchValue?: string;
 	selectedTerms?: SelectedTerms;

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

@@ -1,5 +1,12 @@
 import { TreeSelect, TreeSelectProps } from "antd";
-import React, { useEffect, useState, useCallback, useRef } from "react";
+import React, {
+	useEffect,
+	useState,
+	useCallback,
+	useRef,
+	ReactElement,
+	JSXElementConstructor,
+} from "react";
 import { getUniqueItems } from "@nice/common";
 import { api } from "@nice/client";
 import { DefaultOptionType } from "antd/es/select";
@@ -14,6 +21,13 @@ interface TermSelectProps {
 	disabled?: boolean;
 	className?: string;
 	domainId?: string;
+	dropdownStyle?: React.CSSProperties;
+	style?: React.CSSProperties;
+	open?: boolean;
+	showSearch?: boolean;
+	dropdownRender?: (
+		menu: ReactElement<any, string | JSXElementConstructor<any>>
+	) => ReactElement<any, string | JSXElementConstructor<any>>;
 }
 
 export default function TermSelect({
@@ -24,8 +38,13 @@ export default function TermSelect({
 	placeholder = "选择分类",
 	multiple = false,
 	taxonomyId,
+	open = undefined,
+	showSearch = true,
 	domainId,
+	dropdownStyle,
+	style,
 	disabled = false,
+	dropdownRender,
 }: TermSelectProps) {
 	const utils = api.useUtils();
 	const [listTreeData, setListTreeData] = useState<
@@ -150,16 +169,20 @@ export default function TermSelect({
 		<TreeSelect
 			treeDataSimpleMode
 			disabled={disabled}
-			showSearch
+			showSearch={showSearch}
 			allowClear
+			style={style}
 			// ref={selectRef}
 			dropdownStyle={{
 				width: "300px", // 固定宽度
 				minWidth: "200px", // 最小宽度
 				maxWidth: "600px", // 最大宽度
+				...dropdownStyle,
 			}}
+			dropdownRender={dropdownRender}
 			defaultValue={defaultValue}
 			value={value}
+			open={open}
 			className={className}
 			placeholder={placeholder}
 			onChange={handleChange}