From 4544cb7d951dc6d0edc11615863213977c5217f1 Mon Sep 17 00:00:00 2001
From: yujialong <479214531@qq.com>
Date: Wed, 30 Aug 2023 10:10:54 +0800
Subject: [PATCH] fix

---
 package-lock.json                |  31 +-
 package.json                     |   2 +-
 src/components/quill/index.vue   | 471 ++++++++++++++++++-------------
 src/pages/product/list/index.vue |  13 +-
 src/pages/product/show/index.vue |  66 ++---
 src/setting.js                   |   2 +-
 6 files changed, 320 insertions(+), 265 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 42b9605..b703907 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3435,6 +3435,11 @@
       "integrity": "sha512-MsCAG1z9lPdoO/IUMLSBWBSVxVtJ1395VGIQ+Fc2gNdkQ1hNDnQdw3YhA71WJCBW1vdwA0cAnk/DnW6bqoEUYg==",
       "dev": true
     },
+    "cssfilter": {
+      "version": "0.0.10",
+      "resolved": "https://registry.npmjs.org/cssfilter/-/cssfilter-0.0.10.tgz",
+      "integrity": "sha512-FAaLDaplstoRsDR8XGYH51znUN0UY7nMc6Z9/fvE8EXGwvJE9hu7W2vHwx1+bd6gCYnln9nLbzxFTrcO9YQDZw=="
+    },
     "cssnano": {
       "version": "4.1.10",
       "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-4.1.10.tgz",
@@ -6592,12 +6597,8 @@
     "highlight.js": {
       "version": "9.16.2",
       "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.16.2.tgz",
-      "integrity": "sha512-feMUrVLZvjy0oC7FVJQcSQRqbBq9kwqnYE4+Kj9ZjbHh3g+BisiPgF49NyQbVLNdrL/qqZr3Ca9yOKwgn2i/tw=="
-    },
-    "highlight.js-async-webpack": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/highlight.js-async-webpack/-/highlight.js-async-webpack-1.0.4.tgz",
-      "integrity": "sha1-wGtnv5nwSQRdYrdW5YVbCRLsYWw="
+      "integrity": "sha512-feMUrVLZvjy0oC7FVJQcSQRqbBq9kwqnYE4+Kj9ZjbHh3g+BisiPgF49NyQbVLNdrL/qqZr3Ca9yOKwgn2i/tw==",
+      "dev": true
     },
     "hmac-drbg": {
       "version": "1.0.1",
@@ -7993,12 +7994,11 @@
       }
     },
     "mavon-editor": {
-      "version": "2.7.7",
-      "resolved": "https://registry.npmjs.org/mavon-editor/-/mavon-editor-2.7.7.tgz",
-      "integrity": "sha512-lXnYe+dztKepbv8bi2nedRqG/AwyUDF8gmkv9lHD3fpVJ1+pzAS6YILRIryKCvO9qPIOPEThHsda2DxtlzRsZA==",
+      "version": "2.10.4",
+      "resolved": "https://registry.npmjs.org/mavon-editor/-/mavon-editor-2.10.4.tgz",
+      "integrity": "sha512-CFsBLkgt/KZBDg+SJYe2fyYv4zClY149PiwpH0rDAiiP4ae1XNs0GC8nBsoTeipsHcebDLN1QMkt3bUsnMDjQw==",
       "requires": {
-        "highlight.js": "^9.11.0",
-        "highlight.js-async-webpack": "^1.0.4"
+        "xss": "^1.0.6"
       }
     },
     "md5.js": {
@@ -13304,6 +13304,15 @@
         "async-limiter": "~1.0.0"
       }
     },
+    "xss": {
+      "version": "1.0.14",
+      "resolved": "https://registry.npmjs.org/xss/-/xss-1.0.14.tgz",
+      "integrity": "sha512-og7TEJhXvn1a7kzZGQ7ETjdQVS2UfZyTlsEdDOqvQF7GoxNfY+0YLCzBy1kPdsDDx4QuNAonQPddpsn6Xl/7sw==",
+      "requires": {
+        "commander": "^2.20.3",
+        "cssfilter": "0.0.10"
+      }
+    },
     "xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
