askbot-dragon 1.7.34-beta → 1.7.35-beta

package/src/components/loadingProcess.vue

@@ -1,165 +1,165 @@
-<template>
-  <div id="loading-process">
-    <div class="bg-color"></div>
-    <ul class="display-container" >
-      <li class="note-display" :data-note="dataNodes">
-        <div class="circle">
-          <svg width="30" height="30" class="circle__svg" viewBox="0 0 90 90">
-            <circle cx="41" cy="41" r="38" class="circle__progress circle__progress--path"></circle>
-            <circle cx="41" cy="41" r="38" class="circle__progress circle__progress--fill"></circle>
-          </svg>
-        </div>
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script>
-  const  transitionDuration = 1000
-  export default {
-    name: "loadingProcess",
-    data(){
-      return{
-        timer:null,
-        dataNodes:0
-      }
-    },
-    props:['dataNote','finished'],
-    methods:{
-      strokeTransition(display, note) {
-        let progress = display.querySelector('.circle__progress--fill');
-        let radius = progress.r.baseVal.value;
-        let circumference = 2 * Math.PI * radius;
-        let offset = circumference * (10 - note) / 10;
-        progress.style.setProperty('--initialStroke', circumference);
-        progress.style.setProperty('--transitionDuration', `${transitionDuration}ms`);
-
-        setTimeout(() => progress.style.strokeDashoffset = offset, 100);
-      },
-      increaseNumber(display, number, className) {
-        let element = display.querySelector(`.percent__${className}`),
-            decPoint = className === 'int' ? '' : '',
-            interval = transitionDuration / number,
-            counter = 0;
-        console.debug('element',element,counter,decPoint)
-        let increaseInterval = setInterval(() => {
-          if (counter === number) { window.clearInterval(increaseInterval); }
-/*
-          element.textContent = counter + decPoint;*/
-          counter++;
-        }, interval);
-      }
-    },
-    mounted() {
-      this.timer = setInterval(()=>{
-        const displays = document.querySelectorAll('.note-display');
-        displays.forEach(display => {
-          let note = parseFloat(display.dataset.note);
-          let [int, dec] = display.dataset.note.split('.');
-          [int, dec] = [Number(int), Number(dec)];
-          this.strokeTransition(display, note);
-          this.increaseNumber(display, this.dataNote, 'int');
-          /* this.increaseNumber(display, dec, 'dec');*/
-        })
-      },1000)
-    },
-    watch:{
-      dataNote:{
-        handler(val){
-          this.dataNodes = val
-          console.debug('this.dataNodes',val,this.dataNodes)
-        },
-        immediate:true,
-        deep:true
-      },
-      finished:{
-        handler(val){
-          if (val){
-            setTimeout(()=>{
-              clearInterval(this.timer)
-            },1000)
-          }
-        },
-        immediate:true
-      }
-    }
-  }
-</script>
-
-<style scoped lang="less">
-/*@import url('https://fonts.googleapis.com/css?family=Nixie+One|Raleway:200');*/
-#loading-process{
-  height: 100px;
-  width: 100px;
-  .bg-color{
-    background-color:#000000 ;
-    opacity: 0.4;
-    width: 100%;
-    height: 100%;
-  }
-  .display-container{
-    position: absolute;
-    top: calc(50% - 15px);
-    left: 10px;
-  }
-}
-* {
-  padding: 0;
-  margin: 0;
-  box-sizing: border-box;
-}
-/*
-body {
-  height: 100vh;
-  color: #fff;
-  display: flex;
-  background: #3E423A;
-  font-family: 'Nixie One', cursive;
-}
-*/
-
-.display-container {
-  margin: auto;
-  display: flex;
-  .note-display {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    margin: 0 25px;
-  }
-}
-.circle__progress {
-  fill: none;
-  stroke-width: 5;
-  stroke-opacity: 0.3;
-  stroke-linecap: round;
-}
-.note-display:nth-child(1) .circle__progress--fill{
-  stroke: #FFFFFF!important;
-  stroke-opacity: 1;
-}
-.circle__progress--path{
-    stroke: #EFEFEF!important;
-  stroke-opacity: 0.5;
-}
-.note-display:nth-child(1) .circle__progress { stroke: #AAFF00; }
-.note-display:nth-child(2) .circle__progress { stroke: #FF00AA; }
-.note-display:nth-child(3) .circle__progress { stroke: #AA00FF; }
-.note-display:nth-child(4) .circle__progress { stroke: #00AAFF; }
-.circle {
-  position: relative;
-}
-
-.percent {
-  width: 100%;
-  top: 50%;
-  left: 50%;
-  position: absolute;
-  font-weight: bold;
-  text-align: center;
-  /* line-height: 28px;*/
-  transform: translate(-50%, -50%);
-  font-size: 12px;
-}
-
+<template>
+  <div id="loading-process">
+    <div class="bg-color"></div>
+    <ul class="display-container" >
+      <li class="note-display" :data-note="dataNodes">
+        <div class="circle">
+          <svg width="30" height="30" class="circle__svg" viewBox="0 0 90 90">
+            <circle cx="41" cy="41" r="38" class="circle__progress circle__progress--path"></circle>
+            <circle cx="41" cy="41" r="38" class="circle__progress circle__progress--fill"></circle>
+          </svg>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+  const  transitionDuration = 1000
+  export default {
+    name: "loadingProcess",
+    data(){
+      return{
+        timer:null,
+        dataNodes:0
+      }
+    },
+    props:['dataNote','finished'],
+    methods:{
+      strokeTransition(display, note) {
+        let progress = display.querySelector('.circle__progress--fill');
+        let radius = progress.r.baseVal.value;
+        let circumference = 2 * Math.PI * radius;
+        let offset = circumference * (10 - note) / 10;
+        progress.style.setProperty('--initialStroke', circumference);
+        progress.style.setProperty('--transitionDuration', `${transitionDuration}ms`);
+
+        setTimeout(() => progress.style.strokeDashoffset = offset, 100);
+      },
+      increaseNumber(display, number, className) {
+        let element = display.querySelector(`.percent__${className}`),
+            decPoint = className === 'int' ? '' : '',
+            interval = transitionDuration / number,
+            counter = 0;
+        console.debug('element',element,counter,decPoint)
+        let increaseInterval = setInterval(() => {
+          if (counter === number) { window.clearInterval(increaseInterval); }
+/*
+          element.textContent = counter + decPoint;*/
+          counter++;
+        }, interval);
+      }
+    },
+    mounted() {
+      this.timer = setInterval(()=>{
+        const displays = document.querySelectorAll('.note-display');
+        displays.forEach(display => {
+          let note = parseFloat(display.dataset.note);
+          let [int, dec] = display.dataset.note.split('.');
+          [int, dec] = [Number(int), Number(dec)];
+          this.strokeTransition(display, note);
+          this.increaseNumber(display, this.dataNote, 'int');
+          /* this.increaseNumber(display, dec, 'dec');*/
+        })
+      },1000)
+    },
+    watch:{
+      dataNote:{
+        handler(val){
+          this.dataNodes = val
+          console.debug('this.dataNodes',val,this.dataNodes)
+        },
+        immediate:true,
+        deep:true
+      },
+      finished:{
+        handler(val){
+          if (val){
+            setTimeout(()=>{
+              clearInterval(this.timer)
+            },1000)
+          }
+        },
+        immediate:true
+      }
+    }
+  }
+</script>
+
+<style scoped lang="less">
+/*@import url('https://fonts.googleapis.com/css?family=Nixie+One|Raleway:200');*/
+#loading-process{
+  height: 100px;
+  width: 100px;
+  .bg-color{
+    background-color:#000000 ;
+    opacity: 0.4;
+    width: 100%;
+    height: 100%;
+  }
+  .display-container{
+    position: absolute;
+    top: calc(50% - 15px);
+    left: 10px;
+  }
+}
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+/*
+body {
+  height: 100vh;
+  color: #fff;
+  display: flex;
+  background: #3E423A;
+  font-family: 'Nixie One', cursive;
+}
+*/
+
+.display-container {
+  margin: auto;
+  display: flex;
+  .note-display {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 0 25px;
+  }
+}
+.circle__progress {
+  fill: none;
+  stroke-width: 5;
+  stroke-opacity: 0.3;
+  stroke-linecap: round;
+}
+.note-display:nth-child(1) .circle__progress--fill{
+  stroke: #FFFFFF!important;
+  stroke-opacity: 1;
+}
+.circle__progress--path{
+    stroke: #EFEFEF!important;
+  stroke-opacity: 0.5;
+}
+.note-display:nth-child(1) .circle__progress { stroke: #AAFF00; }
+.note-display:nth-child(2) .circle__progress { stroke: #FF00AA; }
+.note-display:nth-child(3) .circle__progress { stroke: #AA00FF; }
+.note-display:nth-child(4) .circle__progress { stroke: #00AAFF; }
+.circle {
+  position: relative;
+}
+
+.percent {
+  width: 100%;
+  top: 50%;
+  left: 50%;
+  position: absolute;
+  font-weight: bold;
+  text-align: center;
+  /* line-height: 28px;*/
+  transform: translate(-50%, -50%);
+  font-size: 12px;
+}
+
 </style>

package/src/components/markDownText.vue

@@ -0,0 +1,198 @@
+<template>
+    <div @click="lookImage">
+        <vue-markdown class="mark_down" :source="typedContent" :ref="'markdown' + msgId">
+        </vue-markdown>
+        <div v-if="showPreview">
+            <img-view :url-list="imgList" @closeViewer="closeViewer"></img-view>
+        </div>
+    </div>
+</template>
+
+<script>
+import VueMarkdown from "vue-markdown";
+import ImgView from "./imgView.vue";
+
+export default {
+    name: "markDownText",
+    data() {
+        return {
+            typedContent: "",
+            typingSpeed: 15,
+            showPreview: false,
+            imgList: [],
+        };
+    },
+    props: {
+        chainValues: {
+            type: String,
+            default: "",
+        },
+        msgId: {
+            type: String,
+            default: "",
+        },
+        isHistory: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    components: {
+        ImgView,
+        VueMarkdown,
+    },
+    mounted() {
+        this.$nextTick(() => {
+            // let ref = 'markdown' + this.msgId
+            // const el = this.$refs[ref].$el;
+            // if (this.isHistory){
+            //   el.innerHTML = this.chainValues;
+            // } else {
+            //   new Typed(el, {
+            //     strings: [this.chainValues],
+            //     typeSpeed: 30,
+            //     showCursor: false
+            //   })
+            // }
+            this.typedContent = this.chainValues;
+            // if (this.isHistory) {
+            //     this.typedContent = this.chainValues;
+            // } else {
+            //     this.startTypingEffect();
+            // }
+        });
+    },
+    methods: {
+        startTypingEffect() {
+            let i = 0;
+            const interval = setInterval(() => {
+                if (i < this.chainValues.length) {
+                    this.typedContent += this.chainValues.charAt(i);
+                    i++;
+                } else {
+                    clearInterval(interval);
+                }
+            }, this.typingSpeed);
+        },
+        lookImage(e) {
+            let previewImageUrl = "";
+            console.log("e.target", e.target);
+            if (e.target.localName == "img") {
+                previewImageUrl = e.target.currentSrc;
+                this.showPreview = true;
+            }
+            let richtext = JSON.parse(JSON.stringify(this.typedContent));
+            this.imgList = [];
+            richtext.replace(
+                /<img [^>]*src=['"]([^'"]+)[^>]*>/g,
+                (match, capture) => {
+                    this.imgList.push(capture);
+                }
+            );
+            /*当前点击的图片作为第一个图片*/
+            let index = this.imgList.indexOf(previewImageUrl);
+            this.imgList.splice(index, 1);
+            this.imgList.unshift(previewImageUrl);
+        },
+        closeViewer() {
+            this.showPreview = false;
+        },
+    },
+};
+</script>
+
+<style scoped lang="less">
+.mark_down {
+    line-height: 24px;
+    overflow-x: auto;
+    /deep/p {
+        margin-bottom: 14px;
+        font-size: 16px;
+    }
+
+    /deep/p:only-child {
+        margin: 0 !important;
+    }
+
+    /deep/p:last-child {
+        margin-bottom: 0 !important;
+    }
+
+    /deep/ul {
+        margin-bottom: 16px;
+        list-style: disc;
+        padding-left: 16px;
+
+        li {
+            margin: 7px 0 !important;
+            font-size: 16px;
+            // padding-left: 40px;
+
+        }
+    }
+
+    /deep/ ol {
+        list-style: auto;
+        padding-left: 16px;
+
+        li {
+            margin: 7px 0 !important;
+            font-size: 16px;
+            // padding-left: 40px;
+        }
+    }
+
+    /deep/img {
+        max-width: 400px;
+    }
+
+    /deep/h3,
+    /deep/h2,
+    /deep/h1,
+    /deep/h4,
+    /deep/h5,
+    /deep/h6 {
+        color: #000000;
+        font-weight: 500;
+        line-height: 26px;
+    }
+
+    /deep/h3 {
+        font-size: 20px;
+    }
+
+    /deep/h2 {
+        font-size: 22px;
+    }
+
+    /deep/h1 {
+        font-size: 24px;
+    }
+
+    /deep/h3 {
+        font-size: 20px;
+    }
+
+    /deep/ table {
+        border-spacing: 0;
+        // border-radius: 8px;
+        // overflow: hidden;
+        border: solid 1px #e0e6f7;
+        min-width: 800px;
+        overflow-x: auto;
+    }
+    /deep/ th {
+        background: #EEF1FF;
+        border: solid 1px #e0e6f7;
+        padding: 10px;
+        height: 60px;
+        min-width: 100px;
+    }
+
+    /deep/ td {
+        border: solid 1px #e0e6f7;
+        padding: 10px;
+        height: 48px;
+        min-width: 100px;
+    }
+}
+</style>