更换md渲染组件，优化界面显示

package-lock.json

@@ -2016,6 +2016,7 @@
       "version": "1.0.10",
       "resolved": "http://registry.npm.taobao.org/argparse/download/argparse-1.0.10.tgz",
       "integrity": "sha1-vNZ5HqWuCXJeF+WtmIE0zUCz2RE=",
+      "dev": true,
       "requires": {
         "sprintf-js": "~1.0.2"
       }
@@ -3129,6 +3130,12 @@
           "integrity": "sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s=",
           "dev": true
         },
+        "highlight.js": {
+          "version": "9.18.1",
+          "resolved": "https://registry.npm.taobao.org/highlight.js/download/highlight.js-9.18.1.tgz",
+          "integrity": "sha1-7SGqAB/mJSuxCj121HVzxlOf4Tw=",
+          "dev": true
+        },
         "supports-color": {
           "version": "7.1.0",
           "resolved": "https://registry.npm.taobao.org/supports-color/download/supports-color-7.1.0.tgz",
@@ -4709,7 +4716,8 @@
     "entities": {
       "version": "2.0.0",
       "resolved": "https://registry.npm.taobao.org/entities/download/entities-2.0.0.tgz",
-      "integrity": "sha1-aNYITKsbB5dnVA2A5Wo5tCPkq/Q="
+      "integrity": "sha1-aNYITKsbB5dnVA2A5Wo5tCPkq/Q=",
+      "dev": true
     },
     "errno": {
       "version": "0.1.7",
@@ -6519,12 +6527,6 @@
       "integrity": "sha1-TAb8y0YC/iYCs8k9+C1+fb8aio4=",
       "dev": true
     },
-    "highlight.js": {
-      "version": "9.18.1",
-      "resolved": "https://registry.npm.taobao.org/highlight.js/download/highlight.js-9.18.1.tgz",
-      "integrity": "sha1-7SGqAB/mJSuxCj121HVzxlOf4Tw=",
-      "dev": true
-    },
     "hmac-drbg": {
       "version": "1.0.1",
       "resolved": "http://registry.npm.taobao.org/hmac-drbg/download/hmac-drbg-1.0.1.tgz",
@@ -7596,14 +7598,6 @@
       "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=",
       "dev": true
     },
-    "linkify-it": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npm.taobao.org/linkify-it/download/linkify-it-2.2.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Flinkify-it%2Fdownload%2Flinkify-it-2.2.0.tgz",
-      "integrity": "sha1-47VGl+eL+RXHCjis14/QngBYsc8=",
-      "requires": {
-        "uc.micro": "^1.0.1"
-      }
-    },
     "load-json-file": {
       "version": "1.1.0",
       "resolved": "https://registry.npm.taobao.org/load-json-file/download/load-json-file-1.1.0.tgz",
@@ -7865,17 +7859,10 @@
         "object-visit": "^1.0.0"
       }
     },
-    "markdown-it": {
-      "version": "10.0.0",
-      "resolved": "https://registry.npm.taobao.org/markdown-it/download/markdown-it-10.0.0.tgz",
-      "integrity": "sha1-q/xk8UGxci1mNAIETkOSfx9QqNw=",
-      "requires": {
-        "argparse": "^1.0.7",
-        "entities": "~2.0.0",
-        "linkify-it": "^2.0.0",
-        "mdurl": "^1.0.1",
-        "uc.micro": "^1.0.5"
-      }
+    "marked": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npm.taobao.org/marked/download/marked-1.1.0.tgz",
+      "integrity": "sha1-YlBK1NEVUMlCk1zMXjnWTlpMTlA="
     },
     "md5.js": {
       "version": "1.3.5",
@@ -7894,11 +7881,6 @@
       "integrity": "sha1-aZs8OKxvHXKAkaZGULZdOIUC/Vs=",
       "dev": true
     },
