zydx-plus 1.33.449 → 1.34.450

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zydx-plus",
-  "version": "1.33.449",
+  "version": "1.34.450",
   "description": "Vue.js",
   "main": "src/index.js",
   "files": [

package/src/components/chat/index.js

@@ -0,0 +1,6 @@
+import main from './src/chat';
+
+main.install = function(Vue) {
+    Vue.component(main.name, main);
+};
+export default main;

package/src/components/chat/src/chat.vue

@@ -0,0 +1,560 @@
+<template>
+  <div class="chat-content">
+    <div class="chat-header">
+      <span class="chat-header-title"
+            @mousedown.stop="chatMousedown"
+            @mouseup.stop="chatMouseup">
+        AI助手
+      </span>
+      <i class="iconfont zydx-guanbi" @click.stop="aiClose"></i>
+    </div>
+    <div class="chat-in" ref="content">
+      <div class="chat-in-cont" ref="contentLi">
+        <div class="chat-in-li" :class="{'left': item.role === 'assistant', 'right': item.role === 'user'}" v-for="(item,index) in messages">
+          <div class="ai-avatar" v-if="item.role === 'assistant'">
+            <img src="./ai.png" alt="" />
+          </div>
+          <div class="text-cont">{{ item.content }}</div>
+        </div>
+      </div>
+    </div>
+    <div class="chat-input">
+      <div class="chat-text">
+        <textarea :disabled="disabled" @keydown="handleKeydown" v-model="userText" placeholder="请输入问题..."></textarea>
+      </div>
+      <div class="chat-send">
+        <i @click="speak" :class="{'speak': microphone}" class="iconfont zydx-luyinhuatongmai"></i>
+        <button @click="send" :disabled="disabled" :class="{'disabled': disabled}">{{ disabled? '发送中...': '发送' }}</button>
+      </div>
+    </div>
+    <div class="microphone" v-if="microphone">
+      <div class="microphone-cont mic-anim">
+        <div class="microphone1">
+          <div class="microphone2">
+            <div class="microphone3" @click="stopRecording">
+              <div>
+                <svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 68" width="26" height="48">
+                  <path id="并集_轮廓_" data-name="并集 (轮廓)" fill="#ccc"
+                        d="M10,44a3,3,0,0,1-3-3V3a3,3,0,0,1,3-3H28a3,3,0,0,1,3,3V41a3,3,0,0,1-3,3Zm17-4V4H11V40ZM0,47V24a2,2,0,0,1,4,0V45a2,2,0,0,0,2,2H32a2,2,0,0,0,2-2V24a2,2,0,0,1,4,0V47a4,4,0,0,1-4,4H21v9c7.34.26,13,1.93,13,4,0,2.21-6.72,4-15,4S4,66.21,4,64c0-2,5.66-3.7,13-4V51H4A4,4,0,0,1,0,47ZM19,64h.79L19,64l-.79,0Z"/>
+                  <rect fill="#fff" x="11" y="4" width="16" height="36"/>
+                  <rect class="volume" :height="volume(vol)" width="12" :y="volume2(vol)" x="13" fill="#43cf7c"/>
+                </svg>
+              </div>
+              <p>{{ voiceLoading? '语音转换中...': `正在说话：${countdown}s` }}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Recorder from 'js-audio-recorder'
+import axios from 'axios'
+export default {
+  name: 'zydx-chat',
+  data() {
+    return {
+      token: '',
+      messages: [],
+      userText: '',
+      disabled: false,
+      x: 0,
+      y: 0,
+      left: 0,
+      top: 0,
+      isMove: false,
+      microphone: false,
+      recorder: null,
+      countdown: 59,
+      fileSize: 0,
+      vol: 0,
+      base64: '',
+      voiceLoading: false
+    }
+  },
+  beforeUnmount() {
+    this.recorder.destroy()
+  },
+  mounted() {
+    const _this = this
+    this.init()
+    this.recorder.onprogress = function (params) {
+      if(_this.countdown <= 0) {
+        _this.stopRecording()
+      }else {
+        _this.countdown = 59 - parseInt(params.duration)
+        _this.vol = params.vol
+      }
+    }
+    document.addEventListener('mousemove', () => {
+      if (!this.isMove) return
+      this.x = event.clientX - this.left;
+      this.y = event.clientY - this.top;
+      // 超出边界
+      const w = document.documentElement.clientWidth;
+      const h = document.documentElement.clientHeight;
+      if (this.x < 0) this.x = 0;
+      if (this.y < 0) this.y = 0;
+      if (this.x > w - 600) this.x = w - 600;
+      if (this.y > h - 650) this.y = h - 650;
+      this.$emit('move', {x: this.x, y: this.y})
+    })
+    document.addEventListener('mouseup', (event) => {
+      this.isMove = false
+    })
+  },
+  watch: {
+    messages: {
+      handler: function (e, oldVal) {
+        sessionStorage.setItem('messages', JSON.stringify(e)) // 保存聊天记录
+      },
+      deep: true
+    },
+  },
+  methods: {
+    speak() {
+      if(this.disabled) return
+      this.microphone = !this.microphone
+      if(this.microphone) {
+        this.recorder.start().then(() => { // 开始录音
+          this.countdown = 59
+          this.fileSize = 0
+          this.vol = 0
+          this.base64 = ''
+        }, (error) => {
+          this.microphone = false
+          this.$message({
+            type: 'text',
+            cancelShow: false,
+            promptContent: '录音失败，请检查麦克风是否可用'
+          })
+        });
+      }else {
+        this.microphone = true
+        this.stopRecording()
+      }
+    },
+    stopRecording() {
+      this.recorder.stop() // 停止录音
+      // 获取录音文件
+      const pcm = this.recorder.getPCMBlob()
+      const file = new File([pcm], 'audio.pcm', {type: 'audio/pcm'})
+      let reader = new FileReader();
+      reader.readAsDataURL(file)
+      reader.onload = async () => {
+        this.base64 = reader.result.split('base64,')[1]
+        await this.getSpeech()
+      }
+    },
+    async getSpeech() {
+      const _this = this
+      const token = await this.getAccessToken('voice')
+      const data = {
+        format: "pcm",
+        rate: 16000,
+        channel: 1,
+        cuid: "Ukvpuzv27RdJhltQBlpITVLNTcxs5ctM",
+        token: token.data.data,
+        speech: this.base64,
+        len: this.recorder.fileSize,
+      };
+      _this.voiceLoading = true
+      axios.post('/server_api', data)
+          .then(function(data){
+            _this.voiceLoading = false
+            _this.microphone = false
+            for(let i=0; i< data.data.result.length; i++) {
+              _this.userText += data.data.result[i]
+            }
+            _this.recorder.destroy()
+          })
+          .catch(function(err){
+            _this.recorder.destroy()
+          });
+    },
+    volume(v) {
+      if(v === 0) {
+        return 32
+      }else {
+        return v/3 > 32 ? 32 : v/5
+      }
+    },
+    volume2(v) {
+      if(v === 0) {
+        return 6
+      }else {
+        return 6 + 32 - this.volume(v)
+      }
+    },
+    chatMousedown(event) {
+      event.preventDefault()
+      //鼠标按下事件
+      this.left = event.offsetX;
+      this.top = event.offsetY;
+      this.isMove = true
+    },
+    chatMouseup() {
+      this.isMove = false
+    },
+    // 监听键盘事件
+    handleKeydown(e) {
+      if(e.keyCode === 32){
+        e.preventDefault();
+        return;
+      }
+      if(e.keyCode === 13){
+        e.preventDefault();
+        this.send()
+      }
+    },
+    // 滚动到底部
+    scrollToBottom() {
+      this.$nextTick(() => {
+        this.$refs.content.scrollTo(0,this.$refs.contentLi.scrollHeight)
+      })
+    },
+    // 发送消息
+    send() {
+      const _this = this
+      // 去掉换行和空格
+      let text = _this.userText.replace(/[\r\n]/g, '').replace(/\s*/g, '')
+      if(!text) return
+      _this.messages.push({
+        role: 'user',
+        content: text
+      })
+      _this.userText = ''
+      _this.disabled = true
+      _this.messages.push({
+        role: 'assistant',
+        content: '努力思考中...'
+      })
+      _this.scrollToBottom()
+      let mess = JSON.parse(JSON.stringify(_this.messages)) // 拷贝一份记录
+      mess.pop()
+      axios.post(`/rpc/2.0/ai_custom/v1/wenxinworkshop/chat/completions?access_token=${_this.token}`,{
+        messages: mess
+      }).then(function(data){
+        _this.messages.pop()
+        if(data.data.error_code){
+          _this.messages.push({
+            role: 'assistant',
+            content: '这个问题太难了！'
+          })
+          _this.disabled = false
+          _this.scrollToBottom()
+          return
+        }
+        _this.messages.push({
+          role: 'assistant',
+          content: data.data.result
+        })
+        _this.scrollToBottom()
+        _this.disabled = false
+      }).catch(function(err){
+        _this.disabled = false
+        this.$message({promptContent: err, cancelShow: false})
+      });
+    },
+    // 初始化
+    async init() {
+      this.messages = JSON.parse(sessionStorage.getItem('messages')) || []
+      this.scrollToBottom()
+      // 初始化录音
+      this.recorder = new Recorder({
+        sampleBits: 16, // 采样位数，支持 8 或 16，默认是16
+        sampleRate: 16000, // 采样率，支持 11025、16000、22050、24000、44100、48000，根据浏览器默认值，我的chrome是48000
+        numChannels: 1, // 声道，支持 1 或 2， 默认是1
+      })
+      const token = await this.getAccessToken('ai')
+      this.token = token.data.data
+    },
+    async getAccessToken(v) {
+      return axios({
+        url: '/zydx/voice/getBaiduToken',
+        method: 'post',
+        headers: {
+          'Authorization':  localStorage.getItem('sessionId'),
+          'Content-Type': 'application/x-www-form-urlencoded'
+        },
+        params: {
+          type: v,
+        }
+      }).then(function(data){
+        return data
+      })
+      .catch(function(err){
+        console.log(err)
+      });
+      // return await getBaiduToken({type: v})
+    },
+    // 关闭
+    aiClose() {
+      this.$emit('close')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.disabled{
+  background: #ccc !important;
+}
+.chat-content {
+  width: 600px;
+  height: 650px;
+  background: #fff;
+  box-shadow: 0 0 10px rgba(0, 0, 0, .2);
+  position: relative;
+}
+
+.chat-header {
+  height: 30px;
+  background: rgba(67, 207, 124, 1);
+  display: flex;
+  line-height: 30px;
+  padding: 0 10px;
+  box-sizing: border-box;
+  color: #fff;
+  font-size: 14px;
+  position: relative;
+}
+.chat-header-title{
+  cursor: move;
+  display: inline-block;
+  width: calc(100% - 30px);
+  margin-right: 30px;
+}
+
+.chat-header i {
+  cursor: pointer;
+  font-size: 18px;
+  position: absolute;
+  top: 0;
+  right: 10px;
+  z-index: 1;
+}
+
+.chat-in {
+  height: calc(100% - 112px);
+  overflow-y: auto;
+  transition: all 0.5s;
+}
+
+.chat-input {
+  height: 82px;
+  background: rgba(242, 242, 242, 1);
+}
+
+.chat-text {
+  width: 100%;
+  height: 55px;
+  padding: 5px;
+  box-sizing: border-box;
+}
+
+.chat-text textarea {
+  width: 100%;
+  height: 100%;
+  font-family: Helvetica, sans-serif;
+  border: none;
+  outline: none;
+  resize: none;
+  background: transparent;
+  font-size: 14px;
+}
+
+.chat-send {
+  padding: 0 5px 5px 5px;
+  height: 24px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.chat-send i {
+  width: 24px;
+  display: inline-block;
+  height: 24px;
+  box-sizing: border-box;
+  border-radius: 50%;
+  border: 1px solid #ccc;
+  text-align: center;
+  line-height: 23px;
+  font-size: 14px;
+  background: #fff;
+  cursor: pointer;
+}
+
+.chat-send button {
+  background: rgba(67, 207, 124, 1);
+  border: none;
+  outline: none;
+  width: 70px;
+  height: 24px;
+  color: #fff;
+  font-size: 12px;
+  cursor: pointer;
+  border-radius: 3px;
+  text-align-last: justify;
+  word-break: break-all;
+  text-justify: distribute;
+  padding: 0 10px;
+  box-sizing: border-box;
+}
+.chat-in-cont{
+  padding: 5px 15px;
+}
+.chat-in-li{
+  padding: 10px 0;
+}
+.left{
+  position: relative;
+  min-height: 50px;
+}
+.left .text-cont{
+  box-shadow: 0 0 10px rgba(0,0,0,.2);
+  background: #fff;
+  margin-left: 60px;
+}
+.right{
+  text-align: right;
+}
+.right .text-cont{
+  background: #fff;
+  background: rgba(149, 236, 105, 1);
+}
+.text-cont{
+  padding: 10px;
+  border-radius: 5px;
+  display: inline-block;
+  text-align: justify !important;
+  max-width: 60%;
+  font-size: 14px;
+  line-height: 24px;
+  white-space: pre-line;
+}
+.ai-avatar{
+  position: absolute;
+  left: 0;
+  top: 10px;
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  overflow: hidden;
+  box-shadow: 0 0 10px rgba(0,0,0,.2);
+  background: #fff;
+  padding: 5px;
+  box-sizing: border-box;
+}
+.ai-avatar img{
+  width: 100%;
+  height: 100%;
+}
+.speak{
+  background: #43cf7c !important;
+  color: #fff !important;
+  border: 1px solid #43cf7c !important;
+}
+.microphone{
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  z-index: 50;
+  width: 150px;
+  height: 150px;
+  transform: translate(-50%,-50%);
+}
+.microphone-cont{
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: relative;
+}
+.microphone1{
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background: rgba(67, 207, 124, 0.3);
+}
+.microphone2{
+  width: calc(100% - 30px);
+  height: calc(100% - 30px);
+  border-radius: 50%;
+  background: rgba(67, 207, 124, 0.5);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: 1;
+  transform: translate(-50%,-50%);
+}
+.microphone3{
+  width: calc(100% - 30px);
+  height: calc(100% - 30px);
+  border-radius: 50%;
+  background: rgba(67, 207, 124, 0.8);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: 1;
+  transform: translate(-50%,-50%);
+  text-align: center;
+  padding-top: 10px;
+  box-sizing: border-box;
+  cursor: pointer;
+}
+.microphone3 p{
+  font-size: 12px;
+  color: #fff;
+  line-height: 18px;
+}
+.mic-anim .microphone1{
+  animation: mic-anim 1.5s infinite;
+}
+@keyframes mic-anim{
+  0%{
+    background: rgba(67, 207, 124, 0.2);
+  }
+  80%{
+    background: rgba(67, 207, 124, 0.4);
+  }
+  100%{
+    background: rgba(67, 207, 124, 0.2);
+  }
+}
+.mic-anim .microphone2{
+  animation: mic-anim2 1.5s infinite;
+}
+@keyframes mic-anim2{
+  0%{
+    background: rgba(67, 207, 124, 0.4);
+  }
+  40%{
+    background: rgba(67, 207, 124, 0.6);
+  }
+  80%{
+    background: rgba(67, 207, 124, 0.4);
+  }
+  100%{
+    background: rgba(67, 207, 124, 0.4);
+  }
+}
+.mic-anim .microphone3{
+  animation: mic-anim3 1.5s infinite;
+}
+@keyframes mic-anim3{
+  0%{
+    background: rgba(67, 207, 124, 0.8);
+  }
+  20%{
+    background: rgba(67, 207, 124, 1);
+  }
+  40%{
+    background: rgba(67, 207, 124, 0.8);
+  }
+  100%{
+    background: rgba(67, 207, 124, 0.8);
+  }
+}
+</style>

package/src/components/editor2/src/editor.vue

@@ -19,8 +19,10 @@
         <button v-if="voiceShow" class="buts" @mousedown.stop="speechDown" @click="voice()"
                 :style="{color: (voiceStatus)? '#4B0C77' :'#000'}">{{ voiceStatus ? '关闭语音' : '语音输入' }}
         </button>
+        <button v-if='isShowAiTool' class="buts" @click="showAi">AI助手</button>
       </div>
     </div>
+    <zydx-chat v-if="isShowAi" @close='isShowAi = false'></zydx-chat>
     <div class="ed-cont" :style="heightStyleCont">
       <div  :style="{'border': (borderShow)? '1px solid #ccc': '0'}" v-if="editorShow">
         <editor-content @paste.native.capture.prevent="preventPaste" ref="editorRef" class="editor" :editor="editor"
@@ -162,13 +164,16 @@ import alignmentModeCenter from './img/center.png'
 import alignmentModeLeft from './img/left.png'
 import alignmentModeRight from './img/right.png'
 
+import zydxChat from '../../chat/src/chat.vue'
+
 export default {
   name: 'zydx-xiao-editor',
   components: {
     EditorContent,
     BubbleMenu,
     svgs,
-    Paint
+    Paint,
+    zydxChat
   },
   data() {
     return {
@@ -202,7 +207,8 @@ export default {
       editorRef: null,
       imgSizeVal: '',
       currentImgDom: {},
-      paintShow: false
+      paintShow: false,
+      isShowAi: false,
     }
   },
   beforeUnmount() {
@@ -213,6 +219,10 @@ export default {
     this.ws = null
   },
   props: {
+    isShowAiTool: {
+      type: Boolean,
+      default: true
+    },
     titleVertical: {
       type: Boolean,
       default: false
@@ -419,6 +429,9 @@ export default {
     })
   },
   methods: {
+    showAi() {
+      this.isShowAi = !this.isShowAi
+    },
     exportImg(e) {
       this.uploadFile(e, this.uploadImage).then(r => {
         this.paintShow = false

package/src/components/paint/src/paint.vue

@@ -236,6 +236,7 @@ export default {
   },
   emits: ['cancel','exportImg'],
   created() {
+    stayTime = 0
     this.ids = this.randomId()
   },
   mounted() {
@@ -551,8 +552,11 @@ export default {
       this.top = e.clientY - this.topOffset;
     },
     mouseup(e) {
-      console.log(stayTime)
       clearInterval(timer)
+      if (!this.pressDown) {
+        stayTime = 0
+        return
+      }
       if (stayTime <= 100 && this.pressDown) { // 如果小于100就是点击事件
         if (!this.toolArr[this.toolIndex]) {
           stayTime = 0
@@ -583,6 +587,7 @@ export default {
       return id.replace(/[0-9]/g, '')
     },
     cancel() {
+      stayTime = 0
       document.body.style.overflow = 'visible'
       this.$emit('cancel')
     }

package/src/index.js

@@ -35,6 +35,7 @@ import question from './components/question/index';
 import tagging from './components/tagging/index';
 import seek from './components/seek/index';
 import sketchpad from './components/sketchpad/index';
+import chat from './components/chat/index';
 
 const components = [
     Calendar,
@@ -70,7 +71,8 @@ const components = [
     question,
     tagging,
     seek,
-    sketchpad
+    sketchpad,
+    chat
 ];
 
 function install(app) {
@@ -83,7 +85,7 @@ function install(app) {
 }
 
 export default {
-    version: '1.33.449',
+    version: '1.34.450',
     install,
     Calendar,
     Message,
@@ -121,6 +123,7 @@ export default {
     question,
     tagging,
     seek,
-    sketchpad
+    sketchpad,
+    chat
 };