fix:用户组列表成员弹窗限制高度

src/views/user/UserGroup.vue

@@ -124,7 +124,9 @@
       width="650px"
       destroy-on-close
       append-to-body
+      class="custom-dialog"
     >
+      <el-scrollbar max-height="60vh">
       <el-form
         ref="groupFormRef"
         :model="groupForm"
@@ -200,6 +202,7 @@
           </div>
         </el-form-item>
       </el-form>
+      </el-scrollbar>
       <template #footer>
         <div class="dialog-footer">
           <el-button @click="dialogVisible = false">取消</el-button>
@@ -214,7 +217,9 @@
       title="用户组成员"
       width="800px"
       append-to-body
+      class="custom-dialog"
     >
+      <el-scrollbar max-height="60vh">
       <el-table
         v-loading="memberLoading"
         :data="memberList"
@@ -256,6 +261,7 @@
         background
         class="pagination"
       />
+      </el-scrollbar>
     </el-dialog>
 
     <!-- 添加成员对话框 -->
@@ -771,4 +777,29 @@ onMounted(() => {
 .clear-icon:hover {
   color: #f56c6c;
 }
+
+/* 弹窗样式 */
+:deep(.custom-dialog) {
+  max-height: 80vh;
+  display: flex;
+  flex-direction: column;
+}
+
+:deep(.custom-dialog .el-dialog__body) {
+  flex: 1;
+  overflow: hidden;
+  padding: 20px;
+}
+
+:deep(.custom-dialog .el-scrollbar__view) {
+  padding-right: 10px;
+}
+
+/* 成员弹窗内的分页样式 */
+:deep(.custom-dialog .pagination) {
+  margin-top: 16px;
+  padding: 0;
+  border-top: none;
+  background: transparent;
+}
 </style>

src/views/user/UserList.vue

@@ -56,153 +56,71 @@
 
       <!-- 用户列表 -->
       <div class="table-section">
-      <!-- 骨架屏 -->
+        <!-- 骨架屏 -->
-      <div v-if="loading" class="skeleton-container">
+        <div v-if="loading" class="skeleton-container">
-        <div v-for="i in 5" :key="i" class="skeleton-row">
+          <div v-for="i in 5" :key="i" class="skeleton-row">
-          <div class="skeleton-cell skeleton-checkbox"></div>
+            <div class="skeleton-cell skeleton-checkbox"></div>
-          <div class="skeleton-cell skeleton-id"></div>
+            <div class="skeleton-cell skeleton-id"></div>
-          <div class="skeleton-cell skeleton-user">
+            <div class="skeleton-cell skeleton-user">
-            <div class="skeleton-avatar"></div>
+              <div class="skeleton-avatar"></div>
-            <div class="skeleton-text-group">
+              <div class="skeleton-text-group">
+                <div class="skeleton-text skeleton-text-primary"></div>
+                <div class="skeleton-text skeleton-text-secondary"></div>
+              </div>
+            </div>
+            <div class="skeleton-cell skeleton-avatar"></div>
+            <div class="skeleton-cell skeleton-phone"></div>
+            <div class="skeleton-cell skeleton-realname">
               <div class="skeleton-text skeleton-text-primary"></div>
               <div class="skeleton-text skeleton-text-secondary"></div>
             </div>
-          </div>
+            <div class="skeleton-cell skeleton-group"></div>
-          <div class="skeleton-cell skeleton-avatar"></div>
+            <div class="skeleton-cell skeleton-status"></div>
-          <div class="skeleton-cell skeleton-phone"></div>
+            <div class="skeleton-cell skeleton-time"></div>
-          <div class="skeleton-cell skeleton-realname">
+            <div class="skeleton-cell skeleton-action"></div>
-            <div class="skeleton-text skeleton-text-primary"></div>
-            <div class="skeleton-text skeleton-text-secondary"></div>
-          </div>
-          <div class="skeleton-cell skeleton-group"></div>
-          <div class="skeleton-cell skeleton-status"></div>
-          <div class="skeleton-cell skeleton-time"></div>
-          <div class="skeleton-cell skeleton-action"></div>
-        </div>
-      </div>
-      
-      <!-- 移动端卡片列表 -->
-      <div v-else class="mobile-card-list">
-        <div v-for="row in userList" :key="row.UserId" class="user-card">
-          <div class="card-header">
-            <el-checkbox v-model="row.selected" @change="handleCardSelect(row)" />
-            <el-avatar :size="48" :src="row.avatarUrl || ''" class="card-avatar" />
-            <div class="card-user-info">
-              <div class="card-username">{{ row.UserName }}</div>
-              <div class="card-email">{{ row.Email || '未设置邮箱' }}</div>
-            </div>
-            <el-tag :type="row.IsDeleted ? 'danger' : 'success'" size="small">
-              {{ row.IsDeleted ? '已删除' : '正常' }}
-            </el-tag>
-          </div>
-          <div class="card-body">
-            <div class="card-info-row">
-              <span class="card-label">用户ID:</span>
-              <span class="card-value">{{ row.UserId }}</span>
-            </div>
-            <div class="card-info-row">
-              <span class="card-label">手机号:</span>
-              <span class="card-value">{{ row.Phone || '未设置' }}</span>
-            </div>
-            <div class="card-info-row">
-              <span class="card-label">用户组:</span>
-              <span class="card-value">{{ row.UserGroup?.Name || '默认用户组' }}</span>
-            </div>
-            <div class="card-info-row">
-              <span class="card-label">实名:</span>
-              <span class="card-value">{{ row.RealName?.Name || '未实名' }}</span>
-            </div>
-            <div class="card-info-row">
-              <span class="card-label">注册时间:</span>
-              <span class="card-value">{{ formatDate(row.CreatedAt) }}</span>
-            </div>
-          </div>
-          <div class="card-footer">
-            <el-button type="primary" size="small" @click="handleUserDetail(row)">详情</el-button>
-            <el-dropdown trigger="click" @command="(command) => handleCommand(command, row)">
-              <el-button size="small">更多<el-icon><ArrowDown /></el-icon></el-button>
-              <template #dropdown>
-                <el-dropdown-menu>
-                  <el-dropdown-item command="edit">编辑用户</el-dropdown-item>
-                  <el-dropdown-item command="avatar">修改头像</el-dropdown-item>
-                  <el-dropdown-item command="password">修改密码</el-dropdown-item>
-                  <el-dropdown-item command="group">修改用户组</el-dropdown-item>
-                  <el-dropdown-item command="realname">实名信息</el-dropdown-item>
-                  <el-dropdown-item command="balance">余额管理</el-dropdown-item>
-                  <el-dropdown-item command="delete" divided>删除用户</el-dropdown-item>
-                </el-dropdown-menu>
-              </template>
-            </el-dropdown>
           </div>
         </div>
-      </div>
+        
-      
+        <!-- 移动端卡片列表 -->
-      <!-- 数据表格（PC端） -->
+        <div v-else class="mobile-card-list">
-      <el-table
+          <div v-for="row in userList" :key="row.UserId" class="user-card">
-        v-if="!loading"
+            <div class="card-header">
-        :data="userList"
+              <el-checkbox v-model="row.selected" @change="handleCardSelect(row)" />
-        @selection-change="handleSelectionChange"
+              <el-avatar :size="48" :src="row.avatarUrl || ''" class="card-avatar" />
-        class="desktop-table"
+              <div class="card-user-info">
-        :header-cell-style="{ background: '#fafafa', color: '#333', fontWeight: 600 }"
+                <div class="card-username">{{ row.UserName }}</div>
-      >
+                <div class="card-email">{{ row.Email || '未设置邮箱' }}</div>
-        <el-table-column type="selection" width="55" />
+              </div>
-        <el-table-column prop="UserId" label="用户ID" width="100" />
+              <el-tag :type="row.IsDeleted ? 'danger' : 'success'" size="small">
-        <el-table-column label="用户信息" min-width="100">
+                {{ row.IsDeleted ? '已删除' : '正常' }}
-          <template #default="{ row }">
+              </el-tag>
-            <div class="user-info">
+            </div>
-              <div class="user-detail">
+            <div class="card-body">
-                <div class="username">{{ row.UserName }}</div>
+              <div class="card-info-row">
-                <div class="email">{{ row.Email || '未设置' }}</div>
+                <span class="card-label">用户ID:</span>
+                <span class="card-value">{{ row.UserId }}</span>
+              </div>
+              <div class="card-info-row">
+                <span class="card-label">手机号:</span>
+                <span class="card-value">{{ row.Phone || '未设置' }}</span>
+              </div>
+              <div class="card-info-row">
+                <span class="card-label">用户组:</span>
+                <span class="card-value">{{ row.UserGroup?.Name || '默认用户组' }}</span>
+              </div>
+              <div class="card-info-row">
+                <span class="card-label">实名:</span>
+                <span class="card-value">{{ row.RealName?.Name || '未实名' }}</span>
+              </div>
+              <div class="card-info-row">
+                <span class="card-label">注册时间:</span>
+                <span class="card-value">{{ formatDate(row.CreatedAt) }}</span>
               </div>
             </div>
-          </template>
+            <div class="card-footer">
-        </el-table-column>
+              <el-button type="primary" size="small" @click="handleUserDetail(row)">详情</el-button>
-        <el-table-column prop="CoverID" label="头像" width="100">
-          <template #default="{ row }">
-            <el-avatar :size="40" :src="row.avatarUrl || ''" />
-          </template>
-        </el-table-column>
-        <el-table-column prop="Phone" label="手机号码" width="130">
-          <template #default="{ row }">
-            {{ row.Phone || '未设置' }}
-          </template>
-        </el-table-column>
-        <el-table-column label="实名信息" width="150">
-          <template #default="{ row }">
-            <div v-if="row.RealName && row.RealName.Name">
-              <div class="real-name">{{ row.RealName.Name }}</div>
-              <div class="id-card">{{ row.RealName.IdCard || '未设置' }}</div>
-            </div>
-            <span v-else class="text-gray">未实名</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="用户组" width="120">
-          <template #default="{ row }">
-            <div class="group_name">{{ row.UserGroup?.Name || '默认用户组' }}</div>
-          </template>
-        </el-table-column>
-        <el-table-column label="状态" width="100">
-          <template #default="{ row }">
-            <el-tag :type="row.IsDeleted ? 'danger' : 'success'">
-              {{ row.IsDeleted ? '已删除' : '正常' }}
-            </el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column prop="CreatedAt" label="注册时间" width="180">
-          <template #default="{ row }">
-            {{ formatDate(row.CreatedAt) }}
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" width="200" fixed="right">
-          <template #default="{ row }">
-            <div class="action-buttons">
-              <el-button type="primary" link @click="handleUserDetail(row)">
-                <el-icon><View /></el-icon>详情
-              </el-button>
               <el-dropdown trigger="click" @command="(command) => handleCommand(command, row)">
-                <el-button type="primary" link>
+                <el-button size="small">更多<el-icon><ArrowDown /></el-icon></el-button>
-                  更多<el-icon><ArrowDown /></el-icon>
-                </el-button>
                 <template #dropdown>
                   <el-dropdown-menu>
                     <el-dropdown-item command="edit">编辑用户</el-dropdown-item>
@@ -211,17 +129,100 @@
                     <el-dropdown-item command="group">修改用户组</el-dropdown-item>
                     <el-dropdown-item command="realname">实名信息</el-dropdown-item>
                     <el-dropdown-item command="balance">余额管理</el-dropdown-item>
-                    <el-dropdown-item command="loginHistory">登录记录</el-dropdown-item>
-                    <el-dropdown-item command="operationHistory">操作记录</el-dropdown-item>
-                    <el-dropdown-item command="simulateLogin">模拟登录</el-dropdown-item>
                     <el-dropdown-item command="delete" divided>删除用户</el-dropdown-item>
                   </el-dropdown-menu>
                 </template>
               </el-dropdown>
             </div>
-          </template>
+          </div>
-        </el-table-column>
+        </div>
-      </el-table>
+        
+        <!-- 数据表格（PC端） -->
+        <el-table
+          v-if="!loading"
+          :data="userList"
+          @selection-change="handleSelectionChange"
+          class="desktop-table"
+          :header-cell-style="{ background: '#fafafa', color: '#333', fontWeight: 600 }"
+        >
+          <el-table-column type="selection" width="55" fixed="left" />
+          <el-table-column prop="UserId" label="用户ID" width="100" fixed="left" />
+            <el-table-column label="用户信息" min-width="100">
+              <template #default="{ row }">
+                <div class="user-info">
+                  <div class="user-detail">
+                    <div class="username">{{ row.UserName }}</div>
+                    <div class="email">{{ row.Email || '未设置' }}</div>
+                  </div>
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column prop="CoverID" label="头像" width="100">
+              <template #default="{ row }">
+                <el-avatar :size="40" :src="row.avatarUrl || ''" />
+              </template>
+            </el-table-column>
+            <el-table-column prop="Phone" label="手机号码" width="130">
+              <template #default="{ row }">
+                {{ row.Phone || '未设置' }}
+              </template>
+            </el-table-column>
+            <el-table-column label="实名信息" width="150">
+              <template #default="{ row }">
+                <div v-if="row.RealName && row.RealName.Name">
+                  <div class="real-name">{{ row.RealName.Name }}</div>
+                  <div class="id-card">{{ row.RealName.IdCard || '未设置' }}</div>
+                </div>
+                <span v-else class="text-gray">未实名</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="用户组" width="120">
+              <template #default="{ row }">
+                <div class="group_name">{{ row.UserGroup?.Name || '默认用户组' }}</div>
+              </template>
+            </el-table-column>
+            <el-table-column label="状态" width="100">
+              <template #default="{ row }">
+                <el-tag :type="row.IsDeleted ? 'danger' : 'success'">
+                  {{ row.IsDeleted ? '已删除' : '正常' }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column prop="CreatedAt" label="注册时间" width="180">
+              <template #default="{ row }">
+                {{ formatDate(row.CreatedAt) }}
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" width="200" fixed="right">
+              <template #default="{ row }">
+                <div class="action-buttons">
+                  <el-button type="primary" link @click="handleUserDetail(row)">
+                    <el-icon><View /></el-icon>详情
+                  </el-button>
+                  <el-dropdown trigger="click" @command="(command) => handleCommand(command, row)">
+                    <el-button type="primary" link>
+                      更多<el-icon><ArrowDown /></el-icon>
+                    </el-button>
+                    <template #dropdown>
+                      <el-dropdown-menu>
+                        <el-dropdown-item command="edit">编辑用户</el-dropdown-item>
+                        <el-dropdown-item command="avatar">修改头像</el-dropdown-item>
+                        <el-dropdown-item command="password">修改密码</el-dropdown-item>
+                        <el-dropdown-item command="group">修改用户组</el-dropdown-item>
+                        <el-dropdown-item command="realname">实名信息</el-dropdown-item>
+                        <el-dropdown-item command="balance">余额管理</el-dropdown-item>
+                        <el-dropdown-item command="loginHistory">登录记录</el-dropdown-item>
+                        <el-dropdown-item command="operationHistory">操作记录</el-dropdown-item>
+                        <el-dropdown-item command="simulateLogin">模拟登录</el-dropdown-item>
+                        <el-dropdown-item command="delete" divided>删除用户</el-dropdown-item>
+                      </el-dropdown-menu>
+                    </template>
+                  </el-dropdown>
+                </div>
+              </template>
+            </el-table-column>
+        </el-table>
+      </div>
       
       <!-- 分页 -->
       <el-pagination
@@ -235,7 +236,6 @@
         background
         class="pagination"
       />
-      </div>
     </el-card>
 
     <!-- 用户编辑对话框 -->
@@ -1175,7 +1175,6 @@ onMounted(() => {
 
 /* PC端表格显示 */
 .desktop-table {
-  display: table;
   width: 100%;
 }
 
@@ -1313,6 +1312,7 @@ onMounted(() => {
 
 .table-section {
   padding: 0;
+  overflow: hidden;
 }
 
 /* 骨架屏样式 */
@@ -1563,7 +1563,6 @@ onMounted(() => {
 
 /* 表格样式优化 */
 :deep(.el-table) {
-  border: none;
   color: #2c3e50;
 }
 
@@ -1588,6 +1587,29 @@ onMounted(() => {
   background-color: #f8f9fa !important;
 }
 
+/* 固定列阴影效果 */
+:deep(.el-table__fixed) {
+  box-shadow: 4px 0 8px -4px rgba(0, 0, 0, 0.12);
+}
+
+:deep(.el-table__fixed-right) {
+  box-shadow: -4px 0 8px -4px rgba(0, 0, 0, 0.12);
+}
+
+/* 表格滚动条样式 */
+:deep(.el-scrollbar__bar.is-horizontal) {
+  height: 8px;
+}
+
+:deep(.el-scrollbar__thumb) {
+  background-color: #c0c4cc;
+  border-radius: 4px;
+}
+
+:deep(.el-scrollbar__thumb:hover) {
+  background-color: #909399;
+}
+
 :deep(.el-card__body) {
   padding: 0;
 }

问题.MD

@@ -1,13 +1,13 @@
 ✅已完成、⚠️部分完成、❌未完成这样显示
 -----------------------------------------------------------------------------------------------需要解决
 
+1.http://localhost:5173/user/group将当前页面弹窗的高度进行限制为屏幕大小的80%并且进行分页数为很大的时候进行内部的滚动条进行查看
 
-1.http://localhost:5173/user/list对于用户列表的样式在窗口拖动宽度变小的时候会造成样式错位，需要将其兼容移动端样式
+### TODO List
-
+- [x] ✅ 用户组页面弹窗高度限制
-2.侧边栏添加推出和收回样式，需要兼容移动端展示，AdminLayout 组件需要进行兼容修改
+  - 弹窗最大高度限制为屏幕的80%
-
+  - 内容区域使用 el-scrollbar 实现内部滚动
-
+  - 用户组表单弹窗、成员列表弹窗均已添加滚动支持
-
 
 -----------------------------------------------------------------------------------------------需要解决