feat(Center): 新增 FUIEventCard 毛玻璃风格事件卡片
- 融合 ReviewCard 的 UI 风格（毛玻璃 + 金色主题） - 支持编辑、删除、展开描述等功能 - 使用 FUI_THEME 常量统一管理主题色 - 用于复盘列表的高级视觉呈现 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
255
src/views/Center/components/FUIEventCard.tsx
Normal file
255
src/views/Center/components/FUIEventCard.tsx
Normal file
@@ -0,0 +1,255 @@
|
|||||||
|
/**
|
||||||
|
* FUIEventCard - 毛玻璃风格投资事件卡片组件
|
||||||
|
*
|
||||||
|
* 融合 ReviewCard 的 UI 风格（毛玻璃 + 金色主题）
|
||||||
|
* 与 EventCard 的功能（编辑、删除、展开描述）
|
||||||
|
*
|
||||||
|
* 用于复盘列表的高级视觉呈现
|
||||||
|
*/
|
||||||
|
|
||||||
|
import React, { useState, useEffect, useRef, memo } from 'react';
|
||||||
|
import {
|
||||||
|
Box,
|
||||||
|
IconButton,
|
||||||
|
Flex,
|
||||||
|
VStack,
|
||||||
|
HStack,
|
||||||
|
Text,
|
||||||
|
Tag,
|
||||||
|
TagLabel,
|
||||||
|
TagLeftIcon,
|
||||||
|
Button,
|
||||||
|
} from '@chakra-ui/react';
|
||||||
|
import {
|
||||||
|
FiEdit2,
|
||||||
|
FiTrash2,
|
||||||
|
FiCalendar,
|
||||||
|
FiTrendingUp,
|
||||||
|
FiChevronDown,
|
||||||
|
FiChevronUp,
|
||||||
|
} from 'react-icons/fi';
|
||||||
|
import { FileText, Heart, Target } from 'lucide-react';
|
||||||
|
import dayjs from 'dayjs';
|
||||||
|
import 'dayjs/locale/zh-cn';
|
||||||
|
|
||||||
|
import type { InvestmentEvent } from '@/types';
|
||||||
|
|
||||||
|
dayjs.locale('zh-cn');
|
||||||
|
|
||||||
|
// 主题颜色常量（与 ReviewCard 保持一致）
|
||||||
|
const FUI_THEME = {
|
||||||
|
bg: 'rgba(26, 26, 46, 0.7)',
|
||||||
|
border: 'rgba(212, 175, 55, 0.15)',
|
||||||
|
borderHover: 'rgba(212, 175, 55, 0.3)',
|
||||||
|
text: {
|
||||||
|
primary: 'rgba(255, 255, 255, 0.95)',
|
||||||
|
secondary: 'rgba(255, 255, 255, 0.6)',
|
||||||
|
muted: 'rgba(255, 255, 255, 0.4)',
|
||||||
|
},
|
||||||
|
accent: '#D4AF37', // 金色
|
||||||
|
icon: '#F59E0B', // 橙色图标
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* FUIEventCard Props
|
||||||
|
*/
|
||||||
|
export interface FUIEventCardProps {
|
||||||
|
/** 事件数据 */
|
||||||
|
event: InvestmentEvent;
|
||||||
|
/** 主题颜色 */
|
||||||
|
colorScheme?: string;
|
||||||
|
/** 显示标签（用于 aria-label） */
|
||||||
|
label?: string;
|
||||||
|
/** 编辑回调 */
|
||||||
|
onEdit?: (event: InvestmentEvent) => void;
|
||||||
|
/** 删除回调 */
|
||||||
|
onDelete?: (id: number) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 描述最大显示行数 */
|
||||||
|
const MAX_LINES = 3;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* FUIEventCard 组件
|
||||||
|
*/
|
||||||
|
export const FUIEventCard = memo<FUIEventCardProps>(({
|
||||||
|
event,
|
||||||
|
colorScheme = 'orange',
|
||||||
|
label = '复盘',
|
||||||
|
onEdit,
|
||||||
|
onDelete,
|
||||||
|
}) => {
|
||||||
|
// 展开/收起状态
|
||||||
|
const [isExpanded, setIsExpanded] = useState(false);
|
||||||
|
const [isOverflow, setIsOverflow] = useState(false);
|
||||||
|
const descriptionRef = useRef<HTMLParagraphElement>(null);
|
||||||
|
|
||||||
|
// 获取描述内容
|
||||||
|
const description = event.description || event.content || '';
|
||||||
|
|
||||||
|
// 检测描述是否溢出
|
||||||
|
useEffect(() => {
|
||||||
|
const el = descriptionRef.current;
|
||||||
|
if (el && description) {
|
||||||
|
const lineHeight = parseInt(getComputedStyle(el).lineHeight) || 20;
|
||||||
|
const maxHeight = lineHeight * MAX_LINES;
|
||||||
|
setIsOverflow(el.scrollHeight > maxHeight + 5);
|
||||||
|
} else {
|
||||||
|
setIsOverflow(false);
|
||||||
|
}
|
||||||
|
}, [description]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box
|
||||||
|
bg={FUI_THEME.bg}
|
||||||
|
borderRadius="lg"
|
||||||
|
p={4}
|
||||||
|
border="1px solid"
|
||||||
|
borderColor={FUI_THEME.border}
|
||||||
|
backdropFilter="blur(8px)"
|
||||||
|
transition="all 0.3s ease"
|
||||||
|
_hover={{
|
||||||
|
borderColor: FUI_THEME.borderHover,
|
||||||
|
transform: 'translateY(-2px)',
|
||||||
|
boxShadow: '0 4px 12px rgba(212, 175, 55, 0.15)',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<VStack align="stretch" spacing={3}>
|
||||||
|
{/* 头部区域：图标 + 标题 + 操作按钮 */}
|
||||||
|
<Flex justify="space-between" align="start" gap={2}>
|
||||||
|
<HStack spacing={2} flex={1}>
|
||||||
|
<Box
|
||||||
|
as={FileText}
|
||||||
|
boxSize={4}
|
||||||
|
color={FUI_THEME.icon}
|
||||||
|
flexShrink={0}
|
||||||
|
/>
|
||||||
|
<Text
|
||||||
|
fontSize="sm"
|
||||||
|
fontWeight="bold"
|
||||||
|
color={FUI_THEME.text.primary}
|
||||||
|
noOfLines={1}
|
||||||
|
>
|
||||||
|
[{event.title}]
|
||||||
|
</Text>
|
||||||
|
</HStack>
|
||||||
|
|
||||||
|
{/* 编辑/删除按钮 */}
|
||||||
|
{(onEdit || onDelete) && (
|
||||||
|
<HStack spacing={0}>
|
||||||
|
{onEdit && (
|
||||||
|
<IconButton
|
||||||
|
icon={<FiEdit2 size={14} />}
|
||||||
|
size="xs"
|
||||||
|
variant="ghost"
|
||||||
|
color={FUI_THEME.text.secondary}
|
||||||
|
_hover={{ color: FUI_THEME.accent, bg: 'rgba(212, 175, 55, 0.1)' }}
|
||||||
|
onClick={() => onEdit(event)}
|
||||||
|
aria-label={`编辑${label}`}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{onDelete && (
|
||||||
|
<IconButton
|
||||||
|
icon={<FiTrash2 size={14} />}
|
||||||
|
size="xs"
|
||||||
|
variant="ghost"
|
||||||
|
color={FUI_THEME.text.secondary}
|
||||||
|
_hover={{ color: '#EF4444', bg: 'rgba(239, 68, 68, 0.1)' }}
|
||||||
|
onClick={() => onDelete(event.id)}
|
||||||
|
aria-label={`删除${label}`}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</HStack>
|
||||||
|
)}
|
||||||
|
</Flex>
|
||||||
|
|
||||||
|
{/* 日期行 */}
|
||||||
|
<HStack spacing={2}>
|
||||||
|
<FiCalendar size={12} color={FUI_THEME.text.muted} />
|
||||||
|
<Text fontSize="xs" color={FUI_THEME.text.secondary}>
|
||||||
|
{dayjs(event.event_date || event.date).format('YYYY年MM月DD日')}
|
||||||
|
</Text>
|
||||||
|
</HStack>
|
||||||
|
|
||||||
|
{/* 描述内容（可展开/收起） */}
|
||||||
|
{description && (
|
||||||
|
<Box>
|
||||||
|
<HStack spacing={1} align="start">
|
||||||
|
<Text color={FUI_THEME.text.muted} fontSize="xs">•</Text>
|
||||||
|
{event.type === 'plan' ? (
|
||||||
|
<>
|
||||||
|
<Box as={Target} boxSize={3} color={FUI_THEME.accent} flexShrink={0} mt="2px" />
|
||||||
|
<Text color={FUI_THEME.text.secondary} fontSize="xs" flexShrink={0}>
|
||||||
|
计划内容:
|
||||||
|
</Text>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<Box as={Heart} boxSize={3} color="#EF4444" flexShrink={0} mt="2px" />
|
||||||
|
<Text color={FUI_THEME.text.secondary} fontSize="xs" flexShrink={0}>
|
||||||
|
心得:
|
||||||
|
</Text>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</HStack>
|
||||||
|
<Text
|
||||||
|
ref={descriptionRef}
|
||||||
|
fontSize="xs"
|
||||||
|
color={FUI_THEME.text.primary}
|
||||||
|
noOfLines={isExpanded ? undefined : MAX_LINES}
|
||||||
|
whiteSpace="pre-wrap"
|
||||||
|
mt={1}
|
||||||
|
pl={5}
|
||||||
|
>
|
||||||
|
{description}
|
||||||
|
</Text>
|
||||||
|
{isOverflow && (
|
||||||
|
<Button
|
||||||
|
size="xs"
|
||||||
|
variant="ghost"
|
||||||
|
color={FUI_THEME.accent}
|
||||||
|
mt={1}
|
||||||
|
ml={4}
|
||||||
|
_hover={{ bg: 'rgba(212, 175, 55, 0.1)' }}
|
||||||
|
rightIcon={isExpanded ? <FiChevronUp /> : <FiChevronDown />}
|
||||||
|
onClick={() => setIsExpanded(!isExpanded)}
|
||||||
|
>
|
||||||
|
{isExpanded ? '收起' : '展开'}
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 股票标签 */}
|
||||||
|
{event.stocks && event.stocks.length > 0 && (
|
||||||
|
<HStack spacing={2} flexWrap="wrap" gap={1}>
|
||||||
|
<Text fontSize="xs" color={FUI_THEME.text.secondary}>
|
||||||
|
相关股票:
|
||||||
|
</Text>
|
||||||
|
{event.stocks.map((stock, idx) => {
|
||||||
|
const stockCode = typeof stock === 'string' ? stock : stock.code;
|
||||||
|
const displayText = typeof stock === 'string' ? stock : `${stock.name}(${stock.code})`;
|
||||||
|
return (
|
||||||
|
<Tag
|
||||||
|
key={stockCode || idx}
|
||||||
|
size="sm"
|
||||||
|
bg="rgba(212, 175, 55, 0.1)"
|
||||||
|
color={FUI_THEME.accent}
|
||||||
|
border="1px solid"
|
||||||
|
borderColor="rgba(212, 175, 55, 0.2)"
|
||||||
|
>
|
||||||
|
<TagLeftIcon as={FiTrendingUp} boxSize={3} />
|
||||||
|
<TagLabel fontSize="xs">{displayText}</TagLabel>
|
||||||
|
</Tag>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</HStack>
|
||||||
|
)}
|
||||||
|
</VStack>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
FUIEventCard.displayName = 'FUIEventCard';
|
||||||
|
|
||||||
|
export default FUIEventCard;
|
||||||
Reference in New Issue
Block a user