aizuda-web-vue3/src/components/Flow/FlowNodeAvatar.vue

<template>
	<div class="avatar" :style="AvatarStyle">
		<el-avatar v-if="avatar && !useSlots().avatar" :size="size" class="icon" :src="avatar" />
		<!-- <el-avatar v-if="user && user.avatar" :size="size" class="icon" :src="user.avatar" /> -->
		<!-- <el-avatar v-else :size="size" class="icon" :icon="UserFilled" /> -->
		<el-avatar v-if="!avatar && !useSlots().avatar" :size="size" class="icon">
			<template v-if="name">
				{{ name?.charAt(0) || '-' }}
			</template>
			<UserFilled v-else />
		</el-avatar>
		<el-avatar v-if="useSlots().avatar" :size="size" class="icon" style="background-color: #2a5eff">
			<slot name="avatar"></slot>
		</el-avatar>
		<!-- <div v-if="showName && user && user.name" class="name" :style="NameStyle">{{ user.name }}</div> -->
		<div v-if="showName" class="name" :style="NameStyle">{{ name }}</div>
	</div>
</template>

<script setup>
import { computed, ref, watch, onBeforeMount, useSlots } from 'vue'
// import { UserFilled } from '@element-plus/icons-vue'

const user = ref({})

const props = defineProps({
	size: { type: Number, default: 24 },
	id: { type: String, default: '' },
	name: { type: String, default: '' },
	avatar: { type: String, default: '' },
	showName: { type: Boolean, default: true }
})

watch(
	() => props.id,
	() => loadUserDetail()
)

const loadUserDetail = () => {
	user.value = {
		name: '艾斯'
	}
}

const AvatarStyle = computed(() => {
	const padding = props.showName ? 4 : 0
	return {
		height: props.size + padding * 2 + 'px',
		borderRadius: (props.size + padding * 2) / 2 + 'px',
		padding: padding + 'px'
	}
})

const NameStyle = computed(() => {
	return {
		fontSize: props.size / 2 + 1 + 'px'
	}
})

onBeforeMount(() => {
	loadUserDetail()
})
</script>

<style lang="scss" scoped>
.avatar {
	background: #f2f4f5;
	display: flex;
	align-items: center;
	width: fit-content;

	.el-avatar {
		background: var(--el-color-primary);
	}

	.icon {
		overflow: hidden;
		flex-shrink: 0;
	}

	.name {
		user-select: none;
		font-family: PingFangSC-Regular, PingFang SC;
		color: #34383e;
		margin: 0 4px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		max-width: 64px;
	}
}
</style>