From a100c6eb878a1b412662a122d8a814b9e7549d5c Mon Sep 17 00:00:00 2001
From: Aresn <admin@aresn.com>
Date: Wed, 15 May 2024 11:43:19 +0800
Subject: [PATCH] add

---
 layouts/default.vue   |  2 +-
 pages/search/[id].vue | 35 +++++++++++++++++++++++++++++++++--
 2 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/layouts/default.vue b/layouts/default.vue
index 548b4fe..3da6ea6 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -14,7 +14,7 @@
                 />
             </div>
         </div>
-        <div class="ml-64 bg-white dark:bg-gray-900 flex flex-grow p-6">
+        <div class="ml-64 bg-white dark:bg-gray-900 flex flex-grow">
             <slot />
         </div>
     </div>
diff --git a/pages/search/[id].vue b/pages/search/[id].vue
index 9499020..f6cb5aa 100644
--- a/pages/search/[id].vue
+++ b/pages/search/[id].vue
@@ -1,6 +1,28 @@
 <template>
-    <div class="flex justify-center w-full">
-        <div class="max-w-screen-lg flex flex-col space-y-4 mb-4">
+    <div class="w-full justify-center items-center flex flex-col">
+        <div class="w-full flex flex-col">
+            <div class="w-full p-2 justify-between items-center flex">
+                <div class="flex-grow justify-center items-center flex space-x-2">
+                    <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>
+                    <UButton leading-icon="i-heroicons-share-20-solid">分享</UButton>
+                </div>
+            </div>
+            <UDivider />
+        </div>
+        <div class="max-w-screen-lg flex flex-col space-y-4 mb-4 p-6">
             <h1 class="text-3xl truncate">{{ state.query }}</h1>
             <section>{{ state.repo }}</section>
 
@@ -111,6 +133,15 @@ const state = reactive({
     query: route.query.query || '',
     repo: route.query.repo || ''
 })
+const isEditTitle = ref(false)
+const titleRef = ref(null)
+
+const handleFocusTitle = () => {
+    isEditTitle.value = true
+}
+const handleBlurTitle = () => {
+    isEditTitle.value = false
+}
 
 const steps = ['', '问题分析', '代码搜索', '整理答案', '完成！']
 const stepColor = (step) => {
-- 
GitLab