From 84769954c4d8df30ffc940f9e814c00506c33c6b Mon Sep 17 00:00:00 2001
From: shiran <admin@example.com>
Date: Thu, 4 Jun 2026 17:59:24 +0800
Subject: [PATCH] =?UTF-8?q?feat(system):=20=E7=AE=A1=E7=90=86=E5=91=98?=
 =?UTF-8?q?=E6=9D=83=E9=99=90=E9=A1=B5=E9=87=8D=E6=9E=84=E4=B8=8E=E7=94=A8?=
 =?UTF-8?q?=E6=88=B7=E9=80=89=E6=8B=A9=E5=99=A8=E5=8D=87=E7=BA=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 重构 PermissionAdmin.vue：卡片式权限类型选择、拥有者名称解析、过期标识

- getUserList API 改用 params 对象，支持 is_admin 筛选

- UserList 新增管理员/普通用户身份筛选

- UserListSelector 重构为卡片网格布局，选中角标、动画提示条

- UserSelector 搜索栏加入身份筛选

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 src/api/admin/user.js                     |    4 +-
 src/components/UserSelector/index.vue     |   39 +-
 src/components/admin/UserListSelector.vue |  640 +++-------
 src/views/system/PermissionAdmin.vue      | 1386 +++++++--------------
 src/views/user/UserList.vue               |    9 +
 5 files changed, 666 insertions(+), 1412 deletions(-)

diff --git a/src/api/admin/user.js b/src/api/admin/user.js
index ccc935c..62fcb46 100644
--- a/src/api/admin/user.js
+++ b/src/api/admin/user.js
@@ -34,8 +34,8 @@ export const getUserInfo = (data) => {
 }
 
 /**获取用户列表 */
-export const getUserList = (data) => {
-  return http2.get('/api/v1/admin/user/user/list?page=' + data.page + '&count=' + data.count + '&key=' + data.key)
+export const getUserList = (params) => {
+  return http2.get('/api/v1/admin/user/user/list', { params })
 }
 
 /**更新用户信息 */
diff --git a/src/components/UserSelector/index.vue b/src/components/UserSelector/index.vue
index 0c24b2b..10c099a 100644
--- a/src/components/UserSelector/index.vue
+++ b/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;
-  padding-bottom: 16px;
-  border-bottom: 1px solid #ebeef5;
+  gap: 10px;
+  padding: 14px 16px;
+  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 {
-  background-color: #f5f7fa;
+:deep(.el-table__row:hover > td) {
+  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>
diff --git a/src/components/admin/UserListSelector.vue b/src/components/admin/UserListSelector.vue
index a0f565c..481196e 100644
--- a/src/components/admin/UserListSelector.vue
+++ b/src/components/admin/UserListSelector.vue
@@ -1,166 +1,111 @@
 <template>
-  <el-dialog
-    v-model="visible"
-    title="选择用户"
-    width="900px"
-    append-to-body
-    @close="handleClose"
-  >
-    <div class="user-selector">
-      <el-tabs v-model="activeTab" @tab-click="handleTabClick">
-        <!-- 选择用户 -->
-        <el-tab-pane label="选择用户" name="selectUser">
-          <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-dialog v-model="visible" title="选择用户" width="860px" append-to-body @close="handleClose" class="user-selector-dialog">
+    <div class="uls-root">
+      <el-tabs v-model="activeTab" @tab-click="handleTabClick" class="uls-tabs">
+        <!-- ====== 选择用户 ====== -->
+        <el-tab-pane name="selectUser">
+          <template #label>
+            <span class="tab-lbl">
+              <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>
+              选择用户
+            </span>
+          </template>
 
-            <!-- 用户列表表格 -->
-            <el-table
-              v-loading="loading"
-              :data="userList"
-              highlight-current-row
-              @current-change="handleCurrentChange"
-              style="width: 100%"
-              :height="350"
-              :row-class-name="tableRowClassName"
+          <!-- 搜索栏 -->
+          <div class="uls-search">
+            <el-input v-model="searchParams.key" placeholder="搜索用户名 / 邮箱 / ID" clearable @keyup.enter="handleSearch" class="uls-search-input" :prefix-icon="Search" />
+            <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 type="primary" @click="handleSearch" :icon="Search" circle />
+            <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" />
-              <el-table-column prop="user_id" label="用户ID" width="100" align="center" />
-              <el-table-column prop="user_name" label="用户名" min-width="120">
-                <template #default="{ row }">
-                  <div class="user-info-cell">
-                    <el-avatar :size="32" :src="row.cover">
-                      <el-icon><User /></el-icon>
-                    </el-avatar>
-                    <span class="user-name">{{ row.user_name }}</span>
-                  </div>
-                </template>
-              </el-table-column>
-              <el-table-column prop="email" label="邮箱" min-width="180" show-overflow-tooltip />
-              <el-table-column prop="phone" label="手机号" width="130" show-overflow-tooltip />
-              <!-- <el-table-column prop="status" label="状态" width="80" align="center">
-                <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 class="uls-card-check" v-if="selectedUser?.user_id === user.user_id">
+                <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>
+              </div>
+              <el-avatar :size="42" :src="user.cover" class="uls-avatar">{{ user.user_name?.charAt(0)?.toUpperCase() || 'U' }}</el-avatar>
+              <div class="uls-card-body">
+                <div class="uls-card-name">
+                  {{ user.user_name }}
+                  <el-tag v-if="user.is_admin" type="warning" size="small" effect="dark" round class="admin-tag">管理员</el-tag>
+                </div>
+                <div class="uls-card-meta">
+                  <span class="meta-id">#{{ user.user_id }}</span>
+                  <span v-if="user.email" class="meta-email">{{ user.email }}</span>
+                  <span v-if="user.phone" class="meta-phone">{{ user.phone }}</span>
+                </div>
+              </div>
             </div>
-            
-            <el-empty v-if="userList.length === 0 && !loading" description="暂无用户数据" />
+          </div>
+
+          <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">
-          <div class="add-user-section">
-            <el-form
-              ref="addFormRef"
-              :model="addForm"
-              :rules="addFormRules"
-              label-width="100px"
-              class="add-user-form"
-            >
+        <!-- ====== 添加用户 ====== -->
+        <el-tab-pane name="addUser">
+          <template #label>
+            <span class="tab-lbl">
+              <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>
+              添加用户
+            </span>
+          </template>
+          <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
-                  v-model="addForm.user_name"
-                  placeholder="请输入用户名"
-                  maxlength="50"
-                  show-word-limit
-                />
+                <el-input v-model="addForm.user_name" placeholder="请输入用户名" maxlength="50" show-word-limit />
               </el-form-item>
               <el-form-item label="邮箱" prop="email">
-                <el-input
-                  v-model="addForm.email"
-                  placeholder="请输入邮箱地址"
-                  type="email"
-                />
+                <el-input v-model="addForm.email" placeholder="请输入邮箱地址" type="email" />
               </el-form-item>
               <el-form-item label="手机号" prop="phone">
-                <el-input
-                  v-model="addForm.phone"
-                  placeholder="请输入手机号"
-                  maxlength="11"
-                />
+                <el-input v-model="addForm.phone" placeholder="请输入手机号（选填）" maxlength="11" />
               </el-form-item>
               <el-form-item label="密码" prop="password">
-                <el-input
-                  v-model="addForm.password"
-                  placeholder="请输入密码"
-                  type="password"
-                  show-password
-                />
+                <el-input v-model="addForm.password" placeholder="请输入密码" type="password" show-password />
               </el-form-item>
               <el-form-item label="确认密码" prop="confirmPassword">
-                <el-input
-                  v-model="addForm.confirmPassword"
-                  placeholder="请再次输入密码"
-                  type="password"
-                  show-password
-                />
+                <el-input v-model="addForm.confirmPassword" placeholder="请再次输入密码" type="password" show-password />
               </el-form-item>
               <el-form-item>
-                <el-button type="primary" @click="handleAddUser" :loading="addLoading">
-                  <el-icon><Plus /></el-icon>
-                  立即创建
-                </el-button>
-                <el-button @click="resetAddForm">
-                  <el-icon><Refresh /></el-icon>
-                  重置表单
-                </el-button>
+                <el-button type="primary" @click="handleAddUser" :loading="addLoading" :icon="Plus">立即创建</el-button>
+                <el-button @click="resetAddForm" :icon="Refresh">重置</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
-          type="primary"
-          @click="handleConfirm"
-          :disabled="!selectedUser"
-          v-if="activeTab === 'selectUser'"
-        >
-          确定选择
-        </el-button>
+        <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: {
-    type: Boolean,
-    default: false
-  },
-  // 当前已选中的用户ID（用于回显）
-  currentUserId: {
-    type: [String, Number],
-    default: ''
-  }
+  modelValue: { type: Boolean, default: false },
+  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: '',
-  status: '',
-  page: 1,
-  count: 10
-})
+const searchParams = reactive({ key: '', is_admin: undefined, page: 1, count: 12 })
 
-// 添加用户表单
-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 === '') {
-    callback(new Error('请再次输入密码'))
-  } else if (value !== addForm.password) {
-    callback(new Error('两次输入密码不一致'))
-  } else {
-    callback()
-  }
+  if (!value) callback(new Error('请再次输入密码'))
+  else if (value !== addForm.password) callback(new Error('两次输入密码不一致'))
+  else callback()
 }
