初始化版本，引入智慧食堂模块，第三方模块

src/components/NameAvatar/base.scss

@@ -0,0 +1,129 @@
+$d-type: (
+	flex: flex,
+	block: block,
+	none: none,
+);
+
+$flex-jc: (
+	start: flex-start,
+	end: flex-end,
+	center: center,
+	between: space-between,
+	around: space-around,
+);
+
+$flex-ai: (
+	start: flex-start,
+	end: flex-end,
+	center: center,
+	stretch: stretch,
+);
+
+//spacing
+$spacing-types: (
+	m: margin,
+	p: padding,
+);
+
+$spacing-directions: (
+	t: top,
+	r: right,
+	b: bottom,
+	l: left,
+);
+
+$spacing-base-size: 5px;
+
+$spacing-sizes: (
+	0: 0,
+	1: 1,
+	2: 2,
+	3: 3,
+	4: 4,
+	5: 5,
+);
+
+@each $key, $value in $d-type {
+	.d-#{$key} {
+		display: $value;
+	}
+}
+
+.flex-column {
+	flex-direction: column;
+}
+
+.text-ellipsis {
+	display: inline-block;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.w-100 {
+	width: 100%;
+}
+
+.h-100 {
+	height: 100%;
+}
+
+.flex-wrap {
+	flex-wrap: wrap;
+}
+
+.flex-grow-1 {
+	flex: 1;
+}
+
+@each $dir in(top, bottom, right, left) {
+	.border-#{$dir} {
+		border-#{$dir}: 1px solid;
+	}
+}
+
+@each $key, $value in $flex-jc {
+	.jc-#{$key} {
+		justify-content: $value;
+	}
+}
+
+@each $key, $value in $flex-ai {
+	.ai-#{$key} {
+		align-items: $value;
+	}
+}
+//text
+@each $var in (left, center, right) {
+	.text-#{$var} {
+		text-align: $var !important;
+	}
+}
+
+@each $typeKey, $type in $spacing-types {
+	@each $sizeKey, $size in $spacing-sizes {
+		.#{$typeKey}-#{$sizeKey} {
+			#{$type}: $size * $spacing-base-size;
+		}
+	}
+
+	@each $sizeKey, $size in $spacing-sizes {
+		.#{$typeKey}x-#{$sizeKey} {
+			#{$type}-left: $size * $spacing-base-size;
+			#{$type}-right: $size * $spacing-base-size;
+		}
+
+		.#{$typeKey}y-#{$sizeKey} {
+			#{$type}-top: $size * $spacing-base-size;
+			#{$type}-bottom: $size * $spacing-base-size;
+		}
+	}
+
+	@each $directionKey, $direction in $spacing-directions {
+		@each $sizeKey, $size in $spacing-sizes {
+			.#{$typeKey}#{$directionKey}-#{$sizeKey} {
+				#{$type}-#{$direction}: $size * $spacing-base-size;
+			}
+		}
+	}
+}

src/components/NameAvatar/index.vue

@@ -0,0 +1,105 @@
+<template>
+	<div :class="mode == 'square' ? 'chatface' : 'brround avatar cover-image'" :style="transform" style="overflow: hidden; width: 40px; height: 40px">
+		<img v-if="faceUrl && !num" :src="faceUrl" class="w-100 h-100" />
+		<div v-else :style="styles" class="w-100 h-100 d-flex ai-center jc-center">{{ text }}</div>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'nameAvatar',
+	props: {
+		scale: {
+			type: String,
+			default: '1',
+		},
+		num: [Number, String],
+		name: String,
+		mode: {
+			type: String,
+			default: '',
+		},
+		fontColor: {
+			type: String,
+			default: '#fff',
+		},
+		backgroundColor: {
+			type: String,
+			default: '#3696F2',
+		},
+		faceUrl: {
+			type: String,
+			default: '',
+		},
+	},
+	data() {
+		return {};
+	},
+	watch: {},
+	computed: {
+		// eslint-disable-next-line vue/return-in-computed-property
+		text() {
+			if (this.num !== undefined) {
+				return `+${this.num}`;
+			} else {
+				if (this.name) {
+					return this.name.slice(-2);
+				}
+			}
+		},
+		transform() {
+			let style = {};
+			if (this.scale) {
+				style['transform'] = `scale(${this.scale}, ${this.scale})`;
+			}
+			return style;
+		},
+		styles() {
+			let style = {};
+			if (this.size) {
+				style['font-size'] = '12px';
+			}
+			if (this.fontColor) {
+				style.color = this.fontColor;
+			}
+			if (this.backgroundColor) {
+				style['background'] = this.backgroundColor;
+			}
+			return style;
+		},
+	},
+	methods: {},
+};
+</script>
+<style lang="scss" scoped>
+@import './base.scss';
+
+.avatar {
+	display: inline-block;
+	position: relative;
+	text-align: center;
+	vertical-align: bottom;
+	font-size: 8px;
+	user-select: none;
+	z-index: 10;
+
+	&:hover {
+		z-index: 100;
+	}
+}
+
+.brround {
+	border-radius: 50%;
+}
+
+.chatface {
+	display: block;
+	border-radius: 8px;
+	overflow: hidden;
+
+	img {
+		width: 100%;
+		height: 100%;
+	}
+}
+</style>