From 22062a6556a65fc1a18e83ceb39ed327221ef5f5 Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Fri, 19 Dec 2025 14:23:47 +0800
Subject: [PATCH] =?UTF-8?q?perf(PledgePanel):=20=E6=B7=BB=E5=8A=A0=20useMe?=
 =?UTF-8?q?mo=20=E7=BC=93=E5=AD=98=E5=9B=BE=E8=A1=A8=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 使用 useMemo 缓存 getPledgeDarkGoldOption 计算结果
- 避免每次渲染重新计算图表配置

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../MarketDataView/components/panels/PledgePanel.tsx   | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/views/Company/components/MarketDataView/components/panels/PledgePanel.tsx b/src/views/Company/components/MarketDataView/components/panels/PledgePanel.tsx
index 99dc48f2..8c64cdc9 100644
--- a/src/views/Company/components/MarketDataView/components/panels/PledgePanel.tsx
+++ b/src/views/Company/components/MarketDataView/components/panels/PledgePanel.tsx
@@ -1,7 +1,7 @@
 // src/views/Company/components/MarketDataView/components/panels/PledgePanel.tsx
 // 股权质押面板 - 黑金主题
 
-import React, { memo } from 'react';
+import React, { memo, useMemo } from 'react';
 import {
   Box,
   Text,
@@ -28,6 +28,12 @@ export interface PledgePanelProps {
 }
 
 const PledgePanel: React.FC<PledgePanelProps> = ({ pledgeData }) => {
+  // 缓存图表配置
+  const chartOption = useMemo(() => {
+    if (pledgeData.length === 0) return {};
+    return getPledgeDarkGoldOption(pledgeData);
+  }, [pledgeData]);
+
   return (
     <VStack spacing={6} align="stretch">
       {/* 图表卡片 */}
@@ -35,7 +41,7 @@ const PledgePanel: React.FC<PledgePanelProps> = ({ pledgeData }) => {
         {pledgeData.length > 0 && (
           <Box h="400px">
             <ECharts
-              option={getPledgeDarkGoldOption(pledgeData)}
+              option={chartOption}
               style={{ height: '100%', width: '100%' }}
               theme="dark"
             />