Initial commit

2025-10-11 11:55:25 +08:00
parent 467dad8449
commit 8107dee8d3
2879 changed files with 610575 additions and 0 deletions
--- a/src/views/Community/components/HotEvents.js
+++ b/src/views/Community/components/HotEvents.js
@@ -0,0 +1,114 @@
+// src/views/Community/components/HotEvents.js
+import React from 'react';
+import { Card, Row, Col, Badge, Tag, Empty } from 'antd';
+import { ArrowUpOutlined, ArrowDownOutlined, FireOutlined } from '@ant-design/icons';
+import { useNavigate } from 'react-router-dom';
+import moment from 'moment';
+import './HotEvents.css';
+import defaultEventImage from '../../../assets/img/default-event.jpg'
+const HotEvents = ({ events }) => {
+    const navigate = useNavigate();
+
+    const renderPriceChange = (value) => {
+        if (value === null || value === undefined) {
+            return <Tag color="default">--</Tag>;
+        }
+
+        const isPositive = value > 0;
+        const icon = isPositive ? <ArrowUpOutlined /> : <ArrowDownOutlined />;
+        const color = isPositive ? '#ff4d4f' : '#52c41a';
+
+        return (
+            <Tag color={color}>
+                {icon} {Math.abs(value).toFixed(2)}%
+            </Tag>
+        );
+    };
+
+    const getImportanceColor = (importance) => {
+        const colors = {
+            S: 'red',
+            A: 'orange',
+            B: 'blue',
+            C: 'green'
+        };
+        return colors[importance] || 'default';
+    };
+
+    const handleCardClick = (eventId) => {
+        navigate(`/event-detail/${eventId}`);
+    };
+
+    return (
+        <div className="hot-events-section">
+            <h2 className="section-title">
+                <FireOutlined style={{ marginRight: 8, color: '#ff4d4f' }} />
+                近期热点信息
+            </h2>
+            <p className="section-subtitle">展示最近5天内涨幅最高的事件，助您把握市场热点</p>
+
+            {events && events.length > 0 ? (
+                <Row gutter={[16, 16]}>
+                    {events.map((event, index) => (
+                        <Col lg={6} md={12} sm={24} key={event.id}>
+                            <Card
+                                hoverable
+                                className="hot-event-card"
+                                onClick={() => handleCardClick(event.id)}
+                                cover={
+                                    <div className="event-cover">
+                                        <img
+                                            alt={event.title}
+                                            src={`/images/events/${['first', 'second', 'third', 'fourth'][index] || 'first'}.jpg`}
+                                            onError={e => {
+                                                e.target.onerror = null;
+                                                e.target.src = defaultEventImage;
+                                            }}
+                                        />
+                                        {event.importance && (
+                                            <Badge
+                                                className="importance-badge"
+                                                color={getImportanceColor(event.importance)}
+                                                text={`${event.importance}级`}
+                                            />
+                                        )}
+                                    </div>
+                                }
+                            >
+                                <Card.Meta
+                                    title={
+                                        <div className="event-header">
+                                            {renderPriceChange(event.related_avg_chg)}
+                                            <span className="event-title">
+                        {event.title}
+                      </span>
+                                        </div>
+                                    }
+                                    description={
+                                        <>
+                                            <p className="event-description">
+                                                {event.description && event.description.length > 80
+                                                    ? `${event.description.substring(0, 80)}...`
+                                                    : event.description}
+                                            </p>
+                                            <div className="event-footer">
+                                                <span className="creator">{event.creator?.username || 'Anonymous'}</span>
+                                                <span className="time">{moment(event.created_at).format('MM-DD HH:mm')}</span>
+                                            </div>
+                                        </>
+                                    }
+                                />
+                            </Card>
+                        </Col>
+                    ))}
+                </Row>
+            ) : (
+                <Card>
+                    <Empty description="暂无热点信息" />
+                </Card>
+            )}
+        </div>
+    );
+};
+
+export default HotEvents;