jingrow/jcloud
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

美化RoleConfigureDialog.vue

Browse Source
This commit is contained in:
jingrow 2025-12-30 02:13:00 +08:00
parent 4703036062
commit d26cdf766c
1 changed files with 99 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
dashboard/src/components/settings/RoleConfigureDialog.vue
View File

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