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:
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|
||||||
{/* 相关股票弹窗 */}
|
{/* 相关股票弹窗 */}
|
||||||
|
|||||||
Reference in New Issue
Block a user