fix: 修复 InvestmentCalendar Ant Design 5.x API 废弃警告

## 问题
控制台出现 4 个 Ant Design API 废弃警告:
```
[antd: Calendar] `dateCellRender` is deprecated. Please use `cellRender` instead.
[antd: Modal] `visible` is deprecated. Please use `open` instead.
[antd: Modal] `bodyStyle` is deprecated. Please use `styles.body` instead.
[antd: Drawer] `visible` is deprecated. Please use `open` instead.
```

## 修复内容

### 1. Calendar API (Line 137, 687)
**旧 API**:
```javascript
const dateCellRender = (value) => {
  const dateStr = value.format('YYYY-MM-DD');
  // ...
};
<Calendar dateCellRender={dateCellRender} />
```

**新 API (Ant Design 5.x)**:
```javascript
const cellRender = (current, info) => {
  // 只处理日期单元格,月份单元格返回默认
  if (info.type !== 'date') return info.originNode;

  const dateStr = current.format('YYYY-MM-DD');
  // ...
};
<Calendar cellRender={cellRender} />
```

### 2. Modal API (Line 701, 766)
`visible` → `open`
```javascript
// 旧 API
<Modal visible={modalVisible} />

// 新 API
<Modal open={modalVisible} />
```

### 3. Modal Styles API (Line 705)
`bodyStyle` → `styles.body`
```javascript
// 旧 API
<Modal bodyStyle={{ padding: '24px' }} />

// 新 API
<Modal styles={{ body: { padding: '24px' } }} />
```

### 4. Drawer API (Line 740)
`visible` → `open`
```javascript
// 旧 API
<Drawer visible={detailDrawerVisible} />

// 新 API
<Drawer open={detailDrawerVisible} />
```

## 影响
-  消除 4 个 Ant Design API 废弃警告
-  兼容 Ant Design 5.x
-  功能不受影响

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
2025-10-30 19:04:30 +08:00
parent 1886c54e0f
commit 85d505cd53

View File

@@ -133,9 +133,12 @@ const InvestmentCalendar = () => {
loadEventCounts(currentMonth); loadEventCounts(currentMonth);
}, [currentMonth, loadEventCounts]); }, [currentMonth, loadEventCounts]);
// 自定义日期单元格渲染 // 自定义日期单元格渲染Ant Design 5.x API
const dateCellRender = (value) => { const cellRender = (current, info) => {
const dateStr = value.format('YYYY-MM-DD'); // 只处理日期单元格,月份单元格返回默认
if (info.type !== 'date') return info.originNode;
const dateStr = current.format('YYYY-MM-DD');
const dayEvents = eventCounts.find(item => item.date === dateStr); const dayEvents = eventCounts.find(item => item.date === dateStr);
if (dayEvents && dayEvents.count > 0) { if (dayEvents && dayEvents.count > 0) {
@@ -681,7 +684,7 @@ const InvestmentCalendar = () => {
> >
<Calendar <Calendar
fullscreen={false} fullscreen={false}
dateCellRender={dateCellRender} cellRender={cellRender}
onSelect={handleDateSelect} onSelect={handleDateSelect}
onPanelChange={(date) => setCurrentMonth(date)} onPanelChange={(date) => setCurrentMonth(date)}
/> />
@@ -695,11 +698,11 @@ const InvestmentCalendar = () => {
<span>{selectedDate?.format('YYYY年MM月DD日')} 投资事件</span> <span>{selectedDate?.format('YYYY年MM月DD日')} 投资事件</span>
</Space> </Space>
} }
visible={modalVisible} open={modalVisible}
onCancel={() => setModalVisible(false)} onCancel={() => setModalVisible(false)}
width={1200} width={1200}
footer={null} footer={null}
bodyStyle={{ padding: '24px' }} styles={{ body: { padding: '24px' } }}
zIndex={1500} zIndex={1500}
> >
<Spin spinning={loading}> <Spin spinning={loading}>
@@ -734,7 +737,7 @@ const InvestmentCalendar = () => {
placement="right" placement="right"
width={600} width={600}
onClose={() => setDetailDrawerVisible(false)} onClose={() => setDetailDrawerVisible(false)}
visible={detailDrawerVisible} open={detailDrawerVisible}
zIndex={1500} zIndex={1500}
> >
{selectedDetail?.content?.type === 'citation' ? ( {selectedDetail?.content?.type === 'citation' ? (
@@ -760,7 +763,7 @@ const InvestmentCalendar = () => {
)} )}
</Space> </Space>
} }
visible={stockModalVisible} open={stockModalVisible}
onCancel={() => { onCancel={() => {
setStockModalVisible(false); setStockModalVisible(false);
setExpandedReasons({}); // 清理展开状态 setExpandedReasons({}); // 清理展开状态