feat:

ui/package.json

@@ -15,12 +15,15 @@
   "dependencies": {
     "axios": "^0.27.2",
     "element-plus": "^2.3.14",
+    "install": "^0.13.0",
     "lodash": "^4.17.21",
+    "mitt": "^3.0.0",
+    "npm": "^10.2.4",
     "nprogress": "^0.2.0",
     "pinia": "^2.1.6",
+    "pinyin-pro": "^3.18.2",
     "vue": "^3.3.4",
-    "vue-router": "^4.2.4",
-    "mitt": "^3.0.0"
+    "vue-router": "^4.2.4"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.3.2",

ui/src/components/app-avatar/index.vue

@@ -1,20 +1,62 @@
 <template>
-  <el-avatar :size="30" v-bind="$attrs">
+  <el-avatar
+    :size="30"
+    :style="{ background: props.pinyinColor && getAvatarColour(firstUserName) }"
+    v-bind="$attrs"
+  >
     <slot> {{ firstUserName }} </slot>
   </el-avatar>
 </template>
 <script setup lang="ts">
+import { pinyin } from 'pinyin-pro';
 import { computed } from 'vue'
 defineOptions({ name: 'AppAvatar' })
 const props = defineProps({
   name: {
     type: String,
     default: ''
+  },
+  pinyinColor: {
+    type: Boolean,
+    default: false
   }
 })
 
 const firstUserName = computed(() => {
   return props.name?.substring(0, 1)
 })
+
+function getAvatarColour(name: string) {
+  const charIndex = pinyin.getFullChars(name).charAt(0).toUpperCase().charCodeAt(0) - 65
+  const colours = [
+    '#ACA9E5',
+    '#BCC934',
+    '#B3CFE8',
+    '#DCDEB5',
+    '#D65A4A',
+    '#E0C78B',
+    '#E59191',
+    '#E99334',
+    '#FF6632',
+    '#F4B7EF',
+    '#F7D407',
+    '#F8BB98',
+    '#2BCBB1',
+    '#3594F1',
+    '#486660',
+    '#4B689F',
+    '#5976F6',
+    '#72B1B2',
+    '#778293',
+    '#7D6624',
+    '#82CBB5',
+    '#837F6A',
+    '#87B087',
+    '#9AC0C4',
+    '#958E55',
+    '#99E4F2'
+  ]
+  return colours[charIndex]
+}
 </script>
 <style lang="scss" scoped></style>