linfeng
/
training_data
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add

This commit is contained in:
ditiqi 2025-02-27 09:47:35 +08:00
parent b50e1521f6
commit dc24523bf8
1 changed files with 54 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
apps/web/src/app/main/path/components/PathCard.tsx
View File

@ -1,5 +1,6 @@
import { Card, Rate, Tag, Typography, Button } from "antd"; import { Card, Rate, Tag, Typography, Button } from "antd";
import { import {
EyeOutlined,
PlayCircleOutlined, PlayCircleOutlined,
TeamOutlined, TeamOutlined,
} from "@ant-design/icons"; } from "@ant-design/icons";
@ -13,14 +14,14 @@ export default function PathCard({ path }: pathCardProps) {
const navigate = useNavigate(); const navigate = useNavigate();
const handleClick = (path: PostDto) => { const handleClick = (path: PostDto) => {
navigate(`/path/editor/${path.id}`); navigate(`/path/editor/${path.id}`);
window.scrollTo({ top: 0, behavior: "smooth", }) window.scrollTo({ top: 0, behavior: "smooth" });
}; };
return ( return (
<Card <Card
onClick={() => handleClick(path)} onClick={() => handleClick(path)}
key={path.id} key={path.id}
hoverable hoverable
className="group overflow-hidden rounded-xl border border-gray-200 bg-white className=" group overflow-hidden rounded-xl border border-gray-200 bg-white
shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2" shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2"
cover={ cover={
<div className="relative h-56 bg-gradient-to-br from-gray-900 to-gray-800 overflow-hidden"> <div className="relative h-56 bg-gradient-to-br from-gray-900 to-gray-800 overflow-hidden">
@ -34,27 +35,37 @@ export default function PathCard({ path }: pathCardProps) {
</div> </div>
}> }>
<div className="px-4"> <div className="px-4">
<div className="flex gap-2 mb-4"> {path?.terms && path?.terms?.length > 0 ? (
{path?.terms?.map((term) => { <div className="flex gap-2 mb-4">
return ( {path?.terms?.map((term) => {
<Tag return (
key={term.id} <Tag
// color={term.taxonomy.slug===TaxonomySlug.CATEGORY? "blue" : "green"} key={term.id}
color={ // color={term.taxonomy.slug===TaxonomySlug.CATEGORY? "blue" : "green"}
term?.taxonomy?.slug === color={
term?.taxonomy?.slug ===
TaxonomySlug.CATEGORY TaxonomySlug.CATEGORY
? "blue" ? "blue"
: term?.taxonomy?.slug === : term?.taxonomy?.slug ===
TaxonomySlug.LEVEL TaxonomySlug.LEVEL
? "green" ? "green"
: "orange" : "orange"
} }
className="px-3 py-1 rounded-full bg-blue-100 text-blue-600 border-0"> className="px-3 py-1 rounded-full bg-blue-100 text-blue-600 border-0">
{term.name} {term.name}
</Tag> </Tag>
); );
})} })}
</div> </div>
) : (
<div className="flex gap-2 mb-4">
<Tag
color={"orange"}
className="px-3 py-1 rounded-full bg-blue-100 text-blue-600 border-0">
{"未设置分类"}
</Tag>
</div>
)}
<Title <Title
level={4} level={4}
@ -63,20 +74,29 @@ export default function PathCard({ path }: pathCardProps) {
</Title> </Title>
<div className="flex items-center mb-4 p-2 rounded-lg transition-all duration-300 hover:bg-blue-50 group"> <div className="flex items-center mb-4 p-2 rounded-lg transition-all duration-300 hover:bg-blue-50 group">
<TeamOutlined className="text-blue-500 text-lg transform group-hover:scale-110 transition-transform duration-300" /> {
<div className="ml-2 flex items-center flex-grow"> <div className=" gap-1 flex items-center flex-grow">
<Text className="font-medium text-blue-500 hover:text-blue-600 transition-colors duration-300 truncate max-w-[120px]"> <TeamOutlined className="text-blue-500 text-lg transform group-hover:scale-110 transition-transform duration-300" />
{path?.depts?.length > 1 {path?.depts && path?.depts?.length > 0 ? (
? `${path.depts[0].name}等` <Text className="font-medium text-blue-500 hover:text-blue-600 transition-colors duration-300 truncate max-w-[120px]">
: path?.depts?.[0]?.name} {path?.depts?.length > 1
{/* {path?.depts?.map((dept) => {return dept.name.length > 1 ?`${dept.name.slice}等`: dept.name})} */} ? `${path.depts[0].name}等`
{/* {path?.depts?.map((dept)=>{return dept.name})} */} : path?.depts?.[0]?.name}
</Text> {/* {path?.depts?.map((dept) => {return dept.name.length > 1 ?`${dept.name.slice}等`: dept.name})} */}
</div> {/* {path?.depts?.map((dept)=>{return dept.name})} */}
<span className="text-xs font-medium text-gray-500"> </Text>
) : (
<Text className="font-medium text-blue-500 hover:text-blue-600 transition-colors duration-300 truncate max-w-[120px]">
未设置单位
</Text>
)}
</div>
}
<span className="flex text-xs font-medium text-gray-500">
<EyeOutlined className="mr-2"></EyeOutlined>
{path?.meta?.views {path?.meta?.views
? `观看次数 ${path?.meta?.views}` ? `观看次数 ${path?.meta?.views}`
: null} : 0}
</span> </span>
</div> </div>
<div className="pt-4 border-t border-gray-100 text-center"> <div className="pt-4 border-t border-gray-100 text-center">