askbot-dragon 1.6.24-beta → 1.6.26-beta

package/src/components/FileType.vue

@@ -1,87 +1,87 @@
-<template>
-  <div>
-    <div v-for="(file,_index) in urls" :key="_index" class="fileType">
-        <img  src="https://guoranopen-zjk.oss-cn-zhangjiakou.aliyuncs.com/cdn-common/images/excel.png" v-if="fileType[_index]==='xls'||fileType[_index]==='xlsx'">
-        <img  src="https://guoranopen-zjk.oss-cn-zhangjiakou.aliyuncs.com/cdn-common/images/pdf.png" v-if="fileType[_index]==='pdf'">
-        <img  src="https://guoranopen-zjk.oss-cn-zhangjiakou.aliyuncs.com/cdn-common/images/ppt.png" v-if="fileType[_index]==='ppt'||fileType[_index] === 'pptx'">
-        <img  src="https://guoranopen-zjk.oss-cn-zhangjiakou.aliyuncs.com/cdn-common/images/word.png" v-if="fileType[_index]==='doc'||fileType[_index]==='docx'">
-        <img src="https://guoranopen-zjk.oss-cn-zhangjiakou.aliyuncs.com/cdn-common/images/zip.jpg"  v-if="fileType[_index] === 'zip'||fileType[_index]==='rar'">
-        <img src="https://guoranopen-zjk.oss-cn-zhangjiakou.aliyuncs.com/cdn-common/images/file.png"
-           v-if="fileType[_index] !== 'zip'&& fileType[_index]!=='rar'&&fileType[_index]!=='doc'&&fileType[_index]!=='docx'&&fileType[_index]!=='xls'&&fileType[_index]!=='xlsx'
-                 &&fileType[_index]!=='ppt'&&fileType[_index]!=='pptx'&&fileType[_index]!=='pdf'"
-      >
-      <div style="line-height: 30px;word-wrap:break-word;">
-        <a :href="file.response" target="_blank"  :style="{color:color}">{{file.name}}</a>
-      </div>
-       </div>
-  </div>
-</template>
-
-<script>
-let that
-export default {
-name: "FileType",
-  data(){
-  return{
-    fileType:[]
-  }
-  },
-  props:{
-    urls:Array,
-    color:String
-  },
-  methods:{
-    typeClick(){
-      for (let i=0;i<this.urls.length;i++)
-      {
-        let type=this.urls[i].name
-        let nameType=type.split('.')
-        let suffix=nameType[nameType.length - 1]
-    /*    let fileType=['pdf','ppt','doc','docx','xls','zip','txt','xlsx','pptx']*/
-        this.fileType[i]=suffix
-
-      }
-    },
-    matchType(){
-
-    /*  let result='';
-      let fileType=['pdf','ppt','doc','docx','xls','zip']
-      result=fileType.some(function (){
-
-      })
-      console.log(result)*/
-    }
-  },
-  beforeCreate() {
-  that=this
-  },
-  beforeMount() {
-    that.typeClick()
-  },
-  mounted() {
-
-  }
-}
-</script>
-
-<style  lang="less">
-.fileType{
-  display: flex;
-  align-items: center;
-  img{
-    width: 25px;
-    height: 25px;
-    margin-right: 10px;
-    align-items: center;
-    text-align: center;
-  }
-  a{
-    align-items: center;
-    color: black;
-  }
-  .el-link--inner{
-    display: flex!important;
-    align-items: center!important;
-  }
-}
+<template>
+  <div>
+    <div v-for="(file,_index) in urls" :key="_index" class="fileType">
+        <img  src="https://guoranopen-zjk.oss-cn-zhangjiakou.aliyuncs.com/cdn-common/images/excel.png" v-if="fileType[_index]==='xls'||fileType[_index]==='xlsx'">
+        <img  src="https://guoranopen-zjk.oss-cn-zhangjiakou.aliyuncs.com/cdn-common/images/pdf.png" v-if="fileType[_index]==='pdf'">
+        <img  src="https://guoranopen-zjk.oss-cn-zhangjiakou.aliyuncs.com/cdn-common/images/ppt.png" v-if="fileType[_index]==='ppt'||fileType[_index] === 'pptx'">
+        <img  src="https://guoranopen-zjk.oss-cn-zhangjiakou.aliyuncs.com/cdn-common/images/word.png" v-if="fileType[_index]==='doc'||fileType[_index]==='docx'">
+        <img src="https://guoranopen-zjk.oss-cn-zhangjiakou.aliyuncs.com/cdn-common/images/zip.jpg"  v-if="fileType[_index] === 'zip'||fileType[_index]==='rar'">
+        <img src="https://guoranopen-zjk.oss-cn-zhangjiakou.aliyuncs.com/cdn-common/images/file.png"
+           v-if="fileType[_index] !== 'zip'&& fileType[_index]!=='rar'&&fileType[_index]!=='doc'&&fileType[_index]!=='docx'&&fileType[_index]!=='xls'&&fileType[_index]!=='xlsx'
+                 &&fileType[_index]!=='ppt'&&fileType[_index]!=='pptx'&&fileType[_index]!=='pdf'"
+      >
+      <div style="line-height: 30px;word-wrap:break-word;">
+        <a :href="file.response" target="_blank"  :style="{color:color}">{{file.name}}</a>
+      </div>
+       </div>
+  </div>
+</template>
+
+<script>
+let that
+export default {
+name: "FileType",
+  data(){
+  return{
+    fileType:[]
+  }
+  },
+  props:{
+    urls:Array,
+    color:String
+  },
+  methods:{
+    typeClick(){
+      for (let i=0;i<this.urls.length;i++)
+      {
+        let type=this.urls[i].name
+        let nameType=type.split('.')
+        let suffix=nameType[nameType.length - 1]
+    /*    let fileType=['pdf','ppt','doc','docx','xls','zip','txt','xlsx','pptx']*/
+        this.fileType[i]=suffix
+
+      }
+    },
+    matchType(){
+
+    /*  let result='';
+      let fileType=['pdf','ppt','doc','docx','xls','zip']
+      result=fileType.some(function (){
+
+      })
+      console.log(result)*/
+    }
+  },
+  beforeCreate() {
+  that=this
+  },
+  beforeMount() {
+    that.typeClick()
+  },
+  mounted() {
+
+  }
+}
+</script>
+
+<style  lang="less">
+.fileType{
+  display: flex;
+  align-items: center;
+  img{
+    width: 25px;
+    height: 25px;
+    margin-right: 10px;
+    align-items: center;
+    text-align: center;
+  }
+  a{
+    align-items: center;
+    color: black;
+  }
+  .el-link--inner{
+    display: flex!important;
+    align-items: center!important;
+  }
+}
 </style>

