feat: StockQuoteCard 根据股票代码获取真实行情数据

- 新增 useStockQuote Hook 获取股票行情
- Company 页面使用 Hook 并传递数据给 StockQuoteCard
- StockQuoteCard 处理 null 数据显示骨架屏
- 股票代码变化时自动刷新行情数据

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

Co-Authored-By: Claude <noreply@anthropic.com>

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

@@ -23,7 +23,6 @@ import { Share2 } from 'lucide-react';
 
 import FavoriteButton from '@components/FavoriteButton';
 import type { StockQuoteCardProps } from './types';
-import { mockStockQuoteData } from './mockData';
 
 /**
  * 格式化价格显示
@@ -52,7 +51,7 @@ const formatNetInflow = (value: number): string => {
 };
 
 const StockQuoteCard: React.FC<StockQuoteCardProps> = ({
-  data = mockStockQuoteData,
+  data,
   isLoading = false,
   isInWatchlist = false,
   isWatchlistLoading = false,
@@ -74,19 +73,25 @@ const StockQuoteCard: React.FC<StockQuoteCardProps> = ({
   // 涨跌颜色（红涨绿跌）
   const upColor = '#F44336';    // 涨 - 红色
   const downColor = '#4CAF50';  // 跌 - 绿色
-  const priceColor = data.changePercent >= 0 ? upColor : downColor;
-  const inflowColor = data.mainNetInflow >= 0 ? upColor : downColor;
 
-  if (isLoading) {
+  // 加载中或无数据时显示骨架屏
+  if (isLoading || !data) {
     return (
       <Card bg={cardBg} shadow="sm" borderWidth="1px" borderColor={borderColor}>
         <CardBody>
-          <Skeleton height="120px" />
+          <VStack spacing={4} align="stretch">
+            <Skeleton height="30px" width="200px" />
+            <Skeleton height="60px" />
+            <Skeleton height="80px" />
+          </VStack>
         </CardBody>
       </Card>
     );
   }
 
+  const priceColor = data.changePercent >= 0 ? upColor : downColor;
+  const inflowColor = data.mainNetInflow >= 0 ? upColor : downColor;
+
   return (
     <Card bg={cardBg} shadow="sm" borderWidth="1px" borderColor={borderColor}>
       <CardBody>
@@ -97,7 +102,7 @@ const StockQuoteCard: React.FC<StockQuoteCardProps> = ({
             <Text fontSize="22px" fontWeight="bold" color={valueColor}>
               {data.name}（{data.code}）
             </Text>
-            {data.indexTags.length > 0 && (
+            {data.indexTags?.length > 0 && (
               <>
                 <Text color={labelColor} fontSize="22px" fontWeight="light">|</Text>
                 <Text fontSize="16px" color={labelColor}>
@@ -128,7 +133,7 @@ const StockQuoteCard: React.FC<StockQuoteCardProps> = ({
               />
             </Tooltip>
             <Text fontSize="14px" color={labelColor}>
-              {data.updateTime.split(' ')[1]}
+              {data.updateTime?.split(' ')[1] || '--:--'}
             </Text>
           </HStack>
         </Flex>

src/views/Company/hooks/useStockQuote.js

@@ -0,0 +1,100 @@
+// src/views/Company/hooks/useStockQuote.js
+// 股票行情数据获取 Hook
+
+import { useState, useEffect } from 'react';
+import { stockService } from '@services/eventService';
+import { logger } from '@utils/logger';
+
+/**
+ * 将 API 响应数据转换为 StockQuoteCard 所需格式
+ */
+const transformQuoteData = (apiData, stockCode) => {
+  if (!apiData) return null;
+
+  return {
+    // 基础信息
+    name: apiData.name || apiData.stock_name || '未知',
+    code: apiData.code || apiData.stock_code || stockCode,
+    indexTags: apiData.index_tags || apiData.indexTags || [],
+
+    // 价格信息
+    currentPrice: apiData.current_price || apiData.currentPrice || apiData.close || 0,
+    changePercent: apiData.change_percent || apiData.changePercent || apiData.pct_chg || 0,
+    todayOpen: apiData.today_open || apiData.todayOpen || apiData.open || 0,
+    yesterdayClose: apiData.yesterday_close || apiData.yesterdayClose || apiData.pre_close || 0,
+    todayHigh: apiData.today_high || apiData.todayHigh || apiData.high || 0,
+    todayLow: apiData.today_low || apiData.todayLow || apiData.low || 0,
+
+    // 关键指标
+    pe: apiData.pe || apiData.pe_ttm || 0,
+    pb: apiData.pb || apiData.pb_mrq || 0,
+    marketCap: apiData.market_cap || apiData.marketCap || apiData.circ_mv || '0',
+    week52Low: apiData.week52_low || apiData.week52Low || 0,
+    week52High: apiData.week52_high || apiData.week52High || 0,
+
+    // 主力动态
+    mainNetInflow: apiData.main_net_inflow || apiData.mainNetInflow || 0,
+    institutionHolding: apiData.institution_holding || apiData.institutionHolding || 0,
+    buyRatio: apiData.buy_ratio || apiData.buyRatio || 50,
+    sellRatio: apiData.sell_ratio || apiData.sellRatio || 50,
+
+    // 更新时间
+    updateTime: apiData.update_time || apiData.updateTime || new Date().toLocaleString(),
+  };
+};
+
+/**
+ * 股票行情数据获取 Hook
+ *
+ * @param {string} stockCode - 股票代码
+ * @returns {Object} { data, isLoading, error, refetch }
+ */
+export const useStockQuote = (stockCode) => {
+  const [data, setData] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    if (!stockCode) {
+      setData(null);
+      return;
+    }
+
+    const fetchQuote = async () => {
+      setIsLoading(true);
+      setError(null);
+
+      try {
+        logger.debug('useStockQuote', '获取股票行情', { stockCode });
+        const quotes = await stockService.getQuotes([stockCode]);
+
+        // API 返回格式: { [stockCode]: quoteData }
+        const quoteData = quotes?.[stockCode] || quotes;
+        const transformedData = transformQuoteData(quoteData, stockCode);
+
+        logger.debug('useStockQuote', '行情数据转换完成', { stockCode, hasData: !!transformedData });
+        setData(transformedData);
+      } catch (err) {
+        logger.error('useStockQuote', '获取行情失败', err);
+        setError(err);
+        setData(null);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchQuote();
+  }, [stockCode]);
+
+  // 手动刷新
+  const refetch = () => {
+    if (stockCode) {
+      setData(null);
+      // 触发 useEffect 重新执行
+    }
+  };
+
+  return { data, isLoading, error, refetch };
+};
+
+export default useStockQuote;

