feat(admin): 优化用户权限分级·统一头像·数据分析面板修复

- fix(DataAnalysisPanel): 活跃用户卡片固定 400px + overflow-y 独立滚动容器，底部渐变遮罩提示滚动；列表项 tooltip 增加 max-height 与 overflow 截断；新增圆形头像显示与 @error 回退首字母 - feat(admin): 新增 getUserAvatarUrl 统一头像策略链（OAuth identity→Gravatar→DiceBear 7.x initials），stats/realtime、active-users、users/index 三处接口返回 avatarUrl - fix(admin): 建立 SUPER_ADMIN(100)>ADMIN(80)>USER(10) 分级常量与 canChangeRoleOf/canResetPasswordFor 等谓词；reset-password、[id].put、index.post 全面应用级别守卫；前端 UserManager 按钮按权限禁用、availableRoles 按操作者级别过滤 SUPER_ADMIN/ADMIN 等高角色
2026-09-12 08:36:45 +08:00
parent 153ee41ef0
commit d09d12828d
10 changed files with 633 additions and 199 deletions
@@ -395,43 +395,53 @@
          </div>
          <div
            v-else-if="activeUsers.length > 0"
-            class="flex-1 space-y-3 overflow-y-auto custom-scrollbar pr-2"
+            class="relative max-h-[400px] overflow-hidden"
          >
-            <div
-              v-for="(user, i) in activeUsers.slice(0, 5)"
-              :key="i"
-              class="relative p-5 bg-zinc-950/30 border border-zinc-800/50 rounded-3xl overflow-hidden group"
-            >
-              <div class="flex items-center gap-4 relative z-10">
-                <div
-                  class="w-12 h-12 rounded-2xl bg-zinc-800 flex items-center justify-center font-black text-zinc-500 group-hover:text-zinc-200 transition-colors"
-                >
-                  {{ user.name.charAt(0) }}
-                </div>
-                <div class="flex-1">
-                  <h4 class="text-sm font-bold text-zinc-100">{{ user.name }}</h4>
-                  <p class="text-xs text-zinc-600 font-medium mt-1">
-                    {{ user.contributions }}首投稿 · {{ user.likes }}次点赞
-                  </p>
-                </div>
-                <div class="text-right">
-                  <span
-                    class="text-xl font-black text-zinc-300 group-hover:text-purple-400 transition-colors"
-                    >{{ user.activityScore }}</span
-                  >
-                  <p class="text-[10px] font-black text-zinc-700 uppercase tracking-widest">
-                    活跃度
-                  </p>
-                </div>
-              </div>
-              <!-- 进度条指示器 -->
+            <div class="space-y-3 overflow-y-auto custom-scrollbar pr-2 max-h-[400px] pb-6">
              <div
-                class="absolute bottom-0 left-0 h-1 bg-purple-500/20 group-hover:bg-purple-500/40 transition-all"
-                :style="{
-                  width: `${(user.activityScore / Math.max(...activeUsers.map((u) => u.activityScore), 1)) * 100}%`
-                }"
-              />
+                v-for="(user, i) in activeUsers.slice(0, 5)"
+                :key="i"
+                class="relative p-5 bg-zinc-950/30 border border-zinc-800/50 rounded-3xl overflow-hidden group"
+              >
+                <div class="flex items-center gap-4 relative z-10">
+                  <img
+                    v-if="user.avatarUrl && !failedAvatars[user.id]"
+                    :src="user.avatarUrl"
+                    :alt="user.name"
+                    class="w-12 h-12 rounded-2xl object-cover border border-zinc-700/50 shrink-0"
+                    @error="handleAvatarError($event, user)"
+                  >
+                  <div
+                    v-else
+                    class="w-12 h-12 rounded-2xl bg-zinc-800 flex items-center justify-center font-black text-zinc-500 group-hover:text-zinc-200 transition-colors shrink-0"
+                  >
+                    {{ user.name.charAt(0) }}
+                  </div>
+                  <div class="flex-1 min-w-0">
+                    <h4 class="text-sm font-bold text-zinc-100 truncate">{{ user.name }}</h4>
+                    <p class="text-xs text-zinc-600 font-medium mt-1 truncate">
+                      {{ user.contributions }}首投稿 · {{ user.likes }}次点赞
+                    </p>
+                  </div>
+                  <div class="text-right shrink-0">
+                    <span
+                      class="text-xl font-black text-zinc-300 group-hover:text-purple-400 transition-colors"
+                      >{{ user.activityScore }}</span
+                    >
+                    <p class="text-[10px] font-black text-zinc-700 uppercase tracking-widest">
+                      活跃度
+                    </p>
+                  </div>
+                </div>
+                <div
+                  class="absolute bottom-0 left-0 h-1 bg-purple-500/20 group-hover:bg-purple-500/40 transition-all"
+                  :style="{
+                    width: `${(user.activityScore / Math.max(...activeUsers.map((u) => u.activityScore), 1)) * 100}%`
+                  }"
+                />
+              </div>
            </div>
