fix: unify main tab navigation behavior

src/pages/index/index.tsx

@@ -3,8 +3,9 @@ import Taro from "@tarojs/taro";
 import type { CSSProperties } from "react";
 import { useEffect, useRef, useState } from "react";
 import ActionButton from "../../components/action-button";
-import BottomTabbar, { type TabbarItem } from "../../components/bottom-tabbar";
+import BottomTabbar from "../../components/bottom-tabbar";
 import PanelCard from "../../components/panel-card";
+import { createMainTabItems, handleMainTabNavigation } from "../../utils/main-tabbar";
 import "./index.scss";
 
 type BluetoothStatus = "idle" | "searching" | "empty" | "success";
@@ -21,14 +22,6 @@ const notices = [
   "3. 扫码功能需开启相机权限"
 ];
 
-const navItems: TabbarItem[] = [
-  { key: "home", label: "首页", active: true },
-  { key: "report", label: "报告", active: false },
-  { key: "assistant", label: "小e", active: false },
-  { key: "message", label: "消息", active: false, badge: true },
-  { key: "mine", label: "我的", active: false }
-];
-
 const mockBluetoothDevices: DeviceCandidate[] = [
   { id: "mock-thermo-01", name: "体征监测设备 A1", source: "mock" },
   { id: "mock-thermo-02", name: "体征监测设备 B2", source: "mock" }
@@ -115,28 +108,7 @@ export default function Index() {
     showToast("后续可从这里进入设备管理页");
   };
 
-  const handleTabClick = (item: TabbarItem) => {
+  const navItems = createMainTabItems("home");
-    if (item.key === "home") {
-      return;
-    }
-
-    if (item.key === "report") {
-      Taro.navigateTo({ url: "/pages/report/index" });
-      return;
-    }
-
-    if (item.key === "message") {
-      Taro.redirectTo({ url: "/pages/message/index" });
-      return;
-    }
-
-    if (item.key === "mine") {
-      Taro.navigateTo({ url: "/pages/mine/index" });
-      return;
-    }
-
-    showToast(`${item.label}功能待接入`);
-  };
 
   const handleScanBind = async () => {
     try {
@@ -323,7 +295,7 @@ export default function Index() {
         </View>
       </PanelCard>
 
-      <BottomTabbar items={navItems} onItemClick={handleTabClick} />
+      <BottomTabbar items={navItems} onItemClick={(item) => handleMainTabNavigation(item, "home")} />
     </View>
   );
 }

src/pages/message/index.tsx

@@ -2,7 +2,8 @@ import { Text, View } from "@tarojs/components";
 import Taro from "@tarojs/taro";
 import type { CSSProperties } from "react";
 import { useEffect, useState } from "react";
-import BottomTabbar, { type TabbarItem } from "../../components/bottom-tabbar";
+import BottomTabbar from "../../components/bottom-tabbar";
+import { createMainTabItems, handleMainTabNavigation } from "../../utils/main-tabbar";
 import "./index.scss";
 
 type MessageTabKey = "vital" | "system";
@@ -84,14 +85,6 @@ const fieldLabels = {
   occurredAt: "发生时间"
 };
 
-const navItems: TabbarItem[] = [
-  { key: "home", label: "首页", active: false },
-  { key: "report", label: "报告", active: false },
-  { key: "assistant", label: "小e", active: false },
-  { key: "message", label: "消息", active: true, badge: true },
-  { key: "mine", label: "我的", active: false }
-];
-
 export default function MessagePage() {
   const [activeTab, setActiveTab] = useState<MessageTabKey>("vital");
   const [topSafeHeight, setTopSafeHeight] = useState(0);
@@ -114,21 +107,7 @@ export default function MessagePage() {
     setMenuHeight(menuButtonRect?.height || 32);
   }, []);
 
-  const handleTabClick = (item: TabbarItem) => {
+  const navItems = createMainTabItems("message");
-    if (item.key === "message") {
-      return;
-    }
-
-    if (item.key === "home") {
-      Taro.redirectTo({ url: "/pages/index/index" });
-      return;
-    }
-
-    Taro.showToast({
-      title: `${item.label}功能待接入`,
-      icon: "none"
-    });
-  };
 
   const pageStyle = {
     "--top-safe-height": `${topSafeHeight}px`,
@@ -191,7 +170,7 @@ export default function MessagePage() {
         ))}
       </View>
 
-      <BottomTabbar items={navItems} onItemClick={handleTabClick} />
+      <BottomTabbar items={navItems} onItemClick={(item) => handleMainTabNavigation(item, "message")} />
     </View>
   );
 }

