From c5c5d7d9c9a70ba36a57acb14b8fa4139ebedc60 Mon Sep 17 00:00:00 2001
From: Aresn <admin@aresn.com>
Date: Tue, 28 May 2024 15:39:00 +0800
Subject: [PATCH] add

---
 app.vue                        |  1 +
 components/i/Confirm.vue       | 42 ++++++++++++++++++++++++++++++++++
 components/i/SearchHistory.vue | 16 +++++++++++--
 3 files changed, 57 insertions(+), 2 deletions(-)
 create mode 100644 components/i/Confirm.vue

diff --git a/app.vue b/app.vue
index 6a0956c..64fba53 100644
--- a/app.vue
+++ b/app.vue
@@ -5,6 +5,7 @@
         <NuxtPage />
     </NuxtLayout>
     <UNotifications />
+    <UModals />
 </template>
 <script setup>
 const { $updateUserInfo } = useUserStore()
diff --git a/components/i/Confirm.vue b/components/i/Confirm.vue
new file mode 100644
index 0000000..5cc90b9
--- /dev/null
+++ b/components/i/Confirm.vue
@@ -0,0 +1,42 @@
+<template>
+    <UModal :ui="{ width: 'w-96 sm:max-w-screen-md' }">
+        <div class="flex p-6 gap-4">
+            <div class="flex">
+                <div class="mx-auto flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-red-100">
+                    <UIcon name="i-heroicons-exclamation-triangle" class="w-6 h-6 text-red-600" />
+                </div>
+            </div>
+            <div class="flex-grow flex flex-col">
+                <div class="text-base leading-6 text-gray-900 truncate">{{ title }}</div>
+                <div class="mt-2 text-sm text-gray-500">{{ description }}</div>
+            </div>
+        </div>
+        <div class="p-4 flex justify-end gap-2">
+            <UButton color="white" @click="handleCancel">取消</UButton>
+            <UButton color="red" @click="handleSuccess">确定</UButton>
+        </div>
+    </UModal>
+</template>
+<script setup>
+defineProps({
+    title: {
+        type: String,
+        default: ''
+    },
+    description: {
+        type: String,
+        default: '确认要全部清空吗？'
+    },
+    async: {
+        type: Boolean,
+        default: false
+    }
+})
+const emits = defineEmits(['success', 'cancel'])
+function handleCancel () {
+    emits('cancel')
+}
+function handleSuccess () {
+    emits('success')
+}
+</script>
diff --git a/components/i/SearchHistory.vue b/components/i/SearchHistory.vue
index ea1ffdf..f2a1bfc 100644
--- a/components/i/SearchHistory.vue
+++ b/components/i/SearchHistory.vue
@@ -87,16 +87,28 @@
     </UModal>
 </template>
 <script setup>
+import { IConfirm } from '#components'
 const emits = defineEmits(['sign', 'clear'])
 const Layout = inject('Layout')
+const modal = useModal()
 const { $isSignIn } = storeToRefs(useUserStore())
 const { $searchHistory } = storeToRefs(useSearchStore())
 const { $getSearchHistory } = useSearchStore()
 const isOpenHistory = ref(false)
 const query = ref('')
 function handleClear () {
-    emits('clear')
-    handleRemoveRecords()
+    modal.open(IConfirm, {
+        title: '清空确认',
+        description: '确定要清空全部搜索记录吗？',
+        onSuccess () {
+            modal.close()
+            emits('clear')
+            handleRemoveRecords()
+        },
+        onCancel () {
+            modal.close()
+        }
+    })
 }
 function handleRemoveRecordItem (id) {
     handleRemoveRecords([id])
-- 
GitLab