顶部和底部状态样式调整

src/assets/icon_wifi.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="82" height="66" viewBox="0 0 82 66"><g><path d="M0,19.3215L7.45687,27.808C25.9786,6.7155,56.0214,6.7155,74.5431,27.808L82,19.3215C59.3731,-6.4405,22.6628,-6.4405,0,19.3215ZM29.8172,53.2675L41,66L52.1827,53.2675C46.0328,46.2275,36.0031,46.2275,29.8172,53.2675ZM14.9137,36.3L22.3706,44.7865C32.6565,33.0715,49.3538,33.0715,59.6396,44.7865L67.0914,36.3C52.7055,19.921,29.3355,19.921,14.9086,36.3L14.9137,36.3Z" fill="#FFFFFF" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></svg>

src/assets/menu/icon_debug.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="39" height="39" viewBox="0 0 39 39"><defs><linearGradient x1="0.9390873312950134" y1="0.13962572813034058" x2="0.06755952537059781" y2="0.7403252124786376" id="master_svg0_29_2195"><stop offset="0%" stop-color="#0968DD" stop-opacity="1"/><stop offset="100%" stop-color="#0658C3" stop-opacity="1"/></linearGradient></defs><g><path d="M35.2405,7.47187e-7L3.75882,7.47187e-7C1.68288,3.73593e-7,3.75491e-7,1.67438,7.50982e-7,3.73982L7.50982e-7,28.0501L39,28.0501L39,3.73982C39.0004,1.67449,37.3171,3.73593e-7,35.2405,7.47187e-7ZM34.2423,14.7914C34.2423,15.5645,33.6124,16.1927,32.8354,16.1941L28.3556,16.1941C28.1564,16.1942,27.9754,16.0788,27.8922,15.8988L27.4968,15.047C27.422,14.8863,27.2625,14.7815,27.0846,14.7761C26.9067,14.7708,26.7411,14.866,26.6568,15.022L22.4906,22.7523C22.3283,23.0529,22.0143,23.2417,21.6713,23.2449C21.3283,23.2481,21.0108,23.0652,20.8429,22.7676L14.2233,11.0203C14.1341,10.8618,13.9608,10.7691,13.7787,10.7825C13.5967,10.7959,13.4389,10.9131,13.3742,11.083L11.653,15.5909C11.5144,15.9539,11.1648,16.1939,10.7746,16.1941L6.1667,16.1941C5.38813,16.1941,4.75697,15.5661,4.75697,14.7914C4.75697,14.0168,5.38813,13.3888,6.1667,13.3888L8.82657,13.3888C9.21715,13.3888,9.56644,13.1486,9.70503,12.7857L12.5196,5.41056C12.6492,5.07123,12.9645,4.8372,13.3284,4.81019C13.6922,4.78318,14.0389,4.96808,14.2177,5.2845L21.2055,17.6768C21.2893,17.8257,21.4481,17.9173,21.6197,17.9158C21.7913,17.9142,21.9483,17.8196,22.0293,17.6691L26.4027,9.56127C26.5716,9.24982,26.9027,9.05988,27.2582,9.0705C27.6137,9.08111,27.9328,9.29045,28.0826,9.61141L29.582,12.8449C29.736,13.1764,30.0684,13.3881,30.4352,13.3888L32.8354,13.3888C33.6138,13.3888,34.2451,14.017,34.2451,14.7914L34.2423,14.7914ZM7.50982e-7,29.6497L7.50982e-7,35.2602C3.75491e-7,37.3256,1.68288,39,3.75882,39L35.2405,39C37.3164,39,38.9993,37.3256,38.9993,35.2602L38.9993,29.6497L7.50982e-7,29.6497ZM22.6159,34.125C22.6136,34.8987,21.9838,35.5253,21.2062,35.5276L6.1667,35.5276C5.38813,35.5276,4.75697,34.8996,4.75697,34.125C4.75697,33.3504,5.38813,32.7224,6.1667,32.7224L21.2034,32.7224C21.9821,32.7232,22.6136,33.3502,22.6159,34.125ZM34.2423,34.125C34.2393,34.8971,33.6114,35.5224,32.8354,35.5262L27.1944,35.5262C26.4158,35.5262,25.7846,34.8983,25.7846,34.1236C25.7846,33.349,26.4158,32.721,27.1944,32.721L32.8354,32.721C33.6125,32.7248,34.2408,33.3519,34.2423,34.125Z" fill="url(#master_svg0_29_2195)" fill-opacity="1"/></g></svg>

