feat(Calendar): 新增公共日历组件 BaseCalendar
This commit is contained in:
zdl
269
src/components/Calendar/BaseCalendar.tsx
Normal file
269
src/components/Calendar/BaseCalendar.tsx
Normal file
@@ -0,0 +1,269 @@
|
||||
/**
|
||||
* BaseCalendar - 基础日历组件
|
||||
* 封装 Ant Design Calendar，提供统一的黑金主题和接口
|
||||
*/
|
||||
|
||||
import React, { useCallback } from 'react';
|
||||
import { Calendar, ConfigProvider, Button } from 'antd';
|
||||
import type { CalendarProps } from 'antd';
|
||||
import { LeftOutlined, RightOutlined } from '@ant-design/icons';
|
||||
import type { Dayjs } from 'dayjs';
|
||||
import dayjs from 'dayjs';
|
||||
import 'dayjs/locale/zh-cn';
|
||||
import zhCN from 'antd/locale/zh_CN';
|
||||
import { Box, HStack, Text } from '@chakra-ui/react';
|
||||
import { CALENDAR_THEME, CALENDAR_COLORS, CALENDAR_STYLES } from './theme';
|
||||
|
||||
dayjs.locale('zh-cn');
|
||||
|
||||
/**
|
||||
* 单元格渲染信息
|
||||
*/
|
||||
export interface CellRenderInfo {
|
||||
type: 'date' | 'month';
|
||||
isToday: boolean;
|
||||
isCurrentMonth: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* BaseCalendar Props
|
||||
*/
|
||||
export interface BaseCalendarProps {
|
||||
/** 当前选中日期 */
|
||||
value?: Dayjs;
|
||||
/** 日期变化回调（月份切换等） */
|
||||
onChange?: (date: Dayjs) => void;
|
||||
/** 日期选择回调（点击日期） */
|
||||
onSelect?: (date: Dayjs) => void;
|
||||
/** 自定义单元格内容渲染 */
|
||||
cellRender?: (date: Dayjs, info: CellRenderInfo) => React.ReactNode;
|
||||
/** 日历高度 */
|
||||
height?: string | number;
|
||||
/** 是否显示工具栏 */
|
||||
showToolbar?: boolean;
|
||||
/** 工具栏标题格式 */
|
||||
titleFormat?: string;
|
||||
/** 额外的 className */
|
||||
className?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 默认工具栏组件
|
||||
*/
|
||||
const CalendarToolbar: React.FC<{
|
||||
value: Dayjs;
|
||||
onChange: (date: Dayjs) => void;
|
||||
titleFormat?: string;
|
||||
}> = ({ value, onChange, titleFormat = 'YYYY年M月' }) => {
|
||||
const handlePrev = () => onChange(value.subtract(1, 'month'));
|
||||
const handleNext = () => onChange(value.add(1, 'month'));
|
||||
const handleToday = () => onChange(dayjs());
|
||||
|
||||
return (
|
||||
<HStack justify="flex-start" mb={4} px={2} spacing={4}>
|
||||
<HStack spacing={2}>
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<LeftOutlined />}
|
||||
onClick={handlePrev}
|
||||
style={{
|
||||
backgroundColor: CALENDAR_STYLES.toolbar.buttonBg,
|
||||
borderColor: CALENDAR_STYLES.toolbar.buttonBg,
|
||||
color: CALENDAR_STYLES.toolbar.buttonColor,
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<RightOutlined />}
|
||||
onClick={handleNext}
|
||||
style={{
|
||||
backgroundColor: CALENDAR_STYLES.toolbar.buttonBg,
|
||||
borderColor: CALENDAR_STYLES.toolbar.buttonBg,
|
||||
color: CALENDAR_STYLES.toolbar.buttonColor,
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={handleToday}
|
||||
style={{
|
||||
backgroundColor: CALENDAR_STYLES.toolbar.buttonBg,
|
||||
borderColor: CALENDAR_STYLES.toolbar.buttonBg,
|
||||
color: CALENDAR_STYLES.toolbar.buttonColor,
|
||||
}}
|
||||
>
|
||||
今天
|
||||
</Button>
|
||||
</HStack>
|
||||
<Text
|
||||
fontSize={{ base: 'lg', md: 'xl' }}
|
||||
fontWeight="700"
|
||||
bgGradient={`linear(135deg, ${CALENDAR_COLORS.gold.primary} 0%, #F5E6A3 100%)`}
|
||||
bgClip="text"
|
||||
>
|
||||
{value.format(titleFormat)}
|
||||
</Text>
|
||||
</HStack>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* BaseCalendar 组件
|
||||
*/
|
||||
export const BaseCalendar: React.FC<BaseCalendarProps> = ({
|
||||
value,
|
||||
onChange,
|
||||
onSelect,
|
||||
cellRender,
|
||||
height = '100%',
|
||||
showToolbar = true,
|
||||
titleFormat = 'YYYY年M月',
|
||||
className,
|
||||
}) => {
|
||||
const [currentValue, setCurrentValue] = React.useState<Dayjs>(value || dayjs());
|
||||
|
||||
// 同步外部 value
|
||||
React.useEffect(() => {
|
||||
if (value) {
|
||||
setCurrentValue(value);
|
||||
}
|
||||
}, [value]);
|
||||
|
||||
// 处理日期变化
|
||||
const handleChange = useCallback((date: Dayjs) => {
|
||||
setCurrentValue(date);
|
||||
onChange?.(date);
|
||||
}, [onChange]);
|
||||
|
||||
// 处理日期选择（只在点击日期时触发，不在切换面板时触发）
|
||||
const handleSelect: CalendarProps<Dayjs>['onSelect'] = useCallback((date: Dayjs, selectInfo) => {
|
||||
// selectInfo.source: 'date' 表示点击日期，'month' 表示切换月份面板
|
||||
// 只在点击日期时触发 onSelect
|
||||
if (selectInfo.source === 'date') {
|
||||
setCurrentValue(date);
|
||||
onSelect?.(date);
|
||||
}
|
||||
}, [onSelect]);
|
||||
|
||||
// 自定义单元格渲染
|
||||
const fullCellRender = useCallback((date: Dayjs) => {
|
||||
const isToday = date.isSame(dayjs(), 'day');
|
||||
const isCurrentMonth = date.isSame(currentValue, 'month');
|
||||
|
||||
const info: CellRenderInfo = {
|
||||
type: 'date',
|
||||
isToday,
|
||||
isCurrentMonth,
|
||||
};
|
||||
|
||||
// 基础日期单元格样式
|
||||
const cellStyle: React.CSSProperties = {
|
||||
minHeight: CALENDAR_STYLES.cell.minHeight,
|
||||
padding: CALENDAR_STYLES.cell.padding,
|
||||
borderRadius: '8px',
|
||||
transition: 'all 0.2s ease',
|
||||
cursor: 'pointer',
|
||||
...(isToday ? {
|
||||
backgroundColor: CALENDAR_STYLES.today.bg,
|
||||
border: CALENDAR_STYLES.today.border,
|
||||
} : {}),
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
style={cellStyle}
|
||||
className="base-calendar-cell"
|
||||
>
|
||||
{/* 日期数字 */}
|
||||
<div
|
||||
style={{
|
||||
textAlign: 'center',
|
||||
fontSize: '14px',
|
||||
fontWeight: isToday ? 700 : 600,
|
||||
color: isToday
|
||||
? CALENDAR_COLORS.gold.primary
|
||||
: isCurrentMonth
|
||||
? '#FFFFFF' // 纯白色，更亮
|
||||
: 'rgba(255, 255, 255, 0.4)',
|
||||
marginBottom: '4px',
|
||||
}}
|
||||
>
|
||||
{date.date()}
|
||||
</div>
|
||||
{/* 自定义内容 */}
|
||||
{cellRender?.(date, info)}
|
||||
</div>
|
||||
);
|
||||
}, [currentValue, cellRender]);
|
||||
|
||||
// 隐藏默认 header
|
||||
const headerRender = useCallback((): React.ReactNode => null, []);
|
||||
|
||||
return (
|
||||
<Box height={height} className={className}>
|
||||
<ConfigProvider theme={CALENDAR_THEME} locale={zhCN}>
|
||||
{showToolbar && (
|
||||
<CalendarToolbar
|
||||
value={currentValue}
|
||||
onChange={handleChange}
|
||||
titleFormat={titleFormat}
|
||||
/>
|
||||
)}
|
||||
<Box
|
||||
height={showToolbar ? 'calc(100% - 60px)' : '100%'}
|
||||
sx={{
|
||||
// 日历整体样式
|
||||
'.ant-picker-calendar': {
|
||||
bg: 'transparent',
|
||||
},
|
||||
'.ant-picker-panel': {
|
||||
bg: 'transparent',
|
||||
border: 'none',
|
||||
},
|
||||
// 星期头 - 居中显示
|
||||
'.ant-picker-content thead th': {
|
||||
color: `${CALENDAR_COLORS.gold.primary} !important`,
|
||||
fontWeight: '600 !important',
|
||||
fontSize: '14px',
|
||||
padding: '8px 0',
|
||||
textAlign: 'center !important',
|
||||
},
|
||||
// 日期单元格
|
||||
'.ant-picker-cell': {
|
||||
padding: '2px',
|
||||
},
|
||||
'.ant-picker-cell-inner': {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
},
|
||||
// 非当前月份
|
||||
'.ant-picker-cell-in-view': {
|
||||
opacity: 1,
|
||||
},
|
||||
'.ant-picker-cell:not(.ant-picker-cell-in-view)': {
|
||||
opacity: 0.5,
|
||||
},
|
||||
// hover 效果
|
||||
'.base-calendar-cell:hover': {
|
||||
bg: 'rgba(212, 175, 55, 0.1)',
|
||||
},
|
||||
// 选中状态
|
||||
'.ant-picker-cell-selected .base-calendar-cell': {
|
||||
bg: 'rgba(212, 175, 55, 0.15)',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Calendar
|
||||
fullscreen={true}
|
||||
value={currentValue}
|
||||
onChange={handleChange}
|
||||
onSelect={handleSelect}
|
||||
fullCellRender={fullCellRender}
|
||||
headerRender={headerRender}
|
||||
/>
|
||||
</Box>
|
||||
</ConfigProvider>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default BaseCalendar;
|
||||
142
src/components/Calendar/CalendarEventBlock.tsx
Normal file
142
src/components/Calendar/CalendarEventBlock.tsx
Normal file
@@ -0,0 +1,142 @@
|
||||
/**
|
||||
* CalendarEventBlock - 日历事件块组件
|
||||
* 用于在日历单元格中显示事件列表，支持多种事件类型和 "更多" 折叠
|
||||
*/
|
||||
|
||||
import React, { useMemo } from 'react';
|
||||
import { HStack, Text, Badge, VStack, Box } from '@chakra-ui/react';
|
||||
import { CALENDAR_COLORS } from './theme';
|
||||
|
||||
/**
|
||||
* 事件类型定义
|
||||
*/
|
||||
export type EventType = 'news' | 'report' | 'plan' | 'review' | 'system' | 'priceUp' | 'priceDown';
|
||||
|
||||
/**
|
||||
* 日历事件接口
|
||||
*/
|
||||
export interface CalendarEvent {
|
||||
id: string | number;
|
||||
type: EventType;
|
||||
title: string;
|
||||
date: string;
|
||||
count?: number;
|
||||
data?: unknown;
|
||||
}
|
||||
|
||||
/**
|
||||
* 事件块 Props
|
||||
*/
|
||||
interface CalendarEventBlockProps {
|
||||
events: CalendarEvent[];
|
||||
maxDisplay?: number;
|
||||
onEventClick?: (event: CalendarEvent) => void;
|
||||
onMoreClick?: (events: CalendarEvent[]) => void;
|
||||
compact?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* 事件类型配置
|
||||
*/
|
||||
const EVENT_CONFIG: Record<EventType, { label: string; color: string; emoji?: string }> = {
|
||||
news: { label: '新闻', color: CALENDAR_COLORS.events.news, emoji: '📰' },
|
||||
report: { label: '研报', color: CALENDAR_COLORS.events.report, emoji: '📊' },
|
||||
plan: { label: '计划', color: CALENDAR_COLORS.events.plan },
|
||||
review: { label: '复盘', color: CALENDAR_COLORS.events.review },
|
||||
system: { label: '系统', color: CALENDAR_COLORS.events.system },
|
||||
priceUp: { label: '涨', color: CALENDAR_COLORS.events.priceUp, emoji: '🔥' },
|
||||
priceDown: { label: '跌', color: CALENDAR_COLORS.events.priceDown },
|
||||
};
|
||||
|
||||
/**
|
||||
* 单个事件行组件
|
||||
*/
|
||||
const EventLine: React.FC<{
|
||||
event: CalendarEvent;
|
||||
compact?: boolean;
|
||||
onClick?: () => void;
|
||||
}> = ({ event, compact, onClick }) => {
|
||||
const config = EVENT_CONFIG[event.type] || { label: event.type, color: '#888' };
|
||||
|
||||
return (
|
||||
<Box
|
||||
fontSize={compact ? '9px' : '10px'}
|
||||
color={config.color}
|
||||
cursor="pointer"
|
||||
px={1}
|
||||
py={0.5}
|
||||
borderRadius="sm"
|
||||
_hover={{ bg: 'rgba(255, 255, 255, 0.1)' }}
|
||||
w="100%"
|
||||
overflow="hidden"
|
||||
textAlign="left"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onClick?.();
|
||||
}}
|
||||
>
|
||||
{/* 格式：计划：年末布局XX+1 */}
|
||||
<Text fontWeight="600" fontSize={compact ? '9px' : '10px'} isTruncated>
|
||||
{config.emoji ? `${config.emoji} ` : ''}{config.label}：{event.title || ''}
|
||||
{(event.count ?? 0) > 1 && <Text as="span" color={config.color}>+{(event.count ?? 1) - 1}</Text>}
|
||||
</Text>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* 日历事件块组件
|
||||
*/
|
||||
export const CalendarEventBlock: React.FC<CalendarEventBlockProps> = ({
|
||||
events,
|
||||
maxDisplay = 3,
|
||||
onEventClick,
|
||||
onMoreClick,
|
||||
compact = false,
|
||||
}) => {
|
||||
// 计算显示的事件和剩余事件
|
||||
const { displayEvents, remainingCount, remainingEvents } = useMemo(() => {
|
||||
if (events.length <= maxDisplay) {
|
||||
return { displayEvents: events, remainingCount: 0, remainingEvents: [] };
|
||||
}
|
||||
return {
|
||||
displayEvents: events.slice(0, maxDisplay),
|
||||
remainingCount: events.length - maxDisplay,
|
||||
remainingEvents: events.slice(maxDisplay),
|
||||
};
|
||||
}, [events, maxDisplay]);
|
||||
|
||||
if (events.length === 0) return null;
|
||||
|
||||
return (
|
||||
<VStack spacing={0} align="stretch" w="100%">
|
||||
{displayEvents.map((event) => (
|
||||
<EventLine
|
||||
key={event.id}
|
||||
event={event}
|
||||
compact={compact}
|
||||
onClick={() => onEventClick?.(event)}
|
||||
/>
|
||||
))}
|
||||
{remainingCount > 0 && (
|
||||
<Box
|
||||
fontSize="9px"
|
||||
color={CALENDAR_COLORS.text.secondary}
|
||||
cursor="pointer"
|
||||
px={1}
|
||||
py={0.5}
|
||||
borderRadius="sm"
|
||||
_hover={{ bg: 'rgba(255, 255, 255, 0.1)' }}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onMoreClick?.(remainingEvents);
|
||||
}}
|
||||
>
|
||||
<Text>+{remainingCount} 更多</Text>
|
||||
</Box>
|
||||
)}
|
||||
</VStack>
|
||||
);
|
||||
};
|
||||
|
||||
export default CalendarEventBlock;
|
||||
19
src/components/Calendar/index.ts
Normal file
19
src/components/Calendar/index.ts
Normal file
@@ -0,0 +1,19 @@
|
||||
/**
|
||||
* Calendar 公共组件库
|
||||
* 统一的日历组件，基于 Ant Design Calendar + 黑金主题
|
||||
*/
|
||||
|
||||
// 基础日历组件
|
||||
export { BaseCalendar } from './BaseCalendar';
|
||||
export type { BaseCalendarProps, CellRenderInfo } from './BaseCalendar';
|
||||
|
||||
// 事件块组件
|
||||
export { CalendarEventBlock } from './CalendarEventBlock';
|
||||
export type { CalendarEvent, EventType } from './CalendarEventBlock';
|
||||
|
||||
// 主题配置
|
||||
export {
|
||||
CALENDAR_THEME,
|
||||
CALENDAR_COLORS,
|
||||
CALENDAR_STYLES,
|
||||
} from './theme';
|
||||
111
src/components/Calendar/theme.ts
Normal file
111
src/components/Calendar/theme.ts
Normal file
@@ -0,0 +1,111 @@
|
||||
/**
|
||||
* Calendar 黑金主题配置
|
||||
* 统一的 Ant Design Calendar 主题，用于所有日历组件
|
||||
*/
|
||||
|
||||
import type { ThemeConfig } from 'antd';
|
||||
|
||||
// 黑金主题色值
|
||||
export const CALENDAR_COLORS = {
|
||||
// 主色
|
||||
gold: {
|
||||
primary: '#D4AF37',
|
||||
secondary: '#B8960C',
|
||||
gradient: 'linear-gradient(135deg, #D4AF37 0%, #F5E6A3 100%)',
|
||||
},
|
||||
// 背景色
|
||||
bg: {
|
||||
deep: '#0A0A14',
|
||||
primary: '#0F0F1A',
|
||||
elevated: '#1A1A2E',
|
||||
surface: '#252540',
|
||||
},
|
||||
// 边框色
|
||||
border: {
|
||||
subtle: 'rgba(212, 175, 55, 0.1)',
|
||||
default: 'rgba(212, 175, 55, 0.2)',
|
||||
emphasis: 'rgba(212, 175, 55, 0.4)',
|
||||
},
|
||||
// 文字色
|
||||
text: {
|
||||
primary: 'rgba(255, 255, 255, 0.95)',
|
||||
secondary: 'rgba(255, 255, 255, 0.6)',
|
||||
muted: 'rgba(255, 255, 255, 0.4)',
|
||||
},
|
||||
// 事件类型颜色
|
||||
events: {
|
||||
news: '#9F7AEA', // 紫色 - 新闻
|
||||
report: '#805AD5', // 深紫 - 研报
|
||||
plan: '#D4AF37', // 金色 - 计划
|
||||
review: '#10B981', // 绿色 - 复盘
|
||||
system: '#3B82F6', // 蓝色 - 系统事件
|
||||
priceUp: '#FC8181', // 红色 - 上涨
|
||||
priceDown: '#68D391', // 绿色 - 下跌
|
||||
},
|
||||
} as const;
|
||||
|
||||
/**
|
||||
* Ant Design Calendar 黑金主题配置
|
||||
*/
|
||||
export const CALENDAR_THEME: ThemeConfig = {
|
||||
token: {
|
||||
// 基础色
|
||||
colorBgContainer: 'transparent',
|
||||
colorBgElevated: CALENDAR_COLORS.bg.elevated,
|
||||
colorText: CALENDAR_COLORS.text.primary,
|
||||
colorTextSecondary: CALENDAR_COLORS.text.secondary,
|
||||
colorTextTertiary: CALENDAR_COLORS.text.muted,
|
||||
colorTextHeading: CALENDAR_COLORS.gold.primary,
|
||||
|
||||
// 边框
|
||||
colorBorder: CALENDAR_COLORS.border.default,
|
||||
colorBorderSecondary: CALENDAR_COLORS.border.subtle,
|
||||
|
||||
// 主色
|
||||
colorPrimary: CALENDAR_COLORS.gold.primary,
|
||||
colorPrimaryHover: CALENDAR_COLORS.gold.secondary,
|
||||
colorPrimaryActive: CALENDAR_COLORS.gold.secondary,
|
||||
|
||||
// 链接色
|
||||
colorLink: CALENDAR_COLORS.gold.primary,
|
||||
colorLinkHover: CALENDAR_COLORS.gold.secondary,
|
||||
|
||||
// 圆角
|
||||
borderRadius: 8,
|
||||
borderRadiusLG: 12,
|
||||
},
|
||||
components: {
|
||||
Calendar: {
|
||||
// 日历整体背景
|
||||
fullBg: 'transparent',
|
||||
fullPanelBg: 'transparent',
|
||||
|
||||
// 选中项背景
|
||||
itemActiveBg: 'rgba(212, 175, 55, 0.15)',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 日历样式常量（用于内联样式或 CSS-in-JS）
|
||||
*/
|
||||
export const CALENDAR_STYLES = {
|
||||
// 今天高亮
|
||||
today: {
|
||||
bg: 'rgba(212, 175, 55, 0.1)',
|
||||
border: `2px solid ${CALENDAR_COLORS.gold.primary}`,
|
||||
},
|
||||
// 日期单元格
|
||||
cell: {
|
||||
minHeight: '85px',
|
||||
padding: '4px',
|
||||
},
|
||||
// 工具栏
|
||||
toolbar: {
|
||||
buttonBg: CALENDAR_COLORS.gold.primary,
|
||||
buttonColor: CALENDAR_COLORS.bg.deep,
|
||||
buttonHoverBg: CALENDAR_COLORS.gold.secondary,
|
||||
},
|
||||
};
|
||||
|
||||
export default CALENDAR_THEME;
|
||||
Reference in New Issue
Block a user