add EnterKey to NameEditor and Score; add ArrowKey to Screenshot and …

…Search

src/renderer/src/components/Game/Config/ManageMenu/NameEditorDialog.tsx

@@ -26,6 +26,9 @@ export function NameEditorDialog({
           onChange={(e) => {
             setGameName(e.target.value)
           }}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') setIsOpen(false)
+          }}
         />
         <Button
           onClick={() => {

src/renderer/src/components/Game/Header.tsx

@@ -127,7 +127,13 @@ export function Header({ gameId, className }: { gameId: string; className?: stri
           <DialogContent showCloseButton={false} className="w-[500px]">
             <div className={cn('flex flex-row gap-3 items-center justify-center')}>
               <div className={cn('whitespace-nowrap')}>我的评分</div>
-              <Input value={preScore} onChange={(e) => setPreScore(e.target.value)} />
+              <Input
+                value={preScore}
+                onChange={(e) => setPreScore(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter') confirmScore()
+                }}
+              />
               <Button onClick={confirmScore}>确定</Button>
             </div>
           </DialogContent>

src/renderer/src/components/contextMenu/CollectionCM/main.tsx

@@ -32,7 +32,7 @@ export function CollectionCM({
   const { renameCollection, removeCollection, collections } = useCollections()
   const [newName, setNewName] = useState<string>('')
   const [isRenaming, setIsRenaming] = useState<boolean>(false)
-  const [isDeleting, setisDeleting] = useState<boolean>(false)
+  const [isDeleting, setIsDeleting] = useState<boolean>(false)
 
   useEffect(() => {
     if (collections[collectionId].name !== newName) {
@@ -52,7 +52,7 @@ export function CollectionCM({
       <ContextMenuContent className={cn('w-40')}>
         <ContextMenuItem onSelect={() => setIsRenaming(true)}>重命名</ContextMenuItem>
         <ContextMenuSeparator />
-        <ContextMenuItem onSelect={() => setisDeleting(true)}>删除</ContextMenuItem>
+        <ContextMenuItem onSelect={() => setIsDeleting(true)}>删除</ContextMenuItem>
       </ContextMenuContent>
 
       <Dialog open={isRenaming}>
@@ -88,7 +88,7 @@ export function CollectionCM({
           <AlertDialogFooter>
             <AlertDialogCancel
               onClick={() => {
-                setisDeleting(false)
+                setIsDeleting(false)
               }}
             >
               取消

src/renderer/src/pages/GameAdder/ScreenshotList.tsx

@@ -47,6 +47,39 @@ export function ScreenshotList(): JSX.Element {
     )
   }, [])
 
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent): void => {
+      const index = screenshotList.findIndex((image) => image === screenshotUrl)
+      if (index === -1) return
+
+      if (e.key === 'Enter') {
+        addGameToDB()
+        return
+      }
+
+      let targetIndex: number | null = null
+      if (e.key === 'ArrowRight') targetIndex = index + 1
+      else if (e.key === 'ArrowDown') targetIndex = index + 2
+      else if (e.key === 'ArrowLeft') targetIndex = index - 1 + screenshotList.length
+      else if (e.key === 'ArrowUp') targetIndex = index - 2 + screenshotList.length
+
+      if (targetIndex !== null) {
+        const targetGame = screenshotList[targetIndex % screenshotList.length]
+        setScreenshotUrl(targetGame)
+        const targetElement = document.querySelector(`[data-image="${targetGame}"]`)
+        targetElement?.scrollIntoView({
+          behavior: 'smooth',
+          block: 'center',
+          inline: 'center'
+        })
+      }
+    }
+    window.addEventListener('keydown', handleKeyDown)
+    return (): void => {
+      window.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [screenshotUrl, screenshotList])
+
   async function addGameToDB(): Promise<void> {
     if (isAdding) return
     setIsAdding(true)
@@ -84,6 +117,7 @@ export function ScreenshotList(): JSX.Element {
                 screenshotList.map((image) => (
                   <div
                     key={image}
+                    data-image={image}
                     onClick={() => {
                       setScreenshotUrl(image)
                     }}

src/renderer/src/pages/GameAdder/Search.tsx

@@ -14,10 +14,22 @@ import { toast } from 'sonner'
 import { useGameAdderStore } from './store'
 import { ipcInvoke } from '~/utils'
 import { useNavigate } from 'react-router-dom'
+import React from 'react'
 
 export function Search({ className }: { className?: string }): JSX.Element {
   const { dataSource, setDataSource, name, setName, id, setId, setGameList } = useGameAdderStore()
   const navigate = useNavigate()
+
+  const gameNameInput = React.useRef<HTMLInputElement>(null)
+  const gameIdInput = React.useRef<HTMLInputElement>(null)
+  React.useEffect(() => {
+    setTimeout(() => {
+      if (gameNameInput.current) {
+        gameNameInput.current.focus()
+      }
+    })
+  }, [])
+
   async function searchGames(): Promise<void> {
     if (!name) {
       toast.warning('请输入游戏名称')
@@ -111,23 +123,27 @@ export function Search({ className }: { className?: string }): JSX.Element {
         <div className={cn('flex flex-row gap-3 items-center justify-start')}>
           <div className={cn('flex-shrink-0')}>游戏名称</div>
           <Input
+            ref={gameNameInput}
             value={name}
             onChange={(e) => setName(e.target.value)}
             placeholder="请输入游戏名称"
             onKeyDown={(e) => {
               if (e.key === 'Enter') searchGames()
+              if (e.key === 'ArrowUp' || e.key === 'ArrowDown') gameIdInput.current?.focus()
             }}
           />
           <Button onClick={searchGames}>搜索</Button>
         </div>
         <div className={cn('flex flex-row gap-3 items-center justify-start')}>
           <div className={cn('flex-shrink-0 mr-4')}>游戏ID</div>
           <Input
+            ref={gameIdInput}
             value={id}
             onChange={(e) => setId(e.target.value)}
             placeholder="请输入游戏ID"
             onKeyDown={(e) => {
               if (e.key === 'Enter') recognizeGame()
+              if (e.key === 'ArrowUp' || e.key === 'ArrowDown') gameNameInput.current?.focus()
             }}
           />
           <Button onClick={recognizeGame}>识别</Button>

src/renderer/src/pages/GameAdder/main.tsx

@@ -12,7 +12,7 @@ function GameAdderContent(): JSX.Element {
   return (
     <Dialog open={isOpen}>
       <DialogContent
-        className={cn('w-auto h-auto max-w-none flex flex-col gap-5')}
+        className={cn('w-auto h-auto max-w-none flex flex-col gap-5 outline-none')}
         onInteractOutside={(e) => {
           e.preventDefault()
         }}