Merge pull request #108 from fishshi/feat/ShortCutKey

feat: Add ShortCutKeys to Vnite
ximu3 · Dec 20, 2024 · 1fc084b · 1fc084b
2 parents 719df73 + b44739c
commit 1fc084b
Show file tree

Hide file tree

Showing 8 changed files with 100 additions and 24 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/renderer/src/components/Game/Config/ManageMenu/NameEditorDialog.tsx b/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={() => {

diff --git a/src/renderer/src/components/Game/Header.tsx b/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>

diff --git a/src/renderer/src/components/contextMenu/CollectionCM/main.tsx b/src/renderer/src/components/contextMenu/CollectionCM/main.tsx
@@ -31,23 +31,28 @@ export function CollectionCM({
 }): JSX.Element {
   const { renameCollection, removeCollection, collections } = useCollections()
   const [newName, setNewName] = useState<string>('')
-  const [isRenaming, setisRenaming] = useState<boolean>(false)
-  const [isDeleting, setisDeleting] = useState<boolean>(false)
+  const [isRenaming, setIsRenaming] = useState<boolean>(false)
+  const [isDeleting, setIsDeleting] = useState<boolean>(false)
 
   useEffect(() => {
     if (collections[collectionId].name !== newName) {
       setNewName(collections[collectionId].name)
     }
   }, [collections[collectionId].name])
 
+  const handleRename = (): void => {
+    renameCollection(collectionId, newName)
+    setIsRenaming(false)
+  }
+
   return (
     <ContextMenu>
       <ContextMenuTrigger>{children}</ContextMenuTrigger>
 
       <ContextMenuContent className={cn('w-40')}>
-        <ContextMenuItem onSelect={() => setisRenaming(true)}>重命名</ContextMenuItem>
+        <ContextMenuItem onSelect={() => setIsRenaming(true)}>重命名</ContextMenuItem>
         <ContextMenuSeparator />
-        <ContextMenuItem onSelect={() => setisDeleting(true)}>删除</ContextMenuItem>
+        <ContextMenuItem onSelect={() => setIsDeleting(true)}>删除</ContextMenuItem>
       </ContextMenuContent>
 
       <Dialog open={isRenaming}>
@@ -58,18 +63,14 @@ export function CollectionCM({
             onChange={(e) => {
               setNewName(e.target.value)
             }}
-          />
-          <Button
-            onClick={() => {
-              renameCollection(collectionId, newName)
-              setisRenaming(false)
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') handleRename()
             }}
-          >
-            确定
-          </Button>
+          />
+          <Button onClick={handleRename}>确定</Button>
           <Button
             onClick={() => {
-              setisRenaming(false)
+              setIsRenaming(false)
               setNewName(collections[collectionId].name)
             }}
           >
@@ -87,7 +88,7 @@ export function CollectionCM({
           <AlertDialogFooter>
             <AlertDialogCancel
               onClick={() => {
-                setisDeleting(false)
+                setIsDeleting(false)
               }}
             >
               取消

diff --git a/src/renderer/src/components/dialog/AddCollectionDialog.tsx b/src/renderer/src/components/dialog/AddCollectionDialog.tsx
@@ -1,7 +1,6 @@
 import {
   Dialog,
   DialogContent,
-  DialogClose,
   DialogFooter,
   DialogDescription,
   DialogHeader,
@@ -22,8 +21,10 @@ export function AddCollectionDialog({
 }): JSX.Element {
   const [name, setName] = useState('')
   const { addCollection } = useCollections()
+
   const addGameToNewCollection = (): void => {
     addCollection(name, gameId)
+    setIsOpen(false)
   }
 
   return (
@@ -33,11 +34,16 @@ export function AddCollectionDialog({
           <DialogTitle>新收藏</DialogTitle>
           <DialogDescription>输入新收藏的名称</DialogDescription>
         </DialogHeader>
-        <Input className={cn('grow')} value={name} onChange={(e) => setName(e.target.value)} />
+        <Input
+          className={cn('grow')}
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') addGameToNewCollection()
+          }}
+        />
         <DialogFooter>
-          <DialogClose asChild>
-            <Button onClick={addGameToNewCollection}>添加</Button>
-          </DialogClose>
+          <Button onClick={addGameToNewCollection}>添加</Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>

diff --git a/src/renderer/src/pages/GameAdder/ScreenshotList.tsx b/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)
                     }}

diff --git a/src/renderer/src/pages/GameAdder/Search.tsx b/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,15 +123,29 @@ 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 value={id} onChange={(e) => setId(e.target.value)} placeholder="请输入游戏ID" />
+          <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>
         </div>
       </div>

diff --git a/src/renderer/src/pages/GameAdder/main.tsx b/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()
         }}