fix: 修复菜单

package.json

@@ -115,7 +115,7 @@
         "@wisdom-map/arcgismap": "1.4.0-261",
         "@wisdom-map/basemap": "1.1.0-41",
         "@wisdom-map/util": "^1.0.28-0",
-        "@wisdom-utils/components": "0.1.350",
+        "@wisdom-utils/components": "0.1.351",
         "@wisdom-utils/runtime": "0.0.48",
         "@wisdom-utils/utils": "0.1.388",
         "@congcongcai/jieba.js" : "0.0.3",

src/components/SoundAi/Ui/Dialog/index.jsx

@@ -12,7 +12,17 @@ const Dialog = props => {
     const {  pandaRecordWebSocketRef} = props
     const ulRef = useRef(null)
     const directiveRef = useRef(null)
-    const [data , setData] = useState([])   
+    const [data , setData] = useState([
+    //     {
+    //     role : "user",
+    //     content : "打开模型大建材，打开模型大建材。打开模型大建材。",
+    //     time: new moment().format("HH:mm:ss"),
+    // },{
+    //     role : "system",
+    //     content : "没有开启增强人机交互，系统正在学习更多指令中。",
+    //     time: new moment().format("HH:mm:ss"),
+    // }
+])   
 
     const finish = useCallback(async ({resultText}) => {
         pandaRecordWebSocketRef.current.setStatus("pause")
@@ -123,7 +133,7 @@ const Dialog = props => {
             <div className={style.header}>
                 <p>熊猫智能语音库</p>
                 <div className={style.help}>
-                    <QuestionCircleOutlined className={style.question} />
+                    <span className={style.helpIcon}></span>
                     <div className={style.toolTipContent}>
                         <p>支持以下语音指令集</p>
                         <ul className={style.toolTip}>

src/components/SoundAi/Ui/Dialog/style.less

+@imageRoot : "@/assets/images/soundAi/";
+
+.getImage(@imageName) {
+    background: url("@{imageRoot}/@{imageName}") no-repeat center center;
+    background-size: 100% 100%;
+}
+
 .container {
     position: absolute;
     right: 80px;
-    width: 350px;
-    height: 400px;
-    background-color: #fff;
-    bottom: 0;
+    width: 395px;
+    height: 435px;
+    bottom: -150px;
     border-radius: 5px;
-    box-shadow: 2px 2px #e6e0e0;
     z-index: 10;
+    .getImage("框.png");
+    padding: 15px 20px;
 
     .main {
         position: relative;
@@ -23,17 +30,38 @@
             display: flex;
             align-items: center;
             padding-left: 10px;
-            height: 40px;
-            border-bottom: 1px solid #eee;
+            height: 50px;
+            // border-bottom: 1px solid #eee;
             justify-content: space-between;
 
             >p {
-                margin-bottom: 0;
+                margin: 10px 0 0 65px;
+                position: relative;
+                letter-spacing: 0.5px;
+                color: #fff;
+                &::before {
+                    content: "";
+                    position: absolute;
+                    left: -35px;
+                    top: 50%;
+                    transform: translateY(-50%);
+                    width: 28px;
+                    height: 30px;
+                    .getImage("录音icon.png");
+                }
             }
 
             .help {
                 position: relative;
-                margin-right: 20px;
+                margin-right: 30px;
+                margin-top: 5px;
+
+                .helpIcon{
+                    display: flex;
+                    width: 22px;
+                    height: 22px;
+                    .getImage("帮助.png");
+                }
 
                 &:hover {
                     cursor: pointer;
@@ -50,7 +78,7 @@
                     right: 0;
                     font-weight: normal;
                     font-size: 14px;
-                    background: #f5f5f5;
+                    // background: #f5f5f5;
                     padding: 0 10px;
                     border-radius: 5px;
                     z-index: 10;
@@ -86,7 +114,7 @@
             .display {
                 width: 100%;
                 height: auto;
-                background-color: #eee;
+                // background-color: #eee;
 
                 .ul {
                     padding: 5px 5px 15px 5px;
@@ -107,7 +135,7 @@
 
                         .aiContent {
                             flex: 1;
-                            background-color: #fff;
+                            // background-color: #fff;
                             border-radius: 4px;
                             padding: 5px;
                             color: #000;
@@ -125,7 +153,7 @@
                                 font-size: 12px;
                                 color: #797070;
                                 border-radius: 2px;
-                                background-color: #dbd3d3;
+                                // background-color: #dbd3d3;
                             }
                         }
 
@@ -138,21 +166,7 @@
                 }
             }
        
-            // .empty {
-            //     width: 100%;
-            //     height: 100%;
-            //     display: flex;
-            //     align-items: center;
-            //     justify-content: center;
-            // }
         }
     
-        // .footer {
-        //     display: flex;
-        //     width: 100%;
-        //     height: 40px;
-        //     align-items: center;
-        //     padding-left: 5px;
-        // }
     }
 }
\ No newline at end of file

src/components/SoundAi/Ui/PandaTip/index.jsx

 import { useCallback, useEffect, useRef, useState } from 'react'
 import style from './style.less'
-import image from '@/assets/images/soundAi/熊猫.gif'
-import {event} from '@wisdom-utils/utils'
-import { AwakenDirective , ByeDirective, Directive} from '../../core'
+import image from '@/assets/images/soundAi/眨眼.gif'
+import { event } from '@wisdom-utils/utils'
+import { AwakenDirective, ByeDirective, Directive } from '../../core'
 import Dialog from '../Dialog'
 
 const PandaTip = props => {
 
     const [status, setStatus] = useState("close")
     const directiveRef = useRef(null)
-    const {pandaRecordWebSocketRef} = props
-    const finish = useCallback(({resultText}) => {
+    const { pandaRecordWebSocketRef } = props
+    const finish = useCallback(({ resultText }) => {
         const directive = directiveRef.current.parse({
-            text : resultText
+            text: resultText
         })
-        if(!directive) return null
-        if(directive instanceof AwakenDirective && status == "close") {
+        if (!directive) return null
+        if (directive instanceof AwakenDirective && status == "close") {
             setStatus("open")
-        } else if(directive instanceof ByeDirective && status == "open") {
+        } else if (directive instanceof ByeDirective && status == "open") {
             setStatus("close")
         }
     }, [status])
 
     useEffect(() => {
         directiveRef.current = new Directive({
-            directiveTypes : [AwakenDirective , ByeDirective],
+            directiveTypes: [AwakenDirective, ByeDirective],
         })
     }, [])
 
@@ -36,9 +36,13 @@ const PandaTip = props => {
     }, [status])
 
     return (<div className={style.container}>
-        <img src = {image}  className={style.image} />
         {
-            status == "open" ? <Dialog pandaRecordWebSocketRef = {pandaRecordWebSocketRef}/> : null
+            status == "open" ? <Dialog pandaRecordWebSocketRef={pandaRecordWebSocketRef} /> : <div className={style.content}>
+                <div className={style.tipImage}>
+                    <span>呼叫“熊猫熊猫”唤醒语音小助手。</span>
+                </div>
+                <img src={image} className={style.image} />
+            </div>
         }
     </div>)
 }

src/components/SoundAi/Ui/PandaTip/style.less

-.container{
+@imageRoot : "@/assets/images/soundAi/";
+
+.getImage(@imageName) {
+    background: url("@{imageRoot}/@{imageName}") no-repeat center center;
+    background-size: 100% 100%;
+}
+
+
+.container {
     position: absolute;
-    right: 50px;
-    bottom: 50px;
+    right: 0px;
+    bottom: 150px;
     z-index: 9999;
-    .image{
-        width: 80px;
-        height: 80px;
-        &:hover{
+
+    .content {
+        position: relative;
+        .tipImage{
+            position: absolute;
+            right: 55px;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 167px;
+            height: 66px;
+            .getImage("气泡框.png");
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            span {
+                display: flex;
+                height: 68%;
+                width: 68%;
+                font-size: 13px;
+                color: #fff;
+            }
+        }
+        .image {
+            width: 65px;
+            height: 108px;
+
+            &:hover {
                 cursor: pointer;
             }
         }
+    }
+
 }
\ No newline at end of file