feat: scroll & switch shortcuts

NitroRCr · Dec 21, 2024 · 86512a2 · 86512a2
1 parent 47732a2
commit 86512a2
Show file tree

Hide file tree

Showing 12 changed files with 494 additions and 40 deletions.
diff --git a/src/components/PlatformEnabledInput.vue b/src/components/PlatformEnabledInput.vue
@@ -0,0 +1,20 @@
+<template>
+  <q-select
+    v-model="model"
+    :options="options"
+    map-options
+    emit-value
+  />
+</template>
+
+<script setup lang="ts">
+import { PlatformEnabled } from 'src/utils/types'
+
+const model = defineModel<PlatformEnabled>()
+const options = [
+  { label: '始终启用', value: 'always' },
+  { label: '仅桌面端', value: 'desktop-only' },
+  { label: '仅移动端', value: 'mobile-only' },
+  { label: '始终禁用', value: 'never' }
+]
+</script>
diff --git a/src/components/ProviderInputItems.vue b/src/components/ProviderInputItems.vue
@@ -13,11 +13,10 @@
         dense
         clearable
       >
-        <template #option="{ opt, itemProps, selected }">
+        <template #option="{ opt, itemProps }">
           <q-item
             v-bind="itemProps"
             min-h-0
-            :class="{ 'bg-sec-c text-on-sec-c': selected }"
           >
             <q-item-section
               avatar

diff --git a/src/components/ShortcutKeyInput.vue b/src/components/ShortcutKeyInput.vue
@@ -0,0 +1,46 @@
+<template>
+  <q-field
+    @focus="onFocus"
+    @blur="onBlur"
+  >
+    <template #control>
+      <div v-if="text">
+        {{ text }}
+      </div>
+    </template>
+  </q-field>
+</template>
+
+<script setup lang="ts">
+import { ShortcutKey } from 'src/utils/types'
+import { computed } from 'vue'
+
+const model = defineModel<ShortcutKey>()
+const listener = (ev: KeyboardEvent) => {
+  if (['ControlLeft', 'ShiftLeft', 'AltLeft', 'ControlRight', 'ShiftRight', 'AltRight'].includes(ev.code)) return
+  model.value = {
+    key: ev.code,
+    withCtrl: ev.ctrlKey,
+    withShift: ev.shiftKey,
+    withAlt: ev.altKey
+  }
+  ev.preventDefault()
+}
+function onFocus() {
+  model.value = null
+  document.addEventListener('keydown', listener)
+}
+function onBlur() {
+  document.removeEventListener('keydown', listener)
+}
+
+const text = computed(() => {
+  if (!model.value) return
+  let val = ''
+  if (model.value.withCtrl) val += 'Ctrl + '
+  if (model.value.withShift) val += 'Shift + '
+  if (model.value.withAlt) val += 'Alt + '
+  val += model.value.key
+  return val
+})
+</script>
diff --git a/src/composables/listen-key.ts b/src/composables/listen-key.ts
@@ -0,0 +1,18 @@
+import { ShortcutKey } from 'src/utils/types'
+import { onActivated, onDeactivated, onMounted, onUnmounted, Ref, unref } 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 (event.code === key && event.ctrlKey === withCtrl && event.shiftKey === withShift && event.altKey === withAlt) {
+      callback()
+      prevent && event.preventDefault()
+    }
+  }
+  const addListener = () => { document.addEventListener('keydown', listener) }
+  const rmListener = () => { document.removeEventListener('keydown', listener) }
+  onMounted(addListener)
+  onUnmounted(rmListener)
+  onActivated(addListener)
+  onDeactivated(rmListener)
+}
diff --git a/src/css/app.scss b/src/css/app.scss
@@ -90,6 +90,11 @@ body.body--light {
       }
     }
   }
+
+  .q-item.q-router-link--active,
+  .q-item--active {
+    --at-apply: 'bg-sec-c text-on-sec-c';
+  }
 }
 
 .q-field--dark:not(.q-field--highlighted) .q-field__label,
@@ -224,4 +229,4 @@ body .vuepress-theme {
 .md-editor-dark .vuepress-theme {
   --md-theme-color: var(--a-on-sur-var) !important;
   --md-theme-heading-color: var(--a-on-sur-var) !important;
-}
+}
diff --git a/src/pages/SettingsPage.vue b/src/pages/SettingsPage.vue
@@ -141,6 +141,34 @@
             <q-toggle v-model="perfs.codePasteOptimize" />
           </q-item-section>
         </q-item>
