yunzhu-im-mobile/components/SystemAvatar.vue

<template>
	<view class="system-avatar" :style="wrapStyle">
		<view class="system-avatar-placeholder" :class="'gradient-' + gradientIndex" :style="placeholderStyle">
			<image
				class="system-avatar-icon"
				src="/static/icons/application.svg"
				mode="contain"
				:style="iconStyle"
			/>
		</view>
	</view>
</template>

<script setup>
import { computed } from 'vue'

/** 渐变色库 [左上深, 右下浅]，135deg，共 20 组，与 UserAvatar 保持一致 */
const AVATAR_GRADIENT_PAIRS = [
	['#1e3a8a', '#93c5fd'], ['#166534', '#86efac'], ['#c2410c', '#fdba74'], ['#b91c1c', '#fca5a5'], ['#5b21b6', '#c4b5fd'],
	['#0f766e', '#5eead4'], ['#3730a3', '#a5b4fc'], ['#0d9488', '#2dd4bf'], ['#b45309', '#fcd34d'], ['#be123c', '#fda4af'],
	['#0369a1', '#7dd3fc'], ['#4d7c0f', '#bef264'], ['#86198f', '#e879f9'], ['#475569', '#cbd5e1'], ['#047857', '#6ee7b7'],
	['#6d28d9', '#ddd6fe'], ['#1e40af', '#93c5fd'], ['#ea580c', '#fed7aa'], ['#0e7490', '#99f6e4'], ['#881337', '#fbcfe8'],
]

/** 仅使用 name 进行哈希，确保同一应用/平台通知保持稳定颜色 */
function getGradientIndexByName(name) {
	const s = String(name || '').trim() || 'SYSTEM'
	let hash = 0
	for (let i = 0; i < s.length; i++) {
		hash = ((hash << 5) - hash + s.charCodeAt(i)) | 0
	}
	return Math.abs(hash) % AVATAR_GRADIENT_PAIRS.length
}

const props = defineProps({
	/** 名称/标识，用于确定渐变颜色 */
	name: { type: String, default: '' },
	/** 尺寸数值，默认 48 */
	size: { type: Number, default: 48 },
	/** 尺寸单位：'px' | 'rpx'，默认 px */
	unit: { type: String, default: 'px' },
})

const su = computed(() => props.unit || 'px')

const gradientIndex = computed(() => getGradientIndexByName(props.name))

const wrapStyle = computed(() => {
	const u = su.value
	const w = props.size + u
	return {
		width: w,
		height: w,
		borderRadius: '50%',
		overflow: 'hidden',
	}
})

const placeholderStyle = computed(() => {
	const u = su.value
	const w = props.size + u
	return {
		width: w,
		height: w,
		borderRadius: '50%',
	}
})

const iconStyle = computed(() => {
	const u = su.value
	const w = (props.size * 0.6) + u
	return {
		width: w,
		height: w,
	}
})
</script>

<style scoped>
.system-avatar {
	flex-shrink: 0;
}
.system-avatar-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
}
.system-avatar-icon {
	display: block;
	/* 如果原图是深色，可通过滤镜统一成白色图标 */
	filter: brightness(0) invert(1);
}
</style>
<style>
/* 与 UserAvatar 渐变逻辑保持一致，使用不同前缀避免样式冲突 */
.system-avatar .system-avatar-placeholder.gradient-0 { background-color: #1e3a8a; background-image: linear-gradient(135deg, #1e3a8a, #93c5fd); }
.system-avatar .system-avatar-placeholder.gradient-1 { background-color: #166534; background-image: linear-gradient(135deg, #166534, #86efac); }
.system-avatar .system-avatar-placeholder.gradient-2 { background-color: #c2410c; background-image: linear-gradient(135deg, #c2410c, #fdba74); }
.system-avatar .system-avatar-placeholder.gradient-3 { background-color: #b91c1c; background-image: linear-gradient(135deg, #b91c1c, #fca5a5); }
.system-avatar .system-avatar-placeholder.gradient-4 { background-color: #5b21b6; background-image: linear-gradient(135deg, #5b21b6, #c4b5fd); }
.system-avatar .system-avatar-placeholder.gradient-5 { background-color: #0f766e; background-image: linear-gradient(135deg, #0f766e, #5eead4); }
.system-avatar .system-avatar-placeholder.gradient-6 { background-color: #3730a3; background-image: linear-gradient(135deg, #3730a3, #a5b4fc); }
.system-avatar .system-avatar-placeholder.gradient-7 { background-color: #0d9488; background-image: linear-gradient(135deg, #0d9488, #2dd4bf); }
.system-avatar .system-avatar-placeholder.gradient-8 { background-color: #b45309; background-image: linear-gradient(135deg, #b45309, #fcd34d); }
.system-avatar .system-avatar-placeholder.gradient-9 { background-color: #be123c; background-image: linear-gradient(135deg, #be123c, #fda4af); }
.system-avatar .system-avatar-placeholder.gradient-10 { background-color: #0369a1; background-image: linear-gradient(135deg, #0369a1, #7dd3fc); }
.system-avatar .system-avatar-placeholder.gradient-11 { background-color: #4d7c0f; background-image: linear-gradient(135deg, #4d7c0f, #bef264); }
.system-avatar .system-avatar-placeholder.gradient-12 { background-color: #86198f; background-image: linear-gradient(135deg, #86198f, #e879f9); }
.system-avatar .system-avatar-placeholder.gradient-13 { background-color: #475569; background-image: linear-gradient(135deg, #475569, #cbd5e1); }
.system-avatar .system-avatar-placeholder.gradient-14 { background-color: #047857; background-image: linear-gradient(135deg, #047857, #6ee7b7); }
.system-avatar .system-avatar-placeholder.gradient-15 { background-color: #6d28d9; background-image: linear-gradient(135deg, #6d28d9, #ddd6fe); }
.system-avatar .system-avatar-placeholder.gradient-16 { background-color: #1e40af; background-image: linear-gradient(135deg, #1e40af, #93c5fd); }
.system-avatar .system-avatar-placeholder.gradient-17 { background-color: #ea580c; background-image: linear-gradient(135deg, #ea580c, #fed7aa); }
.system-avatar .system-avatar-placeholder.gradient-18 { background-color: #0e7490; background-image: linear-gradient(135deg, #0e7490, #99f6e4); }
.system-avatar .system-avatar-placeholder.gradient-19 { background-color: #881337; background-image: linear-gradient(135deg, #881337, #fbcfe8); }
</style>