-    "mdurl": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npm.taobao.org/mdurl/download/mdurl-1.0.1.tgz",
-      "integrity": "sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4="
-    },
     "media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npm.taobao.org/media-typer/download/media-typer-0.3.0.tgz",
@@ -11285,7 +11267,8 @@
     "sprintf-js": {
       "version": "1.0.3",
       "resolved": "http://registry.npm.taobao.org/sprintf-js/download/sprintf-js-1.0.3.tgz",
-      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw="
+      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
+      "dev": true
     },
     "sshpk": {
       "version": "1.16.1",
@@ -11952,11 +11935,6 @@
       "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=",
       "dev": true
     },
-    "uc.micro": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npm.taobao.org/uc.micro/download/uc.micro-1.0.6.tgz",
-      "integrity": "sha1-nEEagCpAmpH8bPdAgbq6NLJEmaw="
-    },
     "uglify-js": {
       "version": "3.4.10",
       "resolved": "https://registry.npm.taobao.org/uglify-js/download/uglify-js-3.4.10.tgz",

package.json

@@ -20,7 +20,7 @@
     "js-cookie": "^2.2.1",
     "lodash": "^4.17.15",
     "lowdb": "^1.0.0",
-    "markdown-it": "^10.0.0",
+    "marked": "^1.1.0",
     "node-sass": "^4.14.0",
     "sass-loader": "^8.0.2",
     "v-viewer": "^1.5.1",

src/api/components.markdown.js

@@ -0,0 +1,8 @@
+import request from '@/plugin/axios'
+
+export function ComponentsMarkdownBase (url) {
+  return request({
+    url,
+    method: 'get'
+  })
+}

src/components/index.js

@@ -0,0 +1,3 @@
+import Vue from 'vue'
+
+Vue.component('markdown', () => import('./markdown'))

src/components/markdown/index.vue

@@ -0,0 +1,146 @@
+<template>
+  <div class="component-markdown">
+    <div class="spin-group" v-if="!markedHTML">
+      <i class="fa fa-spinner fa-pulse fa-2x fa-fw"></i>
+      <span class="sr-only">Loading...</span>
+    </div>
+    <div class="markdown-body content" v-html="markedHTML"></div>
+  </div>
+</template>
+
+<script>
+import marked from "marked";
+import bandupan from "./plugin/baidupan";
+import { ComponentsMarkdownBase } from "@api/components.markdown";
+export default {
+  name: "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 ComponentsMarkdownBase(url);
+      console.log(data);
+      return this.marked(data.data);
+    },
+    marked(data) {
+      const renderer = new marked.Renderer();
+      renderer.blockquote = (quote) => {
+        // 百度网盘
+        return (
+          (this.baidupan && bandupan(quote, this.$baseUrl)) ||
+          `<blockquote>${quote}</blockquote>`
+        );
+      };
+      return marked(data, {
+        renderer,
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.component-markdown {
+  .spin-group {
+    height: 100px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+  }
+}
+// 百度云
+$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 purple;
+      .line {
+        background-color: purple;
+      }
+    }
+    .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: purple;
+    }
+    .line {
+      float: left;
+      height: $baidupanHeight + 2 * $baidupanPadding;
+      width: 1px;
+      margin: -$baidupanPadding $baidupanPadding;
+      background-color: #dfe2e5;
+    }
+    .pwd {
+      float: left;
+      height: $baidupanHeight;
+      line-height: $baidupanHeight;
+    }
+  }
+}
+</style>

src/components/markdown/plugin/baidupan.js

