feat(Calendar): 概念条点击改为弹出当天弹窗
- FullCalendarPro: 根据点击位置计算具体日期(支持跨天概念条) - CombinedCalendar: handleEventClick 改为调用 handleDateClick 弹出弹窗 - 移除无用的 getConceptHtmlUrl import 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -49,6 +49,7 @@ export interface FullCalendarProProps {
|
||||
start: Date;
|
||||
end: Date;
|
||||
dates: string[];
|
||||
clickedDate: string;
|
||||
}) => void;
|
||||
/** 月份变化回调 */
|
||||
onMonthChange?: (year: number, month: number) => void;
|
||||
@@ -372,16 +373,33 @@ export const FullCalendarPro: React.FC<FullCalendarProProps> = ({
|
||||
[onDateClick]
|
||||
);
|
||||
|
||||
// 处理事件点击
|
||||
// 处理事件点击(计算点击的具体日期)
|
||||
const handleEventClick = useCallback(
|
||||
(arg: EventClickArg) => {
|
||||
const { extendedProps } = arg.event;
|
||||
if (arg.event.start && arg.event.end) {
|
||||
const dates = extendedProps.dates as string[];
|
||||
|
||||
if (arg.event.start && dates?.length > 0) {
|
||||
// 计算点击的是哪一天
|
||||
let clickedDate = dates[0]; // 默认第一天
|
||||
|
||||
if (dates.length > 1) {
|
||||
const rect = arg.el.getBoundingClientRect();
|
||||
const clickX = arg.jsEvent.clientX - rect.left;
|
||||
const dayWidth = rect.width / dates.length;
|
||||
const dayIndex = Math.min(
|
||||
Math.floor(clickX / dayWidth),
|
||||
dates.length - 1
|
||||
);
|
||||
clickedDate = dates[dayIndex];
|
||||
}
|
||||
|
||||
onEventClick?.({
|
||||
title: arg.event.title,
|
||||
start: arg.event.start,
|
||||
end: arg.event.end,
|
||||
dates: extendedProps.dates as string[],
|
||||
dates: dates,
|
||||
clickedDate: clickedDate,
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
@@ -14,7 +14,6 @@ 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";
|
||||
|
||||
@@ -146,15 +145,21 @@ const CombinedCalendar = memo(({ 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");
|
||||
}
|
||||
}, []);
|
||||
// 处理概念条点击 - 弹出当天弹窗
|
||||
const handleEventClick = useCallback(
|
||||
(event) => {
|
||||
// 使用 clickedDate(YYYYMMDD 格式)构造 Date 对象
|
||||
const dateStr = event.clickedDate || event.dates?.[0];
|
||||
if (dateStr) {
|
||||
const year = parseInt(dateStr.slice(0, 4), 10);
|
||||
const month = parseInt(dateStr.slice(4, 6), 10) - 1;
|
||||
const day = parseInt(dateStr.slice(6, 8), 10);
|
||||
const date = new Date(year, month, day);
|
||||
handleDateClick(date);
|
||||
}
|
||||
},
|
||||
[handleDateClick]
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
Reference in New Issue
Block a user