From b1ffa283034cd02e27923be7d7cdacb1643a7254 Mon Sep 17 00:00:00 2001
From: Bhwa233 <404174262@qq.com>
Date: Sat, 16 Mar 2024 14:34:03 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=93=8D=E4=BD=9C=E6=8F=90?=
 =?UTF-8?q?=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/AlgoliaSearchModal.js | 28 +++++++++++++++++++++++++++-
 components/ShortcutTag.js        |  7 +++++++
 2 files changed, 34 insertions(+), 1 deletion(-)
 create mode 100644 components/ShortcutTag.js

diff --git a/components/AlgoliaSearchModal.js b/components/AlgoliaSearchModal.js
index 54465826..49cad8b2 100644
--- a/components/AlgoliaSearchModal.js
+++ b/components/AlgoliaSearchModal.js
@@ -1,4 +1,4 @@
-import { useState, useImperativeHandle, useRef, useEffect } from 'react'
+import { useState, useImperativeHandle, useRef, useEffect, Fragment } from 'react'
 import algoliasearch from 'algoliasearch'
 import replaceSearchResult from '@/components/Mark'
 import Link from 'next/link'
@@ -6,6 +6,23 @@ import { useGlobal } from '@/lib/global'
 import throttle from 'lodash/throttle'
 import { siteConfig } from '@/lib/config'
 import { useHotkeys } from 'react-hotkeys-hook';
+import ShortcutTag from '@/components/ShortcutTag'
+
+const ShortCutActions = [
+  {
+    key: '↑ ↓',
+    action: '选择'
+  },
+  {
+    key: 'Enter',
+    action: '跳转'
+  },
+  {
+    key: 'Esc',
+    action: '关闭'
+  }
+
+]
 
 /**
  * 结合 Algolia 实现的弹出式搜索框
@@ -234,6 +251,15 @@ export default function AlgoliaSearchModal({ cRef }) {
         </ul>
         <Pagination totalPage={totalPage} page={page} switchPage={switchPage} />
         <div className='flex items-center justify-between mt-2 sm:text-sm text-xs dark:text-gray-300'>
+          {totalHit === 0 && (<div className='flex items-center'>
+            {
+              ShortCutActions.map((action, index) => {
+                return <Fragment key={index}><div className={`border-gray-300 dark:text-gray-400 text-gray-400 px-1 rounded border inline-block `}>{action.key}</div>
+                  <span className='ml-2 mr-4  text-gray-600 dark:text-gray-300'>{action.action}</span></Fragment>
+              })
+            }
+          </div>)
+          }
           <div>
             {totalHit > 0 && (
               <p>
diff --git a/components/ShortcutTag.js b/components/ShortcutTag.js
new file mode 100644
index 00000000..4e36e8be
--- /dev/null
+++ b/components/ShortcutTag.js
@@ -0,0 +1,7 @@
+// 操作提示标签
+import React from 'react';
+
+const ShortcutTag = ({ children, className }) => {
+    return <div className={`border-gray-300 dark:text-gray-400 text-gray-400 text-xs px-1 rounded border inline-block ${className}`}>{children}</div>
+}
+export default ShortcutTag
\ No newline at end of file