From aa23c51a53d02ee74076ce772cfae9d830c2e8fa Mon Sep 17 00:00:00 2001
From: QuentinHsu <xuquentinyang@gmail.com>
Date: Mon, 1 Apr 2024 13:33:57 +0800
Subject: [PATCH] perf(Setting): add tabActiveKey state to Setting component

---
 web/src/pages/Setting/index.js | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/web/src/pages/Setting/index.js b/web/src/pages/Setting/index.js
index fe38ea7..00683e1 100644
--- a/web/src/pages/Setting/index.js
+++ b/web/src/pages/Setting/index.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import SystemSetting from '../../components/SystemSetting';
 import { isRoot } from '../../helpers';
 import OtherSetting from '../../components/OtherSetting';
@@ -7,6 +7,7 @@ import OperationSetting from '../../components/OperationSetting';
 import { Layout, TabPane, Tabs } from '@douyinfe/semi-ui';
 
 const Setting = () => {
+  const [tabActiveKey, setTabActiveKey] = useState('1');
   let panes = [
     {
       tab: '个人设置',
@@ -37,10 +38,14 @@ const Setting = () => {
     <div>
       <Layout>
         <Layout.Content>
-          <Tabs type='line' defaultActiveKey='1'>
+          <Tabs
+            type='line'
+            defaultActiveKey='1'
+            onChange={(key) => setTabActiveKey(key)}
+          >
             {panes.map((pane) => (
               <TabPane itemKey={pane.itemKey} tab={pane.tab} key={pane.itemKey}>
-                {pane.content}
+                {tabActiveKey === pane.itemKey && pane.content}
               </TabPane>
             ))}
           </Tabs>