matrix_spraying_vue/src/components/HeaderBar.vue

<template>
	<header class="h-[--headerHeight] bg-primary flex items-center text-white">
		<img class="w-[83px] ml-6" src="@/assets/logo.png" alt="logo" />
		<div v-if="route.path !== '/home'" class="w-0.5 h-5 bg-white mx-3"></div>
		<p class="text-lg">{{ pageNameMap[route.path] }}</p>

		<img :src="`${isWifiNormal ? icon_wifi : icon_wifi2}`" alt="" class="ml-auto w-8" />

		<div v-if="route.path === '/home'" class="btn-light px-5 py-1 mx-6 rounded min-w-[102px]">
			<el-dropdown trigger="click">
				<div class="el-dropdown-link flex items-center">
					<img src="@/assets/menu.svg" alt="menu" />
					<p class="text-lg ml-2 text-primary">菜单</p>
				</div>
				<template #dropdown>
					<el-dropdown-menu>
						<el-dropdown-item>
							<div class="flex items-center gap-4 text-lg text-primary" @click="router.push('/matrixManage')">
								<img :src="icon_substrate" class="w-[18px]" alt="" />
								<span>基质管理</span>
							</div>
						</el-dropdown-item>
						<el-dropdown-item>
							<div class="flex items-center gap-4 text-lg text-primary" @click="router.push('/debug')">
								<img :src="icon_debug" class="w-[18px]" alt="" />
								<span>调试</span>
							</div>
						</el-dropdown-item>
					</el-dropdown-menu>
				</template>
			</el-dropdown>
		</div>
		<div v-else class="btn-light px-5 py-1 mx-6 rounded" @click="onReturnBtnClick">
			<img src="@/assets/return.svg" alt="return" />
			<p class="text-lg ml-2 text-primary">返回</p>
		</div>
	</header>
</template>
<script setup lang="ts">
import { watch, ref, computed, onMounted, onUnmounted } from "vue";
import Time from "@/components/Time.vue";
import icon_substrate from "@/assets/menu/icon_substrate.svg";
import icon_debug from "@/assets/menu/icon_debug.svg";
import icon_wifi from "@/assets/icon_wifi.svg";
import icon_wifi2 from "@/assets/icon_wifi_red.svg";
import { useRoute, useRouter } from "vue-router";
import { createWebSocket, sharedWsUrl } from "@/services/socket";

const route = useRoute();
const router = useRouter();
const isWifiNormal = ref(true);

onMounted(() => {
	const wsClient = createWebSocket(sharedWsUrl);
	const subscription = wsClient.stateOb.subscribe(state => {
		isWifiNormal.value = state === "open";
	});
	onUnmounted(() => {
		subscription.unsubscribe();
	});
});

const pageNameMap: Record<string, string> = {
	"/": "基质喷涂转印仪",
	"/environment": "环境设置",
	"/spray": "喷涂设置",
	"/preSpray": "喷涂设置",
	"/print": "转印设置",
	"/matrixManage": "基质管理",
	"/matrixCraft": "工艺管理",
	"/debug": "调试",
	"/history": "历史喷涂",
};

function onReturnBtnClick() {
	if (route.path !== "/home") {
		router.back();
	} else {
		// router.push("/menu");
	}
}
</script>