feat & fix

- feat: more shortcut keys: focus input, createDialog
- feat: auto focus input
- fix useListenKey

README.md

@@ -50,7 +50,7 @@ AIaW 是新一代 LLM 客户端，全功能、轻量级、可拓展。
 
 - 快速滚动：对话右下角有快速滚动按钮，除了一般的滚动到顶部/底部，中间两个按钮是对齐到消息开头/末尾或者上一条/下一条消息的滚动，在消息较长时很方便
 
-- 键盘控制：支持设置键盘快捷键触发上述的滚动操作，以及用键盘快捷键切换消息链
+- 键盘控制：支持设置键盘快捷键触发上述的滚动操作，以及用键盘快捷键切换消息链、重新生成、新建对话
 
 [网站链接](https://aiaw.app) - [使用文档](https://docs.aiaw.app/) - [自部署指南](https://docs.aiaw.app/self-host/)
 

src/components/DialogList.vue

@@ -74,10 +74,12 @@ import { db } from 'src/utils/db'
 import { caselessIncludes } from 'src/utils/functions'
 import { Dialog, Workspace } from 'src/utils/types'
 import { dialogOptions } from 'src/utils/values'
-import { computed, inject, ref, Ref } from 'vue'
+import { computed, inject, ref, Ref, toRef } from 'vue'
 import SelectWorkspaceDialog from './SelectWorkspaceDialog.vue'
 import { useCreateDialog } from 'src/composables/create-dialog'
 import MenuItem from './MenuItem.vue'
+import { useUserPerfsStore } from 'src/stores/user-perfs'
+import { useListenKey } from 'src/composables/listen-key'
 
 const workspace: Ref<Workspace> = inject('workspace')
 const dialogs: Ref<Dialog[]> = inject('dialogs')
@@ -137,4 +139,7 @@ function deleteItem(id) {
     })
   })
 }
+
+const { perfs } = useUserPerfsStore()
+useListenKey(toRef(perfs, 'createDialogKey'), addItem)
 </script>

src/composables/listen-key.ts

@@ -1,9 +1,10 @@
 import { ShortcutKey } from 'src/utils/types'
-import { onActivated, onDeactivated, onMounted, onUnmounted, Ref, unref } from 'vue'
+import { onActivated, onDeactivated, onMounted, onUnmounted, Ref } from 'vue'
 
 export function useListenKey(shortcutKey: Ref<ShortcutKey>, callback, prevent = true) {
   const listener = event => {
-    const { key, withCtrl = false, withShift = false, withAlt = false } = unref(shortcutKey)
+    if (!shortcutKey.value) return
+    const { key, withCtrl = false, withShift = false, withAlt = false } = shortcutKey.value
     if (event.code === key && event.ctrlKey === withCtrl && event.shiftKey === withShift && event.altKey === withAlt) {
       callback()
       prevent && event.preventDefault()

src/pages/ShortcutKeys.vue

@@ -170,6 +170,36 @@
             />
           </q-item-section>
         </q-item>
+        <q-item>
+          <q-item-section>
+            <q-item-label>
+              聚焦输入框
+            </q-item-label>
+          </q-item-section>
+          <q-item-section side>
+            <shortcut-key-input
+              v-model="perfs.focusDialogInputKey"
+              v-bind="inputProps"
+            />
+          </q-item-section>
+        </q-item>
+        <q-separator spaced />
+        <q-item-label header>
+          对话列表
+        </q-item-label>
+        <q-item>
+          <q-item-section>
+            <q-item-label>
+              新建对话
+            </q-item-label>
+          </q-item-section>
+          <q-item-section side>
+            <shortcut-key-input
+              v-model="perfs.createDialogKey"
+              v-bind="inputProps"
+            />
+          </q-item-section>
+        </q-item>
       </q-list>
     </q-page>
   </q-page-container>

src/stores/user-perfs.ts

@@ -30,6 +30,8 @@ interface Perfs {
   switchLastKey?: ShortcutKey
   regenerateCurrKey?: ShortcutKey
   editCurrKey?: ShortcutKey
+  createDialogKey?: ShortcutKey
+  focusDialogInputKey?: ShortcutKey
 }
 
 export const useUserPerfsStore = defineStore('user-perfs', () => {

src/views/DialogView.vue

@@ -342,6 +342,7 @@
           />
         </div>
         <q-input
+          ref="messageInput"
           class="mt-2"
           max-h-50vh
           of-y-auto
@@ -450,6 +451,7 @@ function getChain(node, route: number[]) {
   }
 }
 
+const messageInput = ref()
 async function edit(index) {
   const target = chain.value[index - 1]
   const { type, contents } = messageMap.value[chain.value[index]]
@@ -463,6 +465,8 @@ async function edit(index) {
     const content = contents[0] as UserMessageContent
     saveItems(content.items.map(id => itemMap.value[id]))
   })
+  await nextTick()
+  messageInput.value.focus()
 }
 async function regenerate(index) {
   const target = chain.value[index - 1]
@@ -1054,12 +1058,13 @@ const router = useRouter()
 watch(route, to => {
   db.workspaces.update(workspace.value.id, { lastDialogId: props.id } as Partial<Workspace>)
 
-  if (to.hash === '#genTitle') {
-    until(dialog).toMatch(val => val?.id === props.id).then(() => {
+  until(dialog).toMatch(val => val?.id === props.id).then(() => {
+    messageInput.value?.focus()
+    if (to.hash === '#genTitle') {
       genTitle()
       router.replace({ hash: '' })
-    })
-  }
+    }
+  })
 }, { immediate: true })
 
 function onEnter(ev) {
@@ -1211,6 +1216,7 @@ if (isPlatformEnabled(perfs.enableShortcutKey)) {
   useListenKey(toRef(perfs, 'switchLastKey'), () => switchTo('last'))
   useListenKey(toRef(perfs, 'regenerateCurrKey'), () => regenerateCurr())
   useListenKey(toRef(perfs, 'editCurrKey'), () => editCurr())
+  useListenKey(toRef(perfs, 'focusDialogInputKey'), () => messageInput.value.focus())
 }
 
 defineEmits(['toggle-drawer'])