html/client-web
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化

Browse Source
This commit is contained in:
ouyangxq
2026-08-03 10:51:53 +08:00
parent beb86d53e7
commit f098610a6c
15 changed files with 125 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/PermissionsView.vue
+6 -15
View File
@@ -94,8 +94,7 @@ async function savePermissions() {
<el-button :loading="loading" @click="loadRoles">重新加载</el-button>
</div>
<template v-else-if="store.roles.length">
<aside class="client-card role-selector">
<header><div><span class="section-label">ROLES</span><h3>选择角色</h3></div></header>
<aside class="client-card role-selector" aria-label="选择角色">
<button v-for="role in store.roles" :key="role.id" type="button" :class="{ active: role.id === selectedRoleId }" @click="selectedRoleId = role.id">
<span class="role-select-icon"><LockKeyhole v-if="role.builtin" :size="17" /><ShieldCheck v-else :size="17" /></span>
<span><strong>{{ role.name }}</strong><small>{{ role.code }}</small></span>
@@ -104,10 +103,7 @@ async function savePermissions() {
</aside>
<div class="permission-content">
<div class="permission-heading client-card">
<div><span class="section-label">PERMISSIONS</span><h2>{{ selectedRole?.name }}</h2><p>{{ selectedRole?.description }}</p></div>
<div class="permission-actions"><el-button :disabled="!editable || !hasChanges || saving" @click="resetPermissions"><RotateCcw :size="16" />撤销修改</el-button><el-button type="primary" :loading="saving" :disabled="!editable || !hasChanges || saving" @click="savePermissions"><Save :size="16" />保存权限</el-button></div>
</div>
<div class="permission-actions" aria-label="权限操作"><el-button :disabled="!editable || !hasChanges || saving" @click="resetPermissions"><RotateCcw :size="16" />撤销修改</el-button><el-button type="primary" :loading="saving" :disabled="!editable || !hasChanges || saving" @click="savePermissions"><Save :size="16" />保存权限</el-button></div>
<div v-if="selectedRole?.builtin" class="permission-notice"><LockKeyhole :size="18" /><span>当前角色为系统内置角色，权限由平台统一维护，不允许修改。</span></div>
<div v-else-if="selectedRole?.status === 'INACTIVE'" class="permission-notice warning"><span>该角色已停用，请先启用角色后再调整权限。</span></div>
@@ -141,8 +137,6 @@ async function savePermissions() {
.permission-load-error span { color: var(--muted); font-size: 12px; line-height: 1.6; }
.permission-empty { display: grid; place-items: center; color: var(--muted); font-size: 12px; text-align: center; }
.role-selector { position: sticky; top: 84px; padding: 12px; }
.role-selector header { padding: 8px 8px 12px; }
.role-selector h3 { margin-bottom: 0; }
.role-selector > button { display: flex; width: 100%; min-height: 58px; align-items: center; gap: 9px; margin: 3px 0; padding: 9px; border: 0; border-radius: 8px; background: transparent; color: var(--navy); cursor: pointer; text-align: left; }
.role-selector > button:hover, .role-selector > button.active { background: #edf6f4; }
.role-selector > button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
@@ -152,10 +146,7 @@ async function savePermissions() {
.role-selector strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.role-selector small { color: var(--muted); font-size: 9px; }
.permission-content { display: flex; min-width: 0; flex-direction: column; gap: 12px; }
.permission-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.permission-heading h2 { margin: 5px 0; font-size: 19px; }
.permission-heading p { margin: 0; color: var(--muted); font-size: 11px; }
.permission-actions { display: flex; gap: 8px; }
.permission-actions { display: flex; justify-content: flex-end; gap: 8px; }
.permission-notice { display: flex; align-items: center; gap: 9px; padding: 12px 15px; border: 1px solid #cfe1dc; background: #edf6f4; color: #45615d; font-size: 11px; }
.permission-notice.warning { border-color: #f1d4a8; background: #fff7ed; color: #9a5a09; }
.permission-groups { display: grid; gap: 12px; }
@@ -172,7 +163,7 @@ async function savePermissions() {
.permission-item strong { color: var(--navy); font-size: 12px; }
.permission-item small { color: var(--muted); font-size: 10px; line-height: 1.5; }
.permission-item code { color: #86939a; font-size: 9px; }
@media (max-width: 900px) { .permissions-page { grid-template-columns: 1fr; } .role-selector { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .role-selector header { grid-column: 1 / -1; } }
@media (max-width: 720px) { .permission-heading { align-items: flex-start; flex-direction: column; } .permission-actions { width: 100%; } .permission-actions .el-button { flex: 1; } .permission-group :deep(.el-checkbox-group) { grid-template-columns: 1fr; } .permission-item:nth-child(odd) { border-right: 0; } }
@media (max-width: 480px) { .role-selector { grid-template-columns: 1fr; } .role-selector header { grid-column: auto; } }
@media (max-width: 900px) { .permissions-page { grid-template-columns: 1fr; } .role-selector { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .permission-actions { width: 100%; } .permission-actions .el-button { flex: 1; } .permission-group :deep(.el-checkbox-group) { grid-template-columns: 1fr; } .permission-item:nth-child(odd) { border-right: 0; } }
@media (max-width: 480px) { .role-selector { grid-template-columns: 1fr; } }
</style>