feature: 添加header组件

components/i/search/Header.vue

+<template>
+    <header class="sticky top-0 z-10 bg-white dark:bg-black w-full flex flex-col">
+        <div class="w-full p-2 justify-end sm:justify-between items-center flex">
+            <div class="flex-grow justify-center items-center space-x-2 hidden sm:flex">
+                <UTooltip text="点击修改标题" v-if="!isEditTitle">
+                    <div @click="handleFocusTitle">{{ editTitle }}</div>
+                </UTooltip>
+                <UInput
+                    v-else
+                    ref="titleRef"
+                    autofocus
+                    :model-value="editTitle"
+                    @blur="handleBlurTitle"
+                />
+                <span>/</span>
+                <UButton color="gray" variant="ghost" leading-icon="i-heroicons-plus-20-solid">收藏</UButton>
+            </div>
+            <div class="flex gap-2">
+                <UButton v-if="SM" color="gray" variant="ghost" leading-icon="i-heroicons-plus-20-solid">收藏</UButton>
+                <UButton @click="handleShare" leading-icon="i-heroicons-share-20-solid">分享</UButton>
+            </div>
+        </div>
+        <UDivider />
+    </header>
+</template>
+<script setup>
+const props = defineProps({
+    query: String
+})
+const emits = defineEmits(['update-query'])
+const isEditTitle = ref(false)
+const titleRef = ref(null)
+const editTitle = ref('')
+
+watch(()=> props.query, () => {
+    editTitle.value = props.query
+}, { immediate: true })
+
+function handleFocusTitle () {
+    isEditTitle.value = true
+}
+function handleBlurTitle () {
+    isEditTitle.value = false
+    emits('update-query', editTitle.value)
+}
+function handleShare () {
+    useCopyToClipboard().copy(window.location.href)
+    toast.add({
+        icon: 'i-heroicons-information-circle-20-solid',
+        timeout: 2000,
+        title: '链接已复制到剪贴板'
+    })
+}
+</script>
\ No newline at end of file

pages/search/[id].vue

 <template>
     <div class="w-full items-center flex flex-col">
-        <header class="sticky top-0 z-10 bg-white dark:bg-black w-full flex flex-col">
-            <div class="w-full p-2 justify-end sm:justify-between items-center flex">
-                <div class="flex-grow justify-center items-center space-x-2 hidden sm:flex">
-                    <UTooltip text="点击修改标题" v-if="!isEditTitle">
-                        <div @click="handleFocusTitle">{{ state.query }}</div>
-                    </UTooltip>
-                    <UInput
-                        v-else
-                        ref="titleRef"
-                        autofocus
-                        :model-value="state.query"
-                        @blur="handleBlurTitle"
-                    />
-                    <span>/</span>
-                    <UButton color="gray" variant="ghost" leading-icon="i-heroicons-plus-20-solid">收藏</UButton>
-                </div>
-                <div class="flex gap-2">
-                    <UButton v-if="SM" color="gray" variant="ghost" leading-icon="i-heroicons-plus-20-solid">收藏</UButton>
-                    <UButton @click="handleShare" leading-icon="i-heroicons-share-20-solid">分享</UButton>
-                </div>
-            </div>
-            <UDivider />
-        </header>
+        <iSearchHeader :query="state.query" @update-query="handleUpdateQuery" />
         <div class="container max-w-screen-lg flex flex-col space-y-6 p-6 mb-6 pb-0" id="scrollElement">
             <div class="grid">
                 <h2 class="text-3xl">{{ state.query }}</h2>
@@ -76,7 +54,9 @@ const state = reactive({
 useHead({
     title: `${state.query} - GitBot`
 })
-
+function handleUpdateQuery(query) {
+    state.query = query;
+}
 // 是否停止自动滚动到底部
 const isAutoToBottom = ref(true)
 const handleScroll = (event, params) => {
@@ -96,22 +76,6 @@ const scrollToView = () => {
     const height = $target.clientHeight
     y.value = height
 }
-const isEditTitle = ref(false)
-const titleRef = ref(null)
-const handleFocusTitle = () => {
-    isEditTitle.value = true
-}
-const handleBlurTitle = () => {
-    isEditTitle.value = false
-}
-function handleShare () {
-    useCopyToClipboard().copy(window.location.href)
-    toast.add({
-        icon: 'i-heroicons-information-circle-20-solid',
-        timeout: 2000,
-        title: '链接已复制到剪贴板'
-    })
-}
 const handleReGenerate = (index) => {
     editIndex.value = index
     const question = data.value[editIndex.value].question