add.
This commit is contained in:
parent
2b134f5232
commit
47d5db3eb0
|
@ -0,0 +1,22 @@
|
||||||
|
import { TeamOutlined } from "@ant-design/icons";
|
||||||
|
import { Typography } from "antd";
|
||||||
|
|
||||||
|
const { Title, Text } = Typography;
|
||||||
|
const DeptInfo = ({ path }) => {
|
||||||
|
return (
|
||||||
|
<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}
|
||||||
|
</Text>
|
||||||
|
) : (
|
||||||
|
<Text className="font-medium text-blue-500 hover:text-blue-600 transition-colors duration-300 truncate max-w-[120px]">
|
||||||
|
未设置单位
|
||||||
|
</Text>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default DeptInfo;
|
|
@ -1,11 +1,11 @@
|
||||||
import { Card, Rate, Tag, Typography, Button } from "antd";
|
import { Card, Tag, Typography, Button } from "antd";
|
||||||
import {
|
import {
|
||||||
EyeOutlined,
|
EyeOutlined
|
||||||
PlayCircleOutlined,
|
|
||||||
TeamOutlined,
|
|
||||||
} from "@ant-design/icons";
|
} from "@ant-design/icons";
|
||||||
import { PostDto, TaxonomySlug } from "@nice/common";
|
import { PostDto, TaxonomySlug } from "@nice/common";
|
||||||
import { useNavigate } from "react-router-dom";
|
import { useNavigate } from "react-router-dom";
|
||||||
|
import DeptInfo from "./DeptInfo";
|
||||||
|
import TermInfo from "./TermInfo";
|
||||||
interface pathCardProps {
|
interface pathCardProps {
|
||||||
path: PostDto;
|
path: PostDto;
|
||||||
}
|
}
|
||||||
|
@ -21,8 +21,7 @@ export default function PathCard({ path }: pathCardProps) {
|
||||||
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">
|
||||||
<div
|
<div
|
||||||
|
@ -35,38 +34,7 @@ export default function PathCard({ path }: pathCardProps) {
|
||||||
</div>
|
</div>
|
||||||
}>
|
}>
|
||||||
<div className="px-4">
|
<div className="px-4">
|
||||||
{path?.terms && path?.terms?.length > 0 ? (
|
<TermInfo path={path} />
|
||||||
<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 border-0">
|
|
||||||
{term.name}
|
|
||||||
</Tag>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="flex gap-2 mb-4">
|
|
||||||
<Tag
|
|
||||||
color={"orange"}
|
|
||||||
className="px-3 py-1 rounded-full border-0">
|
|
||||||
{"未设置分类"}
|
|
||||||
</Tag>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<Title
|
<Title
|
||||||
level={4}
|
level={4}
|
||||||
className="mb-4 line-clamp-2 font-bold leading-snug text-gray-800 hover:text-blue-600 transition-colors duration-300 group-hover:scale-[1.02] transform origin-left">
|
className="mb-4 line-clamp-2 font-bold leading-snug text-gray-800 hover:text-blue-600 transition-colors duration-300 group-hover:scale-[1.02] transform origin-left">
|
||||||
|
@ -74,24 +42,7 @@ 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">
|
||||||
{
|
<DeptInfo path={path} />
|
||||||
<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">
|
<span className="flex text-xs font-medium text-gray-500">
|
||||||
<EyeOutlined className="mr-2"></EyeOutlined>
|
<EyeOutlined className="mr-2"></EyeOutlined>
|
||||||
{path?.meta?.views
|
{path?.meta?.views
|
||||||
|
|
|
@ -0,0 +1,41 @@
|
||||||
|
import { Tag } from "antd";
|
||||||
|
import { TaxonomySlug } from "@nice/common";
|
||||||
|
|
||||||
|
const TermInfo = ({ path }) => {
|
||||||
|
console.log('xx',path?.terms);
|
||||||
|
|
||||||
|
return <>
|
||||||
|
{path?.terms && path?.terms?.length > 0 ? (
|
||||||
|
<div className="flex gap-2 mb-4">
|
||||||
|
{path?.terms?.map((term:any) => {
|
||||||
|
return (
|
||||||
|
<Tag
|
||||||
|
key={term.id}
|
||||||
|
color={
|
||||||
|
term?.taxonomy?.slug ===
|
||||||
|
TaxonomySlug.CATEGORY
|
||||||
|
? "blue"
|
||||||
|
: term?.taxonomy?.slug ===
|
||||||
|
TaxonomySlug.LEVEL
|
||||||
|
? "green"
|
||||||
|
: "orange"
|
||||||
|
}
|
||||||
|
className="px-3 py-1 rounded-full border-0">
|
||||||
|
{term.name}
|
||||||
|
</Tag>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="flex gap-2 mb-4">
|
||||||
|
<Tag
|
||||||
|
color={"orange"}
|
||||||
|
className="px-3 py-1 rounded-full border-0">
|
||||||
|
{"未设置分类"}
|
||||||
|
</Tag>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
};
|
||||||
|
|
||||||
|
export default TermInfo;
|
Loading…
Reference in New Issue