Merge remote-tracking branch 'origin/main'

web/.prettierrc.mjs

@@ -0,0 +1 @@
+module.exports = require("@so1ve/prettier-config");

web/.prettierrc.mjs

@@ -1 +0,0 @@
-module.exports = require("@so1ve/prettier-config");

web/src/helpers/render.js

@@ -8,39 +8,37 @@ export function renderText(text, limit) {
   return text;
 }
 
+/**
+ * Render group tags based on the input group string
+ * @param {string} group - The input group string
+ * @returns {JSX.Element} - The rendered group tags
+ */
 export function renderGroup(group) {
   if (group === '') {
-    return <Tag size='large'>default</Tag>;
+    return <Tag size='large' key='default'>default</Tag>;
   }
-  let groups = group.split(',');
-  groups.sort();
+
+  const tagColors = {
+    'vip': 'yellow',
+    'pro': 'yellow',
+    'svip': 'red',
+    'premium': 'red'
+  };
+
+  const groups = group.split(',').sort();
+
   return (
-    <>
-      {groups.map((group) => {
-        if (group === 'vip' || group === 'pro') {
-          return (
-            <Tag size='large' color='yellow'>
-              {group}
-            </Tag>
-          );
-        } else if (group === 'svip' || group === 'premium') {
-          return (
-            <Tag size='large' color='red'>
-              {group}
-            </Tag>
-          );
-        }
-        if (group === 'default') {
-          return <Tag size='large'>{group}</Tag>;
-        } else {
-          return (
-            <Tag size='large' color={stringToColor(group)}>
-              {group}
-            </Tag>
-          );
-        }
-      })}
-    </>
+    <span key={group}>
+      {groups.map((group) => (
+        <Tag
+          size='large'
+          color={tagColors[group] || stringToColor(group)}
+          key={group}
+        >
+          {group}
+        </Tag>
+      ))}
+    </span>
   );
 }
 

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>