From 9d63799d5a60b61eedfc1e2d35efe6cc93688a1d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=90=8C=E8=90=8C=E5=93=92=E8=B5=AB=E8=90=9D?=
 <ma_shiqing@163.com>
Date: Tue, 22 Aug 2023 22:42:35 -0700
Subject: [PATCH] :sparkles: Feature: add imagelocal component

---
 src/renderer/components/ImageLocal.vue   | 63 ++++++++++++++++++++++++
 src/renderer/manage/pages/bucketPage.vue | 10 +++-
 2 files changed, 72 insertions(+), 1 deletion(-)
 create mode 100644 src/renderer/components/ImageLocal.vue

diff --git a/src/renderer/components/ImageLocal.vue b/src/renderer/components/ImageLocal.vue
new file mode 100644
index 00000000..b03d36a0
--- /dev/null
+++ b/src/renderer/components/ImageLocal.vue
@@ -0,0 +1,63 @@
+<template>
+  <el-image
+    :src="isShowThumbnail && item.isImage ?
+      base64Image
+      : require(`../manage/pages/assets/icons/${getFileIconPath(item.fileName ?? '')}`)"
+    fit="contain"
+    style="height: 100px;width: 100%;margin: 0 auto;"
+  >
+    <template #placeholder>
+      <el-icon>
+        <Loading />
+      </el-icon>
+    </template>
+    <template #error>
+      <el-image
+        :src="require(`../manage/pages/assets/icons/${getFileIconPath(item.fileName ?? '')}`)"
+        fit="contain"
+        style="height: 100px;width: 100%;margin: 0 auto;"
+      />
+    </template>
+  </el-image>
+</template>
+
+<script lang="ts" setup>
+import { ref, onBeforeMount } from 'vue'
+import { getFileIconPath } from '@/manage/utils/common'
+import { Loading } from '@element-plus/icons-vue'
+import fs from 'fs-extra'
+import mime from 'mime-types'
+import path from 'path'
+
+const base64Image = ref('')
+const props = defineProps(
+  {
+    isShowThumbnail: {
+      type: Boolean,
+      required: true
+    },
+    item: {
+      type: Object,
+      required: true
+    },
+    localPath: {
+      type: String,
+      required: true
+    }
+  }
+)
+
+const createBase64Image = async () => {
+  const filePath = path.normalize(props.localPath)
+  const base64 = await fs.readFile(filePath, 'base64')
+  base64Image.value = `data:${mime.lookup(filePath) || 'image/png'};base64,${base64}`
+}
+
+onBeforeMount(async () => {
+  try {
+    await createBase64Image()
+  } catch (e) {
+    console.log(e)
+  }
+})
+</script>
diff --git a/src/renderer/manage/pages/bucketPage.vue b/src/renderer/manage/pages/bucketPage.vue
index f33aa5fe..9e199d7b 100644
--- a/src/renderer/manage/pages/bucketPage.vue
+++ b/src/renderer/manage/pages/bucketPage.vue
@@ -497,7 +497,7 @@ https://www.baidu.com/img/bd_logo1.png"
               shadow="hover"
             >
               <el-image
-                v-if="!item.isDir && currentPicBedName !== 'webdavplist' && currentPicBedName !== 'sftp'"
+                v-if="!item.isDir && currentPicBedName !== 'webdavplist' && currentPicBedName !== 'sftp' && currentPicBedName !== 'local'"
                 :src="isShowThumbnail && item.isImage ?
                   item.url
                   : require(`./assets/icons/${getFileIconPath(item.fileName ?? '')}`)"
@@ -526,6 +526,13 @@ https://www.baidu.com/img/bd_logo1.png"
                 :url="item.url"
                 @click="handleClickFile(item)"
               />
+              <ImageLocal
+                v-else-if="!item.isDir && currentPicBedName === 'local' && item.isImage"
+                :is-show-thumbnail="isShowThumbnail"
+                :item="item"
+                :local-path="item.key"
+                @click="handleClickFile(item)"
+              />
               <el-image
                 v-else-if="!item.isDir"
                 :src="require(`./assets/icons/${getFileIconPath(item.fileName ?? '')}`)"
@@ -1492,6 +1499,7 @@ import { videoExt } from '../utils/videofile'
 
 // 组件
 import ImageWebdav from '@/components/ImageWebdav.vue'
+import ImageLocal from '@/components/ImageLocal.vue'
 
 // 国际化函数
 import { T as $T } from '@/i18n'