feat(StockQuoteCard): 新增股票对比功能

- 新增 CompareStockInput: 股票搜索输入组件
 - 新增 StockCompareModal: 股票对比弹窗
 - 更新类型定义支持对比功能

 🤖 Generated with [Claude Code](https://claude.com/claude-code)

 Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
2025-12-16 16:15:36 +08:00
parent 804de885e1
commit b25d48e167
5 changed files with 521 additions and 1 deletions

View File

@@ -21,11 +21,13 @@ import {
Divider,
Link,
Icon,
useDisclosure,
} from '@chakra-ui/react';
import { Share2, Calendar, Coins, MapPin, Globe } from 'lucide-react';
import { formatRegisteredCapital, formatDate } from '../CompanyOverview/utils';
import FavoriteButton from '@components/FavoriteButton';
import { CompareStockInput, StockCompareModal } from './components';
import type { StockQuoteCardProps } from './types';
/**
@@ -62,12 +64,33 @@ const StockQuoteCard: React.FC<StockQuoteCardProps> = ({
onWatchlistToggle,
onShare,
basicInfo,
// 对比相关
currentStockInfo,
compareStockInfo,
isCompareLoading = false,
onCompare,
onCloseCompare,
}) => {
// 对比弹窗控制
const { isOpen: isCompareModalOpen, onOpen: openCompareModal, onClose: closeCompareModal } = useDisclosure();
// 处理分享点击
const handleShare = () => {
onShare?.();
};
// 处理对比按钮点击
const handleCompare = (stockCode: string) => {
onCompare?.(stockCode);
openCompareModal();
};
// 处理关闭对比弹窗
const handleCloseCompare = () => {
closeCompareModal();
onCloseCompare?.();
};
// 黑金主题颜色配置
const cardBg = '#1A202C';
const borderColor = '#C9A961';
@@ -139,8 +162,14 @@ const StockQuoteCard: React.FC<StockQuoteCardProps> = ({
)}
</HStack>
{/* 右侧:关注 + 分享 + 时间 */}
{/* 右侧:对比 + 关注 + 分享 + 时间 */}
<HStack spacing={3}>
{/* 股票对比输入 */}
<CompareStockInput
onCompare={handleCompare}
isLoading={isCompareLoading}
currentStockCode={data.code}
/>
<FavoriteButton
isFavorite={isInWatchlist}
isLoading={isWatchlistLoading}
@@ -165,6 +194,17 @@ const StockQuoteCard: React.FC<StockQuoteCardProps> = ({
</HStack>
</Flex>
{/* 股票对比弹窗 */}
<StockCompareModal
isOpen={isCompareModalOpen}
onClose={handleCloseCompare}
currentStock={data.code}
currentStockInfo={currentStockInfo || null}
compareStock={compareStockInfo?.stock_code || ''}
compareStockInfo={compareStockInfo || null}
isLoading={isCompareLoading}
/>
{/* 1:2 布局 */}
<Flex gap={8}>
{/* 左栏:价格信息 (flex=1) */}