mirror of
https://github.com/continew-org/continew-admin-ui.git
synced 2025-09-08 22:57:11 +08:00
style: 优化安全配置页面样式
This commit is contained in:
@@ -1,114 +1,90 @@
|
||||
<template>
|
||||
<a-form ref="formRef" :model="form" :rules="rules" size="small" :auto-label-width="true" label-align="left"
|
||||
:layout="width >= 500 ? 'horizontal' : 'vertical'" :disabled="!isUpdate" scroll-to-first-error
|
||||
style="margin-top: 10px">
|
||||
<a-list size="small" :bordered="false">
|
||||
<a-list-item>
|
||||
<a-form-item :label="securityConfig.PASSWORD_ERROR_LOCK_COUNT.name" field="PASSWORD_ERROR_LOCK_COUNT"
|
||||
:help="securityConfig.PASSWORD_ERROR_LOCK_COUNT.description" hide-asterisk>
|
||||
<a-input-number v-model="form.PASSWORD_ERROR_LOCK_COUNT" class="input-width" :default-value="0" :precision="0"
|
||||
:min="0" :max="10">
|
||||
<template #append>次</template>
|
||||
</a-input-number>
|
||||
</a-form-item>
|
||||
</a-list-item>
|
||||
<a-list-item>
|
||||
<a-form-item :label="securityConfig.PASSWORD_ERROR_LOCK_MINUTES.name" field="PASSWORD_ERROR_LOCK_MINUTES"
|
||||
:help="securityConfig.PASSWORD_ERROR_LOCK_MINUTES.description" hide-asterisk>
|
||||
<a-input-number v-model="form.PASSWORD_ERROR_LOCK_MINUTES" class="input-width" :precision="0" :min="1"
|
||||
:max="1440">
|
||||
<template #append>分钟</template>
|
||||
</a-input-number>
|
||||
</a-form-item>
|
||||
</a-list-item>
|
||||
<a-list-item>
|
||||
<a-form-item :label="securityConfig.PASSWORD_EXPIRATION_DAYS.name" field="PASSWORD_EXPIRATION_DAYS"
|
||||
:help="securityConfig.PASSWORD_EXPIRATION_DAYS.description" hide-asterisk>
|
||||
<a-input-number v-model="form.PASSWORD_EXPIRATION_DAYS" class="input-width" :precision="0" :min="0"
|
||||
:max="999">
|
||||
<template #append>天</template>
|
||||
</a-input-number>
|
||||
</a-form-item>
|
||||
</a-list-item>
|
||||
<a-list-item>
|
||||
<a-form-item :label="securityConfig.PASSWORD_EXPIRATION_WARNING_DAYS.name"
|
||||
field="PASSWORD_EXPIRATION_WARNING_DAYS" :help="securityConfig.PASSWORD_EXPIRATION_WARNING_DAYS.description"
|
||||
hide-asterisk>
|
||||
<a-input-number v-model="form.PASSWORD_EXPIRATION_WARNING_DAYS" class="input-width" :precision="0" :min="0"
|
||||
:max="998">
|
||||
<template #append>天</template>
|
||||
</a-input-number>
|
||||
</a-form-item>
|
||||
</a-list-item>
|
||||
<a-list-item>
|
||||
<a-form-item :label="securityConfig.PASSWORD_REUSE_POLICY.name" field="PASSWORD_REUSE_POLICY"
|
||||
: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">
|
||||
<template #append>次</template>
|
||||
</a-input-number>
|
||||
</a-form-item>
|
||||
</a-list-item>
|
||||
<a-list-item>
|
||||
<a-form-item :label="securityConfig.PASSWORD_MIN_LENGTH.name" field="PASSWORD_MIN_LENGTH"
|
||||
:help="securityConfig.PASSWORD_MIN_LENGTH.description" hide-asterisk>
|
||||
<a-input-number v-model="form.PASSWORD_MIN_LENGTH" class="input-width" :precision="0" :min="8" :max="32" />
|
||||
</a-form-item>
|
||||
</a-list-item>
|
||||
<a-list-item>
|
||||
<a-form-item :label="securityConfig.PASSWORD_ALLOW_CONTAIN_USERNAME.name"
|
||||
field="PASSWORD_ALLOW_CONTAIN_USERNAME">
|
||||
<a-switch v-model="form.PASSWORD_ALLOW_CONTAIN_USERNAME" type="round" :checked-value="1" :unchecked-value="0">
|
||||
<template #checked>是</template>
|
||||
<template #unchecked>否</template>
|
||||
</a-switch>
|
||||
</a-form-item>
|
||||
</a-list-item>
|
||||
<a-list-item>
|
||||
<a-form-item :label="securityConfig.PASSWORD_CONTAIN_SPECIAL_CHARACTERS.name"
|
||||
field="PASSWORD_CONTAIN_SPECIAL_CHARACTERS">
|
||||
<a-switch v-model="form.PASSWORD_CONTAIN_SPECIAL_CHARACTERS" type="round" :checked-value="1"
|
||||
:unchecked-value="0">
|
||||
<template #checked>是</template>
|
||||
<template #unchecked>否</template>
|
||||
</a-switch>
|
||||
</a-form-item>
|
||||
</a-list-item>
|
||||
<a-list-item>
|
||||
<a-space>
|
||||
<a-button v-if="!isUpdate" v-permission="['system:config:reset']" @click="onResetValue">
|
||||
<template #icon>
|
||||
<icon-undo />
|
||||
</template>
|
||||
恢复默认
|
||||
</a-button>
|
||||
<a-button v-if="!isUpdate" v-permission="['system:config:update']" type="primary" @click="onUpdate">
|
||||
<template #icon>
|
||||
<icon-edit />
|
||||
</template>
|
||||
修改
|
||||
</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>
|
||||
<a-space wrap :size="30">
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
auto-label-width
|
||||
label-align="left"
|
||||
size="small"
|
||||
:layout="width >= 500 ? 'horizontal' : 'vertical'"
|
||||
:disabled="!isUpdate"
|
||||
scroll-to-first-error
|
||||
class="form"
|
||||
>
|
||||
<a-form-item :label="securityConfig.PASSWORD_ERROR_LOCK_COUNT.name" field="PASSWORD_ERROR_LOCK_COUNT"
|
||||
:help="securityConfig.PASSWORD_ERROR_LOCK_COUNT.description" hide-asterisk>
|
||||
<a-input-number v-model="form.PASSWORD_ERROR_LOCK_COUNT" class="input-width" :default-value="0" :precision="0"
|
||||
:min="0" :max="10">
|
||||
<template #append>次</template>
|
||||
</a-input-number>
|
||||
</a-form-item>
|
||||
<a-form-item :label="securityConfig.PASSWORD_ERROR_LOCK_MINUTES.name" field="PASSWORD_ERROR_LOCK_MINUTES"
|
||||
:help="securityConfig.PASSWORD_ERROR_LOCK_MINUTES.description" hide-asterisk>
|
||||
<a-input-number v-model="form.PASSWORD_ERROR_LOCK_MINUTES" class="input-width" :precision="0" :min="1"
|
||||
:max="1440">
|
||||
<template #append>分钟</template>
|
||||
</a-input-number>
|
||||
</a-form-item>
|
||||
<a-form-item :label="securityConfig.PASSWORD_EXPIRATION_DAYS.name" field="PASSWORD_EXPIRATION_DAYS"
|
||||
:help="securityConfig.PASSWORD_EXPIRATION_DAYS.description" hide-asterisk>
|
||||
<a-input-number v-model="form.PASSWORD_EXPIRATION_DAYS" class="input-width" :precision="0" :min="0"
|
||||
:max="999">
|
||||
<template #append>天</template>
|
||||
</a-input-number>
|
||||
</a-form-item>
|
||||
<a-form-item :label="securityConfig.PASSWORD_EXPIRATION_WARNING_DAYS.name"
|
||||
field="PASSWORD_EXPIRATION_WARNING_DAYS" :help="securityConfig.PASSWORD_EXPIRATION_WARNING_DAYS.description"
|
||||
hide-asterisk>
|
||||
<a-input-number v-model="form.PASSWORD_EXPIRATION_WARNING_DAYS" class="input-width" :precision="0" :min="0"
|
||||
:max="998">
|
||||
<template #append>天</template>
|
||||
</a-input-number>
|
||||
</a-form-item>
|
||||
<a-form-item :label="securityConfig.PASSWORD_REUSE_POLICY.name" field="PASSWORD_REUSE_POLICY"
|
||||
: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">
|
||||
<template #append>次</template>
|
||||
</a-input-number>
|
||||
</a-form-item>
|
||||
<a-form-item :label="securityConfig.PASSWORD_MIN_LENGTH.name" field="PASSWORD_MIN_LENGTH"
|
||||
:help="securityConfig.PASSWORD_MIN_LENGTH.description" hide-asterisk>
|
||||
<a-input-number v-model="form.PASSWORD_MIN_LENGTH" class="input-width" :precision="0" :min="8" :max="32" />
|
||||
</a-form-item>
|
||||
<a-form-item :label="securityConfig.PASSWORD_ALLOW_CONTAIN_USERNAME.name"
|
||||
field="PASSWORD_ALLOW_CONTAIN_USERNAME">
|
||||
<a-switch v-model="form.PASSWORD_ALLOW_CONTAIN_USERNAME" type="round" :checked-value="1" :unchecked-value="0">
|
||||
<template #checked>是</template>
|
||||
<template #unchecked>否</template>
|
||||
</a-switch>
|
||||
</a-form-item>
|
||||
<a-form-item :label="securityConfig.PASSWORD_CONTAIN_SPECIAL_CHARACTERS.name"
|
||||
field="PASSWORD_CONTAIN_SPECIAL_CHARACTERS">
|
||||
<a-switch v-model="form.PASSWORD_CONTAIN_SPECIAL_CHARACTERS" type="round" :checked-value="1"
|
||||
:unchecked-value="0">
|
||||
<template #checked>是</template>
|
||||
<template #unchecked>否</template>
|
||||
</a-switch>
|
||||
</a-form-item>
|
||||
<a-space>
|
||||
<a-button v-if="!isUpdate" v-permission="['system:config:update']" type="primary" @click="onUpdate">
|
||||
<template #icon><icon-edit /></template>修改
|
||||
</a-button>
|
||||
<a-button v-if="!isUpdate" v-permission="['system:config:reset']" @click="onResetValue">
|
||||
<template #icon><icon-undo /></template>恢复默认
|
||||
</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-form>
|
||||
</a-space>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@@ -233,11 +209,11 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep(.arco-list-item:not(:last-child)) {
|
||||
border-bottom: none;
|
||||
.form {
|
||||
margin: 20px 0 0 20px;
|
||||
}
|
||||
|
||||
.input-width {
|
||||
width: 130px;
|
||||
:deep(.arco-form-item.arco-form-item-has-help) {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user