ui(autoMate): 添加对鼠标事件的监听以及忽略功能

📝 ui(autoMate): 更新全局样式以适配全屏幕
📝 ui(autoMate): 删除Search组件中不再使用的鼠标事件监听
This commit is contained in:
yuruo
2024-06-10 08:36:26 +08:00
parent 1d71f90da8
commit a8f217c8c4
3 changed files with 16 additions and 13 deletions

View File

@@ -3,14 +3,27 @@ import Search from "./components/Search"
import { CodeProvider } from "./context/CodeContext"
import useShortCut from "./hooks/useShortCut"
import Error from "./components/Error"
import { useEffect, useRef } from "react"
function App(): JSX.Element {
const mainRef = useRef<HTMLDivElement>(null)
useEffect(()=>{
mainRef.current?.addEventListener('mouseover', ()=>{
window.api.setIgnoreMouseEvents(false)
})
document.body.addEventListener('mouseover', (e: MouseEvent)=>{
if (e.target === document.body) {
window.api.setIgnoreMouseEvents(true, {forward: true})
}
})
}, [])
const shortCut = useShortCut()
shortCut.register("search", "CommandOrControl+n")
return (
<CodeProvider>
<main className="relative">
<main className="relative" ref={mainRef}>
<Error/>
<Search />
<Result />

View File

@@ -1,5 +1,5 @@
body{
// @apply bg-slate-50;
@apply w-screen h-screen;
}
*{

View File

@@ -2,21 +2,11 @@ import { useStore } from "@renderer/store/useStore"
import useSearch from "@renderer/hooks/useSearch"
import { SettingOne } from "@icon-park/react"
import { Input } from "antd"
import { useEffect, useRef } from "react"
export default function Search(): JSX.Element {
const search = useStore((state)=>state.search)
const {handleSearch} = useSearch()
const mainRef = useRef<HTMLDivElement | null>(null)
useEffect(()=>{
mainRef.current?.addEventListener('mouseover', (_e: MouseEvent)=>{
window.api.setIgnoreMouseEvents(false)
})
mainRef.current?.addEventListener('mouseout', (_e: MouseEvent)=>{
window.api.setIgnoreMouseEvents(true, {forward: true})
})
},[])
return (
<main className="bg-slate-50 p-3 rounded-lg drag" ref={mainRef}>
<main className="bg-slate-50 p-3 rounded-lg drag" >
<section className="bg-slate-200 p-3 rounded-lg flex items-center gap-1 nodrag">
<SettingOne
theme="outline"