feat: add file-tabs.search-tabs action

Joe-Max-LK4Job · Sep 9, 2022 · ed73c3b · ed73c3b
1 parent 6c67cc6
commit ed73c3b
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 7 deletions.
diff --git a/help/SHORTCUTS.md b/help/SHORTCUTS.md
@@ -47,6 +47,7 @@ Edit Table Cell | Double Click Cell
 Edit Table Cell (Popup) | Ctrl/Cmd + Click
 Copy Heading link | Ctrl/Cmd + Click Heading
 Switch Editor Tab | Ctrl/Cmd + Alt/Option + Left/Right
+Search Editor Tabs | Shift + Alt + P
 Close Editor Current Tab | TABS-CLOSE-CURRENT
 Switch Editor Current Tab | Ctrl + 0-9
 Toggle Sidebar | Alt/Option + E
@@ -99,6 +100,7 @@ Switch Repository | Alt/Option + 0-9
 编辑表格单元格(弹出框) | Ctrl/Cmd + 单击单元格
 复制文档标题链接 | Ctrl/Cmd + 单击标题
 切换编辑器 Tab | Ctrl/Cmd + Alt/Option + Left/Right
+搜索编辑器 Tab | Shift + Alt + P
 关闭编辑器当前标签 Tab | TABS-CLOSE-CURRENT
 切换编辑器当前标签 | Ctrl + 0-9
 切换侧栏 | Alt/Option + E

diff --git a/src/renderer/components/FileTabs.vue b/src/renderer/components/FileTabs.vue
@@ -1,11 +1,19 @@
 <template>
-  <Tabs :list="fileTabs" :value="current" @remove="removeTabs" @switch="switchTab" @change-list="setTabs"></Tabs>
+  <Tabs
+    ref="refTabs"
+    :list="fileTabs"
+    :value="current"
+    :filter-btn-title="filterBtnTitle"
+    @remove="removeTabs"
+    @switch="switchTab"
+    @change-list="setTabs"
+  />
 </template>
 
 <script lang="ts">
 import { useStore } from 'vuex'
 import { computed, defineComponent, onBeforeMount, onBeforeUnmount, ref, toRefs, watch } from 'vue'
-import { Alt, CtrlCmd } from '@fe/core/command'
+import { Alt, CtrlCmd, getKeysLabel, Shift } from '@fe/core/command'
 import type { Components, Doc } from '@fe/types'
 import { registerHook, removeHook } from '@fe/core/hook'
 import { registerAction, removeAction } from '@fe/core/action'
