liaohui
/
book_manage
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 {
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 (
<Card
onClick={() => 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={
<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 className="px-4">
<div className="flex gap-2 mb-4">
{path?.terms?.map((term) => {
return (
<Tag
key={term.id}
// color={term.taxonomy.slug===TaxonomySlug.CATEGORY? "blue" : "green"}
color={
term?.taxonomy?.slug ===
{path?.terms && path?.terms?.length > 0 ? (
<div className="flex gap-2 mb-4">
{path?.terms?.map((term) => {
return (
<Tag
key={term.id}
// color={term.taxonomy.slug===TaxonomySlug.CATEGORY? "blue" : "green"}
color={
term?.taxonomy?.slug ===
TaxonomySlug.CATEGORY
? "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}
</Tag>
);
})}
</div>
? "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}
</Tag>
);
})}
</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
level={4}
@ -63,20 +74,29 @@ export default function PathCard({ path }: pathCardProps) {
</Title>
<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">