diff --git a/ui/autoMate/src/renderer/src/components/Result/index.tsx b/ui/autoMate/src/renderer/src/components/Result/index.tsx
index 029081e..04a0567 100644
--- a/ui/autoMate/src/renderer/src/components/Result/index.tsx
+++ b/ui/autoMate/src/renderer/src/components/Result/index.tsx
@@ -1,38 +1,12 @@
-import useCode from "@renderer/hooks/useCode"
-import { useCallback, useEffect, useState } from "react"
+
+import useCodeSelect from '@renderer/hooks/useCodeSelect'
 import styles from './styles.module.scss'
 export default function Result() {
-    const {data} = useCode()
-    const [currentIndex, setCurrentIndex] = useState(0)
-    const handleKeyEvent = useCallback((e: KeyboardEvent) => {
-       // 初始没有数据，所以data.length为0 ，防止向上箭头，将数据变为-1
-       if (data.length === 0) return
-       switch(e.key){
-        case 'ArrowUp':
-            setCurrentIndex(currentIndex - 1 < 0 ? data.length - 1 : currentIndex - 1)
-            break
-        case 'ArrowDown':
-            setCurrentIndex(currentIndex + 1 >= data.length ? 0 : currentIndex + 1)
-            break
-        case 'Enter':
-            console.log(data[currentIndex].content)
-            break
-       }
-       // 将 data 和 currentIndex 变化时，重新定义该函数
-    }, [data, currentIndex])
-    useEffect(() => {
-        document.addEventListener('keydown', handleKeyEvent)
-        // 如果 data 发生变化，先前的事件监听器会被移除，然后再添加新的监听器，以确保使用最新的 data
-        // 如果不移除，data变化会不停添加监听器 
-        return () => {
-            document.removeEventListener('keydown', handleKeyEvent)
-        }
-    }, [handleKeyEvent])
+    const {data, id} = useCodeSelect()
     return (
     <main className = {styles.main}>
-        {currentIndex}
-        {data.map((item, index) => (
-            <div key={item.id} className={currentIndex == index? styles.active : ''}>
+        {data.map((item) => (
+            <div key={item.id} className={item.id == id? styles.active : ''}>
                 <p>{item.content}</p>
             </div>
         ))}
diff --git a/ui/autoMate/src/renderer/src/components/Search/index.tsx b/ui/autoMate/src/renderer/src/components/Search/index.tsx
index 48a1f7f..295c9ed 100644
--- a/ui/autoMate/src/renderer/src/components/Search/index.tsx
+++ b/ui/autoMate/src/renderer/src/components/Search/index.tsx
@@ -1,18 +1,8 @@
-import useCode from "@renderer/hooks/useCode"
-import { ChangeEvent, useState } from "react"
-import { codes } from "@renderer/data"
+import useSearch from "@renderer/hooks/useSearch"
+
 
 export default function Search(): JSX.Element {
-  const {setData} = useCode()
-  const [search, setSearch] = useState('')
-  const handleSearch = (e: ChangeEvent<HTMLInputElement>) => {
-    setSearch(e.target.value)
-    setData(
-      codes.filter((code) => 
-        code.content.toLowerCase().includes(e.target.value.toLowerCase() || '@@@@@@')
-      )
-    )
-  }
+  const {search, handleSearch} = useSearch()
   return (
     <div className="bg-slate-50 p-3 rounded-lg drag" >
         <section className="bg-slate-200 p-3 rounded-lg">
diff --git a/ui/autoMate/src/renderer/src/hooks/useCodeSelect.ts b/ui/autoMate/src/renderer/src/hooks/useCodeSelect.ts
new file mode 100644
index 0000000..68bede2
--- /dev/null
+++ b/ui/autoMate/src/renderer/src/hooks/useCodeSelect.ts
@@ -0,0 +1,44 @@
+import useCode from "@renderer/hooks/useCode"
+import { useCallback, useEffect, useState } from "react"
+export default()=>{
+    const {data} = useCode()
+    const [id, setId] = useState(0)
+    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
+            })
+            break
+        case 'ArrowDown':
+            setId((id)=>{
+                // 找到当前id的索引
+                const index = data.findIndex((item)=>item.id === id)
+                return data[index + 1]?.id || data[0].id
+            })
+            break
+        case 'Enter': {
+            const content = data.find((item)=>item.id == id)?.content
+            if (content) console.log(content)
+            break
+        }
+       }
+       // 将 data 和 currentIndex 变化时，重新定义该函数，currentIndex会更新为最新值
+    }, [data, id])
+    useEffect(() => {
+        document.addEventListener('keydown', handleKeyEvent)
+        // 如果 data 发生变化，先前的事件监听器会被移除，然后再添加新的监听器，以确保使用最新的 data
+        // 如果不移除，data变化会不停添加监听器 
+        return () => {
+            document.removeEventListener('keydown', handleKeyEvent)
+        }
+    }, [handleKeyEvent])
+    // 当输入数据变化时，将当前索引重置为0
+    useEffect(() =>  setId(0), [data])
+    return {data, id}
+}
+
diff --git a/ui/autoMate/src/renderer/src/hooks/useSearch.ts b/ui/autoMate/src/renderer/src/hooks/useSearch.ts
new file mode 100644
index 0000000..2555895
--- /dev/null
+++ b/ui/autoMate/src/renderer/src/hooks/useSearch.ts
@@ -0,0 +1,17 @@
+import useCode from "@renderer/hooks/useCode"
+import { ChangeEvent, useState } from "react"
+import { codes } from "@renderer/data"
+export default()=>{
+    const {setData} = useCode()
+    const [search, setSearch] = useState('')
+    const handleSearch = (e: ChangeEvent<HTMLInputElement>) => {
+      setSearch(e.target.value)
+      setData(
+        codes.filter((code) => 
+          code.content.toLowerCase().includes(e.target.value.toLowerCase() || '@@@@@@')
+        )
+      )
+    }
+    return {search, handleSearch}
+}
+