refactor: 整合 CompanyHeaderCard 到 StockQuoteCard，优化布局对齐
- 将公司基本信息整合到 StockQuoteCard 内部 - 采用 1:2 Flex 布局确保上下竖线对齐 - 删除废弃的 CompanyHeaderCard 组件 - 清理 types.ts 中的 CompanyHeaderCardProps 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
@@ -18,8 +18,12 @@ import {
|
||||
Skeleton,
|
||||
IconButton,
|
||||
Tooltip,
|
||||
Divider,
|
||||
Link,
|
||||
Icon,
|
||||
} from '@chakra-ui/react';
|
||||
import { Share2 } from 'lucide-react';
|
||||
import { Share2, Calendar, Coins, MapPin, Globe } from 'lucide-react';
|
||||
import { formatRegisteredCapital, formatDate } from '../CompanyOverview/utils';
|
||||
|
||||
import FavoriteButton from '@components/FavoriteButton';
|
||||
import type { StockQuoteCardProps } from './types';
|
||||
@@ -57,6 +61,7 @@ const StockQuoteCard: React.FC<StockQuoteCardProps> = ({
|
||||
isWatchlistLoading = false,
|
||||
onWatchlistToggle,
|
||||
onShare,
|
||||
basicInfo,
|
||||
}) => {
|
||||
// 处理分享点击
|
||||
const handleShare = () => {
|
||||
@@ -160,10 +165,10 @@ const StockQuoteCard: React.FC<StockQuoteCardProps> = ({
|
||||
</HStack>
|
||||
</Flex>
|
||||
|
||||
{/* 三栏布局 */}
|
||||
{/* 1:2 布局 */}
|
||||
<Flex gap={8}>
|
||||
{/* 左栏：价格信息 */}
|
||||
<Box flex="1">
|
||||
{/* 左栏：价格信息 (flex=1) */}
|
||||
<Box flex="1" minWidth="0">
|
||||
<HStack align="baseline" spacing={3} mb={3}>
|
||||
<Text fontSize="48px" fontWeight="bold" color={priceColor}>
|
||||
{formatPrice(data.currentPrice)}
|
||||
@@ -212,86 +217,148 @@ const StockQuoteCard: React.FC<StockQuoteCardProps> = ({
|
||||
</HStack>
|
||||
</Box>
|
||||
|
||||
{/* 中栏：关键指标 */}
|
||||
<Box flex="1" borderLeftWidth="1px" borderColor={borderColor} pl={8}>
|
||||
<Text
|
||||
fontSize="14px"
|
||||
fontWeight="bold"
|
||||
color={sectionTitleColor}
|
||||
mb={3}
|
||||
>
|
||||
关键指标
|
||||
</Text>
|
||||
<VStack align="stretch" spacing={2} fontSize="14px">
|
||||
<HStack justify="space-between">
|
||||
<Text color={labelColor}>市盈率(PE)：</Text>
|
||||
<Text color={valueColor} fontWeight="bold" fontSize="16px">
|
||||
{data.pe.toFixed(2)}
|
||||
</Text>
|
||||
</HStack>
|
||||
<HStack justify="space-between">
|
||||
<Text color={labelColor}>市净率(PB)：</Text>
|
||||
<Text color={valueColor} fontWeight="bold" fontSize="16px">
|
||||
{data.pb.toFixed(2)}
|
||||
</Text>
|
||||
</HStack>
|
||||
<HStack justify="space-between">
|
||||
<Text color={labelColor}>流通市值：</Text>
|
||||
<Text color={valueColor} fontWeight="bold" fontSize="16px">
|
||||
{data.marketCap}
|
||||
</Text>
|
||||
</HStack>
|
||||
<HStack justify="space-between">
|
||||
<Text color={labelColor}>52周波动：</Text>
|
||||
<Text color={valueColor} fontWeight="bold" fontSize="16px">
|
||||
{formatPrice(data.week52Low)}-{formatPrice(data.week52High)}
|
||||
</Text>
|
||||
</HStack>
|
||||
</VStack>
|
||||
</Box>
|
||||
{/* 右栏：关键指标 + 主力动态 (flex=2) */}
|
||||
<Flex flex="2" minWidth="0" gap={8} borderLeftWidth="1px" borderColor={borderColor} pl={8}>
|
||||
{/* 关键指标 */}
|
||||
<Box flex="1">
|
||||
<Text
|
||||
fontSize="14px"
|
||||
fontWeight="bold"
|
||||
color={sectionTitleColor}
|
||||
mb={3}
|
||||
>
|
||||
关键指标
|
||||
</Text>
|
||||
<VStack align="stretch" spacing={2} fontSize="14px">
|
||||
<HStack justify="space-between">
|
||||
<Text color={labelColor}>市盈率(PE)：</Text>
|
||||
<Text color={valueColor} fontWeight="bold" fontSize="16px">
|
||||
{data.pe.toFixed(2)}
|
||||
</Text>
|
||||
</HStack>
|
||||
<HStack justify="space-between">
|
||||
<Text color={labelColor}>市净率(PB)：</Text>
|
||||
<Text color={valueColor} fontWeight="bold" fontSize="16px">
|
||||
{data.pb.toFixed(2)}
|
||||
</Text>
|
||||
</HStack>
|
||||
<HStack justify="space-between">
|
||||
<Text color={labelColor}>流通市值：</Text>
|
||||
<Text color={valueColor} fontWeight="bold" fontSize="16px">
|
||||
{data.marketCap}
|
||||
</Text>
|
||||
</HStack>
|
||||
<HStack justify="space-between">
|
||||
<Text color={labelColor}>52周波动：</Text>
|
||||
<Text color={valueColor} fontWeight="bold" fontSize="16px">
|
||||
{formatPrice(data.week52Low)}-{formatPrice(data.week52High)}
|
||||
</Text>
|
||||
</HStack>
|
||||
</VStack>
|
||||
</Box>
|
||||
|
||||
{/* 右栏：主力动态 */}
|
||||
<Box flex="1" borderLeftWidth="1px" borderColor={borderColor} pl={8}>
|
||||
<Text
|
||||
fontSize="14px"
|
||||
fontWeight="bold"
|
||||
color={sectionTitleColor}
|
||||
mb={3}
|
||||
>
|
||||
主力动态
|
||||
</Text>
|
||||
<VStack align="stretch" spacing={2} fontSize="14px">
|
||||
<HStack justify="space-between">
|
||||
<Text color={labelColor}>主力净流入：</Text>
|
||||
<Text color={inflowColor} fontWeight="bold" fontSize="16px">
|
||||
{formatNetInflow(data.mainNetInflow)}
|
||||
</Text>
|
||||
</HStack>
|
||||
<HStack justify="space-between">
|
||||
<Text color={labelColor}>机构持仓：</Text>
|
||||
<Text color={valueColor} fontWeight="bold" fontSize="16px">
|
||||
{data.institutionHolding.toFixed(2)}%
|
||||
</Text>
|
||||
</HStack>
|
||||
{/* 买卖比例条 */}
|
||||
<Box mt={1}>
|
||||
<Progress
|
||||
value={data.buyRatio}
|
||||
size="sm"
|
||||
sx={{
|
||||
'& > div': { bg: upColor },
|
||||
}}
|
||||
bg={downColor}
|
||||
borderRadius="full"
|
||||
/>
|
||||
<HStack justify="space-between" mt={1} fontSize="14px">
|
||||
<Text color={upColor}>买入{data.buyRatio}%</Text>
|
||||
<Text color={downColor}>卖出{data.sellRatio}%</Text>
|
||||
{/* 主力动态 */}
|
||||
<Box flex="1" borderLeftWidth="1px" borderColor={borderColor} pl={8}>
|
||||
<Text
|
||||
fontSize="14px"
|
||||
fontWeight="bold"
|
||||
color={sectionTitleColor}
|
||||
mb={3}
|
||||
>
|
||||
主力动态
|
||||
</Text>
|
||||
<VStack align="stretch" spacing={2} fontSize="14px">
|
||||
<HStack justify="space-between">
|
||||
<Text color={labelColor}>主力净流入：</Text>
|
||||
<Text color={inflowColor} fontWeight="bold" fontSize="16px">
|
||||
{formatNetInflow(data.mainNetInflow)}
|
||||
</Text>
|
||||
</HStack>
|
||||
<HStack justify="space-between">
|
||||
<Text color={labelColor}>机构持仓：</Text>
|
||||
<Text color={valueColor} fontWeight="bold" fontSize="16px">
|
||||
{data.institutionHolding.toFixed(2)}%
|
||||
</Text>
|
||||
</HStack>
|
||||
{/* 买卖比例条 */}
|
||||
<Box mt={1}>
|
||||
<Progress
|
||||
value={data.buyRatio}
|
||||
size="sm"
|
||||
sx={{
|
||||
'& > div': { bg: upColor },
|
||||
}}
|
||||
bg={downColor}
|
||||
borderRadius="full"
|
||||
/>
|
||||
<HStack justify="space-between" mt={1} fontSize="14px">
|
||||
<Text color={upColor}>买入{data.buyRatio}%</Text>
|
||||
<Text color={downColor}>卖出{data.sellRatio}%</Text>
|
||||
</HStack>
|
||||
</Box>
|
||||
</VStack>
|
||||
</Box>
|
||||
</Flex>
|
||||
</Flex>
|
||||
|
||||
{/* 公司信息区块 - 1:2 布局 */}
|
||||
{basicInfo && (
|
||||
<>
|
||||
<Divider borderColor={borderColor} my={4} />
|
||||
<Flex gap={8}>
|
||||
{/* 左侧：公司关键属性 (flex=1) */}
|
||||
<Box flex="1" minWidth="0">
|
||||
<HStack spacing={4} flexWrap="wrap" fontSize="14px">
|
||||
<HStack spacing={1}>
|
||||
<Icon as={Calendar} color={labelColor} boxSize={4} />
|
||||
<Text color={labelColor}>成立：</Text>
|
||||
<Text color={valueColor} fontWeight="bold">
|
||||
{formatDate(basicInfo.establish_date)}
|
||||
</Text>
|
||||
</HStack>
|
||||
<HStack spacing={1}>
|
||||
<Icon as={Coins} color={labelColor} boxSize={4} />
|
||||
<Text color={labelColor}>注册资本：</Text>
|
||||
<Text color={valueColor} fontWeight="bold">
|
||||
{formatRegisteredCapital(basicInfo.reg_capital)}
|
||||
</Text>
|
||||
</HStack>
|
||||
<HStack spacing={1}>
|
||||
<Icon as={MapPin} color={labelColor} boxSize={4} />
|
||||
<Text color={labelColor}>所在地：</Text>
|
||||
<Text color={valueColor} fontWeight="bold">
|
||||
{basicInfo.province} {basicInfo.city}
|
||||
</Text>
|
||||
</HStack>
|
||||
<HStack spacing={1}>
|
||||
<Icon as={Globe} color={labelColor} boxSize={4} />
|
||||
{basicInfo.website ? (
|
||||
<Link
|
||||
href={basicInfo.website}
|
||||
isExternal
|
||||
color={valueColor}
|
||||
fontWeight="bold"
|
||||
_hover={{ color: labelColor }}
|
||||
>
|
||||
访问官网
|
||||
</Link>
|
||||
) : (
|
||||
<Text color={valueColor}>暂无官网</Text>
|
||||
)}
|
||||
</HStack>
|
||||
</HStack>
|
||||
</Box>
|
||||
</VStack>
|
||||
</Box>
|
||||
</Flex>
|
||||
|
||||
{/* 右侧：公司简介 (flex=2) */}
|
||||
<Box flex="2" minWidth="0" borderLeftWidth="1px" borderColor={borderColor} pl={8}>
|
||||
<Text fontSize="14px" color={labelColor} noOfLines={2}>
|
||||
<Text as="span" fontWeight="bold" color={valueColor}>公司简介：</Text>
|
||||
{basicInfo.company_intro || '暂无'}
|
||||
</Text>
|
||||
</Box>
|
||||
</Flex>
|
||||
</>
|
||||
)}
|
||||
</CardBody>
|
||||
</Card>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user