add

app.vue

@@ -5,6 +5,7 @@
         <NuxtPage />
     </NuxtLayout>
     <UNotifications />
+    <UModals />
 </template>
 <script setup>
 const { $updateUserInfo } = useUserStore()

components/i/Confirm.vue

+<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>

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 () {
+    modal.open(IConfirm, {
+        title: '清空确认',
+        description: '确定要清空全部搜索记录吗？',
+        onSuccess () {
+            modal.close()
             emits('clear')
             handleRemoveRecords()
+        },
+        onCancel () {
+            modal.close()
+        }
+    })
 }
 function handleRemoveRecordItem (id) {
     handleRemoveRecords([id])