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 { eventService } from "@services/eventService";
import { getApiBase } from "@utils/apiConfig";
import { getConceptHtmlUrl } from "@utils/textUtils";
import { textColors } from "../constants";
import { formatDateStr } from "../utils";
@@ -132,6 +133,16 @@ const CombinedCalendar = ({ DetailModal }) => {
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 (
<>
<Box
@@ -241,6 +252,7 @@ const CombinedCalendar = ({ DetailModal }) => {
currentMonth={currentMonth}
onDateClick={handleDateClick}
onMonthChange={handleMonthChange}
onEventClick={handleEventClick}
/>
</Suspense>
</Box>

View File

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