feat: add distinct color coding for each role in topbar and user list

frontend/src/components/MainLayout.vue

@@ -115,7 +115,7 @@
                 </div>
               </div>
             </el-popover>
-            <span class="user-info">{{ auth.user?.realName }} · {{ auth.roleLabel }}</span>
+            <span class="user-info">{{ auth.user?.realName }} <el-tag :color="auth.roleColor" size="small" effect="dark" round style="border:none;vertical-align:middle;margin-left:4px">{{ auth.roleLabel }}</el-tag></span>
             <el-button text type="danger" @click="handleLogout">退出</el-button>
           </div>
         </el-header>

frontend/src/stores/auth.js

@@ -15,6 +15,10 @@ export const useAuthStore = defineStore('auth', {
     roleLabel: state => {
       const map = { EMPLOYEE: '员工', TEAM_LEADER: '团队主管', DEPT_LEADER: '部门负责人', HR_ADMIN: 'HR管理员', SUPER_ADMIN: '管理员' }
       return map[state.user?.role] || '员工'
+    },
+    roleColor: state => {
+      const map = { SUPER_ADMIN: '#f56c6c', HR_ADMIN: '#e6a23c', DEPT_LEADER: '#8b5cf6', TEAM_LEADER: '#3ad4d8', EMPLOYEE: '#409eff' }
+      return map[state.user?.role] || '#409eff'
     }
   },
   actions: {

frontend/src/views/org/OrgView.vue

@@ -53,10 +53,10 @@
               </el-select>
             </template>
           </el-table-column>
-          <el-table-column prop="role" label="角色" width="100">
+          <el-table-column prop="role" label="角色" width="110">
             <template #default="{ row }">
-              <el-tag :type="row.role === 'SUPER_ADMIN' ? 'danger' : ''" size="small" effect="dark" round>
-                {{ row.role === 'SUPER_ADMIN' ? '管理员' : '员工' }}
+              <el-tag :color="roleColor(row.role)" size="small" effect="dark" round style="border:none">
+                {{ roleLabel(row.role) }}
               </el-tag>
             </template>
           </el-table-column>
@@ -146,6 +146,15 @@ const editingUser = ref(null)
 const deptForm = ref({ name: '', parentId: null, leaderId: null })
 const userForm = ref({ username: '', password: '', realName: '', position: '', departmentId: null, superiorId: null, role: 'EMPLOYEE' })
 
+function roleLabel(role) {
+  const map = { SUPER_ADMIN: '管理员', HR_ADMIN: 'HR管理员', DEPT_LEADER: '部门负责人', TEAM_LEADER: '团队主管', EMPLOYEE: '员工' }
+  return map[role] || '员工'
+}
+function roleColor(role) {
+  const map = { SUPER_ADMIN: '#f56c6c', HR_ADMIN: '#e6a23c', DEPT_LEADER: '#8b5cf6', TEAM_LEADER: '#3ad4d8', EMPLOYEE: '#409eff' }
+  return map[role] || '#409eff'
+}
+
 const flatTree = computed(() => {
   const result = []
   function walk(nodes, prefix = '') {