Merge pull request 'feat(system): 管理员权限页重构与用户选择器升级' (#20) from master into deploy

Reviewed-on: #20

src/api/admin/user.js

@@ -34,8 +34,8 @@ export const getUserInfo = (data) => {
 }
 
 /**获取用户列表 */
-export const getUserList = (data) => {
+export const getUserList = (params) => {
-  return http2.get('/api/v1/admin/user/user/list?page=' + data.page + '&count=' + data.count + '&key=' + data.key)
+  return http2.get('/api/v1/admin/user/user/list', { params })
 }
 
 /**更新用户信息 */

src/components/UserSelector/index.vue

@@ -26,6 +26,10 @@
             </el-button>
           </template>
         </el-input>
+        <el-select v-model="searchParams.is_admin" placeholder="全部身份" clearable style="width: 120px" @change="handleSearch">
+          <el-option label="管理员" :value="true" />
+          <el-option label="普通用户" :value="false" />
+        </el-select>
         <el-button @click="handleReset" class="reset-btn">
           <el-icon><Refresh /></el-icon>
           重置
@@ -118,6 +122,7 @@ const selectedUser = ref(null)
 
 const searchParams = reactive({
   key: '',
+  is_admin: undefined,
   page: 1,
   count: 10
 })
@@ -161,6 +166,7 @@ const handleSearch = () => {
 
 const handleReset = () => {
   searchParams.key = ''
+  searchParams.is_admin = undefined
   searchParams.page = 1
   fetchUserList()
 }
@@ -191,22 +197,25 @@ const confirmSelection = () => {
 
 <style scoped>
 .user-selector-content {
-  max-height: 500px;
+  max-height: 520px;
   overflow: hidden;
+  padding: 4px 0;
 }
 
 .selector-search {
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: 10px;
-  padding-bottom: 16px;
+  padding: 14px 16px;
-  border-bottom: 1px solid #ebeef5;
+  background: linear-gradient(135deg, #f7f8fa 0%, #f0f2f5 100%);
+  border-radius: 10px;
+  border: 1px solid #ebeef5;
   margin-bottom: 16px;
 }
 
 .search-input {
   flex: 1;
-  max-width: 350px;
+  min-width: 0;
 }
 
 .reset-btn {
@@ -231,7 +240,7 @@ const confirmSelection = () => {
 }
 
 .selector-pagination {
-  margin-top: 16px;
+  margin-top: 14px;
   justify-content: flex-end;
 }
 
@@ -244,19 +253,26 @@ const confirmSelection = () => {
 
 .selected-info {
   margin-right: auto;
-  color: #606266;
+  color: #409eff;
   font-size: 13px;
+  font-weight: 500;
+}
+
+:deep(.el-table) {
+  border-radius: 8px;
+  overflow: hidden;
 }
 
 :deep(.el-table__row) {
   cursor: pointer;
+  transition: background-color .15s;
 }
 
-:deep(.el-table__row):hover {
+:deep(.el-table__row:hover > td) {
-  background-color: #f5f7fa;
+  background-color: #f0f7ff !important;
 }
 
-:deep(.current-row) {
+:deep(.current-row > td) {
   background-color: var(--el-color-primary-light-9) !important;
 }
 
@@ -265,8 +281,9 @@ const confirmSelection = () => {
 }
 
 :deep(.el-avatar) {
-  background-color: var(--el-color-primary-light-5);
+  background: linear-gradient(135deg, var(--el-color-primary-light-3), var(--el-color-primary));
   color: #fff;
   font-size: 12px;
+  font-weight: 600;
 }
 </style>

src/components/admin/UserListSelector.vue

@@ -1,166 +1,111 @@
 <template>
-  <el-dialog
+  <el-dialog v-model="visible" title="选择用户" width="860px" append-to-body @close="handleClose" class="user-selector-dialog">
-    v-model="visible"
+    <div class="uls-root">
-    title="选择用户"
+      <el-tabs v-model="activeTab" @tab-click="handleTabClick" class="uls-tabs">
-    width="900px"
+        <!-- ====== 选择用户 ====== -->
-    append-to-body
+        <el-tab-pane name="selectUser">
-    @close="handleClose"
+          <template #label>
-  >
+            <span class="tab-lbl">
-    <div class="user-selector">
+              <svg viewBox="0 0 24 24" width="16" height="16"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" fill="currentColor"/></svg>
-      <el-tabs v-model="activeTab" @tab-click="handleTabClick">
+              选择用户
-        <!-- 选择用户 -->
+            </span>
-        <el-tab-pane label="选择用户" name="selectUser">
+          </template>
-          <div class="user-list-container">
-            <!-- 搜索筛选区域 -->
-            <div class="filter-section">
-              <el-form :inline="true" :model="searchParams" class="search-form">
-                <el-form-item label="关键词">
-                  <el-input
-                    v-model="searchParams.key"
-                    placeholder="搜索用户名或ID"
-                    clearable
-                    @keyup.enter="handleSearch"
-                    style="width: 200px"
-                  >
-                    <template #prefix>
-                      <el-icon><Search /></el-icon>
-                    </template>
-                  </el-input>
-                </el-form-item>
-                <el-form-item label="用户状态">
-                  <el-select
-                    v-model="searchParams.status"
-                    placeholder="全部状态"
-                    clearable
-                    style="width: 120px"
-                  >
-                    <el-option label="正常" value="1" />
-                    <el-option label="禁用" value="0" />
-                  </el-select>
-                </el-form-item>
-                <el-form-item>
-                  <el-button type="primary" @click="handleSearch" :icon="Search">
-                    搜索
-                  </el-button>
-                  <el-button @click="handleReset" :icon="Refresh">
-                    重置
-                  </el-button>
-                  <el-button type="success" @click="switchToAdd" :icon="Plus">
-                    添加新用户
-                  </el-button>
-                </el-form-item>
-              </el-form>
-            </div>
 
-            <!-- 用户列表表格 -->
+          <!-- 搜索栏 -->
-            <el-table
+          <div class="uls-search">
-              v-loading="loading"
+            <el-input v-model="searchParams.key" placeholder="搜索用户名 / 邮箱 / ID" clearable @keyup.enter="handleSearch" class="uls-search-input" :prefix-icon="Search" />
-              :data="userList"
+            <el-select v-model="searchParams.is_admin" placeholder="全部身份" clearable style="width: 120px" @change="handleSearch">
-              highlight-current-row
+              <el-option label="管理员" :value="true" />
-              @current-change="handleCurrentChange"
+              <el-option label="普通用户" :value="false" />
-              style="width: 100%"
+            </el-select>
-              :height="350"
+            <el-button type="primary" @click="handleSearch" :icon="Search" circle />
-              :row-class-name="tableRowClassName"
+            <el-button @click="handleReset" :icon="Refresh" circle />
+          </div>
+
+          <!-- 已选提示 -->
+          <transition name="fade">
+            <div class="uls-selected-bar" v-if="selectedUser">
+              <div class="uls-sel-left">
+                <svg viewBox="0 0 24 24" width="16" height="16"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" fill="#67c23a"/></svg>
+                <span>已选择：</span>
+                <el-avatar :size="24" :src="selectedUser.cover" class="sel-avatar">{{ selectedUser.user_name?.charAt(0)?.toUpperCase() || 'U' }}</el-avatar>
+                <b>{{ selectedUser.user_name }}</b>
+                <span class="sel-id">#{{ selectedUser.user_id }}</span>
+              </div>
+              <el-button size="small" link type="danger" @click="selectedUser = null">取消选择</el-button>
+            </div>
+          </transition>
+
+          <!-- 用户卡片列表 -->
+          <div class="uls-grid" v-loading="loading">
+            <div
+              v-for="user in userList" :key="user.user_id"
+              class="uls-card" :class="{ active: selectedUser?.user_id === user.user_id }"
+              @click="handleCurrentChange(user)"
             >
-              <el-table-column type="index" label="序号" width="60" align="center" />
+              <div class="uls-card-check" v-if="selectedUser?.user_id === user.user_id">
-              <el-table-column prop="user_id" label="用户ID" width="100" align="center" />
+                <svg viewBox="0 0 24 24" width="16" height="16"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" fill="#fff"/></svg>
-              <el-table-column prop="user_name" label="用户名" min-width="120">
+              </div>
-                <template #default="{ row }">
+              <el-avatar :size="42" :src="user.cover" class="uls-avatar">{{ user.user_name?.charAt(0)?.toUpperCase() || 'U' }}</el-avatar>
-                  <div class="user-info-cell">
+              <div class="uls-card-body">
-                    <el-avatar :size="32" :src="row.cover">
+                <div class="uls-card-name">
-                      <el-icon><User /></el-icon>
+                  {{ user.user_name }}
-                    </el-avatar>
+                  <el-tag v-if="user.is_admin" type="warning" size="small" effect="dark" round class="admin-tag">管理员</el-tag>
-                    <span class="user-name">{{ row.user_name }}</span>
+                </div>
-                  </div>
+                <div class="uls-card-meta">
-                </template>
+                  <span class="meta-id">#{{ user.user_id }}</span>
-              </el-table-column>
+                  <span v-if="user.email" class="meta-email">{{ user.email }}</span>
-              <el-table-column prop="email" label="邮箱" min-width="180" show-overflow-tooltip />
+                  <span v-if="user.phone" class="meta-phone">{{ user.phone }}</span>
-              <el-table-column prop="phone" label="手机号" width="130" show-overflow-tooltip />
+                </div>
-              <!-- <el-table-column prop="status" label="状态" width="80" align="center">
+              </div>
-                <template #default="{ row }">
-                  <el-tag :type="row.status === 1 ? 'success' : 'danger'" size="small">
-                    {{ row.status === 1 ? '正常' : '禁用' }}
-                  </el-tag>
-                </template>
-              </el-table-column> -->
-              <el-table-column prop="created_at" label="注册时间" width="160" show-overflow-tooltip />
-            </el-table>
-
-            <!-- 分页 -->
-            <div class="pagination-container" v-if="total > 0">
-              <el-pagination
-                v-model:current-page="searchParams.page"
-                v-model:page-size="searchParams.count"
-                :page-sizes="[10, 20, 50, 100]"
-                :total="total"
-                layout="total, sizes, prev, pager, next, jumper"
-                background
-                @size-change="handleSizeChange"
-                @current-change="handlePageChange"
-              />
             </div>
-            
+          </div>
-            <el-empty v-if="userList.length === 0 && !loading" description="暂无用户数据" />
+
+          <el-empty v-if="userList.length === 0 && !loading" description="暂无用户数据" :image-size="80" />
+
+          <!-- 分页 -->
+          <div class="uls-pagination" v-if="total > 0">
+            <el-pagination
+              v-model:current-page="searchParams.page"
+              v-model:page-size="searchParams.count"
+              :page-sizes="[12, 24, 48]"
+              :total="total"
+              layout="total, sizes, prev, pager, next"
+              background small
+              @size-change="s => { searchParams.count = s; searchParams.page = 1; fetchUserList() }"
+              @current-change="p => { searchParams.page = p; fetchUserList() }"
+            />
           </div>
         </el-tab-pane>
 
-        <!-- 添加用户 -->
+        <!-- ====== 添加用户 ====== -->
-        <el-tab-pane label="添加用户" name="addUser">
+        <el-tab-pane name="addUser">
-          <div class="add-user-section">
+          <template #label>
-            <el-form
+            <span class="tab-lbl">
-              ref="addFormRef"
+              <svg viewBox="0 0 24 24" width="16" height="16"><path d="M15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm-9-2V7H4v3H1v2h3v3h2v-3h3v-2H6zm9 4c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" fill="currentColor"/></svg>
-              :model="addForm"
+              添加用户
-              :rules="addFormRules"
+            </span>
-              label-width="100px"
+          </template>
-              class="add-user-form"
+          <div class="uls-add-section">
-            >
+            <el-form ref="addFormRef" :model="addForm" :rules="addFormRules" label-width="90px" class="uls-add-form">
               <el-form-item label="用户名" prop="user_name">
-                <el-input
+                <el-input v-model="addForm.user_name" placeholder="请输入用户名" maxlength="50" show-word-limit />
-                  v-model="addForm.user_name"
-                  placeholder="请输入用户名"
-                  maxlength="50"
-                  show-word-limit
-                />
               </el-form-item>
               <el-form-item label="邮箱" prop="email">
-                <el-input
+                <el-input v-model="addForm.email" placeholder="请输入邮箱地址" type="email" />
-                  v-model="addForm.email"
-                  placeholder="请输入邮箱地址"
-                  type="email"
-                />
               </el-form-item>
               <el-form-item label="手机号" prop="phone">
-                <el-input
+                <el-input v-model="addForm.phone" placeholder="请输入手机号（选填）" maxlength="11" />
-                  v-model="addForm.phone"
-                  placeholder="请输入手机号"
-                  maxlength="11"
-                />
               </el-form-item>
               <el-form-item label="密码" prop="password">
-                <el-input
+                <el-input v-model="addForm.password" placeholder="请输入密码" type="password" show-password />
-                  v-model="addForm.password"
-                  placeholder="请输入密码"
-                  type="password"
-                  show-password
-                />
               </el-form-item>
               <el-form-item label="确认密码" prop="confirmPassword">
-                <el-input
+                <el-input v-model="addForm.confirmPassword" placeholder="请再次输入密码" type="password" show-password />
-                  v-model="addForm.confirmPassword"
-                  placeholder="请再次输入密码"
-                  type="password"
-                  show-password
-                />
               </el-form-item>
               <el-form-item>
-                <el-button type="primary" @click="handleAddUser" :loading="addLoading">
+                <el-button type="primary" @click="handleAddUser" :loading="addLoading" :icon="Plus">立即创建</el-button>
-                  <el-icon><Plus /></el-icon>
+                <el-button @click="resetAddForm" :icon="Refresh">重置</el-button>
-                  立即创建
-                </el-button>
-                <el-button @click="resetAddForm">
-                  <el-icon><Refresh /></el-icon>
-                  重置表单
-                </el-button>
               </el-form-item>
             </el-form>
           </div>
@@ -169,16 +114,9 @@
     </div>
 
     <template #footer>
-      <div class="dialog-footer">
+      <div class="uls-footer">
         <el-button @click="handleClose">取消</el-button>
-        <el-button
+        <el-button type="primary" @click="handleConfirm" :disabled="!selectedUser" v-if="activeTab === 'selectUser'">确定选择</el-button>
-          type="primary"
-          @click="handleConfirm"
-          :disabled="!selectedUser"
-          v-if="activeTab === 'selectUser'"
-        >
-          确定选择
-        </el-button>
       </div>
     </template>
   </el-dialog>
@@ -190,23 +128,12 @@ import { ElMessage } from 'element-plus'
 import { Search, Refresh, Plus, User } from '@element-plus/icons-vue'
 import { getUserList, createTask } from '@/api/admin/user'
 
-// Props
 const props = defineProps({
-  modelValue: {
+  modelValue: { type: Boolean, default: false },
-    type: Boolean,
+  currentUserId: { type: [String, Number], default: '' }
-    default: false
-  },
-  // 当前已选中的用户ID（用于回显）
-  currentUserId: {
-    type: [String, Number],
-    default: ''
-  }
 })
-
-// Emits
 const emit = defineEmits(['update:modelValue', 'confirm'])
 
-// 响应式数据
 const visible = ref(false)
 const activeTab = ref('selectUser')
 const loading = ref(false)
@@ -216,352 +143,131 @@ const total = ref(0)
 const selectedUser = ref(null)
 const addFormRef = ref(null)
 
-// 搜索参数
+const searchParams = reactive({ key: '', is_admin: undefined, page: 1, count: 12 })
-const searchParams = reactive({
-  key: '',
-  status: '',
-  page: 1,
-  count: 10
-})
 
-// 添加用户表单
+const addForm = reactive({ user_name: '', email: '', phone: '', password: '', confirmPassword: '' })
-const addForm = reactive({
-  user_name: '',
-  email: '',
-  phone: '',
-  password: '',
-  confirmPassword: ''
-})
-
-// 密码确认验证
 const validateConfirmPassword = (rule, value, callback) => {
-  if (value === '') {
+  if (!value) callback(new Error('请再次输入密码'))
-    callback(new Error('请再次输入密码'))
+  else if (value !== addForm.password) callback(new Error('两次输入密码不一致'))
-  } else if (value !== addForm.password) {
+  else callback()
-    callback(new Error('两次输入密码不一致'))
-  } else {
-    callback()
-  }
 }
-
-// 添加用户表单验证规则
 const addFormRules = {
-  user_name: [
+  user_name: [{ required: true, message: '请输入用户名', trigger: 'blur' }, { min: 2, max: 50, message: '2-50 个字符', trigger: 'blur' }],
-    { required: true, message: '请输入用户名', trigger: 'blur' },
+  email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }, { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }],
-    { min: 2, max: 50, message: '用户名长度在 2 到 50 个字符', trigger: 'blur' }
+  phone: [{ pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }],
-  ],
+  password: [{ required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, max: 20, message: '6-20 个字符', trigger: 'blur' }],
-  email: [
+  confirmPassword: [{ required: true, message: '请确认密码', trigger: 'blur' }, { validator: validateConfirmPassword, trigger: 'blur' }]
-    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
-    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
-  ],
-  phone: [
-    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
-  ],
-  password: [
-    { required: true, message: '请输入密码', trigger: 'blur' },
-    { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' }
-  ],
-  confirmPassword: [
-    { required: true, message: '请再次输入密码', trigger: 'blur' },
-    { validator: validateConfirmPassword, trigger: 'blur' }
-  ]
 }
 
-// 监听 modelValue 变化
+watch(() => props.modelValue, (v) => {
-watch(() => props.modelValue, (newVal) => {
+  visible.value = v
-  visible.value = newVal
+  if (v) { activeTab.value = 'selectUser'; selectedUser.value = null; searchParams.page = 1; fetchUserList() }
-  if (newVal) {
-    // 重置状态
-    activeTab.value = 'selectUser'
-    selectedUser.value = null
-    searchParams.page = 1
-    fetchUserList()
-  }
 })
+watch(visible, (v) => emit('update:modelValue', v))
 
-// 监听 visible 变化
-watch(visible, (newVal) => {
-  emit('update:modelValue', newVal)
-})
-
-// 获取用户列表
 const fetchUserList = async () => {
-  loading.value = true
+  loading.value = true; userList.value = []
-  userList.value = []
-  
   try {
-    const params = {
+    const params = { page: searchParams.page, count: searchParams.count, key: searchParams.key || '' }
-      page: searchParams.page,
+    if (searchParams.is_admin !== undefined && searchParams.is_admin !== null && searchParams.is_admin !== '') params.is_admin = searchParams.is_admin
-      count: searchParams.count,
-      key: searchParams.key || ''
-    }
-    
     const res = await getUserList(params)
-    
     if (res.data.code === 200) {
       userList.value = res.data.data?.data || []
       total.value = res.data.data?.all_count || 0
-      
+      if (props.currentUserId) { const u = userList.value.find(u => u.user_id === props.currentUserId); if (u) selectedUser.value = u }
-      // 如果有当前选中的用户ID，自动选中
-      if (props.currentUserId) {
-        const currentUser = userList.value.find(
-          user => user.user_id === props.currentUserId
-        )
-        if (currentUser) {
-          selectedUser.value = currentUser
-        }
-      }
-    } else {
-      ElMessage.error(res.data.msg || '获取用户列表失败')
     }
-  } catch (error) {
+  } catch { ElMessage.error('获取用户列表失败') }
-    console.error('获取用户列表失败:', error)
+  finally { loading.value = false }
-    ElMessage.error('获取用户列表失败')
-  } finally {
-    loading.value = false
-  }
 }
 
-// 处理标签页切换
+const handleTabClick = (tab) => { if (tab.paneName === 'selectUser') fetchUserList() }
-const handleTabClick = (tab) => {
+const handleSearch = () => { searchParams.page = 1; fetchUserList() }
-  if (tab.paneName === 'selectUser') {
+const handleReset = () => { searchParams.key = ''; searchParams.is_admin = undefined; searchParams.page = 1; fetchUserList() }
-    fetchUserList()
+const handleCurrentChange = (row) => { selectedUser.value = (selectedUser.value?.user_id === row.user_id) ? null : row }
-  }
+const switchToAdd = () => { activeTab.value = 'addUser' }
-}
 
-// 搜索
-const handleSearch = () => {
-  searchParams.page = 1
-  fetchUserList()
-}
-
-// 重置搜索
-const handleReset = () => {
-  searchParams.key = ''
-  searchParams.status = ''
-  searchParams.page = 1
-  fetchUserList()
-}
-
-// 分页处理
-const handleSizeChange = (size) => {
-  searchParams.count = size
-  searchParams.page = 1
-  fetchUserList()
-}
-
-const handlePageChange = (page) => {
-  searchParams.page = page
-  fetchUserList()
-}
-
-// 切换到添加用户标签页
-const switchToAdd = () => {
-  activeTab.value = 'addUser'
-}
-
-// 选择用户
-const handleCurrentChange = (row) => {
-  selectedUser.value = row
-}
-
-// 表格行样式
-const tableRowClassName = ({ row }) => {
-  if (selectedUser.value && row.user_id === selectedUser.value.user_id) {
-    return 'selected-row'
-  }
-  return ''
-}
-
-// 添加用户
 const handleAddUser = async () => {
   if (!addFormRef.value) return
-  
   await addFormRef.value.validate(async (valid) => {
     if (!valid) return
-    
     addLoading.value = true
-    
     try {
-      const formData = new FormData()
+      const fd = new FormData()
-      formData.append('user_name', addForm.user_name)
+      fd.append('user_name', addForm.user_name); fd.append('email', addForm.email)
-      formData.append('email', addForm.email)
+      if (addForm.phone) fd.append('phone', addForm.phone)
-      if (addForm.phone) {
+      fd.append('password', addForm.password)
-        formData.append('phone', addForm.phone)
+      const res = await createTask(fd)
-      }
-      formData.append('password', addForm.password)
-      
-      const res = await createTask(formData)
-      
       if (res.data.code === 200) {
         ElMessage.success('用户创建成功')
-        
-        // 获取新创建的用户信息
         const newUser = res.data.data
-        
+        if (newUser) { selectedUser.value = { user_id: newUser.user_id || newUser.id, user_name: newUser.user_name || addForm.user_name, email: newUser.email || addForm.email, phone: newUser.phone || addForm.phone, ...newUser }; emit('confirm', selectedUser.value); handleClose() }
-        // 自动选择新创建的用户
+        else { activeTab.value = 'selectUser'; searchParams.page = 1; await fetchUserList() }
-        if (newUser) {
-          selectedUser.value = {
-            user_id: newUser.user_id || newUser.id,
-            user_name: newUser.user_name || addForm.user_name,
-            email: newUser.email || addForm.email,
-            phone: newUser.phone || addForm.phone,
-            ...newUser
-          }
-          
-          // 触发确认事件并关闭弹窗
-          emit('confirm', selectedUser.value)
-          handleClose()
-        } else {
-          // 如果没有返回用户信息，切换到选择标签页并刷新列表
-          activeTab.value = 'selectUser'
-          searchParams.page = 1
-          await fetchUserList()
-        }
-        
-        // 重置表单
         resetAddForm()
-      } else {
+      } else { ElMessage.error(res.data.msg || '创建失败') }
-        ElMessage.error(res.data.msg || '用户创建失败')
+    } catch { ElMessage.error('创建失败') }
-      }
+    finally { addLoading.value = false }
-    } catch (error) {
-      console.error('用户创建失败:', error)
-      ElMessage.error('用户创建失败')
-    } finally {
-      addLoading.value = false
-    }
   })
 }
 
-// 重置添加表单
+const resetAddForm = () => { Object.assign(addForm, { user_name: '', email: '', phone: '', password: '', confirmPassword: '' }); addFormRef.value?.resetFields() }
-const resetAddForm = () => {
+const handleClose = () => { visible.value = false; selectedUser.value = null; userList.value = []; searchParams.key = ''; searchParams.is_admin = undefined; searchParams.page = 1; total.value = 0; resetAddForm() }
-  addForm.user_name = ''
+const handleConfirm = () => { if (selectedUser.value) { emit('confirm', selectedUser.value); handleClose() } else ElMessage.warning('请选择一个用户') }
-  addForm.email = ''
-  addForm.phone = ''
-  addForm.password = ''
-  addForm.confirmPassword = ''
-  addFormRef.value?.resetFields()
-}
-
-// 关闭对话框
-const handleClose = () => {
-  visible.value = false
-  selectedUser.value = null
-  userList.value = []
-  searchParams.key = ''
-  searchParams.status = ''
-  searchParams.page = 1
-  total.value = 0
-  resetAddForm()
-}
-
-// 确认选择
-const handleConfirm = () => {
-  if (selectedUser.value) {
-    emit('confirm', selectedUser.value)
-    handleClose()
-  } else {
-    ElMessage.warning('请选择一个用户')
-  }
-}
 </script>
 
 <style scoped>
-.user-selector {
+.uls-root { min-height: 460px; }
-  min-height: 450px;
-}
 
-.user-list-container {
+/* 标签页 */
-  padding: 10px 0;
+.tab-lbl { display: inline-flex; align-items: center; gap: 5px; }
-}
+:deep(.el-tabs__item) { font-size: 15px; padding: 0 20px; }
+:deep(.el-tabs__item.is-active) { font-weight: 600; }
 
-.filter-section {
+/* 搜索栏 */
-  margin-bottom: 16px;
+.uls-search { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
-  padding: 16px;
+.uls-search-input { flex: 1; max-width: 320px; }
-  background-color: #f5f7fa;
-  border-radius: 8px;
-}
 
-.search-form {
+/* 已选提示条 */
-  display: flex;
+.uls-selected-bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; margin-bottom: 12px; background: linear-gradient(135deg, #f0f9eb 0%, #e1f3d8 100%); border: 1px solid #c2e7b0; border-radius: 8px; }
-  flex-wrap: wrap;
+.uls-sel-left { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #1d2129; }
-  align-items: center;
+.uls-sel-left b { font-weight: 600; }
-  gap: 8px;
+.sel-id { color: #86909c; font-size: 12px; }
-}
+.sel-avatar { flex-shrink: 0; font-size: 11px; background: linear-gradient(135deg, #67c23a, #85ce61); color: #fff; }
 
-.search-form :deep(.el-form-item) {
+.fade-enter-active, .fade-leave-active { transition: all .25s ease; }
-  margin-bottom: 0;
+.fade-enter-from, .fade-leave-to { opacity: 0; transform: translateY(-6px); }
-  margin-right: 12px;
-}
 
-.user-info-cell {
+/* 卡片网格 */
-  display: flex;
+.uls-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; max-height: 340px; overflow-y: auto; padding: 2px; }
-  align-items: center;
-  gap: 10px;
-}
 
-.user-name {
+.uls-card { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 2px solid #ebeef5; border-radius: 10px; cursor: pointer; transition: all .2s ease; background: #fff; }
-  font-weight: 500;
+.uls-card:hover { border-color: #b3d8ff; background: #f5faff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(64,158,255,.1); }
-  color: #303133;
+.uls-card.active { border-color: #409eff; background: #ecf5ff; }
-}
 
-.pagination-container {
+.uls-card-check { position: absolute; top: -1px; right: -1px; width: 24px; height: 24px; background: #409eff; border-radius: 0 8px 0 8px; display: flex; align-items: center; justify-content: center; }
-  margin-top: 20px;
-  display: flex;
-  justify-content: flex-end;
-}
 
-.add-user-section {
+.uls-avatar { flex-shrink: 0; font-size: 16px; font-weight: 700; background: linear-gradient(135deg, #c6e2ff, #409eff); color: #fff; }
-  padding: 30px 60px;
+.uls-card.active .uls-avatar { background: linear-gradient(135deg, #409eff, #337ecc); }
-}
 
-.add-user-form {
+.uls-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
-  max-width: 500px;
+.uls-card-name { font-size: 14px; font-weight: 600; color: #1d2129; display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-  margin: 0 auto;
+.admin-tag { transform: scale(.85); transform-origin: left center; }
-}
 
-.add-user-form :deep(.el-input) {
+.uls-card-meta { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 11px; color: #a8abb2; line-height: 1.3; }
-  width: 100%;
+.meta-id { color: #86909c; font-weight: 500; }
-}
+.meta-email, .meta-phone { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; }
 
-.dialog-footer {
+/* 分页 */
-  display: flex;
+.uls-pagination { margin-top: 14px; display: flex; justify-content: flex-end; }
-  justify-content: flex-end;
-  gap: 10px;
-}
 
-/* 表格样式 */
+/* 添加用户 */
-:deep(.el-table__row) {
+.uls-add-section { padding: 24px 40px; }
-  cursor: pointer;
+.uls-add-form { max-width: 460px; margin: 0 auto; }
-}
 
-:deep(.el-table__row:hover) {
+/* 底部 */
-  background-color: #f5f7fa;
+.uls-footer { display: flex; justify-content: flex-end; gap: 10px; }
-}
 
-:deep(.selected-row) {
+/* 滚动条美化 */
-  background-color: var(--el-color-primary-light-9) !important;
+.uls-grid::-webkit-scrollbar { width: 5px; }
-}
+.uls-grid::-webkit-scrollbar-thumb { background: #dcdfe6; border-radius: 4px; }
-
+.uls-grid::-webkit-scrollbar-thumb:hover { background: #c0c4cc; }
-:deep(.selected-row td) {
-  background-color: var(--el-color-primary-light-9) !important;
-}
-
-:deep(.el-table__body tr.current-row > td) {
-  background-color: var(--el-color-primary-light-8) !important;
-}
-
-/* 标签页样式 */
-:deep(.el-tabs__header) {
-  margin-bottom: 16px;
-}
-
-:deep(.el-tabs__item) {
-  font-size: 15px;
-  padding: 0 24px;
-}
-
-:deep(.el-tabs__item.is-active) {
-  font-weight: 600;
-}
 </style>

src/views/user/UserList.vue

@@ -15,6 +15,13 @@
               class="search-input"
             />
           </div>
+          <div class="search-group">
+            <span class="search-label">身份</span>
+            <el-select v-model="queryParams.is_admin" placeholder="全部" clearable class="search-input-small" style="width: 110px">
+              <el-option label="管理员" :value="true" />
+              <el-option label="普通用户" :value="false" />
+            </el-select>
+          </div>
           <div class="search-group">
             <span class="search-label">用户ID</span>
             <el-input
@@ -669,6 +676,7 @@ const showJumpUserSelector = ref(false)
 // 查询参数
 const queryParams = reactive({
   key: '',
+  is_admin: undefined,
   page: 1,
   count: 10
 })
@@ -872,6 +880,7 @@ const handleQuery = () => {
 // 重置查询
 const resetQuery = () => {
   queryParams.key = ''
+  queryParams.is_admin = undefined
   queryParams.page = 1
   fetchUserList()
 }