@@ -0,0 +1,38 @@
+
+import cdnpath from "@/libs/util.cdn";
+
+export default (quote) => {
+  const _quote = quote.replace(/<[^<>]+>/g, '').trim()
+  const bdPanUrl = /^https:\/\/pan\.baidu\.com\/s\/[a-z0-9]+$/i
+  const bdPanUrlPwd = /^链接: https:\/\/pan\.baidu\.com\/s\/[a-z0-9]+ 密码: [a-z0-9]{4}$/i
+  if (bdPanUrl.test(_quote)) {
+    return `<div class="baidupan">
+      <a href="${_quote}" class="container">
+        <div class="icon">
+          <img src="${cdnpath("images/baidu-pan-logo.png")}" style="background-color: transparent;">
+        </div>
+        <div class="url">${_quote}</div>
+      </a>
+    </div>`
+  } else if (bdPanUrlPwd.test(_quote)) {
+    const url = _quote.match(/https:\/\/pan\.baidu\.com\/s\/[a-z0-9]+/i)
+    const pwd = _quote.match(/[a-z0-9]{4}$/i)
+    return `<div class="baidupan">
+      <div class="container">
+        <a href="${url[0]}">
+          <div class="icon">
+            <img src="${cdnpath("images/baidu-pan-logo.png")}" style="background-color: transparent;">
+          </div>
+          <div class="url">${url[0]}</div>
+        </a>
+        <div class="line"></div>
+        <div class="pwd">
+          密码
+          <span>${pwd[0]}</span>
+        </div>
+      </div>
+    </div>`
+  } else {
+    return false
+  }
+}

src/main.js

@@ -14,6 +14,8 @@ import VueClipboard from "vue-clipboard2";
 import VueLazyload from "vue-lazyload";
 import Viewer from "v-viewer";
 import cdnpath from "./libs/util.cdn";
+// 组件
+import '@/components'
 import "viewerjs/dist/viewer.css";
 import "@/assets/style/theme/register.scss";
 

src/views/Layout.vue

@@ -3,7 +3,6 @@
     <Head></Head>
     <section class="section">
       <div class="container">
-        <bread-crumb ref="breadcrumb"></bread-crumb>
         <!-- <keep-alive> -->
         <feb-alive>
           <router-view></router-view>
@@ -17,7 +16,6 @@
 
 <script>
 import Head from "./common/Head";
