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