From 59bf8decd1465699ab6aeeb58a3850d5af6cae71 Mon Sep 17 00:00:00 2001
From: Charles7c <charles7c@126.com>
Date: Mon, 27 May 2024 22:58:27 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E4=BC=98=E5=8C=96=E5=AE=89=E5=85=A8?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE=E9=A1=B5=E9=9D=A2=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../config/components/SecuritySetting.vue     | 204 ++++++++----------
 1 file changed, 90 insertions(+), 114 deletions(-)

diff --git a/src/views/system/config/components/SecuritySetting.vue b/src/views/system/config/components/SecuritySetting.vue
index d85ac3d..ed163cc 100644
--- a/src/views/system/config/components/SecuritySetting.vue
+++ b/src/views/system/config/components/SecuritySetting.vue
@@ -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>