+            <div class="absolute bottom-0 left-0 right-0 h-16 pointer-events-none bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent rounded-b-[2rem]" />
          </div>
          <div v-else class="flex-1 flex flex-col items-center justify-center text-zinc-700">
            <Users :size="32" class="opacity-20 mb-2" />
@@ -537,14 +547,14 @@
        @mouseleave="handleTooltipMouseLeave"
      >
        <div
-          class="bg-zinc-900 border border-zinc-800 rounded-3xl shadow-2xl overflow-hidden min-w-[320px] backdrop-blur-xl bg-opacity-90 animate-in fade-in zoom-in duration-200"
+          class="bg-zinc-900 border border-zinc-800 rounded-3xl shadow-2xl overflow-hidden min-w-[320px] max-w-[380px] backdrop-blur-xl bg-opacity-90 animate-in fade-in zoom-in duration-200"
        >
          <div
-            class="p-6 border-b border-zinc-800/50 bg-gradient-to-br from-blue-500/10 to-transparent"
+            class="p-6 border-b border-zinc-800/50 bg-gradient-to-br from-blue-500/10 to-transparent max-h-[500px] overflow-y-auto custom-scrollbar"
          >
            <div class="flex items-center justify-between mb-4">
-              <h4 class="text-sm font-black text-white uppercase tracking-widest">活跃用户详情</h4>
-              <div class="flex items-center gap-2 px-2 py-1 bg-blue-500/20 rounded-full">
+              <h4 class="text-sm font-black text-white uppercase tracking-widest truncate max-h-[20px] overflow-hidden">活跃用户详情</h4>
+              <div class="flex items-center gap-2 px-2 py-1 bg-blue-500/20 rounded-full shrink-0">
                <div class="w-1.5 h-1.5 bg-blue-500 rounded-full animate-pulse" />
                <span class="text-[10px] font-black text-blue-400"
                  >{{ realtimeStats.activeUsers }} 在线</span
@@ -554,44 +564,52 @@

            <div
              v-if="realtimeStats.activeUsersList && realtimeStats.activeUsersList.length > 0"
-              class="space-y-4"
+              class="space-y-3 max-h-[350px] overflow-y-auto custom-scrollbar pr-1"
            >
              <div
                v-for="user in realtimeStats.activeUsersList.slice(0, 5)"
                :key="user.id"
                class="flex items-center gap-3 p-3 bg-zinc-950/50 border border-zinc-800/50 rounded-2xl group hover:border-blue-500/30 transition-all"
              >
+                <img
+                  v-if="user.avatarUrl && !failedAvatars[user.id]"
+                  :src="user.avatarUrl"
+                  :alt="user.name"
+                  class="w-10 h-10 rounded-xl object-cover border border-zinc-700/50 shrink-0"
+                  @error="handleAvatarError($event, user)"
+                >
                <div
-                  class="w-10 h-10 rounded-xl bg-zinc-800 flex items-center justify-center font-black text-zinc-500 group-hover:text-blue-400 transition-colors"
+                  v-else
+                  class="w-10 h-10 rounded-xl bg-zinc-800 flex items-center justify-center font-black text-zinc-500 group-hover:text-blue-400 transition-colors shrink-0"
                >
                  {{ user.name.charAt(0) }}
                </div>
                <div class="flex-1 min-w-0">
-                  <div class="text-xs font-bold text-zinc-200 truncate">{{ user.name }}</div>
-                  <div class="text-[10px] text-zinc-500 font-medium truncate">
+                  <div class="text-xs font-bold text-zinc-200 truncate max-h-[16px] overflow-hidden">{{ user.name }}</div>
+                  <div class="text-[10px] text-zinc-500 font-medium truncate max-h-[14px] overflow-hidden">
                    @{{ user.username }}
                  </div>
                </div>
