refactor: EventFormModal 从 Chakra UI 迁移到 Ant Design
- 使用 Ant Design Form/Modal/Select 组件 - 简化字段: 标题、日期、内容、关联股票 - 新增计划/复盘模板系统 - 股票选择支持前端模糊搜索 + 自选股快捷选择 - 新增响应式样式 (EventFormModal.less) - EventPanel: 移除不再需要的 props
This commit is contained in:
zdl
198
src/views/Dashboard/components/EventFormModal.less
Normal file
198
src/views/Dashboard/components/EventFormModal.less
Normal file
@@ -0,0 +1,198 @@
|
||||
/* EventFormModal.less - 投资计划/复盘弹窗响应式样式 */
|
||||
|
||||
// ==================== 变量定义 ====================
|
||||
@mobile-breakpoint: 768px;
|
||||
@modal-border-radius-mobile: 12px;
|
||||
@modal-border-radius-desktop: 8px;
|
||||
|
||||
// 间距
|
||||
@spacing-xs: 4px;
|
||||
@spacing-sm: 8px;
|
||||
@spacing-md: 12px;
|
||||
@spacing-lg: 16px;
|
||||
@spacing-xl: 20px;
|
||||
@spacing-xxl: 24px;
|
||||
|
||||
// 字体大小
|
||||
@font-size-xs: 12px;
|
||||
@font-size-sm: 14px;
|
||||
@font-size-md: 16px;
|
||||
|
||||
// 颜色
|
||||
@color-border: #f0f0f0;
|
||||
@color-text-secondary: #999;
|
||||
@color-error: #ff4d4f;
|
||||
|
||||
// ==================== 主样式 ====================
|
||||
.event-form-modal {
|
||||
// Modal 整体
|
||||
.ant-modal-content {
|
||||
border-radius: @modal-border-radius-desktop;
|
||||
}
|
||||
|
||||
// Modal 标题放大加粗
|
||||
.ant-modal-title {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.ant-modal-body {
|
||||
padding: @spacing-xxl;
|
||||
padding-top: 36px; // 增加标题与表单间距
|
||||
}
|
||||
|
||||
.ant-form-item {
|
||||
margin-bottom: @spacing-xl;
|
||||
}
|
||||
|
||||
// 表单标签加粗，左对齐
|
||||
.ant-form-item-label {
|
||||
text-align: left !important;
|
||||
|
||||
> label {
|
||||
font-weight: 600 !important;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
// 字符计数样式
|
||||
.ant-input-textarea-show-count::after {
|
||||
font-size: @font-size-xs;
|
||||
color: @color-text-secondary;
|
||||
}
|
||||
|
||||
// 日期选择器全宽
|
||||
.ant-picker {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// 股票标签样式
|
||||
.ant-tag {
|
||||
margin: 2px;
|
||||
border-radius: @spacing-xs;
|
||||
}
|
||||
|
||||
// 模板按钮组
|
||||
.template-buttons {
|
||||
.ant-btn {
|
||||
font-size: @font-size-xs;
|
||||
}
|
||||
}
|
||||
|
||||
// 底部操作栏布局
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
// 加载状态
|
||||
.ant-btn-loading {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
// 错误状态动画
|
||||
.ant-form-item-has-error {
|
||||
.ant-input,
|
||||
.ant-picker,
|
||||
.ant-select-selector {
|
||||
animation: shake 0.3s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ==================== 移动端适配 ====================
|
||||
@media (max-width: @mobile-breakpoint) {
|
||||
.event-form-modal {
|
||||
// Modal 整体尺寸
|
||||
.ant-modal {
|
||||
width: calc(100vw - 32px) !important;
|
||||
max-width: 100% !important;
|
||||
margin: @spacing-lg auto;
|
||||
top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.ant-modal-content {
|
||||
max-height: calc(100vh - 32px);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: @modal-border-radius-mobile;
|
||||
}
|
||||
|
||||
// Modal 头部
|
||||
.ant-modal-header {
|
||||
padding: @spacing-md @spacing-lg;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.ant-modal-title {
|
||||
font-size: @font-size-md;
|
||||
}
|
||||
|
||||
// Modal 内容区域
|
||||
.ant-modal-body {
|
||||
padding: @spacing-lg;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
// Modal 底部
|
||||
.ant-modal-footer {
|
||||
padding: @spacing-md @spacing-lg;
|
||||
flex-shrink: 0;
|
||||
border-top: 1px solid @color-border;
|
||||
}
|
||||
|
||||
// 表单项间距
|
||||
.ant-form-item {
|
||||
margin-bottom: @spacing-lg;
|
||||
}
|
||||
|
||||
// 表单标签
|
||||
.ant-form-item-label > label {
|
||||
font-size: @font-size-sm;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
// 输入框字体 - iOS 防止缩放需要 16px
|
||||
.ant-input,
|
||||
.ant-picker-input > input,
|
||||
.ant-select-selection-search-input {
|
||||
font-size: @font-size-md !important;
|
||||
}
|
||||
|
||||
// 文本域高度
|
||||
.ant-input-textarea textarea {
|
||||
font-size: @font-size-md !important;
|
||||
min-height: 120px;
|
||||
}
|
||||
|
||||
// 模板按钮组
|
||||
.template-buttons .ant-btn {
|
||||
font-size: @font-size-xs;
|
||||
padding: 2px @spacing-sm;
|
||||
height: 26px;
|
||||
}
|
||||
|
||||
// 股票选择器
|
||||
.ant-select-selector {
|
||||
min-height: 40px !important;
|
||||
}
|
||||
|
||||
// 底部按钮
|
||||
.ant-modal-footer .ant-btn {
|
||||
font-size: @font-size-md;
|
||||
height: 40px;
|
||||
border-radius: @spacing-sm;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ==================== 动画 ====================
|
||||
@keyframes shake {
|
||||
0%, 100% { transform: translateX(0); }
|
||||
25% { transform: translateX(-4px); }
|
||||
75% { transform: translateX(4px); }
|
||||
}
|
||||
@@ -1,66 +1,135 @@
|
||||
/**
|
||||
* EventFormModal - 通用事件表单弹窗组件
|
||||
* 用于新建/编辑投资计划、复盘、日历事件等
|
||||
* EventFormModal - 通用事件表单弹窗组件 (Ant Design 重构版)
|
||||
* 用于新建/编辑投资计划、复盘
|
||||
*
|
||||
* 通过 props 配置差异化行为：
|
||||
* - 字段显示控制（日期选择器、类型、状态、重要度、标签等）
|
||||
* - API 端点配置（investment-plans 或 calendar/events）
|
||||
* - 主题颜色和标签文案
|
||||
* 功能特性：
|
||||
* - 使用 Ant Design 组件
|
||||
* - 简化字段：标题、日期、描述、关联股票
|
||||
* - 计划/复盘模板系统
|
||||
* - 股票多选组件带智能搜索
|
||||
* - Ctrl + Enter 快捷键保存
|
||||
*/
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import React, { useState, useEffect, useCallback, useRef, useMemo } from 'react';
|
||||
import {
|
||||
Button,
|
||||
Modal,
|
||||
ModalOverlay,
|
||||
ModalContent,
|
||||
ModalHeader,
|
||||
ModalFooter,
|
||||
ModalBody,
|
||||
ModalCloseButton,
|
||||
VStack,
|
||||
HStack,
|
||||
Icon,
|
||||
Form,
|
||||
Input,
|
||||
InputGroup,
|
||||
InputLeftElement,
|
||||
FormControl,
|
||||
FormLabel,
|
||||
Textarea,
|
||||
DatePicker,
|
||||
Select,
|
||||
Button,
|
||||
Tag,
|
||||
TagLabel,
|
||||
TagLeftIcon,
|
||||
TagCloseButton,
|
||||
} from '@chakra-ui/react';
|
||||
Divider,
|
||||
message,
|
||||
Space,
|
||||
Spin,
|
||||
} from 'antd';
|
||||
import type { SelectProps } from 'antd';
|
||||
import {
|
||||
FiSave,
|
||||
FiCalendar,
|
||||
FiTrendingUp,
|
||||
FiHash,
|
||||
} from 'react-icons/fi';
|
||||
BulbOutlined,
|
||||
StarOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import dayjs from 'dayjs';
|
||||
import 'dayjs/locale/zh-cn';
|
||||
import { useSelector } from 'react-redux';
|
||||
|
||||
import { useAppDispatch } from '@/store/hooks';
|
||||
import { usePlanningData } from './PlanningContext';
|
||||
import type { InvestmentEvent, EventType, EventStatus } from '@/types';
|
||||
import './EventFormModal.less';
|
||||
import type { InvestmentEvent, EventType } from '@/types';
|
||||
import { logger } from '@/utils/logger';
|
||||
import { getApiBase } from '@/utils/apiConfig';
|
||||
import { loadWatchlist, loadAllStocks } from '@/store/slices/stockSlice';
|
||||
import { stockService } from '@/services/stockService';
|
||||
|
||||
dayjs.locale('zh-cn');
|
||||
|
||||
const { TextArea } = Input;
|
||||
|
||||
/**
|
||||
* 股票选项接口
|
||||
*/
|
||||
interface StockOption {
|
||||
value: string;
|
||||
label: string;
|
||||
stock_code: string;
|
||||
stock_name: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 表单数据接口
|
||||
*/
|
||||
interface FormData {
|
||||
date: string;
|
||||
title: string;
|
||||
date: dayjs.Dayjs;
|
||||
content: string;
|
||||
type: EventType;
|
||||
stocks: string[];
|
||||
tags: string[];
|
||||
status: EventStatus;
|
||||
importance: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* 模板类型
|
||||
*/
|
||||
interface Template {
|
||||
label: string;
|
||||
content: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 计划模板
|
||||
*/
|
||||
const PLAN_TEMPLATES: Template[] = [
|
||||
{
|
||||
label: '目标',
|
||||
content: '【投资目标】\n\n',
|
||||
},
|
||||
{
|
||||
label: '策略',
|
||||
content: '【交易策略】\n\n',
|
||||
},
|
||||
{
|
||||
label: '风险控制',
|
||||
content: '【风险控制】\n- 止损位：\n- 仓位控制：\n',
|
||||
},
|
||||
{
|
||||
label: '时间规划',
|
||||
content: '【时间规划】\n- 建仓时机：\n- 持仓周期：\n',
|
||||
},
|
||||
];
|
||||
|
||||
/**
|
||||
* 复盘模板
|
||||
*/
|
||||
const REVIEW_TEMPLATES: Template[] = [
|
||||
{
|
||||
label: '操作回顾',
|
||||
content: '【操作回顾】\n- 买入操作：\n- 卖出操作：\n',
|
||||
},
|
||||
{
|
||||
label: '盈亏分析',
|
||||
content: '【盈亏分析】\n- 盈亏金额：\n- 收益率：\n- 主要原因：\n',
|
||||
},
|
||||
{
|
||||
label: '经验总结',
|
||||
content: '【经验总结】\n- 做对的地方：\n- 做错的地方：\n',
|
||||
},
|
||||
{
|
||||
label: '后续调整',
|
||||
content: '【后续调整】\n- 策略调整：\n- 仓位调整：\n',
|
||||
},
|
||||
];
|
||||
|
||||
/**
|
||||
* Redux state 类型
|
||||
*/
|
||||
interface RootState {
|
||||
stock: {
|
||||
watchlist: Array<{ stock_code: string; stock_name: string }>;
|
||||
allStocks: Array<{ code: string; name: string }>;
|
||||
loading: {
|
||||
watchlist: boolean;
|
||||
allStocks: boolean;
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -112,95 +181,120 @@ export const EventFormModal: React.FC<EventFormModalProps> = ({
|
||||
initialDate,
|
||||
editingEvent,
|
||||
onSuccess,
|
||||
colorScheme = 'purple',
|
||||
label = '事件',
|
||||
showDatePicker = true,
|
||||
showTypeSelect = false,
|
||||
showStatusSelect = true,
|
||||
showImportance = false,
|
||||
showTags = true,
|
||||
stockInputMode = 'tag',
|
||||
apiEndpoint = 'investment-plans',
|
||||
}) => {
|
||||
const { toast, secondaryText } = usePlanningData();
|
||||
const { loadAllData } = usePlanningData();
|
||||
const dispatch = useAppDispatch();
|
||||
const [form] = Form.useForm<FormData>();
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [stockOptions, setStockOptions] = useState<StockOption[]>([]);
|
||||
const [searchText, setSearchText] = useState('');
|
||||
const modalContentRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// 表单数据
|
||||
const [formData, setFormData] = useState<FormData>({
|
||||
date: initialDate || dayjs().format('YYYY-MM-DD'),
|
||||
title: '',
|
||||
content: '',
|
||||
type: eventType,
|
||||
stocks: [],
|
||||
tags: [],
|
||||
status: 'active',
|
||||
importance: 3,
|
||||
});
|
||||
// 从 Redux 获取自选股和全部股票列表
|
||||
const watchlist = useSelector((state: RootState) => state.stock.watchlist);
|
||||
const allStocks = useSelector((state: RootState) => state.stock.allStocks);
|
||||
const watchlistLoading = useSelector((state: RootState) => state.stock.loading.watchlist);
|
||||
const allStocksLoading = useSelector((state: RootState) => state.stock.loading.allStocks);
|
||||
|
||||
// 股票和标签输入框
|
||||
const [stockInput, setStockInput] = useState<string>('');
|
||||
const [tagInput, setTagInput] = useState<string>('');
|
||||
// 将自选股转换为 StockOption 格式
|
||||
const watchlistOptions = useMemo<StockOption[]>(() => {
|
||||
return watchlist.map(item => ({
|
||||
value: item.stock_code,
|
||||
label: `${item.stock_name}(${item.stock_code})`,
|
||||
stock_code: item.stock_code,
|
||||
stock_name: item.stock_name,
|
||||
}));
|
||||
}, [watchlist]);
|
||||
|
||||
// 保存中状态
|
||||
const [saving, setSaving] = useState<boolean>(false);
|
||||
// 获取模板列表
|
||||
const templates = eventType === 'plan' ? PLAN_TEMPLATES : REVIEW_TEMPLATES;
|
||||
|
||||
// 生成默认模板内容
|
||||
const getDefaultContent = (type: EventType): string => {
|
||||
const templateList = type === 'plan' ? PLAN_TEMPLATES : REVIEW_TEMPLATES;
|
||||
return templateList.map(t => t.content).join('\n');
|
||||
};
|
||||
|
||||
// 弹窗打开时加载数据
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
// 加载自选股列表
|
||||
dispatch(loadWatchlist());
|
||||
// 加载全部股票列表（用于模糊搜索）
|
||||
dispatch(loadAllStocks());
|
||||
}
|
||||
}, [isOpen, dispatch]);
|
||||
|
||||
// 初始化表单数据
|
||||
useEffect(() => {
|
||||
if (mode === 'edit' && editingEvent) {
|
||||
setFormData({
|
||||
date: dayjs(editingEvent.event_date || editingEvent.date).format('YYYY-MM-DD'),
|
||||
title: editingEvent.title,
|
||||
content: editingEvent.description || editingEvent.content || '',
|
||||
type: editingEvent.type || eventType,
|
||||
stocks: editingEvent.stocks || [],
|
||||
tags: editingEvent.tags || [],
|
||||
status: editingEvent.status || 'active',
|
||||
importance: editingEvent.importance || 3,
|
||||
});
|
||||
// 如果是文本模式，将股票数组转为逗号分隔
|
||||
if (stockInputMode === 'text' && editingEvent.stocks) {
|
||||
setStockInput(editingEvent.stocks.join(','));
|
||||
if (isOpen) {
|
||||
if (mode === 'edit' && editingEvent) {
|
||||
form.setFieldsValue({
|
||||
title: editingEvent.title,
|
||||
date: dayjs(editingEvent.event_date || editingEvent.date),
|
||||
content: editingEvent.description || editingEvent.content || '',
|
||||
stocks: editingEvent.stocks || [],
|
||||
});
|
||||
} else {
|
||||
// 新建模式，重置表单并预填充模板内容
|
||||
form.resetFields();
|
||||
form.setFieldsValue({
|
||||
date: initialDate ? dayjs(initialDate) : dayjs(),
|
||||
stocks: [],
|
||||
content: getDefaultContent(eventType),
|
||||
});
|
||||
}
|
||||
} else {
|
||||
// 新建模式，重置表单
|
||||
setFormData({
|
||||
date: initialDate || dayjs().format('YYYY-MM-DD'),
|
||||
title: '',
|
||||
content: '',
|
||||
type: eventType,
|
||||
stocks: [],
|
||||
tags: [],
|
||||
status: 'active',
|
||||
importance: 3,
|
||||
});
|
||||
setStockInput('');
|
||||
setTagInput('');
|
||||
}
|
||||
}, [mode, editingEvent, eventType, initialDate, stockInputMode]);
|
||||
}, [isOpen, mode, editingEvent, initialDate, form, eventType]);
|
||||
|
||||
// 股票搜索（前端模糊搜索）
|
||||
const handleStockSearch = useCallback((value: string) => {
|
||||
setSearchText(value);
|
||||
|
||||
if (!value || value.length < 1) {
|
||||
// 无搜索词时显示自选股列表
|
||||
setStockOptions(watchlistOptions);
|
||||
return;
|
||||
}
|
||||
|
||||
// 使用 stockService.fuzzySearch 进行前端模糊搜索
|
||||
const results = stockService.fuzzySearch(value, allStocks, 10);
|
||||
const options: StockOption[] = results.map(stock => ({
|
||||
value: stock.code,
|
||||
label: `${stock.name}(${stock.code})`,
|
||||
stock_code: stock.code,
|
||||
stock_name: stock.name,
|
||||
}));
|
||||
|
||||
setStockOptions(options.length > 0 ? options : watchlistOptions);
|
||||
}, [allStocks, watchlistOptions]);
|
||||
|
||||
// 保存数据
|
||||
const handleSave = async (): Promise<void> => {
|
||||
const handleSave = useCallback(async (): Promise<void> => {
|
||||
try {
|
||||
const values = await form.validateFields();
|
||||
setSaving(true);
|
||||
|
||||
const base = getApiBase();
|
||||
|
||||
// 构建请求数据
|
||||
let requestData: Record<string, unknown> = { ...formData };
|
||||
|
||||
// 如果是文本模式，解析股票输入
|
||||
if (stockInputMode === 'text' && stockInput) {
|
||||
requestData.stocks = stockInput.split(',').map(s => s.trim()).filter(s => s);
|
||||
}
|
||||
const requestData: Record<string, unknown> = {
|
||||
title: values.title,
|
||||
content: values.content,
|
||||
date: values.date.format('YYYY-MM-DD'),
|
||||
type: eventType,
|
||||
stocks: values.stocks || [],
|
||||
status: 'active',
|
||||
};
|
||||
|
||||
// 根据 API 端点调整字段名
|
||||
if (apiEndpoint === 'calendar/events') {
|
||||
requestData = {
|
||||
title: formData.title,
|
||||
description: formData.content,
|
||||
type: formData.type,
|
||||
importance: formData.importance,
|
||||
stocks: requestData.stocks,
|
||||
event_date: formData.date,
|
||||
};
|
||||
requestData.description = values.content;
|
||||
requestData.event_date = values.date.format('YYYY-MM-DD');
|
||||
delete requestData.content;
|
||||
delete requestData.date;
|
||||
}
|
||||
|
||||
const url = mode === 'edit' && editingEvent
|
||||
@@ -221,274 +315,247 @@ export const EventFormModal: React.FC<EventFormModalProps> = ({
|
||||
if (response.ok) {
|
||||
logger.info('EventFormModal', `${mode === 'edit' ? '更新' : '创建'}${label}成功`, {
|
||||
itemId: editingEvent?.id,
|
||||
title: formData.title,
|
||||
});
|
||||
toast({
|
||||
title: mode === 'edit' ? '更新成功' : '创建成功',
|
||||
status: 'success',
|
||||
duration: 2000,
|
||||
title: values.title,
|
||||
});
|
||||
message.success(mode === 'edit' ? '修改成功' : '添加成功');
|
||||
onClose();
|
||||
onSuccess();
|
||||
loadAllData();
|
||||
} else {
|
||||
throw new Error('保存失败');
|
||||
}
|
||||
} catch (error) {
|
||||
if (error instanceof Error && error.message !== '保存失败') {
|
||||
// 表单验证错误，不显示额外提示
|
||||
return;
|
||||
}
|
||||
logger.error('EventFormModal', 'handleSave', error, {
|
||||
itemId: editingEvent?.id,
|
||||
title: formData?.title
|
||||
});
|
||||
toast({
|
||||
title: '保存失败',
|
||||
description: '无法保存数据',
|
||||
status: 'error',
|
||||
duration: 3000,
|
||||
});
|
||||
message.error('保存失败，请稍后重试');
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
}, [form, eventType, apiEndpoint, mode, editingEvent, label, onClose, onSuccess, loadAllData]);
|
||||
|
||||
// 添加股票（Tag 模式）
|
||||
const handleAddStock = (): void => {
|
||||
if (stockInput.trim() && !formData.stocks.includes(stockInput.trim())) {
|
||||
setFormData({
|
||||
...formData,
|
||||
stocks: [...formData.stocks, stockInput.trim()],
|
||||
});
|
||||
setStockInput('');
|
||||
}
|
||||
};
|
||||
// 监听键盘快捷键 Ctrl + Enter
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
if (isOpen && (e.ctrlKey || e.metaKey) && e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
handleSave();
|
||||
}
|
||||
};
|
||||
|
||||
// 移除股票（Tag 模式）
|
||||
const handleRemoveStock = (index: number): void => {
|
||||
setFormData({
|
||||
...formData,
|
||||
stocks: formData.stocks.filter((_, i) => i !== index),
|
||||
});
|
||||
};
|
||||
window.addEventListener('keydown', handleKeyDown);
|
||||
return () => window.removeEventListener('keydown', handleKeyDown);
|
||||
}, [isOpen, handleSave]);
|
||||
|
||||
// 添加标签
|
||||
const handleAddTag = (): void => {
|
||||
if (tagInput.trim() && !formData.tags.includes(tagInput.trim())) {
|
||||
setFormData({
|
||||
...formData,
|
||||
tags: [...formData.tags, tagInput.trim()],
|
||||
});
|
||||
setTagInput('');
|
||||
}
|
||||
};
|
||||
|
||||
// 移除标签
|
||||
const handleRemoveTag = (index: number): void => {
|
||||
setFormData({
|
||||
...formData,
|
||||
tags: formData.tags.filter((_, i) => i !== index),
|
||||
});
|
||||
// 插入模板
|
||||
const handleInsertTemplate = (template: Template): void => {
|
||||
const currentContent = form.getFieldValue('content') || '';
|
||||
const newContent = currentContent
|
||||
? `${currentContent}\n\n${template.content}`
|
||||
: template.content;
|
||||
form.setFieldsValue({ content: newContent });
|
||||
};
|
||||
|
||||
// 获取标题 placeholder
|
||||
const getTitlePlaceholder = (): string => {
|
||||
switch (formData.type) {
|
||||
case 'plan':
|
||||
return '例如：布局新能源板块';
|
||||
case 'review':
|
||||
return '例如：本周操作复盘';
|
||||
case 'reminder':
|
||||
return '例如：关注半导体板块';
|
||||
case 'analysis':
|
||||
return '例如：行业分析任务';
|
||||
default:
|
||||
return '请输入标题';
|
||||
if (eventType === 'plan') {
|
||||
return '例如：关注AI板块';
|
||||
}
|
||||
return '例如：12月操作总结';
|
||||
};
|
||||
|
||||
// 获取内容 placeholder
|
||||
const getContentPlaceholder = (): string => {
|
||||
switch (formData.type) {
|
||||
case 'plan':
|
||||
return '详细描述您的投资计划...';
|
||||
case 'review':
|
||||
return '详细记录您的投资复盘...';
|
||||
default:
|
||||
return '详细描述...';
|
||||
if (eventType === 'plan') {
|
||||
return '计划模板:\n目标:\n策略:\n风险控制:\n时间规划:';
|
||||
}
|
||||
return '复盘模板:\n操作回顾:\n盈亏分析:\n经验总结:\n后续调整:';
|
||||
};
|
||||
|
||||
// 判断是否显示自选股列表
|
||||
const isShowingWatchlist = !searchText && stockOptions === watchlistOptions;
|
||||
|
||||
// 股票选择器选项配置
|
||||
const selectProps: SelectProps<string[]> = {
|
||||
mode: 'multiple',
|
||||
placeholder: allStocksLoading ? '加载股票列表中...' : '输入股票代码或名称搜索',
|
||||
filterOption: false,
|
||||
onSearch: handleStockSearch,
|
||||
loading: watchlistLoading || allStocksLoading,
|
||||
notFoundContent: allStocksLoading ? (
|
||||
<div style={{ textAlign: 'center', padding: '8px' }}>
|
||||
<Spin size="small" />
|
||||
<span style={{ marginLeft: 8 }}>加载中...</span>
|
||||
</div>
|
||||
) : '暂无结果',
|
||||
options: stockOptions,
|
||||
onFocus: () => {
|
||||
if (stockOptions.length === 0) {
|
||||
setStockOptions(watchlistOptions);
|
||||
}
|
||||
},
|
||||
tagRender: (props) => {
|
||||
const { label: tagLabel, closable, onClose: onTagClose } = props;
|
||||
return (
|
||||
<Tag
|
||||
color="blue"
|
||||
closable={closable}
|
||||
onClose={onTagClose}
|
||||
style={{ marginRight: 3 }}
|
||||
>
|
||||
{tagLabel}
|
||||
</Tag>
|
||||
);
|
||||
},
|
||||
popupRender: (menu) => (
|
||||
<>
|
||||
{isShowingWatchlist && watchlistOptions.length > 0 && (
|
||||
<>
|
||||
<div style={{ padding: '4px 8px 0' }}>
|
||||
<span style={{ fontSize: 12, color: '#999' }}>
|
||||
<StarOutlined style={{ marginRight: 4, color: '#faad14' }} />
|
||||
我的自选股
|
||||
</span>
|
||||
</div>
|
||||
<Divider style={{ margin: '4px 0 0' }} />
|
||||
</>
|
||||
)}
|
||||
{menu}
|
||||
{!isShowingWatchlist && searchText && (
|
||||
<>
|
||||
<Divider style={{ margin: '8px 0' }} />
|
||||
<div style={{ padding: '0 8px 4px' }}>
|
||||
<span style={{ fontSize: 12, color: '#999' }}>
|
||||
<BulbOutlined style={{ marginRight: 4 }} />
|
||||
搜索结果（输入代码或名称）
|
||||
</span>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
),
|
||||
};
|
||||
|
||||
// 获取按钮文案
|
||||
const getButtonText = (): string => {
|
||||
if (mode === 'edit') {
|
||||
return eventType === 'plan' ? '更新计划' : '更新复盘';
|
||||
}
|
||||
return eventType === 'plan' ? '创建计划' : '创建复盘';
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal isOpen={isOpen} onClose={onClose} size={{ base: 'full', md: 'xl' }} closeOnOverlayClick={false} closeOnEsc={true} scrollBehavior="inside">
|
||||
<ModalOverlay />
|
||||
<ModalContent mx={{ base: 0, md: 4 }} my={{ base: 0, md: 16 }} borderRadius={{ base: 0, md: 'md' }}>
|
||||
<ModalHeader>
|
||||
{mode === 'edit' ? '编辑' : '新建'}投资{label}
|
||||
</ModalHeader>
|
||||
<ModalCloseButton />
|
||||
<ModalBody>
|
||||
<VStack spacing={4}>
|
||||
{/* 日期选择器 */}
|
||||
{showDatePicker && (
|
||||
<FormControl isRequired>
|
||||
<FormLabel>日期</FormLabel>
|
||||
<InputGroup>
|
||||
<InputLeftElement pointerEvents="none">
|
||||
<Icon as={FiCalendar} color={secondaryText} />
|
||||
</InputLeftElement>
|
||||
<Input
|
||||
type="date"
|
||||
value={formData.date}
|
||||
onChange={(e) => setFormData({ ...formData, date: e.target.value })}
|
||||
/>
|
||||
</InputGroup>
|
||||
</FormControl>
|
||||
)}
|
||||
|
||||
{/* 标题 */}
|
||||
<FormControl isRequired>
|
||||
<FormLabel>标题</FormLabel>
|
||||
<Input
|
||||
value={formData.title}
|
||||
onChange={(e) => setFormData({ ...formData, title: e.target.value })}
|
||||
placeholder={getTitlePlaceholder()}
|
||||
/>
|
||||
</FormControl>
|
||||
|
||||
{/* 内容/描述 */}
|
||||
<FormControl>
|
||||
<FormLabel>内容</FormLabel>
|
||||
<Textarea
|
||||
value={formData.content}
|
||||
onChange={(e) => setFormData({ ...formData, content: e.target.value })}
|
||||
placeholder={getContentPlaceholder()}
|
||||
rows={6}
|
||||
/>
|
||||
</FormControl>
|
||||
|
||||
{/* 类型选择 */}
|
||||
{showTypeSelect && (
|
||||
<FormControl>
|
||||
<FormLabel>类型</FormLabel>
|
||||
<Select
|
||||
value={formData.type}
|
||||
onChange={(e) => setFormData({ ...formData, type: e.target.value as EventType })}
|
||||
>
|
||||
<option value="plan">投资计划</option>
|
||||
<option value="review">投资复盘</option>
|
||||
<option value="reminder">提醒事项</option>
|
||||
<option value="analysis">分析任务</option>
|
||||
</Select>
|
||||
</FormControl>
|
||||
)}
|
||||
|
||||
{/* 状态选择 */}
|
||||
{showStatusSelect && (
|
||||
<FormControl>
|
||||
<FormLabel>状态</FormLabel>
|
||||
<Select
|
||||
value={formData.status}
|
||||
onChange={(e) => setFormData({ ...formData, status: e.target.value as EventStatus })}
|
||||
>
|
||||
<option value="active">进行中</option>
|
||||
<option value="completed">已完成</option>
|
||||
<option value="cancelled">已取消</option>
|
||||
</Select>
|
||||
</FormControl>
|
||||
)}
|
||||
|
||||
{/* 重要度选择 */}
|
||||
{showImportance && (
|
||||
<FormControl>
|
||||
<FormLabel>重要度</FormLabel>
|
||||
<Select
|
||||
value={formData.importance}
|
||||
onChange={(e) => setFormData({ ...formData, importance: parseInt(e.target.value) })}
|
||||
>
|
||||
<option value={5}>⭐⭐⭐⭐⭐ 非常重要</option>
|
||||
<option value={4}>⭐⭐⭐⭐ 重要</option>
|
||||
<option value={3}>⭐⭐⭐ 一般</option>
|
||||
<option value={2}>⭐⭐ 次要</option>
|
||||
<option value={1}>⭐ 不重要</option>
|
||||
</Select>
|
||||
</FormControl>
|
||||
)}
|
||||
|
||||
{/* 股票输入 - Tag 模式 */}
|
||||
{stockInputMode === 'tag' && (
|
||||
<FormControl>
|
||||
<FormLabel>相关股票</FormLabel>
|
||||
<HStack>
|
||||
<Input
|
||||
value={stockInput}
|
||||
onChange={(e) => setStockInput(e.target.value)}
|
||||
placeholder="输入股票代码"
|
||||
onKeyPress={(e) => e.key === 'Enter' && handleAddStock()}
|
||||
/>
|
||||
<Button onClick={handleAddStock}>添加</Button>
|
||||
</HStack>
|
||||
<HStack mt={2} spacing={2} flexWrap="wrap">
|
||||
{formData.stocks.map((stock, idx) => (
|
||||
<Tag key={idx} size="sm" colorScheme="blue">
|
||||
<TagLeftIcon as={FiTrendingUp} />
|
||||
<TagLabel>{stock}</TagLabel>
|
||||
<TagCloseButton onClick={() => handleRemoveStock(idx)} />
|
||||
</Tag>
|
||||
))}
|
||||
</HStack>
|
||||
</FormControl>
|
||||
)}
|
||||
|
||||
{/* 股票输入 - 文本模式 */}
|
||||
{stockInputMode === 'text' && (
|
||||
<FormControl>
|
||||
<FormLabel>相关股票（用逗号分隔）</FormLabel>
|
||||
<Input
|
||||
value={stockInput}
|
||||
onChange={(e) => setStockInput(e.target.value)}
|
||||
placeholder="例如：600519,000858,002415"
|
||||
/>
|
||||
</FormControl>
|
||||
)}
|
||||
|
||||
{/* 标签输入 */}
|
||||
{showTags && (
|
||||
<FormControl>
|
||||
<FormLabel>标签</FormLabel>
|
||||
<HStack>
|
||||
<Input
|
||||
value={tagInput}
|
||||
onChange={(e) => setTagInput(e.target.value)}
|
||||
placeholder="输入标签"
|
||||
onKeyPress={(e) => e.key === 'Enter' && handleAddTag()}
|
||||
/>
|
||||
<Button onClick={handleAddTag}>添加</Button>
|
||||
</HStack>
|
||||
<HStack mt={2} spacing={2} flexWrap="wrap">
|
||||
{formData.tags.map((tag, idx) => (
|
||||
<Tag key={idx} size="sm" colorScheme={colorScheme}>
|
||||
<TagLeftIcon as={FiHash} />
|
||||
<TagLabel>{tag}</TagLabel>
|
||||
<TagCloseButton onClick={() => handleRemoveTag(idx)} />
|
||||
</Tag>
|
||||
))}
|
||||
</HStack>
|
||||
</FormControl>
|
||||
)}
|
||||
</VStack>
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<Button variant="ghost" mr={3} onClick={onClose}>
|
||||
取消
|
||||
</Button>
|
||||
<Modal
|
||||
title={`${mode === 'edit' ? '编辑' : '新建'}${eventType === 'plan' ? '投资计划' : '复盘'}`}
|
||||
open={isOpen}
|
||||
onCancel={onClose}
|
||||
width={600}
|
||||
destroyOnClose
|
||||
maskClosable={true}
|
||||
keyboard
|
||||
className="event-form-modal"
|
||||
footer={
|
||||
<div className="modal-footer">
|
||||
<Button
|
||||
colorScheme={colorScheme}
|
||||
type="primary"
|
||||
onClick={handleSave}
|
||||
isDisabled={!formData.title || (showDatePicker && !formData.date)}
|
||||
isLoading={saving}
|
||||
leftIcon={<FiSave />}
|
||||
loading={saving}
|
||||
disabled={saving}
|
||||
>
|
||||
保存
|
||||
{getButtonText()}
|
||||
</Button>
|
||||
</ModalFooter>
|
||||
</ModalContent>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div ref={modalContentRef}>
|
||||
{isOpen && <Form
|
||||
form={form}
|
||||
layout="horizontal"
|
||||
labelCol={{ span: 4 }}
|
||||
wrapperCol={{ span: 20 }}
|
||||
labelAlign="left"
|
||||
requiredMark={false}
|
||||
initialValues={{
|
||||
date: dayjs(),
|
||||
stocks: [],
|
||||
}}
|
||||
>
|
||||
{/* 标题 */}
|
||||
<Form.Item
|
||||
name="title"
|
||||
label={<span style={{ fontWeight: 600 }}>标题 <span style={{ color: '#ff4d4f' }}>*</span></span>}
|
||||
rules={[
|
||||
{ required: true, message: '请输入标题' },
|
||||
{ max: 50, message: '标题不能超过50个字符' },
|
||||
]}
|
||||
>
|
||||
<Input
|
||||
placeholder={getTitlePlaceholder()}
|
||||
maxLength={50}
|
||||
showCount
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
{/* 日期 */}
|
||||
<Form.Item
|
||||
name="date"
|
||||
label={<span style={{ fontWeight: 600 }}>{eventType === 'plan' ? '计划日期' : '复盘日期'} <span style={{ color: '#ff4d4f' }}>*</span></span>}
|
||||
rules={[{ required: true, message: '请选择日期' }]}
|
||||
>
|
||||
<DatePicker
|
||||
style={{ width: '100%' }}
|
||||
format="YYYY-MM-DD"
|
||||
placeholder="选择日期"
|
||||
allowClear={false}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
{/* 描述/内容 - 上下布局 */}
|
||||
<Form.Item
|
||||
name="content"
|
||||
label={<span style={{ fontWeight: 600 }}>{eventType === 'plan' ? '计划详情' : '复盘内容'} <span style={{ color: '#ff4d4f' }}>*</span></span>}
|
||||
rules={[{ required: true, message: '请输入内容' }]}
|
||||
labelCol={{ span: 24 }}
|
||||
wrapperCol={{ span: 24 }}
|
||||
style={{ marginBottom: 8 }}
|
||||
>
|
||||
<TextArea
|
||||
placeholder={getContentPlaceholder()}
|
||||
rows={8}
|
||||
showCount
|
||||
maxLength={2000}
|
||||
style={{ resize: 'vertical' }}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
{/* 模板快捷按钮 - 独立放置在 Form.Item 外部 */}
|
||||
<div style={{ marginBottom: 24 }}>
|
||||
<Space wrap size="small" className="template-buttons">
|
||||
{templates.map((template) => (
|
||||
<Button
|
||||
key={template.label}
|
||||
size="small"
|
||||
onClick={() => handleInsertTemplate(template)}
|
||||
>
|
||||
{template.label}
|
||||
</Button>
|
||||
))}
|
||||
</Space>
|
||||
</div>
|
||||
|
||||
{/* 关联股票 */}
|
||||
<Form.Item
|
||||
name="stocks"
|
||||
label={<span style={{ fontWeight: 600 }}>关联股票</span>}
|
||||
>
|
||||
<Select {...selectProps} />
|
||||
</Form.Item>
|
||||
</Form>}
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -8,185 +8,25 @@
|
||||
* - label: 显示文案
|
||||
*/
|
||||
|
||||
import React, { useState, useEffect, useRef, memo, useCallback } from 'react';
|
||||
import React, { useState, useEffect, useRef, useCallback } from 'react';
|
||||
import {
|
||||
Box,
|
||||
Badge,
|
||||
IconButton,
|
||||
Flex,
|
||||
Grid,
|
||||
Card,
|
||||
CardBody,
|
||||
VStack,
|
||||
HStack,
|
||||
Text,
|
||||
Spinner,
|
||||
Center,
|
||||
Icon,
|
||||
Tag,
|
||||
TagLabel,
|
||||
TagLeftIcon,
|
||||
} from '@chakra-ui/react';
|
||||
import {
|
||||
FiEdit2,
|
||||
FiTrash2,
|
||||
FiFileText,
|
||||
FiCalendar,
|
||||
FiTrendingUp,
|
||||
FiHash,
|
||||
FiCheckCircle,
|
||||
FiXCircle,
|
||||
FiAlertCircle,
|
||||
} from 'react-icons/fi';
|
||||
import dayjs from 'dayjs';
|
||||
import 'dayjs/locale/zh-cn';
|
||||
import { FiFileText } from 'react-icons/fi';
|
||||
|
||||
import { usePlanningData } from './PlanningContext';
|
||||
import { EventFormModal } from './EventFormModal';
|
||||
import type { InvestmentEvent, EventStatus } from '@/types';
|
||||
import { EventCard } from './EventCard';
|
||||
import type { InvestmentEvent } from '@/types';
|
||||
import { logger } from '@/utils/logger';
|
||||
import { getApiBase } from '@/utils/apiConfig';
|
||||
|
||||
dayjs.locale('zh-cn');
|
||||
|
||||
/**
|
||||
* 状态信息接口
|
||||
*/
|
||||
interface StatusInfo {
|
||||
icon: React.ComponentType;
|
||||
color: string;
|
||||
text: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取状态信息
|
||||
*/
|
||||
const getStatusInfo = (status?: EventStatus): StatusInfo => {
|
||||
switch (status) {
|
||||
case 'completed':
|
||||
return { icon: FiCheckCircle, color: 'green', text: '已完成' };
|
||||
case 'cancelled':
|
||||
return { icon: FiXCircle, color: 'red', text: '已取消' };
|
||||
default:
|
||||
return { icon: FiAlertCircle, color: 'blue', text: '进行中' };
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* EventCard Props
|
||||
*/
|
||||
interface EventCardProps {
|
||||
item: InvestmentEvent;
|
||||
colorScheme: string;
|
||||
label: string;
|
||||
textColor: string;
|
||||
secondaryText: string;
|
||||
cardBg: string;
|
||||
onEdit: (item: InvestmentEvent) => void;
|
||||
onDelete: (id: number) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* EventCard 组件（使用 memo 优化渲染性能）
|
||||
*/
|
||||
const EventCard = memo<EventCardProps>(({
|
||||
item,
|
||||
colorScheme,
|
||||
label,
|
||||
textColor,
|
||||
secondaryText,
|
||||
cardBg,
|
||||
onEdit,
|
||||
onDelete,
|
||||
}) => {
|
||||
const statusInfo = getStatusInfo(item.status);
|
||||
|
||||
return (
|
||||
<Card
|
||||
bg={cardBg}
|
||||
shadow="sm"
|
||||
_hover={{ shadow: 'md' }}
|
||||
transition="all 0.2s"
|
||||
>
|
||||
<CardBody p={{ base: 2, md: 3 }}>
|
||||
<VStack align="stretch" spacing={{ base: 2, md: 3 }}>
|
||||
<Flex justify="space-between" align="start">
|
||||
<VStack align="start" spacing={1} flex={1}>
|
||||
<HStack spacing={{ base: 1, md: 2 }}>
|
||||
<Icon as={FiFileText} color={`${colorScheme}.500`} boxSize={{ base: 4, md: 5 }} />
|
||||
<Text fontWeight="bold" fontSize={{ base: 'md', md: 'lg' }}>
|
||||
{item.title}
|
||||
</Text>
|
||||
</HStack>
|
||||
<HStack spacing={{ base: 1, md: 2 }}>
|
||||
<Icon as={FiCalendar} boxSize={{ base: 2.5, md: 3 }} color={secondaryText} />
|
||||
<Text fontSize={{ base: 'xs', md: 'sm' }} color={secondaryText}>
|
||||
{dayjs(item.event_date || item.date).format('YYYY年MM月DD日')}
|
||||
</Text>
|
||||
<Badge
|
||||
colorScheme={statusInfo.color}
|
||||
variant="subtle"
|
||||
fontSize={{ base: 'xs', md: 'sm' }}
|
||||
>
|
||||
{statusInfo.text}
|
||||
</Badge>
|
||||
</HStack>
|
||||
</VStack>
|
||||
<HStack spacing={{ base: 0, md: 1 }}>
|
||||
<IconButton
|
||||
icon={<FiEdit2 />}
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() => onEdit(item)}
|
||||
aria-label={`编辑${label}`}
|
||||
/>
|
||||
<IconButton
|
||||
icon={<FiTrash2 />}
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
colorScheme="red"
|
||||
onClick={() => onDelete(item.id)}
|
||||
aria-label={`删除${label}`}
|
||||
/>
|
||||
</HStack>
|
||||
</Flex>
|
||||
|
||||
{(item.content || item.description) && (
|
||||
<Text fontSize={{ base: 'xs', md: 'sm' }} color={textColor} noOfLines={3}>
|
||||
{item.content || item.description}
|
||||
</Text>
|
||||
)}
|
||||
|
||||
<HStack spacing={{ base: 1, md: 2 }} flexWrap="wrap" gap={1}>
|
||||
{item.stocks && item.stocks.length > 0 && (
|
||||
<>
|
||||
{item.stocks.map((stock, idx) => (
|
||||
<Tag key={idx} size="sm" colorScheme="blue" variant="subtle">
|
||||
<TagLeftIcon as={FiTrendingUp} />
|
||||
<TagLabel>{stock}</TagLabel>
|
||||
</Tag>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
{item.tags && item.tags.length > 0 && (
|
||||
<>
|
||||
{item.tags.map((tag, idx) => (
|
||||
<Tag key={idx} size="sm" colorScheme={colorScheme} variant="subtle">
|
||||
<TagLeftIcon as={FiHash} />
|
||||
<TagLabel>{tag}</TagLabel>
|
||||
</Tag>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</HStack>
|
||||
</VStack>
|
||||
</CardBody>
|
||||
</Card>
|
||||
);
|
||||
});
|
||||
|
||||
EventCard.displayName = 'EventCard';
|
||||
|
||||
/**
|
||||
* EventPanel Props
|
||||
*/
|
||||
@@ -314,7 +154,8 @@ export const EventPanel: React.FC<EventPanelProps> = ({
|
||||
{events.map(event => (
|
||||
<EventCard
|
||||
key={event.id}
|
||||
item={event}
|
||||
event={event}
|
||||
variant="list"
|
||||
colorScheme={colorScheme}
|
||||
label={label}
|
||||
textColor={textColor}
|
||||
@@ -336,14 +177,7 @@ export const EventPanel: React.FC<EventPanelProps> = ({
|
||||
eventType={type}
|
||||
editingEvent={editingItem}
|
||||
onSuccess={loadAllData}
|
||||
colorScheme={colorScheme}
|
||||
label={label}
|
||||
showDatePicker={true}
|
||||
showTypeSelect={false}
|
||||
showStatusSelect={true}
|
||||
showImportance={false}
|
||||
showTags={true}
|
||||
stockInputMode="tag"
|
||||
apiEndpoint="investment-plans"
|
||||
/>
|
||||
</Box>
|
||||
|
||||
Reference in New Issue
Block a user