diff --git a/package.json b/package.json
index 8606595..836d61f 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,7 @@
     "element-theme": "^2.0.1",
     "element-ui": "^2.13.0",
     "js-cookie": "^2.2.1",
-    "mavon-editor": "^2.6.17",
+    "mavon-editor": "^2.10.4",
     "postcss-px2rem": "^0.3.0",
     "px2rem-loader": "^0.1.9",
     "sortablejs": "^1.14.0",
diff --git a/src/components/quill/index.vue b/src/components/quill/index.vue
index db18e66..160d334 100644
--- a/src/components/quill/index.vue
+++ b/src/components/quill/index.vue
@@ -1,17 +1,38 @@
 <template>
-    <div class="quill" ref="quill" :class="classes">
-        <div ref="editor" :style="styles" v-loading="loading"></div>
+  <div>
+    <el-radio-group v-if="!readonly"
+                    class="type-radio"
+                    v-model="type"
+                    @change="typeChange">
+      <el-radio :label="0">富文本</el-radio>
+      <el-radio :label="1">markdown</el-radio>
+    </el-radio-group>
+    <div v-show="!type"
+         class="quill"
+         ref="quill"
+         :class="classes">
+      <div ref="editor"
+           :style="styles"
+           v-loading="loading"></div>
 
-        <el-upload
-            :headers="headers"
-            :action="this.api.fileupload"
-            :before-upload="beforeUpload"
-            :on-success="editorUploadSuccess"
-            style="display: none"
-        >
-            <el-button :id="'editorUpload' + index" type="primary">点击上传</el-button>
-        </el-upload>
+      <el-upload :headers="headers"
+                 :action="this.api.fileupload"
+                 :before-upload="beforeUpload"
+                 :on-success="editorUploadSuccess"
+                 style="display: none">
+        <el-button :id="'editorUpload' + index"
+                   type="primary">点击上传</el-button>
+      </el-upload>
     </div>
+    <mavon-editor class="md"
+                  v-model="mdVal"
+                  v-show="type"
+                  ref="md"
+                  :ishljs="true"
+                  :subfield="false"
+                  @change="mdChange"
+                  @imgAdd="imgAdd" />
+  </div>
 </template>
 
 <script>
@@ -22,213 +43,256 @@ import "quill/dist/quill.core.css";
 import "quill/dist/quill.snow.css";
 import "quill/dist/quill.bubble.css";
 import toolbarOptions from "./options";