-                <div class="text-[10px] font-black text-zinc-600 bg-zinc-900 px-2 py-1 rounded-lg">
+                <div class="text-[10px] font-black text-zinc-600 bg-zinc-900 px-2 py-1 rounded-lg shrink-0">
                  {{ user.lastActive }}
                </div>
              </div>
              <div v-if="realtimeStats.activeUsersList.length > 5" class="text-center py-2">
-                <span class="text-[10px] font-black text-zinc-600 uppercase tracking-widest"
+                <span class="text-[10px] font-black text-zinc-600 uppercase tracking-widest max-h-[14px] overflow-hidden block"
                  >及其他 {{ realtimeStats.activeUsersList.length - 5 }} 位用户</span
                >
              </div>
            </div>
            <div v-else class="py-10 flex flex-col items-center justify-center text-zinc-600">
              <Users :size="32" class="opacity-20 mb-3" />
-              <p class="text-xs font-black uppercase tracking-widest">暂无在线用户</p>
+              <p class="text-xs font-black uppercase tracking-widest truncate max-h-[16px] overflow-hidden">暂无在线用户</p>
            </div>
          </div>
          <div class="px-6 py-4 bg-zinc-950/50 flex items-center justify-between">
-            <span class="text-[10px] font-black text-zinc-600 uppercase tracking-widest"
+            <span class="text-[10px] font-black text-zinc-600 uppercase tracking-widest truncate max-h-[14px] overflow-hidden"
              >实时数据同步中</span
            >
-            <Activity :size="12" class="text-blue-500 animate-pulse" />
+            <Activity :size="12" class="text-blue-500 animate-pulse shrink-0" />
          </div>
        </div>
      </div>
@@ -600,7 +618,7 @@
 </template>

 <script setup>
-import { onMounted, ref, computed } from 'vue'
+import { onMounted, ref, computed, reactive } from 'vue'
 import {
  TrendingUp,
  Users,
@@ -727,6 +745,17 @@ const tooltip = ref({
  }
 })