src/pages/mine/index.tsx

@@ -2,6 +2,8 @@ import { Text, View } from "@tarojs/components";
 import Taro from "@tarojs/taro";
 import type { CSSProperties } from "react";
 import { useEffect, useState } from "react";
+import BottomTabbar from "../../components/bottom-tabbar";
+import { createMainTabItems, handleMainTabNavigation } from "../../utils/main-tabbar";
 import "./index.scss";
 
 type UserProfile = {
@@ -37,14 +39,6 @@ const featureItems: FeatureItem[] = [
   { key: "version", label: "当前版本", value: "V1.0.2504.12", icon: "version" }
 ];
 
-const tabItems = [
-  { key: "home", label: "首页" },
-  { key: "report", label: "报告" },
-  { key: "assistant", label: "小e" },
-  { key: "message", label: "消息", badge: true },
-  { key: "mine", label: "我的", active: true }
-];
-
 export default function MinePage() {
   const [topSafeHeight, setTopSafeHeight] = useState(0);
   const [menuSafeWidth, setMenuSafeWidth] = useState(0);
@@ -80,25 +74,7 @@ export default function MinePage() {
     showToast("当前已是最新版本");
   };
 
-  const handleTabClick = (key: string, label: string) => {
+  const tabItems = createMainTabItems("mine");
-    if (key === "mine") {
-      return;
-    }
-
-    if (key === "home") {
-      const pages = Taro.getCurrentPages();
-
-      if (pages.length > 1) {
-        Taro.navigateBack();
-      } else {
-        Taro.redirectTo({ url: "/pages/index/index" });
-      }
-
-      return;
-    }
-
-    showToast(`${label}功能待接入`);
-  };
 
   const pageStyle = {
     "--top-safe-height": `${topSafeHeight}px`,
@@ -165,16 +141,7 @@ export default function MinePage() {
         ))}
       </View>
 
-      <View className="mine-page__tabbar">
+      <BottomTabbar items={tabItems} onItemClick={(item) => handleMainTabNavigation(item, "mine")} />
-        {tabItems.map((item) => (
-          <View className="mine-page__tabbar-item" key={item.key} onClick={() => handleTabClick(item.key, item.label)}>
-            <View className={`mine-page__tabbar-icon ${item.active ? "mine-page__tabbar-icon--active" : ""}`}>
-              {item.badge ? <View className="mine-page__tabbar-badge" /> : null}
-            </View>
-            <Text className={`mine-page__tabbar-label ${item.active ? "mine-page__tabbar-label--active" : ""}`}>{item.label}</Text>
-          </View>
-        ))}
-      </View>
     </View>
   );
 }

src/utils/main-tabbar.ts

@@ -0,0 +1,39 @@
+import Taro from "@tarojs/taro";
+import type { TabbarItem } from "../components/bottom-tabbar";
+
+type MainTabKey = "home" | "report" | "assistant" | "message" | "mine";
+
+const mainTabRoutes: Partial<Record<MainTabKey, string>> = {
+  home: "/pages/index/index",
+  report: "/pages/report/index",
+  message: "/pages/message/index",
+  mine: "/pages/mine/index"
+};
+
+export function createMainTabItems(activeKey: MainTabKey): TabbarItem[] {
+  return [
+    { key: "home", label: "首页", active: activeKey === "home" },
+    { key: "report", label: "报告", active: activeKey === "report" },
+    { key: "assistant", label: "小e", active: activeKey === "assistant" },
+    { key: "message", label: "消息", active: activeKey === "message", badge: true },
+    { key: "mine", label: "我的", active: activeKey === "mine" }
+  ];
+}
+
+export function handleMainTabNavigation(item: TabbarItem, activeKey: MainTabKey) {
+  if (item.key === activeKey) {
+    return;
+  }
+
+  const route = mainTabRoutes[item.key as MainTabKey];
+
+  if (route) {
+    Taro.redirectTo({ url: route });
+    return;
+  }
+
+  Taro.showToast({
+    title: `${item.label}功能待接入`,
+    icon: "none"
+  });
+}