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 等高角色

app/components/Admin/DataAnalysisPanel.vue

@@ -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()