feat: 添加股票行情卡片

src/mocks/data/company.js

@@ -691,82 +691,220 @@ export const PINGAN_BANK_DATA = {
         },
         development_timeline: {
             statistics: {
-                positive_events: 6,
-                negative_events: 0,
+                positive_events: 10,
+                negative_events: 3,
                 neutral_events: 2
             },
             events: [
                 {
-                    date: '2024-10-28',
-                    event: '发布2024年三季报',
-                    type: '业绩公告',
+                    event_date: '2024-11-15',
+                    event_title: '获评"最佳零售银行"称号',
+                    event_type: '荣誉奖项',
+                    event_desc: '在《亚洲银行家》评选中荣获"中国最佳零售银行"称号，零售转型战略获行业高度认可',
                     importance: 'high',
-                    impact: '前三季度净利润同比增长12.5%，超市场预期',
-                    change: '+5.2%',
-                    sentiment: 'positive'
+                    impact_metrics: {
+                        impact_score: 75,
+                        is_positive: true
+                    },
+                    related_info: {
+                        financial_impact: '品牌价值提升，预计带动零售业务增长2-3%'
+                    }
                 },
                 {
-                    date: '2024-09-15',
-                    event: '推出AI智能客服系统3.0',
-                    type: '科技创新',
+                    event_date: '2024-10-28',
+                    event_title: '发布2024年三季报',
+                    event_type: '业绩公告',
+                    event_desc: '前三季度实现净利润412.8亿元，同比增长12.5%，超市场预期。零售业务收入占比提升至52.3%',
+                    importance: 'high',
+                    impact_metrics: {
+                        impact_score: 88,
+                        is_positive: true
+                    },
+                    related_info: {
+                        financial_impact: '股价当日上涨5.2%，市值增加约150亿元'
+                    }
+                },
+                {
+                    event_date: '2024-09-20',
+                    event_title: '房地产贷款风险暴露',
+                    event_type: '风险事件',
+                    event_desc: '部分房地产开发贷款出现逾期，计提减值准备约25亿元，不良贷款率小幅上升',
+                    importance: 'high',
+                    impact_metrics: {
+                        impact_score: 65,
+                        is_positive: false
+                    },
+                    related_info: {
+                        financial_impact: '影响当期利润约18亿元，股价下跌2.8%'
+                    }
+                },
+                {
+                    event_date: '2024-09-15',
+                    event_title: '推出AI智能客服系统3.0',
+                    event_type: '科技创新',
+                    event_desc: '新一代AI客服系统上线，集成大语言模型技术，客服效率提升40%，客户满意度达95%',
                     importance: 'medium',
-                    impact: '客服效率提升40%，客户满意度显著提高',
-                    change: '+2.1%',
-                    sentiment: 'positive'
+                    impact_metrics: {
+                        impact_score: 72,
+                        is_positive: true
+                    },
+                    related_info: {
+                        financial_impact: '预计年化降低运营成本约3亿元'
+                    }
                 },
                 {
-                    date: '2024-08-28',
-                    event: '发布2024年中报',
-                    type: '业绩公告',
+                    event_date: '2024-08-28',
+                    event_title: '发布2024年中报',
+                    event_type: '业绩公告',
+                    event_desc: '上半年净利润增长11.2%，达275.6亿元。资产质量保持稳定，不良贷款率1.05%',
                     importance: 'high',
-                    impact: '上半年净利润增长11.2%，资产质量保持稳定',
-                    change: '+3.8%',
-                    sentiment: 'positive'
+                    impact_metrics: {
+                        impact_score: 82,
+                        is_positive: true
+                    },
+                    related_info: {
+                        financial_impact: '股价累计上涨3.8%'
+                    }
                 },
                 {
-                    date: '2024-07-20',
-                    event: '平安理财获批新产品资质',
-                    type: '业务拓展',
+                    event_date: '2024-07-20',
+                    event_title: '平安理财获批新产品资质',
+                    event_type: '业务拓展',
+                    event_desc: '旗下平安理财获批养老理财产品试点资格，成为首批获批的股份制银行理财子公司',
                     importance: 'high',
-                    impact: '财富管理业务布局进一步完善',
-                    change: '+4.5%',
-                    sentiment: 'positive'
+                    impact_metrics: {
+                        impact_score: 78,
+                        is_positive: true
+                    },
+                    related_info: {
+                        financial_impact: '预计为AUM贡献500-800亿元增量'
+                    }
                 },
                 {
-                    date: '2024-06-10',
-                    event: '完成300亿元二级资本债发行',
-                    type: '融资事件',
+                    event_date: '2024-06-25',
+                    event_title: '监管处罚通知',
+                    event_type: '合规事件',
+                    event_desc: '因贷款业务违规被银保监会罚款1200万元，涉及信贷资金违规流入房地产领域',
                     importance: 'medium',
-                    impact: '补充资本实力，支持业务扩张',
-                    change: '+1.8%',
-                    sentiment: 'neutral'
+                    impact_metrics: {
+                        impact_score: 45,
+                        is_positive: false
+                    },
+                    related_info: {
+                        financial_impact: '罚款金额对业绩影响有限，但需加强合规管理'
+                    }
                 },
                 {
-                    date: '2024-04-30',
-                    event: '发布2024年一季报',
-                    type: '业绩公告',
-                    importance: 'high',
-                    impact: '一季度净利润增长10.8%，开门红表现优异',
-                    change: '+4.2%',
-                    sentiment: 'positive'
-                },
-                {
-                    date: '2024-03-15',
-                    event: '零售客户突破1.2亿户',
-                    type: '业务里程碑',
+                    event_date: '2024-06-10',
+                    event_title: '完成300亿元二级资本债发行',
+                    event_type: '融资事件',
+                    event_desc: '成功发行300亿元二级资本债券，票面利率3.15%，认购倍数达2.8倍，市场反响良好',
                     importance: 'medium',
-                    impact: '零售转型成效显著，客户基础进一步夯实',
-                    change: '+2.5%',
-                    sentiment: 'positive'
+                    impact_metrics: {
+                        impact_score: 68,
+                        is_positive: true
+                    },
+                    related_info: {
+                        financial_impact: '资本充足率提升0.35个百分点至13.2%'
+                    }
                 },
                 {
-                    date: '2024-01-20',
-                    event: '获评"2023年度最佳零售银行"',
-                    type: '荣誉奖项',
-                    importance: 'low',
-                    impact: '品牌影响力提升',
-                    change: '+0.8%',
-                    sentiment: 'neutral'
+                    event_date: '2024-05-18',
+                    event_title: '与腾讯云达成战略合作',
+                    event_type: '战略合作',
+                    event_desc: '与腾讯云签署战略合作协议，在云计算、大数据、人工智能等领域开展深度合作',
+                    importance: 'medium',
+                    impact_metrics: {
+                        impact_score: 70,
+                        is_positive: true
+                    },
+                    related_info: {
+                        financial_impact: '预计3年内科技投入效率提升20%'
+                    }
+                },
+                {
+                    event_date: '2024-04-30',
+                    event_title: '发布2024年一季报',
+                    event_type: '业绩公告',
+                    event_desc: '一季度净利润增长10.8%，达138.2亿元。信用卡业务表现亮眼，交易额同比增长18%',
+                    importance: 'high',
+                    impact_metrics: {
+                        impact_score: 80,
+                        is_positive: true
+                    },
+                    related_info: {
+                        financial_impact: '开门红业绩推动股价上涨4.2%'
+                    }
+                },
+                {
+                    event_date: '2024-03-28',
+                    event_title: '高管层人事变动',
+                    event_type: '人事变动',
+                    event_desc: '副行长郭世邦因个人原因辞职，对公业务主管暂由行长冀光恒兼任',
+                    importance: 'medium',
+                    impact_metrics: {
+                        impact_score: 52,
+                        is_positive: false
+                    },
+                    related_info: {
+                        financial_impact: '短期内对公业务战略执行或受影响'
+                    }
+                },
+                {
+                    event_date: '2024-03-15',
+                    event_title: '零售客户突破1.2亿户',
+                    event_type: '业务里程碑',
+                    event_desc: '零售客户数量突破1.2亿户大关，较年初净增800万户，私行客户AUM突破1.5万亿',
+                    importance: 'high',
+                    impact_metrics: {
+                        impact_score: 85,
+                        is_positive: true
+                    },
+                    related_info: {
+                        financial_impact: '零售转型成效显著，客户基础进一步夯实'
+                    }
+                },
+                {
+                    event_date: '2024-02-05',
+                    event_title: '发布2023年年报',
+                    event_type: '业绩公告',
+                    event_desc: '2023年全年净利润464.5亿元，同比增长2.1%。拨备覆盖率277%，资产质量稳健',
+                    importance: 'high',
+                    impact_metrics: {
+                        impact_score: 75,
+                        is_positive: true
+                    },
+                    related_info: {
+                        financial_impact: '分红方案：每股派息0.28元，股息率约4.2%'
+                    }
+                },
+                {
+                    event_date: '2024-01-10',
+                    event_title: '供应链金融平台升级',
+                    event_type: '产品创新',
+                    event_desc: '供应链金融平台完成4.0版本升级，新增区块链存证、智能风控等功能，服务企业超3.5万家',
+                    importance: 'medium',
+                    impact_metrics: {
+                        impact_score: 72,
+                        is_positive: true
+                    },
+                    related_info: {
+                        financial_impact: '供应链金融余额预计增长25%'
+                    }
+                },
+                {
+                    event_date: '2023-12-20',
+                    event_title: '获批设立香港分行',
+                    event_type: '业务拓展',
+                    event_desc: '获中国银保监会批准设立香港分行，标志着国际化战略迈出重要一步',
+                    importance: 'high',
+                    impact_metrics: {
+                        impact_score: 78,
+                        is_positive: true
+                    },
+                    related_info: {
+                        financial_impact: '预计为跨境业务带来新增长点'
+                    }
                 }
             ]
         }

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

