feat: ✨ 默认头像根据用户名绘制svg (#132)

src/frontend/admin/src/components/naColAvatar/index.vue

@@ -2,7 +2,7 @@
     <el-table-column :label="label" :prop="prop" sortable="custom">
         <template #default="scope">
             <div class="avatar">
-                <el-avatar :src="getAvatar(scope)" size="small"></el-avatar>
+                <el-avatar :src="getAvatar(scope, prop)" size="small"></el-avatar>
                 <span>{{ tool.getNestedProperty(scope.row, prop) }}</span>
             </div>
         </template>
@@ -36,8 +36,8 @@ export default {
     },
     methods: {
         //获取头像
-        getAvatar(scope) {
-            return scope.row.avatar ? scope.row.avatar : this.$CONFIG.DEFAULT_AVATAR
+        getAvatar(scope, prop) {
+            return scope.row.avatar ? scope.row.avatar : this.$CONFIG.DEFAULT_AVATAR(tool.getNestedProperty(scope.row, prop))
         },
     },
 }

src/frontend/admin/src/components/naColUser/index.vue

@@ -2,7 +2,10 @@
     <el-table-column v-bind="$attrs">
         <template #default="scope">
             <div @click="click(tool.getNestedProperty(scope.row, $attrs.prop))" class="avatar">
-                <el-avatar v-if="tool.getNestedProperty(scope.row, $attrs.nestProp)" :src="getAvatar(scope)" size="small"></el-avatar>
+                <el-avatar
+                    v-if="tool.getNestedProperty(scope.row, $attrs.nestProp)"
+                    :src="getAvatar(scope, $attrs.nestProp)"
+                    size="small"></el-avatar>
                 <div>
                     <p>{{ tool.getNestedProperty(scope.row, $attrs.nestProp) }}</p>
                     <p v-if="$attrs.nestProp2">{{ tool.getNestedProperty(scope.row, $attrs.nestProp2) }}</p>
@@ -54,8 +57,8 @@ export default {
             await this.$refs.saveDialog.open('view', { id: id })
         },
         //获取头像
-        getAvatar(scope) {
-            return scope.row.avatar ? scope.row.avatar : this.$CONFIG.DEFAULT_AVATAR
+        getAvatar(scope, prop) {
+            return scope.row.avatar ? scope.row.avatar : this.$CONFIG.DEFAULT_AVATAR(tool.getNestedProperty(scope.row, prop))
         },
     },
 }

src/frontend/admin/src/config/index.js

@@ -1,5 +1,7 @@
 import MY_CONFIG from './myConfig'
 import APP_CONFIG from './appConfig'
+import avatar from '@/utils/avatar'
+import tool from '@/utils/tool'
 
 const DEFAULT_CONFIG = {
     //标题
@@ -74,8 +76,14 @@ const DEFAULT_CONFIG = {
     },
 
     //默认头像
-    DEFAULT_AVATAR:
-        'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAIAAAC0Ujn1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAflJREFUeNqs1u1P2kAYAHB6B+21UmZbatEAki2+MKIR42TGaHRLjBr/Yj/7wWRb3If5gjHbfIlBjIqCUCq0PmaJLqG9IwdP+qV3vV+v1/Z5Ttg/Ke39tm+q7VD/wlBx/j0J7xzWbccL9TVgosCivrv/Atgw8yI9JuZGVXNQjCkROL2tOpc39q8/D7bj0gcy6NSQvDoTR4LwdidVhOPDyMD29/Jd9YkyFlH6pAhanjb+d19DFvHSlOHX0x09kYpGcOAFMPf0kMxJJ02ZvlyWRjhpWcJ0moiIk240Gf9Rw2lz0o92i04/Nnhpl/Hhhtqux0mnLcZrzCQUTrrV9lh/M++CFM9rtOXyvL+lOif98+T++r4Z1Ht0Vju9anDSEKXbQBqSFH0sgz6+qMGDd7Y/1J96pav1FuTPzvZvxYrrej3REOWK09l4XWkyB7Jp30RBRNwH2jf/MZMimzZi/kk5l1HFMOKnFYK/zMaDqsxqPo6QwENDtd2YtwakwOI5rJO1OZOS0/3p8VR0s2CpMqMoJzSytWAldKmrig7cQk4fMUiX+w14rPVPVvGi9qNYcVpuIP1xVM2PvaOU2sACnYwmTbJ7cHdefssqSJFeXkUYCysz8flJjcN9nf7XvFnIahi/gMCiwphMROFzVstYSu/7sWxaXczpAAL7LMAA6FWV/DBrhrIAAAAASUVORK5CYII=',
+    DEFAULT_AVATAR(name) {
+        return (
+            'data:image/svg+xml,' +
+            encodeURIComponent(
+                avatar.createSVG(`#${Math.abs(tool.crypto.hashCode(name)).toString(16).substring(0, 6)}`, name.slice(0, 1).toUpperCase()).outerHTML,
+            )
+        )
+    },
 }
 
 //合并业务配置

