vf_react/src/views/Company/components/StockQuoteCard/index.tsx

/**
 * StockQuoteCard - 股票行情卡片组件
 *
 * 展示股票的实时行情、关键指标和主力动态
 */

import React from 'react';
import {
  Box,
  Card,
  CardBody,
  Flex,
  HStack,
  VStack,
  Text,
  Badge,
  Progress,
  Skeleton,
} from '@chakra-ui/react';

import type { StockQuoteCardProps } from './types';
import { mockStockQuoteData } from './mockData';

/**
 * 格式化价格显示
 */
const formatPrice = (price: number): string => {
  return price.toLocaleString('zh-CN', {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2,
  });
};

/**
 * 格式化涨跌幅显示
 */
const formatChangePercent = (percent: number): string => {
  const sign = percent >= 0 ? '+' : '';
  return `${sign}${percent.toFixed(2)}%`;
};

/**
 * 格式化主力净流入显示
 */
const formatNetInflow = (value: number): string => {
  const sign = value >= 0 ? '+' : '';
  return `${sign}${value.toFixed(2)}亿`;
};

const StockQuoteCard: React.FC<StockQuoteCardProps> = ({
  data = mockStockQuoteData,
  isLoading = false,
}) => {
  // 黑金主题颜色配置
  const cardBg = '#1A202C';
  const borderColor = '#C9A961';
  const labelColor = '#C9A961';
  const valueColor = '#F4D03F';
  const sectionTitleColor = '#F4D03F';

  // 涨跌颜色（红涨绿跌）
  const upColor = '#F44336';    // 涨 - 红色
  const downColor = '#4CAF50';  // 跌 - 绿色
  const priceColor = data.changePercent >= 0 ? upColor : downColor;
  const inflowColor = data.mainNetInflow >= 0 ? upColor : downColor;

  if (isLoading) {
    return (
      <Card bg={cardBg} shadow="sm" borderWidth="1px" borderColor={borderColor}>
        <CardBody>
          <Skeleton height="120px" />
        </CardBody>
      </Card>
    );
  }

  return (
    <Card bg={cardBg} shadow="sm" borderWidth="1px" borderColor={borderColor}>
      <CardBody>
        {/* 顶部：股票名称 + 更新时间 */}
        <Flex justify="space-between" align="center">
          <HStack spacing={3}>
            <Text fontSize="24px" fontWeight="bold" color={valueColor}>
              {data.name}
            </Text>
            <Text fontSize="24px" fontWeight="bold" color={labelColor}>
              ({data.code})
            </Text>
            {data.indexTags.map((tag) => (
              <Badge
                key={tag}
                variant="outline"
                borderColor={borderColor}
                color={labelColor}
                fontSize="14px"
                px={2}
              >
                {tag}
              </Badge>
            ))}
          </HStack>
          <Text fontSize="14px" color={labelColor}>
            更新时间：{data.updateTime}
          </Text>
        </Flex>

        {/* 三栏布局 */}
        <Flex gap={8}>
          {/* 左栏：价格信息 */}
          <Box flex="1">
            <HStack align="baseline" spacing={3} mb={3}>
              <Text fontSize="48px" fontWeight="bold" color={priceColor}>
                {formatPrice(data.currentPrice)}
              </Text>
              <Badge
                bg={data.changePercent >= 0 ? upColor : downColor}
                color="#FFFFFF"
                fontSize="20px"
                fontWeight="bold"
                px={3}
                py={1}
                borderRadius="md"
              >
                {formatChangePercent(data.changePercent)}
              </Badge>
            </HStack>
            <HStack spacing={6} fontSize="14px">
              <Text color={labelColor}>
                今开：
                <Text as="span" color={valueColor} fontWeight="bold" fontSize="16px">
                  {formatPrice(data.todayOpen)}
                </Text>
              </Text>
              <Text color={labelColor}>
                昨收：
                <Text as="span" color={valueColor} fontWeight="bold" fontSize="16px">
                  {formatPrice(data.yesterdayClose)}
                </Text>
              </Text>
            </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>

          {/* 右栏：主力动态 */}
          <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>
      </CardBody>
    </Card>
  );
};

export default StockQuoteCard;