@@ -0,0 +1,221 @@
+/**
+ * StockQuoteCard - 股票行情卡片组件
+ *
+ * 展示股票的实时行情、关键指标和主力动态
+ */
+
+import React from 'react';
+import {
+  Box,
+  Card,
+  CardBody,
+  Flex,
+  HStack,
+  VStack,
+  Text,
+  Badge,
+  Progress,
+  Skeleton,
+  useColorModeValue,
+} 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 = useColorModeValue('white', 'gray.800');
+  const borderColor = useColorModeValue('gray.200', 'gray.700');
+  const labelColor = useColorModeValue('gray.500', 'gray.400');
+  const valueColor = useColorModeValue('gray.800', 'gray.100');
+  const sectionTitleColor = useColorModeValue('gray.600', 'gray.300');
+
+  // 涨跌颜色
+  const priceColor = data.changePercent >= 0 ? 'green.500' : 'red.500';
+  const inflowColor = data.mainNetInflow >= 0 ? 'green.500' : 'red.500';
+
+  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 py={4} px={6}>
+        {/* 顶部：股票名称 + 更新时间 */}
+        <Flex justify="space-between" align="center" mb={4}>
+          <HStack spacing={3}>
+            <Text fontSize="xl" fontWeight="bold" color={valueColor}>
+              {data.name}
+            </Text>
+            <Text fontSize="md" color={labelColor}>
+              ({data.code})
+            </Text>
+            {data.indexTags.map((tag) => (
+              <Badge
+                key={tag}
+                variant="outline"
+                colorScheme="gray"
+                fontSize="xs"
+                px={2}
+              >
+                {tag}
+              </Badge>
+            ))}
+          </HStack>
+          <Text fontSize="sm" color={labelColor}>
+            更新时间：{data.updateTime}
+          </Text>
+        </Flex>
+
+        {/* 三栏布局 */}
+        <Flex gap={8}>
+          {/* 左栏：价格信息 */}
+          <Box flex="1">
+            <HStack align="baseline" spacing={3} mb={3}>
+              <Text fontSize="3xl" fontWeight="bold" color={priceColor}>
+                {formatPrice(data.currentPrice)}
+              </Text>
+              <Badge
+                colorScheme={data.changePercent >= 0 ? 'green' : 'red'}
+                fontSize="md"
+                px={2}
+                py={0.5}
+              >
+                {formatChangePercent(data.changePercent)}
+              </Badge>
+            </HStack>
+            <HStack spacing={6} color={labelColor} fontSize="sm">
+              <Text>
+                今开：
+                <Text as="span" color={valueColor} fontWeight="medium">
+                  {formatPrice(data.todayOpen)}
+                </Text>
+              </Text>
+              <Text>
+                昨收：
+                <Text as="span" color={valueColor} fontWeight="medium">
+                  {formatPrice(data.yesterdayClose)}
+                </Text>
+              </Text>
+            </HStack>
+          </Box>
+
+          {/* 中栏：关键指标 */}
+          <Box flex="1" borderLeftWidth="1px" borderColor={borderColor} pl={8}>
+            <Text
+              fontSize="sm"
+              fontWeight="medium"
+              color={sectionTitleColor}
+              mb={3}
+            >
+              关键指标
+            </Text>
+            <VStack align="stretch" spacing={2} fontSize="sm">
+              <HStack justify="space-between">
+                <Text color={labelColor}>市盈率(PE)：</Text>
+                <Text color={valueColor} fontWeight="medium">
+                  {data.pe.toFixed(2)}
+                </Text>
+              </HStack>
+              <HStack justify="space-between">
+                <Text color={labelColor}>市净率(PB)：</Text>
+                <Text color={valueColor} fontWeight="medium">
+                  {data.pb.toFixed(2)}
+                </Text>
+              </HStack>
+              <HStack justify="space-between">
+                <Text color={labelColor}>流通市值：</Text>
+                <Text color={valueColor} fontWeight="medium">
+                  {data.marketCap}
+                </Text>
+              </HStack>
+              <HStack justify="space-between">
+                <Text color={labelColor}>52周波动：</Text>
+                <Text color={valueColor} fontWeight="medium">
+                  {formatPrice(data.week52Low)}-{formatPrice(data.week52High)}
+                </Text>
+              </HStack>
+            </VStack>
+          </Box>
+
+          {/* 右栏：主力动态 */}
+          <Box flex="1" borderLeftWidth="1px" borderColor={borderColor} pl={8}>
+            <Text
+              fontSize="sm"
+              fontWeight="medium"
+              color={sectionTitleColor}
+              mb={3}
+            >
+              主力动态
+            </Text>
+            <VStack align="stretch" spacing={2} fontSize="sm">
+              <HStack justify="space-between">
+                <Text color={labelColor}>主力净流入：</Text>
+                <Text color={inflowColor} fontWeight="medium">
+                  {formatNetInflow(data.mainNetInflow)}
+                </Text>
+              </HStack>
+              <HStack justify="space-between">
+                <Text color={labelColor}>机构持仓：</Text>
+                <Text color={valueColor} fontWeight="medium">
+                  {data.institutionHolding.toFixed(2)}%
+                </Text>
+              </HStack>
+              {/* 买卖比例条 */}
+              <Box mt={1}>
+                <Progress
+                  value={data.buyRatio}
+                  size="sm"
+                  colorScheme="green"
+                  bg="red.400"
+                  borderRadius="full"
+                />
+                <HStack justify="space-between" mt={1} fontSize="xs">
+                  <Text color="green.500">买入{data.buyRatio}%</Text>
+                  <Text color="red.500">卖出{data.sellRatio}%</Text>
+                </HStack>
+              </Box>
+            </VStack>
+          </Box>
+        </Flex>
+      </CardBody>
+    </Card>
+  );
+};
+
+export default StockQuoteCard;

