From 863212f53f4ada24d9cc57526cf61757281fdc1b Mon Sep 17 00:00:00 2001 From: zdl <3489966805@qq.com> Date: Fri, 5 Dec 2025 13:35:12 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E6=8A=95=E8=B5=84?= =?UTF-8?q?=E6=97=A5=E5=8E=86mock=E6=95=B0=E6=8D=AE=20=E6=8A=95=E8=B5=84?= =?UTF-8?q?=E6=97=A5=E5=8E=86=E6=8F=90=E5=8F=96=E8=AE=A1=E5=88=92=E5=88=97?= =?UTF-8?q?=E8=A1=A8=E5=8D=A1=E7=89=87=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mocks/data/account.js | 25 +++ .../Dashboard/components/CalendarPanel.tsx | 77 ++-------- .../Dashboard/components/EventDetailCard.tsx | 145 ++++++++++++++++++ 3 files changed, 183 insertions(+), 64 deletions(-) create mode 100644 src/views/Dashboard/components/EventDetailCard.tsx diff --git a/src/mocks/data/account.js b/src/mocks/data/account.js index a5cf2e89..03ad3a1b 100644 --- a/src/mocks/data/account.js +++ b/src/mocks/data/account.js @@ -537,6 +537,31 @@ export const mockFutureEvents = [ ]; export const mockCalendarEvents = [ + { + id: 408, + user_id: 1, + title: '2025中医药高质量发展大会将于12月5日至7日举办', + date: '2025-12-05', + event_date: '2025-12-05', + type: 'policy', + category: 'industry_event', + description: `基于提供的路演记录、新闻动态以及上市公司公告，以下是与"2025中医药高质量发展大会将于12月5日至7日举办"相关的信息整理： + +事件背景： +"2025中医药高质量发展大会"将于12月5日至7日在北京召开，由国家中医药管理局主办，旨在总结十四五期间中医药发展成果，部署下一阶段重点任务。大会主题为"守正创新、传承发展"，将邀请国内外中医药领域专家学者、企业代表共商中医药现代化发展路径。 + +政策支持： +1. 国务院办公厅印发《中医药振兴发展重大工程实施方案》，明确到2025年中医药服务体系更加完善 +2. 国家医保局持续推进中成药集采，优质中药企业有望受益于市场集中度提升 +3. 各地出台中医药产业发展支持政策，加大对中药创新药研发的资金支持 + +行业展望： +中医药行业正处于政策红利期，创新中药、配方颗粒、中药材种植等细分领域景气度较高。预计大会将释放更多利好政策信号，推动行业高质量发展。`, + importance: 5, + source: 'future', + stocks: ['002424.SZ', '002873.SZ', '600518.SH', '002907.SZ', '600129.SH', '300519.SZ', '300878.SZ', '002275.SZ', '600222.SH'], + created_at: '2025-12-01T10:00:00Z' + }, { id: 401, user_id: 1, diff --git a/src/views/Dashboard/components/CalendarPanel.tsx b/src/views/Dashboard/components/CalendarPanel.tsx index 947b940e..25d4a391 100644 --- a/src/views/Dashboard/components/CalendarPanel.tsx +++ b/src/views/Dashboard/components/CalendarPanel.tsx @@ -6,31 +6,20 @@ import React, { useState } from 'react'; import { Box, - Button, - Badge, - Flex, Modal, ModalOverlay, ModalContent, ModalHeader, - ModalFooter, ModalBody, ModalCloseButton, useDisclosure, VStack, - HStack, Text, Spinner, Center, Icon, - Tag, - TagLabel, - TagLeftIcon, } from '@chakra-ui/react'; -import { - FiStar, - FiTrendingUp, -} from 'react-icons/fi'; +import { FiCalendar } from 'react-icons/fi'; import FullCalendar from '@fullcalendar/react'; import dayGridPlugin from '@fullcalendar/daygrid'; import interactionPlugin from '@fullcalendar/interaction'; @@ -40,6 +29,7 @@ import dayjs, { Dayjs } from 'dayjs'; import 'dayjs/locale/zh-cn'; import { usePlanningData } from './PlanningContext'; +import { EventDetailCard } from './EventDetailCard'; import type { InvestmentEvent } from '@/types'; dayjs.locale('zh-cn'); @@ -161,68 +151,27 @@ export const CalendarPanel: React.FC = () => { {selectedDateEvents.length === 0 ? (
- 当天没有事件 + + + 当天暂无事件 + + 可在「计划」或「复盘」添加，或关注投资日历中的未来事件 + +
) : ( {selectedDateEvents.map((event, idx) => ( - - - - - - {event.title} - - {event.source === 'future' ? ( - 系统事件 - ) : event.type === 'plan' ? ( - 我的计划 - ) : ( - 我的复盘 - )} - - {event.importance && ( - - - - 重要度: {event.importance}/5 - - - )} - - - - {event.description && ( - - {event.description} - - )} - - {event.stocks && event.stocks.length > 0 && ( - - 相关股票: - {event.stocks.map((stock, i) => ( - - - {stock} - - ))} - - )} - + secondaryText={secondaryText} + /> ))} )} - - - )} diff --git a/src/views/Dashboard/components/EventDetailCard.tsx b/src/views/Dashboard/components/EventDetailCard.tsx new file mode 100644 index 00000000..149325f2 --- /dev/null +++ b/src/views/Dashboard/components/EventDetailCard.tsx @@ -0,0 +1,145 @@ +/** + * EventDetailCard - 事件详情卡片组件 + * 用于日历视图中展示单个事件的详细信息 + */ + +import React, { useState, useRef, useEffect } from 'react'; +import { + Box, + Badge, + Flex, + HStack, + Text, + Tag, + TagLabel, + TagLeftIcon, + Button, + useColorModeValue, +} from '@chakra-ui/react'; +import { + FiTrendingUp, + FiChevronDown, + FiChevronUp, +} from 'react-icons/fi'; +import type { InvestmentEvent } from '@/types'; + +/** + * EventDetailCard Props + */ +export interface EventDetailCardProps { + /** 事件数据 */ + event: InvestmentEvent; + /** 边框颜色 */ + borderColor?: string; + /** 次要文字颜色 */ + secondaryText?: string; +} + +/** + * 最大显示行数 + */ +const MAX_LINES = 3; + +/** + * EventDetailCard 组件 + */ +export const EventDetailCard: React.FC = ({ + event, + borderColor: borderColorProp, + secondaryText: secondaryTextProp, +}) => { + const [isExpanded, setIsExpanded] = useState(false); + const [isOverflow, setIsOverflow] = useState(false); + const descriptionRef = useRef(null); + + // 默认颜色 + const defaultBorderColor = useColorModeValue('gray.200', 'gray.600'); + const defaultSecondaryText = useColorModeValue('gray.600', 'gray.400'); + + const borderColor = borderColorProp || defaultBorderColor; + const secondaryText = secondaryTextProp || defaultSecondaryText; + + // 检测内容是否溢出 + useEffect(() => { + const el = descriptionRef.current; + if (el) { + // 计算行高和最大高度 + const lineHeight = parseInt(getComputedStyle(el).lineHeight) || 20; + const maxHeight = lineHeight * MAX_LINES; + setIsOverflow(el.scrollHeight > maxHeight + 5); // 5px 容差 + } + }, [event.description]); + + // 获取事件类型标签 + const getEventBadge = () => { + if (event.source === 'future') { + return 系统事件; + } else if (event.type === 'plan') { + return 我的计划; + } else if (event.type === 'review') { + return 我的复盘; + } + return null; + }; + + return ( + + {/* 标题和标签 */} + + + + {event.title} + + {getEventBadge()} + + + + {/* 描述内容 - 支持展开/收起 */} + {event.description && ( + + + {event.description} + + {isOverflow && ( + + )} + + )} + + {/* 相关股票 */} + {event.stocks && event.stocks.length > 0 && ( + + 相关股票: + {event.stocks.map((stock, i) => ( + + + {stock} + + ))} + + )} + + ); +}; + +export default EventDetailCard;