简化 alert view

src/page/device/device.js

@@ -54,7 +54,7 @@ class DeviceClass {
         }
 
         that.count_ip_y++
-        await this.scanDevice(callback, that)
+        await that.scanDevice(callback, that)
     }
 
     async handleAdd() {

src/page/device/device.jsx

@@ -1,40 +1,24 @@
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useRef, useState } from 'react'
 import './device.scss'
 import UpdateBtn from './update-btn/update-btn.jsx'
 import ConnectItem from './connect-item/connect-item.jsx'
-import HintView from '../public/hint-view/hint-view.jsx'
-import Alert from '../public/alert-view/alert-view.jsx'
-import ComfirmView from '../public/comfirm-view/comfirm-view.jsx'
+
 import { DeviceClass } from './device.js'
-import hintView from '../public/hint-view/hint-view.js'
-import alertView from '../public/alert-view/alert-view.js'
-import comfirmView from '../public/comfirm-view/comfirm-view.js'
-import { createHandleClose } from '../home.js'
+
+import { alertView, hintView, comfirmView } from '../home.jsx'
 
 function Device({ show }) {
   const [deviceList, setDeviceList] = useState([])
-  const [showHintView, setShowHintView] = useState(false)
-  const [showAlert, setShowAlert] = useState(false)
-  const [showComfirmView, setShowComfirmView] = useState(false)
   const deviceClass = useRef(null)
 
   if (!show) {
     return null
   }
 
-  // 初始化 deviceClass，确保在渲染时就有值
   if (!deviceClass.current) {
     deviceClass.current = new DeviceClass(setDeviceList)
   }
 
-  // 设置 API 对象的回调函数并初始化 deviceClass
-  useEffect(() => {
-    hintView.setShowCallback(setShowHintView)
-    alertView.setShowCallback(setShowAlert)
-    comfirmView.setShowCallback(setShowComfirmView)
-    
-  }, [])
-
   return (
     <>
       <div className="device-container">
@@ -72,22 +56,6 @@ function Device({ show }) {
           </div>
         </div>
       </div>
-
-      {showHintView && <HintView show={showHintView} onClose={createHandleClose(setShowHintView)} title={hintView._title} content={hintView._content} />}
-      {showAlert && <Alert show={showAlert} onClose={createHandleClose(setShowAlert)} title={alertView._title} content={alertView._content} />}
-      {showComfirmView && <ComfirmView show={showComfirmView} onClose={() => {
-        comfirmView.hide()
-        if (comfirmView._onCancel) {
-          comfirmView._onCancel()
-        }
-      }} onConfirm={() => {
-        console.log('ComfirmView onConfirm clicked, _onConfirm:', comfirmView._onConfirm)
-        if (comfirmView._onConfirm) {
-          comfirmView._onConfirm()
-        } else {
-          console.warn('comfirmView._onConfirm is null')
-        }
-      }} title={comfirmView._title} content={comfirmView._content} />}
     </>
   )
 }

src/page/home.js

@@ -1,23 +1,60 @@
-// 切换 Alert 显示/隐藏
-export function toggleAlert(showAlert, setShowAlert) {
+import alertView from './public/alert-view/alert-view.js'
+import hintView from './public/hint-view/hint-view.js'
+import comfirmView from './public/comfirm-view/comfirm-view.js'
+
+function closeAlert(setShowAlert) {
+  setShowAlert(false)
+}
+
+function toggleAlert(showAlert, setShowAlert) {
   setShowAlert(!showAlert)
 }
 
-// 关闭 Alert
-export function closeAlert(setShowAlert) {
-  setShowAlert(false)
+export function createHandleClose(setShowAlert) {
+  return () => {
+    closeAlert(setShowAlert)
+  }
 }
 
-// 创建切换处理函数
 export function createHandleToggle(showAlert, setShowAlert) {
   return () => {
     toggleAlert(showAlert, setShowAlert)
   }
 }
 
-// 创建关闭处理函数
-export function createHandleClose(setShowAlert) {
-  return () => {
-    closeAlert(setShowAlert)
+export function createAlertProps(showAlert, setShowAlert) {
+  return {
+    show: showAlert,
+    onClose: createHandleClose(setShowAlert),
+    title: alertView._title,
+    content: alertView._content
+  }
+}
+
+export function createComfirmViewProps(showComfirm, setShowComfirm) {
+  return {
+    show: showComfirm,
+    onClose: () => {
+      comfirmView.hide()
+      if (comfirmView._onCancel) {
+        comfirmView._onCancel()
+      }
+    },
+    onConfirm: () => {
+      if (comfirmView._onConfirm) {
+        comfirmView._onConfirm()
+      }
+    },
+    title: comfirmView._title,
+    content: comfirmView._content
+  }
+}
+
+export function createHintViewProps(showHint, setShowHint) {
+  return {
+    show: showHint,
+    onClose: createHandleClose(setShowHint),
+    title: hintView._title,
+    content: hintView._content
   }
 }

src/page/home.jsx

@@ -1,15 +1,18 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import './home.scss'
+//弹窗
 import Alert from './public/alert-view/alert-view.jsx'
-import Hint from './public/hint-view/hint-view.jsx'
-import Comfirm from './public/comfirm-view/comfirm-view.jsx'
-
-
+import HintView from './public/hint-view/hint-view.jsx'
+import ComfirmView from './public/comfirm-view/comfirm-view.jsx'
+import alertView from './public/alert-view/alert-view.js'
+import hintView from './public/hint-view/hint-view.js'
+import comfirmView from './public/comfirm-view/comfirm-view.js'
+//子view
 import Device from './device/device.jsx'
 import ScreenShot from './screenshot/screenshot.jsx'
 import AiChat from './ai-chat/ai-chat.jsx'
 import Process from './process/process.jsx'
-import { createHandleClose } from './home.js'
+import { createHandleClose, createHintViewProps, createAlertProps, createComfirmViewProps } from './home.js'
 
 function Home() {
   const [showAlert, setShowAlert] = useState(false)
@@ -20,6 +23,12 @@ function Home() {
   const [showScreenShot, setShowScreenShot] = useState(true)
   const [showAiChat, setShowAiChat] = useState(true)
   const [showProcess, setShowProcess] = useState(true)
+
+  useEffect(() => {
+    hintView.setShowCallback(setShowHint)
+    alertView.setShowCallback(setShowAlert)
+    comfirmView.setShowCallback(setShowComfirm)
+  }, [])
   
   return (
     <div className="home-container">
@@ -30,11 +39,13 @@ function Home() {
         {showProcess && <Process show={showProcess}/>}
       </div>
      
-      {showAlert && <Alert show={showAlert} onClose={createHandleClose(setShowAlert)} />}
-      {showHint && <Hint show={showHint} onClose={createHandleClose(setShowHint)} />}
-      {showComfirm && <Comfirm show={showComfirm} onClose={createHandleClose(setShowComfirm)} />}
+      <HintView {...createHintViewProps(showHint, setShowHint)} />
+      <Alert {...createAlertProps(showAlert, setShowAlert)} />
+      <ComfirmView {...createComfirmViewProps(showComfirm, setShowComfirm)} />
     </div>
   )
 }
 
 export default Home
+
+export { Alert, HintView, ComfirmView, alertView, hintView, comfirmView, createHandleClose }

src/page/process/process.jsx

@@ -8,7 +8,9 @@ function Process({ show }) {
 
   return (
     <div className="process-container">
-     
+      <div className="process-content">
+        
+      </div>
     </div>
   )
 }