减少层级

Former-commit-id: 889b557de9234ebb4364ebb87f5bf8b0935294eb [formerly 889b557de9234ebb4364ebb87f5bf8b0935294eb [formerly 889b557de9234ebb4364ebb87f5bf8b0935294eb [formerly 889b557de9234ebb4364ebb87f5bf8b0935294eb [formerly 41b59da80ab4c5c0b9eceeec8fd2f527d22c4ab8 [formerly 3dc1bcda38f391962e102a990c2b68b7a33d4683]]]]]
Former-commit-id: 3cd64e384a81021adeab4674894f3e4ba934924a
Former-commit-id: 6c1d5c80613ac406276127f3b01566ace11becab
Former-commit-id: fb1dae74ec5eea07c96632f6e8841b1bc42a614a [formerly 159c5ea89b386d484b2ef90733075633b156d87e]
Former-commit-id: 5be175c876d576777072d4430a8520fc7b255112
Former-commit-id: ec65f0871fca703dbbc7a428ca9e4b582043c361
Former-commit-id: 80b73945bd350373ce7e3d15b8f0432c1427d8e3
Former-commit-id: cc2112baadf022e42428dd0019a764e266570b21
Former-commit-id: b7c059087a58e03c0d954af34b30f94b3e03b60c

src/components/d2-markdown/index.vue

@@ -0,0 +1,144 @@
+<template>
+  <div class="component-markdown">
+    <div class="spin-group" v-if="!markedHTML">
+      <div>正在加载</div>
+    </div>
+    <div class="markdown-body" v-html="markedHTML"></div>
+  </div>
+</template>
+
+<script>
+import marked from 'marked'
+import highlight from 'highlight.js'
+import bandupan from './plugin/baidupan'
+export default {
+  name: 'd2-markdown',
+  props: {
+    url: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    source: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    highlight: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    // 百度网盘分享链接特殊样式
+    baidupan: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  data () {
+    return {
+      getReadmePublicPath: '',
+      markedHTML: ''
+    }
+  },
+  mounted () {
+    if (this.url) {
+      this.initWithUrl()
+    } else if (this.source) {
+      this.initWithMd()
+    } else {
+      console.log('not mounted init')
+    }
+  },
+  methods: {
+    // 使用 md 初始化
+    initWithMd () {
+      this.markedHTML = this.marked(this.source)
+    },
+    // 使用 url 初始化
+    async initWithUrl () {
+      this.markedHTML = await this.getReadme(this.url)
+    },
+    // 从 url 加载原始数据
+    async getReadme (url) {
+      const data = await this.$axios.get(url)
+      return this.marked(data)
+    },
+    marked (data) {
+      const renderer = new marked.Renderer()
+      renderer.blockquote = (quote) => {
+        // 百度网盘
+        return (this.baidupan && bandupan(quote, this.$baseUrl)) || `<blockquote>${quote}</blockquote>`
+      }
+      return marked(data, {
+        ...this.highlight ? {highlight: (code) => highlight.highlightAuto(code).value} : {},
+        renderer
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@import '~@/assets/style/public.scss';
+.component-markdown {
+  .spin-group {
+    height: 100px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    color: $color-primary;
+  }
+}
+// 百度云
+$baidupanHeight: 30px;
+$baidupanPadding: 10px;
+.baidupan {
+  overflow: hidden;
+  margin-bottom: 16px;
+  .container {
+    height: $baidupanHeight + 2 * $baidupanPadding;
+    border-radius: 4px;
+    border: 1px solid #dfe2e5;
+    padding: $baidupanPadding;
+    float: left;
+    cursor: pointer;
+    &:hover {
+      border: 1px solid $color-primary;
+      .line {
+        background-color: $color-primary;
+      }
+    }
+    .icon {
+      float: left;
+      height: $baidupanHeight;
+      text-align: center;
+      width: 40px;
+      margin-right: $baidupanPadding;
+      img {
+        width: 40px;
+      }
+    }
+    .url {
+      float: left;
+      height: $baidupanHeight;
+      line-height: $baidupanHeight;
+      color: $color-text-main;
+    }
+    .line {
+      float: left;
+      height: $baidupanHeight + 2 * $baidupanPadding;
+      width: 1px;
+      margin: -$baidupanPadding $baidupanPadding;
+      background-color: #dfe2e5;
+    }
+    .pwd {
+      float: left;
+      height: $baidupanHeight;
+      line-height: $baidupanHeight;
+    }
+  }
+}
+</style>