feat: 新增UI界面

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

 import style from './style.less'
 import { QuestionCircleOutlined } from '@ant-design/icons'
 import { withRouter } from '@wisdom-utils/runtime'
-import {Typography} from 'antd'
-import { useCallback, useEffect, useRef, useState } from 'react'
-import {event} from '@wisdom-utils/utils'
+import { Tooltip, Typography } from 'antd'
+import { Fragment, useCallback, useEffect, useRef, useState } from 'react'
+import { event } from '@wisdom-utils/utils'
 import moment from 'moment'
 import { Directive } from '../../core'
 
 const Dialog = props => {
 
-    const {  pandaRecordWebSocketRef} = props
+    const { pandaRecordWebSocketRef } = props
     const ulRef = useRef(null)
     const directiveRef = useRef(null)
-    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 [data, setData] = useState([])
 
-    const finish = useCallback(async ({resultText}) => {
+    const finish = useCallback(async ({ resultText }) => {
         pandaRecordWebSocketRef.current.setStatus("pause")
         const directive = directiveRef.current.parse({
-            text : resultText
+            text: resultText
         })
-        if(directive) {
+        if (directive) {
             sendContent({
-                role : "system",
-                content : "系统正在思考中,请稍后..."
+                role: "system",
+                content: "系统正在思考中,请稍后..."
             })
-            const msg  = await directive.excute()
+            const msg = await directive.excute()
             updateLastData({
-                content : msg
+                content: msg
             })
             pandaRecordWebSocketRef.current.setStatus("playing")
             return
         }
         sendContent({
-            role : "system",
-            content : "亲,我暂时还未理解你的意思，请换一种方式表达或者描述更加具体"
+            role: "system",
+            content: "亲,我暂时还未理解你的意思，请换一种方式表达或者描述更加具体"
         })
         pandaRecordWebSocketRef.current.setStatus("playing")
     }, [])
 
     useEffect(() => {
-        if(!ulRef.current.lastChild) return
+        if (!ulRef.current.lastChild) return
         ulRef.current.lastChild.scrollIntoView({
             block: 'end',
             behavior: 'smooth'
@@ -57,28 +47,28 @@ const Dialog = props => {
     }, [data])
 
     const frame = useCallback((data) => {
-        const {resultText , resultTextTemp} = data
+        const { resultText, resultTextTemp } = data
         console.log(resultTextTemp)
         console.log(resultText)
         setData(data => {
             const length = data.length
             const lastData = data.at(-1)
-            if(length == 0 || lastData.role == "system") {
+            if (length == 0 || lastData.role == "system") {
                 return data.concat([{
-                    role : "user",
+                    role: "user",
                     time: new moment().format("HH:mm:ss"),
-                    content : resultTextTemp
+                    content: resultTextTemp
                 }])
             } else {
-                return data.map((data , index) => {
-                    if(index < length -1) {
+                return data.map((data, index) => {
+                    if (index < length - 1) {
                         return {
                             ...data
                         }
                     } else {
                         return {
                             ...data,
-                            content : resultTextTemp
+                            content: resultTextTemp
                         }
                     }
                 })
@@ -88,7 +78,7 @@ const Dialog = props => {
 
     useEffect(() => {
         directiveRef.current = new Directive({
-            params : {
+            params: {
             }
         })
     }, [])
@@ -111,9 +101,9 @@ const Dialog = props => {
         }]))
     }
 
-    const updateLastData = ({content , ...params }) => {
-        setData(data => data.map((item , index) => {
-            if(index < data.length -1) {
+    const updateLastData = ({ content, ...params }) => {
+        setData(data => data.map((item, index) => {
+            if (index < data.length - 1) {
                 return {
                     ...item
                 }
@@ -129,32 +119,43 @@ const Dialog = props => {
 
 
     return (<div className={style.container}>
+        <div className={style.pandaIcon}></div>
         <div className={style.main}>
             <div className={style.header}>
                 <p>熊猫智能语音库</p>
                 <div className={style.help}>
-                    <span className={style.helpIcon}></span>
-                    <div className={style.toolTipContent}>
+                    <Tooltip
+                        placement="bottomRight"
+                        title = {<span>邹绪超</span>}
+                        visible = {true}
+                    >
+                        <span className={style.helpIcon}></span>
+                    </Tooltip>
+                    {/* <div className={style.toolTipContent}>
                         <p>支持以下语音指令集</p>
                         <ul className={style.toolTip}>
                             {
                                 [].map((name, index) => <li key={index}>{index + 1}.{name}</li>)
                             }
                         </ul>
-                    </div>
+                    </div> */}
                 </div>
             </div>
             <div className={style.content}>
                 <div className={style.display}>
                     <ul className={style.ul} ref={ulRef}>
                         {
-                            data.map((item, index) => <li data-role={item.role} key={index} className={style.list}>
-                                <Typography.Text className={style.user} mark>{item.role == "user" ? "用户" : "系统"}</Typography.Text>
-                                <div className={style.aiContent}>
-                                    <p className={style.aiText}> {item.content}</p>
-                                    <span className={style.time}>{item.time}</span>
-                                </div>
-                            </li>)
+                            data.map((item, index) => <Fragment key={index}>
+                                {
+                                    item.interval ? <li className={style.interval}>{item.time}</li> : null
+                                }
+                                <li data-role={item.role} key={index} className={style.list}>
+                                    <span className={style.avater}></span>
+                                    <div className={style.aiContent}>
+                                        <p className={style.aiText}> {item.content}</p>
+                                    </div>
+                                </li>
+                            </Fragment>)
                         }
                     </ul>
                 </div>

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

@@ -39,6 +39,7 @@
                 position: relative;
                 letter-spacing: 0.5px;
                 color: #fff;
+
                 &::before {
                     content: "";
                     position: absolute;
@@ -56,7 +57,7 @@
                 margin-right: 30px;
                 margin-top: 5px;
 
-                .helpIcon{
+                .helpIcon {
                     display: flex;
                     width: 22px;
                     height: 22px;
@@ -107,9 +108,10 @@
         }
 
         .content {
-            flex: 1;
-            height: 100%;
+            height: calc(100% - 100px);
             overflow-y: auto;
+            padding: 0 10px;
+            min-height: 0;
 
             .display {
                 width: 100%;
@@ -122,51 +124,85 @@
                     display: flex;
                     flex-direction: column;
 
+                    .interval {
+                        width: 100%;
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                        margin: 10px 0;
+                        color: #fff;
+                    }
+
                     .list {
                         width: 100%;
                         margin-bottom: 15px;
                         display: flex;
                         flex-direction: row;
+                        justify-content: space-between;
+
+                        &[data-role="user"] {
+                            flex-direction: row-reverse;
 
-                        .user {
-                            margin-right: 10px;
-                            width: 45px;
+                            .avater {
+                                background-image: url("@{imageRoot}/头像.png");
+                            }
+
+                            .aiContent {
+                                margin-right: 5px;
+                                background: #347EE1;
+                            }
                         }
 
+                        .avater {
+                            width: 48px;
+                            height: 48px;
+                            border-radius: 50%;
+                            overflow: hidden;
+                            .getImage("熊猫头像.png");
+
+                        }
+
+
                         .aiContent {
                             flex: 1;
-                            // background-color: #fff;
-                            border-radius: 4px;
-                            padding: 5px;
+                            margin-left: 5px;
+                            min-width: 0;
                             color: #000;
                             white-space: pre-wrap;
                             position: relative;
+                            background: #5B84B6;
+                            border-radius: 5px;
+                            color: #fff;
+                            padding: 6px;
 
                             .aiText {
                                 margin-bottom: 0;
                             }
 
-                            .time {
-                                position: absolute;
-                                right: 0;
-                                bottom: 0;
-                                font-size: 12px;
-                                color: #797070;
-                                border-radius: 2px;
-                                // background-color: #dbd3d3;
-                            }
-                        }
-
-                        &[data-role="system"] {
-                            .user mark {
-                                background-color: #44f449;
-                            }
+                            // .time {
+                            //     position: absolute;
+                            //     right: 0;
+                            //     bottom: 0;
+                            //     font-size: 12px;
+                            //     color: #797070;
+                            //     border-radius: 2px;
+                            //     // background-color: #dbd3d3;
+                            // }
                         }
                     }
                 }
             }
-       
+
         }
-    
+
+    }
+
+    .pandaIcon {
+        position: absolute;
+        right: -78px;
+        bottom: 10px;
+        .getImage("站立小熊猫.png");
+        width: 93px;
+        height: 142px;
     }
 }
\ No newline at end of file