diff --git a/apps/web/src/app/main/path/components/PathCard.tsx b/apps/web/src/app/main/path/components/PathCard.tsx index 8ccb01f..fa696bb 100755 --- a/apps/web/src/app/main/path/components/PathCard.tsx +++ b/apps/web/src/app/main/path/components/PathCard.tsx @@ -1,5 +1,6 @@ import { Card, Rate, Tag, Typography, Button } from "antd"; import { + EyeOutlined, PlayCircleOutlined, TeamOutlined, } from "@ant-design/icons"; @@ -13,14 +14,14 @@ export default function PathCard({ path }: pathCardProps) { const navigate = useNavigate(); const handleClick = (path: PostDto) => { navigate(`/path/editor/${path.id}`); - window.scrollTo({ top: 0, behavior: "smooth", }) + window.scrollTo({ top: 0, behavior: "smooth" }); }; return ( handleClick(path)} key={path.id} 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" cover={
@@ -34,27 +35,37 @@ export default function PathCard({ path }: pathCardProps) {
}>
-
- {path?.terms?.map((term) => { - return ( - 0 ? ( +
+ {path?.terms?.map((term) => { + return ( + - {term.name} - - ); - })} -
+ ? "blue" + : term?.taxonomy?.slug === + TaxonomySlug.LEVEL + ? "green" + : "orange" + } + className="px-3 py-1 rounded-full bg-blue-100 text-blue-600 border-0"> + {term.name} +
+ ); + })} +
+ ) : ( +
+ + {"未设置分类"} + +
+ )} <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"> - <Text className="font-medium text-blue-500 hover:text-blue-600 transition-colors duration-300 truncate max-w-[120px]"> - {path?.depts?.length > 1 - ? `${path.depts[0].name}等` - : path?.depts?.[0]?.name} - {/* {path?.depts?.map((dept) => {return dept.name.length > 1 ?`${dept.name.slice}等`: dept.name})} */} - {/* {path?.depts?.map((dept)=>{return dept.name})} */} - </Text> - </div> - <span className="text-xs font-medium text-gray-500"> + { + <div className=" gap-1 flex items-center flex-grow"> + <TeamOutlined className="text-blue-500 text-lg transform group-hover:scale-110 transition-transform duration-300" /> + {path?.depts && path?.depts?.length > 0 ? ( + <Text className="font-medium text-blue-500 hover:text-blue-600 transition-colors duration-300 truncate max-w-[120px]"> + {path?.depts?.length > 1 + ? `${path.depts[0].name}等` + : path?.depts?.[0]?.name} + {/* {path?.depts?.map((dept) => {return dept.name.length > 1 ?`${dept.name.slice}等`: dept.name})} */} + {/* {path?.depts?.map((dept)=>{return dept.name})} */} + </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}` - : null} + : 0} </span> </div> <div className="pt-4 border-t border-gray-100 text-center">