feat(system): 管理员权限页重构与用户选择器升级
- 重构 PermissionAdmin.vue:卡片式权限类型选择、拥有者名称解析、过期标识 - getUserList API 改用 params 对象,支持 is_admin 筛选 - UserList 新增管理员/普通用户身份筛选 - UserListSelector 重构为卡片网格布局,选中角标、动画提示条 - UserSelector 搜索栏加入身份筛选 Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user