优化传承人卡片和资讯卡片组件样式

- 重构InheritorCard底部统计信息布局，采用网格布局提升视觉效果
- 优化统计项的交互状态，添加悬停动画效果
- 修复NewsCard高度布局问题，确保卡片内容对齐一致
- 统一组件间距和颜色规范，提升整体视觉一致性

src/components/InheritorCard/index.css

@@ -75,26 +75,49 @@
 }
 
 .inheritor-card-footer {
-  padding-top: 16px;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 8px;
+  margin-top: 12px;
+  padding-top: 12px;
   border-top: 1px solid #f0ebe3;
 }
 
-.stat-item {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 13px;
-  color: #999999;
+.inheritor-card .stat-item {
+  display: flex !important;
+  flex-direction: row !important;
+  align-items: center !important;
+  justify-content: center !important;
+  gap: 4px !important;
+  padding: 8px 6px !important;
+  background: #f5f0e8 !important;
+  border-radius: 6px !important;
+  white-space: nowrap !important;
+  transition: all 0.3s ease !important;
+  border: 1px solid #e8e3db !important;
+  min-height: 36px !important;
 }
 
-.stat-item .anticon {
-  font-size: 14px;
-  color: #d4a574;
+.inheritor-card .stat-item:hover {
+  background: #ffe7c8 !important;
+  border-color: #d4a574 !important;
+  transform: translateY(-1px) !important;
 }
 
-.stat-item .ant-typography {
-  color: #999999;
-  font-size: 13px;
+.inheritor-card .stat-item .anticon {
+  font-size: 14px !important;
+  color: #d4a574 !important;
+  flex-shrink: 0 !important;
+  margin: 0 !important;
+}
+
+.inheritor-card .stat-item .ant-typography {
+  color: #666666 !important;
+  font-size: 12px !important;
+  font-weight: 600 !important;
+  white-space: nowrap !important;
+  margin: 0 !important;
+  line-height: 1 !important;
 }
 
 /* 响应式 */

src/components/InheritorCard/index.tsx

@@ -3,7 +3,7 @@
  */
 
 import React from 'react'
-import { Card, Avatar, Tag, Space, Typography } from 'antd'
+import { Card, Avatar, Tag, Typography } from 'antd'
 import { UserOutlined, EyeOutlined, TeamOutlined } from '@ant-design/icons'
 import { Link } from 'react-router-dom'
 import type { Inheritor } from '@types/index'
@@ -50,16 +50,14 @@ const InheritorCard: React.FC<InheritorCardProps> = ({ item, hoverable = true })
         </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 className="stat-item">
+            <TeamOutlined />
+            <Text type="secondary">{item.followers.toLocaleString()}</Text>
+          </div>
+          <div className="stat-item">
+            <EyeOutlined />
+            <Text type="secondary">{item.viewCount.toLocaleString()}</Text>
+          </div>
         </div>
       </Card>
     </Link>

src/components/NewsCard/index.css

@@ -3,6 +3,7 @@
 .news-card-link {
   text-decoration: none;
   display: block;
+  height: 100%;
 }
 
 .news-card {
@@ -10,6 +11,8 @@
   overflow: hidden;
   transition: all 0.3s ease;
   height: 100%;
+  display: flex;
+  flex-direction: column;
 }
 
 .news-card:hover {
@@ -54,9 +57,19 @@
   padding: 4px 12px;
 }
 
+/* Ant Design Card Body 样式覆盖 */
+.news-card .ant-card-body {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
 /* 卡片内容 */
 .news-card-content {
-  padding: 4px 0 0 0;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
 }
 
 .news-card-title {
@@ -65,6 +78,7 @@
   color: #2c2c2c;
   margin-bottom: 8px;
   line-height: 1.5;
+  height: 48px;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
@@ -77,6 +91,7 @@
   color: #666666;
   margin-bottom: 12px;
   line-height: 1.5;
+  height: 20px;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 1;
@@ -89,12 +104,16 @@
   color: #666666;
   margin-bottom: 12px;
   line-height: 1.6;
+  height: 45px;
 }
 
 .news-card-meta {
   margin-bottom: 12px;
   padding-bottom: 12px;
   border-bottom: 1px solid #f0f0f0;
+  min-height: 44px;
+  display: flex;
+  align-items: center;
 }
 
 .meta-item {
@@ -102,10 +121,12 @@
   align-items: center;
   gap: 6px;
   font-size: 13px;
+  white-space: nowrap;
 }
 
 .meta-item .anticon {
   color: #999999;
+  flex-shrink: 0;
 }
 
 .news-card-tags {
@@ -113,6 +134,7 @@
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
+  min-height: 28px;
 }
 
 .news-tag {
@@ -126,17 +148,21 @@
   align-items: center;
   padding-top: 12px;
   border-top: 1px solid #f0f0f0;
+  margin-top: auto;
+  min-height: 40px;
 }
 
-.stat-item {
+.news-card-footer .stat-item {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   font-size: 13px;
+  white-space: nowrap;
 }
 
-.stat-item .anticon {
+.news-card-footer .stat-item .anticon {
   color: #999999;
+  flex-shrink: 0;
 }
 
 /* 响应式 */

src/components/NewsCard/index.tsx

@@ -51,9 +51,7 @@ const NewsCard: React.FC<NewsCardProps> = ({ item, hoverable = true }) => {
       >
         <div className="news-card-content">
           <h3 className="news-card-title">{item.title}</h3>
-          {item.subtitle && (
-            <p className="news-card-subtitle">{item.subtitle}</p>
-          )}
+          <p className="news-card-subtitle">{item.subtitle || '\u00A0'}</p>
 
           <Paragraph ellipsis={{ rows: 2 }} className="news-card-summary">
             {item.summary}