From f2490e538458a33929f521878ab4a8e8b23d4dfb Mon Sep 17 00:00:00 2001
From: ruibaby <i@ryanc.cc>
Date: Tue, 14 May 2019 22:58:38 +0800
Subject: [PATCH] Refactor recent comment list.

---
 src/components/Tools/HeaderComment.vue        | 180 ++++++++--------
 src/components/global.less                    |   9 +
 src/views/dashboard/Dashboard.vue             | 138 +++---------
 .../dashboard/components/RecentCommentTab.vue |  96 +++++++++
 src/views/interface/ThemeList.vue             |  78 +++----
 src/views/system/OptionForm.vue               | 196 +++++++++---------
 6 files changed, 368 insertions(+), 329 deletions(-)
 create mode 100644 src/views/dashboard/components/RecentCommentTab.vue

diff --git a/src/components/Tools/HeaderComment.vue b/src/components/Tools/HeaderComment.vue
index 1c6ff3ba..4fd3358c 100644
--- a/src/components/Tools/HeaderComment.vue
+++ b/src/components/Tools/HeaderComment.vue
@@ -11,95 +11,97 @@
   >
     <template slot="content">
       <a-spin :spinning="loadding">
-        <a-tabs>
-          <a-tab-pane
-            tab="文章"
-            key="1"
-          >
-            <a-list :dataSource="converttedPostComments">
-              <a-list-item
-                slot="renderItem"
-                slot-scope="item"
-              >
-                <a-list-item-meta>
-                  <a-avatar
-                    style="background-color: white"
-                    slot="avatar"
-                    :src="'https://gravatar.loli.net/avatar/' + item.gavatarMd5 + '&d=mm'"
-                    size="large"
-                  />
-                  <template slot="title">
-                    <a
-                      :href="item.authorUrl"
-                      target="_blank"
-                    >{{ item.author }}</a>：<span v-html="item.content"></span>
-                  </template>
-                  <template slot="description">
-                    {{ item.createTime | timeAgo }}
-                  </template>
-                </a-list-item-meta>
-              </a-list-item>
-            </a-list>
-          </a-tab-pane>
-          <a-tab-pane
-            tab="页面"
-            key="2"
-          >
-            <a-list :dataSource="converttedSheetComments">
-              <a-list-item
-                slot="renderItem"
-                slot-scope="item"
-              >
-                <a-list-item-meta>
-                  <a-avatar
-                    style="background-color: white"
-                    slot="avatar"
-                    :src="'https://gravatar.loli.net/avatar/' + item.gavatarMd5 + '&d=mm'"
-                    size="large"
-                  />
-                  <template slot="title">
-                    <a
-                      :href="item.authorUrl"
-                      target="_blank"
-                    >{{ item.author }}</a>：<span v-html="item.content"></span>
-                  </template>
-                  <template slot="description">
-                    {{ item.createTime | timeAgo }}
-                  </template>
-                </a-list-item-meta>
-              </a-list-item>
-            </a-list>
-          </a-tab-pane>
-          <a-tab-pane
-            tab="日志"
-            key="3"
-          >
-            <a-list :dataSource="converttedJournalComments">
-              <a-list-item
-                slot="renderItem"
-                slot-scope="item"
-              >
-                <a-list-item-meta>
-                  <a-avatar
-                    style="background-color: white"
-                    slot="avatar"
-                    :src="'https://gravatar.loli.net/avatar/' + item.gavatarMd5 + '&d=mm'"
-                    size="large"
-                  />
-                  <template slot="title">
-                    <a
-                      :href="item.authorUrl"
-                      target="_blank"
-                    >{{ item.author }}</a>：<span v-html="item.content"></span>
-                  </template>
-                  <template slot="description">
-                    {{ item.createTime | timeAgo }}
-                  </template>
-                </a-list-item-meta>
-              </a-list-item>
-            </a-list>
-          </a-tab-pane>
-        </a-tabs>
+        <div class="custom-tab-wrapper">
+          <a-tabs>
+            <a-tab-pane
+              tab="文章"
+              key="1"
+            >
+              <a-list :dataSource="converttedPostComments">
+                <a-list-item
+                  slot="renderItem"
+                  slot-scope="item"
+                >
+                  <a-list-item-meta>
+                    <a-avatar
+                      style="background-color: white"
+                      slot="avatar"
+                      :src="'https://gravatar.loli.net/avatar/' + item.gavatarMd5 + '&d=mm'"
+                      size="large"
+                    />
+                    <template slot="title">
+                      <a
+                        :href="item.authorUrl"
+                        target="_blank"
+                      >{{ item.author }}</a>：<span v-html="item.content"></span>
+                    </template>
+                    <template slot="description">
+                      {{ item.createTime | timeAgo }}
+                    </template>
+                  </a-list-item-meta>
+                </a-list-item>
+              </a-list>
+            </a-tab-pane>
+            <a-tab-pane
+              tab="页面"
+              key="2"
+            >
+              <a-list :dataSource="converttedSheetComments">
+                <a-list-item
+                  slot="renderItem"
+                  slot-scope="item"
+                >
+                  <a-list-item-meta>
+                    <a-avatar
+                      style="background-color: white"
+                      slot="avatar"
+                      :src="'https://gravatar.loli.net/avatar/' + item.gavatarMd5 + '&d=mm'"
+                      size="large"
+                    />
+                    <template slot="title">
+                      <a
+                        :href="item.authorUrl"
+                        target="_blank"
+                      >{{ item.author }}</a>：<span v-html="item.content"></span>
+                    </template>
+                    <template slot="description">
+                      {{ item.createTime | timeAgo }}
+                    </template>
+                  </a-list-item-meta>
+                </a-list-item>
+              </a-list>
+            </a-tab-pane>
+            <a-tab-pane
+              tab="日志"
+              key="3"
+            >
+              <a-list :dataSource="converttedJournalComments">
+                <a-list-item
+                  slot="renderItem"
+                  slot-scope="item"
+                >
+                  <a-list-item-meta>
+                    <a-avatar
+                      style="background-color: white"
+                      slot="avatar"
+                      :src="'https://gravatar.loli.net/avatar/' + item.gavatarMd5 + '&d=mm'"
+                      size="large"
+                    />
+                    <template slot="title">
+                      <a
+                        :href="item.authorUrl"
+                        target="_blank"
+                      >{{ item.author }}</a>：<span v-html="item.content"></span>
+                    </template>
+                    <template slot="description">
+                      {{ item.createTime | timeAgo }}
+                    </template>
+                  </a-list-item-meta>
+                </a-list-item>
+              </a-list>
+            </a-tab-pane>
+          </a-tabs>
+        </div>
       </a-spin>
     </template>
     <span
