✨ Feature(custom): remove use of element-plus

src/renderer/components/ImageLocal.vue

@@ -1,36 +1,41 @@
 <template>
-  <el-image
-    :src="
-      isShowThumbnail && item.isImage
-        ? base64Image
-        : `/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="`/assets/icons/${getFileIconPath(item.fileName ?? '')}`"
-        fit="contain"
-        style="height: 100px; width: 100%; margin: 0 auto"
-      />
-    </template>
-  </el-image>
+  <div class="image-container">
+    <div
+      v-if="isLoading"
+      class="loading-placeholder"
+    >
+      <div class="loading-spinner" />
+    </div>
+    <img
+      v-else-if="!hasError"
+      :src="
+        isShowThumbnail && item.isImage
+          ? base64Image
+          : `/assets/icons/${getFileIconPath(item.fileName ?? '')}`
+      "
+      alt=""
+      class="image"
+      @load="handleImageLoad"
+      @error="handleImageError"
+    >
+    <img
+      v-else
+      :src="`/assets/icons/${getFileIconPath(item.fileName ?? '')}`"
+      alt=""
+      class="image"
+    >
+  </div>
 </template>
 
 <script lang="ts" setup>
-
-import { Loading } from '@element-plus/icons-vue'
 import { onBeforeMount, ref } from 'vue'
 
 import { getFileIconPath } from '@/manage/utils/common'
 
 const base64Image = ref('')
+const isLoading = ref(true)
+const hasError = ref(false)
+
 const props = defineProps<{
   isShowThumbnail: boolean
   item: {
@@ -41,16 +46,70 @@ const props = defineProps<{
 }>()
 
 const createBase64Image = async () => {
-  const filePath = window.node.path.normalize(props.localPath)
-  const base64 = await window.node.fs.readFile(filePath, 'base64')
-  base64Image.value = `data:${window.node.mime.lookup(filePath) || 'image/png'};base64,${base64}`
+  try {
+    const filePath = window.node.path.normalize(props.localPath)
+    const base64 = await window.node.fs.readFile(filePath, 'base64')
+    base64Image.value = `data:${window.node.mime.lookup(filePath) || 'image/png'};base64,${base64}`
+    isLoading.value = false
+  } catch (e) {
+    console.log(e)
+    hasError.value = true
+    isLoading.value = false
+  }
+}
+
+const handleImageLoad = () => {
+  isLoading.value = false
+  hasError.value = false
+}
+
+const handleImageError = () => {
+  isLoading.value = false
+  hasError.value = true
 }
 
 onBeforeMount(async () => {
-  try {
-    await createBase64Image()
-  } catch (e) {
-    console.log(e)
-  }
+  await createBase64Image()
 })
 </script>
+
+<style scoped>
+.image-container {
+  height: 100px;
+  width: 100%;
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.image {
+  max-height: 100%;
+  max-width: 100%;
+  object-fit: contain;
+  display: block;
+}
+
+.loading-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+.loading-spinner {
+  width: 24px;
+  height: 24px;
+  border: 2px solid #e4e7ed;
+  border-top: 2px solid #409eff;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+</style>