-import BreadCrumb from "./common/BreadCrumb";
 import Footer from "./common/Footer";
 export default {
   data: function () {
@@ -25,7 +23,6 @@ export default {
   },
   components: {
     Head,
-    BreadCrumb,
     Footer: Footer,
   },
   methods: {},

src/views/common/Markdown.vue

@@ -4,7 +4,7 @@
 
 <script>
 import { get_file } from "@utils/AcrouUtil";
-import MarkdownIt from "markdown-it";
+import marked from "marked";
 export default {
   props: {
     option: {}
@@ -32,13 +32,11 @@ export default {
       `
     }
   },
-  components: {},
   methods: {
     render() {
       this.content = this.defaultContent
-      const md = new MarkdownIt();
       get_file(this.option, data => {
-        this.content = md.render(data);
+        this.content = marked(data);
       });
     }
   }

src/views/page/GoList.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
-    <headmd :option="headmd" v-if="renderHeadMD && headmd.display"></headmd>
+    <headmd :option="headmd" v-if="renderHeadMD && headmd.display" style="margin:1rem 0;"></headmd>
+    <bread-crumb ref="breadcrumb"></bread-crumb>
     <div class="golist" v-loading="loading">
       <list-view
         :data="files"
@@ -71,6 +72,7 @@ import {
   checkExtends,
 } from "@utils/AcrouUtil";
 import { mapState } from "vuex";
+import BreadCrumb from "../common/BreadCrumb";
 import ListView from "./components/list";
 import GridView from "./components/grid";
 import Markdown from "../common/Markdown";
@@ -78,6 +80,7 @@ import InfiniteLoading from "vue-infinite-loading";
 export default {
   name: "GoList",
   components: {
+    BreadCrumb,
     ListView,
     GridView,
     Headmd: Markdown,
@@ -109,6 +112,7 @@ export default {
         "text/x-sh": "icon-SH",
         "application/x-subrip": "icon-srt",
         "application/zip": "icon-zip",
+        "application/x-zip-compressed": "icon-zip",
         "application/rar": "icon-rar",
         "application/pdf": "icon-pdf",
         "application/json": "icon-JSON1",
@@ -118,6 +122,7 @@ export default {
         "image/bmp": "icon-img",
         "image/jpeg": "icon-img",
         "image/png": "icon-img",
+        "image/gif": "icon-img"
       },
       headmd: { display: false, file: {}, path: "" },
       readmemd: { display: false, file: {}, path: "" },

vue.config.js

@@ -71,6 +71,7 @@ module.exports = {
       .set("@", resolve("src"))
       .set("@assets", resolve("src/assets"))
       .set("@utils", resolve("src/utils"))
+      .set("@api", resolve("src/api"))
       .set("@node_modules", resolve("node_modules"));
 
     // 分析工具

yarn.lock

@@ -4142,6 +4142,11 @@ getpass@^0.1.1:
   dependencies:
     assert-plus "^1.0.0"
 
+github-markdown-css@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npm.taobao.org/github-markdown-css/download/github-markdown-css-4.0.0.tgz#be9f4caf7a389228d4c368336260ffc909061f35"
+  integrity sha1-vp9Mr3o4kijUw2gzYmD/yQkGHzU=
+
 glob-parent@^3.1.0:
   version "3.1.0"
   resolved "https://registry.npm.taobao.org/glob-parent/download/glob-parent-3.1.0.tgz#9e6af6299d8d3bd2bd40430832bd113df906c5ae"
@@ -4372,6 +4377,11 @@ hex-color-regex@^1.1.0:
   resolved "https://registry.npm.taobao.org/hex-color-regex/download/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
   integrity sha1-TAb8y0YC/iYCs8k9+C1+fb8aio4=
 
+highlight.js@^10.0.3:
+  version "10.0.3"
+  resolved "https://registry.npm.taobao.org/highlight.js/download/highlight.js-10.0.3.tgz#5effcc58420f113f279a0badb8ac50c4be06e63b"
+  integrity sha1-Xv/MWEIPET8nmgutuKxQxL4G5js=
+
 highlight.js@^9.6.0:
   version "9.18.1"
   resolved "https://registry.npm.taobao.org/highlight.js/download/highlight.js-9.18.1.tgz#ed21aa001fe6252bb10a3d76d47573c6539fe13c"
@@ -5467,6 +5477,11 @@ markdown-it@^10.0.0:
     mdurl "^1.0.1"
     uc.micro "^1.0.5"
 
+marked@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npm.taobao.org/marked/download/marked-1.1.0.tgz#62504ad4d11550c942935ccc5e39d64e5a4c4e50"
+  integrity sha1-YlBK1NEVUMlCk1zMXjnWTlpMTlA=
+
 md5.js@^1.3.4:
   version "1.3.5"
   resolved "https://registry.npm.taobao.org/md5.js/download/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
@@ -8805,11 +8820,6 @@ vue-infinite-loading@^2.4.5:
   resolved "https://registry.npm.taobao.org/vue-infinite-loading/download/vue-infinite-loading-2.4.5.tgz#cc20fd40af7f20188006443c99b60470cf1de1b3"
   integrity sha1-zCD9QK9/IBiABkQ8mbYEcM8d4bM=
 
-vue-infinite-scroll@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.npm.taobao.org/vue-infinite-scroll/download/vue-infinite-scroll-2.0.2.tgz#ca37a91fe92ee0ad3b74acf8682c00917144b711"
-  integrity sha1-yjepH+ku4K07dKz4aCwAkXFEtxE=
-
 vue-lazyload@^1.3.3:
   version "1.3.3"
   resolved "https://registry.npm.taobao.org/vue-lazyload/download/vue-lazyload-1.3.3.tgz#4df50a271bde9b74c3caf7a228d6e0af50d5682f"