1- import { useState } from 'react' ;
1+ import { useState , useEffect } from 'react' ;
2+ import { useSearchParams } from 'react-router-dom' ;
23
34import { Card } from 'antd' ;
45import { AiOutlineSetting } from 'react-icons/ai' ;
@@ -19,7 +20,27 @@ interface Setup {
1920}
2021
2122export default ( ) => {
22- const [ active , setActive ] = useState ( 'system' ) ;
23+ const [ params , setParams ] = useSearchParams ( ) ;
24+ const tabFromUrl = params . get ( 'tab' ) ;
25+
26+ // 验证 tab 值是否有效，有效配置项的 key 列表
27+ const validKeys = [ 'system' , 'web' , 'theme' , 'my' , 'other' ] ;
28+ const initialActive = tabFromUrl && validKeys . includes ( tabFromUrl ) ? tabFromUrl : 'system' ;
29+
30+ const [ active , setActive ] = useState ( initialActive ) ;
31+
32+ // 监听 URL 参数变化，更新激活的 tab
33+ useEffect ( ( ) => {
34+ if ( tabFromUrl && validKeys . includes ( tabFromUrl ) ) {
35+ setActive ( tabFromUrl ) ;
36+ }
37+ } , [ tabFromUrl ] ) ;
38+
39+ // 处理配置项点击，同时更新状态和 URL
40+ const handleTabClick = ( key : string ) => {
41+ setActive ( key ) ;
42+ setParams ( { tab : key } ) ;
43+ } ;
2344
2445 const iconSty = 'w-5 h-8 mr-1' ;
2546
@@ -49,11 +70,11 @@ export default () => {
4970 key : 'my' ,
5071 } ,
5172 {
52- title : '其他设置' ,
53- description : '杂七八乱的各种配置' ,
54- icon : < AiOutlineSetting className = { iconSty } /> ,
55- key : 'other'
56- }
73+ title : '其他设置' ,
74+ description : '杂七八乱的各种配置' ,
75+ icon : < AiOutlineSetting className = { iconSty } /> ,
76+ key : 'other' ,
77+ } ,
5778 ] ;
5879
5980 return (
@@ -64,7 +85,7 @@ export default () => {
6485 < div className = "flex flex-col md:flex-row" >
6586 < ul className = "w-full md:w-[20%] md:mr-5 mb-10 md:mb-0 border-b-0 md:border-r border-stroke dark:border-strokedark divide-y divide-solid divide-[#F6F6F6] dark:divide-strokedark" >
6687 { list . map ( ( item ) => (
67- < li key = { item . key } className = { `relative p-3 pl-5 before:content-[''] before:absolute before:top-1/2 before:left-0 before:-translate-y-1/2 before:w-[3.5px] before:h-[0%] before:bg-[#60a5fa] cursor-pointer transition-all ${ active === item . key ? 'bg-[#f7f7f8] dark:bg-[#3c5370] before:h-full' : '' } } onClick = { ( ) => setActive ( item . key ) } >
88+ < li key = { item . key } className = { `relative p-3 pl-5 before:content-[''] before:absolute before:top-1/2 before:left-0 before:-translate-y-1/2 before:w-[3.5px] before:h-[0%] before:bg-[#60a5fa] cursor-pointer transition-all ${ active === item . key ? 'bg-[#f7f7f8] dark:bg-[#3c5370] before:h-full' : '' } } onClick = { ( ) => handleTabClick ( item . key ) } >
6889 < h3 className = "flex items-center text-base dark:text-white" >
6990 { item . icon } { item . title }
7091 </ h3 >
0 commit comments