+import axios from 'axios'
+import { mavonEditor } from 'mavon-editor'
+import 'mavon-editor/dist/css/index.css'
 
 export default {
-    name: "quill",
-    props: {
-        value: {
-            type: String,
-            default: ""
-        },
-        readonly: {
-            type: Boolean,
-            default: false
-        },
-        toTop: {
-            type: Boolean,
-            default: true
-        },
-        border: {
-            type: Boolean,
-            default: false
-        },
-        height: {
-            type: Number
-        },
-        minHeight: {
-            type: Number
-        },
-        /*
-         * 原本的readOnly失效,对比其他项目，发现是quill版本不同导致，
-         * 使用props传入elseRead = 'true'，手动隐藏工具栏
-         */
-        elseRead: {
-            type: String, default: "false"
-        },
-        // 当前富文本的索引。一个页面引入多个富文本的时候会无法获取到对应的实例，所以通过在父级存储实例的方式来保存
-        index: {
-            type: Number,
-            default: 0
-        },
+  name: "quill",
+  components: {
+    mavonEditor
+  },
+  props: {
+    value: {
+      type: String,
+      default: ""
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    toTop: {
+      type: Boolean,
+      default: true
     },
-    data() {
-        const that = this
-        return {
-            headers: {
-                token: util.local.get(Setting.tokenKey)
-            },
-            Quill: null,
-            currentValue: "",
-            options: {
-                theme: "snow",
-                bounds: document.body,
-                debug: "warn",
-                modules: {
-                    toolbar: {
-                        container: toolbarOptions,
-                        handlers: {
-                            "image": function(value) {
-                                if (value) {
-                                    // 调用iview图片上传
-                                    document.querySelector("#editorUpload" + that.index).click();
-                                } else {
-                                    this.Quill.format("image", false);
-                                }
-                            }
-                        }
-                    }
-                },
-                placeholder: "",
-                readOnly: this.readonly
-            },
-            loading: false
-        };
+    border: {
+      type: Boolean,
+      default: false
     },
-    computed: {
-        classes() {
-            return [
-                {
-                    "quill-no-border": !this.border
+    height: {
+      type: Number
+    },
+    minHeight: {
+      type: Number
+    },
+    /*
+     * 原本的readOnly失效,对比其他项目，发现是quill版本不同导致，
+     * 使用props传入elseRead = 'true'，手动隐藏工具栏
+     */
+    elseRead: {
+      type: String, default: "false"
+    },
+    // 当前富文本的索引。一个页面引入多个富文本的时候会无法获取到对应的实例，所以通过在父级存储实例的方式来保存
+    index: {
+      type: Number,
+      default: 0
+    },
+  },
+  data () {
+    const that = this
+    return {
+      headers: {
+        token: util.local.get(Setting.tokenKey)
+      },
+      type: 0,
+      mdVal: '',
+      Quill: null,
+      currentValue: "",
+      options: {
+        theme: "snow",
+        bounds: document.body,
+        debug: "warn",
+        modules: {
+          toolbar: {
+            container: toolbarOptions,
+            handlers: {
+              "image": function (value) {
+                if (value) {
+                  // 调用iview图片上传
+                  document.querySelector("#editorUpload" + that.index).click();
+                } else {
+                  this.Quill.format("image", false);
                 }
-            ];
-        },
-        styles() {
-            let style = {};
-            if (this.minHeight) {
-                style.minHeight = `${this.minHeight}px`;
+              }
             }
-            if (this.height) {
-                style.height = `${this.height}px`;
-            }
-            return style;
+          }
+        },
+        placeholder: "",
+        readOnly: this.readonly
+      },
+      loading: false
+    };
+  },
+  computed: {
+    classes () {
+      return [
+        {
+          "quill-no-border": !this.border
         }
+      ];
+    },
+    styles () {
+      let style = {};
+      if (this.minHeight) {
+        style.minHeight = `${this.minHeight}px`;
+      }
+      if (this.height) {
+        style.height = `${this.height}px`;
+      }
+      return style;
+    }
 
+  },
+  watch: {
+    value: {
+      handler (val) {
+        if (!this.type) {
+          if (val !== this.currentValue) {
+            this.currentValue = val;
+            if (this.Quill) {
+              this.Quill.pasteHTML(this.value);
+            }
+          }
+          if (!this.mdVal) this.mdVal = val
+        }
+      },
+      immediate: true
+    }
+  },
+  created () {
+  },
+  mounted () {
+    this.init();
+    // 处理工具栏隐藏样式
+    if (this.elseRead === "true") {
+      let children = this.$refs.quill.children[0].style;
+      children.padding = "0";
+      children.overflow = "hidden";
+      children.height = "0";
+      children.borderTop = "0";
+    }
+  },
+  beforeDestroy () {
+    // 在组件销毁后销毁实例
+    this.Quill = null;
+  },
+  methods: {
+    // 富文本切换
+    typeChange (val) {
+      if (!this.mdVal) this.mdVal = this.value
     },
-    watch: {
-        value: {
-            handler(val) {
-                if (val !== this.currentValue) {
-                    this.currentValue = val;
-                    if (this.Quill) {
-                        this.Quill.pasteHTML(this.value);
-                    }
-                }
-            },
-            immediate: true
+
+    init () {
+      const editor = this.$refs.editor;
+      // 初始化编辑器
+      this.Quill = new Quill(editor, this.options);
+      const ins = this.Quill
+      // 默认值
+      ins.pasteHTML(this.currentValue);
+      if (this.toTop) {
+        this.$nextTick(() => {
+          window.scrollTo(0, 0)
+        })
+      }
+      // 绑定事件
+      ins.on('text-change', (delta, oldDelta, source) => {
+        const html = this.$refs.editor.children[0].innerHTML;
+        const text = ins.getText();
+        const quill = this.Quill;
+        // 更新内部的值
+        this.currentValue = html;
+        // 发出事件 v-model
+        this.$emit('input', html);
+        // 发出事件
+        this.$emit('on-change', { html, text, quill });
+      });
+      // 将一些 quill 自带的事件传递出去
+      ins.on('text-change', (delta, oldDelta, source) => {
+        this.$emit('on-text-change', delta, oldDelta, source);
+      });
+      ins.on('selection-change', (range, oldRange, source) => {
+        this.$emit('on-selection-change', range, oldRange, source);
+      });
+      ins.on('editor-change', (eventName, ...args) => {
+        this.$emit('on-editor-change', eventName, ...args);
+      });
+      // 监听粘贴事件
+      ins.root.addEventListener('paste', evt => {
+        if (evt.clipboardData && evt.clipboardData.files && evt.clipboardData.files.length) {
+          evt.preventDefault();
+          // 检测是否粘贴的是图片
+          [].forEach.call(evt.clipboardData.files, file => {
+            if (!file.type.match(/^image\/(gif|jpe?g|a?png|bmp)/i)) {
+              return
+            }
+            const param = new FormData()
+            param.append('file', file)
+            // 把图片上传到服务器，不然会直接把base64存到数据库
+            this.$post(this.api.fileupload, param, {
+              headers: { "Content-Type": "multipart/form-data" }
+            }).then(res => {
+              var range = ins.getSelection()
+              if (range) {
+                //  在当前光标位置插入图片
+                ins.insertEmbed(range.index, 'image', res.data.filesResult.fileUrl)
+                //  将光标移动到图片后面
+                ins.setSelection(range.index + 1)
+              }
+            }).catch(res => { })
+          });
         }
+      }, false)
     },
-    created() {
+    beforeUpload (file) {
+      this.loading = true;
     },
-    mounted() {
-        this.init();
-        // 处理工具栏隐藏样式
-        if (this.elseRead === "true") {
-            let children = this.$refs.quill.children[0].style;
-            children.padding = "0";
-            children.overflow = "hidden";
-            children.height = "0";
-            children.borderTop = "0";
-        }
+    // quill图片上传
+    editorUploadSuccess (res) {
+      // 获取富文本组件实例
+      let quill = this.Quill;
+      // 如果上传成功
+      if (res.data.filesResult.fileUrl) {
+        // 获取光标所在位置
+        let length = quill.getSelection().index;
+        // 插入图片，res为服务器返回的图片链接地址
+        quill.insertEmbed(length, "image", res.data.filesResult.fileUrl);
+        // 调整光标到最后
+        quill.setSelection(length + 1);
+      } else {
+        util.successMsg("图片插入失败");
+      }
+      this.loading = false;
     },
-    beforeDestroy() {
-        // 在组件销毁后销毁实例
-        this.Quill = null;
+
+    // 类型切换回调
+    mdChange (val) {
+      this.$emit('input', val)
     },
-    methods: {
-        init () {
-            const editor = this.$refs.editor;
-            // 初始化编辑器
-            this.Quill = new Quill(editor, this.options);
-            const ins = this.Quill
-            // 默认值
-            ins.pasteHTML(this.currentValue);
-            if(this.toTop){
-                this.$nextTick(() => {
-                    window.scrollTo(0,0)
-                })
-            }
-            // 绑定事件
-            ins.on('text-change', (delta, oldDelta, source) => {
-                const html = this.$refs.editor.children[0].innerHTML;
-                const text = ins.getText();
-                const quill = this.Quill;
-                // 更新内部的值
-                this.currentValue = html;
-                // 发出事件 v-model
-                this.$emit('input', html);
-                // 发出事件
-                this.$emit('on-change', { html, text, quill });
-            });
-            // 将一些 quill 自带的事件传递出去
-            ins.on('text-change', (delta, oldDelta, source) => {
-                this.$emit('on-text-change', delta, oldDelta, source);
-            });
-            ins.on('selection-change', (range, oldRange, source) => {
-                this.$emit('on-selection-change', range, oldRange, source);
-            });
-            ins.on('editor-change', (eventName, ...args) => {
-                this.$emit('on-editor-change', eventName, ...args);
-            });
-            // 监听粘贴事件
-            ins.root.addEventListener('paste', evt => {
-                if (evt.clipboardData && evt.clipboardData.files && evt.clipboardData.files.length) {
-                    evt.preventDefault();
-                    // 检测是否粘贴的是图片
-                    [].forEach.call(evt.clipboardData.files, file => {
-                        if (!file.type.match(/^image\/(gif|jpe?g|a?png|bmp)/i)) {
-                            return
-                        }
-                        const param = new FormData()
-                        param.append('file', file)
-                        // 把图片上传到服务器，不然会直接把base64存到数据库
-                        this.$post(this.api.fileupload, param, {
-                            headers: { "Content-Type": "multipart/form-data" }
-                        }).then(res => {
-                            var range = ins.getSelection()
-                            if (range) {
-                                //  在当前光标位置插入图片
-                                ins.insertEmbed(range.index, 'image', res.data.filesResult.fileUrl)
-                                //  将光标移动到图片后面
-                                ins.setSelection(range.index + 1)
-                            }
-                        }).catch(res => {})
-                    });
-                }
-            }, false)
+    // markdown图片上传
+    imgAdd (pos, $file) {
+      let $vm = this.$refs.md
+      // 第一步.将图片上传到服务器.
+      const formData = new FormData();
+      formData.append('file', $file);
+      axios({
+        url: this.api.fileupload,
+        method: 'post',
+        data: formData,
+        headers: {
+          token: this.token,
+          'Content-Type': 'multipart/form-data'
         },
-        beforeUpload(file) {
-            this.loading = true;
-        },
-        editorUploadSuccess(res) {
-            // 获取富文本组件实例
-            let quill = this.Quill;
-            // 如果上传成功
-            if (res.data.filesResult.fileUrl) {
-                // 获取光标所在位置
-                let length = quill.getSelection().index;
-                // 插入图片，res为服务器返回的图片链接地址
-                quill.insertEmbed(length, "image", res.data.filesResult.fileUrl);
-                // 调整光标到最后
-                quill.setSelection(length + 1);
-            } else {
-                util.successMsg("图片插入失败");
-            }
-            this.loading = false;
-        }
-    }
+      }).then((res) => {
+        $vm.$img2Url(pos, res.data.data.filesResult.fileUrl);
+      })
+    },
+  }
 };
 </script>
 <style lang="scss" scoped>
+.type-radio {
+    margin-bottom: 20px;
+}
 .quill-no-border {
     .ql-toolbar.ql-snow {
         border: none;
@@ -257,5 +321,10 @@ export default {
         transform: translateY(10px);
     }
 }
-
+.md {
+    max-height: 300px;
+}
+/deep/.v-note-wrapper .v-note-panel {
+    min-height: 200px;
+}
 </style>
diff --git a/src/pages/product/list/index.vue b/src/pages/product/list/index.vue
index 87e9126..733d2af 100644
--- a/src/pages/product/list/index.vue
+++ b/src/pages/product/list/index.vue
@@ -1,14 +1,13 @@
 <template>
   <div class="wrap">
     <el-carousel :interval="6000"
-                 :height="carouselHeight">
+                 height="354px">
       <template v-for="(item, i) in banners">
         <el-carousel-item :key="i">
           <div :class="['banner-item', {'cursor-pointer': item.url}]"
                @click="openLink(item)">
             <img :src="item.banner"
-                 alt=""
-                 :style="{height: carouselHeight}">
+                 alt="">
             <!-- <img src="https://huoran.oss-cn-shenzhen.aliyuncs.com/20230726/png/1684091617063493632.png"
                  alt=""
                  :style="{height: carouselHeight}"> -->
@@ -548,7 +547,7 @@ export default {
         position: relative;
         img {
             width: 100%;
-            height: 100%;
+            height: 354px;
         }
         .texts {
             position: absolute;
@@ -559,10 +558,10 @@ export default {
         }
         h6 {
             margin-bottom: 25px;
-            font-size: 44px;
+            font-size: 36px;
         }
         .sub {
-            font-size: 22px;
+            font-size: 24px;
         }
     }
     .inner-wrap {
@@ -749,7 +748,7 @@ export default {
             }
             img {
                 width: 100%;
-                height: 140px;
+                height: 155px;
                 transition: 0.3s;
             }
             .my-school {
diff --git a/src/pages/product/show/index.vue b/src/pages/product/show/index.vue
index bd74c69..6e35a3f 100644
--- a/src/pages/product/show/index.vue
+++ b/src/pages/product/show/index.vue
@@ -9,23 +9,19 @@
     </el-card>
     <div class="inner">
       <div class="top">
-        <div class="pics"
-             v-if="form.mall.coverDrawing">
-          <el-image :class="['cover', {full: !form.interfaceDiagrams}]"
-                    :src="form.mall.coverDrawing"
-                    :preview-src-list="form.pics">
-          </el-image>
-          <div v-if="form.interfaceDiagrams"
-               class="interface">
-            <div class="pic"
-                 v-for="(pic, i) in form.interfaceDiagrams"
-                 :key="i">
-              <el-image :src="pic"
-                        :preview-src-list="form.pics">
-              </el-image>
-            </div>
-          </div>
-        </div>
+        <el-carousel class="pics"
+                     :interval="6000"
+                     height="278px"
+                     :arrow="form.pics.length > 1 ? 'hover' : 'never'"
+                     :indicator-position="form.pics.length > 1 ? '' : 'none'">
+          <el-carousel-item v-for="(item, i) in form.pics"
+                            :key="i">
+            <el-image class="pic"
+                      :src="item"
+                      :preview-src-list="form.pics">
+            </el-image>
+          </el-carousel-item>
+        </el-carousel>
         <div class="right"
              id="fields">
           <h6>{{ form.mall.productName }}</h6>
@@ -224,6 +220,7 @@ export default {
         },
       ],
       form: {
+        pics: [],
         classificationIds: [],
         mall: {
           coverDrawing: ''
@@ -393,33 +390,12 @@ export default {
         background-color: #fff;
         border-radius: 10px;
         .pics {
-            display: flex;
-            flex-wrap: wrap;
-            width: 502px;
+            width: 484px;
             margin-right: 20px;
-            .cover {
-                width: 370px;
-                height: 278px;
-                margin-right: 10px;
-                border-radius: 8px;
-                overflow: hidden;
-                &.full {
-                    width: 100%;
-                }
-            }
             .pic {
-                width: 114px;
-                height: 86px;
-                margin-bottom: 10px;
+                width: 100%;
+                height: 100%;
                 border-radius: 8px;
-                overflow: hidden;
-                .el-image {
-                    width: 100%;
-                    height: 100%;
-                }
-                &:last-child {
-                    margin-bottom: 0;
-                }
             }
         }
         .right {
@@ -494,6 +470,8 @@ export default {
         }
     }
     .tab {
+        position: sticky;
+        // top: 120px;
         display: inline-flex;
         margin-left: 10px;
         li {
@@ -521,7 +499,7 @@ export default {
         display: flex;
         margin-top: 20px;
         .detail {
-            width: 835px;
+            width: calc(100% - 294px);
             padding: 20px 24px;
             background-color: #fff;
             border-radius: 10px;
@@ -579,7 +557,7 @@ export default {
         }
     }
     .products {
-        width: 295px;
+        width: 270px;
         margin-left: 24px;
         & > h6 {
             font-size: 14px;
@@ -598,7 +576,7 @@ export default {
             overflow: hidden;
             img {
                 width: 100%;
-                height: 140px;
+                height: 155px;
                 transition: 0.3s;
             }
             .my-school {
diff --git a/src/setting.js b/src/setting.js
index 1af814e..1f5cb2c 100644
--- a/src/setting.js
+++ b/src/setting.js
@@ -27,7 +27,7 @@ if (isPro) {
     host = "http://121.37.12.51/"; // 中台测试服
     // host = 'https://www.occupationlab.com/' // 正式服
     // host = "http://192.168.31.217:9000/"; // 榕
-    host = 'http://192.168.31.51:9000/'; // 赓
+    // host = 'http://192.168.31.51:9000/'; // 赓
 }
 
 const Setting = {