diff --git a/app.vue b/app.vue
index 6a0956c9c20cef07bd8c465aa576a4d0bd55b02d..64fba5305e883933e575ed4a6cabb077b5b1f6f5 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 0000000000000000000000000000000000000000..5cc90b96d2c4821c69a23357629e66f768d32db8
--- /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 ea1ffdfc0a87222c5525d9b769683d196db2559d..f2a1bfcdd1e9a18cab25d3d328175643a60889f7 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])