From e8ac396ae160108649b0bd6be0c696a6e9639d8b Mon Sep 17 00:00:00 2001
From: BTMuli <BT-Muli@outlook.com>
Date: Tue, 4 Apr 2023 17:16:31 +0800
Subject: [PATCH] =?UTF-8?q?feat(confirm):=20=E5=86=99=E4=BA=86=E4=B8=AA?=
 =?UTF-8?q?=E7=A1=AE=E8=AE=A4=E7=BB=84=E4=BB=B6=EF=BC=8C=E5=B0=B1=E4=B8=8D?=
 =?UTF-8?q?=E7=94=A8=20dialog.confirm=20=E4=BA=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/icons/circle-cancel.svg |   8 ++
 src/components/t-confirm.vue       | 124 +++++++++++++++++++++++++++++
 2 files changed, 132 insertions(+)
 create mode 100644 src/assets/icons/circle-cancel.svg
 create mode 100644 src/components/t-confirm.vue

diff --git a/src/assets/icons/circle-cancel.svg b/src/assets/icons/circle-cancel.svg
new file mode 100644
index 00000000..426edacd
--- /dev/null
+++ b/src/assets/icons/circle-cancel.svg
@@ -0,0 +1,8 @@
+<svg width="250.000000" height="250.000000" viewBox="0 0 250 250" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<desc>
+			Created with Pixso.
+	</desc>
+	<circle id="椭圆 3" cx="125.000000" cy="125.000000" r="125.000000" fill="#313131"/>
+	<path id="icon" d="M117.258 125L66.6035 175.654C64.4655 177.792 64.4655 181.259 66.6035 183.397C68.7415 185.535 72.2079 185.535 74.3458 183.397L125 132.742L175.654 183.397C177.792 185.535 181.259 185.535 183.397 183.397C185.535 181.259 185.535 177.792 183.397 175.654L132.742 125L183.397 74.3458C185.535 72.2079 185.535 68.7415 183.397 66.6035C181.259 64.4655 177.792 64.4655 175.654 66.6035L125 117.258L74.3458 66.6035C72.2079 64.4655 68.7415 64.4655 66.6035 66.6035C64.4655 68.7415 64.4655 72.2079 66.6035 74.3458L117.258 125Z" fill-rule="evenodd" fill="#38A2E4"/>
+	<defs/>
+</svg>
diff --git a/src/components/t-confirm.vue b/src/components/t-confirm.vue
new file mode 100644
index 00000000..fed13fd3
--- /dev/null
+++ b/src/components/t-confirm.vue
@@ -0,0 +1,124 @@
+<template>
+	<v-overlay v-model="propsConfirm.show">
+		<div class="confirm-div" v-if="propsConfirm.show">
+			<div class="confirm-box">
+				<div class="confirm-title">{{ propsConfirm.title }}</div>
+				<div class="confirm-btn-box">
+					<button class="confirm-btn" @click="setCancel">
+						<img class="btn-icon" src="../assets/icons/circle-cancel.svg" alt="cancel" />
+						<span class="btn-text">{{ propsConfirm.cancel }}</span>
+					</button>
+					<button class="confirm-btn" @click="setConfirm">
+						<img class="btn-icon" src="../assets/icons/circle-check.svg" alt="confirm" />
+						<span class="btn-text">{{ propsConfirm.confirm }}</span>
+					</button>
+				</div>
+			</div>
+		</div>
+	</v-overlay>
+</template>
+<script lang="ts" setup>
+// vue
+import { defineProps, defineEmits } from "vue";
+
+// props
+const propsConfirm = defineProps({
+	show: {
+		type: Boolean,
+		required: true,
+		default: false,
+	},
+	title: {
+		type: String,
+		required: true,
+	},
+	cancel: {
+		type: String,
+		default: "取消",
+	},
+	confirm: {
+		type: String,
+		default: "确定",
+	},
+	value: {
+		type: Boolean,
+		required: true,
+	},
+});
+
+// emits
+const emitConfirm = defineEmits(["update:value", "update:show"]);
+
+// methods
+async function setCancel() {
+	await emitConfirm("update:show", false);
+	await emitConfirm("update:value", false);
+}
+
+async function setConfirm() {
+	await emitConfirm("update:show", false);
+	await emitConfirm("update:value", true);
+}
+</script>
+<style lang="css" scoped>
+.confirm-div {
+	width: 40vw;
+	height: 20vh;
+	margin-top: 40vh;
+	margin-left: 30vw;
+	background: #ffffff;
+	border-radius: 10px;
+	padding: 10px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+.confirm-box {
+	border-radius: 10px;
+	width: 100%;
+	height: 100%;
+}
+
+.confirm-title {
+	font-family: Genshin, serif;
+	text-align: center;
+	height: 20%;
+	width: 100%;
+	color: #393b40;
+	margin: 20px;
+	font-size: 30px;
+}
+
+.confirm-btn-box {
+	height: 60%;
+	width: 100%;
+	display: flex;
+	justify-content: space-around;
+	align-items: center;
+}
+
+.confirm-btn {
+	width: 30%;
+	min-width: 150px;
+	min-height: 30px;
+	background: #4a5366;
+	color: #faf7e8;
+	border-radius: 50px;
+	display: flex;
+	align-items: center;
+}
+
+.btn-icon {
+	margin: 5px;
+	width: 25px;
+	height: 25px;
+}
+
+.btn-text {
+	width: calc(100% - 70px);
+	text-align: center;
+	font-family: Genshin-Light, serif;
+	font-size: 20px;
+}
+</style>