package/src/components/Message.vue

@@ -1,27 +1,27 @@
-<!-- 消息记录容器 -->
-<template>
-    <div class="conversation-container">
-
-        <div :class="message.source">
-
-
-        </div>
-
-    </div>
-</template>
-
-<script>
-    import TextMessage from "./message/TextMessage";
-
-    export default {
-        name: 'Message',
-        props: {
-            message: Object
-        }
-    }
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-
-</style>
+<!-- 消息记录容器 -->
+<template>
+    <div class="conversation-container">
+
+        <div :class="message.source">
+
+
+        </div>
+
+    </div>
+</template>
+
+<script>
+    import TextMessage from "./message/TextMessage";
+
+    export default {
+        name: 'Message',
+        props: {
+            message: Object
+        }
+    }
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+
+</style>

package/src/components/MyEditor.vue

@@ -0,0 +1,345 @@
+<template>
+    <div class="my_editor">
+        <div class="editor_head" v-if="havToolbar">
+            <button class="button" @click="handleUpdate">
+                <svg
+                    t="1703581982515"
+                    class="icon"
+                    viewBox="0 0 1024 1024"
+                    version="1.1"
+                    xmlns="http://www.w3.org/2000/svg"
+                    p-id="74840"
+                    width="200"
+                    height="200"
+                >
+                    <path
+                        d="M566.839921 866.857572V983.050833c0 22.522042-7.677969 33.271198-29.688146 37.877979-18.427125 4.094917-37.366115 3.583052-55.281375-2.047458-17.403396-5.63051-24.057636-15.867802-24.057636-33.271198v-410.003534c0-7.166104-1.535594-9.213563-9.213562-9.213562-80.36274 0.511865-330.152658 0-410.515399 0-19.450854 0-29.688146-7.166104-34.294927-26.105094-5.118646-19.450854-5.118646-39.925438 0.511865-58.864427 5.118646-16.891531 15.355938-23.545771 32.759333-23.545771h412.562857c7.166104 0 8.189833-1.535594 8.189833-8.189834V41.219994c0-25.081365 7.166104-34.806792 32.247469-38.901708 18.93899-3.583052 38.389844-3.583052 56.305105 4.094917 13.820344 5.63051 20.474583 15.867802 20.474583 30.711875v412.562856c0 6.65424 1.535594 8.189833 8.189833 8.189834h406.932346c23.545771 0 33.783063 7.677969 38.901709 30.711875 4.094917 18.427125 4.094917 37.366115-2.047458 55.281375-5.118646 16.379667-15.355938 23.033906-32.247469 23.033907h-410.515398c-7.166104 0-10.237292 1.023729-9.725428 9.725427 0.511865 40.437302 0.511865 249.789918 0.511865 290.22722z"
+                        p-id="74841"
+                    />
+                </svg>
+                上传图片或附件
+            </button>
+        </div>
+        <div
+            class="editor_content"
+            id="my_editor_content"
+            v-html="text"
+            contenteditable
+            ref="editorContent"
+            @focus="ischecked = true"
+            @blur="blurFn"
+            @input="changeInput"
+            :data-placeholder="placeholder"
+        ></div>
+    </div>
+</template>
+
+<script>
+import { v4 as uuidv4 } from "uuid";
+import { multipartUpload, ossFileUrl } from "./utils/AliyunIssUtil";
+
+export default {
+    props: ["value", "placeholder", "havToolbar"],
+    data () {
+        return {
+            ossConfig: {
+                region: "oss-cn-zhangjiakou",
+                //云账号AccessKey有所有API访问权限，建议遵循阿里云安全最佳实践，创建并使用STS方式来进行API访问
+                accessKeyId: "LTAI4G3QtdEdwkEbihBngAsK",
+                accessKeySecret: "OwgdVfc5PeCkIgqIdug660xmiSPchn",
+                // stsToken: '<Your securityToken(STS)>',
+                bucket: "guoranopen-zjk",
+            },
+            ischecked: false,
+            text: ''
+        }
+    },
+    watch: {
+        value () {
+            // 解决光标跳动BUG
+            if (!this.ischecked) {
+                this.text = this.value
+            }
+        }
+    },
+    methods: {
+        blurFn (e) {
+            this.ischecked = false
+            this.text = this.value
+            e.view.blur()
+        },
+        changeInput (e) {
+            this.$emit("input", e.target.innerHTML)
+        },
+        handleUpdate () {
+            let inputObj = document.createElement('input')
+            inputObj.setAttribute('id', '_ef');
+            inputObj.setAttribute('type', 'file');
+            inputObj.setAttribute('accept', '*')
+            inputObj.setAttribute('multiple', true)
+            inputObj.setAttribute("style", 'visibility:hidden');
+            document.body.appendChild(inputObj);
+            inputObj.click();
+            inputObj.onchange = () => {
+                // 循环上传文件
+                let files = inputObj.files;
+                for (let index = 0; index < files.length; index++) {
+                    const file = files[index];
+                    let uid = uuidv4()
+                    // let command = this.editor.commands.get("insertAskComponent");
+                    // const listeners = this.editor.config.get('askPluginListener');
+                    // let beforeButtonInsert = findListener(listeners, "UPLOAD");
+                    if (file.type.includes('image')) {
+                        // if (this.editor.uploadImg) {
+                        //     this.editor.uploadImg.push(uid)
+                        // } else {
+                        //     this.editor.uploadImg = []
+                        //     this.editor.uploadImg.push(uid)
+                        // }
+                        this.imgUploadCallback(file, uid, index)
+                    } else {
+                        this.fileUploadCallback(file, uid)
+                    }
+                }
+            }
+        },
+        appenNode (type, uid, value) {
+            let node = document.createElement(type)
+            node.setAttribute("uid", uid)
+            if (type == 'img') {
+                node.setAttribute("src", value)
+                node.setAttribute("class", 'image')
+                setTimeout(() => {
+                    this.appenNode('div', '', '')
+                })
+            }
+            if (type == 'div' && uid) {
+                node.innerText = value
+                node.setAttribute("class", 'loading')
+                setTimeout(() => {
+                    this.appenNode('div', '', '')
+                })
+            }
+            if (type == 'div' && !uid) {
+                node.setAttribute("class", 'wrap')
+            }
+            this.$refs.editorContent.appendChild(node)
+        },
+        deleteNode (uid) {
+            console.log(uid);
+            try {
+                let node = document.querySelector("[uid=" + uid + ']')
+                if (node) {
+                    this.$refs.editorContent.removeChild(node)
+                }
+            } catch {
+                console.error("未找到该节点");
+            }
+        },
+        imgUploadCallback (file, uid, index) {
+            console.log(file, uid, index);
+            this.appenNode("div", "div" + index + uid, file.name + "正在上传，请稍后...")
+            this.upload(file).then(res => {
+                this.appenNode('img', "img" + index + uid, res.default)
+                this.deleteNode("div" + index + uid)
+            })
+        },
+        upload (file) {
+            return new Promise((resolve) => {
+                this.uploadFile(file, resolve)
+            })
+        },
+        uploadFile (file, resolve) {
+            let imgInfo = {
+                url: '',
+            }
+            let res = multipartUpload(
+                this.ossConfig,
+                file,
+                null,
+                imgInfo
+            );
+            res.then(resp => {
+                imgInfo.url = ossFileUrl(this.ossConfig, resp.name)
+                resolve({
+                    name: resp.name,
+                    default: imgInfo.url
+                })
+            })
+        },
+        fileUploadCallback (file, uid) {
+            this.$emit("fileUploadCallback", {
+                param: {
+                    uid: uid,
+                    type: 'pending',
+                    name: file.name
+                }
+            })
+            this.upload(file).then(res => {
+                this.$emit("fileUploadCallback", {
+                    param: {
+                        uid: uid,
+                        name: file.name,
+                        type: 'success',
+                        url: res.default
+                    }
+                })
+            })
+        },
+
+    },
+    mounted () {
+        this.$nextTick(() => {
+            let myEditorContent = this.$refs.editorContent
+            console.log(myEditorContent, 'myEditorContent');
+            myEditorContent.addEventListener("paste", (e) => {
+                let { files } = e.clipboardData
+                console.log(files, e.clipboardData, 'filesfilesfilesfiles');
+                if (files.length > 0) {
+                    for (let index = 0; index < files.length; index++) {
+                        let uid = uuidv4()
+                        if (files[index].type.indexOf('image') != -1) {
+                            this.imgUploadCallback(files[index], uid, index)
+                            e.preventDefault();
+                        } else {
+                            this.fileUploadCallback(files[index], uid)
+                            e.preventDefault();
+                        }
+                    }
+                }
+            })
+            myEditorContent.addEventListener("dragenter", function () {
+            });
+            myEditorContent.addEventListener("dragover", function (e) {
+                e.preventDefault();
+            });
+            myEditorContent.addEventListener("drop", (e) => {
+                e.preventDefault();
+                let files = e.dataTransfer.files; // 这个就相当于文件上传组件
+                if (files.length > 0) {
+                    for (let index = 0; index < files.length; index++) {
+                        let uid = uuidv4()
+                        if (files[index].type.indexOf('image') != -1) {
+                            this.imgUploadCallback(files[index], uid, index)
+                            e.preventDefault();
+                        } else {
+                            this.fileUploadCallback(files[index], uid)
+                            e.preventDefault();
+                        }
+                    }
+                }
+            }, false);
+        })
+
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.my_editor {
+    width: 100%;
+    border: 1px solid #e0e6f7;
+    border-radius: 9px !important;
+    background: #ffffff;
+    /deep/.editor_content {
+        border-bottom-left-radius: 9px !important;
+        border-bottom-right-radius: 9px !important;
+        padding: 10px;
+        box-sizing: border-box;
+        min-height: 150px !important;
+        font-size: 14px !important;
+        outline: none;
+        div {
+            margin-bottom: 8px;
+            white-space: pre-wrap;
+        }
+        .image {
+            height: 140px;
+            object-fit: contain;
+        }
+        // .image{
+        //     outline: 3px solid #366aff;
+        // }
+        .loading {
+            background: rgba(0, 89, 255, 0.2);
+            display: inline-block;
+            padding: 2px 5px;
+            border-radius: 3px;
+            padding-left: 20px;
+            position: relative;
+            font-size: 12px;
+            -webkit-user-modify: read-only;
+            -moz-user-modify: read-only;
+        }
+        .loading::after {
+            content: '';
+            background-image: url(../assets/image/building.png);
+            background-size: 100%;
+            width: 15px;
+            height: 15px;
+            position: absolute;
+            top: 3px;
+            left: 2px;
+            color: #366aff;
+            -webkit-animation: rotate 1.5s linear infinite;
+            animation: rotate 1.5s linear infinite;
+        }
+        .wrap {
+            height: 1px;
+            width: 100%;
+        }
+    }
+    .editor_content:focus {
+        box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.1) inset, 0, 0;
+    }
+    .editor_content:empty::before {
+        content: attr(data-placeholder);
+        color: #b3b3b3;
+        font-size: 14px;
+    }
+    .editor_head {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        height: 38px;
+        padding: 0 10px;
+        padding-left: 3px;
+        box-sizing: border-box;
+        color: #366aff;
+        font-size: 14px;
+        border-bottom: 1px solid #e0e6f7;
+
+        .button {
+            padding: 5px 8px;
+            background: #ffffff;
+            border: none;
+            border-radius: 2px;
+            svg {
+                fill: #366aff;
+                width: 12px !important;
+                height: 12px !important;
+            }
+        }
+        .button:focus {
+            // box-shadow: var(--ck-focus-outer-shadow),0 0;
+            outline: none;
+            background: #f0f0f0;
+            transition: box-shadow 0.2s ease-in-out, border 0.2s ease-in-ou;
+        }
+        .button:active {
+            border: 1px solid #366aff;
+        }
+    }
+}
+@keyframes rotate {
+    0% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+
+    100% {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
+</style>