fix: unify main tab navigation behavior
This commit is contained in:
@@ -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() {
|
||||
</View>
|
||||
</PanelCard>
|
||||
|
||||
<BottomTabbar items={navItems} onItemClick={handleTabClick} />
|
||||
<BottomTabbar items={navItems} onItemClick={(item) => handleMainTabNavigation(item, "home")} />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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) => {
|
||||
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() {
|
||||
))}
|
||||
</View>
|
||||
|
||||
<BottomTabbar items={navItems} onItemClick={handleTabClick} />
|
||||
<BottomTabbar items={navItems} onItemClick={(item) => handleMainTabNavigation(item, "message")} />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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() {
|
||||
))}
|
||||
</View>
|
||||
|
||||
<View className="mine-page__tabbar">
|
||||
{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>
|
||||
<BottomTabbar items={tabItems} onItemClick={(item) => handleMainTabNavigation(item, "mine")} />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
39
src/utils/main-tabbar.ts
Normal file
39
src/utils/main-tabbar.ts
Normal file
@@ -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"
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user