feat: 完成懒加载模式

src/components/SoundAi/PandaUi.js

+import { request, event } from '@wisdom-utils/utils'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { PandaRecordWebSocket } from './core'
+import { message } from 'antd'
+import PandaTip from './Ui/PandaTip'
+import { init, cut, extract, ready } from "@congcongcai/jieba.js";
+
+const PandaUi = props => {
+
+    const pandaRecordWebSocketRef = useRef(null)
+    const [isStartRecorder, setIsStartRecorder] = useState(false)
+    const {keyRef} = props
+
+    useEffect(async () => {
+        try {
+            await initJieBa()
+            event.emit("record:changeVisible", {
+                visible: true
+            })
+            event.on("record:changedStaus", changeSwitch)
+        } catch (error) {
+            console.warn(error)
+        }
+        return () => {
+            event.off("record:changedStaus", changeSwitch)
+        }
+    }, [])
+
+
+    const changeSwitch = useCallback(async ({ recordData, e: checked }) => {
+        if (checked) {
+            emitSwitch({
+                loading: true
+            })
+            createPandaRecordWebSocket()
+            const data = await pandaRecordWebSocketRef.current.start()
+            emitSwitch({
+                loading: false
+            })
+            if (!data.isSuccess) {
+                return message.info(data.msg)
+            }
+            emitSwitch({
+                checked: true
+            })
+            setIsStartRecorder(true)
+        } else {
+            emitSwitch({
+                loading: true
+            })
+            await destroyPandaRecorderWebSocket()
+            emitSwitch({
+                loading: false,
+                checked: false
+            })
+            setIsStartRecorder(false)
+        }
+    }, [])
+
+    const createPandaRecordWebSocket = async () => {
+        destroyPandaRecorderWebSocket()
+        pandaRecordWebSocketRef.current = new PandaRecordWebSocket({
+            config : keyRef.current.shortSound,
+            events : {
+                frame (data)  { 
+                    event.emit("aiSound:frame", data)
+                }, 
+                finish (data) {
+                    event.emit("aiSound:finish", data)
+                }
+            }
+        })
+        // await testText("我需要打开浩源孪生平台菜单")
+        // await testText("我需要返回首页")
+        // await testText("我需要打开礼泉孪生平台菜单")
+        // await testText("我需要打开浩源孪生平台菜单")
+        // await testText("我需要关闭平台菜单")
+        // await testText("我需要打开孪生平台菜单")
+        // await testText("我需要打开第二个菜单")
+        // await testText("我需要打开浩源孪生平台菜单")
+    }
+
+    const testText = text => new Promise((resolve , reject) => {
+        setTimeout(() => {
+            event.emit("aiSound:frame", {
+                resultTextTemp: text
+            })
+            setTimeout(() => {
+                event.emit("aiSound:finish", {
+                    resultText: text
+                })
+                setTimeout(() => {
+                    resolve()
+                }, 500)
+            }, 500)
+        }, 500)
+    })
+
+    const destroyPandaRecorderWebSocket = async () => {
+        if (pandaRecordWebSocketRef.current) {
+            await pandaRecordWebSocketRef.current.destroy()
+            pandaRecordWebSocketRef.current = null
+        }
+    }
+
+    const emitSwitch = data => {
+        event.emit("record:changeSwicth", data)
+    }
+
+    const initJieBa = () => new Promise((resolve, reject) => {
+        ready().then(() => {
+            init()
+            resolve()
+        }).catch(() => {
+            reject()
+        })
+    })
+    return (<>
+        {
+            isStartRecorder ? <PandaTip pandaRecordWebSocketRef={pandaRecordWebSocketRef} /> : null
+        }
+    </>)
+}
+
+export default PandaUi
\ No newline at end of file

src/components/SoundAi/index.js

 import { request, event } from '@wisdom-utils/utils'
-import { useCallback, useEffect, useRef, useState } from 'react'
-import { PandaRecordWebSocket } from './core'
-import { message } from 'antd'
-import PandaTip from './Ui/PandaTip'
-import { init, cut, extract, ready } from "@congcongcai/jieba.js";
+import { Suspense, lazy, useCallback, useEffect, useRef, useState } from 'react'
 
