feat(toolbox): added base64 tool

Author: XPoet

src/components.d.ts

@@ -9,6 +9,7 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
+    Base64Tool: typeof import('./components/tools/base64-tool/base64-tool.vue')['default']
     CompressConfigBox: typeof import('./components/compress-config-box/compress-config-box.vue')['default']
     CompressTool: typeof import('./components/tools/compress-tool/compress-tool.vue')['default']
     CopyImageLink: typeof import('./components/copy-image-link/copy-image-link.vue')['default']

src/components/tools/base64-tool/base64-tool.styl

@@ -0,0 +1,43 @@
+$left-width = 260rem
+
+.base64-tool-container {
+  position relative
+  display flex
+  justify-content space-between
+  box-sizing border-box
+  width 100%
+  height 100%
+
+  .base64-tool-left {
+    position relative
+    box-sizing border-box
+    width $left-width
+    height 100%
+    padding 10rem
+    overflow-y auto
+    border-right 1px solid var(--border-color)
+
+    .el-image {
+      width 100%
+    }
+  }
+
+
+  .base64-tool-right {
+    position relative
+    box-sizing border-box
+    width 'calc(100% - %s)' % $left-width
+    height 100%
+    padding 20rem
+
+    &.no-img {
+      width 100%
+    }
+
+    .user-operate {
+      display flex
+      justify-content flex-end
+      margin-top 20rem
+    }
+  }
+}

src/components/tools/base64-tool/base64-tool.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="base64-tool-container">
+    <div v-if="imgList.length" class="base64-tool-left">
+      <img-process-state-card
+        card-type="base64"
+        v-for="img in imgList"
+        :img-obj="img"
+        :key="img.uuid"
+        @remove="remove"
+      />
+    </div>
+    <div class="base64-tool-right" :class="{ 'no-img': !imgList.length }">
+      <getting-images ref="gettingImagesRef" @getImgList="getImgList"></getting-images>
+
+      <div class="user-operate">
+        <el-button v-if="imgList.length" plain type="warning" @click="reset"> 重置 </el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { ImageHandleResult, ImgProcessStateModel } from '@/common/model'
+import { useStore } from '@/store'
+
+const store = useStore()
+
+const gettingImagesRef = ref<any>(null)
+
+const imgList = ref<ImgProcessStateModel[]>([])
+
+const getImgList = (imgs: ImageHandleResult[]) => {
+  imgs.forEach((x) => {
+    store.dispatch('TOOLBOX_IMG_LIST_ADD', {
+      uuid: x.uuid,
+      originalName: x.file.name,
+      originalSize: x.file.size,
+      originalBase64: x.base64
+    })
+  })
+}
+
+// 重置
+const reset = () => {
+  store.dispatch('TOOLBOX_IMG_LIST_RESET')
+  gettingImagesRef.value?.reset()
+}
+
+// 删除
+const remove = (uuid: string) => {
+  store.dispatch('TOOLBOX_IMG_LIST_REMOVE', uuid)
+  gettingImagesRef.value?.remove(uuid)
+}
+
+watch(
+  () => store.state.toolboxImageListModule.toolboxImageList,
+  (newValue) => {
+    imgList.value = newValue
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
+</script>
+
+<style scoped lang="stylus">
+@import "base64-tool.styl"
+</style>

src/components/tools/img-process-state-card/img-process-state-card.vue

@@ -26,6 +26,13 @@
     >
       点击下载
     </div>
+    <div
+      class="operate-container flex-center"
+      v-if="cardType === 'base64' && imgObj.originalBase64"
+      @click="copyBase64(imgObj.originalBase64)"
+    >
+      点击复制 Base64 编码
+    </div>
     <el-tooltip placement="top" :offset="8" content="删除">
       <el-icon class="del-btn" @click="remove(imgObj.uuid)"><Remove /></el-icon>
     </el-tooltip>
@@ -34,7 +41,7 @@
 
 <script setup lang="ts">
 import { ImgProcessStateModel } from '@/common/model'
-import { downloadImage, getFileSize } from '@/utils'
+import { copyText, downloadImage, getFileSize } from '@/utils'
 
 const emit = defineEmits(['remove'])
 
@@ -43,15 +50,27 @@ defineProps({
     type: Object as () => ImgProcessStateModel,
     require: true,
     default: () => ({})
+  },
+  cardType: {
+    type: String,
+    default: 'compress' // compress | base64
   }
 })
 
+const remove = (uuid: string) => {
+  emit('remove', uuid)
+}
+
+// 下载图片到本地
 const download = (file: File) => {
   downloadImage(file)
 }
 
-const remove = (uuid: string) => {
-  emit('remove', uuid)
+// 复制 Base64 编码
+const copyBase64 = (base64: string) => {
+  copyText(base64, () => {
+    ElMessage.success({ message: ' Base64 编码复制成功' })
+  })
 }
 </script>
 

src/plugins/vite/src/auto-imports.d.ts

@@ -6,6 +6,7 @@ import settings from '@/views/my-settings/my-settings.vue'
 import toolbox from '@/views/picx-toolbox/picx-toolbox.vue'
 import feedback from '@/views/feedback-info/feedback-info.vue'
 import compressTool from '@/components/tools/compress-tool/compress-tool.vue'
+import base64Tool from '@/components/tools/base64-tool/base64-tool.vue'
 
 const titleSuffix = ` | PicX 图床`
 
@@ -51,16 +52,21 @@ const routes: Array<RouteRecordRaw> = [
   },
   {
     path: '/toolbox',
-    name: 'toolbox',
+    name: 'Toolbox',
     component: toolbox,
     meta: {
       title: `工具箱${titleSuffix}`
     },
     children: [
       {
         path: '/toolbox/compress',
-        name: 'compress',
+        name: 'Compress',
         component: compressTool
+      },
+      {
+        path: '/toolbox/base64',
+        name: 'Base64',
+        component: base64Tool
       }
     ]
   },

src/plugins/vite/src/components.d.ts

@@ -81,13 +81,24 @@ li {
 
 
 .page-container {
+  position relative
   box-sizing border-box
   width 100%
   height 100%
   padding 30rem
   overflow-y auto
   background var(--background-color)
   border-top-left-radius $box-border-radius
+
+  .page-content {
+    position relative
+    left 50%
+    box-sizing border-box
+    width 100%
+    max-width 1200rem
+    height 100%
+    transform translateX(-50%)
+  }
 }
 
 

src/router/index.ts

@@ -32,6 +32,7 @@ import { onMounted, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { getUuid } from '@/utils'
 import { ToolItemModel } from '@/common/model'
+import { store } from '@/store'
 
 const router = useRouter()
 
@@ -53,12 +54,20 @@ const toolList = ref<ToolItemModel[]>([
     icon: 'MagicStick',
     uuid: getUuid(),
     path: '/compress'
+  },
+  {
+    name: '图片转 Base64',
+    desc: '不限制图片大小和数量，在线转换成 Base64 编码',
+    icon: 'Paperclip',
+    uuid: getUuid(),
+    path: '/base64'
   }
 ])
 
 const selectTool = (tool: ToolItemModel) => {
   showToolPanel.value = true
   currentTool.value = { ...tool }
+  store.dispatch('TOOLBOX_IMG_LIST_RESET')
   router.push(`${toolboxPath.value}${tool.path}`)
 }