Skip to content

C
CivWeb
Commit 2bf6c416 authored by xuchaozou's avatar xuchaozou
Browse files
Options

feat: 新增UI界面

parent 0bb43fae
Pipeline #85812 waiting for manual action with stages
          Show whitespace changes
          Inline Side-by-side
          Showing with 102 additions and 64 deletions
          src/assets/images/soundAi/头像.png 0 → 100644
          View file @ 2bf6c416
          This diff was suppressed by a .gitattributes entry.
          src/components/SoundAi/Ui/Dialog/index.jsx
          View file @ 2bf6c416
          import style from './style.less' import style from './style.less'
          import { QuestionCircleOutlined } from '@ant-design/icons' import { QuestionCircleOutlined } from '@ant-design/icons'
          import { withRouter } from '@wisdom-utils/runtime' import { withRouter } from '@wisdom-utils/runtime'
          import {Typography} from 'antd' import { Tooltip, Typography } from 'antd'
          import { useCallback, useEffect, useRef, useState } from 'react' import { Fragment, useCallback, useEffect, useRef, useState } from 'react'
          import {event} from '@wisdom-utils/utils' import { event } from '@wisdom-utils/utils'
          import moment from 'moment' import moment from 'moment'
          import { Directive } from '../../core' import { Directive } from '../../core'
          const Dialog = props => { const Dialog = props => {
          const { pandaRecordWebSocketRef} = props const { pandaRecordWebSocketRef } = props
          const ulRef = useRef(null) const ulRef = useRef(null)
          const directiveRef = 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}) => { const finish = useCallback(async ({ resultText }) => {
          pandaRecordWebSocketRef.current.setStatus("pause") pandaRecordWebSocketRef.current.setStatus("pause")
          const directive = directiveRef.current.parse({ const directive = directiveRef.current.parse({
          text : resultText text: resultText
          }) })
          if(directive) { if (directive) {
          sendContent({ sendContent({
          role : "system", role: "system",
          content : "系统正在思考中,请稍后..." content: "系统正在思考中,请稍后..."
          }) })
          const msg = await directive.excute() const msg = await directive.excute()
          updateLastData({ updateLastData({
          content : msg content: msg
          }) })
          pandaRecordWebSocketRef.current.setStatus("playing") pandaRecordWebSocketRef.current.setStatus("playing")
          return return
          } }
          sendContent({ sendContent({
          role : "system", role: "system",
          content : "亲,我暂时还未理解你的意思，请换一种方式表达或者描述更加具体" content: "亲,我暂时还未理解你的意思，请换一种方式表达或者描述更加具体"
          }) })
          pandaRecordWebSocketRef.current.setStatus("playing") pandaRecordWebSocketRef.current.setStatus("playing")
          }, []) }, [])
          useEffect(() => { useEffect(() => {
          if(!ulRef.current.lastChild) return if (!ulRef.current.lastChild) return
          ulRef.current.lastChild.scrollIntoView({ ulRef.current.lastChild.scrollIntoView({
          block: 'end', block: 'end',
          behavior: 'smooth' behavior: 'smooth'
          ...@@ -57,28 +47,28 @@ const Dialog = props => { ...@@ -57,28 +47,28 @@ const Dialog = props => {
          }, [data]) }, [data])
          const frame = useCallback((data) => { const frame = useCallback((data) => {
          const {resultText , resultTextTemp} = data const { resultText, resultTextTemp } = data
          console.log(resultTextTemp) console.log(resultTextTemp)
          console.log(resultText) console.log(resultText)
          setData(data => { setData(data => {
          const length = data.length const length = data.length
          const lastData = data.at(-1) const lastData = data.at(-1)
          if(length == 0 || lastData.role == "system") { if (length == 0 || lastData.role == "system") {
          return data.concat([{ return data.concat([{
          role : "user", role: "user",
          time: new moment().format("HH:mm:ss"), time: new moment().format("HH:mm:ss"),
          content : resultTextTemp content: resultTextTemp
          }]) }])
          } else { } else {
          return data.map((data , index) => { return data.map((data, index) => {
          if(index < length -1) { if (index < length - 1) {
          return { return {
          ...data ...data
          } }
          } else { } else {
          return { return {
          ...data, ...data,
          content : resultTextTemp content: resultTextTemp
          } }
          } }
          }) })
          ...@@ -88,7 +78,7 @@ const Dialog = props => { ...@@ -88,7 +78,7 @@ const Dialog = props => {
          useEffect(() => { useEffect(() => {
          directiveRef.current = new Directive({ directiveRef.current = new Directive({
          params : { params: {
          } }
          }) })
          }, []) }, [])
          ...@@ -111,9 +101,9 @@ const Dialog = props => { ...@@ -111,9 +101,9 @@ const Dialog = props => {
          }])) }]))
          } }
          const updateLastData = ({content , ...params }) => { const updateLastData = ({ content, ...params }) => {
          setData(data => data.map((item , index) => { setData(data => data.map((item, index) => {
          if(index < data.length -1) { if (index < data.length - 1) {
          return { return {
          ...item ...item
          } }
          ...@@ -129,32 +119,43 @@ const Dialog = props => { ...@@ -129,32 +119,43 @@ const Dialog = props => {
          return (<div className={style.container}> return (<div className={style.container}>
          <div className={style.pandaIcon}></div>
          <div className={style.main}> <div className={style.main}>
          <div className={style.header}> <div className={style.header}>
          <p>熊猫智能语音库</p> <p>熊猫智能语音库</p>
          <div className={style.help}> <div className={style.help}>
          <Tooltip
          placement="bottomRight"
          title = {<span>邹绪超</span>}
          visible = {true}
          >
          <span className={style.helpIcon}></span> <span className={style.helpIcon}></span>
          <div className={style.toolTipContent}> </Tooltip>
          {/* <div className={style.toolTipContent}>
          <p>支持以下语音指令集</p> <p>支持以下语音指令集</p>
          <ul className={style.toolTip}> <ul className={style.toolTip}>
          { {
          [].map((name, index) => <li key={index}>{index + 1}.{name}</li>) [].map((name, index) => <li key={index}>{index + 1}.{name}</li>)
          } }
          </ul> </ul>
          </div> </div> */}
          </div> </div>
          </div> </div>
          <div className={style.content}> <div className={style.content}>
          <div className={style.display}> <div className={style.display}>
          <ul className={style.ul} ref={ulRef}> <ul className={style.ul} ref={ulRef}>
          { {
          data.map((item, index) => <li data-role={item.role} key={index} className={style.list}> data.map((item, index) => <Fragment key={index}>
          <Typography.Text className={style.user} mark>{item.role == "user" ? "用户" : "系统"}</Typography.Text> {
          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}> <div className={style.aiContent}>
          <p className={style.aiText}> {item.content}</p> <p className={style.aiText}> {item.content}</p>
          <span className={style.time}>{item.time}</span>
          </div> </div>
          </li>) </li>
          </Fragment>)
          } }
          </ul> </ul>
          </div> </div>
          ......
          src/components/SoundAi/Ui/Dialog/style.less
          View file @ 2bf6c416
          ...@@ -39,6 +39,7 @@ ...@@ -39,6 +39,7 @@
          position: relative; position: relative;
          letter-spacing: 0.5px; letter-spacing: 0.5px;
          color: #fff; color: #fff;
          &::before { &::before {
          content: ""; content: "";
          position: absolute; position: absolute;
          ...@@ -56,7 +57,7 @@ ...@@ -56,7 +57,7 @@
          margin-right: 30px; margin-right: 30px;
          margin-top: 5px; margin-top: 5px;
          .helpIcon{ .helpIcon {
          display: flex; display: flex;
          width: 22px; width: 22px;
          height: 22px; height: 22px;
          ...@@ -107,9 +108,10 @@ ...@@ -107,9 +108,10 @@
          } }
          .content { .content {
          flex: 1; height: calc(100% - 100px);
          height: 100%;
          overflow-y: auto; overflow-y: auto;
          padding: 0 10px;
          min-height: 0;
          .display { .display {
          width: 100%; width: 100%;
          ...@@ -122,51 +124,85 @@ ...@@ -122,51 +124,85 @@
          display: flex; display: flex;
          flex-direction: column; flex-direction: column;
          .interval {
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          margin: 10px 0;
          color: #fff;
          }
          .list { .list {
          width: 100%; width: 100%;
          margin-bottom: 15px; margin-bottom: 15px;
          display: flex; display: flex;
          flex-direction: row; flex-direction: row;
          justify-content: space-between;
          &[data-role="user"] {
          flex-direction: row-reverse;
          .user { .avater {
          margin-right: 10px; background-image: url("@{imageRoot}/头像.png");
          width: 45px;
          } }
          .aiContent {
          margin-right: 5px;
          background: #347EE1;
          }
          }
          .avater {
          width: 48px;
          height: 48px;
          border-radius: 50%;
          overflow: hidden;
          .getImage("熊猫头像.png");
          }
          .aiContent { .aiContent {
          flex: 1; flex: 1;
          // background-color: #fff; margin-left: 5px;
          border-radius: 4px; min-width: 0;
          padding: 5px;
          color: #000; color: #000;
          white-space: pre-wrap; white-space: pre-wrap;
          position: relative; position: relative;
          background: #5B84B6;
          border-radius: 5px;
          color: #fff;
          padding: 6px;
          .aiText { .aiText {
          margin-bottom: 0; margin-bottom: 0;
          } }
          .time { // .time {
          position: absolute; // position: absolute;
          right: 0; // right: 0;
          bottom: 0; // bottom: 0;
          font-size: 12px; // font-size: 12px;
          color: #797070; // color: #797070;
          border-radius: 2px; // border-radius: 2px;
          // background-color: #dbd3d3; // // background-color: #dbd3d3;
          } // }
          }
          &[data-role="system"] {
          .user mark {
          background-color: #44f449;
          } }
          } }
          } }
          } }
          } }
          } }
          .pandaIcon {
          position: absolute;
          right: -78px;
          bottom: 10px;
          .getImage("站立小熊猫.png");
          width: 93px;
          height: 142px;
          } }
          } }
          \ No newline at end of file
          Markdown is supported
          0% or
          You are about to add 0 people to the discussion. Proceed with caution.
          Finish editing this message first!
          Please register or to comment