+// 头像加载失败状态管理
+const failedAvatars = reactive({})
+const handleAvatarError = (event, user) => {
+  if (user && user.id) {
+    failedAvatars[user.id] = true
+  }
+  if (event && event.target) {
+    event.target.style.display = 'none'
+  }
+}
+
 // 鼠标进入事件处理
 const handleMouseEnter = (event) => {
  const rect = event.target.getBoundingClientRect()
@@ -221,9 +221,9 @@
                    class="flex items-center justify-end gap-1.5 opacity-0 group-hover:opacity-100 transition-all action-buttons"
                  >
                    <button
-                      :disabled="isSelf(user)"
+                      :disabled="isSelf(user) || !canManageTargetUser(user)"
                      class="p-2 bg-zinc-950 border border-zinc-800 rounded-xl text-zinc-500 hover:text-blue-400 transition-colors disabled:opacity-20 disabled:cursor-not-allowed action-btn"
-                      title="编辑用户"
+                      :title="!canManageTargetUser(user) ? '权限不足：无法编辑该用户' : '编辑用户'"
                      @click="editUser(user)"
                    >
                      <Edit2 :size="13" />
@@ -236,17 +236,17 @@
                      <Music :size="13" />
                    </button>
                    <button
-                      :disabled="isSelf(user)"
+                      :disabled="isSelf(user) || !canResetPasswordFor(user)"
                      class="p-2 bg-zinc-950 border border-zinc-800 rounded-xl text-zinc-500 hover:text-amber-400 transition-colors disabled:opacity-20 disabled:cursor-not-allowed action-btn"
-                      title="重置密码"
+                      :title="!canResetPasswordFor(user) ? '权限不足：无法重置该用户的密码' : '重置密码'"
                      @click="resetPassword(user)"
                    >
                      <Lock :size="13" />
                    </button>
                    <button
-                      :disabled="isSelf(user)"
+                      :disabled="isSelf(user) || !canManageTargetUser(user)"
                      class="p-2 bg-zinc-950 border border-zinc-800 rounded-xl text-zinc-500 hover:text-red-400 transition-colors disabled:opacity-20 disabled:cursor-not-allowed action-btn"
-                      title="删除用户"
+                      :title="!canManageTargetUser(user) ? '权限不足：无法删除该用户' : '删除用户'"
                      @click="confirmDeleteUser(user)"
                    >
                      <Trash2 :size="13" />
@@ -363,8 +363,9 @@

            <div class="flex gap-2 action-buttons">
              <button
-                :disabled="isSelf(user)"
+                :disabled="isSelf(user) || !canManageTargetUser(user)"
                class="flex-1 py-2.5 bg-zinc-950 border border-zinc-800 rounded-lg text-zinc-400 flex items-center justify-center gap-2 text-[10px] font-black uppercase tracking-widest active:bg-blue-600 active:text-white transition-colors disabled:opacity-20 action-btn"
+                :title="!canManageTargetUser(user) ? '权限不足：无法编辑该用户' : '编辑用户'"
                @click="editUser(user)"
              >
                <Edit2 :size="12" /> 编辑
@@ -376,15 +377,17 @@
                <Music :size="12" /> 记录
              </button>
              <button
-                :disabled="isSelf(user)"
+                :disabled="isSelf(user) || !canResetPasswordFor(user)"
                class="flex-1 py-2.5 bg-zinc-950 border border-zinc-800 rounded-lg text-zinc-400 flex items-center justify-center gap-2 text-[10px] font-black uppercase tracking-widest active:bg-amber-600 active:text-white transition-colors disabled:opacity-20 action-btn"
+                :title="!canResetPasswordFor(user) ? '权限不足：无法重置该用户的密码' : '重置密码'"
                @click="resetPassword(user)"
              >
                <Lock :size="12" /> 重置
              </button>
              <button
-                :disabled="isSelf(user)"
+                :disabled="isSelf(user) || !canManageTargetUser(user)"
                class="px-3 py-2.5 bg-zinc-950 border border-zinc-800 rounded-lg text-zinc-400 active:bg-red-600 active:text-white transition-colors disabled:opacity-20 action-btn"
+                :title="!canManageTargetUser(user) ? '权限不足：无法删除该用户' : '删除用户'"
                @click="confirmDeleteUser(user)"
              >
                <Trash2 :size="14" />
@@ -1493,6 +1496,25 @@ const passwordForm = ref({
 const auth = useAuth()
 const permissions = usePermissions()

+// 前端侧角色级别映射（与 server/utils/permissions.js 的 ROLE_LEVELS 保持一致）
+const ROLE_LEVELS = {
+  SUPER_ADMIN: 100,
+  ADMIN: 80,
+  MINISTER: 80,
+  VICE_MINISTER: 70,
+  SONG_ADMIN: 60,
+  STAFF: 60,
+  RESIDENT: 50,
+  TEACHER: 40,
+  USER: 10
+}
+
+const getRoleLevel = (roleName) => {
+  if (!roleName) return 0
+  const name = String(roleName).toUpperCase()
+  return ROLE_LEVELS[name] ?? 0
+}
+
 // 判断是否为当前登录用户
 const isSelf = (user) => {
  return auth.user.value?.id === user?.id
@@ -1503,14 +1525,53 @@ const isSuperAdmin = computed(() => {
  return auth.user.value?.role === 'SUPER_ADMIN'
 })

+const currentUserRoleLevel = computed(() => getRoleLevel(auth.user.value?.role))
+
+// 是否为普通管理员（ADMIN/MINISTER 级别，非 SUPER）
+const isAdminOnly = computed(() => {
+  return !isSuperAdmin.value && currentUserRoleLevel.value >= 80
+})
+
+// 操作者能否对目标用户执行管理操作（目标级别必须严格低于操作者，且目标不是 ID=1）
+const canManageTargetUser = (targetUser) => {
+  if (!targetUser) return false
+  if (isSelf(targetUser)) return false
+  if (String(targetUser.id) === '1') return false
+  if (isSuperAdmin.value) return true
+  const targetLevel = getRoleLevel(targetUser.role)
+  return currentUserRoleLevel.value > targetLevel
+}
+
+// 操作者能否重置目标用户的密码（ADMIN 仅可重置 USER 及以下）
+const canResetPasswordFor = (targetUser) => {
+  if (!canManageTargetUser(targetUser)) return false
+  if (isSuperAdmin.value) return true
+  // 普通 ADMIN 只能重置级别 <= USER(10) 的用户
+  const targetLevel = getRoleLevel(targetUser.role)
+  return targetLevel <= ROLE_LEVELS.USER
+}
+
+// 操作者能否将角色改为指定 newRole
+const canAssignRole = (newRole) => {
+  if (!newRole) return false
+  if (isSuperAdmin.value) {
+    return String(newRole).toUpperCase() !== 'SUPER_ADMIN'
+  }
+  const targetLevel = getRoleLevel(newRole)
+  return currentUserRoleLevel.value > targetLevel
+}
+
 const availableRoles = computed(() => {
  if (isSuperAdmin.value) {
    // 超级管理员可以分配除自己以外的所有角色
    return allRoles.value.filter((role) => role.name !== 'SUPER_ADMIN')
-  } else {
-    // 其他角色不能分配角色，返回空数组
-    return []
  }
+  // 普通 ADMIN/MINISTER 等只能分配级别严格低于自己的角色（SUPER_ADMIN 已在上层排除）
+  return allRoles.value.filter(
+    (role) =>
+      role.name !== 'SUPER_ADMIN' &&
+      getRoleLevel(role.name) < currentUserRoleLevel.value
+  )
 })

 // 由于使用服务器端分页，这些计算属性简化了
@@ -1594,13 +1655,18 @@ const getStatusDisplayName = (status) => {
 }

 const editUser = (user) => {
-  // 禁止编辑自身
  if (isSelf(user)) {
    if (window.$showNotification) {
      window.$showNotification('禁止在用户管理中修改自己的账户', 'warning')
    }
    return
  }
+  if (!canManageTargetUser(user)) {
+    if (window.$showNotification) {
+      window.$showNotification('权限不足：无法编辑该用户', 'warning')
+    }
+    return
+  }
  editingUser.value = user
  userForm.value = {
    name: user.name,
@@ -1614,13 +1680,18 @@ const editUser = (user) => {
 }

 const resetPassword = (user) => {
-  // 禁止重置自身密码
  if (isSelf(user)) {
    if (window.$showNotification) {
      window.$showNotification('禁止在用户管理中重置自己的密码', 'warning')
    }
    return
  }
+  if (!canResetPasswordFor(user)) {
+    if (window.$showNotification) {
+      window.$showNotification('权限不足：无法重置该用户的密码', 'warning')
+    }
+    return
+  }
  resetPasswordUser.value = user
  passwordForm.value = {
    password: '',
@@ -1629,13 +1700,18 @@ const resetPassword = (user) => {
 }

 const confirmDeleteUser = (user) => {
-  // 禁止删除自身
  if (isSelf(user)) {
    if (window.$showNotification) {
      window.$showNotification('不能删除自己的账户', 'warning')
    }
    return
  }
+  if (!canManageTargetUser(user)) {
+    if (window.$showNotification) {
+      window.$showNotification('权限不足：无法删除该用户', 'warning')
+    }
+    return
+  }
  deletingUser.value = user
  showDeleteModal.value = true
 }
@@ -1687,6 +1763,20 @@ const closeDeleteModal = () => {

 const confirmDelete = async () => {
  if (!deletingUser.value) return
+  if (isSelf(deletingUser.value)) {
+    if (window.$showNotification) {
+      window.$showNotification('不能删除自己的账户', 'warning')
+    }
+    closeDeleteModal()
+    return
+  }
+  if (!canManageTargetUser(deletingUser.value)) {
+    if (window.$showNotification) {
+      window.$showNotification('权限不足：无法删除该用户', 'warning')
+    }
+    closeDeleteModal()
+    return
+  }

  deleting.value = true

@@ -1737,11 +1827,22 @@ const closeResetPassword = () => {
 }

 const saveUser = async () => {
-  // 保护：禁止保存针对自身的更改
  if (editingUser.value && isSelf(editingUser.value)) {
    formError.value = '禁止在用户管理中修改自己的账户'
    return
  }
+  if (editingUser.value && !canManageTargetUser(editingUser.value)) {
+    formError.value = '权限不足：无法编辑该用户'
+    return
+  }
+  if (userForm.value.role && !canAssignRole(userForm.value.role)) {
+    formError.value = `权限不足：无法分配角色 ${userForm.value.role}`
+    return
+  }
+  if (userForm.value.password && editingUser.value && !canResetPasswordFor(editingUser.value)) {
+    formError.value = '权限不足：无法重置该用户的密码'
+    return
+  }
  if (!userForm.value.name || !userForm.value.username) {
    formError.value = '请填写必要信息'
    return