添加可复用弹框

src/components/Dialog.vue

@@ -0,0 +1,27 @@
+<template>
+	<div class="min-w-[420px] max-w-[540px] text-primary bg-white rounded-lg">
+		<h1 class="my-8 text-lg font-medium text-center px-8">{{ props.title }}</h1>
+		<div class="text-lg px-4 text-center">
+			{{ props.desc }}
+		</div>
+		<footer class="flex justify-center items-center gap-6 py-10">
+			<button class="btn-dark px-8 py-2 text-lg min-w-[120px]" @click="$emit('onOk')">{{ okText || "确定" }}</button>
+			<button v-if="props.type === 'confirm'" class="btn-light px-8 py-2 text-lg min-w-[120px]" @click="$emit('onCancel')">
+				{{ cancelText || "取消" }}
+			</button>
+		</footer>
+	</div>
+</template>
+<script setup lang="ts">
+const props = defineProps<{
+	title: string;
+	desc: string;
+	type: "alert" | "confirm"; // alert 一个按钮，confirm：两个按钮
+	okText: string;
+	cancelText: string;
+}>();
+const emit = defineEmits<{
+	(e: "onCancel"): void;
+	(e: "onOk"): void;
+}>();
+</script>

src/views/HomeView.vue

@@ -33,7 +33,7 @@ function onEnvironmentEntryClick() {
 	router.push("/environment");
 }
 function onSprayEntryClick() {
-	router.push("/spray");
+	router.push("/preSpray");
 }
 function onPrintEntryClick() {
 	router.push("/print");

src/views/PreSpray.vue

@@ -38,7 +38,7 @@
 							class="border-none outline-none h-[32px] w-[60px] mx-2 bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center" />%RH
 					</p>
 
-					<button class="btn-dark px-8 py-2 text-lg">开始运行</button>
+					<button class="btn-dark px-8 py-2 text-lg" @click="startDry">开始除湿</button>
 				</div>
 			</main>
 			<header
@@ -48,7 +48,7 @@
 			</header>
 		</section>
 
-		<section class="flex flex-col relative text-primary mb-4">
+		<!-- <section class="flex flex-col relative text-primary mb-4">
 			<main class="mt-[43px] border border-[#D6D6D6] bg-white rounded-b-md rounded-tr-md px-6 py-6">
 				<div class="flex items-center">
 					<p class="text-lg">
@@ -81,9 +81,39 @@
 				<span class="w-4 h-4 rounded-full bg-primary text-center text-[10px] text-white">4</span>
 				<p class="text-lg font-medium text-primary">注射器设置</p>
 			</header>
+		</section> -->
+		<section class="flex items-center justify-end mt-6">
+			<button class="btn-dark px-8 py-2 text-lg">设置喷涂区域</button>
 		</section>
 	</div>
+
+	<van-overlay v-if="showDialog" :show="true">
+		<div class="flex justify-center items-center h-full">
+			<Dialog
+				title="已完成"
+				desc="湿度已达到50%RH，氮气已置换完毕。"
+				type="confirm"
+				ok-text="去喷涂"
+				cancel-text="关闭"
+				@on-ok="onOk"
+				@on-cancel="showDialog = false"></Dialog>
+		</div>
+	</van-overlay>
 </template>
 <script lang="ts" setup>
+import { ref } from "vue";
+import Dialog from "@/components/Dialog.vue";
+import { useRouter } from "vue-router";
+const router = useRouter();
+
+const showDialog = ref(false);
+
+function startDry() {
+	showDialog.value = true;
+}
+function onOk() {
+    showDialog.value = false;
+    router.push('/spray')
+}
 </script>
 <style lang="scss" scoped></style>