feat(admin-ui): members panel, invite links, audit tab and role-aware console

- New MembersPanel: role switching, add/remove members, invite-link
  generation with copy/revoke, pending invite list
- New Audit tab (AuditLog.vue) with group filter
- Role-aware UI: viewer hides route/group edit actions (RouteCard readonly),
  owner-only controls, role badge + member count on group cards
- GroupEditor: members managed via panel, owners field super-admin only
- en/zh i18n and CSS for the new panels
This commit is contained in:
RhenCloud 2026-08-11 23:38:33 +08:00
parent 252f6f181a
commit 11b74aa82a
No known key found for this signature in database
GPG key ID: A574A617378C4E0B
11 changed files with 805 additions and 55 deletions

View file

@ -1130,6 +1130,135 @@ main {
white-space: pre-wrap;
}
/* ---- Members panel ---- */
.members-panel {
margin-top: 28px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 18px 20px;
}
.panel-head {
display: flex;
align-items: baseline;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 12px;
}
.panel-head h3 {
font-size: 14px;
letter-spacing: 0.3px;
}
.members-panel h4 {
font-size: 12px;
margin: 14px 0 8px;
}
.member-list {
list-style: none;
margin: 0 0 12px;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.member-row,
.invite-row {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
padding: 8px 12px;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
}
.member-login {
font-weight: 600;
font-size: 13px;
flex: 1;
min-width: 120px;
}
.role-pill {
font-size: 11px;
font-weight: 700;
border-radius: 999px;
padding: 2px 10px;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.role-pill.owner {
color: var(--accent);
background: var(--accent-dim, rgba(88, 101, 242, 0.12));
}
.role-pill.admin {
color: var(--ok);
background: var(--ok-dim);
}
.role-pill.viewer {
color: var(--faint);
background: var(--surface);
border: 1px solid var(--border);
}
.member-add,
.invite-create {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.text-input {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
color: var(--text);
font-size: 13px;
padding: 6px 10px;
min-width: 200px;
outline: none;
}
.text-input:focus {
border-color: var(--accent);
}
.invite-box {
margin-top: 14px;
border-top: 1px dashed var(--border);
padding-top: 6px;
}
.invite-list {
list-style: none;
margin: 10px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.invite-token {
font-family: var(--mono);
font-size: 12px;
color: var(--muted);
}
.invite-exp {
font-size: 12px;
color: var(--faint);
}
@media (max-width: 720px) {
.filter-row {
grid-template-columns: 100px 1fr auto;