WIP: 文案优化

ATQQ · Mar 5, 2024 · 1288ce2 · 1288ce2
1 parent ca63513
commit 1288ce2
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 8 deletions.
diff --git a/packages/client/src/components/ConfigPanel.vue b/packages/client/src/components/ConfigPanel.vue
@@ -3,7 +3,7 @@ import { useConfigStore } from '@/store';
 import { formatDate } from '@/utils/stringUtil';
 import { Key, Refresh } from '@element-plus/icons-vue';
 import { useIntervalFn, useWindowSize } from '@vueuse/core';
-import { ElMessage, ElMessageBox } from 'element-plus';
+import { ElMessage, ElMessageBox, ElButton } from 'element-plus';
 import { storeToRefs } from 'pinia';
 import { computed, onMounted, ref } from 'vue';
 const store = useConfigStore()
@@ -22,6 +22,9 @@ useIntervalFn(() => {
     }
 }, 500)
 
+const handleGetToken = () => {
+  window.open('https://github.com/ATQQ/image-bed-qiniu/tree/master/packages/client#%E7%94%9F%E6%88%90token')
+}
 onMounted(() => {
     refreshDDL()
 })
@@ -74,7 +77,7 @@ const isFullScreen = computed(() => width.value < 768)
     </el-icon>
     <el-dialog v-model="dialogVisible" title="token信息" :fullscreen="isFullScreen">
         <p v-if="isExpired">
-            token 已经过期
+            token 已经过期 <el-button type="primary" link @click="handleGetToken"> 获取方式？</el-button>
         </p>
         <p v-else>
             有效期至：{{ expiredTime }}，剩余时间 {{ countDown }}

diff --git a/packages/client/src/components/HomeHeader.vue b/packages/client/src/components/HomeHeader.vue
@@ -9,7 +9,7 @@ import ConfigPanel from './ConfigPanel.vue';
         </div>
         <span class="right">
             <ConfigPanel />
-            <a href="https://github.com/ATQQ/image-bed-qiniu/tree/master/packages/client" target="_blank" noreferrer noopener>
+            <a href="https://github.com/ATQQ/image-bed-qiniu/tree/master/packages/client#-%E4%B8%83%E7%89%9B%E4%BA%91oss%E5%9B%BE%E5%BA%8A-" target="_blank" noreferrer noopener>
                 GitHub
             </a>
         </span>

diff --git a/packages/client/src/components/ImageUpload.vue b/packages/client/src/components/ImageUpload.vue
@@ -2,10 +2,11 @@
 import { UploadFilled } from '@element-plus/icons-vue'
 import { computed, ref, watch } from 'vue';
 import { ElMessage, type UploadInstance, type UploadProps, type UploadUserFile } from 'element-plus'
-import { uploadFile } from '../utils/qiniu'
+import { compressImage, uploadFile } from '../utils/qiniu'
 import { useFocus } from '@vueuse/core';
 import { useConfigStore, useImageStore } from '@/store'
 import { storeToRefs } from 'pinia';
+import { formatSize } from '@/utils/stringUtil';
 
 const imageStore = useImageStore()
 const configStore = useConfigStore()
@@ -23,7 +24,7 @@ const handleChange: UploadProps['onChange'] = (_, uploadFiles) => {
   })
 }
 
-watch(files, () => {
+watch(files, async () => {
   for (const file of files.value) {
     // 上传
     if (file.status === 'ready') {
@@ -32,7 +33,11 @@ watch(files, () => {
       if (!file.raw) {
         continue
       }
-
+      compressImage(file.raw,{
+        noCompressIfLarger: true
+      }).then(v=>{
+        console.log(v.dist, formatSize(v.dist.size));
+      })
       uploadFile(file.raw, qiniu.value, {
         process(percent) {
           file.percentage = percent

diff --git a/packages/client/src/store/modules/configStore.ts b/packages/client/src/store/modules/configStore.ts
@@ -6,6 +6,7 @@ export interface QiNiuConfig {
   scope: string
   prefix: string
   domain: string
+  compressImage?: any
   date: number
   config: {
     useCdnDomain: boolean
@@ -20,11 +21,12 @@ const configStore = defineStore('configStore', {
       token: '',
       date: 0,
       domain: '',
-      // TODO：自定义扩展
+      // 自定义扩展
       config: {
         useCdnDomain: true,
       },
     } as QiNiuConfig,
+    warningTimer: null as any,
   }),
   actions: {
     parseQiniuToken(token?: string) {
@@ -37,7 +39,13 @@ const configStore = defineStore('configStore', {
         }
       }
       catch (err: any) {
-        ElMessage.error('token 有误，解析失败')
+        if (this.warningTimer) {
+          return
+        }
+        this.warningTimer = setTimeout(() => {
+          this.warningTimer = null
+        }, 3000)
+        ElMessage.error('token 不正确，请点击右上角 🔑 重新设置')
       }
     },
   },

diff --git a/packages/client/src/utils/qiniu.ts b/packages/client/src/utils/qiniu.ts
@@ -1,4 +1,5 @@
 import * as qiniu from 'qiniu-js'
+import type { CompressOptions } from 'qiniu-js/esm/utils/compress'
 import { getFileMd5Hash } from './stringUtil'
 import type { QiNiuConfig } from '@/store/modules/configStore'
 
@@ -48,7 +49,12 @@ async function generateNewFileKey(file: File, prefix = 'mdImg', scope = 'sugar')
   const md5 = await getFileMd5Hash(file)
   return `${prefix}/${scope}/${md5}`
 }
+
+async function compressImage(file: File, ops: CompressOptions) {
+  return qiniu.compressImage(file, ops)
+}
 export {
   uploadFile,
   generateNewFileKey,
+  compressImage,
 }