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:
@@ -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({}); // 清理展开状态
|
||||||
|
|||||||
Reference in New Issue
Block a user