From d802650bf3b00e881bd9109ea0063f2aa101ef8a Mon Sep 17 00:00:00 2001
From: yuruo <yuruotong1@163.com>
Date: Sun, 9 Jun 2024 08:16:07 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20=E4=BB=A3=E7=A0=81=E7=BB=93?=
 =?UTF-8?q?=E6=9E=9C(Result/index.tsx)=EF=BC=9A=E6=9B=B4=E6=96=B0=E4=BD=BF?=
 =?UTF-8?q?=E7=94=A8useCodeSelect=20hook=E6=94=B9=E4=B8=BAuseSelect=20hook?=
 =?UTF-8?q?=20=20=20=E2=99=BB=EF=B8=8F=20hook(useSelect.ts)=EF=BC=9A?=
 =?UTF-8?q?=E9=87=8D=E6=9E=84handleKeyEvent=E5=87=BD=E6=95=B0=EF=BC=8C?=
 =?UTF-8?q?=E4=BD=BF=E7=94=A8=E6=96=B0=E7=9A=84selectId=E6=9B=BF=E4=BB=A3i?=
 =?UTF-8?q?d=20=20=20=E2=99=BB=EF=B8=8F=20=E7=8A=B6=E6=80=81=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86(useStore.ts)=EF=BC=9A=E6=96=B0=E5=A2=9EselectId?=
 =?UTF-8?q?=E7=8A=B6=E6=80=81=E5=8F=8A=E7=9B=B8=E5=BA=94=E6=9B=B4=E6=94=B9?=
 =?UTF-8?q?=E5=87=BD=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../renderer/src/components/Result/index.tsx  |  6 ++--
 .../src/renderer/src/hooks/useSelect.ts       | 35 +++++++++----------
 .../src/renderer/src/store/useStore.ts        |  8 +++--
 3 files changed, 26 insertions(+), 23 deletions(-)

diff --git a/ui/autoMate/src/renderer/src/components/Result/index.tsx b/ui/autoMate/src/renderer/src/components/Result/index.tsx
index b3f5895..f03bebb 100644
--- a/ui/autoMate/src/renderer/src/components/Result/index.tsx
+++ b/ui/autoMate/src/renderer/src/components/Result/index.tsx
@@ -1,13 +1,13 @@
 
-import useCodeSelect from '@renderer/hooks/useSelect'
+import useSelect from '@renderer/hooks/useSelect'
 import styles from './styles.module.scss'
 export default function Result() {
-    const {data, id, select} = useCodeSelect()
+    const {data, selectId, select} = useSelect()
     return (
     <main className = {styles.main}>
         {data.map((item) => (
             <div key={item.id} 
-            className={item.id == id? styles.active : ''}
+            className={item.id == selectId? styles.active : ''}
             onClick={()=>select(item.id)}
             >
                 <p>{item.content}</p>
diff --git a/ui/autoMate/src/renderer/src/hooks/useSelect.ts b/ui/autoMate/src/renderer/src/hooks/useSelect.ts
index c29a71c..6e4ffd9 100644
--- a/ui/autoMate/src/renderer/src/hooks/useSelect.ts
+++ b/ui/autoMate/src/renderer/src/hooks/useSelect.ts
@@ -1,35 +1,34 @@
 import {useStore} from "@renderer/store/useStore"
-import { useCallback, useEffect, useState } from "react"
+import { useCallback, useEffect } from "react"
 export default()=>{
     const data = useStore((state)=>state.data) 
     const setData = useStore((state)=>state.setData)
     const setSearch = useStore((state)=>state.setSearch)
-    const [id, setId] = useState(0)
+    const selectId = useStore((state)=>state.selectId)
+    const setSelectId = useStore((state)=>state.setSelectId)
     const handleKeyEvent = useCallback((e: KeyboardEvent) => {
        // 初始没有数据，所以data.length为0 ，防止向上箭头，将数据变为-1
        if (data.length === 0) return
        switch(e.key){
-        case 'ArrowUp':
-            setId((id)=>{
-                // 找到当前id的索引
-                const index = data.findIndex((item)=>item.id === id)
-                return data[index - 1]?.id || data[data.length - 1].id
-            })
+        case 'ArrowUp': {
+            // 找到当前id的索引
+            const index = data.findIndex((item)=>item.id === selectId)
+            setSelectId(data[index - 1]?.id || data[data.length - 1].id)
             break
-        case 'ArrowDown':
-            setId((id)=>{
-                // 找到当前id的索引
-                const index = data.findIndex((item)=>item.id === id)
-                return data[index + 1]?.id || data[0].id
-            })
+        }
+        case 'ArrowDown':{
+            // 找到当前id的索引
+            const index = data.findIndex((item)=>item.id === selectId)
+            setSelectId(data[index + 1]?.id || data[0].id)
             break
+        }
         case 'Enter': {
-            select(id)
+            select(selectId)
             break
         }
        }
        // 将 data 和 currentIndex 变化时，重新定义该函数，currentIndex会更新为最新值
-    }, [data, id])
+    }, [data, selectId])
 
     // 选中代码块
     async function select(id: Number){
@@ -49,7 +48,7 @@ export default()=>{
         }
     }, [handleKeyEvent])
     // 当输入数据变化时，将当前索引重置为0
-    useEffect(() =>  setId(0), [data])
-    return {data, id, select}
+    useEffect(() =>  setSelectId(data[0]?.id || 0), [data])
+    return {data, selectId, select}
 }
 
diff --git a/ui/autoMate/src/renderer/src/store/useStore.ts b/ui/autoMate/src/renderer/src/store/useStore.ts
index 8794737..9fbb1bb 100644
--- a/ui/autoMate/src/renderer/src/store/useStore.ts
+++ b/ui/autoMate/src/renderer/src/store/useStore.ts
@@ -6,7 +6,9 @@ interface StateProps{
     search: string,
     setSearch: (search: string) => void,
     error: string,
-    setError: (error: string) => void
+    setError: (error: string) => void,
+    selectId: number,
+    setSelectId: (selectId: number) => void
 }
 export const useStore = create<StateProps>((set) => ({
     data: [],
@@ -14,6 +16,8 @@ export const useStore = create<StateProps>((set) => ({
     search: "",
     setSearch: (search) => set({search}),
     error: "",
-    setError: (error) => set({error})
+    setError: (error) => set({error}),
+    selectId: 0,
+    setSelectId: (selectId) => set({selectId})
   }))