From 256f2ea6494e9a42d4fb36f4d468effa8305ba99 Mon Sep 17 00:00:00 2001
From: Leo <98382335+gaoziman@users.noreply.github.com>
Date: Thu, 9 Oct 2025 23:46:10 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=9F=BA=E7=A1=80=E5=85=AC?=
 =?UTF-8?q?=E5=85=B1=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 创建非遗项目卡片组件（HeritageCard）
- 创建传承人卡片组件（InheritorCard）
- 创建自定义分页组件（CustomPagination）
- 创建评论区组件（CommentSection）
---
 src/components/CommentSection/index.css   | 101 ++++++++
 src/components/CommentSection/index.tsx   | 172 +++++++++++++
 src/components/CustomPagination/index.css | 278 ++++++++++++++++++++++
 src/components/CustomPagination/index.tsx | 196 +++++++++++++++
 src/components/HeritageCard/index.css     | 153 ++++++++++++
 src/components/HeritageCard/index.tsx     |  90 +++++++
 src/components/InheritorCard/index.css    | 113 +++++++++
 src/components/InheritorCard/index.tsx    |  69 ++++++
 8 files changed, 1172 insertions(+)
 create mode 100644 src/components/CommentSection/index.css
 create mode 100644 src/components/CommentSection/index.tsx
 create mode 100644 src/components/CustomPagination/index.css
 create mode 100644 src/components/CustomPagination/index.tsx
 create mode 100644 src/components/HeritageCard/index.css
 create mode 100644 src/components/HeritageCard/index.tsx
 create mode 100644 src/components/InheritorCard/index.css
 create mode 100644 src/components/InheritorCard/index.tsx

