fix: replace LogoIcon with el-avatar for improved icon rendering in index.vue and NodeContent.vue

This commit is contained in:
wxg0103 2025-07-15 09:49:27 +08:00
parent bd1f75a4ae
commit 86675e9ec3
2 changed files with 26 additions and 18 deletions

View File

@ -1,18 +1,22 @@
<template> <template>
<el-input v-model.trim="filterText" :placeholder="$t('common.search')" prefix-icon="Search" clearable <el-input v-model.trim="filterText" :placeholder="$t('common.search')" prefix-icon="Search"
style="padding: 12px 12px 0 12px;" /> clearable
style="padding: 12px 12px 0 12px;"/>
<div class="list flex-wrap"> <div class="list flex-wrap">
<template v-if="filterList.length"> <template v-if="filterList.length">
<el-popover v-for="item in filterList" :key="item.id" placement="right" :width="280" :show-after="500"> <el-popover v-for="item in filterList" :key="item.id" placement="right" :width="280"
:show-after="500">
<template #reference> <template #reference>
<div class="list-item flex align-center border border-r-6 p-8-12 cursor" style="width: calc(50% - 6px)" <div class="list-item flex align-center border border-r-6 p-8-12 cursor"
@click.stop="emit('clickNodes', item)" @mousedown.stop="emit('onmousedown', item)"> style="width: calc(50% - 6px)"
<LogoIcon v-if="item.resource_type === 'application'" height="32px" /> @click.stop="emit('clickNodes', item)" @mousedown.stop="emit('onmousedown', item)">
<el-avatar v-else-if="isAppIcon(item?.icon)" shape="square" :size="32" style="background: none"> <!-- <LogoIcon v-if="item.resource_type === 'application'" height="32px" />-->
<img :src="resetUrl(item?.icon)" alt="" /> <el-avatar v-if="isAppIcon(item?.icon)" shape="square" :size="32"
style="background: none">
<img :src="resetUrl(item?.icon,resetUrl('./favicon.ico'))" alt=""/>
</el-avatar> </el-avatar>
<el-avatar v-else class="avatar-green" shape="square" :size="32"> <el-avatar v-else class="avatar-green" shape="square" :size="32">
<img src="@/assets/workflow/icon_tool.svg" style="width: 58%" alt="" /> <img src="@/assets/workflow/icon_tool.svg" style="width: 58%" alt=""/>
</el-avatar> </el-avatar>
<span class="ml-8 ellipsis" :title="item.name">{{ item.name }}</span> <span class="ml-8 ellipsis" :title="item.name">{{ item.name }}</span>
</div> </div>
@ -21,12 +25,13 @@
<template #default> <template #default>
<div class="flex-between"> <div class="flex-between">
<div class="flex align-center"> <div class="flex align-center">
<LogoIcon v-if="item.resource_type === 'application'" height="32px" /> <!-- <LogoIcon v-if="item.resource_type === 'application'" height="32px"/>-->
<el-avatar v-else-if="isAppIcon(item?.icon)" shape="square" :size="32" style="background: none"> <el-avatar v-if="isAppIcon(item?.icon)" shape="square" :size="32"
<img :src="resetUrl(item?.icon)" alt="" /> style="background: none">
<img :src="resetUrl(item?.icon,resetUrl('./favicon.ico'))" alt=""/>
</el-avatar> </el-avatar>
<el-avatar v-else class="avatar-green" shape="square" :size="32"> <el-avatar v-else class="avatar-green" shape="square" :size="32">
<img src="@/assets/workflow/icon_tool.svg" style="width: 58%" alt="" /> <img src="@/assets/workflow/icon_tool.svg" style="width: 58%" alt=""/>
</el-avatar> </el-avatar>
<span class="font-medium ml-8 break-all" :title="item.name">{{ item.name }}</span> <span class="font-medium ml-8 break-all" :title="item.name">{{ item.name }}</span>
</div> </div>
@ -43,14 +48,14 @@
</template> </template>
</el-popover> </el-popover>
</template> </template>
<el-empty v-else :description="$t('common.noData')" /> <el-empty v-else :description="$t('common.noData')"/>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { watch, ref } from 'vue' import {watch, ref} from 'vue'
import { isAppIcon, resetUrl } from '@/utils/common' import {isAppIcon, resetUrl} from '@/utils/common'
import { isWorkFlow } from '@/utils/application' import {isWorkFlow} from '@/utils/application'
const props = defineProps<{ const props = defineProps<{
list: any[] list: any[]
@ -63,6 +68,7 @@ const emit = defineEmits<{
const filterText = ref('') const filterText = ref('')
const filterList = ref<any[]>([]) const filterList = ref<any[]>([])
function filter(list: any[], filterText: string) { function filter(list: any[], filterText: string) {
if (!filterText.length) { if (!filterText.length) {
return list return list

View File

@ -176,7 +176,9 @@
@click="goApp(item)" @click="goApp(item)"
> >
<template #icon> <template #icon>
<LogoIcon height="32px" /> <el-avatar shape="square" :size="32" style="background: none">
<img :src="resetUrl(item?.icon, resetUrl('./favicon.ico'))" alt="" />
</el-avatar>
</template> </template>
<template #subTitle> <template #subTitle>
<el-text class="color-secondary" size="small"> <el-text class="color-secondary" size="small">