style: 优化安全配置页面样式

This commit is contained in:
2024-05-27 22:58:27 +08:00
parent 6e520a3072
commit 59bf8decd1

View File

@@ -1,114 +1,90 @@
<template> <template>
<a-form ref="formRef" :model="form" :rules="rules" size="small" :auto-label-width="true" label-align="left" <a-space wrap :size="30">
:layout="width >= 500 ? 'horizontal' : 'vertical'" :disabled="!isUpdate" scroll-to-first-error <a-form
style="margin-top: 10px"> ref="formRef"
<a-list size="small" :bordered="false"> :model="form"
<a-list-item> :rules="rules"
<a-form-item :label="securityConfig.PASSWORD_ERROR_LOCK_COUNT.name" field="PASSWORD_ERROR_LOCK_COUNT" auto-label-width
:help="securityConfig.PASSWORD_ERROR_LOCK_COUNT.description" hide-asterisk> label-align="left"
<a-input-number v-model="form.PASSWORD_ERROR_LOCK_COUNT" class="input-width" :default-value="0" :precision="0" size="small"
:min="0" :max="10"> :layout="width >= 500 ? 'horizontal' : 'vertical'"
<template #append></template> :disabled="!isUpdate"
</a-input-number> scroll-to-first-error
</a-form-item> class="form"
</a-list-item> >
<a-list-item> <a-form-item :label="securityConfig.PASSWORD_ERROR_LOCK_COUNT.name" field="PASSWORD_ERROR_LOCK_COUNT"
<a-form-item :label="securityConfig.PASSWORD_ERROR_LOCK_MINUTES.name" field="PASSWORD_ERROR_LOCK_MINUTES" :help="securityConfig.PASSWORD_ERROR_LOCK_COUNT.description" hide-asterisk>
:help="securityConfig.PASSWORD_ERROR_LOCK_MINUTES.description" hide-asterisk> <a-input-number v-model="form.PASSWORD_ERROR_LOCK_COUNT" class="input-width" :default-value="0" :precision="0"
<a-input-number v-model="form.PASSWORD_ERROR_LOCK_MINUTES" class="input-width" :precision="0" :min="1" :min="0" :max="10">
:max="1440"> <template #append></template>
<template #append>分钟</template> </a-input-number>
</a-input-number> </a-form-item>
</a-form-item> <a-form-item :label="securityConfig.PASSWORD_ERROR_LOCK_MINUTES.name" field="PASSWORD_ERROR_LOCK_MINUTES"
</a-list-item> :help="securityConfig.PASSWORD_ERROR_LOCK_MINUTES.description" hide-asterisk>
<a-list-item> <a-input-number v-model="form.PASSWORD_ERROR_LOCK_MINUTES" class="input-width" :precision="0" :min="1"
<a-form-item :label="securityConfig.PASSWORD_EXPIRATION_DAYS.name" field="PASSWORD_EXPIRATION_DAYS" :max="1440">
:help="securityConfig.PASSWORD_EXPIRATION_DAYS.description" hide-asterisk> <template #append>分钟</template>
<a-input-number v-model="form.PASSWORD_EXPIRATION_DAYS" class="input-width" :precision="0" :min="0" </a-input-number>
:max="999"> </a-form-item>
<template #append></template> <a-form-item :label="securityConfig.PASSWORD_EXPIRATION_DAYS.name" field="PASSWORD_EXPIRATION_DAYS"
</a-input-number> :help="securityConfig.PASSWORD_EXPIRATION_DAYS.description" hide-asterisk>
</a-form-item> <a-input-number v-model="form.PASSWORD_EXPIRATION_DAYS" class="input-width" :precision="0" :min="0"
</a-list-item> :max="999">
<a-list-item> <template #append></template>
<a-form-item :label="securityConfig.PASSWORD_EXPIRATION_WARNING_DAYS.name" </a-input-number>
field="PASSWORD_EXPIRATION_WARNING_DAYS" :help="securityConfig.PASSWORD_EXPIRATION_WARNING_DAYS.description" </a-form-item>
hide-asterisk> <a-form-item :label="securityConfig.PASSWORD_EXPIRATION_WARNING_DAYS.name"
<a-input-number v-model="form.PASSWORD_EXPIRATION_WARNING_DAYS" class="input-width" :precision="0" :min="0" field="PASSWORD_EXPIRATION_WARNING_DAYS" :help="securityConfig.PASSWORD_EXPIRATION_WARNING_DAYS.description"
:max="998"> hide-asterisk>
<template #append></template> <a-input-number v-model="form.PASSWORD_EXPIRATION_WARNING_DAYS" class="input-width" :precision="0" :min="0"
</a-input-number> :max="998">
</a-form-item> <template #append></template>
</a-list-item> </a-input-number>
<a-list-item> </a-form-item>
<a-form-item :label="securityConfig.PASSWORD_REUSE_POLICY.name" field="PASSWORD_REUSE_POLICY" <a-form-item :label="securityConfig.PASSWORD_REUSE_POLICY.name" field="PASSWORD_REUSE_POLICY"
:help="securityConfig.PASSWORD_REUSE_POLICY.description" hide-asterisk> :help="securityConfig.PASSWORD_REUSE_POLICY.description" hide-asterisk>
<a-input-number v-model="form.PASSWORD_REUSE_POLICY" class="input-width" :precision="0" :min="3" :max="32"> <a-input-number v-model="form.PASSWORD_REUSE_POLICY" class="input-width" :precision="0" :min="3" :max="32">
<template #append></template> <template #append></template>
</a-input-number> </a-input-number>
</a-form-item> </a-form-item>
</a-list-item> <a-form-item :label="securityConfig.PASSWORD_MIN_LENGTH.name" field="PASSWORD_MIN_LENGTH"
<a-list-item> :help="securityConfig.PASSWORD_MIN_LENGTH.description" hide-asterisk>
<a-form-item :label="securityConfig.PASSWORD_MIN_LENGTH.name" field="PASSWORD_MIN_LENGTH" <a-input-number v-model="form.PASSWORD_MIN_LENGTH" class="input-width" :precision="0" :min="8" :max="32" />
:help="securityConfig.PASSWORD_MIN_LENGTH.description" hide-asterisk> </a-form-item>
<a-input-number v-model="form.PASSWORD_MIN_LENGTH" class="input-width" :precision="0" :min="8" :max="32" /> <a-form-item :label="securityConfig.PASSWORD_ALLOW_CONTAIN_USERNAME.name"
</a-form-item> field="PASSWORD_ALLOW_CONTAIN_USERNAME">
</a-list-item> <a-switch v-model="form.PASSWORD_ALLOW_CONTAIN_USERNAME" type="round" :checked-value="1" :unchecked-value="0">
<a-list-item> <template #checked></template>
<a-form-item :label="securityConfig.PASSWORD_ALLOW_CONTAIN_USERNAME.name" <template #unchecked></template>
field="PASSWORD_ALLOW_CONTAIN_USERNAME"> </a-switch>
<a-switch v-model="form.PASSWORD_ALLOW_CONTAIN_USERNAME" type="round" :checked-value="1" :unchecked-value="0"> </a-form-item>
<template #checked></template> <a-form-item :label="securityConfig.PASSWORD_CONTAIN_SPECIAL_CHARACTERS.name"
<template #unchecked></template> field="PASSWORD_CONTAIN_SPECIAL_CHARACTERS">
</a-switch> <a-switch v-model="form.PASSWORD_CONTAIN_SPECIAL_CHARACTERS" type="round" :checked-value="1"
</a-form-item> :unchecked-value="0">
</a-list-item> <template #checked></template>
<a-list-item> <template #unchecked></template>
<a-form-item :label="securityConfig.PASSWORD_CONTAIN_SPECIAL_CHARACTERS.name" </a-switch>
field="PASSWORD_CONTAIN_SPECIAL_CHARACTERS"> </a-form-item>
<a-switch v-model="form.PASSWORD_CONTAIN_SPECIAL_CHARACTERS" type="round" :checked-value="1" <a-space>
:unchecked-value="0"> <a-button v-if="!isUpdate" v-permission="['system:config:update']" type="primary" @click="onUpdate">
<template #checked></template> <template #icon><icon-edit /></template>修改
<template #unchecked></template> </a-button>
</a-switch> <a-button v-if="!isUpdate" v-permission="['system:config:reset']" @click="onResetValue">
</a-form-item> <template #icon><icon-undo /></template>恢复默认
</a-list-item> </a-button>
<a-list-item> <a-button v-if="isUpdate" type="primary" @click="handleSave">
<a-space> <template #icon><icon-save /></template>保存
<a-button v-if="!isUpdate" v-permission="['system:config:reset']" @click="onResetValue"> </a-button>
<template #icon> <a-button v-if="isUpdate" @click="reset">
<icon-undo /> <template #icon><icon-refresh /></template>重置
</template> </a-button>
恢复默认 <a-button v-if="isUpdate" @click="handleCancel">
</a-button> <template #icon><icon-undo /></template>取消
<a-button v-if="!isUpdate" v-permission="['system:config:update']" type="primary" @click="onUpdate"> </a-button>
<template #icon> </a-space>
<icon-edit /> </a-form>
</template> </a-space>
修改
</a-button>
<a-button v-if="isUpdate" type="primary" @click="handleSave">
<template #icon>
<icon-save />
</template>
保存
</a-button>
<a-button v-if="isUpdate" @click="reset">
<template #icon>
<icon-refresh />
</template>
重置
</a-button>
<a-button v-if="isUpdate" @click="handleCancel">
<template #icon>
<icon-undo />
</template>
取消
</a-button>
</a-space>
</a-list-item>
</a-list>
</a-form>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@@ -233,11 +209,11 @@ onMounted(() => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
:deep(.arco-list-item:not(:last-child)) { .form {
border-bottom: none; margin: 20px 0 0 20px;
} }
.input-width { :deep(.arco-form-item.arco-form-item-has-help) {
width: 130px; margin-bottom: 5px;
} }
</style> </style>