Merge pull request #171 from QuentinHsu/perf-setting-tab-navigation

perf(Setting): setting tab navigation

web/src/pages/Setting/index.js

@@ -1,17 +1,21 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
+import { Layout, TabPane, Tabs } from '@douyinfe/semi-ui';
+import { useNavigate, useLocation } from 'react-router-dom';
+
 import SystemSetting from '../../components/SystemSetting';
 import { isRoot } from '../../helpers';
 import OtherSetting from '../../components/OtherSetting';
 import PersonalSetting from '../../components/PersonalSetting';
 import OperationSetting from '../../components/OperationSetting';
-import { Layout, TabPane, Tabs } from '@douyinfe/semi-ui';
-
 const Setting = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const [tabActiveKey, setTabActiveKey] = useState('1');
   let panes = [
     {
       tab: '个人设置',
       content: <PersonalSetting />,
-      itemKey: '1',
+      itemKey: 'personal',
     },
   ];
 
@@ -19,28 +23,44 @@ const Setting = () => {
     panes.push({
       tab: '运营设置',
       content: <OperationSetting />,
-      itemKey: '2',
+      itemKey: 'operation',
     });
     panes.push({
       tab: '系统设置',
       content: <SystemSetting />,
-      itemKey: '3',
+      itemKey: 'system',
     });
     panes.push({
       tab: '其他设置',
       content: <OtherSetting />,
-      itemKey: '4',
+      itemKey: 'other',
     });
   }
-
+  const onChangeTab = (key) => {
+    setTabActiveKey(key);
+    navigate(`?tab=${key}`);
+  };
+  useEffect(() => {
+    const searchParams = new URLSearchParams(window.location.search);
+    const tab = searchParams.get('tab');
+    if (tab) {
+      setTabActiveKey(tab);
+    } else {
+      onChangeTab('personal');
+    }
+  }, [location.search]);
   return (
     <div>
       <Layout>
         <Layout.Content>
-          <Tabs type='line' defaultActiveKey='1'>
+          <Tabs
+            type='line'
+            activeKey={tabActiveKey}
+            onChange={(key) => onChangeTab(key)}
+          >
             {panes.map((pane) => (
               <TabPane itemKey={pane.itemKey} tab={pane.tab} key={pane.itemKey}>
-                {pane.content}
+                {tabActiveKey === pane.itemKey && pane.content}
               </TabPane>
             ))}
           </Tabs>