feat(miniwindow): add up and down key switch menu #792

src/renderer/src/windows/mini/home/components/FeatureMenus.tsx

@@ -1,7 +1,7 @@
 import { BulbOutlined, FileTextOutlined, MessageOutlined, TranslationOutlined } from '@ant-design/icons'
 import Scrollbar from '@renderer/components/Scrollbar'
 import { Col } from 'antd'
-import { Dispatch, FC, SetStateAction } from 'react'
+import { Dispatch, FC, SetStateAction, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 
@@ -13,8 +13,10 @@ interface FeatureMenusProps {
 
 const FeatureMenus: FC<FeatureMenusProps> = ({ text, setRoute, onSendMessage }) => {
   const { t } = useTranslation()
+  const [selectedIndex, setSelectedIndex] = useState(0)
 
-  const features = [
+  const features = useMemo(
+    () => [
       {
         icon: <MessageOutlined style={{ fontSize: '16px', color: 'var(--color-text)' }} />,
         title: t('miniwindow.feature.chat'),
@@ -51,14 +53,38 @@ const FeatureMenus: FC<FeatureMenusProps> = ({ text, setRoute, onSendMessage })
           }
         }
       }
-  ]
+    ],
+    [onSendMessage, setRoute, t, text]
+  )
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      switch (e.key) {
+        case 'ArrowUp':
+          e.preventDefault()
+          setSelectedIndex((prev) => (prev > 0 ? prev - 1 : features.length - 1))
+          break
+        case 'ArrowDown':
+          e.preventDefault()
+          setSelectedIndex((prev) => (prev < features.length - 1 ? prev + 1 : 0))
+          break
+        case 'Enter':
+          e.preventDefault()
+          features[selectedIndex].onClick?.()
+          break
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
+  }, [features, selectedIndex])
 
   return (
     <FeatureList>
       <FeatureListWrapper>
         {features.map((feature, index) => (
           <Col span={24} key={index}>
-            <FeatureItem onClick={feature.onClick} className={feature.active ? 'active' : ''}>
+            <FeatureItem onClick={feature.onClick} className={index === selectedIndex ? 'active' : ''}>
               <FeatureIcon>{feature.icon}</FeatureIcon>
               <FeatureTitle>{feature.title}</FeatureTitle>
             </FeatureItem>