a's'k

components/i/search/Ask.vue

 <template>
-    <div class="justify-between flex w-full space-x-2">
-        <UTooltip text="停止生成" v-if="asking">
-            <UButton
-                size="xl"
-                square
-                trailing-icon="i-heroicons-stop-20-solid"
-                color="gray"
-                @click="handleStop"
-                :ui="{ rounded: 'rounded-full' }"
-            />
-        </UTooltip>
+    <div class="flex w-full">
+        <UCard :ui="{ body: { padding: '', base: 'flex items-center pl-4 pr-1 py-1 gap-2' }, base: 'w-full', rounded: 'rounded-full' }">
             <UInput
+                class="flex-grow"
                 name="queryInput"
-            class="w-full"
                 v-model="continueQuestion"
                 placeholder="提出后续问题"
                 size="xl"
-            :disabled="asking"
+                :padded="false"
+                variant="none"
             />
+            <div class="flex">
                 <UButton
+                    v-if="!asking"
+                    :ui="{ rounded: 'rounded-full' }"
+                    :disabled="!continueQuestion"
+                    trailing-icon="i-heroicons-chevron-right-20-solid"
                     size="xl"
-            square
                     @click="handleAsk"
-            :trailing-icon="asking ? '' : 'i-heroicons-chevron-right-20-solid'"
-            :disabled="!continueQuestion"
-            :loading="asking"
                 />
+                <UTooltip v-else text="停止生成">
+                    <UButton
+                        :ui="{ rounded: 'rounded-full' }"
+                        color="red"
+                        trailing-icon="i-heroicons-stop-20-solid"
+                        size="xl"
+                        @click="handleStop"
+                    />
+                </UTooltip>
+            </div>
+        </UCard>
     </div>
 </template>
 <script setup>
-defineProps({
+const props = defineProps({
     asking: {
         type: Boolean,
         default: false
     }
 })
+defineShortcuts({
+    meta_enter: {
+        usingInput: 'queryInput',
+        handler: () => {
+            handleAsk()
+        }
+    }
+})
 const emits = defineEmits(['ask', 'stop'])
 const continueQuestion = ref('')
 function handleStop () {
     emits('stop')
 }
 function handleAsk () {
+    if (props.asking) return
     emits('ask', continueQuestion.value)
+    continueQuestion.value = ''
 }
 </script>

pages/search/[id].vue

@@ -124,7 +124,7 @@
                 </UButton>
             </div>
         </div>
-        <div class="container max-w-screen-lg sticky bottom-2 flex pl-6 pr-6">
+        <div class="container max-w-screen-lg sticky bottom-4 flex pl-6 pr-6">
             <ISearchAsk :asking="asking" @stop="handleStopGenerate" @ask="handleContinueAsk" />
         </div>
     </div>
@@ -227,14 +227,6 @@ const sourceCount = computed(() => {
     }
     return currentData.source.length
 })
-defineShortcuts({
-    meta_enter: {
-        usingInput: 'queryInput',
-        handler: () => {
-            handleContinueAsk(continueQuestion.value)
-        }
-    }
-})
 let asking = ref(false)
 const handleClearInput = () => {
     continueQuestion.value = ''