1

components/hr-tabbar/hr-tabbar.uvue

@@ -0,0 +1,41 @@
+<template>
+	<!--
+		使用组件库 x-tabbar。
+		- out-index=-1：关闭中间凸起（设计稿为平底导航）
+		- position=relative：x-tabbar 默认 position:fixed 会脱离文档流，
+		  导致页面内容被底栏遮住。改成 relative 后它会占位，页面无需再手动预留高度。
+	-->
+	<x-tabbar :list="tabs" :active-index="active" :out-index="-1" position="relative" :is-canvas-render="false"
+		bg-color="#FFFFFF" dark-bg-color="#FFFFFF" color="#9CA3AF" selected-color="#2563EB" font-size="26rpx"
+		icon-size="48rpx" border-color="#F3F4F6" :show-top-border="true" @click="onClick">
+	</x-tabbar>
+</template>
+
+<script lang="uts" setup>
+	import { computed } from 'vue'
+	import { hrSession, currentTabs, currentTabPages } from '@/utils/role.uts'
+	import { TABBAR_ITEM_INFO } from '@/uni_modules/tmx-ui/interface.uts'
+
+	/**
+	 * 底部导航
+	 * 双角色核心：救援人员端 3 Tab / 仓管人员端 5 Tab，切换角色后自动换装。
+	 * 始终显式传 list / activeIndex，不依赖 tmx-ui 全局 TabBar 状态，避免多页面互相干扰。
+	 */
+	const props = defineProps({
+		/** 当前选中的 Tab 下标 */
+		active : { type: Number, default: 0 }
+	})
+
+	const tabs = computed(() : TABBAR_ITEM_INFO[] => {
+		// 依赖 hrSession.role，角色变化时自动刷新
+		const role = hrSession.role
+		return currentTabs()
+	})
+
+	function onClick(index : number) : void {
+		if (index == props.active) { return }
+		const pages = currentTabPages()
+		if (index < 0 || index >= pages.length) { return }
+		uni.reLaunch({ url: pages[index] })
+	}
+</script>