-
-// 添加用户表单验证规则
 const addFormRules = {
-  user_name: [
-    { required: true, message: '请输入用户名', trigger: 'blur' },
-    { min: 2, max: 50, message: '用户名长度在 2 到 50 个字符', trigger: 'blur' }
-  ],
-  email: [
-    { 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' }
-  ]
+  user_name: [{ required: true, message: '请输入用户名', trigger: 'blur' }, { min: 2, max: 50, message: '2-50 个字符', trigger: 'blur' }],
+  email: [{ 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, (newVal) => {
-  visible.value = newVal
-  if (newVal) {
-    // 重置状态
-    activeTab.value = 'selectUser'
-    selectedUser.value = null
-    searchParams.page = 1
-    fetchUserList()
-  }
+watch(() => props.modelValue, (v) => {
+  visible.value = v
+  if (v) { 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
-  userList.value = []
-  
+  loading.value = true; userList.value = []
   try {
-    const params = {
-      page: searchParams.page,
-      count: searchParams.count,
-      key: searchParams.key || ''
-    }
-    
+    const params = { page: searchParams.page, count: searchParams.count, key: searchParams.key || '' }
+    if (searchParams.is_admin !== undefined && searchParams.is_admin !== null && searchParams.is_admin !== '') params.is_admin = searchParams.is_admin
     const res = await getUserList(params)
-    
     if (res.data.code === 200) {
       userList.value = res.data.data?.data || []
       total.value = res.data.data?.all_count || 0
-      
-      // 如果有当前选中的用户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 || '获取用户列表失败')
+      if (props.currentUserId) { const u = userList.value.find(u => u.user_id === props.currentUserId); if (u) selectedUser.value = u }
     }
-  } catch (error) {
-    console.error('获取用户列表失败:', error)
-    ElMessage.error('获取用户列表失败')
-  } finally {
-    loading.value = false
-  }
+  } catch { ElMessage.error('获取用户列表失败') }
+  finally { loading.value = false }
 }
 
-// 处理标签页切换
-const handleTabClick = (tab) => {
-  if (tab.paneName === 'selectUser') {
-    fetchUserList()
-  }
-}
+const handleTabClick = (tab) => { if (tab.paneName === 'selectUser') fetchUserList() }
+const handleSearch = () => { searchParams.page = 1; fetchUserList() }
+const handleReset = () => { searchParams.key = ''; searchParams.is_admin = undefined; searchParams.page = 1; 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()
-      formData.append('user_name', addForm.user_name)
-      formData.append('email', addForm.email)
-      if (addForm.phone) {
-        formData.append('phone', addForm.phone)
-      }
-      formData.append('password', addForm.password)
-      
-      const res = await createTask(formData)
-      
+      const fd = new FormData()
+      fd.append('user_name', addForm.user_name); fd.append('email', addForm.email)
+      if (addForm.phone) fd.append('phone', addForm.phone)
+      fd.append('password', addForm.password)
+      const res = await createTask(fd)
       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 {
-        ElMessage.error(res.data.msg || '用户创建失败')
-      }
-    } catch (error) {
-      console.error('用户创建失败:', error)
-      ElMessage.error('用户创建失败')
-    } finally {
-      addLoading.value = false
-    }
+      } else { ElMessage.error(res.data.msg || '创建失败') }
+    } catch { ElMessage.error('创建失败') }
+    finally { addLoading.value = false }
   })
 }
 
-// 重置添加表单
-const resetAddForm = () => {
-  addForm.user_name = ''
-  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('请选择一个用户')
-  }
-}
+const resetAddForm = () => { Object.assign(addForm, { user_name: '', email: '', phone: '', password: '', confirmPassword: '' }); addFormRef.value?.resetFields() }
+const handleClose = () => { visible.value = false; selectedUser.value = null; userList.value = []; searchParams.key = ''; searchParams.is_admin = undefined; 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 {
-  min-height: 450px;
-}
+.uls-root { min-height: 460px; }
 
-.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;
-  padding: 16px;
-  background-color: #f5f7fa;
-  border-radius: 8px;
-}
+/* 搜索栏 */
+.uls-search { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
+.uls-search-input { flex: 1; max-width: 320px; }
 
-.search-form {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 8px;
-}
+/* 已选提示条 */
+.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; }
+.uls-sel-left { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #1d2129; }
+.uls-sel-left b { font-weight: 600; }
+.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) {
-  margin-bottom: 0;
-  margin-right: 12px;
-}
+.fade-enter-active, .fade-leave-active { transition: all .25s ease; }
+.fade-enter-from, .fade-leave-to { opacity: 0; transform: translateY(-6px); }
 
-.user-info-cell {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
+/* 卡片网格 */
+.uls-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; max-height: 340px; overflow-y: auto; padding: 2px; }
 
