zydx-plus 1.32.254 → 1.32.255

package/package.json

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

package/src/components/dragPopup/src/dragPopup.vue

@@ -104,6 +104,12 @@ export default {
     // 全局监听鼠标抬起事件
     document.addEventListener('mouseup', this.mouseup);
     document.addEventListener('mouseup', this.footUp);
+    this.$nextTick(() => {
+      this.$emit('updateDrag', {
+        width: this.footRightOffset,
+        height: this.footDownOffset - ((this.dragTextShow)?60:30)
+      })
+    })
   },
   computed: {
     position() {

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

@@ -14,6 +14,11 @@
           </label>
           <button v-else class="buts" @click="toolTap(item.key)">{{ item.title }}</button>
         </div>
+        <div class="voice">
+          <button class="buts" @click="voice" :style="{color: (voiceStatus)? '#00ff00' :'#000'}">
+            {{ voiceStatus ? '关闭语音' : '语音输入' }}
+          </button>
+        </div>
       </div>
     </div>
     <div class="ed-cont" :style="heightStyleCont">
@@ -75,9 +80,35 @@
         </div>
       </div>
     </div>
+    <div class="microphone" v-if="voiceStatus">
+      <div class="microphone-cont" :class="{'mic-anim': recordingStatus}">
+        <div class="microphone1">
+          <div class="microphone2">
+            <div class="microphone3" @click.stop="startVoice">
+              <svgs :vol="vol"></svgs>
+              <p v-if="recordingStatus">{{ voiceLoading? '语音转换中...': `正在说话：${countdown}s` }}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="microphone-text">{{ recordingStatus?'按下停止说话':'按下开始说话' }}</div>
+    </div>
+    <div class="text-editing" v-if="textEditing">
+      <div class="text-editing-cont">
+        <p>语音转换结果：</p>
+        <zydx-textarea ref="textarea" :height="130" :value="voiceContent"></zydx-textarea>
+        <div class="text-editing-but">
+          <button class="buts" @click="editingConfirm">确认</button>
+          <button class="buts" @click="editingCancel">取消</button>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 <script>
+import Recorder from 'js-audio-recorder'
+import axios from 'axios'
+import zydxTextarea from '../../textarea/src/textarea'
 import {html2json, json2html} from 'html2json'
 import {Editor, EditorContent} from '@tiptap/vue-3'
 import StarterKit from '@tiptap/starter-kit'
@@ -89,22 +120,37 @@ import textStyle from '@tiptap/extension-text-style'
 import {sid} from "./sign-id";
 import {FontSize} from "./font-size";
 import {titleId} from "./title-id";
+import svgs from "./microphone";
 
 export default {
   name: 'zydx-xiao-editor',
   components: {
-    EditorContent
+    EditorContent,
+    svgs,
+    zydxTextarea
   },
   data() {
     return {
       uploadAttData: [],
       editor: null,
       heightStyle: {},
-      heightStyleCont: {}
-    };
+      heightStyleCont: {},
+      voiceStatus: false,
+      recorder: null,
+      drawRecordId: null,
+      recordingStatus: false,
+      countdown: 59,
+      fileSize: 0,
+      vol: 0,
+      base64: '',
+      voiceContent: '',
+      voiceLoading: false,
+      textEditing: false
+    }
   },
   beforeUnmount() {
     this.editor.destroy()
+    this.recorder.destroy()
   },
   props: {
     data: {
@@ -275,8 +321,124 @@ export default {
       json.content.splice(index, 1)
       this.editor?.commands.setContent(json)
     })
+    // 初始化录音
+    this.recorder = new Recorder({
+      sampleBits: 16, // 采样位数，支持 8 或 16，默认是16
+      sampleRate: 16000, // 采样率，支持 11025、16000、22050、24000、44100、48000，根据浏览器默认值，我的chrome是48000
+      numChannels: 1, // 声道，支持 1 或 2， 默认是1
+      // compiling: false,(0.x版本中生效,1.x增加中)  // 是否边录边转换，默认是false
+    })
+    this.recorder.onprogress = function (params) {
+      if(_this.countdown <= 0) {
+        _this.stopRecording()
+      }else {
+        _this.countdown = 59 - parseInt(params.duration)
+        _this.fileSize = params.fileSize
+        _this.vol = params.vol
+      }
+    }
   },
   methods: {
+    editingConfirm() {
+      this.textEditing = false
+      const html = this.$refs.textarea.getContent().split('<br>')
+      let editorHtml = this.editor.getHTML()
+      for(let i=0; i< html.length; i++) {
+        editorHtml += `<p>${html[i]}</p>`
+      }
+      this.editor.commands.setContent(editorHtml)
+    },
+    editingCancel() {
+      this.textEditing = false
+    },
+    // 语音输入
+    voice() {
+      this.voiceStatus = !this.voiceStatus
+      this.recorder.stop() // 停止录音
+      this.recorder.destroy() // 销毁录音
+    },
+    startVoice() {
+      if (!this.recordingStatus) {
+        this.recorder.start().then(() => { // 开始录音
+          this.fileSize = 0
+          this.recordingStatus = true
+        }, (error) => {
+          this.recordingStatus = false
+        });
+      } else {
+        this.stopRecording()
+      }
+    },
+    stopRecording() {
+      this.recorder.stop() // 停止录音
+      this.countdown = 59
+      this.vol = 0
+      // 获取录音文件
+      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()
+      }
+    },
+    getAccessToken() {
+      return new Promise((rl, re) => {
+        const remember = localStorage.getItem('remember')
+        let token = ''
+        if(remember === '1') {
+          token = localStorage.getItem('sessionId')
+        }else {
+          token = sessionStorage.getItem('sessionId')
+        }
+        const xhr = new XMLHttpRequest()
+        // xhr.open('POST', 'http://192.168.15.126:8888/zydx/voice/getBaiduToken')
+        xhr.open('POST', '/zydx/voice/getBaiduToken')
+        xhr.setRequestHeader('Authorization', token)
+        const params = new URLSearchParams()
+        params.append('type', 'voice')
+        xhr.onreadystatechange = () => {
+          if (xhr.readyState === 4) {
+            if (xhr.status === 200) {
+              rl(JSON.parse(xhr.responseText).data)
+            }
+          }
+        }
+        xhr.send(params)
+      })
+    },
+    async getSpeech() {
+      const _this = this
+      const obj = {
+        format: "pcm",
+        rate: 16000,
+        channel: 1,
+        cuid: "HpURryNC91ddJmAPq7iwu26OvMDW4jMS",
+        speech: this.base64,
+        len: this.recorder.fileSize,
+        token: await this.getAccessToken()
+      };
+      _this.voiceLoading = true
+      axios.post('/server_api',obj)
+          .then(function(data){
+            _this.voiceLoading = false
+            _this.voiceStatus = false
+            _this.recordingStatus = false
+            _this.textEditing = true
+            _this.voiceContent = ''
+            for(let i=0; i< data.data.result.length; i++) {
+              if((i + 1) >= data.data.result.length) {
+                _this.voiceContent += data.data.result[i]
+              }else {
+                _this.voiceContent += `${data.data.result[i]}<bt>`
+              }
+            }
+          })
+          .catch(function(err){
+            console.log(err)
+          });
+    },
     enclosureAction(v) {
       return v.map(x => {
         x.active = true
@@ -447,7 +609,10 @@ export default {
       if (v === 'h1') this.editor.chain().focus().setFontSize('18px').setBold().run()
       if (v === 'h2') this.editor.chain().focus().setFontSize('16px').setBold().run()
       if (v === 'h3') this.editor.chain().focus().setFontSize('14px').setBold().run()
-      if (v === 'p') this.editor.chain().focus().setParagraph().setFontSize('14px').unsetBold().run()
+      if (v === 'p') {
+        this.editor.chain().focus().setFontSize('14px').run()
+        this.editor.chain().focus().unsetBold().run()
+      }
       if (v === 'bold') this.editor.chain().focus().toggleBold().run()
       if (v === 'center' || v === 'left' || v === 'right') this.editor.chain().focus().setTextAlign(v).run()
       if (v === 'add') {
@@ -465,6 +630,142 @@ export default {
 </script>
 
 <style scoped>
+.text-editing-but{
+  text-align: center;
+  margin-top: 5px;
+}
+.text-editing{
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 50;
+  display: flex;
+  align-items: center;
+  padding-left: 320px;
+}
+.text-editing-cont{
+  width: 600px;
+  padding: 20px;
+  box-sizing: border-box;
+  box-shadow: 0 0 10px rgba(204,204,204,.3);
+  background: #fff;
+  margin: 0 auto;
+  display: inline-block;
+}
+.text-editing-cont p{
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 700;
+}
+.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);
+  }
+}
+.microphone{
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  z-index: 50;
+  width: 200px;
+  margin-left: 60px;
+  margin-top: -120px;
+}
+.microphone-cont{
+  width: 200px;
+  height: 200px;
+  border-radius: 50%;
+  position: relative;
+}
+.microphone1{
+  width: 200px;
+  height: 200px;
+  border-radius: 50%;
+  background: rgba(67, 207, 124, 0.3);
+}
+.microphone2{
+  width: 160px;
+  height: 160px;
+  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: 120px;
+  height: 120px;
+  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: 18px;
+  box-sizing: border-box;
+  cursor: pointer;
+}
+.microphone3 p{
+  font-size: 12px;
+  color: #fff;
+  line-height: 18px;
+}
+.microphone-text{
+  text-align: center;
+  margin-top: 12px;
+  font-size: 18px;
+  line-height: 26px;
+  font-weight: 700;
+}
 :deep(.imgCont) {
   line-height: 0 !important;
 }
@@ -628,4 +929,18 @@ export default {
 .but-f {
   float: left;
 }
+
+.voice {
+  display: inline-block;
+  position: relative;
+}
+.schedule span {
+  font-size: 12px;
+  position: absolute;
+  top: 0;
+  left: 5px;
+  z-index: 1;
+  transform: scale(.8);
+  color: #fff;
+}
 </style>

package/src/components/editor2/src/microphone.vue

@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 68" width="36" height="68">
+      <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="vol === 0? '#CCCCCC':'#43cf7c'"/>
+    </svg>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "microphone",
+  props: {
+    vol: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {}
+  },
+  methods: {
+    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)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.volume {
+  transition: all 0.2s;
+}
+</style>

package/src/index.js

@@ -79,7 +79,7 @@ function install(app) {
 }
 
 export default {
-    version: '1.32.254',
+    version: '1.32.255',
     install,
     Calendar,
     Message,