From d6c835ce487b0d0fdf2d9dc2ffaff24afc5a7143 Mon Sep 17 00:00:00 2001
From: Aresn <admin@aresn.com>
Date: Wed, 22 May 2024 19:53:14 +0800
Subject: [PATCH] Update Ask.vue

---
 components/i/search/Ask.vue | 47 +++++++++++++++++++++++++++++++++----
 1 file changed, 42 insertions(+), 5 deletions(-)

diff --git a/components/i/search/Ask.vue b/components/i/search/Ask.vue
index e6cb1de..4210613 100644
--- a/components/i/search/Ask.vue
+++ b/components/i/search/Ask.vue
@@ -1,16 +1,31 @@
 <template>
     <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
+        <UCard
+            class="has-[:focus]:ring-2 has-[:focus]:ring-green-500 dark:has-[:focus]:ring-green-400"
+            :ui="cardUI"
+        >
+            <UTextarea
+                ref="queryInput"
                 class="flex-grow"
                 name="queryInput"
+                :rows="1"
+                :maxrows="10"
+                autoresize
                 v-model="continueQuestion"
-                placeholder="提出后续问题"
+                :placeholder="'提出后续问题（' + metaSymbol + 'L）'"
                 size="xl"
                 :padded="false"
                 variant="none"
             />
-            <div class="flex">
+            <UButton
+                v-if="continueQuestion"
+                :ui="{ rounded: 'rounded-full' }"
+                color="gray"
+                variant="ghost"
+                leading-icon="i-heroicons-x-mark-20-solid"
+                @click="handleClearQuestion"
+            />
+            <div class="flex flex-shrink-0 gap-2">
                 <UButton
                     v-if="!asking"
                     :ui="{ rounded: 'rounded-full' }"
@@ -34,22 +49,43 @@
     </div>
 </template>
 <script setup>
+const { metaSymbol } = useShortcuts()
 const props = defineProps({
     asking: {
         type: Boolean,
         default: false
     }
 })
+const emits = defineEmits(['ask', 'stop'])
+const cardUI = {
+    body: {
+        padding: '',
+        base: 'flex items-end has-[textarea[rows="1"]]:items-center pl-4 pr-1 py-1 gap-2'
+    },
+    base: 'w-full',
+    rounded: 'rounded has-[textarea[rows="1"]]:rounded-full'
+}
 defineShortcuts({
     meta_enter: {
         usingInput: 'queryInput',
         handler: () => {
             handleAsk()
         }
+    },
+    meta_l: {
+        handler: () => {
+            handleFocus()
+        }
     }
 })
-const emits = defineEmits(['ask', 'stop'])
+function handleFocus () {
+    queryInput.value.textarea.focus()
+}
 const continueQuestion = ref('')
+function handleClearQuestion () {
+    continueQuestion.value = ''
+    handleFocus()
+}
 function handleStop () {
     emits('stop')
 }
@@ -58,4 +94,5 @@ function handleAsk () {
     emits('ask', continueQuestion.value)
     continueQuestion.value = ''
 }
+const queryInput = ref(null)
 </script>
-- 
GitLab