feat(components): 添加确认弹框组件

src/components/ConfirmModal.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { useViewVisible } from '@/hooks/view-visible';
+
+import type { IconObject } from '@/types';
+
+interface Props {
+  title: string;
+  descriptionText: string;
+  icon: IconObject;
+  iconBgColor: string;
+}
+
+const { visible, showView, hideView } = useViewVisible();
+
+defineProps<Props>();
+
+defineExpose({
+  showView,
+  hideView,
+});
+</script>
+
+<template>
+  <div>
+    <AModal v-model:open="visible" :title="title" @ok="$emit('confirm')" :centered="true" style="width: 460px">
+      <AFlex justify="center" align="center">
+        <AFlex justify="center" align="center" class="div-center">
+          <AFlex justify="center" align="center" class="icon-background" :style="`background-color:${iconBgColor}`">
+            <SvgIcon :name="icon.name" />
+          </AFlex>
+        </AFlex>
+      </AFlex>
+      <AFlex justify="center" align="center">
+        <span class="description-text">{{ descriptionText }}</span>
+      </AFlex>
+    </AModal>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.div-center {
+  width: 120px;
+  height: 96px;
+}
+
+.icon-background {
+  width: 96px;
+  height: 96px;
+  font-size: 42px;
+  color: #fff;
+  border-radius: 50%;
+}
+
+.description-text {
+  margin-top: 16px;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px;
+  color: #333;
+  text-align: center;
+}
+</style>