From 219bdd008a9ee90502c8098a56f63810f2af2b6d Mon Sep 17 00:00:00 2001
From: yuruo <yuruotong1@163.com>
Date: Wed, 5 Jun 2024 12:48:10 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9D=20=E6=9B=B4=E6=96=B0(ui/autoMate)?=
 =?UTF-8?q?=EF=BC=9A=E6=9B=B4=E6=96=B0=E5=BA=94=E7=94=A8UI=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E7=9A=84=E5=B8=83=E5=B1=80=E5=92=8C=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=20=20=20=F0=9F=90=9B=20=E4=BF=AE=E5=A4=8D(index.ts)=EF=BC=9A?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E4=BA=86=E7=AA=97=E5=8F=A3=E9=AB=98=E5=BA=A6?=
 =?UTF-8?q?=E5=8F=8A=E5=B1=9E=E6=80=A7=E8=AE=BE=E7=BD=AE=E7=9A=84=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98=20=20=20=F0=9F=90=9B=20=E4=BF=AE=E5=A4=8D(App.tsx)?=
 =?UTF-8?q?=EF=BC=9A=E4=BF=AE=E5=A4=8D=E4=BA=86=E5=88=9D=E5=A7=8B=E5=8C=96?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E7=B1=BB=E5=9E=8B=E5=92=8C=E5=8F=98=E9=87=8F?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98=20=20=20=F0=9F=90=9B=20=E4=BF=AE=E5=A4=8D(Re?=
 =?UTF-8?q?sult/index.tsx)=EF=BC=9A=E4=BF=AE=E5=A4=8D=E4=BA=86=E9=94=AE?=
 =?UTF-8?q?=E7=9B=98=E4=BA=8B=E4=BB=B6=E5=A4=84=E7=90=86=E5=92=8C=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E9=97=AE=E9=A2=98=20=20=20=F0=9F=90=9B=20=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D(Search/index.tsx)=EF=BC=9A=E4=BF=AE=E5=A4=8D=E4=BA=86?=
 =?UTF-8?q?=E6=90=9C=E7=B4=A2=E8=BE=93=E5=85=A5=E5=8F=8A=E7=9B=B8=E5=85=B3?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E5=A4=84=E7=90=86=E9=97=AE=E9=A2=98=20=20=20?=
 =?UTF-8?q?=F0=9F=93=9D=20=E6=B7=BB=E5=8A=A0(useCode.ts)=EF=BC=9A=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E8=87=AA=E5=AE=9A=E4=B9=89hook=E6=9D=A5=E8=8E=B7?=
 =?UTF-8?q?=E5=8F=96=E4=BB=A3=E7=A0=81=E6=95=B0=E6=8D=AE=E5=B9=B6=E5=A4=84?=
 =?UTF-8?q?=E7=90=86=E5=BC=82=E5=B8=B8=E6=83=85=E5=86=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/autoMate/src/main/index.ts                 |  8 ++--
 ui/autoMate/src/renderer/src/App.tsx          |  4 +-
 .../renderer/src/components/Result/index.tsx  | 39 ++++++++++++++++---
 .../src/components/Result/styles.module.scss  | 10 +++++
 .../renderer/src/components/Search/index.tsx  | 19 ++++++++-
 ui/autoMate/src/renderer/src/hooks/useCode.ts | 11 ++++++
 6 files changed, 78 insertions(+), 13 deletions(-)
 create mode 100644 ui/autoMate/src/renderer/src/components/Result/styles.module.scss
 create mode 100644 ui/autoMate/src/renderer/src/hooks/useCode.ts