src/assets/menu/icon_substrate.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="36.14432144165039" height="41.958011627197266" viewBox="0 0 36.14432144165039 41.958011627197266"><defs><linearGradient x1="0.5" y1="0" x2="0.5" y2="1" id="master_svg0_48_6837"><stop offset="2.380894310772419%" stop-color="#0867DB" stop-opacity="1"/><stop offset="100%" stop-color="#0658C3" stop-opacity="1"/></linearGradient></defs><g><path d="M34.3613,0.0209899L27.1284,0.0209899L27.1079,0.0209899C26.4318,0.0209899,25.8786,0.503749,25.7761,1.13343L25.7556,1.13343C25.3868,2.68666,24.8541,4.72264,23.1329,4.72264L12.2939,4.72264C10.5932,4.72264,10.081,2.70765,9.69166,1.1964C9.63019,0.566717,9.09745,0.083958,8.44178,0.0209895L8.42129,0L1.8031,0C0.799101,0,0,0.776612,0,1.74213L0,40.2159C0,41.1814,0.81959,41.958,1.8031,41.958L34.3408,41.958C35.3448,41.958,36.1439,41.1814,36.1439,40.2159L36.1439,1.76312C36.1644,0.797602,35.3653,0.0209901,34.3613,0.0209899ZM7.54023,34.3598C6.37231,34.3598,5.42978,33.3943,5.42978,32.1979C5.42978,31.0015,6.37231,30.036,7.54023,30.036C8.70814,30.036,9.65067,31.0015,9.65067,32.1979C9.65067,33.3943,8.70814,34.3598,7.54023,34.3598ZM7.54023,26.069C6.37231,26.069,5.42978,25.1034,5.42978,23.907C5.42978,22.7106,6.37231,21.7451,7.54023,21.7451C8.70814,21.7451,9.65067,22.7106,9.65067,23.907C9.65067,25.1034,8.70814,26.069,7.54023,26.069ZM7.54023,17.6942C6.37231,17.6942,5.42978,16.7286,5.42978,15.5322C5.42978,14.3358,6.37231,13.3703,7.54023,13.3703C8.70814,13.3703,9.65067,14.3358,9.65067,15.5322C9.65067,16.7286,8.70814,17.6942,7.54023,17.6942ZM29.1979,33.6882L14.097,33.6882C13.2979,33.6882,12.6627,33.0165,12.6627,32.2189C12.6627,31.4213,13.3183,30.7496,14.097,30.7496L29.1979,30.7496C29.997,30.7496,30.6322,31.4213,30.6322,32.2189C30.6322,33.0165,29.997,33.6882,29.1979,33.6882ZM29.1979,25.3763L14.097,25.3763C13.2979,25.3763,12.6627,24.7046,12.6627,23.907C12.6627,23.1094,13.3183,22.4378,14.097,22.4378L29.1979,22.4378C29.997,22.4378,30.6322,23.1094,30.6322,23.907C30.6322,24.7046,29.997,25.3763,29.1979,25.3763ZM29.1979,17.0225L14.097,17.0225C13.2979,17.0225,12.6627,16.3508,12.6627,15.5532C12.6627,14.7556,13.3183,14.084,14.097,14.084L29.1979,14.084C29.997,14.084,30.6322,14.7556,30.6322,15.5532C30.6322,16.3508,29.997,17.0225,29.1979,17.0225Z" fill="url(#master_svg0_48_6837)" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></svg>

src/components/FooterBar.vue

@@ -1,9 +1,11 @@
 <template>
 	<header class="h-[--headerHeight] bg-primary flex items-center text-white px-[--borderWidth]">
 		<section class="bg-[#335AA5] px-4 py-2 rounded flex items-center gap-4">
-			<span>当前湿度：18%RH</span><span>当前温度：18℃</span>
+			<span>当前湿度：18%RH</span> 
+			<!-- <span>当前温度：18℃</span> -->
 		</section>
-		<section v-if="route.path === '/home'" class="ml-auto h-[--footerHeight] flex items-center">
+		<Time class="ml-auto text-lg"></Time>
+		<!-- <section v-if="route.path === '/home'" class="ml-auto h-[--footerHeight] flex items-center">
 			<div class="btn-light px-5 py-2 mr-5">
 				<img src="@/assets/wash.svg" alt="wash" />
 				<span class="font-medium ml-2">清洗管道</span>
@@ -12,15 +14,16 @@
 				<img src="@/assets/refresh.svg" alt="icon" />
 				<span class="font-medium ml-2">更换拨片</span>
 			</div>
-		</section>
-		<div v-else class="ml-auto btn-light px-5 py-1 rounded" @click="onMenuBtnClick">
+		</section> -->
+		<!-- <div v-else class="ml-auto btn-light px-5 py-1 rounded" @click="onMenuBtnClick">
 			<img src="@/assets/return.svg" alt="return" />
 			<p class="text-lg ml-2 text-primary">返回</p>
-		</div>
+		</div> -->
 	</header>
 </template>
 <script setup lang="ts">
 import { useRoute, useRouter } from "vue-router";
+import Time from "./Time.vue";
 
 const route = useRoute();
 const router = useRouter();

src/components/HeaderBar.vue

@@ -1,23 +1,46 @@
 <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 class="w-0.5 h-5 bg-white mx-3"></div>
+		<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>
-		<div class="flex items-center bg-[#335AA5] px-4 py-1 rounded ml-auto">
-			<i class="bg-[#8CFBB7] w-[14px] h-[14px] rounded-full mr-2"></i>
-			<p>基质余量正常</p>
+		
+		<img src="@/assets/icon_wifi.svg" 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>
-		<Time class="mx-4"></Time>
-		<div class="btn-light px-5 py-1 mx-6 rounded" @click="onMenuBtnClick">
-			<img v-if="route.path === '/home'" src="@/assets/menu.svg" alt="menu" />
-			<img v-else src="@/assets/return.svg" alt="return" />
-			<p class="text-lg ml-2 text-primary">{{ route.path === "/home" ? "菜单" : "返回" }}</p>
+		<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 } 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 { useRoute, useRouter } from "vue-router";
 
 const route = useRoute();
@@ -32,7 +55,7 @@ const pageNameMap: Record<string, string> = {
 	"/menu": "菜单",
 };
 
-function onMenuBtnClick() {
+function onReturnBtnClick() {
 	if (route.path !== "/home") {
 		router.back();
 	} else {

src/components/Spray.vue

@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<canvas ref="cnv" :width="width" :height="height" class="border border-dashed border-[#ccc]"> </canvas>
+		<canvas ref="cnv" :width="width" :height="height" class="border border-[#ccc]"> </canvas>
 	</div>
 </template>