公司介绍 财务数据

src/routes/stock.$code.tsx

@@ -1,13 +1,14 @@
 import { createFileRoute } from "@tanstack/react-router";
-import { useState, useEffect, useMemo } from "react";
+import { useState, useEffect, useMemo, Fragment } from "react";
 import { collectionsApi } from "@/lib/api-client";
-import { fetchStockQuote, fetchStockHistory, fetchStockFundFlow, getStockBoard, type StockQuote, type KLineData, type FundFlowData, type FundFlowSummary } from "@/lib/stock-api";
+import { fetchStockQuote, fetchStockHistory, fetchStockFundFlow, fetchCompanyProfile, fetchBusinessSegments, fetchFinancialData, getStockBoard, type StockQuote, type KLineData, type FundFlowData, type FundFlowSummary, type CompanyProfile, type BusinessSegmentsResponse, type FinancialDataResponse } from "@/lib/stock-api";
+import StockProfileTabs from "@/components/stock-profile-tabs";
 import { getUserId } from "@/lib/user-id";
 import { formatMoney } from "@/lib/utils";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { ArrowLeft, TrendingUp, TrendingDown, Calendar, ExternalLink, Newspaper } from "lucide-react";
-import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
 import { Link } from "@tanstack/react-router";
 import {
   ComposedChart,
@@ -22,6 +23,9 @@ import {
   Scatter,
   Brush,
   ReferenceLine,
+  PieChart,
+  Pie,
+  Legend,
 } from "recharts";
 
 export const Route = createFileRoute("/stock/$code")({
@@ -78,10 +82,32 @@ function StockDetail() {
   const [error, setError] = useState<string | null>(null);
   const [inCollection, setInCollection] = useState(false);
 
+  // 公司介绍、经营分析、财务分析
+  const [companyProfile, setCompanyProfile] = useState<CompanyProfile | null>(null);
+  const [businessSegments, setBusinessSegments] = useState<BusinessSegmentsResponse | null>(null);
+  const [financialData, setFinancialData] = useState<FinancialDataResponse | null>(null);
+  const [profileTab, setProfileTab] = useState("profile");
+  const [pieType, setPieType] = useState<"income" | "cost" | "profit">("income");
+
   useEffect(() => {
     loadStockData();
   }, [code]);
 
+  // 加载公司概况、经营分析、财务分析（并行后置加载）
+  useEffect(() => {
+    if (!loading && stockInfo) {
+      Promise.all([
+        fetchCompanyProfile(code),
+        fetchBusinessSegments(code, "product", 30),
+        fetchFinancialData(code, 5),
+      ]).then(([profile, segments, financial]) => {
+        if (profile) setCompanyProfile(profile);
+        if (segments) setBusinessSegments(segments);
+        if (financial) setFinancialData(financial);
+      });
+    }
+  }, [loading, stockInfo]);
+
   const loadStockData = async () => {
     setLoading(true);
     setError(null);
@@ -706,7 +732,6 @@ function StockDetail() {
           </Card>
         )}
 
-        {/* Fund Flow Loading Skeleton */}
         {fundFlowLoading && fundFlowData.length === 0 && (
           <Card className="mt-4 md:mt-6 shadow-lg">
             <CardHeader className="pb-2 md:pb-4 px-3 md:px-6 pt-4 md:pt-6">
@@ -934,6 +959,18 @@ function StockDetail() {
             </div>
           </>
         )}
+
+        <StockProfileTabs
+          code={code}
+          profileTab={profileTab}
+          setProfileTab={setProfileTab}
+          companyProfile={companyProfile}
+          businessSegments={businessSegments}
+          financialData={financialData}
+          setBusinessSegments={setBusinessSegments}
+          pieType={pieType}
+          setPieType={setPieType}
+        />
       </div>
     </div>
   );