美化RoleConfigureDialog.vue

This commit is contained in:
jingrow 2025-12-30 02:13:00 +08:00
parent 4703036062
commit d26cdf766c

View File

@ -69,7 +69,7 @@
</n-space>
</n-tab-pane>
<n-tab-pane name="settings" :tab="$t('Settings')">
<n-space vertical :size="20">
<n-space vertical :size="8">
<n-card>
<n-form-item>
<div class="flex items-center justify-between w-full">
@ -90,10 +90,9 @@
</n-form-item>
</n-card>
<n-card>
<h2 class="mb-4 text-base font-semibold">{{ $t('Page Access Permissions') }}</h2>
<n-space vertical :size="16">
<n-form-item>
<div class="flex items-center justify-between w-full">
<h2 class="mb-2 text-base font-semibold">{{ $t('Page Access Permissions') }}</h2>
<div class="permissions-list">
<div class="permission-item">
<span class="text-base">{{ $t('Allow Billing Access') }}</span>
<n-switch
:value="allowBilling"
@ -102,9 +101,7 @@
size="medium"
/>
</div>
</n-form-item>
<n-form-item>
<div class="flex items-center justify-between w-full">
<div class="permission-item">
<span class="text-base">{{ $t('Allow Apps Access') }}</span>
<n-switch
:value="allowApps"
@ -113,9 +110,7 @@
size="medium"
/>
</div>
</n-form-item>
<n-form-item v-if="$team.pg.jerp_partner">
<div class="flex items-center justify-between w-full">
<div v-if="$team.pg.jerp_partner" class="permission-item">
<span class="text-base">{{ $t('Allow Partner Access') }}</span>
<n-switch
:value="allowPartner"
@ -124,9 +119,7 @@
size="medium"
/>
</div>
</n-form-item>
<n-form-item>
<div class="flex items-center justify-between w-full">
<div class="permission-item">
<span class="text-base">{{ $t('Allow Site Creation') }}</span>
<n-switch
:value="allowSiteCreation"
@ -135,9 +128,7 @@
size="medium"
/>
</div>
</n-form-item>
<n-form-item>
<div class="flex items-center justify-between w-full">
<div class="permission-item">
<span class="text-base">{{ $t('Allow Release Group Creation') }}</span>
<n-switch
:value="allowBenchCreation"
@ -146,9 +137,7 @@
size="medium"
/>
</div>
</n-form-item>
<n-form-item>
<div class="flex items-center justify-between w-full">
<div class="permission-item">
<span class="text-base">{{ $t('Allow Server Creation') }}</span>
<n-switch
:value="allowServerCreation"
@ -157,9 +146,7 @@
size="medium"
/>
</div>
</n-form-item>
<n-form-item>
<div class="flex items-center justify-between w-full">
<div class="permission-item">
<span class="text-base">{{ $t('Allow Webhook Configuration') }}</span>
<n-switch
:value="allowWebhookConfiguration"
@ -168,8 +155,7 @@
size="medium"
/>
</div>
</n-form-item>
</n-space>
</div>
</n-card>
</n-space>
</n-tab-pane>
@ -426,8 +412,38 @@ export default {
padding: 20px 0;
}
:deep(.role-configure-modal .n-form-item) {
margin-bottom: 0;
:deep(.role-configure-modal .n-card-body) {
padding: 12px 24px;
}
.permissions-list {
display: flex;
flex-direction: column;
}
.permission-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
margin: 0 -12px;
border-radius: 4px;
}
.permission-item:nth-child(even) {
background-color: #f9fafb;
}
.permission-item:nth-child(odd) {
background-color: transparent;
}
.permission-item:hover {
background-color: #f3f4f6;
}
:deep(.role-configure-modal .n-switch) {
transition: all 0.2s ease;
}
@media (max-width: 768px) {