feat(HeroPanel): 财经日历交互优化

- CombinedCalendar: 点击概念条打开概念详情页
- DetailModal: 日期点击弹窗恢复为居中 Modal
- DetailModal: 事件背景/推演详情改为右侧抽屉(500px)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
2026-01-15 15:03:38 +08:00
parent a8dc68bddf
commit d05f84426c
2 changed files with 22 additions and 16 deletions

View File

@@ -14,6 +14,7 @@ import dayjs from "dayjs";
import { GLASS_BLUR } from "@/constants/glassConfig"; import { GLASS_BLUR } from "@/constants/glassConfig";
import { eventService } from "@services/eventService"; import { eventService } from "@services/eventService";
import { getApiBase } from "@utils/apiConfig"; import { getApiBase } from "@utils/apiConfig";
import { getConceptHtmlUrl } from "@utils/textUtils";
import { textColors } from "../constants"; import { textColors } from "../constants";
import { formatDateStr } from "../utils"; import { formatDateStr } from "../utils";
@@ -132,6 +133,16 @@ const CombinedCalendar = ({ DetailModal }) => {
setCurrentMonth(new Date(year, month - 1, 1)); setCurrentMonth(new Date(year, month - 1, 1));
}, []); }, []);
// 处理概念条点击 - 打开概念详情页
const handleEventClick = useCallback((event) => {
// event.title 格式: "概念名 (N天)" 或 "概念名"
const conceptName = event.title.replace(/\s*\(\d+天\)$/, "");
const url = getConceptHtmlUrl(conceptName);
if (url) {
window.open(url, "_blank");
}
}, []);
return ( return (
<> <>
<Box <Box
@@ -241,6 +252,7 @@ const CombinedCalendar = ({ DetailModal }) => {
currentMonth={currentMonth} currentMonth={currentMonth}
onDateClick={handleDateClick} onDateClick={handleDateClick}
onMonthChange={handleMonthChange} onMonthChange={handleMonthChange}
onEventClick={handleEventClick}
/> />
</Suspense> </Suspense>
</Box> </Box>

View File

@@ -14,6 +14,7 @@ import {
Typography, Typography,
message, message,
Modal as AntModal, Modal as AntModal,
Drawer,
ConfigProvider, ConfigProvider,
theme, theme,
} from "antd"; } from "antd";
@@ -439,7 +440,7 @@ const DetailModal = ({
open={isOpen} open={isOpen}
onCancel={onClose} onCancel={onClose}
footer={null} footer={null}
width={1300} width={1000}
centered centered
title={ title={
<div style={{ display: "flex", alignItems: "center", gap: "16px" }}> <div style={{ display: "flex", alignItems: "center", gap: "16px" }}>
@@ -891,7 +892,7 @@ const DetailModal = ({
</AntModal> </AntModal>
</ConfigProvider> </ConfigProvider>
{/* 内容详情弹窗 - 页面居中 */} {/* 内容详情抽屉 - 右侧滑入 */}
<ConfigProvider <ConfigProvider
theme={{ theme={{
algorithm: theme.darkAlgorithm, algorithm: theme.darkAlgorithm,
@@ -901,33 +902,27 @@ const DetailModal = ({
}, },
}} }}
> >
<AntModal <Drawer
title={selectedContent?.title} title={selectedContent?.title}
open={detailDrawerVisible} open={detailDrawerVisible}
onCancel={() => setDetailDrawerVisible(false)} onClose={() => setDetailDrawerVisible(false)}
footer={null} placement="right"
width={700} width={500}
centered
zIndex={1500} zIndex={1500}
styles={{ styles={{
header: { header: {
background: "rgba(25,25,50,0.98)", background: "rgba(25,25,50,0.98)",
borderBottom: "1px solid rgba(255,215,0,0.2)", borderBottom: "1px solid rgba(255,215,0,0.2)",
padding: "16px 24px", padding: "16px 24px",
marginBottom: 0,
}, },
body: { body: {
background: background:
"linear-gradient(135deg, rgba(15,15,30,0.98) 0%, rgba(25,25,50,0.98) 100%)", "linear-gradient(135deg, rgba(15,15,30,0.98) 0%, rgba(25,25,50,0.98) 100%)",
padding: "24px", padding: "24px",
maxHeight: "70vh",
overflowY: "auto",
}, },
content: { wrapper: {
background: background:
"linear-gradient(135deg, rgba(15,15,30,0.98) 0%, rgba(25,25,50,0.98) 100%)", "linear-gradient(135deg, rgba(15,15,30,0.98) 0%, rgba(25,25,50,0.98) 100%)",
borderRadius: "12px",
border: "1px solid rgba(255,215,0,0.2)",
}, },
mask: { mask: {
background: "rgba(0,0,0,0.6)", background: "rgba(0,0,0,0.6)",
@@ -936,8 +931,7 @@ const DetailModal = ({
> >
<div <div
style={{ style={{
height: "500px", height: "100%",
overflowY: "auto",
}} }}
> >
<div <div
@@ -969,7 +963,7 @@ const DetailModal = ({
</p> </p>
</div> </div>
</div> </div>
</AntModal> </Drawer>
</ConfigProvider> </ConfigProvider>
{/* 相关股票弹窗 */} {/* 相关股票弹窗 */}