diff --git a/components/i/Nav.vue b/components/i/Nav.vue
index 97c08f2baec12006feac7b42a7f2f6fc2be37987..e6adb9b7c7877a76ab9f1cc498bb24095188fba9 100644
--- a/components/i/Nav.vue
+++ b/components/i/Nav.vue
@@ -16,23 +16,7 @@
             label="收藏夹"
             to="/library"
         />
-        <div class="flex justify-between">
-            <UButton
-                class="flex-grow"
-                leading-icon="i-heroicons-magnifying-glass"
-                color="gray"
-                variant="ghost"
-                size="md"
-                label="搜索记录"
-                @click="handleOpenSearchHistory"
-            />
-            <UButton
-                v-if="$isSignIn"
-                label="清空"
-                size="md"
-                variant="link"
-            />
-        </div>
+        <ISearchHistory @sign="handleOpenSign" />
         <div v-if="$isSignIn" class="flex flex-col gap-2 border-l border-gray-200 dark:border-gray-800 pl-2 ml-5">
             <template v-for="(item, index) in searchHistory" :key="index">
                 <UButton
@@ -83,10 +67,4 @@ const handleOpenSign = () => {
 const handleCloseSign = () => {
     isOpenSign.value = false
 }
-const handleOpenSearchHistory = () => {
-    if (!$isSignIn) handleOpenSign()
-    else {
-
-    }
-}
 </script>
diff --git a/components/i/SearchHistory.vue b/components/i/SearchHistory.vue
new file mode 100644
index 0000000000000000000000000000000000000000..88097dd7173798eb4bef4e7b42c6ba99262d4679
--- /dev/null
+++ b/components/i/SearchHistory.vue
@@ -0,0 +1,30 @@
+<template>
+    <div class="flex justify-between">
+        <UButton
+            class="flex-grow"
+            leading-icon="i-heroicons-magnifying-glass"
+            color="gray"
+            variant="ghost"
+            size="md"
+            label="搜索记录"
+            @click="handleOpen"
+        />
+        <UButton
+            v-if="$isSignIn"
+            label="清空"
+            size="md"
+            variant="link"
+            @click="handleClear"
+        />
+    </div>
+</template>
+<script setup>
+const emits = defineEmits(['sign', 'clear'])
+const { $isSignIn } = useUserStore()
+function handleClear () {
+    emits('clear')
+}
+function handleOpen () {
+    if (!$isSignIn) emits('sign')
+}
+</script>