+        <q-item>
+          <q-item-section>
+            <q-item-label>
+              快速滚动按钮
+            </q-item-label>
+            <q-item-label caption>
+              在对话右下角显示快速滚动按钮。关闭后，你仍然可以使用键盘快捷键滚动
+            </q-item-label>
+          </q-item-section>
+          <q-item-section side>
+            <platform-enabled-input
+              v-model="perfs.dialogScrollBtn"
+              class="min-w-120px"
+              dense
+              filled
+            />
+          </q-item-section>
+        </q-item>
+        <q-item
+          clickable
+          v-ripple
+          to="/shortcut-keys"
+        >
+          <q-item-section>键盘快捷键</q-item-section>
+          <q-item-section side>
+            <q-icon name="sym_o_chevron_right" />
+          </q-item-section>
+        </q-item>
         <q-separator spaced />
         <q-item-label
           header
@@ -155,7 +183,7 @@
           <q-item-section>外观</q-item-section>
           <q-item-section side>
             <q-select
-              class="min-w-150px"
+              class="min-w-120px"
               filled
               dense
               :options="darkModeOptions"
@@ -276,6 +304,7 @@ import ProviderInputItems from 'src/components/ProviderInputItems.vue'
 import { useLocateId } from 'src/composables/locate-id'
 import { pageFhStyle } from 'src/utils/functions'
 import { DexieDBURL, LitellmBaseURL } from 'src/utils/config'
+import PlatformEnabledInput from 'src/components/PlatformEnabledInput.vue'
 
 const uiStateStore = useUiStateStore()
 const { perfs, restore } = useUserPerfsStore()

diff --git a/src/pages/ShortcutKeys.vue b/src/pages/ShortcutKeys.vue
@@ -0,0 +1,168 @@
+<template>
+  <q-header
+    bg-sur-c-low
+    text-on-sur
+  >
+    <q-toolbar>
+      <q-btn
+        flat
+        dense
+        round
+        icon="sym_o_arrow_back"
+        @click="back"
+      />
+      <q-toolbar-title>
+        键盘快捷键
+      </q-toolbar-title>
+    </q-toolbar>
+  </q-header>
+  <q-page-container>
+    <q-page :style-fn="pageFhStyle">
+      <q-list
+        py-2
+        max-w="1000px"
+        mx-a
+      >
+        <q-item>
+          <q-item-section>
+            <q-item-label>
+              启用键盘快捷键
+            </q-item-label>
+          </q-item-section>
+          <q-item-section side>
+            <platform-enabled-input
+              v-model="perfs.enableShortcutKey"
+              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.scrollUpKey"
+              v-bind="inputProps"
+            />
+          </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.scrollDownKey"
+              v-bind="inputProps"
+            />
+          </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.scrollTopKey"
+              v-bind="inputProps"
+            />
+          </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.scrollBottomKey"
+              v-bind="inputProps"
+            />
+          </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.switchPrevKey"
+              v-bind="inputProps"
+            />
+          </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.switchNextKey"
+              v-bind="inputProps"
+            />
+          </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.switchFirstKey"
+              v-bind="inputProps"
+            />
+          </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.switchLastKey"
+              v-bind="inputProps"
+            />
+          </q-item-section>
+        </q-item>
+      </q-list>
+    </q-page>
+  </q-page-container>
+</template>
+
+<script setup lang="ts">
+import { useUserPerfsStore } from 'src/stores/user-perfs'
+import { pageFhStyle } from 'src/utils/functions'
+import { useBack } from 'src/composables/back'
+import ShortcutKeyInput from 'src/components/ShortcutKeyInput.vue'
+import PlatformEnabledInput from 'src/components/PlatformEnabledInput.vue'
+
+const { perfs } = useUserPerfsStore()
+
+const back = useBack('/settings')
+
+const inputProps = {
+  dense: true,
+  filled: true,
+  class: 'min-w-150px'
+}
+</script>
diff --git a/src/router/routes.ts b/src/router/routes.ts
@@ -18,6 +18,7 @@ import AssistantsMarket from 'src/views/AssistantsMarket.vue'
 import AccountPage from 'src/pages/AccountPage.vue'
 import ModelPricing from 'src/pages/ModelPricing.vue'
 import { DexieDBURL, LitellmBaseURL } from 'src/utils/config'
+import ShortcutKeys from 'src/pages/ShortcutKeys.vue'
 
 const routes: RouteRecordRaw[] = [
   {
@@ -41,6 +42,7 @@ const routes: RouteRecordRaw[] = [
         ]
       },
       { path: '/settings', component: SettingsPage },
+      { path: '/shortcut-keys', component: ShortcutKeys },
       {
         path: '/plugins/',
         component: PluginsPage,