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

src/views/system/config/components/SecuritySetting.vue

@@ -1,9 +1,17 @@
 <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"
+      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"
@@ -11,8 +19,6 @@
           <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"
@@ -20,8 +26,6 @@
           <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"
@@ -29,8 +33,6 @@
           <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>
@@ -39,22 +41,16 @@
           <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">
@@ -62,8 +58,6 @@
           <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"
@@ -72,43 +66,25 @@
           <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>
+          <template #icon><icon-edit /></template>修改
-              <icon-edit />
+        </a-button>
-            </template>
+        <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>
+          <template #icon><icon-save /></template>保存
-              <icon-save />
-            </template>
-            保存
         </a-button>
         <a-button v-if="isUpdate" @click="reset">
-            <template #icon>
+          <template #icon><icon-refresh /></template>重置
-              <icon-refresh />
-            </template>
-            重置
         </a-button>
         <a-button v-if="isUpdate" @click="handleCancel">
-            <template #icon>
+          <template #icon><icon-undo /></template>取消
-              <icon-undo />
-            </template>
-            取消
         </a-button>
       </a-space>
-      </a-list-item>
-    </a-list>
     </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)) {
+.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>