From 8462e2c5863b4cc3ec8acf9bb1f31892929978e3 Mon Sep 17 00:00:00 2001
From: vec <vec@torzo.club>
Date: Mon, 8 Jan 2024 18:06:37 +0800
Subject: [PATCH] [add] Dashboard Home statistic

---
 dashboard/package-lock.json                   |   6 +-
 dashboard/package.json                        |   2 +-
 dashboard/src/api/statistic.js                |   7 +
 dashboard/src/main.js                         |   5 +-
 .../dashboard/components/refresh-thumbs.vue   |  53 ++++----
 dashboard/src/views/dashboard/index.vue       | 121 ++++++++++++++++--
 server/.eslintrc                              |   3 +-
 server/app/controller/admin/statistic.js      |  77 +++++++++++
 server/app/router.js                          |   2 +
 server/package-lock.json                      |   9 ++
 server/package.json                           |   5 +-
 server/test/common.js                         |  11 ++
 12 files changed, 248 insertions(+), 53 deletions(-)
 create mode 100644 dashboard/src/api/statistic.js
 create mode 100644 server/app/controller/admin/statistic.js

diff --git a/dashboard/package-lock.json b/dashboard/package-lock.json
index 331c466..2024a6b 100644
--- a/dashboard/package-lock.json
+++ b/dashboard/package-lock.json
@@ -5759,9 +5759,9 @@
       "dev": true
     },
     "element-ui": {
-      "version": "2.15.4",
-      "resolved": "https://registry.npmjs.org/element-ui/-/element-ui-2.15.4.tgz",
-      "integrity": "sha512-b9Tlc6NjygcHv3QNzfPPDQvyAmLdbjQR7q1FMypqFKjowpQzlaL3zlNZ4jrpm0stEBWLeHVIT733z/i6F3o+cA==",
+      "version": "2.15.14",
+      "resolved": "https://registry.npmjs.org/element-ui/-/element-ui-2.15.14.tgz",
+      "integrity": "sha512-2v9fHL0ZGINotOlRIAJD5YuVB8V7WKxrE9Qy7dXhRipa035+kF7WuU/z+tEmLVPBcJ0zt8mOu1DKpWcVzBK8IA==",
       "requires": {
         "async-validator": "~1.8.1",
         "babel-helper-vue-jsx-merge-props": "^2.0.0",
diff --git a/dashboard/package.json b/dashboard/package.json
index 5cf940e..e1d43a7 100644
--- a/dashboard/package.json
+++ b/dashboard/package.json
@@ -15,7 +15,7 @@
   },
   "dependencies": {
     "axios": "0.21.1",
-    "element-ui": "^2.15.4",
+    "element-ui": "^2.15.14",
     "js-cookie": "2.2.0",
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
diff --git a/dashboard/src/api/statistic.js b/dashboard/src/api/statistic.js
new file mode 100644
index 0000000..89a21f8
--- /dev/null
+++ b/dashboard/src/api/statistic.js
@@ -0,0 +1,7 @@
+import request from '@/utils/request'
+
+export const getStatistic = () =>
+  request({
+    url: `admin/statistic`,
+    method: 'GET',
+  })
diff --git a/dashboard/src/main.js b/dashboard/src/main.js
index 369623e..62da0d0 100755
--- a/dashboard/src/main.js
+++ b/dashboard/src/main.js
@@ -29,9 +29,10 @@ if (process.env.NODE_ENV === 'production') {
 }
 
 // set ElementUI lang to EN
-Vue.use(ElementUI, { locale })
+// Vue.use(ElementUI, { locale })
 // 如果想要中文版 element-ui，按如下方式声明
-// Vue.use(ElementUI)
+Vue.use(ElementUI)
+console.log('ElementUI', ElementUI)
 
 Vue.config.productionTip = false
 
diff --git a/dashboard/src/views/dashboard/components/refresh-thumbs.vue b/dashboard/src/views/dashboard/components/refresh-thumbs.vue
index 8c3c255..2146df4 100644
--- a/dashboard/src/views/dashboard/components/refresh-thumbs.vue
+++ b/dashboard/src/views/dashboard/components/refresh-thumbs.vue
@@ -1,16 +1,17 @@
 <template>
   <div>
+    <ElProgress
+      v-if="processing"
+      :percentage="percentage"
+      :color="color"
+    />
     <ElButton
+      v-else-if="showButton"
       size="small"
       type="primary"
       icon="el-icon-refresh"
       @click="processing || refreshThumbsConfirm()"
     >刷新缩略图</ElButton>
-    <ElProgress
-      v-if="show_progress"
-      :percentage="percentage"
-      :color="color"
-    />
   </div>
 </template>
 
@@ -21,6 +22,10 @@ import { getList as getMemberList } from '@/api/member'
 const initProgress = () => ({ total: 0, success: 0, failure: 0 })
 
 export default {
+  props: {
+    showButton: { type: Boolean, default: true }
+  },
+
   data: () => ({
     ...initProgress(),
     processing: false,
@@ -74,35 +79,21 @@ export default {
         }
       }
     },
-    async refreshThumbsConfirm() {
-      const confirm = await this.confirm('', `你确定要刷新吗？`, {
-        confirmButtonClass: 'el-button--warning',
-      })
-      if (!confirm) { return }
-      try {
-        this.processing = true
-        await this.refreshThumbs()
-        if (this.failure === 0) {
-          this.$emit('success', `所有缩略图已刷新`)
+    async refreshThumbsConfirmProcessing() {
+      if (this.processing === false) {
+        try {
+          this.processing = true
+          await this.refreshThumbs()
+          if (this.failure === 0) {
+            this.$emit('success', `所有缩略图已刷新`)
+          }
+        } catch (err) {
+          this.$emit('error', '刷新缓存失败', err)
+        } finally {
+          this.processing = false
         }
-      } catch (err) {
-        this.$emit('error', '刷新缓存失败', err)
-      } finally {
-        this.processing = false
       }
     },
-
-    async confirm(title, content, appendOpt = {}) {
-      const opt = Object.assign({
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        confirmButtonClass: 'el-button--warning',
-        showClose: false,
-      }, appendOpt)
-      return this.$confirm(content, title, opt)
-        .then(() => true)
-        .catch(() => false)
-    },
   }
 }
 </script>
diff --git a/dashboard/src/views/dashboard/index.vue b/dashboard/src/views/dashboard/index.vue
index fdb2692..80ac474 100755
--- a/dashboard/src/views/dashboard/index.vue
+++ b/dashboard/src/views/dashboard/index.vue
@@ -1,17 +1,81 @@
 <template>
-  <ElContainer
-    v-loading="loading"
-    style="padding-top: 20px; width: 640px"
-    direction="vertical"
-  >
-    <ElMain>
-      <ElAlert v-for="alert in alerts" :key="alert.id" :type="alert.type" :title="alert.title" style="margin-bottom: 10px;" />
-      <RefreshThumbs @error="handleError" @warning="handleWarning" @success="handleSuccess" @info="handleInfo" />
+  <ElContainer v-loading="loading" style="width: 640px" direction="vertical">
+    <ElMain height="auto">
+      <ElRow :gutter="30">
+        <ElCol :span="20">
+          <ElAlert
+            v-for="alert in alerts"
+            :key="alert.id"
+            style="margin-bottom: 10px;"
+            show-icon
+            :type="alert.type"
+            :title="alert.title"
+            :description="alert.description"
+            @close="handleAlertClose(alert.id)"
+          />
+        </ElCol>
+      </ElRow>
+
+      <ElRow :gutter="20" style="padding: 20px 0">
+        <ElCol :span="4">
+          <ElStatistic title="总投稿数">
+            <template slot="formatter">{{ statistic.available_photo_count }}</template>
+          </ElStatistic>
+        </ElCol>
+        <ElCol :span="8">
+          <ElStatistic title="图片占用空间">
+            <template slot="prefix">
+              <ElLink style="opacity: 0" icon="el-icon-refresh" size="mini">清理</ElLink>
+            </template>
+            <template slot="formatter">{{ statistic.src_total_size }}</template>
+            <template slot="suffix">
+              <el-popconfirm
+                confirm-button-text="是的"
+                cancel-button-text="不了"
+                icon="el-icon-info"
+                icon-color="red"
+                title="你确定要清理吗？这将移除图片库中没有被引用的图片"
+                @confirm="handleClickCleanImagePool"
+              >
+                <ElLink slot="reference" icon="el-icon-refresh" size="mini">清理</ElLink>
+              </el-popconfirm>
+            </template>
+          </ElStatistic>
+        </ElCol>
+
+        <ElCol :span="10">
+          <ElStatistic title="缩略图占用空间">
+            <template slot="prefix">
+              <ElLink style="opacity: 0" icon="el-icon-refresh" size="mini">重新生成</ElLink>
+            </template>
+            <template slot="formatter">{{ statistic.thumb_total_size }}</template>
+            <template slot="suffix">
+              <el-popconfirm
+                confirm-button-text="是的"
+                cancel-button-text="不了"
+                icon="el-icon-info"
+                icon-color="red"
+                title="你确定要重新生成吗？（这将花费一些时间，请在完成前不要离开本页面）"
+                @confirm="handleClickRefreshThumb"
+              >
+                <ElLink slot="reference" icon="el-icon-refresh" size="mini">重新生成</ElLink>
+              </el-popconfirm>
+            </template>
+          </ElStatistic>
+        </ElCol>
+      </ElRow>
+
+      <ElRow :gutter="30">
+        <ElCol :span="20" direction="vertical">
+          <RefreshThumbs ref="refreshThumbs" :show-button="false" @error="handleError" @warning="handleWarning" @success="handleSuccess" @info="handleInfo" />
+        </ElCol>
+      </ElRow>
     </ElMain>
   </ElContainer>
 </template>
 
 <script>
+import { getStatistic } from '@/api/statistic'
 import RefreshThumbs from './components/refresh-thumbs.vue'
 import { v4 as uuidv4 } from 'uuid'
 
@@ -26,11 +90,11 @@ function ConsolePrint(alert_type) {
 function HandleAlertEvent(alert_type) {
   const consolePrint = ConsolePrint(alert_type).bind(console)
   return function(title, err) {
-    if (err) {
+    if (err instanceof Error) {
       consolePrint(`${title}`, err)
-      this.addAlert(alert_type, `${title}: ${err.message}`)
+      this.addAlert(alert_type, title, err.message)
     } else {
-      this.addAlert(alert_type, title)
+      this.addAlert(alert_type, title, err)
     }
   }
 }
@@ -43,12 +107,43 @@ export default {
   data: () => ({
     loading: false,
     alerts: [],
+    statistic: {
+      available_photo_count: 'N/A',
+      src_total_size: 'N/A',
+      thumb_total_size: 'N/A',
+    }
   }),
 
+  mounted() {
+    this.refresh()
+  },
+
   methods: {
-    addAlert(type, title) {
-      this.alerts = [...this.alerts, { id: uuidv4(), type, title }]
+    async refresh() {
+      try {
+        this.loading = true
+        this.statistic = await getStatistic()
+      } finally {
+        this.loading = false
+      }
+    },
+
+    handleClickCleanImagePool() {
     },
+
+    handleClickRefreshThumb() {
+      this.$refs.refreshThumbs.refreshThumbsConfirmProcessing().finally(() => {
+        this.refresh()
+      })
+    },
+
+    handleAlertClose(remove_id) {},
+
+    addAlert(type, title, description) {
+      console.log('desc', description)
+      this.alerts = [...this.alerts, { id: uuidv4(), type, title, description }]
+    },
+
     handleError: HandleAlertEvent('error'),
     handleWarning: HandleAlertEvent('warning'),
     handleSuccess: HandleAlertEvent('success'),
diff --git a/server/.eslintrc b/server/.eslintrc
index 59dc31a..011e079 100644
--- a/server/.eslintrc
+++ b/server/.eslintrc
@@ -2,6 +2,7 @@
   "extends": "eslint-config-egg",
   "rules": {
     "no-else-return": [0],
-    "no-lone-blocks": [0]
+    "no-lone-blocks": [0],
+    "no-extra-parens": [0]
   }
 }
diff --git a/server/app/controller/admin/statistic.js b/server/app/controller/admin/statistic.js
new file mode 100644
index 0000000..7619575
--- /dev/null
+++ b/server/app/controller/admin/statistic.js
@@ -0,0 +1,77 @@
+'use strict';
+
+const { filesize } = require('filesize');
+// const getFolderSize = require('get-folder-size');
+const fs = require('fs');
+const path = require('path');
+
+async function getFileSize(path) {
+  try {
+    const { size } = await fs.promises.stat(path);
+    return size;
+  } catch (e) {
+    return 0;
+  }
+}
+
+module.exports = app => {
+  class StatisticController extends app.Controller {
+    async getAvailablePhotoList(ctx) {
+      let photo_list = [];
+
+      const galleries = await ctx.model.Gallery.findAll();
+
+      for (const gallery of galleries) {
+        const photos = await ctx.model.Photo.findAll({
+          where: { gallery_id: gallery.id },
+        });
+        photo_list = [ ...photo_list, ...photos ];
+      }
+
+      return photo_list;
+    }
+    async getAllMemberList(ctx) {
+      const member_list = await ctx.model.Member.findAll({});
+      return member_list;
+    }
+
+    async getSrcTotalSize(ctx, image_path, src_list) {
+      const full_src_list = src_list
+        .map(ctx.app.serviceClasses.image.allFilename)
+        .flat();
+
+      let total = 0;
+      for (const src of full_src_list) {
+        const size = await getFileSize(path.join(image_path, src));
+        total = total + size;
+      }
+      return total;
+    }
+
+    async show(ctx) {
+      const [ available_photo_list, member_list ] = await Promise.all([
+        this.getAvailablePhotoList(ctx),
+        this.getAllMemberList(ctx),
+      ]);
+
+      const src_list = [
+        ...available_photo_list.map(p => p.src),
+        ...member_list.map(m => m.avatar_src),
+      ];
+
+      const { imageSavePath, imageThumbSavePath } = ctx.app.config;
+
+      const [ src_total_size_raw, thumb_total_size_raw ] = await Promise.all([
+        this.getSrcTotalSize(ctx, imageSavePath, src_list),
+        this.getSrcTotalSize(ctx, imageThumbSavePath, src_list),
+      ]);
+
+      ctx.backData(200, {
+        available_photo_count: available_photo_list.length,
+        src_total_size: filesize(src_total_size_raw),
+        thumb_total_size: filesize(thumb_total_size_raw),
+      });
+    }
+  }
+  return StatisticController;
+};
diff --git a/server/app/router.js b/server/app/router.js
index 52c6dc6..09d9c9f 100644
--- a/server/app/router.js
+++ b/server/app/router.js
@@ -24,6 +24,8 @@ module.exports = app => {
 
   setRouter('post', 'admin/login', controller.admin.auth.login);
 
+  setAdminRouter('get', 'statistic', controller.admin.statistic.show);
+
   setAdminRouter('post', 'image/upload', controller.admin.image.upload);
   setAdminRouter('post', 'image/refresh-thumb', controller.admin.image.refreshThumb);
   setAdminRouter('get', 'image/available-photo', controller.admin.image.getAllAvailablePhoto);
diff --git a/server/package-lock.json b/server/package-lock.json
index f4e2505..a144a59 100644
--- a/server/package-lock.json
+++ b/server/package-lock.json
@@ -15,6 +15,7 @@
         "egg-scripts": "^2.11.0",
         "egg-sequelize": "^5.2.0",
         "egg-validate": "^2.0.2",
+        "filesize": "^10.1.0",
         "mysql2": "^1.7.0",
         "sharp": "^0.33.0",
         "stream-wormhole": "^1.1.0"
@@ -8022,6 +8023,14 @@
         "node": ">=4"
       }
     },
+    "node_modules/filesize": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/filesize/-/filesize-10.1.0.tgz",
+      "integrity": "sha512-GTLKYyBSDz3nPhlLVPjPWZCnhkd9TrrRArNcy8Z+J2cqScB7h2McAzR6NBX6nYOoWafql0roY8hrocxnZBv9CQ==",
+      "engines": {
+        "node": ">= 10.4.0"
+      }
+    },
     "node_modules/fill-range": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
diff --git a/server/package.json b/server/package.json
index daa79b0..067ae0e 100644
--- a/server/package.json
+++ b/server/package.json
@@ -12,19 +12,20 @@
     "egg-scripts": "^2.11.0",
     "egg-sequelize": "^5.2.0",
     "egg-validate": "^2.0.2",
+    "filesize": "^10.1.0",
     "mysql2": "^1.7.0",
     "sharp": "^0.33.0",
     "stream-wormhole": "^1.1.0"
   },
   "devDependencies": {
-    "mockdate": "^3.0.5",
     "autod": "^3.0.1",
     "autod-egg": "^1.1.0",
     "egg-bin": "^4.11.0",
     "egg-ci": "^1.11.0",
     "egg-mock": "^3.21.0",
     "eslint": "^5.13.0",
-    "eslint-config-egg": "^7.1.0"
+    "eslint-config-egg": "^7.1.0",
+    "mockdate": "^3.0.5"
   },
   "engines": {
     "node": "18.17.0"
diff --git a/server/test/common.js b/server/test/common.js
index 2cb8427..4d827af 100644
--- a/server/test/common.js
+++ b/server/test/common.js
@@ -45,6 +45,8 @@ module.exports = {
   getPhotoById,
   removePhotoById,
 
+  adminGetStatistic,
+
   editSubmissionPhoto,
   submissionPhoto,
   cancelMySubmission,
@@ -369,6 +371,15 @@ async function removePhotoById(token, app, photoId, expectStatusCode = 200) {
     .then(res => res.body);
 }
 
+async function adminGetStatistic(token, app, expect_code = 200) {
+  return app.httpRequest()
+    .get('/admin/statistic')
+    .set('Authorization', token)
+    .type('json')
+    .expect(expect_code)
+    .then(res => res.body);
+}
+
 async function editSubmissionPhoto(app, {
   photo_id,
   qq_num,