diff --git a/src/components/global.less b/src/components/global.less
index 22fbefde..ddf64b07 100644
--- a/src/components/global.less
+++ b/src/components/global.less
@@ -634,6 +634,15 @@ body {
   background: transparent !important;
 }
 
+.custom-tab-wrapper {
+  .ant-tabs-nav {
+    .ant-tabs-tab {
+      margin: 0 24px 0 0;
+      padding: 12px 0;
+    }
+  }
+}
+
 .comment-content-wrapper {
   h1 {
     font-size: 18px;
diff --git a/src/views/dashboard/Dashboard.vue b/src/views/dashboard/Dashboard.vue
index 47d3cd02..a2e4f595 100644
--- a/src/views/dashboard/Dashboard.vue
+++ b/src/views/dashboard/Dashboard.vue
@@ -104,14 +104,11 @@
           :bodyStyle="{ padding: 0 }"
         >
           <div class="card-container">
-            <a-tabs
-              defaultActiveKey="1"
-              type="card"
-            >
-              <a-tab-pane key="1">
-                <span slot="tab">
-                  最近文章
-                </span>
+            <a-tabs type="card">
+              <a-tab-pane
+                key="1"
+                tab="最近文章"
+              >
                 <a-list :dataSource="postData">
                   <a-list-item
                     slot="renderItem"
@@ -131,40 +128,30 @@
               </a-tab-pane>
               <a-tab-pane
                 key="2"
-                forceRender
+                tab="最近评论"
               >
-                <span slot="tab">
-                  最近评论
-                </span>
-                <a-list
-                  itemLayout="horizontal"
-                  :dataSource="formmatedCommentData"
-                >
-                  <a-list-item
-                    slot="renderItem"
-                    slot-scope="item, index"
-                    :key="index"
-                  >
-                    <a-comment :avatar="'//gravatar.loli.net/avatar/'+item.gavatarMd5+'/?s=256&d=mp'">
-                      <template slot="author">
-                        {{ item.author }} 发表在 《<a
-                          href="javascript:void(0);"
-                          target="_blank"
-                        >{{ item.post.title }}</a>》
-                      </template>
-                      <template slot="actions">
-                        <span @click="handleCommentReplyClick(item)">回复</span>
-                      </template>
-                      <p class="comment-content-wrapper" slot="content" v-html="item.content"></p>
-                      <a-tooltip
-                        slot="datetime"
-                        :title="item.createTime | moment"
-                      >
-                        <span>{{ item.createTime | timeAgo }}</span>
-                      </a-tooltip>
-                    </a-comment>
-                  </a-list-item>
-                </a-list>
+                <div class="custom-tab-wrapper">
+                  <a-tabs>
+                    <a-tab-pane
+                      tab="文章"
+                      key="1"
+                    >
+                      <recent-comment-tab type="post"></recent-comment-tab>
+                    </a-tab-pane>
+                    <a-tab-pane
+                      tab="页面"
+                      key="2"
+                    >
+                      <recent-comment-tab type="sheet"></recent-comment-tab>
+                    </a-tab-pane>
+                    <a-tab-pane
+                      tab="日志"
+                      key="3"
+                    >
+                      <recent-comment-tab type="journal"></recent-comment-tab>
+                    </a-tab-pane>
+                  </a-tabs>
+                </div>
               </a-tab-pane>
             </a-tabs>
           </div>
@@ -302,42 +289,16 @@
         </a-popconfirm>
       </div>
     </a-drawer>
-
-    <a-modal
-      v-if="selectComment"
-      :title="'回复给：'+selectComment.author"
-      v-model="selectCommentVisible"
-    >
-      <template slot="footer">
-        <a-button
-          key="submit"
-          type="primary"
-          @click="handleReplyComment"
-        >
-          回复
-        </a-button>
-      </template>
-      <a-form layout="vertical">
-        <a-form-item>
-          <a-input
-            type="textarea"
-            :autosize="{ minRows: 8 }"
-            v-model="replyComment.content"
-          />
-        </a-form-item>
-      </a-form>
-    </a-modal>
   </page-view>
 </template>
 
 <script>
 import { PageView } from '@/layouts'
 import AnalysisCard from './components/AnalysisCard'
+import RecentCommentTab from './components/RecentCommentTab'
 import { mixin, mixinDevice } from '@/utils/mixin.js'
-import marked from 'marked'
 
 import postApi from '@/api/post'
-import postCommentApi from '@/api/postComment'
 import logApi from '@/api/log'
 import adminApi from '@/api/admin'
 import journalApi from '@/api/journal'
@@ -346,7 +307,8 @@ export default {
   mixins: [mixin, mixinDevice],
   components: {
     PageView,
-    AnalysisCard
+    AnalysisCard,
+    RecentCommentTab
   },
   data() {
     return {
@@ -357,25 +319,20 @@ export default {
       countsLoading: true,
       logDrawerVisiable: false,
       postData: [],
-      commentData: [],
       logData: [],
       countsData: {},
       journal: {},
+      logs: [],
       logPagination: {
         page: 1,
         size: 50,
         sort: null
-      },
-      logs: [],
-      selectCommentVisible: false,
-      selectComment: null,
-      replyComment: {}
+      }
     }
   },
   created() {
     this.getCounts()
     this.listLatestPosts()
-    this.listLatestComments()
     this.listLatestLogs()
   },
   computed: {
@@ -397,12 +354,6 @@ export default {
         log.type = this.logType[log.type].text
         return log
       })
-    },
-    formmatedCommentData() {
-      return this.commentData.map(comment => {
-        comment.content = marked(comment.content, { sanitize: true })
-        return comment
-      })
     }
   },
   methods: {
@@ -412,17 +363,11 @@ export default {
         this.activityLoading = false
       })
     },
