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