2024年的一些功能和更新

dashboard/.env.production

@@ -2,4 +2,4 @@
 ENV = 'production'
 
 # base api
-VUE_APP_BASE_API = 'https://pache.blog/torzo-gallery-server/api/'
+VUE_APP_BASE_API = 'https://pache.blog/torzo-gallery-server/'

dashboard/.eslintrc.js

@@ -90,7 +90,7 @@ module.exports = {
     'no-extend-native': 2,
     'no-extra-bind': 2,
     'no-extra-boolean-cast': 2,
-    'no-extra-parens': [2, 'functions'],
+    'no-extra-parens': [0],
     'no-fallthrough': 2,
     'no-floating-decimal': 2,
     'no-func-assign': 2,

dashboard/package.json

@@ -15,12 +15,13 @@
   },
   "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",
     "pad-left": "^2.1.0",
     "path-to-regexp": "2.4.0",
+    "uuid": "^9.0.1",
     "vue": "2.6.10",
     "vue-router": "3.0.6",
     "vuex": "3.1.0"

dashboard/src/api/image.js

@@ -1,8 +1,24 @@
 import request from '@/utils/request'
 
-export const refreshThumbs = () =>
+export const __AVATAR_THUMB_SIZE__ = 128
+
+export const refreshThumb = (src, thumb_size) =>
+  request({
+    url: `admin/image/refresh-thumb`,
+    method: 'POST',
+    timeout: 0,
+    data: { src, thumb_size },
+  })
+
+export const getAllAvailablePhoto = () =>
   request({
-    url: 'admin/image/refresh-thumb',
+    url: `admin/image/available-photo`,
     method: 'GET',
     timeout: 0,
   })
+
+export const requestCleanUnusedImage = () =>
+  request({
+    url: `admin/image/clean-unused`,
+    method: 'POST',
+  })

dashboard/src/api/statistic.js

@@ -0,0 +1,7 @@
+import request from '@/utils/request'
+
+export const getStatistic = () =>
+  request({
+    url: `admin/statistic`,
+    method: 'GET',
+  })

dashboard/src/components/UploadImageBox.vue

@@ -4,7 +4,7 @@
     drag
     :name="uploadName"
     :headers="headers"
-    :action="uploadUrl"
+    :action="upload_url"
     :show-file-list="false"
     :on-error="uploadError"
     :on-progress="uploadProgress"
@@ -137,9 +137,9 @@
         default: ''
       },
 
-      uploadUrl: {
-        type: String,
-        default: `${process.env.VUE_APP_BASE_API}admin/image/upload`
+      thumbSize: {
+        type: Number,
+        default: 0
       },
 
       previewUrl: {
@@ -161,6 +161,17 @@
       percent: 0
     }),
 
+    computed: {
+      upload_url() {
+        const base_url = `${process.env.VUE_APP_BASE_API}admin/image/upload`
+        if (this.thumbSize !== 0) {
+          return `${base_url}?thumb_size=${this.thumbSize}`
+        } else {
+          return base_url
+        }
+      }
+    },
+
     methods: {
       resetUploading() {
         this.uploading = false

dashboard/src/main.js

@@ -4,7 +4,7 @@ import 'normalize.css/normalize.css' // A modern alternative to CSS resets
 
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
-import locale from 'element-ui/lib/locale/lang/en' // lang i18n
+// import locale from 'element-ui/lib/locale/lang/en' // lang i18n
 
 import '@/styles/index.scss' // global css
 
@@ -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
 

dashboard/src/mixins/operate.js

@@ -0,0 +1,14 @@
+export default {
+  methods: {
+    async $operate(property, fn) {
+      if (this[property] !== true) {
+        this[property] = true
+        try {
+          await fn()
+        } finally {
+          this[property] = false
+        }
+      }
+    }
+  }
+}

dashboard/src/views/dashboard/components/refresh-thumbs.vue

@@ -0,0 +1,111 @@
+<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>
+  </div>
+</template>
+
+<script>
+import { refreshThumb, getAllAvailablePhoto, __AVATAR_THUMB_SIZE__ } from '@/api/image'
+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,
+    show_progress: false,
+  }),
+
+  computed: {
+    color() { return (this.failure > 0) ? '#e6a23c' : '#409eff' },
+    current() { return this.success + this.failure },
+    percentage() {
+      return (this.total === 0) ? 0 : Math.ceil(
+        100 * (this.current / this.total)
+      )
+    },
+  },
+
+  watch: {
+    processing(val) {
+      if (val === true) {
+        this.show_progress = true
+      }
+    }
+  },
+
+  methods: {
+    async refreshThumbs() {
+      Object.assign(this, initProgress())
+
+      const [photos, members] = await Promise.all([
+        getAllAvailablePhoto(), getMemberList()
+      ])
+
+      const task_list = [
+        ...photos.map(p => (
+          [`相片(id=${p.id})`, p.src]
+        )),
+        ...members.map(m => (
+          [`成员头像(id=${m.id})`, m.avatar_src, __AVATAR_THUMB_SIZE__]
+        ))
+      ]
+
+      this.total = task_list.length
+
+      for (const [name, ...args] of task_list) {
+        try {
+          await refreshThumb(...args)
+          this.success = this.success + 1
+        } catch (err) {
+          this.failure = this.failure + 1
+          this.$emit('warning', `${name}的缩略图生成失败`, err)
+        }
+      }
+    },
+    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
+        }
+      }
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.dashboard {
+  &-container {
+    margin: 30px;
+  }
+  &-text {
+    font-size: 30px;
+    line-height: 46px;
+  }
+}
+</style>