This commit is contained in:
ditiqi 2025-02-28 12:55:53 +08:00
parent 3b497fed63
commit 83c9b80b20
5 changed files with 60 additions and 55 deletions

View File

@ -28,7 +28,7 @@ export default function FilterSection() {
</h3>
<TermParentSelector
value={items}
slug={tax?.slug}
// slug={tax?.slug}
className="w-70 max-h-[400px] overscroll-contain overflow-x-hidden"
onChange={(selected) =>
handleTermChange(

View File

@ -1,12 +1,12 @@
import { Tag } from "antd";
import { PostDto, TaxonomySlug } from "@nice/common";
import { PostDto, TaxonomySlug, TermDto } from "@nice/common";
const TermInfo = ({ post }: { post: PostDto }) => {
const TermInfo = ({ terms = [] }: { terms?: TermDto[] }) => {
return (
<div>
{post?.terms && post?.terms?.length > 0 ? (
{terms && terms?.length > 0 ? (
<div className="flex gap-2 mb-4">
{post?.terms?.map((term: any) => {
{terms?.map((term: any) => {
return (
<Tag
key={term.id}

View File

@ -70,7 +70,7 @@ export const CourseDetailDescription: React.FC = () => {
<div className="flex flex-col gap-2">
<div className="flex gap-2 flex-wrap items-center float-start">
{course?.subTitle && <div>{course?.subTitle}</div>}
<TermInfo post={course}></TermInfo>
<TermInfo terms={course.terms}></TermInfo>
</div>
</div>
<Paragraph

View File

@ -39,7 +39,7 @@ export default function PostCard({ post, onClick }: PostCardProps) {
<div className="px-4 ">
<div className="overflow-hidden hover:overflow-auto">
<div className="flex gap-2 h-7 whiteSpace-nowrap">
<TermInfo post={post}></TermInfo>
<TermInfo terms={post.terms}></TermInfo>
</div>
</div>
<Title
@ -65,4 +65,3 @@ export default function PostCard({ post, onClick }: PostCardProps) {
</Card>
);
}

View File

@ -1,50 +1,56 @@
import { api } from "@nice/client/";
import { Checkbox, Form } from "antd";
import { Checkbox, Skeleton } from "antd";
import { TermDto } from "@nice/common";
import { useCallback, useEffect, useState } from "react";
import React from "react";
export default function TermParentSelector({
value,
onChange,
className,
placeholder = "选择分类",
multiple = true,
taxonomyId,
domainId,
domainId = undefined,
style,
}: any) {
const [selectedValues, setSelectedValues] = useState<string[]>([]); // 用于存储选中的值
const {
data,
isLoading,
}: { data: TermDto[]; isLoading: boolean } = api.term.findMany.useQuery({
}: {
value?: string[];
onChange?: (value: string[]) => void;
className?: string;
taxonomyId: string;
domainId?: string;
style?: React.CSSProperties;
}) {
const { data, isLoading }: { data: TermDto[]; isLoading: boolean } =
api.term.findMany.useQuery({
where: {
taxonomy: {
id: taxonomyId,
},
parentId: null
taxonomyId: taxonomyId,
parentId: null,
domainId,
},
});
const handleCheckboxChange = (checkedValues: string[]) => {
setSelectedValues(checkedValues); // 更新选中的值
// setSelectedValues(checkedValues); // 更新选中的值
if (onChange) {
onChange(checkedValues); // 调用外部传入的 onChange 回调
}
};
return (
<div className={className} style={style}>
<Form onFinish={null}>
<Form.Item name="categories">
<Checkbox.Group onChange={handleCheckboxChange}>
{isLoading ? (
<Skeleton
paragraph={{
rows: 4,
}}></Skeleton>
) : (
<Checkbox.Group value={value} onChange={handleCheckboxChange}>
{data?.map((category) => (
<div className="w-full h-9 p-2 my-1">
<Checkbox checked={value?.includes(category.id)} className="text-base text-slate-700" key={category.id} value={category.id}>
<div className="w-full h-9 p-2 my-1" key={category.id}>
<Checkbox
className="text-base text-slate-700"
value={category.id}>
{category.name}
</Checkbox>
</div>
))}
</Checkbox.Group>
</Form.Item>
</Form>
)}
</div>
)
);
}