-.user-name {
-  font-weight: 500;
-  color: #303133;
-}
+.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; }
+.uls-card:hover { border-color: #b3d8ff; background: #f5faff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(64,158,255,.1); }
+.uls-card.active { border-color: #409eff; background: #ecf5ff; }
 
-.pagination-container {
-  margin-top: 20px;
-  display: flex;
-  justify-content: flex-end;
-}
+.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; }
 
-.add-user-section {
-  padding: 30px 60px;
-}
+.uls-avatar { flex-shrink: 0; font-size: 16px; font-weight: 700; background: linear-gradient(135deg, #c6e2ff, #409eff); color: #fff; }
+.uls-card.active .uls-avatar { background: linear-gradient(135deg, #409eff, #337ecc); }
 
-.add-user-form {
-  max-width: 500px;
-  margin: 0 auto;
-}
+.uls-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
+.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; }
+.admin-tag { transform: scale(.85); transform-origin: left center; }
 
-.add-user-form :deep(.el-input) {
-  width: 100%;
-}
+.uls-card-meta { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 11px; color: #a8abb2; line-height: 1.3; }
+.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;
-  justify-content: flex-end;
-  gap: 10px;
-}
+/* 分页 */
+.uls-pagination { margin-top: 14px; display: flex; justify-content: flex-end; }
 
-/* 表格样式 */
-:deep(.el-table__row) {
-  cursor: pointer;
-}
+/* 添加用户 */
+.uls-add-section { padding: 24px 40px; }
+.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;
-}
-
-: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;
-}
+/* 滚动条美化 */
+.uls-grid::-webkit-scrollbar { width: 5px; }
+.uls-grid::-webkit-scrollbar-thumb { background: #dcdfe6; border-radius: 4px; }
+.uls-grid::-webkit-scrollbar-thumb:hover { background: #c0c4cc; }
 </style>
diff --git a/src/views/system/PermissionAdmin.vue b/src/views/system/PermissionAdmin.vue
index 8907dd0..11f23b0 100644
--- a/src/views/system/PermissionAdmin.vue
+++ b/src/views/system/PermissionAdmin.vue
@@ -1,340 +1,235 @@
 <template>
-  <div class="permission-admin-container">
-    <!-- 主容器 -->
-    <el-card class="main-container" shadow="never">
-      <!-- 搜索和操作栏 -->
-      <div class="filter-section">
-        <div class="filter-content">
-          <el-form :inline="true" :model="queryParams" class="search-form">
-            <el-form-item label="类型">
-              <el-select v-model="queryParams.owner_type" placeholder="请选择类型" clearable style="width: 150px" @change="handleOwnerTypeChange">
-                <el-option label="用户" value="user" />
-                <el-option label="组" value="group" />
-              </el-select>
-            </el-form-item>
-            <el-form-item label="用户" v-if="queryParams.owner_type === 'user'">
-              <div class="user_selector-inline">
-                <el-tag v-if="queryParams.user_id" type="primary" closable @close="clearQueryUser" style="margin-right: 8px;">
-                  {{ getQueryUserName() }}
-                </el-tag>
-                <el-button type="primary" plain @click="openQueryUserSelector" size="default">
-                  <el-icon><User /></el-icon>
-                  {{ queryParams.user_id ? '重新选择' : '选择用户' }}
-                </el-button>
-              </div>
-            </el-form-item>
-            <el-form-item label="管理员组" v-if="queryParams.owner_type === 'group'">
-              <div class="selector-inline">
-                <el-tag v-if="queryParams.admin_group_id" type="success" closable @close="clearQueryGroup" style="margin-right: 8px;">
-                  {{ getQueryGroupName() }}
-                </el-tag>
-                <el-button type="success" plain @click="openQueryGroupSelector" size="default">
-                  <el-icon><User /></el-icon>
-                  {{ queryParams.admin_group_id ? '重新选择' : '选择管理员组' }}
-                </el-button>
-              </div>
-            </el-form-item>
-            <el-form-item>
-              <el-button type="primary" @click="handleQuery">
-                <el-icon><Search /></el-icon>查询
-              </el-button>
-              <el-button @click="resetQuery">重置</el-button>
-            </el-form-item>
-          </el-form>
-          <div class="action-bar">
-            <el-button type="primary" @click="handleAdd">
-              <el-icon><Plus /></el-icon>分配权限
-            </el-button>
-            <el-button type="success" @click="fetchAdminPermissionList">
-              <el-icon><Refresh/></el-icon>刷新
-            </el-button>
-          </div>
+  <div class="perm-admin-page">
+    <!-- 页头 -->
+    <div class="page-header">
+      <div class="header-left">
+        <div class="header-icon">
+          <svg viewBox="0 0 24 24" width="28" height="28"><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1s3.1 1.39 3.1 3.1v2z" fill="#409eff"/></svg>
+        </div>
+        <div>
+          <h2 class="page-title">管理员权限</h2>
+          <p class="page-desc">管理用户和管理员组的路由接口访问权限</p>
         </div>
       </div>
+      <div class="header-right">
+        <el-button type="primary" @click="handleAdd" :icon="Plus">分配权限</el-button>
+      </div>
+    </div>
 
-      <!-- 管理员权限列表 -->
-      <div class="table-section">
-        <el-table
-          v-loading="loading"
-          :data="adminPermissionList"
-          style="width: 100%"
-          :header-cell-style="{ background: '#fafafa', color: '#333', fontWeight: 600 }"
-        >
-          <el-table-column prop="id" label="ID" width="80" />
-          <el-table-column label="拥有者类型" width="120">
-            <template #default="{ row }">
-              <el-tag :type="row.ownerType === 'user' ? 'primary' : 'success'">
+    <!-- 筛选栏 -->
+    <div class="filter-bar">
+      <div class="filter-left">
+        <el-radio-group v-model="queryParams.owner_type" @change="handleOwnerTypeChange" size="default">
+          <el-radio-button value="">全部</el-radio-button>
+          <el-radio-button value="user">
+            <svg viewBox="0 0 24 24" width="14" height="14" style="vertical-align:-2px;margin-right:3px"><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-radio-button>
+          <el-radio-button value="group">
+            <svg viewBox="0 0 24 24" width="14" height="14" style="vertical-align:-2px;margin-right:3px"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z" fill="currentColor"/></svg>
+            管理员组
+          </el-radio-button>
+        </el-radio-group>
+
+        <!-- 用户选择 -->
+        <div class="filter-selector" v-if="queryParams.owner_type === 'user'">
+          <el-tag v-if="queryParams.user_id" type="primary" closable @close="clearQueryUser" effect="dark" round>
+            {{ getQueryUserName() }}
+          </el-tag>
+          <el-button v-else size="small" @click="openQueryUserSelector" plain>
+            <svg viewBox="0 0 24 24" width="14" height="14" style="margin-right:3px"><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>
+            选择用户
+          </el-button>
+        </div>
+        <!-- 管理员组选择 -->
+        <div class="filter-selector" v-if="queryParams.owner_type === 'group'">
+          <el-tag v-if="queryParams.admin_group_id" type="success" closable @close="clearQueryGroup" effect="dark" round>
+            {{ getQueryGroupName() }}
+          </el-tag>
+          <el-button v-else size="small" @click="openQueryGroupSelector" plain>
+            <svg viewBox="0 0 24 24" width="14" height="14" style="margin-right:3px"><path d="M22 11V3h-7v3H9V3H2v8h7V8h2v10h4v3h7v-8h-7v3h-2V8h2v3h7zM7 9H4V5h3v4zm10 6h3v4h-3v-4zm0-10v4h3V5h-3z" fill="currentColor"/></svg>
+            选择管理员组
+          </el-button>
+        </div>
+      </div>
+      <div class="filter-right">
+        <el-button @click="handleQuery" type="primary" :loading="loading" :icon="Search">查询</el-button>
+        <el-button @click="resetQuery" :icon="Refresh">重置</el-button>
+      </div>
+    </div>
+
+    <!-- 权限列表 -->
+    <div class="table-wrap" v-loading="loading">
+      <el-table :data="adminPermissionList" style="width: 100%" stripe border>
+        <el-table-column prop="id" label="ID" width="70" align="center" />
+        <el-table-column label="拥有者" min-width="200">
+          <template #default="{ row }">
+            <div class="owner-cell">
+              <el-tag :type="row.ownerType === 'user' ? 'primary' : 'success'" size="small" effect="dark" round class="owner-type-tag">
                 {{ row.ownerType === 'user' ? '用户' : '组' }}
               </el-tag>
-            </template>
-          </el-table-column>
-          <el-table-column label="拥有者" width="180">
-            <template #default="{ row }">
-              <span v-if="row.ownerType === 'user'">用户ID: {{ row.userId }}</span>
-              <span v-else>管理员组ID: {{ row.groupId }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column prop="permissionId" label="路径权限ID" width="120" />
-          <el-table-column label="权限路径" min-width="200" show-overflow-tooltip>
-            <template #default="{ row }">
-              {{ row.permission?.path || '-' }}
-            </template>
-          </el-table-column>
-          <el-table-column label="权限名称" width="150" show-overflow-tooltip>
-            <template #default="{ row }">
-              {{ row.permission?.name || '-' }}
-            </template>
-          </el-table-column>
-          <el-table-column prop="weight" label="权重" width="100" />
-          <el-table-column label="权限类型" width="120">
-            <template #default="{ row }">
-              <el-tag :type="getPermissionTypeTag(row.permissionType)">
-                {{ getPermissionTypeText(row.permissionType) }}
-              </el-tag>
-            </template>
-          </el-table-column>
-          <el-table-column label="过期时间" width="180" show-overflow-tooltip>
-            <template #default="{ row }">
-              {{ formatDate(row.expireAt) }}
-            </template>
-          </el-table-column>
-          <el-table-column label="操作" width="200" fixed="right">
-            <template #default="{ row }">
-              <el-button type="primary" link @click="handleEdit(row)">编辑</el-button>
-              <el-button type="danger" link @click="handleDelete(row)">删除</el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-        
-        <!-- 分页 -->
-        <el-pagination
-          v-model:current-page="queryParams.page"
-          v-model:page-size="queryParams.count"
-          :page-sizes="[10, 20, 50, 100]"
-          layout="total, sizes, prev, pager, next, jumper"
-          :total="total"
-          @size-change="handleSizeChange"
-          @current-change="handleCurrentChange"
-          background
-          class="pagination"
-        />
-      </div>
-    </el-card>
-
-    <!-- 用户选择弹窗 - 使用UserListSelector组件 -->
-    <UserListSelector
-      v-model="userSelectorVisible"
-      :current-user-id="selectorType === 'query' ? queryParams.user_id : permissionForm.user_id"
-      @confirm="handleUserSelectorConfirm"
-    />
-
-    <!-- 管理员组选择弹窗 - 使用UserGroupSelector组件 -->
-    <UserGroupSelector
-      v-model="groupSelectorVisible"
-      :current-group-id="selectorType === 'query' ? queryParams.admin_group_id : permissionForm.admin_group_id"
-      admin-group
-      @confirm="handleGroupSelectorConfirm"
-    />
-
-    <!-- 路径权限选择弹窗 -->
-    <PermissionPathSelector
-      v-model="permissionSelectorVisible"
-      :current-permission-id="permissionForm.permission_id"
-      @confirm="handlePermissionSelectorConfirm"
-    />
-
-    <!-- 旧的用户选择弹窗 - 已废弃 -->
-    <!-- <el-dialog
-      v-model="userSelectorVisibleOld"
-      title="选择用户"
-      width="800px"
-      class="user-selector-dialog"
-    >
-      <div class="selector-search">
-        <el-input
-          v-model="userSearchParams.key"
-          placeholder="搜索用户名或ID"
-          clearable
-          @keyup.enter="searchUsers"
-          style="width: 300px; margin-right: 12px"
-        >
-          <template #prefix>
-            <el-icon><Search /></el-icon>
+              <span class="owner-name">{{ resolveOwnerName(row) }}</span>
+            </div>
           </template>
-        </el-input>
-        <el-button type="primary" @click="searchUsers">
-          <el-icon><Search /></el-icon>
-          搜索
-        </el-button>
-        <el-button @click="resetUserSearch">重置</el-button>
-      </div>
-
-      <el-table
-        v-loading="userSelectorLoading"
-        :data="userSelectorList"
-        highlight-current-row
-        @current-change="handleUserSelectChange"
-        style="width: 100%; margin-top: 16px"
-        :height="400"
-      >
-        <el-table-column type="index" label="序号" width="60" />
-        <el-table-column prop="UserId" label="用户ID" width="100" />
-        <el-table-column prop="UserName" label="用户名" min-width="150" />
-        <el-table-column prop="Email" label="邮箱" min-width="180" />
-        <el-table-column label="状态" width="100">
+        </el-table-column>
+        <el-table-column label="权限路径" min-width="260">
           <template #default="{ row }">
-            <el-tag :type="row.Status === 1 ? 'success' : 'danger'" size="small">
-              {{ row.Status === 1 ? '正常' : '禁用' }}
+            <div class="perm-path-cell" v-if="row.permission">
+              <el-tag v-if="row.permission.method" :type="getMethodTag(row.permission.method)" size="small" class="method-tag">{{ row.permission.method }}</el-tag>
+              <code class="path-code">{{ row.permission.path || '-' }}</code>
+            </div>
+            <span v-else class="text-muted">权限ID: {{ row.permissionId }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="权限名称" width="150" show-overflow-tooltip>
+          <template #default="{ row }">
+            {{ row.permission?.name || '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column label="访问级别" width="120" align="center">
+          <template #default="{ row }">
+            <el-tag :type="getPermissionTypeTag(row.permissionType)" effect="dark" size="small" round>
+              <span class="perm-type-inner">
+                <svg v-if="row.permissionType === 4" viewBox="0 0 24 24" width="12" height="12"><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="currentColor"/></svg>
+                <svg v-else-if="row.permissionType === 3" viewBox="0 0 24 24" width="12" height="12"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" fill="currentColor"/></svg>
+                <svg v-else-if="row.permissionType === 2" viewBox="0 0 24 24" width="12" height="12"><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" fill="currentColor"/></svg>
+                <svg v-else-if="row.permissionType === 1" viewBox="0 0 24 24" width="12" height="12"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z" fill="currentColor"/></svg>
+                <svg v-else viewBox="0 0 24 24" width="12" height="12"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" fill="currentColor"/><path d="M7 11h10v2H7z" fill="currentColor"/></svg>
+                {{ getPermissionTypeText(row.permissionType) }}
+              </span>
             </el-tag>
           </template>
         </el-table-column>
+        <el-table-column prop="weight" label="权重" width="80" align="center">
+          <template #default="{ row }">
+            <span class="weight-badge">{{ row.weight }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="过期时间" width="170" align="center">
+          <template #default="{ row }">
+            <span v-if="isExpired(row.expireAt)" class="expire-expired">
+              <svg viewBox="0 0 24 24" width="12" height="12" style="vertical-align:-1px;margin-right:2px"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" fill="#f56c6c"/></svg>
+              {{ formatDate(row.expireAt) }}
+            </span>
+            <span v-else-if="isValidExpire(row.expireAt)" class="expire-normal">{{ formatDate(row.expireAt) }}</span>
+            <el-tag v-else size="small" type="info" effect="plain">永不过期</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="140" align="center" fixed="right">
+          <template #default="{ row }">
+            <el-button size="small" link type="primary" @click="handleEdit(row)">
+              <svg viewBox="0 0 24 24" width="14" height="14" style="margin-right:2px"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" fill="currentColor"/></svg>
+              编辑
+            </el-button>
+            <el-button size="small" link type="danger" @click="handleDelete(row)">
+              <svg viewBox="0 0 24 24" width="14" height="14" style="margin-right:2px"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" fill="currentColor"/></svg>
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
       </el-table>
 
-    
-      <el-pagination
-        v-model:current-page="userSearchParams.page"
-        v-model:page-size="userSearchParams.count"
-        :page-sizes="[10, 20, 50, 100]"
-        layout="total, sizes, prev, pager, next, jumper"
-        :total="userSelectorTotal"
-        @size-change="handleUserSelectorSizeChange"
-        @current-change="handleUserSelectorPageChange"
-        background
-        class="selector-pagination"
-      />
+      <el-empty v-if="!loading && adminPermissionList.length === 0 && queryParams.owner_type" description="暂无权限数据" />
+      <div v-if="!queryParams.owner_type && adminPermissionList.length === 0 && !loading" class="hint-block">
+        <svg viewBox="0 0 24 24" width="40" height="40"><path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" fill="#c0c4cc"/></svg>
+        <p>请选择拥有者类型并查询</p>
+      </div>
 
-      <template #footer>
-        <el-button @click="userSelectorVisibleOld = false">取消</el-button>
-        <el-button type="primary" @click="confirmUserSelection" :disabled="!selectedUserTemp">
-          确定选择
-        </el-button>
-      </template>
-    </el-dialog> -->
-    <!-- 分配权限对话框 -->
-    <el-dialog
-      v-model="dialogVisible"
-      title="分配管理员权限"
-      width="700px"
-    >
-      <el-form
-        ref="permissionFormRef"
-        :model="permissionForm"
-        :rules="permissionRules"
-        label-width="140px"
-      >
-        <el-form-item label="权限绑定类型" prop="owner_type">
-          <el-select v-model="permissionForm.owner_type" placeholder="请选择权限绑定类型" style="width: 100%" @change="handleFormOwnerTypeChange" :disabled="permissionForm.id">
-            <el-option label="用户" value="user" />
-            <el-option label="组" value="group" />
-          </el-select>
-          <div class="form-tip">如果是 user 则填写 user_id，如果是 group 则填写 admin_group_id</div>
+      <!-- 分页 -->
+      <div class="pagination-wrap" v-if="total > 0">
+        <el-pagination
+          v-model:current-page="queryParams.page"
+          v-model:page-size="queryParams.count"
+          :page-sizes="[10, 20, 50, 100]"
+          :total="total"
+          layout="total, sizes, prev, pager, next"
+          background
+          @size-change="s => { queryParams.count = s; fetchAdminPermissionList() }"
+          @current-change="p => { queryParams.page = p; fetchAdminPermissionList() }"
+        />
+      </div>
+    </div>
+
+    <!-- 选择器 -->
+    <UserListSelector v-model="userSelectorVisible" :current-user-id="selectorTarget === 'query' ? queryParams.user_id : permissionForm.user_id" @confirm="handleUserSelectorConfirm" />
+    <UserGroupSelector v-model="groupSelectorVisible" :current-group-id="selectorTarget === 'query' ? queryParams.admin_group_id : permissionForm.admin_group_id" admin-group @confirm="handleGroupSelectorConfirm" />
+    <PermissionPathSelector v-model="permissionSelectorVisible" :current-permission-id="permissionForm.permission_id" @confirm="handlePermissionSelectorConfirm" />
+
+    <!-- ==================== 分配 / 编辑权限弹窗 ==================== -->
+    <el-dialog v-model="dialogVisible" :title="permissionForm.id ? '编辑权限' : '分配权限'" width="620px" append-to-body destroy-on-close>
+      <el-form ref="permissionFormRef" :model="permissionForm" :rules="permissionRules" label-width="100px" label-position="right">
+        <!-- 绑定类型 -->
+        <el-form-item label="绑定类型" prop="owner_type">
+          <el-radio-group v-model="permissionForm.owner_type" :disabled="!!permissionForm.id" @change="handleFormOwnerTypeChange">
+            <el-radio value="user" border>
+              <span class="radio-with-icon">
+                <svg viewBox="0 0 24 24" width="14" height="14"><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="#409eff"/></svg>
+                用户
+              </span>
+            </el-radio>
+            <el-radio value="group" border>
+              <span class="radio-with-icon">
+                <svg viewBox="0 0 24 24" width="14" height="14"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z" fill="#67c23a"/></svg>
+                管理员组
+              </span>
+            </el-radio>
+          </el-radio-group>
         </el-form-item>
-        <el-form-item label="用户" prop="user_id" v-if="permissionForm.owner_type === 'user'" >
-          <div class="recommend-user-selector">
-            <el-input
-              :model-value="getFormUserName()"
-              placeholder="点击选择用户"
-              readonly
-              @click="openFormUserSelector"
-              :disabled="!!permissionForm.id"
-            >
-              <template #append>
-                <el-button @click="openFormUserSelector" :disabled="!!permissionForm.id">
-                  <el-icon><Search /></el-icon>
-                </el-button>
-              </template>
-            </el-input>
-            <el-button 
-              v-if="permissionForm.user_id && !permissionForm.id" 
-              type="danger" 
-              link 
-              @click="clearFormUser"
-              class="clear-btn"
-            >
-              清除
-            </el-button>
+
+        <!-- 用户选择 -->
+        <el-form-item label="用户" prop="user_id" v-if="permissionForm.owner_type === 'user'">
+          <div class="form-selector-row">
+            <el-input :model-value="getFormUserName()" placeholder="点击右侧按钮选择用户" readonly class="selector-input" />
+            <el-button @click="openFormUserSelector" :disabled="!!permissionForm.id" :icon="Search">选择</el-button>
+            <el-button v-if="permissionForm.user_id && !permissionForm.id" type="danger" link @click="clearFormUser">清除</el-button>
           </div>
         </el-form-item>
+
+        <!-- 管理员组选择 -->
         <el-form-item label="管理员组" prop="admin_group_id" v-if="permissionForm.owner_type === 'group'">
-          <div class="recommend-user-selector">
-            <el-input
-              :model-value="getFormGroupName()"
-              placeholder="点击选择管理员组"
-              readonly
-              @click="openFormGroupSelector"
-              :disabled="!!permissionForm.id"
-            >
-              <template #append>
-                <el-button @click="openFormGroupSelector" :disabled="!!permissionForm.id">
-                  <el-icon><Search /></el-icon>
-                </el-button>
-              </template>
-            </el-input>
-            <el-button 
-              v-if="permissionForm.admin_group_id && !permissionForm.id" 
-              type="danger" 
-              link 
-              @click="clearFormGroup"
-              class="clear-btn"
-            >
-              清除
-            </el-button>
+          <div class="form-selector-row">
+            <el-input :model-value="getFormGroupName()" placeholder="点击右侧按钮选择管理员组" readonly class="selector-input" />
+            <el-button @click="openFormGroupSelector" :disabled="!!permissionForm.id" :icon="Search">选择</el-button>
+            <el-button v-if="permissionForm.admin_group_id && !permissionForm.id" type="danger" link @click="clearFormGroup">清除</el-button>
           </div>
         </el-form-item>
+
+        <!-- 路径权限 -->
         <el-form-item label="路径权限" prop="permission_id">
-          <div class="recommend-user-selector">
-            <el-input
-              :model-value="getFormPermissionName()"
-              placeholder="点击选择路径权限"
-              readonly
-              @click="openPermissionSelector"
-            >
-              <template #append>
-                <el-button @click="openPermissionSelector">
-                  <el-icon><Search /></el-icon>
-                </el-button>
-              </template>
-            </el-input>
-            <el-button 
-              v-if="permissionForm.permission_id" 
-              type="danger" 
-              link 
-              @click="clearFormPermission"
-              class="clear-btn"
-            >
-              清除
-            </el-button>
+          <div class="form-selector-row">
+            <el-input :model-value="getFormPermissionName()" placeholder="点击右侧按钮选择路径权限" readonly class="selector-input" />
+            <el-button @click="openPermissionSelector" :icon="Search">选择</el-button>
+            <el-button v-if="permissionForm.permission_id" type="danger" link @click="clearFormPermission">清除</el-button>
           </div>
-          <div class="form-tip">共 {{ permissionOptions.length }} 个路径权限可选</div>
         </el-form-item>
+
+        <!-- 访问级别 -->
+        <el-form-item label="访问级别" prop="permission_type">
+          <div class="perm-type-cards">
+            <div v-for="pt in permTypeOptions" :key="pt.value"
+              class="pt-card" :class="{ active: permissionForm.permission_type === pt.value, [`pt-${pt.key}`]: true }"
+              @click="permissionForm.permission_type = pt.value"
+            >
+              <div class="pt-icon" v-html="pt.icon"></div>
+              <span class="pt-label">{{ pt.label }}</span>
+            </div>
+          </div>
+        </el-form-item>
+
+        <!-- 权重 -->
         <el-form-item label="权重" prop="weight">
-          <el-input-number v-model="permissionForm.weight" placeholder="请输入权重" :min="0" style="width: 100%" />
-          <div class="form-tip">权重默认 10</div>
+          <el-input-number v-model="permissionForm.weight" :min="0" :max="9999" style="width: 200px" />
+          <span class="field-hint">数值越大优先级越高，默认 10</span>
         </el-form-item>
-        <el-form-item label="权限类型" prop="permission_type">
-          <el-select v-model="permissionForm.permission_type" placeholder="请选择权限类型" style="width: 100%">
-            <el-option label="无权限 (none)" :value="0" />
-            <el-option label="禁止 (prohibit)" :value="1" />
-            <el-option label="读取 (read)" :value="2" />
-            <el-option label="写入 (write)" :value="3" />
-            <el-option label="全部 (all)" :value="4" />
-          </el-select>
-          <div class="form-tip">0 none / 1 prohibit / 2 read / 3 write / 4 all</div>
-        </el-form-item>
-        <el-form-item label="过期时间" prop="expire_at">
-          <el-date-picker
-            v-model="permissionForm.expire_at"
-            type="datetime"
-            placeholder="请选择过期时间"
-            value-format="YYYY-MM-DD HH:mm:ss"
-            style="width: 100%"
-          />
-          <div class="form-tip">权限过期时间 不填写则不会过期</div>
+
+        <!-- 过期时间 -->
+        <el-form-item label="过期时间">
+          <el-date-picker v-model="permissionForm.expire_at" type="datetime" placeholder="留空表示永不过期" value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" />
         </el-form-item>
       </el-form>
       <template #footer>
         <el-button @click="dialogVisible = false">取消</el-button>
-        <el-button type="primary" @click="submitForm">确定</el-button>
+        <el-button type="primary" @click="submitForm" :loading="submitting">确定</el-button>
       </template>
     </el-dialog>
   </div>
@@ -343,705 +238,332 @@
 <script setup>
 import { ref, reactive, onMounted } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { Plus, Search, Refresh, User } from '@element-plus/icons-vue'
+import { Plus, Search, Refresh } from '@element-plus/icons-vue'
 import UserListSelector from '@/components/admin/UserListSelector.vue'
 import UserGroupSelector from '@/components/admin/UserGroupSelector.vue'
 import PermissionPathSelector from '@/components/admin/PermissionPathSelector.vue'
-import { 
-  getPermissionListByAdmin, 
-  addPermissionAdmin, 
-  updatePermissionAdmin, 
+import {
+  getPermissionListByAdmin,
+  addPermissionAdmin,
+  updatePermissionAdmin,
   deletePermissionAdmin,
   getPermissionList
 } from '@/api/admin/Permission'
 import { getUserList } from '@/api/admin/user'
 import { getAdminGroupList } from '@/api/admin/group'
-import { formatDate ,timeToTimestamp} from '@/utils/tool'
+import { formatDate, timeToTimestamp } from '@/utils/tool'
 
+// ==================== 权限类型选项 ====================
+const permTypeOptions = [
+  { value: 0, key: 'none', label: '无权限', icon: '<svg viewBox="0 0 24 24" width="20" height="20"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" fill="currentColor"/><path d="M7 11h10v2H7z" fill="currentColor"/></svg>' },
+  { value: 1, key: 'prohibit', label: '禁止', icon: '<svg viewBox="0 0 24 24" width="20" height="20"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z" fill="currentColor"/></svg>' },
+  { value: 2, key: 'read', label: '读取', icon: '<svg viewBox="0 0 24 24" width="20" height="20"><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" fill="currentColor"/></svg>' },
+  { value: 3, key: 'write', label: '写入', icon: '<svg viewBox="0 0 24 24" width="20" height="20"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" fill="currentColor"/></svg>' },
+  { value: 4, key: 'all', label: '全部', icon: '<svg viewBox="0 0 24 24" width="20" height="20"><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="currentColor"/></svg>' }
+]
 
-const selectorType = ref('query') 
-const userSelectorVisible = ref(false)
-const groupSelectorVisible = ref(false)
-const permissionSelectorVisible = ref(false)
-const userSelectorList = ref([])
-const userSelectorTotal = ref(0)
-const userSearchParams = reactive({
-  key: '',
-  page: 1,
-  count: 10
-})
-const selectedUserTemp = ref(null)
-const userSelectorLoading = ref(false)
+// ==================== 缓存数据 ====================
 const UserOptions = ref([])
 const GroupOptions = ref([])
-const selectedPermission = ref(null)
-// 查询参数
-const queryParams = reactive({
-  owner_type: '',
-  user_id: undefined,
-  admin_group_id: undefined,
-  page: 1,
-  count: 10
-})
-// 清除查询用户
-const clearQueryUser = () => {
-  queryParams.user_id = undefined
-}
-// 获取查询用户名称
-const getQueryUserName = () => {
-  const user = UserOptions.value.find(u => u.UserId === queryParams.user_id)
-  return user ? `${user.UserName} (ID: ${user.UserId})` : `用户ID: ${queryParams.user_id}`
-}
-// 清除查询管理员组
-const clearQueryGroup = () => {
-  queryParams.admin_group_id = undefined
-}
-// 获取查询管理员组名称
-const getQueryGroupName = () => {
-  const group = GroupOptions.value.find(g => g.id === queryParams.admin_group_id) || 
-                adminGroupOptions.value.find(g => g.id === queryParams.admin_group_id)
-  return group ? `${group.name} (ID: ${group.id})` : `管理员组ID: ${queryParams.admin_group_id}`
-}
-// 打开查询管理员组选择器
-const openQueryGroupSelector = () => {
-  selectorType.value = 'query'
-  groupSelectorVisible.value = true
-}
-// 表单：清除用户
-const clearFormUser = () => {
-  permissionForm.user_id = undefined
-}
-// 表单：获取显示名称
-const getFormUserName = () => {
-  if (!permissionForm.user_id) return ''
-  const user = UserOptions.value.find(u => u.UserId === permissionForm.user_id)
-  return user ? `${user.UserName} (ID: ${user.UserId})` : `用户ID: ${permissionForm.user_id}`
-}
+const adminGroupOptions = ref([])
+const permissionOptions = ref([])
 
-// 表单：获取管理员组显示名称
-const getFormGroupName = () => {
-  if (!permissionForm.admin_group_id) return ''
-  const group = GroupOptions.value.find(g => g.id === permissionForm.admin_group_id)
-  return group ? `${group.name} (ID: ${group.id})` : `管理员组ID: ${permissionForm.admin_group_id}`
-}
-
-// 表单：获取路径权限显示名称
-const getFormPermissionName = () => {
-  if (!permissionForm.permission_id) return ''
-  if (selectedPermission.value && selectedPermission.value.id === permissionForm.permission_id) {
-    const p = selectedPermission.value
-    return `${p.method || ''} ${p.path}${p.name ? ' - ' + p.name : ''}`
-  }
-  const perm = permissionOptions.value.find(p => p.id === permissionForm.permission_id)
-  return perm ? `${perm.method || ''} ${perm.path}${perm.name ? ' - ' + perm.name : ''}` : `权限ID: ${permissionForm.permission_id}`
-}
-
-// 清除表单管理员组
-const clearFormGroup = () => {
-  permissionForm.admin_group_id = undefined
-}
-
-// 清除表单路径权限
-const clearFormPermission = () => {
-  permissionForm.permission_id = undefined
-  selectedPermission.value = null
-}
-
-// 打开管理员组选择器
-const openFormGroupSelector = () => {
-  selectorType.value = 'form'
-  groupSelectorVisible.value = true
-}
-
-// 打开路径权限选择器
-const openPermissionSelector = () => {
-  permissionSelectorVisible.value = true
-}
-
-// 管理员组选择确认
-const handleGroupSelectorConfirm = (group) => {
-  if (group) {
-    const groupId = group.id || group.Id
-    const groupName = group.name || group.Name
-    
-    if (selectorType.value === 'query') {
-      queryParams.admin_group_id = groupId
-      if (!GroupOptions.value.find(g => g.id === groupId)) {
-        GroupOptions.value.push({ id: groupId, name: groupName })
-      }
-      fetchAdminPermissionList()
-    } else {
-      permissionForm.admin_group_id = groupId
-      if (!GroupOptions.value.find(g => g.id === groupId)) {
-        GroupOptions.value.push({ id: groupId, name: groupName })
-      }
-    }
-  }
-  groupSelectorVisible.value = false
-}
-
-// 路径权限选择确认
-const handlePermissionSelectorConfirm = (permission) => {
-  if (permission) {
-    permissionForm.permission_id = permission.id
-    selectedPermission.value = permission
-  }
-  permissionSelectorVisible.value = false
-}
-// UserListSelector 组件确认回调
-const handleUserSelectorConfirm = (user) => {
-  if (user) {
-    const userId = user.user_id || user.UserId
-    const userName = user.user_name || user.UserName
-    
-    if (selectorType.value === 'query') {
-      queryParams.user_id = userId
-      if (!UserOptions.value.find(u => u.UserId === userId)) {
-        UserOptions.value.push({ UserId: userId, UserName: userName })
-      }
-      fetchAdminPermissionList()
-    } else if (selectorType.value === 'form') {
-      permissionForm.user_id = userId
-      if (!UserOptions.value.find(u => u.UserId === userId)) {
-        UserOptions.value.push({ UserId: userId, UserName: userName })
-      }
-    }
-  }
-  userSelectorVisible.value = false
-}
-
-// 确认用户选择（旧方法，保留兼容）
-const confirmUserSelection = () => {
-  if (!selectedUserTemp.value) {
-    ElMessage.warning('请选择一个用户')
-    return
-  }
-  
-  if (selectorType.value === 'query') {
-    // 查询表单选择，仅影响查询条件
-    queryParams.user_id = selectedUserTemp.value.UserId
-  } else if (selectorType.value === 'form') {
-    // 表单选择，仅影响表单
-    permissionForm.user_id = selectedUserTemp.value.UserId
-  }
-  
-  // 将选中的用户添加到 UserOptions 中（如果不存在）
-  if (!UserOptions.value.find(u => u.UserId === selectedUserTemp.value.UserId)) {
-    UserOptions.value.push(selectedUserTemp.value)
-  }
-  
-  userSelectorVisible.value = false
-  ElMessage.success('用户选择成功')
-}
-// 打开查询用户选择器
-const openQueryUserSelector = () => {
-  selectorType.value = 'query'
-  userSelectorVisible.value = true
-  selectedUserTemp.value = null
-  userSearchParams.key = ''
-  userSearchParams.page = 1
-  fetchUserSelectorList()
-}
-// 打开表单用户选择器
-const openFormUserSelector = () => {
-  selectorType.value = 'form'
-  userSelectorVisible.value = true
-  selectedUserTemp.value = null
-  userSearchParams.key = ''
-  userSearchParams.page = 1
-  fetchUserSelectorList()
-}
-
-// 用户选择变化
-const handleUserSelectChange = (row) => {
-  selectedUserTemp.value = row
-}
-// 搜索用户
-const searchUsers = () => {
-  userSearchParams.page = 1
-  fetchUserSelectorList()
-}
-
-// 用户选择器分页
-const handleUserSelectorSizeChange = (size) => {
-  userSearchParams.count = size
-  fetchUserSelectorList()
-}
-
-const handleUserSelectorPageChange = (page) => {
-  userSearchParams.page = page
-  fetchUserSelectorList()
-}
-
-// 获取用户选择器列表
-const fetchUserSelectorList = async () => {
-  userSelectorLoading.value = true
-  try {
-    const res = await getUserList(userSearchParams)
-    console.log('用户选择器列表:', res.data)
-    if (res.data.code === 200) {
-      userSelectorList.value = res.data.data?.data || []
-      userSelectorTotal.value = res.data.data?.all_count || 0
-    }
-  } catch (error) {
-    console.error('获取用户列表失败:', error)
-    ElMessage.error('获取用户列表失败')
-  } finally {
-    userSelectorLoading.value = false
-  }
-}
-
-// 管理员权限表单
-const permissionForm = reactive({
-  id: undefined,
-  user_id: undefined,
-  admin_group_id: undefined,
-  owner_type: '',
-  permission_id: undefined,
-  weight: 10,
-  permission_type: 4,
-  expire_at: ''
-})
-
-const permissionRules = {
-  owner_type: [
-    { required: true, message: '请选择权限的绑定类型', trigger: 'change' }
-  ],
-  permission_id: [
-    { required: true, message: '请输入权限ID', trigger: 'blur' }
-  ],
-  permission_type: [
-    { required: true, message: '请选择权限类型', trigger: 'change' }
-  ]
-}
-
-// 状态数据
+// ==================== 筛选查询 ====================
 const loading = ref(false)
 const adminPermissionList = ref([])
 const total = ref(0)
-const dialogVisible = ref(false)
-const permissionFormRef = ref(null)
-// const userOptions = ref([])
-// const UserOptions = ref([])
-const adminGroupOptions = ref([])
-const permissionOptions = ref([])
-const permissionLoading = ref(false)
+const queryParams = reactive({ owner_type: '', user_id: undefined, admin_group_id: undefined, page: 1, count: 20 })
 
-// 获取方法标签颜色
-const getMethodTag = (method) => {
-  const tagMap = {
-    'GET': 'success',
-    'POST': 'primary',
-    'PUT': 'warning',
-    'DELETE': 'danger',
-    'PATCH': 'info'
-  }
-  return tagMap[method?.toUpperCase()] || 'info'
+const selectorTarget = ref('query')
+const userSelectorVisible = ref(false)
+const groupSelectorVisible = ref(false)
+const permissionSelectorVisible = ref(false)
+
+const clearQueryUser = () => { queryParams.user_id = undefined }
+const clearQueryGroup = () => { queryParams.admin_group_id = undefined }
+
+const getQueryUserName = () => {
+  const u = UserOptions.value.find(u => u.UserId === queryParams.user_id)
+  return u ? `${u.UserName} (ID: ${u.UserId})` : `用户 #${queryParams.user_id}`
+}
+const getQueryGroupName = () => {
+  const g = GroupOptions.value.find(g => g.id === queryParams.admin_group_id) || adminGroupOptions.value.find(g => g.id === queryParams.admin_group_id)
+  return g ? `${g.name} (ID: ${g.id})` : `组 #${queryParams.admin_group_id}`
 }
 
-// 获取权限类型标签颜色
-const getPermissionTypeTag = (type) => {
-  const tagMap = {
-    0: 'info',      // none
-    1: 'danger',    // prohibit
-    2: 'warning',   // read
-    3: 'primary',   // write
-    4: 'success'    // all
-  }
-  return tagMap[type] || 'info'
+const openQueryUserSelector = () => { selectorTarget.value = 'query'; userSelectorVisible.value = true }
+const openQueryGroupSelector = () => { selectorTarget.value = 'query'; groupSelectorVisible.value = true }
+
+const handleOwnerTypeChange = () => {
+  queryParams.user_id = undefined
+  queryParams.admin_group_id = undefined
+  adminPermissionList.value = []
+  total.value = 0
 }
 
-// 获取权限类型文本
-const getPermissionTypeText = (type) => {
-  const textMap = {
-    0: '无权限',
-    1: '禁止',
-    2: '读取',
-    3: '写入',
-    4: '全部'
-  }
-  return textMap[type] || '未知'
-}
-
-
-
-// 获取管理员权限列表
-const fetchAdminPermissionList = async () => {
+const handleQuery = () => {
   if (!queryParams.owner_type) {
-    ElMessage.warning('请先选择类型')
+    ElMessage.warning('请先选择拥有者类型')
     return
   }
-  
-  loading.value = true
-  try {
-    const params = { ...queryParams }
-    // 清除空参数
-    Object.keys(params).forEach(key => {
-      if (params[key] === '' || params[key] === null || params[key] === undefined) {
-        delete params[key]
-      }
-    })
-    
-    const res = await getPermissionListByAdmin(params)
-    console.log('管理员权限列表数据:', res.data)
-    if (res.data.code === 200) {
-      adminPermissionList.value = res.data.data || []
-      total.value = res.data.data.length || 0
-    } else {
-      ElMessage.error(res.data.message || '获取管理员权限列表失败')
-    }
-  } catch (error) {
-    console.error('获取管理员权限列表失败:', error)
-    ElMessage.error('获取管理员权限列表失败')
-  } finally {
-    loading.value = false
-  }
-}
-
-// 查询
-const handleQuery = () => {
   queryParams.page = 1
   fetchAdminPermissionList()
 }
 
-// 重置查询
 const resetQuery = () => {
+  queryParams.owner_type = ''
   queryParams.user_id = undefined
   queryParams.admin_group_id = undefined
-  queryParams.owner_type = ''
   queryParams.page = 1
   adminPermissionList.value = []
   total.value = 0
 }
 
-// 类型变化时清空关联字段
-const handleOwnerTypeChange = () => {
-  if (queryParams.owner_type === 'user') {
-    queryParams.admin_group_id = undefined
-  } else if (queryParams.owner_type === 'group') {
-    queryParams.user_id = undefined
+const fetchAdminPermissionList = async () => {
+  if (!queryParams.owner_type) return
+  loading.value = true
+  try {
+    const params = { ...queryParams }
+    Object.keys(params).forEach(k => { if (params[k] === '' || params[k] == null) delete params[k] })
+    const res = await getPermissionListByAdmin(params)
+    if (res.data.code === 200) {
+      adminPermissionList.value = res.data.data || []
+      total.value = res.data.data?.length || 0
+    } else {
+      ElMessage.error(res.data.message || '获取权限列表失败')
+    }
+  } catch {
+    ElMessage.error('获取权限列表失败')
+  } finally {
+    loading.value = false
   }
 }
 
-// 表单类型变化时清空关联字段
+// ==================== 拥有者名称解析 ====================
+const resolveOwnerName = (row) => {
+  if (row.ownerType === 'user') {
+    const u = UserOptions.value.find(u => u.UserId === row.userId)
+    return u ? u.UserName : `用户 #${row.userId}`
+  }
+  const g = GroupOptions.value.find(g => g.id === row.groupId) || adminGroupOptions.value.find(g => g.id === row.groupId)
+  return g ? g.name : `管理员组 #${row.groupId}`
+}
+
+// ==================== 表单 ====================
+const dialogVisible = ref(false)
+const submitting = ref(false)
+const permissionFormRef = ref(null)
+const selectedPermission = ref(null)
+
+const permissionForm = reactive({
+  id: undefined, user_id: undefined, admin_group_id: undefined,
+  owner_type: '', permission_id: undefined, weight: 10, permission_type: 4, expire_at: ''
+})
+
+const permissionRules = {
+  owner_type: [{ required: true, message: '请选择绑定类型', trigger: 'change' }],
+  permission_id: [{ required: true, message: '请选择路径权限', trigger: 'change' }],
+  permission_type: [{ required: true, message: '请选择访问级别', trigger: 'change' }]
+}
+
 const handleFormOwnerTypeChange = () => {
-  if (permissionForm.owner_type === 'user') {
-    permissionForm.admin_group_id = undefined
-  } else if (permissionForm.owner_type === 'group') {
-    permissionForm.user_id = undefined
+  if (permissionForm.owner_type === 'user') permissionForm.admin_group_id = undefined
+  else if (permissionForm.owner_type === 'group') permissionForm.user_id = undefined
+}
+
+const clearFormUser = () => { permissionForm.user_id = undefined }
+const clearFormGroup = () => { permissionForm.admin_group_id = undefined }
+const clearFormPermission = () => { permissionForm.permission_id = undefined; selectedPermission.value = null }
+
+const getFormUserName = () => {
+  if (!permissionForm.user_id) return ''
+  const u = UserOptions.value.find(u => u.UserId === permissionForm.user_id)
+  return u ? `${u.UserName} (ID: ${u.UserId})` : `用户 #${permissionForm.user_id}`
+}
+const getFormGroupName = () => {
+  if (!permissionForm.admin_group_id) return ''
+  const g = GroupOptions.value.find(g => g.id === permissionForm.admin_group_id)
+  return g ? `${g.name} (ID: ${g.id})` : `管理员组 #${permissionForm.admin_group_id}`
+}
+const getFormPermissionName = () => {
+  if (!permissionForm.permission_id) return ''
+  if (selectedPermission.value?.id === permissionForm.permission_id) {
+    const p = selectedPermission.value
+    return `${p.method || ''} ${p.path}${p.name ? ' - ' + p.name : ''}`
   }
+  const p = permissionOptions.value.find(p => p.id === permissionForm.permission_id)
+  return p ? `${p.method || ''} ${p.path}${p.name ? ' - ' + p.name : ''}` : `权限 #${permissionForm.permission_id}`
 }
 
-// 分页
-const handleSizeChange = (size) => {
-  queryParams.count = size
-  fetchAdminPermissionList()
-}
+const openFormUserSelector = () => { selectorTarget.value = 'form'; userSelectorVisible.value = true }
+const openFormGroupSelector = () => { selectorTarget.value = 'form'; groupSelectorVisible.value = true }
+const openPermissionSelector = () => { permissionSelectorVisible.value = true }
 
-const handleCurrentChange = (page) => {
-  queryParams.page = page
-  fetchAdminPermissionList()
-}
-
-// 分配权限
 const handleAdd = () => {
-  dialogVisible.value = true
-  Object.assign(permissionForm, {
-    id: undefined,
-    user_id: undefined,
-    admin_group_id: undefined,
-    owner_type: '',
-    permission_id: undefined,
-    weight: 10,
-    permission_type: 4,
-    expire_at: ''
-  })
+  const preOwnerType = queryParams.owner_type || ''
+  const preUserId = preOwnerType === 'user' ? queryParams.user_id : undefined
+  const preGroupId = preOwnerType === 'group' ? queryParams.admin_group_id : undefined
+  Object.assign(permissionForm, { id: undefined, user_id: preUserId, admin_group_id: preGroupId, owner_type: preOwnerType, permission_id: undefined, weight: 10, permission_type: 4, expire_at: '' })
+  selectedPermission.value = null
   permissionFormRef.value?.resetFields()
-}
-
-// 编辑权限
-const handleEdit = (row) => {
-  // 处理过期时间
-  let expireTime = ''
-  if (row.expireAt && row.expireAt !== '0001-01-01T00:00:00Z' && row.expireAt !== null) {
-    const date = new Date(row.expireAt)
-    if (!isNaN(date.getTime())) {
-      expireTime = date.toISOString().slice(0, 19).replace('T', ' ')
-    }
-  }
-  
-  Object.assign(permissionForm, {
-    id: row.id,
-    user_id: row.userId,
-    admin_group_id: row.groupId,
-    owner_type: row.ownerType,
-    permission_id: row.permissionId,
-    weight: row.weight,
-    permission_type: row.permissionType,
-    expire_at: expireTime
-  })
   dialogVisible.value = true
 }
 
-// 删除权限
-const handleDelete = (row) => {
-  ElMessageBox.confirm(`确认删除该权限吗？`, '警告', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning'
-  }).then(async () => {
-    try {
-      const res = await deletePermissionAdmin({ id: row.id })
-      if (res.data.code === 200) {
-        ElMessage.success('删除成功')
-        fetchAdminPermissionList()
-      }
-    } catch (error) {
-      console.error('删除失败:', error)
-      ElMessage.error(error.response?.data?.message || '删除失败')
-    }
-  }).catch(() => {})
+const handleEdit = (row) => {
+  let expireTime = ''
+  if (row.expireAt && row.expireAt !== '0001-01-01T00:00:00Z') {
+    const d = new Date(row.expireAt)
+    if (!isNaN(d.getTime())) expireTime = d.toISOString().slice(0, 19).replace('T', ' ')
+  }
+  Object.assign(permissionForm, {
+    id: row.id, user_id: row.userId, admin_group_id: row.groupId,
+    owner_type: row.ownerType, permission_id: row.permissionId,
+    weight: row.weight, permission_type: row.permissionType, expire_at: expireTime
+  })
+  if (row.permission) selectedPermission.value = row.permission
+  dialogVisible.value = true
+}
+
+const handleDelete = (row) => {
+  ElMessageBox.confirm('确定删除该条权限记录？删除后不可恢复。', '确认删除', { type: 'warning', confirmButtonText: '删除', cancelButtonText: '取消' })
+    .then(async () => {
+      try {
+        const res = await deletePermissionAdmin({ id: row.id })
+        if (res.data.code === 200) { ElMessage.success('删除成功'); fetchAdminPermissionList() }
+      } catch { ElMessage.error('删除失败') }
+    }).catch(() => {})
 }
 
-// 提交表单
 const submitForm = () => {
   permissionFormRef.value?.validate(async (valid) => {
-    if (valid) {
-      try {
-        const submitData = {
-          owner_type: permissionForm.owner_type,
-          permission_id: Number(permissionForm.permission_id),
-          weight: Number(permissionForm.weight),
-          permission_type: Number(permissionForm.permission_type)
-        }
-        
-        // 根据 owner_type 添加对应的 ID
-        if (permissionForm.owner_type === 'user') {
-          submitData.user_id = Number(permissionForm.user_id)
-        } else if (permissionForm.owner_type === 'group') {
-          submitData.admin_group_id = Number(permissionForm.admin_group_id)
-        }
-        
-        // 将过期时间转换为时间戳（秒）
-        if (permissionForm.expire_at) {
-          submitData.expire_at = timeToTimestamp(permissionForm.expire_at)
-        }
-        
-        // 如果是编辑，添加ID
-        if (permissionForm.id) {
-          submitData.id = permissionForm.id
-        }
-        
-        console.log('提交管理员权限数据:', submitData)
-        
-        let res
-        if (permissionForm.id) {
-          res = await updatePermissionAdmin(submitData)
-        } else {
-          res = await addPermissionAdmin(submitData)
-        }
-        
-        if (res.data.code === 200) {
-          ElMessage.success(permissionForm.id ? '修改成功' : '分配成功')
-          dialogVisible.value = false
-          fetchAdminPermissionList()
-        } else {
-          ElMessage.error(res.data.message || '操作失败')
-        }
-      } catch (error) {
-        console.error('操作失败:', error)
-        ElMessage.error(error.response?.data?.message || '操作失败')
+    if (!valid) return
+    submitting.value = true
+    try {
+      const data = {
+        owner_type: permissionForm.owner_type,
+        permission_id: Number(permissionForm.permission_id),
+        weight: Number(permissionForm.weight),
+        permission_type: Number(permissionForm.permission_type)
       }
+      if (permissionForm.owner_type === 'user') data.user_id = Number(permissionForm.user_id)
+      else if (permissionForm.owner_type === 'group') data.admin_group_id = Number(permissionForm.admin_group_id)
+      if (permissionForm.expire_at) data.expire_at = timeToTimestamp(permissionForm.expire_at)
+      if (permissionForm.id) data.id = permissionForm.id
+
+      const res = permissionForm.id ? await updatePermissionAdmin(data) : await addPermissionAdmin(data)
+      if (res.data.code === 200) {
+        ElMessage.success(permissionForm.id ? '修改成功' : '分配成功')
+        dialogVisible.value = false
+        fetchAdminPermissionList()
+      } else {
+        ElMessage.error(res.data.message || '操作失败')
+      }
+    } catch (e) {
+      ElMessage.error(e.response?.data?.message || '操作失败')
+    } finally {
+      submitting.value = false
     }
   })
 }
 
-// 获取用户列表
-const fetchUserList = async () => {
-  try {
-    const res = await getUserList({
-      page: 1,
-      count: 10,
-      key: ''
-    })
-    if (res.data.code === 200) {
-      UserOptions.value = res.data.data?.data || []
-    }
-  } catch (error) {
-    console.error('获取用户列表失败:', error)
-  }
+// ==================== 选择器回调 ====================
+const handleUserSelectorConfirm = (user) => {
+  if (!user) return
+  const userId = user.user_id || user.UserId
+  const userName = user.user_name || user.UserName
+  if (!UserOptions.value.find(u => u.UserId === userId)) UserOptions.value.push({ UserId: userId, UserName: userName })
+
+  if (selectorTarget.value === 'query') { queryParams.user_id = userId; fetchAdminPermissionList() }
+  else { permissionForm.user_id = userId }
+  userSelectorVisible.value = false
 }
 
-// 获取管理员组列表
-const fetchAdminGroupList = async () => {
-  try {
-    const res = await getAdminGroupList({
-      page: 1,
-      count: 10
-    })
-    if (res.data.code === 200) {
-      adminGroupOptions.value = res.data.data?.data || []
-    }
-  } catch (error) {
-    console.error('获取管理员组列表失败:', error)
-  }
+const handleGroupSelectorConfirm = (group) => {
+  if (!group) return
+  const gId = group.id || group.Id
+  const gName = group.name || group.Name
+  if (!GroupOptions.value.find(g => g.id === gId)) GroupOptions.value.push({ id: gId, name: gName })
+
+  if (selectorTarget.value === 'query') { queryParams.admin_group_id = gId; fetchAdminPermissionList() }
+  else { permissionForm.admin_group_id = gId }
+  groupSelectorVisible.value = false
 }
 
-// 获取路径权限列表
-const fetchPermissionList = async () => {
-  permissionLoading.value = true
-  try {
-    const res = await getPermissionList({
-      page: 1,
-      count: 10
-    })
-    if (res.data.code === 200) {
-      permissionOptions.value = res.data.data?.list || []
-      console.log('路径权限列表加载成功，共', permissionOptions.value.length, '条')
-      if (dialogVisible.value) {
-        ElMessage.success(`已加载 ${permissionOptions.value.length} 个路径权限`)
-      }
-    } else {
-      ElMessage.error(res.data.message || '获取路径权限列表失败')
-    }
-  } catch (error) {
-    console.error('获取路径权限列表失败:', error)
-    ElMessage.error('获取路径权限列表失败')
-  } finally {
-    permissionLoading.value = false
-  }
+const handlePermissionSelectorConfirm = (perm) => {
+  if (perm) { permissionForm.permission_id = perm.id; selectedPermission.value = perm }
+  permissionSelectorVisible.value = false
 }
 
-// 初始化
+// ==================== 工具函数 ====================
+const getMethodTag = (m) => ({ GET: 'success', POST: 'primary', PUT: 'warning', DELETE: 'danger', PATCH: 'info' }[m?.toUpperCase()] || 'info')
+const getPermissionTypeTag = (t) => ({ 0: 'info', 1: 'danger', 2: 'warning', 3: 'primary', 4: 'success' }[t] || 'info')
+const getPermissionTypeText = (t) => ({ 0: '无权限', 1: '禁止', 2: '读取', 3: '写入', 4: '全部' }[t] || '未知')
+
+const isValidExpire = (t) => t && t !== '0001-01-01T00:00:00Z' && !isNaN(new Date(t).getTime())
+const isExpired = (t) => isValidExpire(t) && new Date(t).getTime() < Date.now()
+
+// ==================== 初始化 ====================
 onMounted(() => {
-  fetchUserList()
-  fetchAdminGroupList()
-  fetchPermissionList()
+  getUserList({ page: 1, count: 50 }).then(r => { if (r.data.code === 200) UserOptions.value = r.data.data?.data || [] }).catch(() => {})
+  getAdminGroupList({ page: 1, count: 50 }).then(r => { if (r.data.code === 200) adminGroupOptions.value = r.data.data?.data || [] }).catch(() => {})
+  getPermissionList({ page: 1, count: 999 }).then(r => { if (r.data.code === 200) permissionOptions.value = r.data.data?.list || [] }).catch(() => {})
 })
 </script>
 
 <style scoped>
-.permission-admin-container {
-  padding: 0;
-}
+.perm-admin-page { padding: 20px 24px; }
 
-.main-container {
-  border: 1px solid #e1e8ed;
-  background: #ffffff;
-}
+/* 页头 */
+.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
+.header-left { display: flex; align-items: center; gap: 14px; }
+.header-icon { width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, #ecf5ff 0%, #d9ecff 100%); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
+.page-title { margin: 0 0 2px; font-size: 20px; font-weight: 700; color: #1d2129; }
+.page-desc { margin: 0; font-size: 13px; color: #86909c; }
 
-.filter-section {
-  padding: 0;
-  border-bottom: 1px solid #e1e8ed;
-  background: #fafbfc;
-}
+/* 筛选栏 */
+.filter-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; padding: 14px 18px; background: #f7f8fa; border-radius: 10px; border: 1px solid #ebeef5; }
+.filter-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
+.filter-right { display: flex; gap: 8px; }
+.filter-selector { display: flex; align-items: center; gap: 6px; }
 
-.filter-content {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 16px 20px;
-  gap: 20px;
-  flex-wrap: wrap;
-}
+/* 表格 */
+.table-wrap { background: #fff; border: 1px solid #ebeef5; border-radius: 10px; padding: 0; overflow: hidden; }
+.owner-cell { display: flex; align-items: center; gap: 8px; }
+.owner-type-tag { flex-shrink: 0; }
+.owner-name { font-weight: 500; color: #1d2129; }
+.perm-path-cell { display: flex; align-items: center; gap: 6px; }
+.method-tag { flex-shrink: 0; font-weight: 600; font-size: 11px; }
+.path-code { font-size: 12px; font-family: 'Consolas','Monaco',monospace; color: #606266; background: #f0f2f5; padding: 2px 8px; border-radius: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.perm-type-inner { display: inline-flex; align-items: center; gap: 3px; }
+.weight-badge { display: inline-block; min-width: 28px; text-align: center; padding: 2px 8px; background: #f0f2f5; border-radius: 10px; font-size: 12px; font-weight: 600; color: #606266; }
+.text-muted { color: #a8abb2; font-size: 12px; }
+.expire-expired { color: #f56c6c; font-weight: 500; font-size: 13px; }
+.expire-normal { color: #606266; font-size: 13px; }
 
-.search-form {
-  margin: 0;
-  flex: 1;
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  flex-wrap: wrap;
-}
+.hint-block { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 60px 0; color: #c0c4cc; }
+.hint-block p { margin: 0; font-size: 14px; }
 
-.search-form :deep(.el-form-item) {
-  margin-bottom: 0;
-  margin-right: 12px;
-}
+.pagination-wrap { padding: 14px 18px; display: flex; justify-content: flex-end; border-top: 1px solid #f0f2f5; }
 
-.action-bar {
-  display: flex;
-  gap: 12px;
-  flex-shrink: 0;
-}
+/* 弹窗表单 */
+.form-selector-row { display: flex; align-items: center; gap: 8px; width: 100%; }
+.selector-input { flex: 1; }
+.radio-with-icon { display: inline-flex; align-items: center; gap: 4px; }
+.field-hint { margin-left: 12px; font-size: 12px; color: #a8abb2; }
 
-.table-section {
-  padding: 0;
-}
+/* 权限类型卡片 */
+.perm-type-cards { display: flex; gap: 8px; flex-wrap: wrap; }
+.pt-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 16px; border: 2px solid #ebeef5; border-radius: 8px; cursor: pointer; transition: all .2s; min-width: 70px; background: #fff; }
+.pt-card:hover { border-color: #c0c4cc; background: #fafafa; }
+.pt-card.active { border-color: var(--pt-color, #409eff); background: var(--pt-bg, #ecf5ff); }
+.pt-icon { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; color: #909399; }
+.pt-card.active .pt-icon { color: var(--pt-color, #409eff); }
+.pt-label { font-size: 12px; font-weight: 500; color: #606266; }
+.pt-card.active .pt-label { color: var(--pt-color, #409eff); font-weight: 600; }
 
-.pagination {
-  margin-top: 20px;
-  padding: 16px 20px;
-  border-top: 1px solid #e1e8ed;
-  background: #fafbfc;
-  justify-content: flex-end;
-}
-
-.form-tip {
-  font-size: 12px;
-  color: #999;
-  margin-top: 4px;
-  line-height: 1.5;
-}
-
-/* 表格样式优化 */
-:deep(.el-table) {
-  border: none;
-  color: #2c3e50;
-}
-
-:deep(.el-table__header) {
-  background: #f8f9fa;
-}
-
-:deep(.el-table th) {
-  background: #f8f9fa !important;
-  border-bottom: 2px solid #e1e8ed;
-  color: #2c3e50;
-  font-weight: 600;
-  font-size: 13px;
-}
-
-:deep(.el-table td) {
-  border-bottom: 1px solid #f0f2f5;
-  color: #34495e;
-}
-
-:deep(.el-table tr:hover > td) {
-  background-color: #f8f9fa !important;
-}
-
-:deep(.el-card__body) {
-  padding: 0;
-}
-
-/* 推介人选择器样式 - 与UserList.vue保持一致 */
-.recommend-user-selector {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  width: 100%;
-}
-
-.recommend-user-selector .el-input {
-  flex: 1;
-}
-
-.recommend-user-selector .clear-btn {
-  flex-shrink: 0;
-}
-
-.selector-inline {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.user_selector-inline {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 8px;
-}
+.pt-none { --pt-color: #909399; --pt-bg: #f4f4f5; }
+.pt-prohibit { --pt-color: #f56c6c; --pt-bg: #fef0f0; }
+.pt-read { --pt-color: #e6a23c; --pt-bg: #fdf6ec; }
+.pt-write { --pt-color: #409eff; --pt-bg: #ecf5ff; }
+.pt-all { --pt-color: #67c23a; --pt-bg: #f0f9eb; }
 </style>
diff --git a/src/views/user/UserList.vue b/src/views/user/UserList.vue
index 9ba4e9a..535069d 100644
--- a/src/views/user/UserList.vue
+++ b/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()
 }