This commit is contained in:
ditiqi 2025-02-25 19:09:21 +08:00
parent b3f3193a8b
commit a49b4af1a8
4 changed files with 23 additions and 66 deletions

View File

@ -1,5 +1,4 @@
import { Card, Rate, Tag, Typography, Button } from "antd"; import { Card, Rate, Tag, Typography, Button } from "antd";
import { Course } from "../mockData";
import { import {
UserOutlined, UserOutlined,
ClockCircleOutlined, ClockCircleOutlined,
@ -19,7 +18,6 @@ export default function CourseCard({ course }: CourseCardProps) {
navigate(`/course/${course.id}/detail`); navigate(`/course/${course.id}/detail`);
}; };
return ( return (
<Card <Card
onClick={() => handleClick(course)} onClick={() => handleClick(course)}
@ -41,21 +39,25 @@ export default function CourseCard({ course }: CourseCardProps) {
}> }>
<div className="px-4"> <div className="px-4">
<div className="flex gap-2 mb-4"> <div className="flex gap-2 mb-4">
{course.terms.map((term) => { {course.terms.map((term) => {
return ( return (
<Tag <Tag
key={term.id} key={term.id}
// color={term.taxonomy.slug===TaxonomySlug.CATEGORY? "blue" : "green"} // color={term.taxonomy.slug===TaxonomySlug.CATEGORY? "blue" : "green"}
color={term?.taxonomy?.slug === TaxonomySlug.CATEGORY color={
? "blue" term?.taxonomy?.slug ===
: term?.taxonomy?.slug === TaxonomySlug.LEVEL TaxonomySlug.CATEGORY
? "green" ? "blue"
: "blue"} : term?.taxonomy?.slug ===
className="px-3 py-1 rounded-full bg-blue-100 text-blue-600 border-0"> TaxonomySlug.LEVEL
{term.name} ? "green"
</Tag> : "blue"
); }
})} className="px-3 py-1 rounded-full bg-blue-100 text-blue-600 border-0">
{term.name}
</Tag>
);
})}
{/* <Tag {/* <Tag
color="blue" color="blue"
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">
@ -85,8 +87,8 @@ export default function CourseCard({ course }: CourseCardProps) {
<TeamOutlined className="text-blue-500 text-lg transform group-hover:scale-110 transition-transform duration-300" /> <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="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]"> <Text className="font-medium text-blue-500 hover:text-blue-600 transition-colors duration-300 truncate max-w-[120px]">
{(course.depts.map((depts)=>depts.name))} {course.depts.map((depts) => depts.name)}
{/* {course?.depts?.[0]?.name} */} {/* {course?.depts?.[0]?.name} */}
</Text> </Text>
</div> </div>
<span className="text-xs font-medium text-gray-500"> <span className="text-xs font-medium text-gray-500">

View File

@ -1,5 +1,5 @@
import { Checkbox, Divider, Radio, Space, Spin } from "antd"; import { Checkbox, Divider, Radio, Space, Spin } from "antd";
import { categories, levels } from "../mockData";
import { TaxonomySlug, TermDto } from "@nice/common"; import { TaxonomySlug, TermDto } from "@nice/common";
import { useEffect, useMemo } from "react"; import { useEffect, useMemo } from "react";

View File

@ -1,44 +0,0 @@
export interface Course {
id: string;
title: string;
description: string;
instructor: string;
price: number;
originalPrice: number;
category: string;
level: string;
thumbnail: string;
rating: number;
enrollments: number;
duration: string;
}
export const categories = [
"计算机科学",
"数据科学",
"商业管理",
"人工智能",
"软件开发",
"网络安全",
"云计算",
"前端开发",
"后端开发",
"移动开发"
];
export const levels = ["入门", "初级", "中级", "高级"];
export const mockCourses: Course[] = Array.from({ length: 50 }, (_, i) => ({
id: `course-${i + 1}`,
title: `${categories[i % categories.length]}课程 ${i + 1}`,
description: "本课程将带你深入了解该领域的核心概念和实践应用,通过实战项目提升你的专业技能。",
instructor: `讲师 ${i + 1}`,
price: Math.floor(Math.random() * 500 + 99),
originalPrice: Math.floor(Math.random() * 1000 + 299),
category: categories[i % categories.length],
level: levels[i % levels.length],
thumbnail: `/api/placeholder/280/160`,
rating: Number((Math.random() * 2 + 3).toFixed(1)),
enrollments: Math.floor(Math.random() * 10000),
duration: `${Math.floor(Math.random() * 20 + 10)}小时`
}));

View File

@ -1,5 +1,4 @@
import { useState, useMemo, useEffect } from "react"; import { useState, useMemo, useEffect } from "react";
import { mockCourses } from "./mockData";
import FilterSection from "./components/FilterSection"; import FilterSection from "./components/FilterSection";
import CourseList from "./components/CourseList"; import CourseList from "./components/CourseList";
import { api } from "@nice/client"; import { api } from "@nice/client";