src/frontend/admin/src/layout/components/userbar.vue

@@ -39,7 +39,20 @@
         </div>
         <el-dropdown @command="handleUser" class="user panel-item" trigger="click">
             <div class="user-avatar">
-                <el-avatar :size="30" :src="user.avatar ? user.avatar : $CONFIG.DEFAULT_AVATAR"></el-avatar>
+                <el-avatar
+                    :size="30"
+                    :src="
+                        user.avatar
+                            ? user.avatar
+                            : 'data:image/svg+xml,' +
+                              encodeURIComponent(
+                                  avatar.createSVG(
+                                      `#${Math.abs(this.$TOOL.crypto.hashCode(user.userName)).toString(16).substring(0, 6)}`,
+                                      user.userName.slice(0, 1).toUpperCase(),
+                                  ).outerHTML,
+                              )
+                    "></el-avatar>
+
                 <label>{{ user.userName }}</label>
                 <el-icon class="el-icon--right">
                     <el-icon-arrow-down />
@@ -68,7 +81,14 @@
 import search from './search.vue'
 import tasks from './tasks.vue'
 import message from '@/views/profile/message/components/list.vue'
+import avatar from '../../utils/avatar'
+
 export default {
+    computed: {
+        avatar() {
+            return avatar
+        },
+    },
     components: {
         search,
         tasks,

src/frontend/admin/src/utils/avatar.js

@@ -0,0 +1,42 @@
+export default {
+    //生成svg矩形
+    createSVG(color, name) {
+        const svg = document.createElement('svg')
+        svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg')
+
+        svg.setAttribute('width', 50)
+        svg.setAttribute('height', 50)
+
+        // <rect> background
+        const rect = document.createElement('rect')
+        rect.setAttribute('fill', color)
+        rect.setAttribute('x', 0)
+        rect.setAttribute('y', 0)
+        rect.setAttribute('width', '100%')
+        rect.setAttribute('height', '100%')
+
+        svg.appendChild(rect)
+
+        // <text> name
+        const text = document.createElement('text')
+
+        text.setAttribute('fill', '#fff')
+        text.setAttribute('x', '50%')
+        text.setAttribute('y', '50%')
+        text.setAttribute('text-anchor', 'middle')
+        text.setAttribute('font-size', '16')
+        text.setAttribute('font-weight', '900')
+        text.setAttribute('font-family', 'monospace')
+
+        // IE/Edge don't support alignment-baseline
+        // @see https://msdn.microsoft.com/en-us/library/gg558060(v=vs.85).aspx
+        if (document.documentMode || /Edge/.test(navigator.userAgent)) {
+            text.setAttribute('dy', '0.35em')
+        } else {
+            text.setAttribute('alignment-baseline', 'middle')
+        }
+        text.textContent = name
+        svg.appendChild(text)
+        return svg
+    },
+}

src/frontend/admin/src/views/profile/index.vue

@@ -4,7 +4,7 @@
             <el-container>
                 <el-header>
                     <div class="user-info-top">
-                        <el-avatar :size="70" :src="user.avatar ? user.avatar : $CONFIG.DEFAULT_AVATAR"></el-avatar>
+                        <el-avatar :size="70" :src="user.avatar ? user.avatar : $CONFIG.DEFAULT_AVATAR(user.userName)"></el-avatar>
                         <h2>{{ user.userName }}</h2>
                         <p>
                             <el-tag v-for="(item, i) in user.roles" :key="i" effect="dark" round size="large">{{ item.name }}</el-tag>

src/frontend/admin/src/views/profile/message/components/list.vue

@@ -1,5 +1,7 @@
 <template>
-    <el-skeleton v-if="loading" :rows="5" animated />
+    <div v-if="loading" style="padding: 1rem">
+        <el-skeleton :rows="5" animated />
+    </div>
     <template v-else>
         <el-container v-if="msgList.length > 0" class="nopadding">
             <el-header style="border: none">
@@ -30,9 +32,12 @@
                                 <div class="msg-title">
                                     <div>
                                         <el-badge v-if="msg.myFlags.userSiteMsgStatus === 0" is-dot type="primary">
-                                            <el-avatar :size="40" :src="msg.sender.avatar ?? $CONFIG.DEFAULT_AVATAR"></el-avatar>
+                                            <el-avatar :size="40" :src="msg.sender.avatar ?? $CONFIG.DEFAULT_AVATAR(msg.sender.userName)"></el-avatar>
                                         </el-badge>
-                                        <el-avatar v-else :size="40" :src="msg.sender.avatar ?? $CONFIG.DEFAULT_AVATAR"></el-avatar>
+                                        <el-avatar
+                                            v-else
+                                            :size="40"
+                                            :src="msg.sender.avatar ?? $CONFIG.DEFAULT_AVATAR(msg.sender.userName)"></el-avatar>
                                     </div>
                                     <div>
                                         <h2>{{ msg.title }}</h2>