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>

src/views/Company/components/CompanyOverview/CompanyHeaderCard.tsx

@@ -1,135 +0,0 @@
-// src/views/Company/components/CompanyOverview/CompanyHeaderCard.tsx
-// 公司头部信息卡片组件 - 黑金主题
-
-import React from "react";
-import {
-  VStack,
-  HStack,
-  Text,
-  Card,
-  CardBody,
-  Heading,
-  SimpleGrid,
-  Divider,
-  Icon,
-  Box,
-  Link,
-} from "@chakra-ui/react";
-import {
-  FaBuilding,
-  FaMapMarkerAlt,
-  FaCalendarAlt,
-  FaGlobe,
-  FaCoins,
-} from "react-icons/fa";
-import { ExternalLinkIcon } from "@chakra-ui/icons";
-
-import type { CompanyHeaderCardProps } from "./types";
-import { formatRegisteredCapital, formatDate } from "./utils";
-
-// 黑金主题色
-const THEME = {
-  bg: "gray.900",
-  cardBg: "gray.800",
-  gold: "#D4AF37",
-  goldLight: "#F0D78C",
-  textPrimary: "white",
-  textSecondary: "gray.400",
-  border: "rgba(212, 175, 55, 0.3)",
-};
-
-/**
- * 公司头部信息卡片组件
- * 三区块布局：身份分类 | 关键属性 | 公司介绍
- * 黑金主题
- */
-const CompanyHeaderCard: React.FC<CompanyHeaderCardProps> = ({ basicInfo }) => {
-  return (
-    <Card
-      bg={THEME.cardBg}
-      shadow="xl"
-      borderTop="3px solid"
-      borderTopColor={THEME.gold}
-      borderRadius="lg"
-    >
-      <CardBody px={2}>
-        <VStack align="stretch" spacing={4}>
-
-          {/* 区块二：关键属性网格 */}
-          <SimpleGrid columns={{ base: 2, md: 4 }} spacing={4}>
-            <HStack>
-              <Icon as={FaCalendarAlt} color={THEME.gold} boxSize={4} />
-              <Box>
-                <Text fontSize="xs" color={THEME.textSecondary}>成立日期</Text>
-                <Text fontSize="sm" fontWeight="bold" color={THEME.textPrimary}>
-                  {formatDate(basicInfo.establish_date)}
-                </Text>
-              </Box>
-            </HStack>
-            <HStack>
-              <Icon as={FaCoins} color={THEME.gold} boxSize={4} />
-              <Box>
-                <Text fontSize="xs" color={THEME.textSecondary}>注册资本</Text>
-                <Text fontSize="sm" fontWeight="bold" color={THEME.goldLight}>
-                  {formatRegisteredCapital(basicInfo.reg_capital)}
-                </Text>
-              </Box>
-            </HStack>
-            <HStack>
-              <Icon as={FaMapMarkerAlt} color={THEME.gold} boxSize={4} />
-              <Box>
-                <Text fontSize="xs" color={THEME.textSecondary}>所在地</Text>
-                <Text fontSize="sm" fontWeight="bold" color={THEME.textPrimary}>
-                  {basicInfo.province} {basicInfo.city}
-                </Text>
-              </Box>
-            </HStack>
-            <HStack>
-              <Icon as={FaGlobe} color={THEME.gold} boxSize={4} />
-              <Box>
-                <Text fontSize="xs" color={THEME.textSecondary}>官网</Text>
-                <Link
-                  href={basicInfo.website}
-                  isExternal
-                  color={THEME.goldLight}
-                  fontSize="sm"
-                  fontWeight="bold"
-                  noOfLines={1}
-                  _hover={{ color: THEME.gold }}
-                >
-                  {basicInfo.website ? (
-                    <>访问官网 <ExternalLinkIcon mx="2px" /></>
-                  ) : (
-                    "暂无"
-                  )}
-                </Link>
-              </Box>
-            </HStack>
-          </SimpleGrid>
-
-          <Divider borderColor={THEME.border} />
-
-          {/* 区块三：公司介绍 */}
-          <Box>
-            <Text fontSize="sm" color={THEME.textSecondary} noOfLines={2}>
-              {basicInfo.company_intro}
-            </Text>
-            {basicInfo.company_intro && basicInfo.company_intro.length > 100 && (
-              <Link
-                color={THEME.goldLight}
-                fontSize="sm"
-                mt={1}
-                display="inline-block"
-                _hover={{ color: THEME.gold }}
-              >
-                查看完整介绍
-              </Link>
-            )}
-          </Box>
-        </VStack>
-      </CardBody>
-    </Card>
-  );
-};
-
-export default CompanyHeaderCard;

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

@@ -1,57 +1,29 @@
 // src/views/Company/components/CompanyOverview/index.tsx