@@ -21,14 +29,17 @@ export default defineComponent({
   name: 'file-tabs',
   components: { Tabs },
   setup () {
-    const { t } = useI18n()
+    const { t, $t } = useI18n()
     const store = useStore()
 
     const { currentFile, tabs } = toRefs<AppState>(store.state)
     const isSaved = computed(() => store.getters.isSaved)
 
     const list = ref<Components.FileTabs.Item[]>([])
     const current = ref(blankUri)
+    const refTabs = ref<InstanceType<typeof Tabs> | null>(null)
+    const showFilterBtnShortcuts = [Shift, Alt, 'p']
+    const filterBtnTitle = computed(() => $t.value('tabs.search-tabs') + ' ' + getKeysLabel(showFilterBtnShortcuts))
 
     function setTabs (list: Components.FileTabs.Item[]) {
       store.commit('setTabs', list)
@@ -153,6 +164,14 @@ export default defineComponent({
         handler: closeCurrent,
         keys: isElectron ? [CtrlCmd, 'w'] : [CtrlCmd, Alt, 'w']
       })
+
+      registerAction({
+        name: 'file-tabs.search-tabs',
+        handler () {
+          refTabs.value?.showQuickFilter()
+        },
+        keys: showFilterBtnShortcuts
+      })
     })
 
     onBeforeUnmount(() => {
@@ -163,6 +182,7 @@ export default defineComponent({
       removeAction('file-tabs.switch-left')
       removeAction('file-tabs.switch-right')
       removeAction('file-tabs.close-current')
+      removeAction('file-tabs.search-tabs')
     })
 
     watch(currentFile, file => {
@@ -228,6 +248,8 @@ export default defineComponent({
       removeTabs,
       switchTab,
       setTabs,
+      refTabs,
+      filterBtnTitle,
     }
   },
 })

diff --git a/src/renderer/components/QuickFilter.vue b/src/renderer/components/QuickFilter.vue
@@ -174,14 +174,16 @@ watch(() => keyword.value, () => {
     max-height: 70vh;
     overflow-y: auto;
     user-select: none;
+    padding-left: 1px;
 
     .item {
       padding: 0 16px;
-      line-height: 2;
+      line-height: 1.9;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
       color: var(--g-color-20);
+      border-radius: var(--g-border-radius);
 
       &.current {
         font-weight: bold;

diff --git a/src/renderer/components/Tabs.vue b/src/renderer/components/Tabs.vue
@@ -25,7 +25,7 @@
         </div>
       </div>
     </div>
-    <div class="filter-btn" @click="showQuickFilter">
+    <div ref="refFilterBtn" class="filter-btn" @click="showQuickFilter" :title="filterBtnTitle">
       <svg-icon name="chevron-down" width="10px" />
     </div>
   </div>
@@ -60,12 +60,14 @@ export default defineComponent({
       type: Array as () => Components.Tabs.Item[],
       required: true,
     },
+    filterBtnTitle: String,
   },
   emits: ['input', 'remove', 'switch', 'change-list'],
   setup (props, { emit }) {
     const { t } = useI18n()
 
     const refTabs = ref<HTMLElement | null>(null)
+    const refFilterBtn = ref<HTMLElement | null>(null)
     const contextMenu = useContextMenu()
     const quickFilterParams = shallowRef<{ top: string, right: string } | null>(null)
 
@@ -155,8 +157,8 @@ export default defineComponent({
       ])
     }
 
-    function showQuickFilter (e: MouseEvent) {
-      const rect = (e.currentTarget as HTMLElement).getBoundingClientRect()
+    function showQuickFilter () {
+      const rect = refFilterBtn.value!.getBoundingClientRect()
       quickFilterParams.value = {
         top: `${rect.bottom + 10}px`,
         right: `${document.body.clientWidth - rect.right}px`,
@@ -245,6 +247,7 @@ export default defineComponent({
       toggleFix,
       handleShadow,
       onMouseWheel,
+      refFilterBtn,
       showQuickFilter,
       quickFilterParams,
     }

diff --git a/src/renderer/core/command.ts b/src/renderer/core/command.ts
@@ -16,6 +16,7 @@ export const Shift = 'Shift'
 export const BracketLeft = 'BracketLeft'
 export const BracketRight = 'BracketRight'
 export const LeftClick = 0
+export const Tab = 'Tab'
 
 type XKey = typeof Ctrl | typeof CtrlCmd | typeof Alt | typeof Shift
 
@@ -85,6 +86,7 @@ export function getKeyLabel (key: XKey | string | number) {
     BracketLeft: '[',
     BracketRight: ']',
     Period: '.',
+    Tab: 'Tab',
   }[key]
 
   return str || upperFirst(key.toString())

diff --git a/src/renderer/types.ts b/src/renderer/types.ts
@@ -206,6 +206,7 @@ export type BuildInActions = {
   'file-tabs.switch-left': () => void,
   'file-tabs.switch-right': () => void,
   'file-tabs.close-current': () => void,
+  'file-tabs.search-tabs': () => void,
   'xterm.run': (cmd: { code: string, start: string, exit?: string } | string) => void,
   'xterm.init': (opts?: { cwd?: string }) => void,
   'plugin.document-history-stack.back': () => void,