From 7159e510a6239fdaac2da38b4c9f2090152e246a Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Wed, 17 Dec 2025 14:44:46 +0800
Subject: [PATCH] =?UTF-8?q?fix(SubTabContainer):=20=E4=BF=AE=E5=A4=8D=20Ta?=
 =?UTF-8?q?b=20=E6=87=92=E5=8A=A0=E8=BD=BD=E5=A4=B1=E6=95=88=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加 visitedTabs 状态记录已访问的 Tab 索引
- Tab 切换时更新已访问集合
- TabPanels 中实现条件渲染：只渲染当前或已访问过的 Tab

修复前：tabs.map() 会创建所有组件实例，导致 Hook 立即执行
修复后：仅首次访问 Tab 时才渲染组件，真正实现懒加载

效果：初始加载从 N 个请求减少到 1 个请求

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/components/SubTabContainer/index.tsx | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/components/SubTabContainer/index.tsx b/src/components/SubTabContainer/index.tsx
index d21b49ad..276a56d2 100644
--- a/src/components/SubTabContainer/index.tsx
+++ b/src/components/SubTabContainer/index.tsx
@@ -118,6 +118,11 @@ const SubTabContainer: React.FC<SubTabContainerProps> = memo(({
   // 当前索引
   const currentIndex = controlledIndex ?? internalIndex;
 
+  // 记录已访问的 Tab 索引（用于真正的懒加载）
+  const [visitedTabs, setVisitedTabs] = useState<Set<number>>(
+    () => new Set([controlledIndex ?? defaultIndex])
+  );
+
   // 合并主题
   const theme: SubTabTheme = {
     ...THEME_PRESETS[themePreset],
@@ -132,6 +137,12 @@ const SubTabContainer: React.FC<SubTabContainerProps> = memo(({
       const tabKey = tabs[newIndex]?.key || '';
       onTabChange?.(newIndex, tabKey);
 
+      // 记录已访问的 Tab（用于懒加载）
+      setVisitedTabs(prev => {
+        if (prev.has(newIndex)) return prev;
+        return new Set(prev).add(newIndex);
+      });
+
       if (controlledIndex === undefined) {
         setInternalIndex(newIndex);
       }
@@ -197,11 +208,16 @@ const SubTabContainer: React.FC<SubTabContainerProps> = memo(({
         </TabList>
 
         <TabPanels p={contentPadding}>
-          {tabs.map((tab) => {
+          {tabs.map((tab, idx) => {
             const Component = tab.component;
+            // 懒加载：只渲染已访问过的 Tab
+            const shouldRender = !isLazy || visitedTabs.has(idx);
+
             return (
               <TabPanel key={tab.key} p={0}>
-                {Component ? <Component {...componentProps} /> : null}
+                {shouldRender && Component ? (
+                  <Component {...componentProps} />
+                ) : null}
               </TabPanel>
             );
           })}