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