feat: 修改密码全局

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

@@ -0,0 +1,151 @@
+<template>
+  <ElDialog
+    v-model="dialogVisible"
+    :title="t('passwordChange.title')"
+    width="min(420px, calc(100vw - 32px))"
+    :close-on-click-modal="false"
+    :close-on-press-escape="!submitting"
+    :show-close="!submitting"
+    @closed="resetForm"
+  >
+    <ElForm
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-position="top"
+      @submit.prevent="handleSubmit"
+    >
+      <ElFormItem prop="old_password" :label="t('passwordChange.oldPassword')">
+        <ElInput
+          v-model="formData.old_password"
+          type="password"
+          autocomplete="current-password"
+          show-password
+          :disabled="submitting"
+        />
+      </ElFormItem>
+      <ElFormItem prop="new_password" :label="t('passwordChange.newPassword')">
+        <ElInput
+          v-model="formData.new_password"
+          type="password"
+          autocomplete="new-password"
+          show-password
+          :disabled="submitting"
+        />
+      </ElFormItem>
+      <ElFormItem prop="confirm_password" :label="t('passwordChange.confirmPassword')">
+        <ElInput
+          v-model="formData.confirm_password"
+          type="password"
+          autocomplete="new-password"
+          show-password
+          :disabled="submitting"
+          @keyup.enter="handleSubmit"
+        />
+      </ElFormItem>
+    </ElForm>
+
+    <template #footer>
+      <ElButton :disabled="submitting" @click="dialogVisible = false">
+        {{ t('common.cancel') }}
+      </ElButton>
+      <ElButton type="primary" :loading="submitting" @click="handleSubmit">
+        {{ t('passwordChange.submit') }}
+      </ElButton>
+    </template>
+  </ElDialog>
+</template>
+
+<script setup lang="ts">
+  import { computed, reactive, ref } from 'vue'
+  import { 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'
+
+  defineOptions({ name: 'ChangePasswordDialog' })
+
+  const props = defineProps<{ modelValue: boolean }>()
+  const emit = defineEmits<{ 'update:modelValue': [value: boolean] }>()
+
+  const { t } = useI18n()
+  const userStore = useUserStore()
+  const dialogVisible = computed({
+    get: () => props.modelValue,
+    set: (value: boolean) => emit('update:modelValue', value)
+  })
+
+  const formRef = ref<FormInstance>()
+  const submitting = ref(false)
+  const formData = reactive({
+    old_password: '',
+    new_password: '',
+    confirm_password: ''
+  })
+
+  const formRules = computed<FormRules>(() => ({
+    old_password: [
+      { required: true, message: t('passwordChange.oldPasswordRequired'), trigger: 'blur' }
+    ],
+    new_password: [
+      { required: true, message: t('passwordChange.newPasswordRequired'), trigger: 'blur' }
+    ],
+    confirm_password: [
+      { required: true, message: t('passwordChange.confirmPasswordRequired'), trigger: 'blur' },
+      {
+        validator: (_rule, value: string, callback) => {
+          if (value && value !== formData.new_password) {
+            callback(new Error(t('passwordChange.passwordMismatch')))
+            return
+          }
+          callback()
+        },
+        trigger: 'blur'
+      }
+    ]
+  }))
+
+  const resetForm = () => {
+    formData.old_password = ''
+    formData.new_password = ''
+    formData.confirm_password = ''
+    formRef.value?.clearValidate()
+  }
+
+  const handleSubmit = async () => {
+    if (!formRef.value || submitting.value) return
+
+    try {
+      await formRef.value.validate()
+    } catch {
+      return
+    }
+
+    if (submitting.value) return
+
+    submitting.value = true
+    try {
+      const response = await AuthService.changePassword({
+        old_password: formData.old_password,
+        new_password: formData.new_password
+      })
+
+      if (response.code !== 0) {
+        ElMessage.error(response.msg || t('passwordChange.failure'))
+        return
+      }
+
+      ElMessage.success(t('passwordChange.success'))
+      resetForm()
+      dialogVisible.value = false
+      userStore.clearLocalState()
+    } catch (error) {
+      const normalized = normalizeApiError(error)
+      ElMessage.error(normalized.message || t('passwordChange.failure'))
+    } finally {
+      submitting.value = false
+    }
+  }
+</script>

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

@@ -158,6 +158,12 @@
                     <i class="menu-icon iconfont-sys">&#xe734;</i>
                     <span class="menu-txt">{{ $t('topBar.user.userCenter') }}</span>
                   </li>
+                  <li>
+                    <button class="user-menu-action" type="button" @click="openChangePassword">
+                      <el-icon class="menu-icon"><Key /></el-icon>
+                      <span class="menu-txt">{{ $t('topBar.user.changePassword') }}</span>
+                    </button>
+                  </li>
                   <li @click="lockScreen()">
                     <i class="menu-icon iconfont-sys">&#xe817;</i>
                     <span class="menu-txt">{{ $t('topBar.user.lockScreen') }}</span>
@@ -175,12 +181,15 @@
     </div>
     <ArtWorkTab />
 
+    <ChangePasswordDialog v-model="changePasswordDialogVisible" />
     <art-notification v-model="showNotice" />
   </div>
 </template>
 
 <script setup lang="ts">
   import { onBeforeUnmount, onMounted } from 'vue'
+  import { Key } from '@element-plus/icons-vue'
+  import ChangePasswordDialog from './ChangePasswordDialog.vue'
   import { MenuTypeEnum, MenuWidth } from '@/enums/appEnum'
   import { useSettingStore } from '@/store/modules/setting'
   import { useUserStore } from '@/store/modules/user'
@@ -217,6 +226,7 @@
   const { menuList } = storeToRefs(useMenuStore())
 
   const showNotice = ref(false)
+  const changePasswordDialogVisible = ref(false)
   const userMenuPopover = ref()
 
   const isLeftMenu = computed(() => menuType.value === MenuTypeEnum.LEFT)
@@ -348,6 +358,13 @@
     mittBus.emit('openLockScreen')
   }
 
+  const openChangePassword = () => {
+    closeUserMenu()
+    window.setTimeout(() => {
+      changePasswordDialogVisible.value = true
+    }, 100)
+  }
+
   const closeUserMenu = () => {
     setTimeout(() => {
       userMenuPopover.value.hide()

src/components/core/layouts/art-header-bar/style.scss

@@ -88,6 +88,23 @@
         }
       }
 
+      .user-menu-action {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        padding: 0;
+        margin: 0;
+        text-align: left;
+        cursor: pointer;
+        background: transparent;
+        border: 0;
+
+        &:focus-visible {
+          outline: 2px solid var(--el-color-primary);
+          outline-offset: 2px;
+        }
+      }
+
       .line {
         width: 100%;
         height: 1px;