-    listLatestComments() {
-      postCommentApi.listLatest(5, 'PUBLISHED').then(response => {
-        this.commentData = response.data.data
-        this.activityLoading = false
-        this.writeLoading = false
-      })
-    },
     listLatestLogs() {
       logApi.listLatest(5).then(response => {
         this.logData = response.data.data
         this.logLoading = false
+        this.writeLoading = false
       })
     },
     getCounts() {
@@ -458,21 +403,6 @@ export default {
         this.listLatestLogs()
       })
     },
-    handleCommentReplyClick(comment) {
-      this.selectComment = comment
-      this.selectCommentVisible = true
-      this.replyComment.parentId = comment.id
-      this.replyComment.postId = comment.post.id
-    },
-    handleReplyComment() {
-      postCommentApi.create(this.replyComment).then(response => {
-        this.$message.success('回复成功！')
-        this.replyComment = {}
-        this.selectComment = {}
-        this.selectCommentVisible = false
-        this.listLatestComments()
-      })
-    },
     onPaginationChange(page, pageSize) {
       this.$log.debug(`Current: ${page}, PageSize: ${pageSize}`)
       this.logPagination.page = page
diff --git a/src/views/dashboard/components/RecentCommentTab.vue b/src/views/dashboard/components/RecentCommentTab.vue
new file mode 100644
index 00000000..6d370b6c
--- /dev/null
+++ b/src/views/dashboard/components/RecentCommentTab.vue
@@ -0,0 +1,96 @@
+<template>
+  <a-list
+    itemLayout="horizontal"
+    :dataSource="formmatedCommentData"
+    :loading="loading"
+  >
+    <a-list-item
+      slot="renderItem"
+      slot-scope="item, index"
+      :key="index"
+    >
+      <a-comment :avatar="'//gravatar.loli.net/avatar/'+item.gavatarMd5+'/?s=256&d=mp'">
+        <template slot="author">
+          {{ item.author }} 发表在 《<a
+            href="javascript:void(0);"
+            target="_blank"
+          >{{ item.post.title }}</a>》
+        </template>
+        <template slot="actions">
+          <span>回复</span>
+        </template>
+        <p
+          class="comment-content-wrapper"
+          slot="content"
+          v-html="item.content"
+        ></p>
+        <a-tooltip
+          slot="datetime"
+          :title="item.createTime | moment"
+        >
+          <span>{{ item.createTime | timeAgo }}</span>
+        </a-tooltip>
+      </a-comment>
+    </a-list-item>
+  </a-list>
+</template>
+
+<script>
+import commentApi from '@/api/comment'
+import marked from 'marked'
+export default {
+  name: 'RecentCommentTab',
+  props: {
+    type: {
+      type: String,
+      required: false,
+      default: 'post',
+      validator: function(value) {
+        return ['post', 'sheet', 'journal'].indexOf(value) !== -1
+      }
+    }
+  },
+  data() {
+    return {
+      comments: [],
+      loading: false
+    }
+  },
+  computed: {
+    formmatedCommentData() {
+      return this.comments.map(comment => {
+        comment.content = marked(comment.content, { sanitize: true })
+        return comment
+      })
+    }
+  },
+  created() {
+    this.loadComments()
+  },
+  methods: {
+    loadComments() {
+      this.loading = true
+      switch (this.type) {
+        case 'post':
+          commentApi.latestPostComment(5, 'PUBLISHED').then(response => {
+            this.comments = response.data.data
+            this.loading = false
+          })
+          break
+        case 'sheet':
+          commentApi.latestSheetComment(5, 'PUBLISHED').then(response => {
+            this.comments = response.data.data
+            this.loading = false
+          })
+          break
+        case 'journal':
+          commentApi.latestJournalComment(5, 'PUBLISHED').then(response => {
+            this.comments = response.data.data
+            this.loading = false
+          })
+          break
+      }
+    }
+  }
+}
+</script>
diff --git a/src/views/interface/ThemeList.vue b/src/views/interface/ThemeList.vue
index 538b0c8a..22d180d7 100644
--- a/src/views/interface/ThemeList.vue
+++ b/src/views/interface/ThemeList.vue
@@ -110,9 +110,7 @@
                 :src="themeProperty.screenshots"
                 slot="cover"
               >
-              <a-card-meta
-                :description="themeProperty.description"
-              >
+              <a-card-meta :description="themeProperty.description">
                 <template slot="title">
                   <a
                     :href="themeProperty.author.website"
@@ -256,43 +254,45 @@
       :footer="null"
       :bodyStyle="{ padding: '0 24px 24px' }"
     >
-      <a-tabs defaultActiveKey="1">
-        <a-tab-pane
-          tab="本地上传"
-          key="1"
-        >
-          <upload
-            name="file"
-            multiple
-            accept="application/zip"
-            :uploadHandler="uploadHandler"
-            @change="handleChange"
-            @success="handleUploadSuccess"
+      <div class="custom-tab-wrapper">
+        <a-tabs>
+          <a-tab-pane
+            tab="本地上传"
+            key="1"
           >
-            <p class="ant-upload-drag-icon">
-              <a-icon type="inbox" />
-            </p>
-            <p class="ant-upload-text">点击选择主题或将主题拖拽到此处</p>
-            <p class="ant-upload-hint">支持单个或批量上传，仅支持 ZIP 格式的文件</p>
-          </upload>
-        </a-tab-pane>
-        <a-tab-pane
-          tab="远程拉取"
-          key="2"
-        >
-          <a-form layout="vertical">
-            <a-form-item label="远程地址：">
-              <a-input v-model="fetchingUrl" />
-            </a-form-item>
-            <a-form-item>
-              <a-button
-                type="primary"
-                @click="handleFetching"
-              >确定</a-button>
-            </a-form-item>
-          </a-form>
-        </a-tab-pane>
-      </a-tabs>
+            <upload
+              name="file"
+              multiple
+              accept="application/zip"
+              :uploadHandler="uploadHandler"
+              @change="handleChange"
+              @success="handleUploadSuccess"
+            >
+              <p class="ant-upload-drag-icon">
+                <a-icon type="inbox" />
+              </p>
+              <p class="ant-upload-text">点击选择主题或将主题拖拽到此处</p>
+              <p class="ant-upload-hint">支持单个或批量上传，仅支持 ZIP 格式的文件</p>
+            </upload>
+          </a-tab-pane>
+          <a-tab-pane
+            tab="远程拉取"
+            key="2"
+          >
+            <a-form layout="vertical">
+              <a-form-item label="远程地址：">
+                <a-input v-model="fetchingUrl" />
+              </a-form-item>
+              <a-form-item>
+                <a-button
+                  type="primary"
+                  @click="handleFetching"
+                >确定</a-button>
+              </a-form-item>
+            </a-form>
+          </a-tab-pane>
+        </a-tabs>
+      </div>
     </a-modal>
   </div>
 </template>
diff --git a/src/views/system/OptionForm.vue b/src/views/system/OptionForm.vue
index d580160d..5c1d039a 100644
--- a/src/views/system/OptionForm.vue
+++ b/src/views/system/OptionForm.vue
@@ -415,104 +415,106 @@
               <span slot="tab">
                 <a-icon type="mail" />SMTP 服务
               </span>
-              <a-tabs defaultActiveKey="1">
-                <a-tab-pane
-                  tab="发信设置"
-                  key="1"
-                >
-                  <a-form layout="vertical">
-                    <a-form-item
-                      label="是否启用："
-                      :wrapper-col="wrapperCol"
-                    >
-                      <a-switch v-model="options.email_enabled" />
-                    </a-form-item>
-                    <a-form-item
-                      label="SMTP 地址："
-                      :wrapper-col="wrapperCol"
-                    >
-                      <a-input v-model="options.email_host" />
-                    </a-form-item>
-                    <a-form-item
-                      label="发送协议："
-                      :wrapper-col="wrapperCol"
-                    >
-                      <a-input v-model="options.email_protocol" />
-                    </a-form-item>
-                    <a-form-item
-                      label="SSL 端口："
-                      :wrapper-col="wrapperCol"
-                    >
-                      <a-input v-model="options.email_ssl_port" />
-                    </a-form-item>
-                    <a-form-item
-                      label="邮箱账号："
-                      :wrapper-col="wrapperCol"
-                    >
-                      <a-input v-model="options.email_username" />
-                    </a-form-item>
-                    <a-form-item
-                      label="邮箱密码："
-                      :wrapper-col="wrapperCol"
-                    >
-                      <a-tooltip
-                        :trigger="['focus']"
-                        placement="right"
-                        title="部分邮箱可能是授权码"
+              <div class="custom-tab-wrapper">
+                <a-tabs>
+                  <a-tab-pane
+                    tab="发信设置"
+                    key="1"
+                  >
+                    <a-form layout="vertical">
+                      <a-form-item
+                        label="是否启用："
+                        :wrapper-col="wrapperCol"
                       >
-                        <a-input v-model="options.email_password" />
-                      </a-tooltip>
-                    </a-form-item>
-                    <a-form-item
-                      label="发件人："
-                      :wrapper-col="wrapperCol"
-                    >
-                      <a-input v-model="options.email_from_name" />
-                    </a-form-item>
-                    <a-form-item>
-                      <a-button
-                        type="primary"
-                        @click="handleSaveOptions"
-                      >保存</a-button>
-                    </a-form-item>
-                  </a-form>
-                </a-tab-pane>
-                <a-tab-pane
-                  tab="发送测试"
-                  key="2"
-                >
-                  <a-form layout="vertical">
-                    <a-form-item
-                      label="收件人："
-                      :wrapper-col="wrapperCol"
-                    >
-                      <a-input v-model="mailParam.to" />
-                    </a-form-item>
-                    <a-form-item
-                      label="主题："
-                      :wrapper-col="wrapperCol"
-                    >
-                      <a-input v-model="mailParam.subject" />
-                    </a-form-item>
-                    <a-form-item
-                      label="内容："
-                      :wrapper-col="wrapperCol"
-                    >
-                      <a-input
-                        type="textarea"
-                        :autosize="{ minRows: 5 }"
-                        v-model="mailParam.content"
-                      />
-                    </a-form-item>
-                    <a-form-item>
-                      <a-button
-                        type="primary"
-                        @click="handleTestMailClick"
-                      >发送</a-button>
-                    </a-form-item>
-                  </a-form>
-                </a-tab-pane>
-              </a-tabs>
+                        <a-switch v-model="options.email_enabled" />
+                      </a-form-item>
+                      <a-form-item
+                        label="SMTP 地址："
+                        :wrapper-col="wrapperCol"
+                      >
+                        <a-input v-model="options.email_host" />
+                      </a-form-item>
+                      <a-form-item
+                        label="发送协议："
+                        :wrapper-col="wrapperCol"
+                      >
+                        <a-input v-model="options.email_protocol" />
+                      </a-form-item>
+                      <a-form-item
+                        label="SSL 端口："
+                        :wrapper-col="wrapperCol"
+                      >
+                        <a-input v-model="options.email_ssl_port" />
+                      </a-form-item>
+                      <a-form-item
+                        label="邮箱账号："
+                        :wrapper-col="wrapperCol"
+                      >
+                        <a-input v-model="options.email_username" />
+                      </a-form-item>
+                      <a-form-item
+                        label="邮箱密码："
+                        :wrapper-col="wrapperCol"
+                      >
+                        <a-tooltip
+                          :trigger="['focus']"
+                          placement="right"
+                          title="部分邮箱可能是授权码"
+                        >
+                          <a-input v-model="options.email_password" />
+                        </a-tooltip>
+                      </a-form-item>
+                      <a-form-item
+                        label="发件人："
+                        :wrapper-col="wrapperCol"
+                      >
+                        <a-input v-model="options.email_from_name" />
+                      </a-form-item>
+                      <a-form-item>
+                        <a-button
+                          type="primary"
+                          @click="handleSaveOptions"
+                        >保存</a-button>
+                      </a-form-item>
+                    </a-form>
+                  </a-tab-pane>
+                  <a-tab-pane
+                    tab="发送测试"
+                    key="2"
+                  >
+                    <a-form layout="vertical">
+                      <a-form-item
+                        label="收件人："
+                        :wrapper-col="wrapperCol"
+                      >
+                        <a-input v-model="mailParam.to" />
+                      </a-form-item>
+                      <a-form-item
+                        label="主题："
+                        :wrapper-col="wrapperCol"
+                      >
+                        <a-input v-model="mailParam.subject" />
+                      </a-form-item>
+                      <a-form-item
+                        label="内容："
+                        :wrapper-col="wrapperCol"
+                      >
+                        <a-input
+                          type="textarea"
+                          :autosize="{ minRows: 5 }"
+                          v-model="mailParam.content"
+                        />
+                      </a-form-item>
+                      <a-form-item>
+                        <a-button
+                          type="primary"
+                          @click="handleTestMailClick"
+                        >发送</a-button>
+                      </a-form-item>
+                    </a-form>
+                  </a-tab-pane>
+                </a-tabs>
+              </div>
             </a-tab-pane>
             <a-tab-pane key="other">
               <span slot="tab">