fix: some

src/components/core/layouts/art-header-bar/ChangePasswordDialog.vue

@@ -20,17 +20,23 @@
           v-model="formData.old_password"
           type="password"
           autocomplete="current-password"
-          maxlength="32"
           show-password
           :disabled="submitting"
         />
       </ElFormItem>
+      <ElAlert
+        :title="t('passwordChange.passwordRule')"
+        type="info"
+        :closable="false"
+        style="margin-bottom: 16px"
+      />
       <ElFormItem prop="new_password" :label="t('passwordChange.newPassword')">
         <ElInput
           v-model="formData.new_password"
           type="password"
           autocomplete="new-password"
-          maxlength="32"
+          maxlength="12"
+          :placeholder="t('passwordChange.passwordRule')"
           show-password
           :disabled="submitting"
         />
@@ -40,7 +46,8 @@
           v-model="formData.confirm_password"
           type="password"
           autocomplete="new-password"
-          maxlength="32"
+          maxlength="12"
+          :placeholder="t('passwordChange.passwordRule')"
           show-password
           :disabled="submitting"
           @keyup.enter="handleSubmit"
@@ -61,12 +68,13 @@
 
 <script setup lang="ts">
   import { computed, reactive, ref } from 'vue'
-  import { ElMessage } from 'element-plus'
+  import { ElAlert, ElMessage } from 'element-plus'
   import type { FormInstance, FormRules } from 'element-plus'
   import { AuthService } from '@/api/modules'
   import { useUserStore } from '@/store/modules/user'
   import { normalizeApiError } from '@/utils/business/apiError'
   import { useI18n } from 'vue-i18n'
+  import { createNewLoginPasswordRule } from '@/utils/validation/loginPassword'
 
   defineOptions({ name: 'ChangePasswordDialog' })
 
@@ -90,16 +98,15 @@
 
   const formRules = computed<FormRules>(() => ({
     old_password: [
-      { required: true, message: t('passwordChange.oldPasswordRequired'), trigger: 'blur' },
-      { min: 8, max: 32, message: t('passwordChange.passwordLength'), trigger: 'blur' }
+      { required: true, message: t('passwordChange.oldPasswordRequired'), trigger: 'blur' }
     ],
     new_password: [
       { required: true, message: t('passwordChange.newPasswordRequired'), trigger: 'blur' },
-      { min: 8, max: 32, message: t('passwordChange.passwordLength'), trigger: 'blur' }
+      createNewLoginPasswordRule(t('passwordChange.passwordRule'))
     ],
     confirm_password: [
       { required: true, message: t('passwordChange.confirmPasswordRequired'), trigger: 'blur' },
-      { min: 8, max: 32, message: t('passwordChange.passwordLength'), trigger: 'blur' },
+      createNewLoginPasswordRule(t('passwordChange.passwordRule')),
       {
         validator: (_rule, value: string, callback) => {
           if (value && value !== formData.new_password) {
@@ -139,7 +146,7 @@
       })
 
       if (response.code !== 0) {
-        ElMessage.error(response.msg || t('passwordChange.failure'))
+        ElMessage.error(response.msg || response.message || t('passwordChange.failure'))
         return
       }
 
@@ -155,3 +162,11 @@
     }
   }
 </script>
+
+<style scoped lang="scss">
+  :deep(.el-form-item__error) {
+    position: static;
+    width: 100%;
+    line-height: 1.5;
+  }
+</style>