src/views/Company/index.js

@@ -10,6 +10,7 @@ import { loadAllStocks } from '@store/slices/stockSlice';
 import { useCompanyStock } from './hooks/useCompanyStock';
 import { useCompanyWatchlist } from './hooks/useCompanyWatchlist';
 import { useCompanyEvents } from './hooks/useCompanyEvents';
+import { useStockQuote } from './hooks/useStockQuote';
 
 // 页面组件
 import CompanyHeader from './components/CompanyHeader';
@@ -42,7 +43,10 @@ const CompanyIndex = () => {
     dispatch(loadAllStocks());
   }, [dispatch]);
 
-  // 2. 再初始化事件追踪（传入 stockCode）
+  // 2. 获取股票行情数据
+  const { data: quoteData, isLoading: isQuoteLoading } = useStockQuote(stockCode);
+
+  // 3. 再初始化事件追踪（传入 stockCode）
   const {
     trackStockSearched,
     trackTabChanged,
@@ -86,6 +90,8 @@ const CompanyIndex = () => {
 
         {/* 股票行情卡片：价格、关键指标、主力动态、自选股按钮 */}
         <StockQuoteCard
+          data={quoteData}
+          isLoading={isQuoteLoading}
           isInWatchlist={isInWatchlist}
           isWatchlistLoading={isWatchlistLoading}
           onWatchlistToggle={handleWatchlistToggle}