feat: 切换 history 时自动聚焦输入框 (Chanzhaoyu#735)

* feat: 修改 scrollToBottom 行为(当滚动条在底部或发送问题时才会进入自动滚动,滚轮向上滚动会中止自动滚动,方便复制和查看之前的代码; 切换 history 时自动聚焦输入框,方便直接输入文字,不用再次去点击输入框;) * chore: 通过eslint检查 * perf: 清理重复功能 --------- Co-authored-by: Redon <[email protected]>
jingChen55 · Mar 27, 2023 · 0f40970 · 0f40970
1 parent 9993d64
commit 0f40970
Showing 1 changed file with 5 additions and 0 deletions.
diff --git a/src/views/chat/index.vue b/src/views/chat/index.vue
@@ -1,4 +1,5 @@
 <script setup lang='ts'>
+import type { Ref } from 'vue'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { useRoute } from 'vue-router'
 import { storeToRefs } from 'pinia'
@@ -40,6 +41,7 @@ const conversationList = computed(() => dataSources.value.filter(item => (!item.
 
 const prompt = ref<string>('')
 const loading = ref<boolean>(false)
+const inputRef = ref<Ref | null>(null)
 
 // 添加PromptStore
 const promptStore = usePromptStore()
@@ -452,6 +454,8 @@ const footerClass = computed(() => {
 
 onMounted(() => {
   scrollToBottom()
+  if (inputRef.value)
+    inputRef.value?.focus()
 })
 
 onUnmounted(() => {
@@ -532,6 +536,7 @@ onUnmounted(() => {
           <NAutoComplete v-model:value="prompt" :options="searchOptions" :render-label="renderOption">
             <template #default="{ handleInput, handleBlur, handleFocus }">
               <NInput
+                ref="inputRef"
                 v-model:value="prompt"
                 type="textarea"
                 :placeholder="placeholder"