From 2f1a4262236f31eeeaff3ff118a5511a67f36031 Mon Sep 17 00:00:00 2001
From: x ronger <ronger-x@outlook.com>
Date: Mon, 29 Jun 2020 21:30:58 +0800
Subject: [PATCH] first commit

---
 components/layouts/pc/header.vue |   2 +-
 package-lock.json                |   8 +-
 pages/article/_article_id.vue    | 150 +++++++++++++++++++++----------
 3 files changed, 107 insertions(+), 53 deletions(-)

diff --git a/components/layouts/pc/header.vue b/components/layouts/pc/header.vue
index 66ea254..41fc334 100644
--- a/components/layouts/pc/header.vue
+++ b/components/layouts/pc/header.vue
@@ -12,7 +12,7 @@
           <el-col>
             <el-menu :default-active="getActiveMenu" style="margin-top: -2px;border: 0;" mode="horizontal"
                      @select="handleSelectMenu">
-              <el-menu-item index="home">首页</el-menu-item>
+              <el-menu-item index="index">首页</el-menu-item>
               <el-menu-item index="topic">专题</el-menu-item>
               <el-menu-item index="github">开源代码</el-menu-item>
               <el-menu-item index="open-source">资料下载</el-menu-item>
diff --git a/package-lock.json b/package-lock.json
index 6305973..37a8189 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1406,7 +1406,7 @@
     },
     "@nuxtjs/axios": {
       "version": "5.11.0",
-      "resolved": "https://registry.npm.taobao.org/@nuxtjs/axios/download/@nuxtjs/axios-5.11.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40nuxtjs%2Faxios%2Fdownload%2F%40nuxtjs%2Faxios-5.11.0.tgz",
+      "resolved": "https://registry.npm.taobao.org/@nuxtjs/axios/download/@nuxtjs/axios-5.11.0.tgz",
       "integrity": "sha1-J9cpemnhHDkDm5ysrGHi4NDgDx8=",
       "requires": {
         "@nuxtjs/proxy": "^2.0.0",
@@ -5540,7 +5540,7 @@
     },
     "http-proxy-middleware": {
       "version": "1.0.4",
-      "resolved": "https://registry.npm.taobao.org/http-proxy-middleware/download/http-proxy-middleware-1.0.4.tgz",
+      "resolved": "https://registry.npm.taobao.org/http-proxy-middleware/download/http-proxy-middleware-1.0.4.tgz?cache=0&sync_timestamp=1589915551464&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fhttp-proxy-middleware%2Fdownload%2Fhttp-proxy-middleware-1.0.4.tgz",
       "integrity": "sha1-Ql6hd5hqDNo0+cgeyWHHGa22wqk=",
       "requires": {
         "@types/http-proxy": "^1.17.4",
@@ -5573,7 +5573,7 @@
         },
         "micromatch": {
           "version": "4.0.2",
-          "resolved": "https://registry.npm.taobao.org/micromatch/download/micromatch-4.0.2.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmicromatch%2Fdownload%2Fmicromatch-4.0.2.tgz",
+          "resolved": "https://registry.npm.taobao.org/micromatch/download/micromatch-4.0.2.tgz?cache=0&sync_timestamp=1588851826089&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmicromatch%2Fdownload%2Fmicromatch-4.0.2.tgz",
           "integrity": "sha1-T8sJmb+fvC/L3SEvbWKbmlbDklk=",
           "requires": {
             "braces": "^3.0.1",
@@ -5992,7 +5992,7 @@
     },
     "is-retry-allowed": {
       "version": "1.2.0",
-      "resolved": "https://registry.npm.taobao.org/is-retry-allowed/download/is-retry-allowed-1.2.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fis-retry-allowed%2Fdownload%2Fis-retry-allowed-1.2.0.tgz",
+      "resolved": "https://registry.npm.taobao.org/is-retry-allowed/download/is-retry-allowed-1.2.0.tgz",
       "integrity": "sha1-13hIi9CkZmo76KFIK58rqv7eqLQ="
     },
     "is-ssh": {
diff --git a/pages/article/_article_id.vue b/pages/article/_article_id.vue
index dfa68ec..2ae8fa2 100644
--- a/pages/article/_article_id.vue
+++ b/pages/article/_article_id.vue
@@ -13,14 +13,12 @@
                 </el-col>
                 <el-col :xs="9" :sm="11" :xl="11">
                   <div style="margin-left: 1rem;">
-                    <el-link @click="onRouter('user', article.articleAuthorName)" :underline="false"
-                             class="text-default">{{ article.articleAuthorName }}
-                    </el-link>
+                    <el-link @click="onRouter('user', article.articleAuthorName)" :underline="false" class="text-default" >{{ article.articleAuthorName }}</el-link>
                     <small class="d-block text-muted">{{ article.timeAgo }}</small>
                   </div>
                 </el-col>
                 <el-col :xs="12" :sm="12" :xl="12" v-if="isLogin" class="text-right">
-                  <el-dropdown trigger="click" @command="handleCommand">
+                  <el-dropdown trigger="click"  @command="handleCommand">
                     <el-link :underline="false"><i class="el-icon-more"></i></el-link>
                     <el-dropdown-menu slot="dropdown">
                       <el-dropdown-item command="edit" v-if="hasPermissions">编辑</el-dropdown-item>
@@ -29,8 +27,7 @@
                   </el-dropdown>
                 </el-col>
                 <el-col class="text-right">
-                  <el-link :underline="false" title="总浏览数"><i class="el-icon-s-data"></i><span style="color: red;">{{ article.articleViewCount }}</span>
-                  </el-link>
+                  <el-link :underline="false" title="总浏览数"><i class="el-icon-s-data"></i><span style="color: red;">{{ article.articleViewCount }}</span></el-link>
                 </el-col>
                 <el-col style="margin: 1rem 0;">
                   <el-tag
@@ -52,33 +49,29 @@
                         <el-avatar :size="24" :src="portfolio.headImgUrl"></el-avatar>
                       </el-col>
                       <el-col :xs="20" :sm="20" :xl="20">
-                        <el-link @click="onRouter('portfolio', portfolio.idPortfolio)" :underline="false"
-                                 class="text-default">{{ portfolio.portfolioTitle }}
-                        </el-link>
+                        <el-link @click="onRouter('portfolio', portfolio.idPortfolio)" :underline="false" class="text-default">{{ portfolio.portfolioTitle }}</el-link>
                       </el-col>
                     </el-col>
                   </el-col>
                 </el-col>
-                <el-col v-if="isShare" style="margin-bottom: 1rem;">
-                  <el-input v-model="shareData.shareUrl">
-                    <el-popover slot="append"
-                                placement="bottom"
-                                width="20"
-                                trigger="hover">
-                      <el-col>
-                        <qrcode :value="shareWeiXin(shareData.shareUrl)" :options="{ width: 20 }"></qrcode>
-                      </el-col>
-                      <el-col class="text-center">
-                        <span>扫码分享至微信</span>
-                      </el-col>
-                      <el-button slot="reference">
-                        <el-image style="width: 14px;height: 14px;" :src="weiXin" fit="cover"></el-image>
-                      </el-button>
-                    </el-popover>
-                  </el-input>
-                </el-col>
+<!--                <el-col v-if="isShare" style="margin-bottom: 1rem;">-->
+<!--                  <el-input v-model="shareData.shareUrl">-->
+<!--                    <el-popover slot="append"-->
+<!--                                placement="bottom"-->
+<!--                                width="20"-->
+<!--                                trigger="hover">-->
+<!--                      <el-col>-->
+<!--                        <qrcode :value="shareWeiXin(shareData.shareUrl)" :options="{ width: 20 }"></qrcode>-->
+<!--                      </el-col>-->
+<!--                      <el-col class="text-center">-->
+<!--                        <span>扫码分享至微信</span>-->
+<!--                      </el-col>-->
+<!--                      <el-button slot="reference"><el-image style="width: 14px;height: 14px;" :src="weiXin" fit="cover"></el-image></el-button>-->
+<!--                    </el-popover>-->
+<!--                  </el-input>-->
+<!--                </el-col>-->
               </el-row>
-              <div class="pt-7 pipe-content__reset" v-html="article.articleContent" style="overflow: hidden;"></div>
+              <div class="pt-7 pipe-content__reset vditor-reset" id="articleContent" v-html="article.articleContent" style="overflow: hidden;"></div>
             </div>
           </div>
         </el-card>
@@ -90,25 +83,25 @@
         <el-col :xs="22" :sm="23" :xl="23" style="padding-left: 1rem;">
           <el-input @click.native="showComment" placeholder="请输入回帖内容"></el-input>
         </el-col>
-        <el-col>
-          <el-drawer
-            :visible.sync="drawer"
-            :direction="direction"
-            size="40%">
-            <el-col slot="title">
-              <el-col>
-                <el-avatar v-if="commentAuthorAvatar" :src="commentAuthorAvatar"></el-avatar>
-                <span class="text-default" style="padding-left: 1rem;">{{ title }}</span>
-              </el-col>
-            </el-col>
-            <el-col>
-              <div id="contentEditor"></div>
-            </el-col>
-            <el-col style="margin-top: 1rem;padding-right:3rem;text-align: right;">
-              <el-button type="primary" :loading="loading" @click="postComment">发布</el-button>
-            </el-col>
-          </el-drawer>
-        </el-col>
+<!--        <el-col>-->
+<!--          <el-drawer-->
+<!--            :visible.sync="drawer"-->
+<!--            :direction="direction"-->
+<!--            size="40%">-->
+<!--            <el-col slot="title">-->
+<!--              <el-col>-->
+<!--                <el-avatar v-if="commentAuthorAvatar" :src="commentAuthorAvatar"></el-avatar>-->
+<!--                <span class="text-default" style="padding-left: 1rem;">{{ title }}</span>-->
+<!--              </el-col>-->
+<!--            </el-col>-->
+<!--            <el-col>-->
+<!--              <div id="contentEditor"></div>-->
+<!--            </el-col>-->
+<!--            <el-col style="margin-top: 1rem;padding-right:3rem;text-align: right;">-->
+<!--              <el-button type="primary" :loading="loading" @click="postComment">发布</el-button>-->
+<!--            </el-col>-->
+<!--          </el-drawer>-->
+<!--        </el-col>-->
       </el-col>
       <el-col v-else class="text-center" style="margin-top: 1rem;">
         <el-button type="primary" size="medium" @click="gotoLogin">登录</el-button>
@@ -125,7 +118,9 @@
 </template>
 
 <script>
-  import { mapState } from 'vuex'
+  import Vue from 'vue';
+  import { mapState } from 'vuex';
+  import VditorPreview from 'vditor/dist/method.min';
   export default {
     name: "ArticleDetail",
     validate({params, store}) {
@@ -150,13 +145,72 @@
       return {
         isShow: true,
         loading: false,
+        isLogin: false,
+        isShare: false,
+        shareData: {},
+        avatar: ''
       }
+    },
+    methods: {
+      onRouter (name, data) {
+        this.$router.push(
+          {
+            name: name,
+            params: {
+              id: data
+            }
+          }
+        )
+      },
+      handleCommand(item) {
+        let _ts = this;
+        if (item === 'edit') {
+          _ts.$router.push({
+            name: 'post-article',
+            query: {
+              id: _ts.article.idArticle
+            }
+          })
+        } else {
+          _ts.axios.get('/article/' + _ts.article.idArticle + '/share').then(function (res) {
+            if (res) {
+              _ts.$set(_ts, 'shareData', res);
+              _ts.$set(_ts, 'isShare', true);
+            }
+          });
+        }
+      },
+      gotoLogin() {
+        this.$router.push({
+          name: 'login'
+        })
+      }
+    },
+    mounted() {
+      Vue.nextTick(() => {
+        const previewElement = document.getElementById("articleContent");
+        // //const outLineElement = document.getElementById("articleToC");
+        // VditorPreview.setContentTheme('light');
+        VditorPreview.codeRender(previewElement, 'zh_CN');
+        VditorPreview.highlightRender({"enable":true,"lineNumber":false,"style":"github"}, previewElement);
+        VditorPreview.mathRender(previewElement, {
+          math: {"engine":"KaTeX","inlineDigit":false,"macros":{}},
+        });
+        VditorPreview.mermaidRender(previewElement, ".language-mermaid");
+        VditorPreview.graphvizRender(previewElement);
+        VditorPreview.chartRender(previewElement);
+        VditorPreview.mindmapRender(previewElement);
+        VditorPreview.abcRender(previewElement);
+        VditorPreview.mediaRender(previewElement);
+        //VditorPreview.outlineRender(previewElement, outLineElement);
+      })
     }
 
   }
 </script>
 
 <style lang="scss">
+  @import "~vditor/src/assets/scss/index.scss";
   .article__wrapper {
     max-width: 980px;
     margin: 0 auto;