✨ 代码结果(Result/index.tsx)：更新使用useCodeSelect hook改为useSelect hook

♻️ hook(useSelect.ts)：重构handleKeyEvent函数，使用新的selectId替代id
  ♻️ 状态管理(useStore.ts)：新增selectId状态及相应更改函数

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>

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}
 }
 

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})
   }))