From c42344e38af8bbeefec001addddb7097bdc0f4b8 Mon Sep 17 00:00:00 2001 From: czz <862977248@qq.com> Date: Fri, 8 May 2026 15:04:59 +0800 Subject: [PATCH] fix: unify main tab navigation behavior --- src/pages/index/index.tsx | 36 ++++---------------------------- src/pages/message/index.tsx | 29 ++++---------------------- src/pages/mine/index.tsx | 41 ++++--------------------------------- src/utils/main-tabbar.ts | 39 +++++++++++++++++++++++++++++++++++ 4 files changed, 51 insertions(+), 94 deletions(-) create mode 100644 src/utils/main-tabbar.ts diff --git a/src/pages/index/index.tsx b/src/pages/index/index.tsx index 23f0358..1c1e02e 100644 --- a/src/pages/index/index.tsx +++ b/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) => { - 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 navItems = createMainTabItems("home"); const handleScanBind = async () => { try { @@ -323,7 +295,7 @@ export default function Index() { - + handleMainTabNavigation(item, "home")} /> ); } diff --git a/src/pages/message/index.tsx b/src/pages/message/index.tsx index a776cdb..99a9bcd 100644 --- a/src/pages/message/index.tsx +++ b/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("vital"); const [topSafeHeight, setTopSafeHeight] = useState(0); @@ -114,21 +107,7 @@ export default function MessagePage() { setMenuHeight(menuButtonRect?.height || 32); }, []); - const handleTabClick = (item: TabbarItem) => { - if (item.key === "message") { - return; - } - - if (item.key === "home") { - Taro.redirectTo({ url: "/pages/index/index" }); - return; - } - - Taro.showToast({ - title: `${item.label}功能待接入`, - icon: "none" - }); - }; + const navItems = createMainTabItems("message"); const pageStyle = { "--top-safe-height": `${topSafeHeight}px`, @@ -191,7 +170,7 @@ export default function MessagePage() { ))} - + handleMainTabNavigation(item, "message")} /> ); } diff --git a/src/pages/mine/index.tsx b/src/pages/mine/index.tsx index 3faf952..8e81c39 100644 --- a/src/pages/mine/index.tsx +++ b/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) => { - 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 tabItems = createMainTabItems("mine"); const pageStyle = { "--top-safe-height": `${topSafeHeight}px`, @@ -165,16 +141,7 @@ export default function MinePage() { ))} - - {tabItems.map((item) => ( - handleTabClick(item.key, item.label)}> - - {item.badge ? : null} - - {item.label} - - ))} - + handleMainTabNavigation(item, "mine")} /> ); } diff --git a/src/utils/main-tabbar.ts b/src/utils/main-tabbar.ts new file mode 100644 index 0000000..fc24013 --- /dev/null +++ b/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> = { + 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" + }); +}