diff --git a/ui/autoMate/src/main/index.ts b/ui/autoMate/src/main/index.ts
index 5069e49..29ce755 100644
--- a/ui/autoMate/src/main/index.ts
+++ b/ui/autoMate/src/main/index.ts
@@ -6,11 +6,11 @@ import icon from '../../resources/icon.png?asset'
 function createWindow(): void {  // Create the browser window.
   const mainWindow = new BrowserWindow({
     width: 600,
-    height: 600,
+    height: 500,
     show: false,
-    transparent: true,
-    frame: false,
-    alwaysOnTop: true,
+    // transparent: true,
+    // frame: false,
+    // alwaysOnTop: true,
     autoHideMenuBar: true,
     ...(process.platform === 'linux' ? { icon } : {}),
     webPreferences: {
diff --git a/ui/autoMate/src/renderer/src/App.tsx b/ui/autoMate/src/renderer/src/App.tsx
index dfa650f..dbf38c4 100644
--- a/ui/autoMate/src/renderer/src/App.tsx
+++ b/ui/autoMate/src/renderer/src/App.tsx
@@ -2,10 +2,10 @@ import { useState } from "react"
 import Result from "./components/Result"
 import Search from "./components/Search"
 import { CodeContext } from "./context/CodeContext"
-import { codes } from "@renderer/data"
+import { DataType } from "@renderer/data"
 
 function App(): JSX.Element {
-  const [data, setData] = useState(codes)
+  const [data, setData] = useState<DataType[]>([])
   return (
     <CodeContext.Provider value={{data, setData}}>
       <Search />
diff --git a/ui/autoMate/src/renderer/src/components/Result/index.tsx b/ui/autoMate/src/renderer/src/components/Result/index.tsx
index 10fb7d0..029081e 100644
--- a/ui/autoMate/src/renderer/src/components/Result/index.tsx
+++ b/ui/autoMate/src/renderer/src/components/Result/index.tsx
@@ -1,11 +1,38 @@
-import { useState } from "react"
-import { data as codes } from "@renderer/data"
-export default function index() {
-    const [data, setData] = useState(codes)
+import useCode from "@renderer/hooks/useCode"
+import { useCallback, useEffect, useState } from "react"
+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])
     return (
-    <main className='bg-slate-50 rounded-bl-lg rounded-br-lg -mt-[7px] pb-2'>
+    <main className = {styles.main}>
+        {currentIndex}
         {data.map((item, index) => (
-            <div key={index} className='text-slate-700 truncate mb-2'>
+            <div key={item.id} className={currentIndex == index? styles.active : ''}>
                 <p>{item.content}</p>
             </div>
         ))}
diff --git a/ui/autoMate/src/renderer/src/components/Result/styles.module.scss b/ui/autoMate/src/renderer/src/components/Result/styles.module.scss
new file mode 100644
index 0000000..0db3426
--- /dev/null
+++ b/ui/autoMate/src/renderer/src/components/Result/styles.module.scss
@@ -0,0 +1,10 @@
+.main{
+    @apply bg-slate-50 px-3 rounded-bl-lg rounded-br-lg -mt-[7px] pb-2;
+    div  {
+        @apply text-slate-700 truncate px-2 py-1 rounded-lg;
+        &.active {
+            @apply bg-orange-400 text-white;
+        }
+    }
+}
+
diff --git a/ui/autoMate/src/renderer/src/components/Search/index.tsx b/ui/autoMate/src/renderer/src/components/Search/index.tsx
index 1552a0a..48a1f7f 100644
--- a/ui/autoMate/src/renderer/src/components/Search/index.tsx
+++ b/ui/autoMate/src/renderer/src/components/Search/index.tsx
@@ -1,8 +1,25 @@
+import useCode from "@renderer/hooks/useCode"
+import { ChangeEvent, useState } from "react"
+import { codes } from "@renderer/data"
+
 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() || '@@@@@@')
+      )
+    )
+  }
   return (
     <div className="bg-slate-50 p-3 rounded-lg drag" >
         <section className="bg-slate-200 p-3 rounded-lg">
-            <input className="w-full outline-none text-2xl text-slate-600 bg-slate-200" />
+            <input 
+            value={search}
+            onChange={handleSearch}
+            className="w-full outline-none text-2xl text-slate-600 bg-slate-200" />
         </section>
         <section className="text-center text-slate-600 text-xs mt-2">autoMate</section>
     </div>
diff --git a/ui/autoMate/src/renderer/src/hooks/useCode.ts b/ui/autoMate/src/renderer/src/hooks/useCode.ts
new file mode 100644
index 0000000..a943d21
--- /dev/null
+++ b/ui/autoMate/src/renderer/src/hooks/useCode.ts
@@ -0,0 +1,11 @@
+import { useContext } from 'react'
+import { CodeContext } from '@renderer/context/CodeContext'
+
+export default() =>{
+    const context = useContext(CodeContext)
+    if (!context?.data) {
+        throw new Error('CodeContext not found')
+    }
+    return {...context}
+}
+