-const SoundAi = props => {
+const PandaUi = lazy(() => import("./PandaUi"))
 
-    const pandaRecordWebSocketRef = useRef(null)
+const SoundAi = props => {
     const keyRef = useRef(null)
-    const [isStartRecorder, setIsStartRecorder] = useState(false)
+    const [visible, setVisible] = useState(false)
 
     useEffect(async () => {
         try {
             await getIsOpenConfig()
             await getKey()
-            await initJieBa()
             event.emit("record:changeVisible", {
                 visible: true
             })
-            event.on("record:changedStaus", changeSwitch)
+            setVisible(true)
         } catch (error) {
             console.warn(error)
         }
         return () => {
-            event.off("record:changedStaus", changeSwitch)
         }
     }, [])
 
 
-    const changeSwitch = useCallback(async ({ recordData, e: checked }) => {
-        if (checked) {
-            emitSwitch({
-                loading: true
-            })
-            createPandaRecordWebSocket()
-            const data = await pandaRecordWebSocketRef.current.start()
-            emitSwitch({
-                loading: false
-            })
-            if (!data.isSuccess) {
-                return message.info(data.msg)
-            }
-            emitSwitch({
-                checked: true
-            })
-            setIsStartRecorder(true)
-        } else {
-            emitSwitch({
-                loading: true
-            })
-            await destroyPandaRecorderWebSocket()
-            emitSwitch({
-                loading: false,
-                checked: false
-            })
-            setIsStartRecorder(false)
-        }
-    }, [])
-
-    const createPandaRecordWebSocket = async () => {
-        destroyPandaRecorderWebSocket()
-        pandaRecordWebSocketRef.current = new PandaRecordWebSocket({
-            config : keyRef.current.shortSound,
-            events : {
-                frame (data)  { 
-                    event.emit("aiSound:frame", data)
-                }, 
-                finish (data) {
-                    event.emit("aiSound:finish", data)
-                }
-            }
-        })
-        // await testText("我需要打开浩源孪生平台菜单")
-        // await testText("我需要返回首页")
-        // await testText("我需要打开礼泉孪生平台菜单")
-        // await testText("我需要打开浩源孪生平台菜单")
-        // await testText("我需要关闭平台菜单")
-        // await testText("我需要打开孪生平台菜单")
-        // await testText("我需要打开第二个菜单")
-        // await testText("我需要打开浩源孪生平台菜单")
-    }
-
-    const testText = text => new Promise((resolve , reject) => {
-        setTimeout(() => {
-            event.emit("aiSound:frame", {
-                resultTextTemp: text
-            })
-            setTimeout(() => {
-                event.emit("aiSound:finish", {
-                    resultText: text
-                })
-                setTimeout(() => {
-                    resolve()
-                }, 500)
-            }, 500)
-        }, 500)
-    })
-
-    const destroyPandaRecorderWebSocket = async () => {
-        if (pandaRecordWebSocketRef.current) {
-            await pandaRecordWebSocketRef.current.destroy()
-            pandaRecordWebSocketRef.current = null
-        }
-    }
-
-    const emitSwitch = data => {
-        event.emit("record:changeSwicth", data)
-    }
 
     const getIsOpenConfig = () => new Promise((resolve, reject) => {
         request("/PandaOMS/OMS/DataManger/GetDicConfigs", {
@@ -148,17 +63,12 @@ const SoundAi = props => {
             })
     })
 
-    const initJieBa = () => new Promise((resolve, reject) => {
-        ready().then(() => {
-            init()
-            resolve()
-        }).catch(() => {
-            reject()
-        })
-    })
+
     return (<>
         {
-            isStartRecorder ? <PandaTip pandaRecordWebSocketRef={pandaRecordWebSocketRef} /> : null
+            visible ? <Suspense fallback={<></>}>
+                <PandaUi keyRef={keyRef} />
+            </Suspense> : null
         }
     </>)
 }