feat: 创建 PlansPanel.tsx
新建: src/views/Dashboard/components/PlansPanel.tsx 复制原文件第 607-1030 行代码 添加完整类型定义 表单状态使用 PlanFormData 类型
This commit is contained in:
zdl
506
src/views/Dashboard/components/PlansPanel.tsx
Normal file
506
src/views/Dashboard/components/PlansPanel.tsx
Normal file
@@ -0,0 +1,506 @@
|
|||||||
|
/**
|
||||||
|
* PlansPanel - 投资计划列表面板组件
|
||||||
|
* 显示、编辑和管理投资计划
|
||||||
|
*/
|
||||||
|
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
import {
|
||||||
|
Box,
|
||||||
|
Button,
|
||||||
|
Badge,
|
||||||
|
IconButton,
|
||||||
|
Flex,
|
||||||
|
Grid,
|
||||||
|
Card,
|
||||||
|
CardBody,
|
||||||
|
Modal,
|
||||||
|
ModalOverlay,
|
||||||
|
ModalContent,
|
||||||
|
ModalHeader,
|
||||||
|
ModalFooter,
|
||||||
|
ModalBody,
|
||||||
|
ModalCloseButton,
|
||||||
|
useDisclosure,
|
||||||
|
VStack,
|
||||||
|
HStack,
|
||||||
|
Text,
|
||||||
|
Spinner,
|
||||||
|
Center,
|
||||||
|
Icon,
|
||||||
|
Input,
|
||||||
|
InputGroup,
|
||||||
|
InputLeftElement,
|
||||||
|
FormControl,
|
||||||
|
FormLabel,
|
||||||
|
Textarea,
|
||||||
|
Select,
|
||||||
|
Tag,
|
||||||
|
TagLabel,
|
||||||
|
TagLeftIcon,
|
||||||
|
TagCloseButton,
|
||||||
|
} from '@chakra-ui/react';
|
||||||
|
import {
|
||||||
|
FiPlus,
|
||||||
|
FiEdit2,
|
||||||
|
FiTrash2,
|
||||||
|
FiSave,
|
||||||
|
FiTarget,
|
||||||
|
FiCalendar,
|
||||||
|
FiTrendingUp,
|
||||||
|
FiHash,
|
||||||
|
FiCheckCircle,
|
||||||
|
FiXCircle,
|
||||||
|
FiAlertCircle,
|
||||||
|
} from 'react-icons/fi';
|
||||||
|
import dayjs from 'dayjs';
|
||||||
|
import 'dayjs/locale/zh-cn';
|
||||||
|
|
||||||
|
import { usePlanningData } from './PlanningContext';
|
||||||
|
import type { InvestmentEvent, PlanFormData, EventStatus } 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* PlansPanel 组件
|
||||||
|
* 计划列表面板，显示所有投资计划
|
||||||
|
*/
|
||||||
|
export const PlansPanel: React.FC = () => {
|
||||||
|
const {
|
||||||
|
allEvents,
|
||||||
|
loadAllData,
|
||||||
|
loading,
|
||||||
|
toast,
|
||||||
|
textColor,
|
||||||
|
secondaryText,
|
||||||
|
cardBg,
|
||||||
|
borderColor,
|
||||||
|
} = usePlanningData();
|
||||||
|
|
||||||
|
const { isOpen, onOpen, onClose } = useDisclosure();
|
||||||
|
const [editingItem, setEditingItem] = useState<InvestmentEvent | null>(null);
|
||||||
|
const [formData, setFormData] = useState<PlanFormData>({
|
||||||
|
date: dayjs().format('YYYY-MM-DD'),
|
||||||
|
title: '',
|
||||||
|
content: '',
|
||||||
|
type: 'plan',
|
||||||
|
stocks: [],
|
||||||
|
tags: [],
|
||||||
|
status: 'active',
|
||||||
|
});
|
||||||
|
const [stockInput, setStockInput] = useState<string>('');
|
||||||
|
const [tagInput, setTagInput] = useState<string>('');
|
||||||
|
|
||||||
|
// 筛选计划列表（排除系统事件）
|
||||||
|
const plans = allEvents.filter(event => event.type === 'plan' && event.source !== 'future');
|
||||||
|
|
||||||
|
// 打开编辑/新建模态框
|
||||||
|
const handleOpenModal = (item: InvestmentEvent | null = null): void => {
|
||||||
|
if (item) {
|
||||||
|
setEditingItem(item);
|
||||||
|
setFormData({
|
||||||
|
date: dayjs(item.event_date || item.date).format('YYYY-MM-DD'),
|
||||||
|
title: item.title,
|
||||||
|
content: item.description || item.content || '',
|
||||||
|
type: 'plan',
|
||||||
|
stocks: item.stocks || [],
|
||||||
|
tags: item.tags || [],
|
||||||
|
status: item.status || 'active',
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
setEditingItem(null);
|
||||||
|
setFormData({
|
||||||
|
date: dayjs().format('YYYY-MM-DD'),
|
||||||
|
title: '',
|
||||||
|
content: '',
|
||||||
|
type: 'plan',
|
||||||
|
stocks: [],
|
||||||
|
tags: [],
|
||||||
|
status: 'active',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
onOpen();
|
||||||
|
};
|
||||||
|
|
||||||
|
// 保存数据
|
||||||
|
const handleSave = async (): Promise<void> => {
|
||||||
|
try {
|
||||||
|
const base = getApiBase();
|
||||||
|
|
||||||
|
const url = editingItem
|
||||||
|
? base + `/api/account/investment-plans/${editingItem.id}`
|
||||||
|
: base + '/api/account/investment-plans';
|
||||||
|
|
||||||
|
const method = editingItem ? 'PUT' : 'POST';
|
||||||
|
|
||||||
|
const response = await fetch(url, {
|
||||||
|
method,
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
credentials: 'include',
|
||||||
|
body: JSON.stringify(formData),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
logger.info('PlansPanel', `${editingItem ? '更新' : '创建'}成功`, {
|
||||||
|
itemId: editingItem?.id,
|
||||||
|
title: formData.title,
|
||||||
|
});
|
||||||
|
toast({
|
||||||
|
title: editingItem ? '更新成功' : '创建成功',
|
||||||
|
status: 'success',
|
||||||
|
duration: 2000,
|
||||||
|
});
|
||||||
|
onClose();
|
||||||
|
loadAllData();
|
||||||
|
} else {
|
||||||
|
throw new Error('保存失败');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
logger.error('PlansPanel', 'handleSave', error, {
|
||||||
|
itemId: editingItem?.id,
|
||||||
|
title: formData?.title
|
||||||
|
});
|
||||||
|
toast({
|
||||||
|
title: '保存失败',
|
||||||
|
description: '无法保存数据',
|
||||||
|
status: 'error',
|
||||||
|
duration: 3000,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 删除数据
|
||||||
|
const handleDelete = async (id: number): Promise<void> => {
|
||||||
|
if (!window.confirm('确定要删除吗？')) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const base = getApiBase();
|
||||||
|
|
||||||
|
const response = await fetch(base + `/api/account/investment-plans/${id}`, {
|
||||||
|
method: 'DELETE',
|
||||||
|
credentials: 'include',
|
||||||
|
});
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
logger.info('PlansPanel', '删除成功', { itemId: id });
|
||||||
|
toast({
|
||||||
|
title: '删除成功',
|
||||||
|
status: 'success',
|
||||||
|
duration: 2000,
|
||||||
|
});
|
||||||
|
loadAllData();
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
logger.error('PlansPanel', 'handleDelete', error, { itemId: id });
|
||||||
|
toast({
|
||||||
|
title: '删除失败',
|
||||||
|
status: 'error',
|
||||||
|
duration: 3000,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 添加股票
|
||||||
|
const handleAddStock = (): void => {
|
||||||
|
if (stockInput.trim() && !formData.stocks.includes(stockInput.trim())) {
|
||||||
|
setFormData({
|
||||||
|
...formData,
|
||||||
|
stocks: [...formData.stocks, stockInput.trim()],
|
||||||
|
});
|
||||||
|
setStockInput('');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 添加标签
|
||||||
|
const handleAddTag = (): void => {
|
||||||
|
if (tagInput.trim() && !formData.tags.includes(tagInput.trim())) {
|
||||||
|
setFormData({
|
||||||
|
...formData,
|
||||||
|
tags: [...formData.tags, tagInput.trim()],
|
||||||
|
});
|
||||||
|
setTagInput('');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 获取状态信息
|
||||||
|
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: '进行中' };
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 渲染单个卡片
|
||||||
|
const renderCard = (item: InvestmentEvent): JSX.Element => {
|
||||||
|
const statusInfo = getStatusInfo(item.status);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card
|
||||||
|
key={item.id}
|
||||||
|
bg={cardBg}
|
||||||
|
shadow="sm"
|
||||||
|
_hover={{ shadow: 'md' }}
|
||||||
|
transition="all 0.2s"
|
||||||
|
>
|
||||||
|
<CardBody>
|
||||||
|
<VStack align="stretch" spacing={3}>
|
||||||
|
<Flex justify="space-between" align="start">
|
||||||
|
<VStack align="start" spacing={1} flex={1}>
|
||||||
|
<HStack>
|
||||||
|
<Icon as={FiTarget} color="purple.500" />
|
||||||
|
<Text fontWeight="bold" fontSize="lg">
|
||||||
|
{item.title}
|
||||||
|
</Text>
|
||||||
|
</HStack>
|
||||||
|
<HStack spacing={2}>
|
||||||
|
<Icon as={FiCalendar} boxSize={3} color={secondaryText} />
|
||||||
|
<Text fontSize="sm" color={secondaryText}>
|
||||||
|
{dayjs(item.event_date || item.date).format('YYYY年MM月DD日')}
|
||||||
|
</Text>
|
||||||
|
<Badge
|
||||||
|
colorScheme={statusInfo.color}
|
||||||
|
variant="subtle"
|
||||||
|
>
|
||||||
|
{statusInfo.text}
|
||||||
|
</Badge>
|
||||||
|
</HStack>
|
||||||
|
</VStack>
|
||||||
|
<HStack>
|
||||||
|
<IconButton
|
||||||
|
icon={<FiEdit2 />}
|
||||||
|
size="sm"
|
||||||
|
variant="ghost"
|
||||||
|
onClick={() => handleOpenModal(item)}
|
||||||
|
aria-label="编辑计划"
|
||||||
|
/>
|
||||||
|
<IconButton
|
||||||
|
icon={<FiTrash2 />}
|
||||||
|
size="sm"
|
||||||
|
variant="ghost"
|
||||||
|
colorScheme="red"
|
||||||
|
onClick={() => handleDelete(item.id)}
|
||||||
|
aria-label="删除计划"
|
||||||
|
/>
|
||||||
|
</HStack>
|
||||||
|
</Flex>
|
||||||
|
|
||||||
|
{(item.content || item.description) && (
|
||||||
|
<Text fontSize="sm" color={textColor} noOfLines={3}>
|
||||||
|
{item.content || item.description}
|
||||||
|
</Text>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<HStack spacing={2} flexWrap="wrap">
|
||||||
|
{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="purple" variant="subtle">
|
||||||
|
<TagLeftIcon as={FiHash} />
|
||||||
|
<TagLabel>{tag}</TagLabel>
|
||||||
|
</Tag>
|
||||||
|
))}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</HStack>
|
||||||
|
</VStack>
|
||||||
|
</CardBody>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box>
|
||||||
|
<VStack align="stretch" spacing={4}>
|
||||||
|
<Flex justify="flex-end">
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
colorScheme="purple"
|
||||||
|
leftIcon={<FiPlus />}
|
||||||
|
onClick={() => handleOpenModal(null)}
|
||||||
|
>
|
||||||
|
新建计划
|
||||||
|
</Button>
|
||||||
|
</Flex>
|
||||||
|
|
||||||
|
{loading ? (
|
||||||
|
<Center py={8}>
|
||||||
|
<Spinner size="xl" color="purple.500" />
|
||||||
|
</Center>
|
||||||
|
) : plans.length === 0 ? (
|
||||||
|
<Center py={8}>
|
||||||
|
<VStack spacing={3}>
|
||||||
|
<Icon as={FiTarget} boxSize={12} color="gray.300" />
|
||||||
|
<Text color={secondaryText}>暂无投资计划</Text>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
colorScheme="purple"
|
||||||
|
leftIcon={<FiPlus />}
|
||||||
|
onClick={() => handleOpenModal(null)}
|
||||||
|
>
|
||||||
|
创建第一个计划
|
||||||
|
</Button>
|
||||||
|
</VStack>
|
||||||
|
</Center>
|
||||||
|
) : (
|
||||||
|
<Grid templateColumns={{ base: '1fr', md: 'repeat(2, 1fr)' }} gap={4}>
|
||||||
|
{plans.map(renderCard)}
|
||||||
|
</Grid>
|
||||||
|
)}
|
||||||
|
</VStack>
|
||||||
|
|
||||||
|
{/* 编辑/新建模态框 */}
|
||||||
|
{isOpen && (
|
||||||
|
<Modal isOpen={isOpen} onClose={onClose} size="xl" closeOnOverlayClick={false} closeOnEsc={true}>
|
||||||
|
<ModalOverlay />
|
||||||
|
<ModalContent>
|
||||||
|
<ModalHeader>
|
||||||
|
{editingItem ? '编辑' : '新建'}投资计划
|
||||||
|
</ModalHeader>
|
||||||
|
<ModalCloseButton />
|
||||||
|
<ModalBody>
|
||||||
|
<VStack spacing={4}>
|
||||||
|
<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="例如：布局新能源板块"
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
|
||||||
|
<FormControl>
|
||||||
|
<FormLabel>内容</FormLabel>
|
||||||
|
<Textarea
|
||||||
|
value={formData.content}
|
||||||
|
onChange={(e) => setFormData({ ...formData, content: e.target.value })}
|
||||||
|
placeholder="详细描述您的投资计划..."
|
||||||
|
rows={6}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
|
||||||
|
<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={() => setFormData({
|
||||||
|
...formData,
|
||||||
|
stocks: formData.stocks.filter((_, i) => i !== idx)
|
||||||
|
})}
|
||||||
|
/>
|
||||||
|
</Tag>
|
||||||
|
))}
|
||||||
|
</HStack>
|
||||||
|
</FormControl>
|
||||||
|
|
||||||
|
<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="purple">
|
||||||
|
<TagLeftIcon as={FiHash} />
|
||||||
|
<TagLabel>{tag}</TagLabel>
|
||||||
|
<TagCloseButton
|
||||||
|
onClick={() => setFormData({
|
||||||
|
...formData,
|
||||||
|
tags: formData.tags.filter((_, i) => i !== idx)
|
||||||
|
})}
|
||||||
|
/>
|
||||||
|
</Tag>
|
||||||
|
))}
|
||||||
|
</HStack>
|
||||||
|
</FormControl>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
</VStack>
|
||||||
|
</ModalBody>
|
||||||
|
<ModalFooter>
|
||||||
|
<Button variant="ghost" mr={3} onClick={onClose}>
|
||||||
|
取消
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
colorScheme="purple"
|
||||||
|
onClick={handleSave}
|
||||||
|
isDisabled={!formData.title || !formData.date}
|
||||||
|
leftIcon={<FiSave />}
|
||||||
|
>
|
||||||
|
保存
|
||||||
|
</Button>
|
||||||
|
</ModalFooter>
|
||||||
|
</ModalContent>
|
||||||
|
</Modal>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
};
|
||||||
Reference in New Issue
Block a user