feat:图片预览组件

.env.development

@@ -12,7 +12,8 @@ VITE_ADMIN_PROXY_PATH = http://localhost:9999
 #VITE_ADMIN_PROXY_PATH = http://192.168.110.156:9999
 
 # 图片访问基础地址
-VITE_IMAGE_BASE_PATH = http://123.156.230.15:8089/api
+# VITE_IMAGE_BASE_PATH = http://123.156.230.15:8089/api
+VITE_IMAGE_BASE_PATH = http://localhost:9999
 
 # 代码生成服务地址
 VITE_GEN_PROXY_PATH = http://192.168.110.156:5003

src/components/PreviewImage/index.vue

@@ -0,0 +1,72 @@
+<!-- 图片预览 -->
+<script lang="ts" setup name="PreviewImage">
+
+type Props = {
+    src?: string
+    width?: string | number
+    height?: string | number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    width: 50,
+    height: 50,
+})
+
+const realSrc = computed(() => {
+    if (!props.src) return "";
+    let real_src = props.src.split(",")[0];
+    return dispatchUrl(real_src) ?? "";
+})
+const realSrcList = computed(() => {
+    if (!props.src) return "";
+    let real_src = props.src.split(",")?.map(v => dispatchUrl(v));
+    return real_src ?? [];
+})
+const realWidth = computed(() => typeof props.width == "string" ? props.width : `${props.width}px`)
+const realHeight = computed(() => typeof props.height == "string" ? props.height : `${props.height}px`)
+
+function dispatchUrl(url?: string) {
+    if (!url) return ""
+    return url.includes('http') ? url : import.meta.env.VITE_IMAGE_BASE_PATH + url
+}
+</script>
+
+<template>
+    <el-image v-if="props.src" hide-on-click-modal preview-teleported :src="`${realSrc}`" fit="cover"
+        :style="`width:${realWidth};height:${realHeight};`" :preview-src-list="realSrcList">
+        <template #error>
+            <div class="image-slot">
+                <i class="el-icon-picture-outline"></i>
+            </div>
+        </template>
+    </el-image>
+    <div v-else :style="`width:${realWidth};height:${realHeight};`" />
+</template>
+
+
+<style lang="scss" scoped>
+.el-image {
+    border-radius: 5px;
+    background-color: #ebeef5;
+    box-shadow: 0 0 5px 1px #ccc;
+
+    :deep(.el-image__inner) {
+        transition: all 0.3s;
+        cursor: pointer;
+
+        &:hover {
+            transform: scale(1.2);
+        }
+    }
+
+    :deep(.image-slot) {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+        color: #909399;
+        font-size: 30px;
+    }
+}
+</style>

src/components/index.ts

@@ -11,6 +11,7 @@ import Editor from '/@/components/Editor/index.vue';
 import Tip from '/@/components/Tip/index.vue';
 import TagList from '/@/components/TagList/index.vue';
 import SvgIcon from '/@/components/SvgIcon/index.vue';
+import PreviewImage from "/@/components/PreviewImage/index.vue"
 
 // 第三方组件
 import ElementPlus from 'element-plus';
@@ -45,6 +46,7 @@ export default {
 		app.component('DelWrap', DelWrap);
 		app.component('TagList', TagList);
 		app.component('SvgIcon', SvgIcon);
+		app.component('PreviewImage',PreviewImage)
 
 		// 导入全部的elmenet-plus的图标
 		for (const [key, component] of Object.entries(ElementPlusIconsVue)) {

src/views/wallet/wallet-type/index.vue

@@ -26,7 +26,11 @@
             <dict-tag :options="wallet_type" :value="row.uniqueCode" />
           </template>
         </el-table-column>
-        <el-table-column prop="icon" label="钱包图标" show-overflow-tooltip />
+        <el-table-column prop="icon" label="钱包图标" show-overflow-tooltip>
+          <template #default="{ row }">
+            <preview-image :src="row.icon" />
+          </template>
+        </el-table-column>
         <el-table-column label="操作" width="150">
           <template #default="scope">
             <el-button icon="edit-pen" text type="primary" v-auth="'wallet_walletType_edit'"