Skip to content

Commit 67613d6

Browse files
authored
Merge pull request tangly1024#2177 from lxw15337674/feat/search
增加全局搜索快键键操作提示
2 parents 3a32fe7 + a407cd5 commit 67613d6

File tree

1 file changed

+26
-1
lines changed

1 file changed

+26
-1
lines changed

components/AlgoliaSearchModal.js

+26-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useState, useImperativeHandle, useRef, useEffect } from 'react'
1+
import { useState, useImperativeHandle, useRef, useEffect, Fragment } from 'react'
22
import algoliasearch from 'algoliasearch'
33
import replaceSearchResult from '@/components/Mark'
44
import Link from 'next/link'
@@ -7,6 +7,22 @@ import throttle from 'lodash/throttle'
77
import { siteConfig } from '@/lib/config'
88
import { useHotkeys } from 'react-hotkeys-hook';
99

10+
const ShortCutActions = [
11+
{
12+
key: '↑ ↓',
13+
action: '选择'
14+
},
15+
{
16+
key: 'Enter',
17+
action: '跳转'
18+
},
19+
{
20+
key: 'Esc',
21+
action: '关闭'
22+
}
23+
24+
]
25+
1026
/**
1127
* 结合 Algolia 实现的弹出式搜索框
1228
* 打开方式 cRef.current.openSearch()
@@ -234,6 +250,15 @@ export default function AlgoliaSearchModal({ cRef }) {
234250
</ul>
235251
<Pagination totalPage={totalPage} page={page} switchPage={switchPage} />
236252
<div className='flex items-center justify-between mt-2 sm:text-sm text-xs dark:text-gray-300'>
253+
{totalHit === 0 && (<div className='flex items-center'>
254+
{
255+
ShortCutActions.map((action, index) => {
256+
return <Fragment key={index}><div className='border-gray-300 dark:text-gray-300 text-gray-600 px-2 rounded border inline-block'>{action.key}</div>
257+
<span className='ml-2 mr-4 text-gray-600 dark:text-gray-300'>{action.action}</span></Fragment>
258+
})
259+
}
260+
</div>)
261+
}
237262
<div>
238263
{totalHit > 0 && (
239264
<p>

0 commit comments

Comments
 (0)