diff --git a/src/components/CommentSection/index.css b/src/components/CommentSection/index.css
new file mode 100644
index 0000000..d03166e
--- /dev/null
+++ b/src/components/CommentSection/index.css
@@ -0,0 +1,101 @@
+/* 评论区组件样式 */
+
+.comment-section {
+  margin-top: 40px;
+  padding: 24px;
+  background: #ffffff;
+  border-radius: 12px;
+}
+
+.comment-header h3 {
+  font-size: 20px;
+  font-weight: 600;
+  margin-bottom: 24px;
+  color: #2c2c2c;
+}
+
+/* 评论编辑器 */
+.comment-editor {
+  margin-bottom: 32px;
+  padding: 20px;
+  background: #f5f0e8;
+  border-radius: 8px;
+}
+
+.comment-rating {
+  margin-bottom: 16px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.comment-rating span {
+  font-size: 14px;
+  color: #666666;
+}
+
+.comment-editor .ant-input {
+  margin-bottom: 12px;
+}
+
+.comment-actions {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.comment-login-tip {
+  padding: 40px 20px;
+  text-align: center;
+  background: #f5f0e8;
+  border-radius: 8px;
+  margin-bottom: 24px;
+}
+
+.comment-login-tip p {
+  color: #666666;
+  margin: 0;
+}
+
+/* 评论列表 */
+.comment-list .ant-list-item {
+  padding: 20px 0;
+  border-bottom: 1px solid #f0ebe3;
+}
+
+.comment-list .ant-list-item:last-child {
+  border-bottom: none;
+}
+
+.comment-title {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.comment-author {
+  font-size: 15px;
+  font-weight: 600;
+  color: #2c2c2c;
+}
+
+.comment-content p {
+  font-size: 14px;
+  color: #666666;
+  line-height: 1.8;
+  margin: 8px 0;
+}
+
+.comment-time {
+  font-size: 13px;
+  color: #999999;
+}
+
+.comment-action {
+  color: #999999;
+  cursor: pointer;
+  transition: color 0.3s ease;
+}
+
+.comment-action:hover {
+  color: #c8363d;
+}
diff --git a/src/components/CommentSection/index.tsx b/src/components/CommentSection/index.tsx
new file mode 100644
index 0000000..4cc3b8c
--- /dev/null
+++ b/src/components/CommentSection/index.tsx
@@ -0,0 +1,172 @@
+/**
+ * 评论区组件
+ */
+
+import React, { useState, useEffect } from 'react'
+import { List, Avatar, Rate, Button, Input, message, Empty } from 'antd'
+import { LikeOutlined, LikeFilled } from '@ant-design/icons'
+import dayjs from 'dayjs'
+import relativeTime from 'dayjs/plugin/relativeTime'
+import 'dayjs/locale/zh-cn'
+import type { Comment } from '@types/index'
+import { getCommentsByTarget, addComment } from '@services/api'
+import { useUserStore } from '@store/useUserStore'
+import './index.css'
+
+dayjs.extend(relativeTime)
+dayjs.locale('zh-cn')
+
+const { TextArea } = Input
+
+interface CommentSectionProps {
+  targetType: 'heritage' | 'inheritor' | 'course' | 'news'
+  targetId: string
+  showRating?: boolean
+}
+
+const CommentSection: React.FC<CommentSectionProps> = ({
+  targetType,
+  targetId,
+  showRating = false,
+}) => {
+  const [comments, setComments] = useState<Comment[]>([])
+  const [loading, setLoading] = useState(false)
+  const [submitting, setSubmitting] = useState(false)
+  const [content, setContent] = useState('')
+  const [rating, setRating] = useState(5)
+
+  const { user, isAuthenticated } = useUserStore()
+
+  useEffect(() => {
+    fetchComments()
+  }, [targetType, targetId])
+
+  const fetchComments = async () => {
+    setLoading(true)
+    try {
+      const data = await getCommentsByTarget(targetType, targetId)
+      setComments(data)
+    } catch (error) {
+      console.error('Failed to fetch comments:', error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleSubmit = async () => {
+    if (!isAuthenticated) {
+      message.warning('请先登录后再发表评论')
+      return
+    }
+
+    if (!content.trim()) {
+      message.warning('请输入评论内容')
+      return
+    }
+
+    setSubmitting(true)
+    try {
+      const newComment = await addComment({
+        userId: user!.id,
+        userName: user!.nickname,
+        userAvatar: user!.avatar,
+        targetType,
+        targetId,
+        content,
+        rating: showRating ? rating : undefined,
+        likeCount: 0,
+        replyCount: 0,
+      })
+
+      setComments([newComment, ...comments])
+      setContent('')
+      setRating(5)
+      message.success('评论发表成功')
+    } catch (error) {
+      message.error('评论发表失败')
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  return (
+    <div className="comment-section">
+      <div className="comment-header">
+        <h3>全部评论 ({comments.length})</h3>
+      </div>
+
+      {/* 评论输入框 */}
+      {isAuthenticated && (
+        <div className="comment-editor">
+          {showRating && (
+            <div className="comment-rating">
+              <span>评分：</span>
+              <Rate value={rating} onChange={setRating} />
+            </div>
+          )}
+          <TextArea
+            rows={4}
+            placeholder="写下你的评论..."
+            value={content}
+            onChange={(e) => setContent(e.target.value)}
+            maxLength={500}
+            showCount
+          />
+          <div className="comment-actions">
+            <Button type="primary" loading={submitting} onClick={handleSubmit}>
+              发表评论
+            </Button>
+          </div>
+        </div>
+      )}
+
+      {!isAuthenticated && (
+        <div className="comment-login-tip">
+          <p>请先登录后再发表评论</p>
+        </div>
+      )}
+
+      {/* 评论列表 */}
+      <List
+        className="comment-list"
+        loading={loading}
+        itemLayout="horizontal"
+        dataSource={comments}
+        locale={{
+          emptyText: <Empty description="暂无评论，快来发表第一条评论吧！" />,
+        }}
+        renderItem={(item) => (
+          <List.Item
+            actions={[
+              <span key="like" className="comment-action">
+                <LikeOutlined /> {item.likeCount}
+              </span>,
+            ]}
+          >
+            <List.Item.Meta
+              avatar={<Avatar src={item.userAvatar} size={40} />}
+              title={
+                <div className="comment-title">
+                  <span className="comment-author">{item.userName}</span>
+                  {item.rating && (
+                    <Rate disabled defaultValue={item.rating} style={{ fontSize: 14 }} />
+                  )}
+                </div>
+              }
+              description={
+                <div className="comment-content">
+                  <p>{item.content}</p>
+                  <span className="comment-time">
+                    {dayjs(item.createdAt).fromNow()}
+                  </span>
+                </div>
+              }
+            />
+          </List.Item>
+        )}
+      />
+    </div>
+  )
+}
+
+export default CommentSection
diff --git a/src/components/CustomPagination/index.css b/src/components/CustomPagination/index.css
new file mode 100644
index 0000000..3fcec84
--- /dev/null
+++ b/src/components/CustomPagination/index.css
@@ -0,0 +1,278 @@
+/* 非遗文化分页组件 - 参考 CoiPagination 设计 */
+
+.heritage-pagination-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  padding: 16px 0;
+  margin-top: 24px;
+  flex-wrap: wrap;
+  user-select: none;
+}
+
+/* ========== 信息展示区域 ========== */
+.pagination-info {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 15px;
+  color: #666666;
+  font-weight: 400;
+  white-space: nowrap;
+}
+
+.info-text {
+  color: #666666;
+  font-size: 15px;
+}
+
+.info-number {
+  color: #c8363d;
+  font-weight: 600;
+  font-size: 15px;
+}
+
+/* ========== 每页条数选择器 ========== */
+.pagination-size-select {
+  min-width: 120px;
+  display: flex;
+  align-items: center;
+}
+
+.pagination-size-select .ant-select-selector {
+  height: 32px !important;
+  border-radius: 6px !important;
+  border-color: #d9d9d9 !important;
+  font-size: 14px;
+  font-weight: 400;
+}
+
+.pagination-size-select .ant-select-selection-item {
+  line-height: 30px !important;
+  color: #333333;
+}
+
+.pagination-size-select:hover .ant-select-selector {
+  border-color: #c8363d !important;
+}
+
+.pagination-size-select.ant-select-focused .ant-select-selector {
+  border-color: #c8363d !important;
+  box-shadow: 0 0 0 2px rgba(200, 54, 61, 0.1) !important;
+}
+
+/* ========== 分页控制按钮区域 ========== */
+.pagination-controls {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+/* ========== 页码区域 ========== */
+.pagination-pager {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* 导航按钮（首页、上一页、下一页、尾页） */
+.pagination-nav-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 32px;
+  height: 32px;
+  padding: 0;
+  border: 1px solid #d9d9d9;
+  border-radius: 6px;
+  background: #ffffff;
+  color: #333333;
+  font-size: 16px;
+  font-weight: 400;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  outline: none;
+}
+
+.pagination-nav-btn:hover:not(:disabled) {
+  border-color: #c8363d;
+  color: #c8363d;
+  background: rgba(200, 54, 61, 0.08);
+}
+
+.pagination-nav-btn:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+  background: #ffffff;
+  color: #cccccc;
+  border-color: #d9d9d9;
+}
+
+/* 页码按钮容器 */
+.pagination-pages {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+/* 页码按钮 */
+.pagination-page-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 32px;
+  height: 32px;
+  padding: 0 8px;
+  border: 1px solid #d9d9d9;
+  border-radius: 6px;
+  background: #ffffff;
+  color: #333333;
+  font-size: 14px;
+  font-weight: 400;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  outline: none;
+}
+
+.pagination-page-btn:hover {
+  border-color: #c8363d;
+  color: #c8363d;
+  background: rgba(200, 54, 61, 0.08);
+}
+
+/* 当前激活页码 */
+.pagination-page-btn.active {
+  border-color: #c8363d !important;
+  background-color: #c8363d !important;
+  color: #ffffff !important;
+  font-weight: 700;
+}
+
+.pagination-page-btn.active:hover {
+  border-color: #b02f37 !important;
+  background-color: #b02f37 !important;
+  color: #ffffff !important;
+}
+
+/* 省略号 */
+.pagination-ellipsis {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 32px;
+  height: 32px;
+  color: #999999;
+  font-size: 14px;
+  font-weight: 400;
+  user-select: none;
+}
+
+/* ========== 快速跳转区域 ========== */
+.pagination-jump {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  white-space: nowrap;
+}
+
+.jump-text {
+  font-size: 14px;
+  color: #666666;
+  font-weight: 400;
+}
+
+.jump-input {
+  width: 60px;
+  height: 32px;
+  border: 1px solid #d9d9d9;
+  border-radius: 6px;
+  padding: 0 8px;
+  text-align: center;
+  font-size: 14px;
+  font-weight: 400;
+  color: #333333;
+  transition: all 0.2s ease;
+  outline: none;
+}
+
+.jump-input:hover {
+  border-color: #c8363d;
+}
+
+.jump-input:focus {
+  border-color: #c8363d;
+  box-shadow: 0 0 0 2px rgba(200, 54, 61, 0.1);
+}
+
+.jump-btn {
+  height: 32px;
+  padding: 0 16px;
+  border: 1px solid #d9d9d9;
+  border-radius: 6px;
+  background: #ffffff;
+  color: #333333;
+  font-size: 14px;
+  font-weight: 400;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  outline: none;
+}
+
+.jump-btn:hover {
+  border-color: #c8363d;
+  color: #c8363d;
+  background: rgba(200, 54, 61, 0.08);
+}
+
+.jump-btn:active {
+  transform: scale(0.98);
+}
+
+/* ========== 响应式设计 ========== */
+@media (max-width: 768px) {
+  .heritage-pagination-wrapper {
+    flex-direction: column;
+    gap: 16px;
+    padding: 12px 0;
+  }
+
+  .pagination-info {
+    width: 100%;
+    justify-content: center;
+    font-size: 13px;
+  }
+
+  .pagination-controls {
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .pagination-pager {
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+
+  .pagination-size-select {
+    min-width: 100px;
+  }
+
+  .pagination-nav-btn,
+  .pagination-page-btn {
+    min-width: 36px;
+    height: 36px;
+    font-size: 16px;
+  }
+}
+
+@media (max-width: 576px) {
+  .pagination-nav-btn,
+  .pagination-page-btn {
+    min-width: 32px;
+    height: 32px;
+  }
+
+  .jump-input {
+    width: 50px;
+  }
+}
diff --git a/src/components/CustomPagination/index.tsx b/src/components/CustomPagination/index.tsx
new file mode 100644
index 0000000..da5903c
--- /dev/null
+++ b/src/components/CustomPagination/index.tsx
@@ -0,0 +1,196 @@
+/**
+ * 自定义分页组件 - 完全自定义实现
+ * 参考现代分页设计，提供清晰的导航和信息展示
+ */
+
+import React, { useState, useEffect } from 'react'
+import { Select } from 'antd'
+import type { PaginationProps } from 'antd'
+import './index.css'
+
+interface CustomPaginationProps extends Omit<PaginationProps, 'onChange' | 'onShowSizeChange'> {
+  unit?: string // 单位，如 "项"、"位传承人"、"条"
+  onChange?: (page: number, pageSize: number) => void
+  onShowSizeChange?: (current: number, size: number) => void
+}
+
+const CustomPagination: React.FC<CustomPaginationProps> = ({
+  unit = '条',
+  current = 1,
+  total = 0,
+  pageSize = 12,
+  pageSizeOptions = ['12', '24', '36', '48'],
+  onChange,
+  onShowSizeChange,
+}) => {
+  const [jumpPage, setJumpPage] = useState<string>('')
+  const totalPages = Math.ceil(total / pageSize)
+  const startItem = (current - 1) * pageSize + 1
+  const endItem = Math.min(current * pageSize, total)
+
+  // 页码改变处理
+  const handlePageChange = (newPage: number) => {
+    if (newPage < 1 || newPage > totalPages || newPage === current) return
+    onChange?.(newPage, pageSize)
+  }
+
+  // 每页条数改变处理
+  const handleSizeChange = (newSize: number) => {
+    onShowSizeChange?.(1, newSize)
+    onChange?.(1, newSize)
+  }
+
+  // 跳转到指定页
+  const handleJump = () => {
+    const pageNum = parseInt(jumpPage)
+    if (!isNaN(pageNum) && pageNum >= 1 && pageNum <= totalPages) {
+      handlePageChange(pageNum)
+      setJumpPage('')
+    }
+  }
+
+  // 生成页码按钮
+  const renderPageNumbers = () => {
+    const pages: (number | string)[] = []
+    const showPages = 5 // 显示的页码数量
+
+    if (totalPages <= showPages + 2) {
+      // 总页数较少，显示全部
+      for (let i = 1; i <= totalPages; i++) {
+        pages.push(i)
+      }
+    } else {
+      // 总页数较多，显示部分
+      pages.push(1)
+
+      if (current > 3) {
+        pages.push('...')
+      }
+
+      const start = Math.max(2, current - 1)
+      const end = Math.min(totalPages - 1, current + 1)
+
+      for (let i = start; i <= end; i++) {
+        pages.push(i)
+      }
+
+      if (current < totalPages - 2) {
+        pages.push('...')
+      }
+
+      pages.push(totalPages)
+    }
+
+    return pages.map((page, index) => {
+      if (page === '...') {
+        return (
+          <span key={`ellipsis-${index}`} className="pagination-ellipsis">
+            ...
+          </span>
+        )
+      }
+
+      return (
+        <button
+          key={page}
+          className={`pagination-page-btn ${page === current ? 'active' : ''}`}
+          onClick={() => handlePageChange(page as number)}
+        >
+          {page}
+        </button>
+      )
+    })
+  }
+
+  if (total === 0) return null
+
+  return (
+    <div className="heritage-pagination-wrapper">
+      <div className="pagination-info">
+        <span className="info-text">
+          共 <span className="info-number">{total}</span> {unit}
+        </span>
+        <span className="info-text">
+          当前第 {startItem}-{endItem} {unit}
+        </span>
+        <span className="info-text">每页</span>
+      </div>
+
+      <Select
+        value={pageSize}
+        onChange={handleSizeChange}
+        className="pagination-size-select"
+        options={pageSizeOptions.map((size) => ({
+          label: `${size} ${unit}/页`,
+          value: Number(size),
+        }))}
+      />
+
+      <div className="pagination-controls">
+        <div className="pagination-pager">
+          {/* 首页 */}
+          <button
+            className="pagination-nav-btn"
+            disabled={current === 1}
+            onClick={() => handlePageChange(1)}
+            title="首页"
+          >
+            &#171;
+          </button>
+
+          {/* 上一页 */}
+          <button
+            className="pagination-nav-btn"
+            disabled={current === 1}
+            onClick={() => handlePageChange(current - 1)}
+            title="上一页"
+          >
+            &#8249;
+          </button>
+
+          {/* 页码 */}
+          <div className="pagination-pages">{renderPageNumbers()}</div>
+
+          {/* 下一页 */}
+          <button
+            className="pagination-nav-btn"
+            disabled={current === totalPages}
+            onClick={() => handlePageChange(current + 1)}
+            title="下一页"
+          >
+            &#8250;
+          </button>
+
+          {/* 尾页 */}
+          <button
+            className="pagination-nav-btn"
+            disabled={current === totalPages}
+            onClick={() => handlePageChange(totalPages)}
+            title="尾页"
+          >
+            &#187;
+          </button>
+        </div>
+      </div>
+
+      {/* 快速跳转 */}
+      <div className="pagination-jump">
+        <span className="jump-text">跳至</span>
+        <input
+          type="text"
+          value={jumpPage}
+          onChange={(e) => setJumpPage(e.target.value.replace(/\D/g, ''))}
+          onKeyDown={(e) => e.key === 'Enter' && handleJump()}
+          className="jump-input"
+          placeholder=""
+        />
+        <span className="jump-text">页</span>
+        <button className="jump-btn" onClick={handleJump}>
+          确定
+        </button>
+      </div>
+    </div>
+  )
+}
+
+export default CustomPagination
diff --git a/src/components/HeritageCard/index.css b/src/components/HeritageCard/index.css
new file mode 100644
index 0000000..8173a0d
--- /dev/null
+++ b/src/components/HeritageCard/index.css
@@ -0,0 +1,153 @@
+/* 非遗项目卡片样式 */
+
+.heritage-card-link {
+  text-decoration: none;
+  display: block;
+  height: 100%;
+}
+
+.heritage-card {
+  height: 100%;
+  border-radius: 12px;
+  overflow: hidden;
+  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  border: 1px solid #e8e3db;
+}
+
+.heritage-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+  border-color: #c8363d;
+}
+
+.heritage-card .ant-card-body {
+  padding: 20px;
+}
+
+.heritage-card-cover {
+  position: relative;
+  width: 100%;
+  padding-top: 66.67%; /* 3:2 比例 */
+  overflow: hidden;
+  background-color: #f5f0e8;
+}
+
+.heritage-card-cover img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.5s ease;
+}
+
+.heritage-card:hover .heritage-card-cover img {
+  transform: scale(1.08);
+}
+
+.heritage-card-overlay {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+}
+
+.level-tag {
+  border: none;
+  font-size: 12px;
+  font-weight: 600;
+  padding: 4px 12px;
+  border-radius: 20px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+
+.heritage-card-content {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.heritage-card-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #2c2c2c;
+  margin: 0;
+  line-height: 1.4;
+  font-family: 'Noto Serif SC', 'Songti SC', serif;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.heritage-card-location {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: #999999;
+  font-size: 13px;
+}
+
+.heritage-card-location .anticon {
+  font-size: 14px;
+  color: #d4a574;
+}
+
+.heritage-card-description {
+  margin: 0 !important;
+  font-size: 13px;
+  color: #666666;
+  line-height: 1.6;
+}
+
+.heritage-card-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.heritage-tag {
+  background-color: #f5f0e8;
+  color: #666666;
+  border: none;
+  font-size: 12px;
+  padding: 2px 8px;
+  border-radius: 4px;
+}
+
+.heritage-card-footer {
+  padding-top: 12px;
+  border-top: 1px solid #f0ebe3;
+}
+
+.stat-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  color: #999999;
+}
+
+.stat-item .anticon {
+  font-size: 14px;
+}
+
+.stat-item .ant-typography {
+  color: #999999;
+  font-size: 13px;
+}
+
+/* 响应式 */
+@media (max-width: 768px) {
+  .heritage-card .ant-card-body {
+    padding: 16px;
+  }
+
+  .heritage-card-title {
+    font-size: 15px;
+  }
+
+  .heritage-card-description {
+    font-size: 12px;
+  }
+}
diff --git a/src/components/HeritageCard/index.tsx b/src/components/HeritageCard/index.tsx
new file mode 100644
index 0000000..6d4bf2c
--- /dev/null
+++ b/src/components/HeritageCard/index.tsx
@@ -0,0 +1,90 @@
+/**
+ * 非遗项目卡片组件
+ */
+
+import React from 'react'
+import { Card, Tag, Space, Typography } from 'antd'
+import { EyeOutlined, HeartOutlined, EnvironmentOutlined } from '@ant-design/icons'
+import { Link } from 'react-router-dom'
+import type { HeritageItem } from '@types/index'
+import './index.css'
+
+const { Text, Paragraph } = Typography
+
+interface HeritageCardProps {
+  item: HeritageItem
+  hoverable?: boolean
+}
+
+const levelLabels: Record<string, string> = {
+  world: '世界级',
+  national: '国家级',
+  provincial: '省级',
+  municipal: '市级',
+  county: '县级',
+}
+
+const levelColors: Record<string, string> = {
+  world: 'gold',
+  national: 'red',
+  provincial: 'blue',
+  municipal: 'green',
+  county: 'default',
+}
+
+const HeritageCard: React.FC<HeritageCardProps> = ({ item, hoverable = true }) => {
+  return (
+    <Link to={`/heritage/${item.id}`} className="heritage-card-link">
+      <Card
+        hoverable={hoverable}
+        cover={
+          <div className="heritage-card-cover">
+            <img alt={item.name} src={item.coverImage} />
+            <div className="heritage-card-overlay">
+              <Tag color={levelColors[item.level]} className="level-tag">
+                {levelLabels[item.level]}
+              </Tag>
+            </div>
+          </div>
+        }
+        className="heritage-card"
+      >
+        <div className="heritage-card-content">
+          <h3 className="heritage-card-title">{item.name}</h3>
+
+          <div className="heritage-card-location">
+            <EnvironmentOutlined />
+            <Text type="secondary">{item.province}</Text>
+          </div>
+
+          <Paragraph ellipsis={{ rows: 2 }} className="heritage-card-description">
+            {item.description}
+          </Paragraph>
+
+          <div className="heritage-card-tags">
+            {item.tags.slice(0, 3).map((tag) => (
+              <Tag key={tag} className="heritage-tag">
+                {tag}
+              </Tag>
+            ))}
+          </div>
+
+          <div className="heritage-card-footer">
+            <Space size="large">
+              <span className="stat-item">
+                <EyeOutlined />
+                <Text type="secondary">{item.viewCount.toLocaleString()}</Text>
+              </span>
+              <span className="stat-item">
+                <HeartOutlined />
+                <Text type="secondary">{item.likeCount.toLocaleString()}</Text>
+              </span>
+            </Space>
+          </div>
+        </div>
+      </Card>
+    </Link>
+  )
+}
+
+export default HeritageCard
diff --git a/src/components/InheritorCard/index.css b/src/components/InheritorCard/index.css
new file mode 100644
index 0000000..4c852c2
--- /dev/null
+++ b/src/components/InheritorCard/index.css
@@ -0,0 +1,113 @@
+/* 传承人卡片样式 */
+
+.inheritor-card-link {
+  text-decoration: none;
+  display: block;
+  height: 100%;
+}
+
+.inheritor-card {
+  height: 100%;
+  border-radius: 12px;
+  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  border: 1px solid #e8e3db;
+}
+
+.inheritor-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+  border-color: #c8363d;
+}
+
+.inheritor-card .ant-card-body {
+  padding: 24px;
+}
+
+.inheritor-card-header {
+  display: flex;
+  gap: 16px;
+  margin-bottom: 16px;
+}
+
+.inheritor-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  justify-content: center;
+}
+
+.inheritor-name {
+  font-size: 18px;
+  font-weight: 600;
+  color: #2c2c2c;
+  margin: 0;
+  font-family: 'Noto Serif SC', 'Songti SC', serif;
+}
+
+.inheritor-level {
+  align-self: flex-start;
+  border: none;
+  font-size: 12px;
+  font-weight: 600;
+  padding: 2px 10px;
+  border-radius: 4px;
+}
+
+.inheritor-age {
+  font-size: 13px;
+  color: #999999;
+}
+
+.inheritor-bio {
+  margin: 0 0 8px 0 !important;
+  font-size: 14px;
+  color: #666666;
+  line-height: 1.6;
+  font-weight: 500;
+}
+
+.inheritor-skills {
+  margin: 0 0 16px 0 !important;
+  font-size: 13px;
+  color: #999999;
+  line-height: 1.6;
+}
+
+.inheritor-card-footer {
+  padding-top: 16px;
+  border-top: 1px solid #f0ebe3;
+}
+
+.stat-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  color: #999999;
+}
+
+.stat-item .anticon {
+  font-size: 14px;
+  color: #d4a574;
+}
+
+.stat-item .ant-typography {
+  color: #999999;
+  font-size: 13px;
+}
+
+/* 响应式 */
+@media (max-width: 768px) {
+  .inheritor-card .ant-card-body {
+    padding: 20px;
+  }
+
+  .inheritor-card-header {
+    gap: 12px;
+  }
+
+  .inheritor-name {
+    font-size: 16px;
+  }
+}
diff --git a/src/components/InheritorCard/index.tsx b/src/components/InheritorCard/index.tsx
new file mode 100644
index 0000000..2c4bafc
--- /dev/null
+++ b/src/components/InheritorCard/index.tsx
@@ -0,0 +1,69 @@
+/**
+ * 传承人卡片组件
+ */
+
+import React from 'react'
+import { Card, Avatar, Tag, Space, Typography } from 'antd'
+import { UserOutlined, EyeOutlined, TeamOutlined } from '@ant-design/icons'
+import { Link } from 'react-router-dom'
+import type { Inheritor } from '@types/index'
+import './index.css'
+
+const { Text, Paragraph } = Typography
+
+interface InheritorCardProps {
+  item: Inheritor
+  hoverable?: boolean
+}
+
+const levelLabels: Record<string, string> = {
+  national: '国家级',
+  provincial: '省级',
+  municipal: '市级',
+}
+
+const InheritorCard: React.FC<InheritorCardProps> = ({ item, hoverable = true }) => {
+  const age = new Date().getFullYear() - item.birthYear
+
+  return (
+    <Link to={`/inheritor/${item.id}`} className="inheritor-card-link">
+      <Card hoverable={hoverable} className="inheritor-card">
+        <div className="inheritor-card-header">
+          <Avatar size={80} src={item.avatar} icon={<UserOutlined />} />
+          <div className="inheritor-info">
+            <h3 className="inheritor-name">{item.name}</h3>
+            <Tag color="red" className="inheritor-level">
+              {levelLabels[item.level]}传承人
+            </Tag>
+            <Text type="secondary" className="inheritor-age">
+              {age}岁 · {item.province}
+            </Text>
+          </div>
+        </div>
+
+        <Paragraph ellipsis={{ rows: 2 }} className="inheritor-bio">
+          {item.title}
+        </Paragraph>
+
+        <Paragraph ellipsis={{ rows: 2 }} className="inheritor-skills">
+          {item.masterSkills}
+        </Paragraph>
+
+        <div className="inheritor-card-footer">
+          <Space size="large">
+            <span className="stat-item">
+              <TeamOutlined />
+              <Text type="secondary">{item.followers.toLocaleString()}</Text>
+            </span>
+            <span className="stat-item">
+              <EyeOutlined />
+              <Text type="secondary">{item.viewCount.toLocaleString()}</Text>
+            </span>
+          </Space>
+        </div>
+      </Card>
+    </Link>
+  )
+}
+
+export default InheritorCard