-// 公司概览 - 主组件（组合层）
-// 懒加载优化：只加载头部卡片数据，BasicInfoTab 内部懒加载各 Tab 数据
+// 公司档案 - 主组件（组合层）
 
 import React from "react";
-import { VStack, Spinner, Center, Text } from "@chakra-ui/react";
+import { VStack } from "@chakra-ui/react";
 
 import { useBasicInfo } from "./hooks/useBasicInfo";
-import CompanyHeaderCard from "./CompanyHeaderCard";
 import type { CompanyOverviewProps } from "./types";
 
 // 子组件（暂保持 JS）
 import BasicInfoTab from "./BasicInfoTab";
 
 /**
- * 公司概览组件
+ * 公司档案组件
  *
  * 功能：
- * - 显示公司头部信息卡片（useBasicInfo）
  * - 显示基本信息 Tab（内部懒加载各子 Tab 数据）
  *
  * 懒加载策略：
- * - 主组件只加载 basicInfo（1 个 API）
- * - BasicInfoTab 内部根据 Tab 切换懒加载其他数据
+ * - BasicInfoTab 内部根据 Tab 切换懒加载数据
  */
 const CompanyOverview: React.FC<CompanyOverviewProps> = ({ stockCode }) => {
-  const { basicInfo, loading, error } = useBasicInfo(stockCode);
-
-  // 加载状态
-  if (loading && !basicInfo) {
-    return (
-      <Center h="300px">
-        <VStack spacing={4}>
-          <Spinner size="xl" color="blue.500" thickness="4px" />
-          <Text>正在加载公司概览数据...</Text>
-        </VStack>
-      </Center>
-    );
-  }
-
-  // 错误状态
-  if (error && !basicInfo) {
-    return (
-      <Center h="300px">
-        <Text color="red.500">{error}</Text>
-      </Center>
-    );
-  }
+  const { basicInfo } = useBasicInfo(stockCode);
 
   return (
     <VStack spacing={6} align="stretch">
-      {/* 公司头部信息卡片 */}
-      {basicInfo && <CompanyHeaderCard basicInfo={basicInfo} />}
-
       {/* 基本信息内容 - 传入 stockCode，内部懒加载各 Tab 数据 */}
       <BasicInfoTab
         stockCode={stockCode}

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

@@ -131,9 +131,3 @@ export interface CompanyOverviewProps {
   stockCode?: string;
 }
 
-/**
- * CompanyHeaderCard 组件 Props
- */
-export interface CompanyHeaderCardProps {
-  basicInfo: BasicInfo;
-}

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

@@ -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>
   );

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

@@ -2,6 +2,8 @@
  * StockQuoteCard 组件类型定义
  */
 
+import type { BasicInfo } from '../CompanyOverview/types';
+
 /**
  * 股票行情卡片数据
  */
@@ -53,4 +55,6 @@ export interface StockQuoteCardProps {
   onWatchlistToggle?: () => void; // 自选股切换回调
   // 分享
   onShare?: () => void; // 分享回调
+  // 公司基本信息
+  basicInfo?: BasicInfo;
 }

src/views/Company/index.js

@@ -11,6 +11,7 @@ import { useCompanyStock } from './hooks/useCompanyStock';
 import { useCompanyWatchlist } from './hooks/useCompanyWatchlist';
 import { useCompanyEvents } from './hooks/useCompanyEvents';
 import { useStockQuote } from './hooks/useStockQuote';
+import { useBasicInfo } from './components/CompanyOverview/hooks/useBasicInfo';
 
 // 页面组件
 import CompanyHeader from './components/CompanyHeader';
@@ -46,6 +47,9 @@ const CompanyIndex = () => {
   // 2. 获取股票行情数据
   const { data: quoteData, isLoading: isQuoteLoading } = useStockQuote(stockCode);
 
+  // 2.1 获取公司基本信息
+  const { basicInfo } = useBasicInfo(stockCode);
+
   // 3. 再初始化事件追踪（传入 stockCode）
   const {
     trackStockSearched,
@@ -88,13 +92,14 @@ const CompanyIndex = () => {
           bgColor="#1A202C"
         />
 
-        {/* 股票行情卡片：价格、关键指标、主力动态、自选股按钮 */}
+        {/* 股票行情卡片：价格、关键指标、主力动态、公司信息 */}
         <StockQuoteCard
           data={quoteData}
           isLoading={isQuoteLoading}
           isInWatchlist={isInWatchlist}
           isWatchlistLoading={isWatchlistLoading}
           onWatchlistToggle={handleWatchlistToggle}
+          basicInfo={basicInfo}
         />
 
         {/* Tab 切换区域：概览、行情、财务、预测 */}