✨ 评论模块开发

components/common/comment/index.js

@@ -0,0 +1,15 @@
+/**
+ * @file Comment box component / ES module
+ * @module components/common/comment
+ * @author Surmon <https://github.com/surmon-china>
+ */
+
+import Comment from './main'
+
+export const comment = {
+  install(Vue) {
+    Vue.component('comment-box', Comment)
+  }
+}
+
+export default comment

components/common/comment/main.vue

@@ -0,0 +1,328 @@
+<template>
+  <el-row class="pt-5">
+    <el-col v-if="isFetching">
+      加载中
+    </el-col>
+    <el-col v-else>
+      <el-col v-if="user" style="margin-top: 1rem;">
+        <el-col :xs="2" :sm="1" :xl="1">
+          <el-avatar :src="avatar"></el-avatar>
+        </el-col>
+        <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;">{{ commentTitle }}</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>
+        后发布评论
+      </el-col>
+      <el-col style="margin-top: 1rem;">
+        <el-col v-for="comment in comment.data" :key="comment.idComment">
+          <el-card style="margin-bottom: 0.5rem;">
+            <el-col :xs="3" :sm="1" :xl="1">
+              <el-avatar v-if="comment.commenter.userAvatarURL" :src="comment.commenter.userAvatarURL"></el-avatar>
+              <el-avatar v-else src="https://rymcu.com/vertical/article/1578475481946.png"></el-avatar>
+            </el-col>
+            <el-col :xs="21" :sm="23" :xl="23">
+              <el-col style="margin-left: 1rem;">
+                <el-col v-if="comment.commentOriginalCommentId">
+                  <el-link @click="onRouter('user', comment.commenter.userNickname)" :underline="false"
+                           class="text-default">{{ comment.commenter.userNickname }}
+                  </el-link>
+                  <small class="text-default" style="margin: 0 0.2rem">回复了</small><span style="font-weight: bold;"> {{comment.commentOriginalAuthorNickname}}</span>
+                </el-col>
+                <el-col v-else>
+                  <el-link @click="onRouter('user', comment.commenter.userNickname)" :underline="false"
+                           class="text-default">{{ comment.commenter.userNickname }}
+                  </el-link>
+                </el-col>
+
+              </el-col>
+              <el-col style="padding: 1rem;">
+                <el-col>
+                  <span v-html="comment.commentContent"></span>
+                </el-col>
+              </el-col>
+              <el-col :span="22" style="padding-left: 1rem;">
+                <el-link :underline="false" class="text-default">{{ comment.timeAgo }}</el-link>
+              </el-col>
+              <el-col :span="2" class="text-right" style="margin-bottom: 0.5rem;">
+                <el-link :underline="false" title="回复" @click.native="replyComment(comment)"><i
+                  class="el-icon-s-comment"></i></el-link>
+              </el-col>
+            </el-col>
+          </el-card>
+        </el-col>
+      </el-col>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+  import Vue from 'vue'
+  import {mapState} from 'vuex'
+  import {isBrowser} from '~/environment'
+
+  export default {
+    name: "Comment",
+    props: {
+      fetching: {
+        type: Boolean,
+        default: false
+      },
+      user: {
+        type: Object,
+        default: false
+      },
+      avatar: {
+        type: String,
+        default: ''
+      },
+      title: {
+        type: String,
+        default: ''
+      },
+      postId: {
+        type: Number,
+        required: true
+      }
+    },
+    computed: {
+      ...mapState({
+        comment: state => state.comment.data,
+        isFetchingComment: state => state.comment.fetching,
+        isPostingComment: state => state.comment.posting,
+        constants: state => state.global.constants,
+        language: state => state.global.language,
+        isMobile: state => state.global.isMobile
+      }),
+      isFetching() {
+        // 1. 宿主组件还在加载时，列表和 tool 都呈加载状态
+        // 2. 宿主组件加载完成，如果自己还在请求，则列表呈加载状态
+        // 3. 自己已请求完，宿主组件还在加载，列表和 tool 都呈加载状态
+        return this.fetching || this.isFetchingComment
+      }
+    },
+    data() {
+      return {
+        tokenURL: {},
+        drawer: false,
+        direction: 'btt',
+        initEditor: false,
+        isShow: true,
+        loading: false,
+        commentOriginalCommentId: 0,
+        commentAuthorAvatar: '',
+        commentTitle: ''
+      }
+    },
+    methods: {
+      onRouter(name, data) {
+        this.$router.push(
+          {
+            name: name,
+            params: {
+              id: data
+            }
+          }
+        )
+      },
+      _initEditor (data) {
+        let toolbar;
+        if (window.innerWidth < 768) {
+          toolbar = [
+            'emoji',
+            'headings',
+            'bold',
+            'italic',
+            'strike',
+            'link',
+            '|',
+            'list',
+            'ordered-list',
+            'check',
+            'outdent',
+            'indent',
+            '|',
+            'quote',
+            'line',
+            'code',
+            'inline-code',
+            'insert-before',
+            'insert-after',
+            '|',
+            'upload',
+            'record',
+            'table',
+            '|',
+            'undo',
+            'redo',
+            '|',
+            'edit-mode',
+            'content-theme',
+            'code-theme',
+            {
+              name: 'more',
+              toolbar: [
+                'fullscreen',
+                'both',
+                'format',
+                'preview',
+                'info',
+                'help',
+              ],
+            }]
+        }
+        return new Vue.Vditor(data.id, {
+          toolbar,
+          mode: 'sv',
+          tab: '\t',
+          cache: {
+            enable: this.postId ? false : true,
+            id: this.postId ? this.postId : '',
+          },
+          preview: {
+            markdown: {
+              toc: true,
+            },
+            delay: 500,
+            mode: data.mode,
+            /*url: `${process.env.Server}/api/console/markdown`,*/
+            parse: (element) => {
+              if (element.style.display === 'none') {
+                return
+              }
+              // LazyLoadImage();
+              Vue.Vditor.highlightRender({style:'github'}, element, document);
+            }
+          },
+          upload: {
+            max: 10 * 1024 * 1024,
+            url: this.tokenURL?.URL,
+            linkToImgUrl: this.tokenURL?.URL,
+            token: this.tokenURL?.token,
+            filename: name => name.replace(/\?|\\|\/|:|\||<|>|\*|\[|\]|\s+/g, '-')
+          },
+          height: data.height,
+          counter: 102400,
+          resize: {
+            enable: data.resize,
+          },
+          lang: this.$store.state.locale,
+          placeholder: data.placeholder,
+        })
+      },
+      _loadEditor() {
+        let _ts = this;
+        if (!_ts.initEditor) {
+          _ts.$set(_ts, 'initEditor', true);
+          setTimeout(function () {
+            _ts.contentEditor = _ts._initEditor({
+              id: 'contentEditor',
+              mode: 'both',
+              height: 200,
+              placeholder: '', //this.$t('inputContent', this.$store.state.locale)
+              resize: false,
+            });
+            _ts.contentEditor.setValue('');
+          }, 500);
+        }
+      },
+      gotoComment(commentId) {
+        console.log(commentId);
+      },
+      replyComment(comment) {
+        let _ts = this;
+        _ts.$set(_ts, 'drawer', true);
+        _ts.$set(_ts, 'commentTitle', comment.commenter.userNickname);
+        _ts.$set(_ts, 'commentAuthorAvatar', comment.commenter.userAvatarURL);
+        _ts.$set(_ts, 'commentOriginalCommentId', comment.idComment);
+        _ts._loadEditor();
+      },
+      showComment() {
+        let _ts = this;
+        _ts.$set(_ts, 'drawer', true);
+        _ts.$set(_ts, 'commentTitle', _ts.title);
+        _ts.$set(_ts, 'commentAuthorAvatar', '');
+        _ts.$set(_ts, 'commentOriginalCommentId', 0);
+        _ts._loadEditor();
+      },
+      async postComment() {
+        let _ts = this;
+        _ts.$set(_ts, 'loading', true);
+        let commentContent = await _ts.contentEditor.getHTML();
+        if (!(commentContent)) {
+          _ts.$message("回帖内容不能为空！");
+          return false;
+        }
+        let comment = {
+          commentArticleId: _ts.postId,
+          commentContent: commentContent,
+          commentOriginalCommentId: _ts.commentOriginalCommentId,
+          commentAuthorId: _ts.user.idUser
+        };
+        _ts.$axios.$post('/api/comment/post', comment).then(function (res) {
+          if (res) {
+            if (res.message) {
+              _ts.$message(res.message);
+              return false;
+            }
+            _ts.contentEditor.setValue('');
+            _ts.$set(_ts, 'drawer', false);
+            _ts.getComments();
+          }
+          _ts.$set(_ts, 'loading', false);
+        })
+      },
+      getComments() {
+        // 每次重新获取数据时都需要回到评论框顶部，因为都是新数据
+        this.$store.dispatch('comment/fetchList', {
+          post_id: this.postId
+        })
+      },
+      gotoLogin() {
+        this.$router.push({
+          name: 'login'
+        })
+      },
+      // 取消回复
+      cancelCommentReply() {
+        this.commentOriginalCommentId = 0
+      }
+    },
+    watch: {
+      isFetching(isFetching) {
+        console.log(isFetching)
+        if (isFetching) {
+          this.cancelCommentReply()
+        }
+      }
+    },
+    destroyed() {
+      this.$store.commit('comment/clearListData')
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

components/layouts/mobile/header.vue

@@ -196,7 +196,7 @@
       getUnreadNotifications() {
         let _ts = this;
         if (_ts.isLogin) {
-          _ts.$axios.$get('/api/v1/notification/unread', {
+          _ts.$axios.$get('/api/notification/unread', {
             headers: {
               Authorization: _ts.$store.state.oauth?.accessToken
             }

components/layouts/pc/header.vue

@@ -196,10 +196,10 @@
       getUnreadNotifications() {
         let _ts = this;
         if (_ts.isLogin) {
-          _ts.$axios.$get('/api/v1/notification/unread').then(function (res) {
+          _ts.$axios.$get('/api/notification/unread').then(function (res) {
             if (res) {
-              _ts.$set(_ts, 'notifications', res.data.notifications);
+              _ts.$set(_ts, 'notifications', res.notifications);
-              _ts.$set(_ts, 'notificationNumbers', res.data.notifications.length == 0 ? "" : res.data.notifications.length);
+              _ts.$set(_ts, 'notificationNumbers', res.notifications.length == 0 ? "" : res.notifications.length);
             }
           })
         }

nuxt.config.js

@@ -2,7 +2,6 @@ import appConfig from './config/app.config'
 import apiConfig from './config/api.config'
 import {isProdMode, isDevMode} from './environment'
 
-
 export default {
   /*
   ** Nuxt rendering mode
@@ -13,7 +12,7 @@ export default {
   ** Render configuration
   */
   render: {
-    csp: true
+    csp: false
   },
   modern: true,
   dev: isDevMode,
@@ -52,9 +51,10 @@ export default {
   ** https://nuxtjs.org/guide/plugins
   */
   plugins: [
-    {src: '@/plugins/axios'},
+    {src: '~/plugins/extend'},
-    {src: '@/plugins/element-ui'},
+    {src: '~/plugins/axios'},
-    {src: '@/plugins/vditor', ssr: false}
+    {src: '~/plugins/element-ui'},
+    {src: '~/plugins/vditor', ssr: false}
   ],
   /*
   ** Nuxt.js dev-modules
@@ -64,10 +64,20 @@ export default {
   ** Nuxt.js modules
   */
   modules: [
-    ['@nuxtjs/axios', {baseURL: apiConfig.BASE}],
+    '@nuxtjs/axios',
+    '@nuxtjs/proxy',
     'js-cookie',
     'cookieparser'
   ],
+  axios: {
+    proxy: true  // 开启proxy
+  },
+  proxy: [  //proxy配置
+    ['/api', {
+      target:'https://rymcu.com/vertical-console/',  //api请求路径
+      pathRewrite: { '^/api' : '/api/v1' }  //重定向请求路径，防止路由、api路径的冲突
+    }]
+  ],
   /*
   ** Build configuration
   ** See https://nuxtjs.org/api/configuration-build/

package-lock.json

@@ -1471,21 +1471,28 @@
       }
     },
     "@nuxtjs/axios": {
-      "version": "5.11.0",
+      "version": "5.12.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.12.0.tgz",
-      "integrity": "sha1-J9cpemnhHDkDm5ysrGHi4NDgDx8=",
+      "integrity": "sha1-UGkjQOZOyDjxZ9KS1ZscwqDi2+8=",
       "requires": {
         "@nuxtjs/proxy": "^2.0.0",
         "axios": "^0.19.2",
         "axios-retry": "^3.1.8",
-        "consola": "^2.11.3",
+        "consola": "^2.14.0",
-        "defu": "^2.0.2"
+        "defu": "^2.0.4"
+      },
+      "dependencies": {
+        "consola": {
+          "version": "2.14.0",
+          "resolved": "https://registry.npm.taobao.org/consola/download/consola-2.14.0.tgz?cache=0&sync_timestamp=1593184572399&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fconsola%2Fdownload%2Fconsola-2.14.0.tgz",
+          "integrity": "sha1-Fi7pA7bJxN4lB32T80q5AuvLTaw="
+        }
       }
     },
     "@nuxtjs/proxy": {
-      "version": "2.0.0",
+      "version": "2.0.1",
-      "resolved": "https://registry.npm.taobao.org/@nuxtjs/proxy/download/@nuxtjs/proxy-2.0.0.tgz",
+      "resolved": "https://registry.npm.taobao.org/@nuxtjs/proxy/download/@nuxtjs/proxy-2.0.1.tgz",
-      "integrity": "sha1-zxmJTqxyGirYlik/JBNx8Ebbcec=",
+      "integrity": "sha1-JGm24xYxGqjGDTSFAqVL/m1VNqo=",
       "requires": {
         "consola": "^2.11.3",
         "http-proxy-middleware": "^1.0.4"
@@ -2261,6 +2268,29 @@
       "integrity": "sha1-PqNsXYgY0NX4qKl6bTa4bNwAyyc=",
       "requires": {
         "follow-redirects": "1.5.10"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npm.taobao.org/debug/download/debug-3.1.0.tgz",
+          "integrity": "sha1-W7WgZyYotkFJVmuhaBnmFRjGcmE=",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "follow-redirects": {
+          "version": "1.5.10",
+          "resolved": "https://registry.npm.taobao.org/follow-redirects/download/follow-redirects-1.5.10.tgz?cache=0&sync_timestamp=1592518530318&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffollow-redirects%2Fdownload%2Ffollow-redirects-1.5.10.tgz",
+          "integrity": "sha1-e3qfmuov3/NnhqlP9kPtB/T/Xio=",
+          "requires": {
+            "debug": "=3.1.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npm.taobao.org/ms/download/ms-2.0.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fms%2Fdownload%2Fms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+        }
       }
     },
     "axios-retry": {
@@ -3107,17 +3137,6 @@
         }
       }
     },
-    "clone-deep": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npm.taobao.org/clone-deep/download/clone-deep-4.0.1.tgz",
-      "integrity": "sha1-wZ/Zvbv4WUK0/ZechNz31fB8I4c=",
-      "dev": true,
-      "requires": {
-        "is-plain-object": "^2.0.4",
-        "kind-of": "^6.0.2",
-        "shallow-clone": "^3.0.0"
-      }
-    },
     "coa": {
       "version": "2.0.2",
       "resolved": "https://registry.npm.taobao.org/coa/download/coa-2.0.2.tgz",
@@ -4856,27 +4875,9 @@
       }
     },
     "follow-redirects": {
-      "version": "1.5.10",
+      "version": "1.12.1",
-      "resolved": "https://registry.npm.taobao.org/follow-redirects/download/follow-redirects-1.5.10.tgz?cache=0&sync_timestamp=1592518530318&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffollow-redirects%2Fdownload%2Ffollow-redirects-1.5.10.tgz",
+      "resolved": "https://registry.npm.taobao.org/follow-redirects/download/follow-redirects-1.12.1.tgz?cache=0&sync_timestamp=1592518530318&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffollow-redirects%2Fdownload%2Ffollow-redirects-1.12.1.tgz",
-      "integrity": "sha1-e3qfmuov3/NnhqlP9kPtB/T/Xio=",
+      "integrity": "sha1-3lSmIFMRuT1gOY68Ac9wFWgjErY="
-      "requires": {
-        "debug": "=3.1.0"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npm.taobao.org/debug/download/debug-3.1.0.tgz",
-          "integrity": "sha1-W7WgZyYotkFJVmuhaBnmFRjGcmE=",
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "ms": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npm.taobao.org/ms/download/ms-2.0.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fms%2Fdownload%2Fms-2.0.0.tgz",
-          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
-        }
-      }
     },
     "for-in": {
       "version": "1.0.2",
@@ -5595,14 +5596,14 @@
       }
     },
     "http-proxy-middleware": {
-      "version": "1.0.4",
+      "version": "1.0.5",
-      "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.5.tgz",
-      "integrity": "sha1-Ql6hd5hqDNo0+cgeyWHHGa22wqk=",
+      "integrity": "sha1-TG4l2VpBHj11C8ecz2YpBnUXbcI=",
       "requires": {
         "@types/http-proxy": "^1.17.4",
         "http-proxy": "^1.18.1",
         "is-glob": "^4.0.1",
-        "lodash": "^4.17.15",
+        "lodash": "^4.17.19",
         "micromatch": "^4.0.2"
       },
       "dependencies": {
@@ -5627,6 +5628,11 @@
           "resolved": "https://registry.npm.taobao.org/is-number/download/is-number-7.0.0.tgz",
           "integrity": "sha1-dTU0W4lnNNX4DE0GxQlVUnoU8Ss="
         },
+        "lodash": {
+          "version": "4.17.19",
+          "resolved": "https://registry.npm.taobao.org/lodash/download/lodash-4.17.19.tgz?cache=0&sync_timestamp=1594226827854&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Flodash%2Fdownload%2Flodash-4.17.19.tgz",
+          "integrity": "sha1-5I3e2+MLMyF4PFtDAfvTU7weSks="
+        },
         "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",
@@ -6298,6 +6304,12 @@
       "resolved": "https://registry.npm.taobao.org/kind-of/download/kind-of-6.0.3.tgz",
       "integrity": "sha1-B8BQNKbDSfoG4k+jWqdttFgM5N0="
     },
+    "klona": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npm.taobao.org/klona/download/klona-1.1.2.tgz?cache=0&sync_timestamp=1594031545393&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fklona%2Fdownload%2Fklona-1.1.2.tgz",
+      "integrity": "sha1-p54pJRilpUEuyNCXlkv/FXGmTbA=",
+      "dev": true
+    },
     "last-call-webpack-plugin": {
       "version": "3.0.0",
       "resolved": "https://registry.npm.taobao.org/last-call-webpack-plugin/download/last-call-webpack-plugin-3.0.0.tgz",
@@ -9348,23 +9360,28 @@
       }
     },
     "sass-loader": {
-      "version": "8.0.2",
+      "version": "9.0.2",
-      "resolved": "https://registry.npm.taobao.org/sass-loader/download/sass-loader-8.0.2.tgz",
+      "resolved": "https://registry.npm.taobao.org/sass-loader/download/sass-loader-9.0.2.tgz?cache=0&sync_timestamp=1594134152417&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsass-loader%2Fdownload%2Fsass-loader-9.0.2.tgz",
-      "integrity": "sha1-3r7NjDziQ8dkVPLoKQSCFQOACQ0=",
+      "integrity": "sha1-hHybTJUyjdyMfTXPKMnW5U5ZqQs=",
       "dev": true,
       "requires": {
-        "clone-deep": "^4.0.1",
+        "klona": "^1.1.1",
-        "loader-utils": "^1.2.3",
+        "loader-utils": "^2.0.0",
         "neo-async": "^2.6.1",
-        "schema-utils": "^2.6.1",
+        "schema-utils": "^2.7.0",
-        "semver": "^6.3.0"
+        "semver": "^7.3.2"
       },
       "dependencies": {
-        "semver": {
+        "loader-utils": {
-          "version": "6.3.0",
+          "version": "2.0.0",
-          "resolved": "https://registry.npm.taobao.org/semver/download/semver-6.3.0.tgz",
+          "resolved": "https://registry.npm.taobao.org/loader-utils/download/loader-utils-2.0.0.tgz?cache=0&sync_timestamp=1584445207623&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Floader-utils%2Fdownload%2Floader-utils-2.0.0.tgz",
-          "integrity": "sha1-7gpkyK9ejO6mdoexM3YeG+y9HT0=",
+          "integrity": "sha1-5MrOW4FtQloWa18JfhDNErNgZLA=",
-          "dev": true
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
         }
       }
     },
@@ -9541,15 +9558,6 @@
         "safe-buffer": "^5.0.1"
       }
     },
-    "shallow-clone": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npm.taobao.org/shallow-clone/download/shallow-clone-3.0.1.tgz",
-      "integrity": "sha1-jymBrZJTH1UDWwH7IwdppA4C76M=",
-      "dev": true,
-      "requires": {
-        "kind-of": "^6.0.2"
-      }
-    },
     "shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npm.taobao.org/shebang-command/download/shebang-command-2.0.0.tgz",
@@ -10747,11 +10755,11 @@
       "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw="
     },
     "vditor": {
-      "version": "3.3.3",
+      "version": "3.3.8",
-      "resolved": "https://registry.npm.taobao.org/vditor/download/vditor-3.3.3.tgz",
+      "resolved": "https://registry.npm.taobao.org/vditor/download/vditor-3.3.8.tgz",
-      "integrity": "sha1-+6sWvyWeBgqVAqqKFGlDpwzXV/E=",
+      "integrity": "sha1-1gucJNej4iA1LAu7qxWP9ek+lV8=",
       "requires": {
-        "diff-match-patch": "^1.0.4"
+        "diff-match-patch": "^1.0.5"
       }
     },
     "vendors": {

package.json

@@ -9,18 +9,18 @@
     "generate": "nuxt generate"
   },
   "dependencies": {
-    "@nuxtjs/axios": "^5.11.0",
+    "@nuxtjs/axios": "^5.12.0",
     "cookieparser": "^0.1.0",
     "cross-env": "^7.0.2",
     "element-ui": "^2.13.2",
     "express": "^4.17.1",
     "js-cookie": "^2.2.1",
     "nuxt": "^2.13.3",
-    "vditor": "^3.3.3"
+    "vditor": "^3.3.8"
   },
   "devDependencies": {
-    "@nuxtjs/proxy": "^2.0.0",
+    "@nuxtjs/proxy": "^2.0.1",
     "node-sass": "^4.14.1",
-    "sass-loader": "^8.0.2"
+    "sass-loader": "^9.0.2"
   }
 }

pages/article/_article_id.vue

@@ -19,7 +19,7 @@
                     <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-col :xs="12" :sm="12" :xl="12" v-if="user" class="text-right">
                   <el-dropdown trigger="click" @command="handleCommand">
                     <el-link :underline="false"><i class="el-icon-more"></i></el-link>
                     <el-dropdown-menu slot="dropdown">
@@ -82,39 +82,9 @@
           </div>
         </el-card>
       </el-col>
-      <el-col v-if="isLogin" style="margin-top: 1rem;">
-        <el-col :xs="2" :sm="1" :xl="1">
-          <el-avatar :src="avatar"></el-avatar>
-        </el-col>
-        <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-col v-else class="text-center" style="margin-top: 1rem;">
-        <el-button type="primary" size="medium" @click="gotoLogin">登录</el-button>
-        后发布评论
-      </el-col>
       <el-col>
-        <!--        <Comment :comments="article.articleComments" :reply="reply"></Comment>-->
+        <comment-box :fetching="isFetching" :user="user" :avatar="avatar" :title="article.articleTitle"
+        :post-id="routeArticleId"></comment-box>
       </el-col>
     </el-col>
     <el-col v-else>
@@ -137,7 +107,7 @@
         store
           .dispatch('article/fetchDetail', params)
           .catch(err => error({statusCode: 404})),
-        // store.dispatch('comment/fetchList', {post_id: params.article_id})
+        store.dispatch('comment/fetchList', {post_id: params.article_id})
       ])
     },
     computed: {
@@ -145,8 +115,8 @@
         article: state => state.article.detail.data,
         isFetching: state => state.article.detail.fetching,
         isMobile: state => state.global.isMobile,
-        isLogin: state => state.oauth,
+        user: state => state.oauth,
-        avatar: state => state.oauth?.avatarURL,
+        avatar: state => state.oauth?.avatarURL
       }),
       hasPermissions() {
         let account = this.$store.state.oauth?.nickname;
@@ -156,6 +126,9 @@
           }
         }
         return this.$store.getters.hasPermissions('blog_admin');
+      },
+      routeArticleId() {
+        return Number(this.$route.params.article_id)
       }
     },
     head() {
@@ -226,7 +199,7 @@
             }
           })
         } else {
-          _ts.$axios.$get('/api/v1/article/' + _ts.article.idArticle + '/share').then(function (res) {
+          _ts.$axios.$get('/api/article/' + _ts.article.idArticle + '/share').then(function (res) {
             if (res) {
               _ts.$set(_ts, 'shareData', res);
               _ts.$set(_ts, 'isShare', true);
@@ -241,7 +214,7 @@
       }
     },
     mounted() {
-      this.$store.commit('setActiveMenu', 'articleDetail')
+      this.$store.commit('setActiveMenu', 'articleDetail');
       Vue.nextTick(() => {
         const previewElement = document.getElementById("articleContent");
         // //const outLineElement = document.getElementById("articleToC");
@@ -258,6 +231,7 @@
         Vue.VditorPreview.abcRender(previewElement);
         Vue.VditorPreview.mediaRender(previewElement);
         //VditorPreview.outlineRender(previewElement, outLineElement);
+        window.scrollTo(0,0);
       })
     }
 

pages/login.vue

@@ -86,7 +86,7 @@
               password: _ts.user.password
             }
 
-            _ts.$axios.$post('/api/v1/console/login', data).then(function (res) {
+            _ts.$axios.$post('/api/console/login', data).then(function (res) {
               if (res) {
                 if (res.message) {
                   _ts.$message(res.message);
@@ -96,6 +96,7 @@
                   accessToken: res.user.token,
                   nickname: res.user.nickname,
                   avatarURL: res.user.avatarUrl,
+                  idUser: res.user.idUser,
                   role: res.user.weights
                 }
                 _ts.$store.commit('setAuth', auth) // mutating to store for client rendering

pages/register.vue

@@ -63,7 +63,7 @@
         let data = {
           email: email
         }
-        _ts.$axios.$get('/api/v1/console/get-email-code', {
+        _ts.$axios.$get('/api/console/get-email-code', {
           params: data
         }).then(response => {
           if (response.data) {
@@ -82,7 +82,7 @@
               password: _ts.user.password,
               code: _ts.user.code
             }
-            _ts.$axios.$post('/api/v1/console/register', data).then(function (res) {
+            _ts.$axios.$post('/api/console/register', data).then(function (res) {
               if (res) {
                 _ts.$message(res.message);
                 if (res.flag && res.flag === 1) {

plugins/extend.js

@@ -0,0 +1,3 @@
+import Vue from 'vue'
+import CommentBox from '~/components/common/comment'
+Vue.use(CommentBox)

plugins/vditor.js

@@ -1,4 +1,7 @@
 import Vue from 'vue';
 import VditorPreview from 'vditor/dist/method.min';
 
-Vue.VditorPreview = VditorPreview
+import Vditor from 'vditor';
+
+Vue.VditorPreview = VditorPreview;
+Vue.Vditor = Vditor

store/article.js

@@ -1,7 +1,7 @@
 import Vue from 'vue';
 import { isBrowser } from '~/environment';
 
-export const ARTICLE_API_PATH = '/api/v1/console'
+export const ARTICLE_API_PATH = '/api/console'
 
 const getDefaultListData = () => {
   return {

store/comment.js

@@ -0,0 +1,117 @@
+/**
+ * @file 评论数据状态 / ES module
+ * @module store/comment
+ * @author Surmon <https://github.com/surmon-china>
+ */
+
+export const COMMENT_API_PATH = '/api/article/'
+export const LIKE_COMMENT_API_PATH = '/like/comment'
+
+const getDefaultListData = () => {
+  return {
+    data: [],
+    pagination: {}
+  }
+}
+
+export const state = () => {
+  return {
+    fetching: false,
+    posting: false,
+    data: getDefaultListData()
+  }
+}
+
+export const mutations = {
+  // 请求列表
+  updateListFetching(state, action) {
+    state.fetching = action
+  },
+  updateListData(state, action) {
+    state.data =  {
+      data: action.comments,
+      pagination: {
+        page: 1
+      }
+    }
+  },
+  clearListData(state) {
+    state.data = getDefaultListData()
+  },
+
+  // 发布评论
+  updatePostFetching(state, action) {
+    state.posting = action
+  },
+  updateListNewItemData(state, action) {
+    state.data.pagination.total += 1
+    state.data.data.push(action.result)
+  },
+
+  // 喜欢某条评论
+  updateLikesIncrement(state, action) {
+    state.data.data.find(comment => {
+      const isMatched = comment.id === action.id
+      isMatched && comment.likes++
+      return isMatched
+    })
+  }
+}
+
+export const actions = {
+  fetchList({ commit, rootState }, params = {}) {
+    // const { SortType } = rootState.global.constants
+
+    // 修正参数
+    // params = Object.assign(
+    //   {
+    //     page: 1,
+    //     per_page: 88
+    //   },
+    //   params
+    // )
+
+    // const isRestart = params.page === 1
+    // const isDescSort = params.sort === SortType.Desc
+
+    // 清空数据
+    // isRestart && commit('updateListData', getDefaultListData())
+    commit('updateListData', getDefaultListData())
+    commit('updateListFetching', true)
+
+    return this.$axios
+      .$get(COMMENT_API_PATH + `${params.post_id}/comments`)
+      .then(response => {
+        // isDescSort && response.result.data.reverse()
+        commit('updateListData', response)
+        commit('updateListFetching', false)
+      })
+      .catch(error => commit('updateListFetching', false))
+  },
+
+  // 发布评论
+  fetchPostComment({ commit }, comment) {
+    commit('updatePostFetching', true)
+    return this.$axios
+      .$post(COMMENT_API_PATH, comment)
+      .then(response => {
+        commit('updateListNewItemData', response)
+        commit('updatePostFetching', false)
+        return Promise.resolve(response)
+      })
+      .catch(error => {
+        commit('updatePostFetching', false)
+        return Promise.reject(error)
+      })
+  },
+
+  // 喜欢评论
+  fetchLikeComment({ commit }, comment) {
+    return this.$axios
+      .$patch(LIKE_COMMENT_API_PATH, { comment_id: comment.id })
+      .then(response => {
+        commit('updateLikesIncrement', comment)
+        return Promise.resolve(response)
+      })
+  }
+}

store/index.js

@@ -3,7 +3,8 @@ const cookieparser = process.server ? require('cookieparser') : undefined
 export const state = () => {
   return {
     activeMenu: 'index',
-    oauth: null
+    oauth: null,
+    locale: 'zh_CN'
   }
 }