Add keybinding search (#1143)

src/components/dialog/content/setting/KeybindingPanel.vue

@@ -3,9 +3,20 @@
     <DataTable
       :value="commandsData"
       v-model:selection="selectedCommandData"
+      :global-filter-fields="['id']"
+      :filters="filters"
       selectionMode="single"
       stripedRows
+      :pt="{
+        header: 'px-0'
+      }"
     >
+      <template #header>
+        <SearchBox
+          v-model="filters['global'].value"
+          :placeholder="$t('searchKeybindings') + '...'"
+        />
+      </template>
       <Column field="actions" header="">
         <template #body="slotProps">
           <div class="actions invisible">
@@ -103,7 +114,13 @@ import InputText from 'primevue/inputtext'
 import Message from 'primevue/message'
 import Tag from 'primevue/tag'
 import KeyComboDisplay from './keybinding/KeyComboDisplay.vue'
+import SearchBox from '@/components/common/SearchBox.vue'
 import { useToast } from 'primevue/usetoast'
+import { FilterMatchMode } from '@primevue/core/api'
+
+const filters = ref({
+  global: { value: '', matchMode: FilterMatchMode.CONTAINS }
+})
 
 const keybindingStore = useKeybindingStore()
 const commandStore = useCommandStore()

src/i18n.ts

@@ -44,6 +44,7 @@ const messages = {
     searchSettings: 'Search Settings',
     searchNodes: 'Search Nodes',
     searchModels: 'Search Models',
+    searchKeybindings: 'Search Keybindings',
     noResultsFound: 'No Results Found',
     searchFailedMessage:
       "We couldn't find any settings matching your search. Try adjusting your search terms.",
@@ -152,6 +153,7 @@ const messages = {
     searchSettings: '搜索设置',
     searchNodes: '搜索节点',
     searchModels: '搜索模型',
+    searchKeybindings: '搜索键位',
     noResultsFound: '未找到结果',
     searchFailedMessage:
       '我们找不到与您的搜索匹配的任何设置。请尝试调整搜索条件。',