fix: 顶栏颜色跟随小程序主题并保留跟随系统

src/custom-tab-bar/index.tsx

@@ -7,18 +7,28 @@ import { applyPageBackground } from '../utils/themeBackground'
 import './index.scss'
 
 const TABS = [
-  { pagePath: '/pages/index/index', text: '首页', icon: '/icon/首页.svg', iconActive: '/icon/首页-fill.svg' },
-  { pagePath: '/pages/shop/index', text: '商品', icon: '/icon/商品.svg', iconActive: '/icon/商品-fill.svg' },
-  { pagePath: '/pages/designList/index', text: '设计清单', icon: '/icon/调色盘.svg', iconActive: '/icon/调色盘-fill.svg' },
-  { pagePath: '/pages/orders/index', text: '订单', icon: '/icon/包裹.svg', iconActive: '/icon/包裹-fill.svg' },
-  { pagePath: '/pages/profile/index', text: '我的', icon: '/icon/个人.svg', iconActive: '/icon/个人-fill.svg' }
+  { pagePath: '/pages/index/index', label: '首页', icon: '/icon/首页.svg', iconActive: '/icon/首页-fill.svg' },
+  { pagePath: '/pages/shop/index', label: '商品', icon: '/icon/商品.svg', iconActive: '/icon/商品-fill.svg' },
+  { pagePath: '/pages/designList/index', label: '设计清单', icon: '/icon/调色盘.svg', iconActive: '/icon/调色盘-fill.svg' },
+  { pagePath: '/pages/orders/index', label: '订单', icon: '/icon/包裹.svg', iconActive: '/icon/包裹-fill.svg' },
+  { pagePath: '/pages/profile/index', label: '我的', icon: '/icon/个人.svg', iconActive: '/icon/个人-fill.svg' }
 ]
 
+function matchTab(path: string): string {
+  const idx = TABS.findIndex((t) => path.endsWith(t.pagePath))
+  return TABS[idx >= 0 ? idx : 0].pagePath
+}
+
+function currentTabPath(): string {
+  const path = Taro.getCurrentInstance().router?.path || 'pages/index/index'
+  return matchTab(path)
+}
+
 export default function CustomTabBar() {
-  // 自定义 tabBar 是独立组件，无法继承页面里的 React Context，
-  // 初始值从本地主题配置读取，之后通过 eventCenter 跟随主题切换
   const [resolvedTheme, setResolvedTheme] = useState<'light' | 'dark'>(resolveTheme(getTheme()))
-  const currentPath = `/${Taro.getCurrentInstance().router?.path || 'pages/index/index'}`
+
+  // 微信自定义 tabBar 不会自动感知 page 路由变化，用 state 保持选中态响应式
+  const [activeTab, setActiveTab] = useState<string>(currentTabPath)
 
   useEffect(() => {
     const handler = (t: 'light' | 'dark') => setResolvedTheme(t)
@@ -28,6 +38,17 @@ export default function CustomTabBar() {
     }
   }, [])
 
+  // 其它入口(如页面内部调用 switchTab)也会回到 tabBar，收到事件后重新同步选中态
+  useEffect(() => {
+    const handler = (path?: string) => {
+      setActiveTab(matchTab(path || Taro.getCurrentInstance().router?.path || 'pages/index/index'))
+    }
+    Taro.eventCenter.on('tabBarChange', handler)
+    return () => {
+      Taro.eventCenter.off('tabBarChange', handler)
+    }
+  }, [])
+
   // tabBar 是 tab 页切换时必定会挂载/更新的组件：在这里也刷新一次页面背景，
   // 兜底处理“登录后切到受保护页面”时自定义导航区背景，避免残留白色
   useEffect(() => {
@@ -35,13 +56,15 @@ export default function CustomTabBar() {
   }, [resolvedTheme])
 
   const switchTab = (url: string) => {
+    setActiveTab(matchTab(url))
     Taro.switchTab({ url })
+    Taro.eventCenter?.trigger('tabBarChange', url)
   }
 
   return (
     <View className={`custom-tab-bar theme-${resolvedTheme}`}>
       {TABS.map((tab) => {
-        const isActive = currentPath === tab.pagePath
+        const isActive = tab.pagePath === activeTab
         return (
           <View
             key={tab.pagePath}
@@ -49,7 +72,7 @@ export default function CustomTabBar() {
             onTap={() => switchTab(tab.pagePath)}
           >
             <Image className={`tab-icon-img ${isActive ? 'active' : ''}`} src={isActive ? tab.iconActive : tab.icon} mode='aspectFit' />
-            <Text className='tab-label'>{tab.text}</Text>
+            <Text className='tab-label'>{tab.label}</Text>
           </View>
         )
       })}