优化视觉：接入全系统角色专属职业正装头像模板

build_ui/src/layout/components/Navbar.vue

@@ -32,6 +32,7 @@ import { mapGetters } from 'vuex'
 import Breadcrumb from '@/components/Breadcrumb'
 import TopNav from '@/components/TopNav'
 import Hamburger from '@/components/Hamburger'
+import { getRoleAvatar } from '@/utils/avatar'
 
 export default {
   components: {
@@ -41,7 +42,6 @@ export default {
   },
   data() {
     return {
-      defaultAvatar: require('@/assets/images/profile.jpg'),
       avatarLoadFailed: false
     }
   },
@@ -49,11 +49,12 @@ export default {
     ...mapGetters([
       'sidebar',
       'avatar',
-      'device'
+      'device',
+      'roles'
     ]),
     avatarSrc() {
       if (this.avatarLoadFailed || !this.avatar) {
-        return this.defaultAvatar
+        return getRoleAvatar(this.roles)
       }
       return this.avatar
     },

build_ui/src/store/modules/user.js

@@ -1,5 +1,6 @@
 import { login, logout, getInfo } from '@/api/login'
 import { getToken, setToken, removeToken, setDpToken } from '@/utils/auth'
+import { getRoleAvatar } from '@/utils/avatar'
 import axios from 'axios'
 import {setting} from "@/config";
 
@@ -85,7 +86,12 @@ const user = {
       return new Promise((resolve, reject) => {
         getInfo().then(res => {
           const user = res.user
-          const avatar = (user.avatar == "" || user.avatar == null) ? require("@/assets/images/profile.jpg") : process.env.VUE_APP_BASE_API + user.avatar;
+          const isBrokenAvatar = user.avatar && user.avatar.includes('899d3f8e438f427eac6aeec76e489b52')
+          const avatar = (user.avatar == "" || user.avatar == null || isBrokenAvatar)
+            ? getRoleAvatar(res.roles)
+            : (user.avatar.indexOf('http') === 0 || user.avatar.indexOf('data:') === 0
+                ? user.avatar
+                : process.env.VUE_APP_BASE_API + user.avatar);
           // 先写入业务身份标志，保证角色就绪时自服务判定已同步到位；后端未返回时按无身份处理
           commit('SET_SELF_SERVICE', res.selfService)
           if (res.roles && res.roles.length > 0) { // 验证返回的roles是否是一个非空数组

build_ui/src/utils/avatar.js

@@ -0,0 +1,66 @@
+import defaultAvatar from '@/assets/images/avatars/default.jpg'
+import adminAvatar from '@/assets/images/avatars/admin.jpg'
+import trainAdminAvatar from '@/assets/images/avatars/train_admin.jpg'
+import teacherAvatar from '@/assets/images/avatars/teacher.jpg'
+import studentAvatar from '@/assets/images/avatars/student.jpg'
+
+export {
+  defaultAvatar,
+  adminAvatar,
+  trainAdminAvatar,
+  teacherAvatar,
+  studentAvatar
+}
+
+/**
+ * 根据用户角色判定合适的职业默认头像
+ * @param {Array|string} roles 用户角色数组或角色key
+ * @returns {string} 头像资源路径
+ */
+export function getRoleAvatar(roles) {
+  if (!roles) return defaultAvatar
+  const roleList = Array.isArray(roles) ? roles : [roles]
+  if (roleList.includes('admin')) {
+    return adminAvatar
+  }
+  if (roleList.includes('train_admin')) {
+    return trainAdminAvatar
+  }
+  if (roleList.includes('train_teacher')) {
+    return teacherAvatar
+  }
+  if (roleList.includes('train_student')) {
+    return studentAvatar
+  }
+  return defaultAvatar
+}
+
+/**
+ * 获取教师头像 (空或404死链时返回专业讲师头像)
+ * @param {string} avatar 数据库中的头像路径
+ * @returns {string}
+ */
+export function getTeacherAvatar(avatar) {
+  if (!avatar || avatar.trim() === '' || avatar.includes('899d3f8e438f427eac6aeec76e489b52')) {
+    return teacherAvatar
+  }
+  if (avatar.indexOf('http') === 0 || avatar.indexOf('data:') === 0) {
+    return avatar
+  }
+  return process.env.VUE_APP_BASE_API + avatar
+}
+
+/**
+ * 获取学员头像 (空或404死链时返回专业学员工装头像)
+ * @param {string} avatar 数据库中的头像路径
+ * @returns {string}
+ */
+export function getStudentAvatar(avatar) {
+  if (!avatar || avatar.trim() === '' || avatar.includes('899d3f8e438f427eac6aeec76e489b52')) {
+    return studentAvatar
+  }
+  if (avatar.indexOf('http') === 0 || avatar.indexOf('data:') === 0) {
+    return avatar
+  }
+  return process.env.VUE_APP_BASE_API + avatar
+}

build_ui/src/views/system/user/profile/userAvatar.vue

@@ -58,6 +58,7 @@ import store from '@/store'
 import { VueCropper } from 'vue-cropper'
 import { uploadAvatar } from '@/api/system/user'
 import { debounce } from '@/utils'
+import { getRoleAvatar } from '@/utils/avatar'
 
 export default {
   components: { VueCropper },
@@ -75,7 +76,7 @@ export default {
       // 弹出层标题
       title: '修改头像',
       options: {
-        img: store.getters.avatar, // 裁剪图片的地址
+        img: store.getters.avatar || getRoleAvatar(store.getters.roles), // 裁剪图片的地址
         autoCrop: true, // 是否默认生成截图框
         autoCropWidth: 200, // 默认生成截图框宽度
         autoCropHeight: 200, // 默认生成截图框高度
@@ -88,7 +89,7 @@ export default {
   },
   methods: {
     handleAvatarError() {
-      this.options.img = require('@/assets/images/profile.jpg')
+      this.options.img = getRoleAvatar(store.getters.roles)
     },
     // 编辑头像
     editCropper() {

build_ui/src/views/train/me/student/index.vue

@@ -35,7 +35,7 @@
           <div v-loading="profileLoading">
             <div v-if="studentProfile" class="profile-detail">
               <div class="profile-avatar">
-                <el-avatar :size="72" icon="el-icon-user" style="background-color: #409eff;" />
+                <el-avatar :size="72" :src="studentAvatarSrc" icon="el-icon-user" style="background-color: #409eff;" />
                 <div class="name-block">{{ studentProfile.sName }}</div>
                 <div class="id-block">学号：{{ studentProfile.sId }}</div>
               </div>
@@ -307,6 +307,7 @@
 </template>
 
 <script>
+import { getStudentAvatar } from '@/utils/avatar'
 import * as echarts from 'echarts'
 import {
   getStudentProfile,
@@ -356,6 +357,9 @@ export default {
     attendanceAbnormalCount() {
       if (!this.attendanceList || this.attendanceList.length === 0) return 0
       return this.attendanceList.filter(i => i.checkinStatus != null && i.checkinStatus !== 1).length
+    },
+    studentAvatarSrc() {
+      return getStudentAvatar(this.studentProfile && this.studentProfile.avatar)
     }
   },
   created() {

build_ui/src/views/train/me/teacher/index.vue

@@ -35,7 +35,7 @@
           <div v-loading="profileLoading">
             <div v-if="teacherProfile" class="profile-detail">
               <div class="profile-avatar">
-                <el-avatar :size="72" icon="el-icon-user-solid" style="background-color: #1890ff;" />
+                <el-avatar :size="72" :src="teacherAvatarSrc" icon="el-icon-user-solid" style="background-color: #1890ff;" />
                 <div class="name-block">{{ teacherProfile.tName }}</div>
                 <div class="id-block">工号：{{ teacherProfile.tId }}</div>
               </div>
@@ -268,6 +268,7 @@
 </template>
 
 <script>
+import { getTeacherAvatar } from '@/utils/avatar'
 import {
   getTeacherProfile,
   getMyPlans,
@@ -278,6 +279,11 @@ import {
 
 export default {
   name: 'TeacherWorkbench',
+  computed: {
+    teacherAvatarSrc() {
+      return getTeacherAvatar(this.teacherProfile && this.teacherProfile.avatar)
+    }
+  },
   data() {
     return {
       activeTab: 'plans',

build_ui/src/views/train/student/index.vue

@@ -379,6 +379,7 @@ import {addTeacher, updateTeacher} from "@/api/train/teacher";
 import {listPlan} from "@/api/train/plan";
 import {listPlanEnrollments} from "@/api/train/enrollment";
 import {getActiveAccommodation} from "@/api/train/accommodation";
+import { getStudentAvatar } from '@/utils/avatar';
 export default {
   name: 'Student',
   components: { studentAvatar, Treeselect },
@@ -879,15 +880,9 @@ export default {
         this.$refs.createForm.clearValidate('avatar')
       }
     },
-    // 头像地址解析：补全 baseApi，空值使用默认头像
+    // 头像地址解析：补全 baseApi，空值使用专业学员工装默认头像
     avatarUrl(avatar) {
-      if (!avatar) {
-        return require('@/assets/images/profile.jpg')
-      }
-      if (avatar.indexOf('http') === 0 || avatar.indexOf('data:') === 0) {
-        return avatar
-      }
-      return process.env.VUE_APP_BASE_API + avatar
+      return getStudentAvatar(avatar)
     },
     submitCreate() {
       /*this.$refs.createForm.validate(valid => {

build_ui/src/views/train/student/studentAvatar.vue

@@ -58,8 +58,10 @@ import { VueCropper } from 'vue-cropper'
 import request from '@/utils/request'
 import { debounce } from '@/utils'
 
-// 默认头像
-const DEFAULT_AVATAR = require('@/assets/images/profile.jpg')
+import { studentAvatar } from '@/utils/avatar'
+
+// 默认学员职业头像
+const DEFAULT_AVATAR = studentAvatar
 
 export default {
   components: { VueCropper },

build_ui/src/views/train/teacher/index.vue

@@ -349,6 +349,7 @@ import {listDept} from "@/api/system/dept";
 // 复用学员头像上传组件（通用：props.user 传入 {avatar}，上传成功后抛出 success 事件）
 import studentAvatar from '@/views/train/student/studentAvatar'
 import request from '@/utils/request'
+import { getTeacherAvatar } from '@/utils/avatar'
 export default {
   name: 'Teacher',
   components: { Treeselect, studentAvatar },
@@ -690,15 +691,9 @@ export default {
         this.$refs.form.clearValidate('avatar')
       }
     },
-    /** 头像地址解析：补全 baseApi，空值使用默认头像 */
+    /** 头像地址解析：补全 baseApi，空值使用专业讲师默认头像 */
     avatarUrl(avatar) {
-      if (!avatar) {
-        return require('@/assets/images/profile.jpg')
-      }
-      if (avatar.indexOf('http') === 0 || avatar.indexOf('data:') === 0) {
-        return avatar
-      }
-      return process.env.VUE_APP_BASE_API + avatar
+      return getTeacherAvatar(avatar)
     },
     /** 搜索按钮操作 */
     handleQuery() {