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

182
dashboard/src/components/settings/RoleConfigureDialog.vue
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,86 +90,72 @@
</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">
<span class="text-base">{{ $t('Allow Billing Access') }}</span>
<n-switch
:value="allowBilling"
@update:value="(val) => allowBilling = val"
:disabled="adminAccess"
size="medium"
/>
</div>
</n-form-item>
<n-form-item>
<div class="flex items-center justify-between w-full">
<span class="text-base">{{ $t('Allow Apps Access') }}</span>
<n-switch
:value="allowApps"
@update:value="(val) => allowApps = val"
:disabled="adminAccess"
size="medium"
/>
</div>
</n-form-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>
<n-switch
:value="allowPartner"
@update:value="(val) => allowPartner = val"
:disabled="adminAccess"
size="medium"
/>
</div>
</n-form-item>
<n-form-item>
<div class="flex items-center justify-between w-full">
<span class="text-base">{{ $t('Allow Site Creation') }}</span>
<n-switch
:value="allowSiteCreation"
@update:value="(val) => allowSiteCreation = val"
:disabled="adminAccess"
size="medium"
/>
</div>
</n-form-item>
<n-form-item>
<div class="flex items-center justify-between w-full">
<span class="text-base">{{ $t('Allow Release Group Creation') }}</span>
<n-switch
:value="allowBenchCreation"
@update:value="(val) => allowBenchCreation = val"
:disabled="adminAccess"
size="medium"
/>
</div>
</n-form-item>
<n-form-item>
<div class="flex items-center justify-between w-full">
<span class="text-base">{{ $t('Allow Server Creation') }}</span>
<n-switch
:value="allowServerCreation"
@update:value="(val) => allowServerCreation = val"
:disabled="adminAccess"
size="medium"
/>
</div>
</n-form-item>
<n-form-item>
<div class="flex items-center justify-between w-full">
<span class="text-base">{{ $t('Allow Webhook Configuration') }}</span>
<n-switch
:value="allowWebhookConfiguration"
@update:value="(val) => allowWebhookConfiguration = val"
:disabled="adminAccess"
size="medium"
/>
</div>
</n-form-item>
</n-space>
<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"
@update:value="(val) => allowBilling = val"
:disabled="adminAccess"
size="medium"
/>
</div>
<div class="permission-item">
<span class="text-base">{{ $t('Allow Apps Access') }}</span>
<n-switch
:value="allowApps"
@update:value="(val) => allowApps = val"
:disabled="adminAccess"
size="medium"
/>
</div>
<div v-if="$team.pg.jerp_partner" class="permission-item">
<span class="text-base">{{ $t('Allow Partner Access') }}</span>
<n-switch
:value="allowPartner"
@update:value="(val) => allowPartner = val"
:disabled="adminAccess"
size="medium"
/>
</div>
<div class="permission-item">
<span class="text-base">{{ $t('Allow Site Creation') }}</span>
<n-switch
:value="allowSiteCreation"
@update:value="(val) => allowSiteCreation = val"
:disabled="adminAccess"
size="medium"
/>
</div>
<div class="permission-item">
<span class="text-base">{{ $t('Allow Release Group Creation') }}</span>
<n-switch
:value="allowBenchCreation"
@update:value="(val) => allowBenchCreation = val"
:disabled="adminAccess"
size="medium"
/>
</div>
<div class="permission-item">
<span class="text-base">{{ $t('Allow Server Creation') }}</span>
<n-switch
:value="allowServerCreation"
@update:value="(val) => allowServerCreation = val"
:disabled="adminAccess"
size="medium"
/>
</div>
<div class="permission-item">
<span class="text-base">{{ $t('Allow Webhook Configuration') }}</span>
<n-switch
:value="allowWebhookConfiguration"
@update:value="(val) => allowWebhookConfiguration = val"
:disabled="adminAccess"
size="medium"
/>
</div>
</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) {