refactor: pages (#83)

* 1.3.0-beta.2

* refactor: extraction of some components.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "halo-admin",
-  "version": "1.3.0-beta.1",
+  "version": "1.3.0-beta.2",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",

src/config/router.config.js

@@ -185,13 +185,13 @@ export const asyncRouterMap = [
             component: () => import('@/views/system/ToolList'),
             meta: { title: '小工具', hiddenHeaderContent: false }
           },
-          {
-            path: '/system/tools/staticpages',
-            name: 'StaticPagesManage',
-            hidden: true,
-            component: () => import('@/views/system/staticpages/StaticPagesManage'),
-            meta: { title: '静态部署', hiddenHeaderContent: false }
-          },
+          // {
+          //   path: '/system/tools/staticpages',
+          //   name: 'StaticPagesManage',
+          //   hidden: true,
+          //   component: () => import('@/views/system/staticpages/StaticPagesManage'),
+          //   meta: { title: '静态部署', hiddenHeaderContent: false }
+          // },
           {
             path: '/system/about',
             name: 'About',

src/views/dashboard/Dashboard.vue

@@ -10,7 +10,7 @@
         :style="{ marginBottom: '12px' }"
       >
         <analysis-card
-          :loading="countsLoading"
+          :loading="statisticsLoading"
           title="文章"
           :number="statisticsData.postCount"
         >
@@ -31,7 +31,7 @@
         :style="{ marginBottom: '12px' }"
       >
         <analysis-card
-          :loading="countsLoading"
+          :loading="statisticsLoading"
           title="评论"
           :number="statisticsData.commentCount"
         >
@@ -52,18 +52,13 @@
         :style="{ marginBottom: '12px' }"
       >
         <analysis-card
-          :loading="countsLoading"
+          :loading="statisticsLoading"
           title="阅读量"
           :number="statisticsData.visitCount"
         >
           <a-tooltip slot="action">
             <template slot="title">
-              文章阅读共
-              <countTo
-                :startVal="0"
-                :endVal="statisticsData.visitCount"
-                :duration="3000"
-              ></countTo>次
+              文章阅读共 {{ statisticsData.visitCount }} 次
             </template>
             <a href="javascript:void(0);">
               <a-icon type="info-circle-o" />
@@ -80,7 +75,7 @@
         :style="{ marginBottom: '12px' }"
       >
         <analysis-card
-          :loading="countsLoading"
+          :loading="statisticsLoading"
           title="建立天数"
           :number="statisticsData.establishDays"
         >
@@ -114,7 +109,7 @@
                 key="1"
                 tab="最近文章"
               >
-                <a-list :dataSource="postData">
+                <a-list :dataSource="latestPosts">
                   <a-list-item
                     slot="renderItem"
                     slot-scope="item, index"
@@ -134,11 +129,12 @@
                         @click="handlePostPreview(item.id)"
                       >{{ item.title }}</a>
                       <a
-                        v-else
+                        v-else-if="item.status=='RECYCLE'"
+                        slot="title"
                         href="javascript:void(0);"
                         disabled
                       >
-                        {{ text }}
+                        {{ item.title }}
                       </a>
                     </a-list-item-meta>
                     <div>{{ item.createTime | timeAgo }}</div>
@@ -237,7 +233,7 @@
             >
               <a
                 href="javascript:void(0);"
-                @click="handleShowLogDrawer"
+                @click="()=>this.logListDrawerVisible = true"
               >
                 <a-icon type="ellipsis" />
               </a>
@@ -259,72 +255,18 @@
       </a-col>
     </a-row>
 
-    <a-drawer
-      title="操作日志"
-      :width="isMobile()?'100%':'480'"
-      closable
-      :visible="logDrawerVisible"
-      destroyOnClose
-      @close="()=>this.logDrawerVisible = false"
-    >
-      <a-row
-        type="flex"
-        align="middle"
-      >
-        <a-col :span="24">
-          <a-skeleton
-            active
-            :loading="logsLoading"
-            :paragraph="{rows: 18}"
-          >
-            <a-list :dataSource="formattedLogsDatas">
-              <a-list-item
-                slot="renderItem"
-                slot-scope="item, index"
-                :key="index"
-              >
-                <a-list-item-meta :description="item.createTime | timeAgo">
-                  <span slot="title">{{ item.type }}</span>
-                </a-list-item-meta>
-                <div>{{ item.content }}</div>
-              </a-list-item>
-            </a-list>
-          </a-skeleton>
-
-          <div class="page-wrapper">
-            <a-pagination
-              class="pagination"
-              :current="logPagination.page"
-              :total="logPagination.total"
-              :defaultPageSize="logPagination.size"
-              :pageSizeOptions="['50', '100','150','200']"
-              showSizeChanger
-              @showSizeChange="handlePaginationChange"
-              @change="handlePaginationChange"
-            />
-          </div>
-        </a-col>
-      </a-row>
-      <a-divider class="divider-transparent" />
-      <div class="bottom-control">
-        <a-popconfirm
-          title="你确定要清空所有操作日志？"
-          okText="确定"
-          @confirm="handleClearLogs"
-          cancelText="取消"
-        >
-          <a-button type="danger">清空操作日志</a-button>
-        </a-popconfirm>
-      </div>
-    </a-drawer>
+    <LogListDrawer
+      :visible="logListDrawerVisible"
+      @close="handleLogListClose"
+    />
   </page-view>
 </template>
 
 <script>
-import { mixin, mixinDevice } from '@/utils/mixin.js'
 import { PageView } from '@/layouts'
 import AnalysisCard from './components/AnalysisCard'
 import RecentCommentTab from './components/RecentCommentTab'
+import LogListDrawer from './components/LogListDrawer'
 import countTo from 'vue-count-to'
 
 import postApi from '@/api/post'
@@ -333,40 +275,26 @@ import statisticsApi from '@/api/statistics'
 import journalApi from '@/api/journal'
 export default {
   name: 'Dashboard',
-  mixins: [mixin, mixinDevice],
   components: {
     PageView,
     AnalysisCard,
     RecentCommentTab,
-    countTo
+    countTo,
+    LogListDrawer
   },
   data() {
     return {
-      startVal: 0,
       logType: logApi.logType,
       activityLoading: true,
       writeLoading: true,
       logLoading: true,
-      logsLoading: true,
-      countsLoading: true,
-      logDrawerVisible: false,
-      postData: [],
-      logData: [],
+      statisticsLoading: true,
+      logListDrawerVisible: false,
+      latestPosts: [],
+      latestLogs: [],
       statisticsData: {},
       journal: {
-        content: '',
-        photos: []
-      },
-      logs: [],
-      logPagination: {
-        page: 1,
-        size: 50,
-        sort: null
-      },
-      logQueryParam: {
-        page: 0,
-        size: 50,
-        sort: null
+        content: ''
       },
       interval: null
     }
@@ -377,29 +305,16 @@ export default {
     this.listLatestLogs()
   },
   computed: {
-    formattedPostData() {
-      return Object.assign([], this.postData).map(post => {
-        // Format the status
-        post.status = postApi.postStatus[post.status]
-        return post
-      })
-    },
     formattedLogDatas() {
-      return this.logData.map(log => {
-        log.type = this.logType[log.type].text
-        return log
-      })
-    },
-    formattedLogsDatas() {
-      return this.logs.map(log => {
+      return this.latestLogs.map(log => {
         log.type = this.logType[log.type].text
         return log
       })
     }
   },
   destroyed: function() {
-    if (this.logDrawerVisible) {
-      this.logDrawerVisible = false
+    if (this.logListDrawerVisible) {
+      this.logListDrawerVisible = false
     }
   },
   beforeRouteEnter(to, from, next) {
@@ -415,29 +330,29 @@ export default {
       this.interval = null
       this.$log.debug('Cleared interval')
     }
-    if (this.logDrawerVisible) {
-      this.logDrawerVisible = false
+    if (this.logListDrawerVisible) {
+      this.logListDrawerVisible = false
     }
     next()
   },
   methods: {
-    listLatestPosts() {
+    async listLatestPosts() {
       postApi.listLatest(5).then(response => {
-        this.postData = response.data.data
+        this.latestPosts = response.data.data
         this.activityLoading = false
       })
     },
-    listLatestLogs() {
+    async listLatestLogs() {
       logApi.listLatest(5).then(response => {
-        this.logData = response.data.data
+        this.latestLogs = response.data.data
         this.logLoading = false
         this.writeLoading = false
       })
     },
-    getStatistics() {
+    async getStatistics() {
       statisticsApi.statistics().then(response => {
         this.statisticsData = response.data.data
-        this.countsLoading = false
+        this.statisticsLoading = false
       })
     },
     handleEditPostClick(post) {
@@ -456,40 +371,13 @@ export default {
         this.journal = {}
       })
     },
-    handleShowLogDrawer() {
-      this.logDrawerVisible = true
-      this.loadLogs()
-    },
-    loadLogs() {
-      this.logsLoading = true
-      setTimeout(() => {
-        this.logsLoading = false
-      }, 500)
-      this.logQueryParam.page = this.logPagination.page - 1
-      this.logQueryParam.size = this.logPagination.size
-      this.logQueryParam.sort = this.logPagination.sort
-      logApi.pageBy(this.logQueryParam).then(response => {
-        this.logs = response.data.data.content
-        this.logPagination.total = response.data.data.total
-      })
-    },
-    handleClearLogs() {
-      logApi.clear().then(response => {
-        this.$message.success('清除成功！')
-        this.loadLogs()
-        this.listLatestLogs()
-      })
-    },
     handlePostPreview(postId) {
       postApi.preview(postId).then(response => {
         window.open(response.data, '_blank')
       })
     },
-    handlePaginationChange(page, pageSize) {
-      this.$log.debug(`Current: ${page}, PageSize: ${pageSize}`)
-      this.logPagination.page = page
-      this.logPagination.size = pageSize
-      this.loadLogs()
+    handleLogListClose() {
+      this.logListDrawerVisible = false
     }
   }
 }

src/views/dashboard/components/LogListDrawer.vue

@@ -0,0 +1,144 @@
+<template>
+  <div>
+    <a-drawer
+      title="操作日志"
+      :width="isMobile()?'100%':'480'"
+      closable
+      :visible="visible"
+      destroyOnClose
+      @close="onClose"
+    >
+      <a-row
+        type="flex"
+        align="middle"
+      >
+        <a-col :span="24">
+          <a-skeleton
+            active
+            :loading="loading"
+            :paragraph="{rows: 18}"
+          >
+            <a-list :dataSource="formattedLogsDatas">
+              <a-list-item
+                slot="renderItem"
+                slot-scope="item, index"
+                :key="index"
+              >
+                <a-list-item-meta :description="item.createTime | timeAgo">
+                  <span slot="title">{{ item.type }}</span>
+                </a-list-item-meta>
+                <div>{{ item.content }}</div>
+              </a-list-item>
+            </a-list>
+          </a-skeleton>
+
+          <div class="page-wrapper">
+            <a-pagination
+              class="pagination"
+              :current="pagination.page"
+              :total="pagination.total"
+              :defaultPageSize="pagination.size"
+              :pageSizeOptions="['50', '100','150','200']"
+              showSizeChanger
+              @showSizeChange="handlePaginationChange"
+              @change="handlePaginationChange"
+            />
+          </div>
+        </a-col>
+      </a-row>
+      <a-divider class="divider-transparent" />
+      <div class="bottom-control">
+        <a-popconfirm
+          title="你确定要清空所有操作日志？"
+          okText="确定"
+          @confirm="handleClearLogs"
+          cancelText="取消"
+        >
+          <a-button type="danger">清空操作日志</a-button>
+        </a-popconfirm>
+      </div>
+    </a-drawer>
+  </div>
+</template>
+
+<script>
+import { mixin, mixinDevice } from '@/utils/mixin.js'
+import logApi from '@/api/log'
+export default {
+  name: 'LogListDrawer',
+  mixins: [mixin, mixinDevice],
+  data() {
+    return {
+      logType: logApi.logType,
+      loading: true,
+      logs: [],
+      pagination: {
+        page: 1,
+        size: 50,
+        sort: null,
+        total: null
+      },
+      logQueryParam: {
+        page: 0,
+        size: 50,
+        sort: null
+      }
+    }
+  },
+  props: {
+    visible: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  computed: {
+    formattedLogsDatas() {
+      return this.logs.map(log => {
+        log.type = this.logType[log.type].text
+        return log
+      })
+    }
+  },
+  watch: {
+    visible: function(newValue, oldValue) {
+      if (newValue) {
+        this.loadSkeleton()
+        this.loadLogs()
+      }
+    }
+  },
+  methods: {
+    loadSkeleton() {
+      this.loading = true
+      setTimeout(() => {
+        this.loading = false
+      }, 500)
+    },
+    loadLogs() {
+      this.logQueryParam.page = this.pagination.page - 1
+      this.logQueryParam.size = this.pagination.size
+      this.logQueryParam.sort = this.pagination.sort
+      logApi.pageBy(this.logQueryParam).then(response => {
+        this.logs = response.data.data.content
+        this.pagination.total = response.data.data.total
+      })
+    },
+    handleClearLogs() {
+      logApi.clear().then(response => {
+        this.$message.success('清除成功！')
+        this.loadLogs()
+      })
+    },
+    handlePaginationChange(page, pageSize) {
+      this.$log.debug(`Current: ${page}, PageSize: ${pageSize}`)
+      this.pagination.page = page
+      this.pagination.size = pageSize
+      this.loadLogs()
+    },
+    onClose() {
+      this.$emit('close', false)
+    }
+  }
+}
+</script>

src/views/system/ToolList.vue

@@ -26,7 +26,7 @@
             >进入</a-button>
           </a-card>
         </a-col>
-        <a-col
+        <!-- <a-col
           :xl="6"
           :lg="6"
           :md="12"
@@ -48,7 +48,7 @@
               @click="handleToStaticPagesManage"
             >管理</a-button>
           </a-card>
-        </a-col>
+        </a-col> -->
         <a-col
           :xl="6"
           :lg="6"
@@ -151,9 +151,9 @@ export default {
     handleToDeveloperOptions() {
       this.$router.push({ name: 'DeveloperOptions' })
     },
-    handleToStaticPagesManage() {
-      this.$router.push({ name: 'StaticPagesManage' })
-    },
+    // handleToStaticPagesManage() {
+    //   this.$router.push({ name: 'StaticPagesManage' })
+    // },
     onUploadClose() {
       this.$refs.upload.handleClearFileList()
     }