mirror of https://github.com/veypi/OneAuth.git
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
137 lines
4.9 KiB
HTML
137 lines
4.9 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<title>用户管理</title>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="用户管理" details="管理应用下的用户及其角色">
|
|
</head>
|
|
<style>
|
|
body {
|
|
padding: var(--spacing-lg);
|
|
background-color: var(--bg-color-secondary);
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.header {
|
|
font-size: 1.5rem;
|
|
line-height: 1.5;
|
|
margin-bottom: var(--spacing-lg);
|
|
font-weight: 600;
|
|
color: var(--text-color);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.dialog {
|
|
height: 60vh;
|
|
width: 60vw;
|
|
background-color: var(--bg-color);
|
|
box-shadow: var(--shadow-lg);
|
|
padding: var(--spacing-xl);
|
|
border-radius: var(--radius-lg);
|
|
border: 1px solid var(--border-color);
|
|
color: var(--text-color);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.dialog-title {
|
|
font-size: 1.5rem;
|
|
margin-bottom: var(--spacing-lg);
|
|
font-weight: 600;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Responsive dialog */
|
|
@media (max-width: 768px) {
|
|
.dialog {
|
|
width: 90vw;
|
|
height: 80vh;
|
|
}
|
|
}
|
|
</style>
|
|
<body>
|
|
<div class="header">
|
|
<i class="fa-solid fa-users-gear"></i> 应用用户管理
|
|
</div>
|
|
<v-table :axios='$axios' :keys="keys" api='/api/user'>
|
|
<v-btn vslot='_addon' size='sm' @click='show_user(row)' variant="primary">
|
|
<i class="fa-solid fa-id-card"></i> 权限表
|
|
</v-btn>
|
|
</v-table>
|
|
|
|
<v-dialog v:show='show'>
|
|
<div class="dialog">
|
|
<div class="dialog-title">
|
|
<i class="fa-solid fa-user-tag"></i> {{selected.username}} 角色分配
|
|
</div>
|
|
<div style="flex: 1; overflow: hidden;">
|
|
<!--
|
|
Assumption: The API to get roles for a specific user in a specific app
|
|
might need to be clarified.
|
|
If the original code had /api/user/${$G.app.id}/user_role, maybe it meant /api/app/${appId}/user_role?
|
|
Or /api/user_role?query={user_id: ...}
|
|
|
|
Looking at line 101 in original: user_role_url = `/api/user/${row.id}/user_role`
|
|
But line 51 used: :api='`/api/user/${$G.app.id}/user_role`'
|
|
|
|
I will use the one from line 101 as it seems more specific to the user,
|
|
but I need to make sure it filters by the current app if necessary.
|
|
However, based on standard REST, /api/user/{uid}/user_role likely returns roles for that user.
|
|
But we are in an "App" context.
|
|
|
|
Let's stick to a dynamic URL variable `current_user_role_url`
|
|
-->
|
|
<v-table v-if="current_user_role_url" :axios='$axios' :keys="au_keys" :api='current_user_role_url' height="100%"></v-table>
|
|
</div>
|
|
<div style="margin-top: var(--spacing-md); text-align: right;">
|
|
<v-btn @click="show = false">关闭</v-btn>
|
|
</div>
|
|
</div>
|
|
</v-dialog>
|
|
</body>
|
|
<script setup>
|
|
show = false
|
|
selected = {}
|
|
current_user_role_url = ''
|
|
|
|
auOpts = {
|
|
0: ['正常', 'positive'],
|
|
1: ['拒绝', 'warning'],
|
|
2: ['申请中', 'primary'],
|
|
3: ['禁用', 'warning'],
|
|
}
|
|
|
|
keys = [
|
|
{ name: 'id', label: 'ID', style: 'width: 4rem' },
|
|
{ name: 'username', label: '用户名', style: 'text-align: left', sortable: true },
|
|
{ name: 'nickname', label: '昵称', style: 'text-align: left', editable: true, sortable: true },
|
|
{ name: 'created_at', label: '创建时间', field: (r) => new Date(r.created_at).toLocaleString() },
|
|
{ name: 'updated_at', label: '更新时间', field: (r) => new Date(r.updated_at).toLocaleString() },
|
|
{ name: 'status', label: '账号状态', sortable: true },
|
|
]
|
|
|
|
au_keys = [
|
|
{ name: 'id', label: 'ID', no_create: true, style: 'width: 4rem' },
|
|
{ name: 'role_name', label: '角色名称' },
|
|
{ name: 'created_at', label: '创建时间', no_create: true, field: (r) => new Date(r.created_at).toLocaleString() },
|
|
{ name: 'updated_at', label: '更新时间', no_create: true, field: (r) => new Date(r.updated_at).toLocaleString() },
|
|
{ name: 'status', label: '状态', sortable: true },
|
|
]
|
|
|
|
show_user = (row) => {
|
|
selected = row
|
|
// Construct URL to fetch roles for this user.
|
|
// Assuming the intent is to see roles of this user within the context of the app or globally?
|
|
// If it's "App User Management", we probably want to see roles assigned to this user for THIS app.
|
|
// The original code had ambiguity.
|
|
// Let's assume /api/user/{uid}/user_role gets the user's roles.
|
|
// We might need to filter by app_id if the backend supports it.
|
|
// For now, I'll use the pattern from line 101 of original file.
|
|
current_user_role_url = `/api/user/${row.id}/user_role`
|
|
show = true
|
|
}
|
|
</script>
|
|
</html> |