zydx-plus 1.35.592 → 1.35.593

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

@@ -0,0 +1,720 @@
+<template>
+  <teleport to="body">
+    <drag-popup
+      v-if='modelValue'
+      ref="dragPopup"
+      class='popup_chat'
+      :title="title"
+      :width="960"
+      :height="400"
+      :minWidth="300"
+      :minHeight="400"
+      :minimizeCir='!isHideMini'
+      @close="aiClose">
+      <template v-slot:content>
+        <div v-if="!isHideInput" class="chat-input">
+          <div class="chat-text">
+            <textarea :disabled="disabled" @keydown="handleKeydown" @input="autoResize" v-model="userText" placeholder="问AI试试..."></textarea>
+          </div>
+          <div class="chat-operate">
+            <div class="chat-send">
+              <div :class="{'disabled': disabled}" @click="clearTextarea">
+                <i class= "theme-text iconfont zydx-a-qingchuAizhushou"></i>
+                <span class="theme-text">清空</span>
+              </div>
+              <div class="line"></div>
+              <div :class="{'disabled': disabled}" @click="speak">
+                <i :class="{'speak': microphone, 'theme-text': true}" class="iconfont zydx-a-yuyinshuruAi"></i>
+                <span :class="{'speak': microphone, 'theme-text': true}">语音输入</span>
+              </div>
+              <div class="line"></div>
+              <div @click="send('')">
+                <i class="theme-text iconfont zydx-a-sousuoAizhushou" :class="{'disabled': disabled}"></i>
+                <button :disabled="disabled" :class="{'disabled': disabled, 'theme-text': true}">搜索</button>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div :class="{'chat-in': true, 'chat-in-height': isHideInput}" ref="content">
+          <div class="AI-tips-line">
+            <div class="tips">
+              <span>AI回答</span>
+              <span>（以下内容为AI生成，请注意辨别信息真伪）</span>
+            </div>
+            <div :class="{'operate':true, 'operate-position': isHideInput }" v-if="currentMessage">
+              <div @click="send('')" :class="{'disabled': disabled}">
+                <i class="theme-text iconfont zydx-a-zhongzhiAi"></i>
+                <span class="theme-text">重新生成</span>
+              </div>
+              <div class="line"></div>
+              <div @click="copy">
+                <i class="theme-text iconfont zydx-a-fuzhiAI"></i>
+                <span class="theme-text">复制</span>
+              </div>
+            </div>
+          </div>
+          <div class="chat-in-cont" ref="contentLi">
+            <div class="chat-in-li left">
+              <div class="text-cont">{{currentMessage}}</div>
+            </div>
+          </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>
+      </template>
+    </drag-popup>
+  </teleport>
+</template>
+
+<script>
+import Recorder from 'js-audio-recorder'
+import axios from 'axios'
+import Message from '../../../components/tipBox/index';
+import dragPopup from '../../dragPopup/src/dragPopup.vue'
+export default {
+  name: 'zydx-chat',
+  components: { dragPopup },
+  data() {
+    return {
+      token: '',
+      messages: [],
+      currentMessage: '',
+      userText: '',
+      disabled: false,
+      x: '',
+      y: '',
+      left: 0,
+      top: 0,
+      isMove: false,
+      microphone: false,
+      recorder: null,
+      countdown: 59,
+      fileSize: 0,
+      vol: 0,
+      base64: '',
+      voiceLoading: false,
+      isSearched: false
+    }
+  },
+  props: {
+    apiPrefix: {
+      type: String,
+      default: 'zydx'
+    },
+    title: {
+      type: String,
+      default: 'AI助手'
+    },
+    modelValue: {
+      type: Boolean,
+      default: false
+    },
+    isHideInput: {
+      type: Boolean,
+      default: false
+    },
+    isHideMini: {
+      type: Boolean,
+      default: 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', (e) => {
+      if (!this.isMove) return
+      this.x = e.clientX - this.left;
+      this.y = e.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
+    },
+    modelValue: {
+      handler: async function (e) {
+        if(e) {
+          const token = await this.getAccessToken('ai')
+          this.token = token.data.data
+        }
+      },
+      deep: true
+    }
+  },
+  methods: {
+    autoResize(e) {
+      e.target.style.height = 'auto'
+      console.log(e.target.scrollHeight)
+      e.target.style.height = `${e.target.scrollHeight }px`
+    },
+    clearTextarea() {
+      if(this.disabled) return
+      this.userText = ''
+    },
+    copy() {
+      var el = document.createElement("input");
+      el.setAttribute("value", this.currentMessage);
+      document.body.appendChild(el);
+      el.select();
+      document.execCommand("copy");
+      document.body.removeChild(el);
+      Message({type: 'text', cancelShow: false, promptContent: '复制成功'})
+    },
+    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
+          Message({type: 'text', promptContent: '录音失败，请检查麦克风是否可用'})
+          // 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()
+      //鼠标按下事件   左侧有10px的padding
+      this.left = event.offsetX + 10;
+      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()
+      }
+    },
+    toggleAI(str) {
+      this.$emit('update:modelValue', !this.modelValue)
+      if (!this.modelValue) {
+        this.send(str)
+      }
+    },
+    // 发送消息
+    send(str) {
+      const _this = this
+      // 去掉换行和空格
+      this.userText = str || this.userText
+      let text = this.userText.replace(/[\r\n]/g, '').replace(/\s*/g, '')
+      if(!text) return
+        _this.disabled = true
+        _this.isSearched = true
+      this.currentMessage = '努力思考中...'
+      axios.post(`/rpc/2.0/ai_custom/v1/wenxinworkshop/chat/completions?access_token=${_this.token}`,{
+        messages: [{ role: "user", content: text }]
+      }).then(function(data){
+        if(data.data.error_code){
+          _this.disabled = false
+          _this.currentMessage = '这个问题太难了！'
+          return
+        }
+        _this.currentMessage = data.data.result
+        _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.recorder = new Recorder({
+        sampleBits: 16, // 采样位数，支持 8 或 16，默认是16
+        sampleRate: 16000, // 采样率，支持 11025、16000、22050、24000、44100、48000，根据浏览器默认值，我的chrome是48000
+        numChannels: 1, // 声道，支持 1 或 2， 默认是1
+      })
+    },
+    async getAccessToken(v) {
+      return axios({
+        url: `/${this.apiPrefix}/voice/getBaiduToken`,
+        method: 'post',
+        headers: {
+          'Authorization':  localStorage.getItem('sessionId') || sessionStorage.getItem('sessionId'),
+          'Content-Type': 'application/x-www-form-urlencoded'
+        },
+        params: {
+          type: v,
+        }
+      }).then(function(data){
+        return data
+      })
+      .catch(function(err){
+        console.log(err)
+      });
+    },
+    // 关闭
+    aiClose() {
+      this.$emit('update:modelValue', false)
+      this.$emit('cancel')
+    }
+  }
+}
+</script>
+
+<style scoped>
+/* 避免AI助手弹出层级小于全局弹窗 */
+.popup_chat{
+  z-index: 10001;
+}
+.disabled{
+  opacity: 0.5;
+}
+.chat-content {
+  width: 600px;
+  background: #fff;
+  box-shadow: 0 0 10px rgba(0, 0, 0, .2);
+  position: fixed;
+  z-index: 10000;
+}
+
+.chat-header {
+  height: 30px;
+  background: #6F3D92;
+  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(65% - 10px);
+}
+.chat-in-height{
+  height: calc(100% - 5px);
+}
+.AI-tips-line{
+  overflow: hidden;
+  padding: 0 5px;
+  margin: 5px 0;
+}
+.AI-tips-line .tips{
+  float: left;
+}
+.tips span:nth-of-type(1) {
+  font-size: 14px;
+  font-weight: 700;
+}
+.tips span:nth-of-type(2) {
+  font-size: 12px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.6);
+}
+.AI-tips-line .operate{
+  float: right;
+  width: 140px;
+  font-size: 12px;
+  padding-right: 14px;
+}
+.AI-tips-line .operate-position{
+  width: 130px;
+  padding-right: 0;
+}
+.operate >div{
+  float: left;
+  cursor: pointer;
+}
+.operate i {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  width: 24px;
+  box-sizing: border-box;
+  text-align: center;
+  line-height: 23px;
+  font-size: 14px;
+  background: #fff;
+}
+.operate .line {
+  position: relative;
+  margin-left: 5px;
+  top: 6px;
+  width: 1px;
+  background: #6F3D92;
+  height: 12px;
+}
+.chat-in-cont{
+  height: calc(100% - 30px);
+  box-sizing: border-box;
+  overflow-y: auto;
+  transition: all 0.5s;
+  margin: 5px;
+  margin-top: 0;
+  border-radius: 5px;
+  border: 1px solid #CCC;
+}
+.chat-in-cont::-webkit-scrollbar{
+  width: 12px;
+  height: 100%;
+  border-radius: 0 5px 5px 0;
+}
+
+.chat-input {
+  margin: 5px;
+  margin-bottom: 0;
+  padding: 10px 10px 3px;
+  min-height: 121px;
+  height: 35%;
+  border-radius: 5px;
+  border: 1px solid #CCC;
+  overflow: hidden;
+  background: #fff;
+  box-sizing: border-box;
+}
+
+.chat-text {
+  width: 100%;
+  min-height: 82px;
+  height: calc(100% - 24px);
+  background: #fff;
+  box-sizing: border-box;
+}
+
+.chat-text textarea {
+  width: 100%;
+  height: 100% !important;
+  font-family: Helvetica, sans-serif;
+  border: none;
+  outline: none;
+  resize: none;
+  overflow-y: auto;
+  font-size: 14px;
+}
+.chat-operate{
+  overflow: hidden;
+  background: #fff;
+}
+.chat-send {
+  float: right;
+  width: 182px;
+  height: 24px;
+}
+.chat-send >div{
+  float: left;
+  cursor: pointer;
+  font-size: 12px;
+}
+.chat-send .line {
+  position: relative;
+  margin-left: 5px;
+  top: 6px;
+  width: 1px;
+  background: #6F3D92;
+  height: 12px;
+}
+.theme-text{
+  color: #6F3D92;
+}
+
+.chat-send i {
+  width: 24px;
+  display: inline-block;
+  height: 24px;
+  box-sizing: border-box;
+  text-align: center;
+  line-height: 23px;
+  font-size: 14px;
+  background: #fff;
+  cursor: pointer;
+}
+
+.chat-send button {
+  border: none;
+  outline: none;
+  height: 24px;
+  background: #fff;
+  font-size: 12px;
+  border-radius: 3px;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+
+.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: #43cf7c !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/editor/index.js

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