diff --git a/src/components/CommentSection/index.css b/src/components/CommentSection/index.css index d03166e..5ecf586 100644 --- 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 { diff --git a/src/components/EventCard/index.tsx b/src/components/EventCard/index.tsx index cca4e35..4777442 100644 --- 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 = { - exhibition: '展览', - workshop: '工作坊', - performance: '演出', - lecture: '讲座', - festival: '节日', -} - -const typeColors: Record = { - exhibition: 'purple', - workshop: 'blue', - performance: 'red', - lecture: 'green', - festival: 'orange', -} - const statusLabels: Record = { upcoming: '即将开始', ongoing: '进行中', @@ -53,6 +38,11 @@ const statusColors: Record = { } const EventCard: React.FC = ({ 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 ( = ({ item, hoverable = true }) => { hoverable={hoverable} cover={
- {item.title} -
- - {typeLabels[item.type]} - -
+ {item.title}
} className="event-card" @@ -77,7 +62,7 @@ const EventCard: React.FC = ({ item, hoverable = true }) => {

{item.title}

- {item.description} + {item.summary}
@@ -88,20 +73,14 @@ const EventCard: React.FC = ({ item, hoverable = true }) => {
- {item.startDate} - {item.startDate !== item.endDate && ` ~ ${item.endDate}`} + {startDate.format('YYYY-MM-DD')} + {!isSameDay && ` ~ ${endDate.format('YYYY-MM-DD')}`}
- {item.startTime && ( -
- - {item.startTime} - {item.endTime} -
- )}
- - - {item.isFree ? '免费' : `¥${item.price}`} + + + {startDate.format('HH:mm')} - {endDate.format('HH:mm')}
@@ -111,11 +90,15 @@ const EventCard: React.FC = ({ item, hoverable = true }) => { - {item.enrolled}/{item.capacity || 0} + {item.currentParticipants}/{item.maxParticipants} + + + {item.viewCount.toLocaleString()} + - {item.capacity && item.enrolled >= item.capacity ? ( + {item.currentParticipants >= item.maxParticipants ? ( 已满 ) : ( 可报名 diff --git a/src/components/NewsCard/index.tsx b/src/components/NewsCard/index.tsx index 8a239d8..d6ef497 100644 --- 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 = { - exhibition: '展览', + news: '新闻', activity: '活动', - policy: '政策', - research: '研究', - story: '故事', + notice: '通知', } const categoryColors: Record = { - exhibition: 'purple', - activity: 'blue', - policy: 'red', - research: 'green', - story: 'orange', + news: 'blue', + activity: 'green', + notice: 'red', } const NewsCard: React.FC = ({ item, hoverable = true }) => { + // 处理 tags 字符串，转换为数组 + const tagArray = item.tags ? item.tags.split(',').filter(tag => tag.trim()) : [] + return ( - {item.title} + {item.title}
- {categoryLabels[item.category]} + {categoryLabels[item.category] || item.category}
@@ -51,7 +52,6 @@ const NewsCard: React.FC = ({ item, hoverable = true }) => { >

{item.title}

-

{item.subtitle || '\u00A0'}

{item.summary} @@ -65,18 +65,20 @@ const NewsCard: React.FC = ({ item, hoverable = true }) => { - {item.publishDate} + {dayjs(item.publishTime).format('YYYY-MM-DD')}
-
- {item.tags.slice(0, 3).map((tag) => ( - - {tag} - - ))} -
+ {tagArray.length > 0 && ( +
+ {tagArray.slice(0, 3).map((tag, index) => ( + + {tag} + + ))} +
+ )}
@@ -85,7 +87,7 @@ const NewsCard: React.FC = ({ item, hoverable = true }) => { {item.viewCount.toLocaleString()} - + {item.likeCount.toLocaleString()} diff --git a/src/layout/Header.css b/src/layout/Header.css index fd5ccce..24e44de 100644 --- 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; }