src/views/Company/components/StockQuoteCard/mockData.ts

@@ -0,0 +1,33 @@
+import type { StockQuoteCardData } from './types';
+
+/**
+ * 贵州茅台 Mock 数据
+ */
+export const mockStockQuoteData: StockQuoteCardData = {
+  // 基础信息
+  name: '贵州茅台',
+  code: '600519.SH',
+  indexTags: ['沪深300'],
+
+  // 价格信息
+  currentPrice: 2178.5,
+  changePercent: 3.65,
+  todayOpen: 2156.0,
+  yesterdayClose: 2101.0,
+
+  // 关键指标
+  pe: 38.62,
+  pb: 14.82,
+  marketCap: '2.73万亿',
+  week52Low: 1980,
+  week52High: 2350,
+
+  // 主力动态
+  mainNetInflow: 1.28,
+  institutionHolding: 72.35,
+  buyRatio: 85,
+  sellRatio: 15,
+
+  // 更新时间
+  updateTime: '2025-12-03 14:30:25',
+};

src/views/Company/components/StockQuoteCard/types.ts

@@ -0,0 +1,43 @@
+/**
+ * StockQuoteCard 组件类型定义
+ */
+
+/**
+ * 股票行情卡片数据
+ */
+export interface StockQuoteCardData {
+  // 基础信息
+  name: string; // 股票名称
+  code: string; // 股票代码
+  indexTags: string[]; // 指数标签（如 沪深300、上证50）
+
+  // 价格信息
+  currentPrice: number; // 当前价格
+  changePercent: number; // 涨跌幅（百分比，如 3.65 表示 +3.65%）
+  todayOpen: number; // 今开
+  yesterdayClose: number; // 昨收
+
+  // 关键指标
+  pe: number; // 市盈率
+  pb: number; // 市净率
+  marketCap: string; // 流通市值（已格式化，如 "2.73万亿"）
+  week52Low: number; // 52周最低
+  week52High: number; // 52周最高
+
+  // 主力动态
+  mainNetInflow: number; // 主力净流入（亿）
+  institutionHolding: number; // 机构持仓比例（百分比）
+  buyRatio: number; // 买入比例（百分比）
+  sellRatio: number; // 卖出比例（百分比）
+
+  // 更新时间
+  updateTime: string; // 格式：YYYY-MM-DD HH:mm:ss
+}
+
+/**
+ * StockQuoteCard 组件 Props
+ */
+export interface StockQuoteCardProps {
+  data?: StockQuoteCardData;
+  isLoading?: boolean;
+}

src/views/Company/index.js

@@ -11,6 +11,7 @@ import { useCompanyEvents } from './hooks/useCompanyEvents';
 
 // 页面组件
 import CompanyHeader from './components/CompanyHeader';
+import StockQuoteCard from './components/StockQuoteCard';
 import CompanyTabs from './components/CompanyTabs';
 
 /**
@@ -80,6 +81,9 @@ const CompanyIndex = () => {
           bgColor={bgColor}
         />
 
+        {/* 股票行情卡片：价格、关键指标、主力动态 */}
+        <StockQuoteCard />
+
         {/* Tab 切换区域：概览、行情、财务、预测 */}
         <CompanyTabs
           stockCode={stockCode}