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

// src/views/Company/components/CompanyOverview/index.tsx
// 公司概览 - 主组件（组合层）

import React from "react";
import { VStack, Spinner, Center, Text } from "@chakra-ui/react";

import { useCompanyOverviewData } from "./hooks/useCompanyOverviewData";
import CompanyHeaderCard from "./CompanyHeaderCard";
import type { CompanyOverviewProps } from "./types";

// 子组件（暂保持 JS）
import BasicInfoTab from "./BasicInfoTab";

/**
 * 公司概览组件
 *
 * 功能：
 * - 显示公司头部信息卡片
 * - 显示基本信息（股权结构、管理层、公告等）
 */
const CompanyOverview: React.FC<CompanyOverviewProps> = ({ stockCode }) => {
  const {
    basicInfo,
    actualControl,
    concentration,
    management,
    topCirculationShareholders,
    topShareholders,
    branches,
    announcements,
    disclosureSchedule,
    loading,
  } = useCompanyOverviewData(stockCode);

  // 加载状态
  if (loading && !basicInfo) {
    return (
      <Center h="300px">
        <VStack spacing={4}>
          <Spinner size="xl" color="blue.500" thickness="4px" />
          <Text>正在加载公司概览数据...</Text>
        </VStack>
      </Center>
    );
  }

  return (
    <VStack spacing={6} align="stretch">
      {/* 公司头部信息卡片 */}
      {basicInfo && <CompanyHeaderCard basicInfo={basicInfo} />}

      {/* 基本信息内容 */}
      <BasicInfoTab
        basicInfo={basicInfo}
        actualControl={actualControl}
        concentration={concentration}
        topShareholders={topShareholders}
        topCirculationShareholders={topCirculationShareholders}
        management={management}
        announcements={announcements}
        branches={branches}
        disclosureSchedule={disclosureSchedule}
        cardBg="white"
        loading={loading}
      />
    </VStack>
  );
};

export default CompanyOverview;