feat: 优化公共组件和布局样式

- 优化Header导航栏用户名显示样式 - 完善CommentSection评论区样式 - 改进EventCard和NewsCard卡片组件 - 提升整体视觉效果和用户体验
2025-10-13 21:45:36 +08:00 · 2025-10-13 21:45:36 +08:00 · bb802337ae
commit bb802337ae
parent ffd849b87c
4 changed files with 113 additions and 75 deletions
--- a/src/components/CommentSection/index.css
+++ b/src/components/CommentSection/index.css
@ -17,9 +17,9 @@
 /* 评论编辑器 */
 .comment-editor {
  margin-bottom: 32px;
-  padding: 20px;
+  padding: 24px;
  background: #f5f0e8;
-  border-radius: 8px;
+  border-radius: 12px;
 }

 .comment-rating {
@ -34,13 +34,31 @@
  color: #666666;
 }

-.comment-editor .ant-input {
-  margin-bottom: 12px;
+.comment-editor .ant-input-textarea {
+  border-radius: 8px;
 }

 .comment-actions {
  display: flex;
  justify-content: flex-end;
+  gap: 12px;
+  margin-top: 20px;
+}
+
+.comment-actions .ant-btn {
+  min-width: 120px;
+  height: 40px;
+  font-size: 15px;
+  border-radius: 8px;
+  background: linear-gradient(135deg, #c8363d 0%, #d4a574 100%);
+  border: none;
+  font-weight: 500;
+}
+
+.comment-actions .ant-btn:hover {
+  background: linear-gradient(135deg, #b3303a 0%, #c19666 100%);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(200, 54, 61, 0.3);
 }

 .comment-login-tip {
--- a/src/components/EventCard/index.tsx
+++ b/src/components/EventCard/index.tsx
@ -9,35 +9,20 @@ import {
  CalendarOutlined,
  ClockCircleOutlined,
  UserOutlined,
-  DollarOutlined,
+  EyeOutlined,
 } from '@ant-design/icons'
 import { Link } from 'react-router-dom'
-import type { Event } from '@/types'
+import dayjs from 'dayjs'
+import type { EventListItem } from '@/types'
 import './index.css'

 const { Text, Paragraph } = Typography

 interface EventCardProps {
-  item: Event
+  item: EventListItem
  hoverable?: boolean
 }

-const typeLabels: Record<string, string> = {
-  exhibition: '展览',
-  workshop: '工作坊',
-  performance: '演出',
-  lecture: '讲座',
-  festival: '节日',
-}
-
-const typeColors: Record<string, string> = {
-  exhibition: 'purple',
-  workshop: 'blue',
-  performance: 'red',
-  lecture: 'green',
-  festival: 'orange',
-}
-
 const statusLabels: Record<string, string> = {
  upcoming: '即将开始',
  ongoing: '进行中',
@ -53,6 +38,11 @@ const statusColors: Record<string, string> = {
 }

 const EventCard: React.FC<EventCardProps> = ({ item, hoverable = true }) => {
+  // 格式化开始和结束时间
+  const startDate = dayjs(item.startTime)
+  const endDate = dayjs(item.endTime)
+  const isSameDay = startDate.format('YYYY-MM-DD') === endDate.format('YYYY-MM-DD')
+
  return (
    <Link to={`/events/${item.id}`} className="event-card-link">
      <Badge.Ribbon
@ -63,12 +53,7 @@ const EventCard: React.FC<EventCardProps> = ({ item, hoverable = true }) => {
          hoverable={hoverable}
          cover={
            <div className="event-card-cover">
-              <img alt={item.title} src={item.cover} />
-              <div className="event-card-overlay">
-                <Tag color={typeColors[item.type]} className="type-tag">
-                  {typeLabels[item.type]}
-                </Tag>
-              </div>
+              <img alt={item.title} src={item.coverImage} />
            </div>
          }
          className="event-card"
@ -77,7 +62,7 @@ const EventCard: React.FC<EventCardProps> = ({ item, hoverable = true }) => {
            <h3 className="event-card-title">{item.title}</h3>

            <Paragraph ellipsis={{ rows: 2 }} className="event-card-description">
-              {item.description}
+              {item.summary}
            </Paragraph>

            <div className="event-card-info">
@ -88,20 +73,14 @@ const EventCard: React.FC<EventCardProps> = ({ item, hoverable = true }) => {
              <div className="info-item">
                <CalendarOutlined />
                <Text type="secondary">
-                  {item.startDate}
-                  {item.startDate !== item.endDate && ` ~ ${item.endDate}`}
+                  {startDate.format('YYYY-MM-DD')}
+                  {!isSameDay && ` ~ ${endDate.format('YYYY-MM-DD')}`}
                </Text>
              </div>
-              {item.startTime && (
-                <div className="info-item">
-                  <ClockCircleOutlined />
-                  <Text type="secondary">{item.startTime} - {item.endTime}</Text>
-                </div>
-              )}
              <div className="info-item">
-                <DollarOutlined />
-                <Text type="secondary" className={item.isFree ? 'free-tag' : ''}>
-                  {item.isFree ? '免费' : `¥${item.price}`}
+                <ClockCircleOutlined />
+                <Text type="secondary">
+                  {startDate.format('HH:mm')} - {endDate.format('HH:mm')}
                </Text>
              </div>
            </div>
@ -111,11 +90,15 @@ const EventCard: React.FC<EventCardProps> = ({ item, hoverable = true }) => {
                <span className="stat-item">
                  <UserOutlined />
                  <Text type="secondary">
-                    {item.enrolled}/{item.capacity || 0}
+                    {item.currentParticipants}/{item.maxParticipants}
                  </Text>
                </span>
+                <span className="stat-item">
+                  <EyeOutlined />
+                  <Text type="secondary">{item.viewCount.toLocaleString()}</Text>
+                </span>
                <span className="enrollment-status">
-                  {item.capacity && item.enrolled >= item.capacity ? (
+                  {item.currentParticipants >= item.maxParticipants ? (
                    <Tag color="red">已满</Tag>
                  ) : (
                    <Tag color="green">可报名</Tag>
--- a/src/components/NewsCard/index.tsx
+++ b/src/components/NewsCard/index.tsx
@ -4,45 +4,46 @@

 import React from 'react'
 import { Card, Tag, Space, Typography } from 'antd'
-import { EyeOutlined, HeartOutlined, CalendarOutlined, UserOutlined } from '@ant-design/icons'
+import { EyeOutlined, LikeOutlined, CalendarOutlined, UserOutlined } from '@ant-design/icons'
 import { Link } from 'react-router-dom'
-import type { NewsArticle } from '@/types'
+import dayjs from 'dayjs'
+import type { NewsListItem } from '@/types'
 import './index.css'

 const { Text, Paragraph } = Typography

 interface NewsCardProps {
-  item: NewsArticle
+  item: NewsListItem
  hoverable?: boolean
 }

+// 后端分类映射：news、activity、notice
 const categoryLabels: Record<string, string> = {
-  exhibition: '展览',
+  news: '新闻',
  activity: '活动',
-  policy: '政策',
-  research: '研究',
-  story: '故事',
+  notice: '通知',
 }

 const categoryColors: Record<string, string> = {
-  exhibition: 'purple',
-  activity: 'blue',
-  policy: 'red',
-  research: 'green',
-  story: 'orange',
+  news: 'blue',
+  activity: 'green',
+  notice: 'red',
 }

 const NewsCard: React.FC<NewsCardProps> = ({ item, hoverable = true }) => {
+  // 处理 tags 字符串，转换为数组
+  const tagArray = item.tags ? item.tags.split(',').filter(tag => tag.trim()) : []
+
  return (
    <Link to={`/news/${item.id}`} className="news-card-link">
      <Card
        hoverable={hoverable}
        cover={
          <div className="news-card-cover">
-            <img alt={item.title} src={item.cover} />
+            <img alt={item.title} src={item.coverImage} />
            <div className="news-card-overlay">
              <Tag color={categoryColors[item.category]} className="category-tag">
-                {categoryLabels[item.category]}
+                {categoryLabels[item.category] || item.category}
              </Tag>
            </div>
          </div>
@ -51,7 +52,6 @@ const NewsCard: React.FC<NewsCardProps> = ({ item, hoverable = true }) => {
      >
        <div className="news-card-content">
          <h3 className="news-card-title">{item.title}</h3>
-          <p className="news-card-subtitle">{item.subtitle || '\u00A0'}</p>

          <Paragraph ellipsis={{ rows: 2 }} className="news-card-summary">
            {item.summary}
@ -65,18 +65,20 @@ const NewsCard: React.FC<NewsCardProps> = ({ item, hoverable = true }) => {
              </span>
              <span className="meta-item">
                <CalendarOutlined />
-                <Text type="secondary">{item.publishDate}</Text>
+                <Text type="secondary">{dayjs(item.publishTime).format('YYYY-MM-DD')}</Text>
              </span>
            </Space>
          </div>

-          <div className="news-card-tags">
-            {item.tags.slice(0, 3).map((tag) => (
-              <Tag key={tag} className="news-tag">
-                {tag}
-              </Tag>
-            ))}
-          </div>
+          {tagArray.length > 0 && (
+            <div className="news-card-tags">
+              {tagArray.slice(0, 3).map((tag, index) => (
+                <Tag key={`${tag}-${index}`} className="news-tag">
+                  {tag}
+                </Tag>
+              ))}
+            </div>
+          )}

          <div className="news-card-footer">
            <Space size="large">
@ -85,7 +87,7 @@ const NewsCard: React.FC<NewsCardProps> = ({ item, hoverable = true }) => {
                <Text type="secondary">{item.viewCount.toLocaleString()}</Text>
              </span>
              <span className="stat-item">
-                <HeartOutlined />
+                <LikeOutlined />
                <Text type="secondary">{item.likeCount.toLocaleString()}</Text>
              </span>
            </Space>
--- a/src/layout/Header.css
+++ b/src/layout/Header.css
@ -126,23 +126,36 @@
 }

 .user-info {
-  padding: 4px 12px;
+  padding: 4px 10px;
  border-radius: 20px;
-  transition: background-color 0.3s ease;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background-color: transparent;
+  border: none;
 }

 .user-info:hover {
-  background-color: rgba(200, 54, 61, 0.08);
+  background-color: rgba(0, 0, 0, 0.04);
+}
+
+.user-info .ant-avatar {
+  flex-shrink: 0;
+  width: 32px;
+  height: 32px;
 }

 .user-nickname {
-  font-size: 14px;
-  font-weight: 500;
-  color: #2c2c2c;
-  max-width: 120px;
+  font-size: 11px;
+  font-weight: 300;
+  color: #888888;
+  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
+  line-height: 1.2;
+  letter-spacing: 0;
 }

 .auth-buttons .ant-btn {
@ -179,8 +192,20 @@
    display: flex;
  }

+  .user-info {
+    padding: 5px 12px;
+  }
+
  .user-nickname {
-    max-width: 80px;
+    max-width: 70px;
+    font-size: 12px;
+  }
+}
+
+@media (max-width: 768px) {
+  .user-nickname {
+    max-width: 60px;
+    font-size: 12px;
  }
 }

@ -207,6 +232,16 @@
    margin-left: 8px;
  }

+  .user-info {
+    padding: 4px 10px;
+    gap: 6px;
+  }
+
+  .user-info .ant-avatar {
+    width: 28px;
+    height: 28px;
+  }
+
  .user-nickname {
    display: none;
  }