feat: ✨ 个人中心修改密码

src/api/user.ts

@@ -74,10 +74,10 @@ class UserAPI {
    * @param id 用户ID
    * @param password 新密码
    */
-  static updatePassword(id: number, password: string) {
+  static resetPassword(id: number, password: string) {
     return request({
       url: `${USER_BASE_URL}/${id}/password`,
-      method: "patch",
+      method: "put",
       params: { password: password },
     });
   }
@@ -153,6 +153,15 @@ class UserAPI {
       data: data,
     });
   }
+
+  /** 修改个人中心用户密码 */
+  static changePassword(data: PasswordChangeForm) {
+    return request({
+      url: `${USER_BASE_URL}/password`,
+      method: "put",
+      data: data,
+    });
+  }
 }
 
 export default UserAPI;
@@ -292,3 +301,11 @@ export interface UserProfileForm {
   /** 邮箱 */
   email?: string;
 }
+
+/** 修改密码表单 */
+export interface PasswordChangeForm {
+  /** 原密码 */
+  oldPassword?: string;
+  /** 新密码 */
+  newPassword?: string;
+}

src/views/demo/curd/index.vue

@@ -158,7 +158,7 @@ function handleOperatClick(data: IOperatData) {
         ElMessage.warning("密码至少需要6位字符，请重新输入");
         return false;
       }
-      UserAPI.updatePassword(data.row.id, value).then(() => {
+      UserAPI.resetPassword(data.row.id, value).then(() => {
         ElMessage.success("密码重置成功，新密码是：" + value);
       });
     });

src/views/profile/index.vue

@@ -1,21 +1,62 @@
 <template>
-  <div class="profile-page">
-    <el-card>
-      <el-avatar :src="userProfile.avatar" size="large" />
-      <div class="profile-info">
-        <h2>{{ userProfile.username }}</h2>
-        <h2>{{ userProfile.nickname }}</h2>
-        <p>{{ userProfile.email }}</p>
-        <el-button type="primary" @click="goToEdit">编辑个人信息</el-button>
-        <el-button @click="goToChangePassword">修改密码</el-button>
-      </div>
-    </el-card>
+  <div class="app-container">
+    <el-row>
+      <el-col :span="24">
+        <el-card>
+          <el-avatar :src="userProfile.avatar" size="large" />
+
+          <el-form />
+
+          <div class="profile-info">
+            <h2>{{ userProfile.username }}</h2>
+            <h2>{{ userProfile.nickname }}</h2>
+            <p>{{ userProfile.email }}</p>
+            <el-button type="primary" @click="handleOpenDialog">
+              编辑个人信息
+            </el-button>
+            <el-button @click="handleOpenDialog">修改密码</el-button>
+          </div>
+        </el-card>
+      </el-col>
+
+      <el-col :span="24" />
+    </el-row>
+
+    <el-dialog title="修改密码" v-model:visible="dialogVisible">
+      <el-form
+        :model="passwordChangeForm"
+        :rules="passwordChangeRules"
+        ref="passwordChangeForm"
+      >
+        <el-form-item label="原密码" prop="oldPassword">
+          <el-input v-model="passwordChangeForm.oldPassword" show-password />
+        </el-form-item>
+        <el-form-item label="新密码" prop="newPassword">
+          <el-input v-model="passwordChangeForm.newPassword" show-password />
+        </el-form-item>
+        <el-form-item label="确认密码" prop="confirmPassword">
+          <el-input v-model="confirmPassword" show-password />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="dialogVisible = false">取 消</el-button>
+          <el-button type="primary" @click="handleChangePassword">
+            确 定
+          </el-button>
+        </span>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { useRouter } from "vue-router";
-import UserAPI, { UserProfileVO, UserProfileForm } from "@/api/user";
+import UserAPI, {
+  UserProfileVO,
+  UserProfileForm,
+  PasswordChangeForm,
+} from "@/api/user";
 import { useUserStore } from "@/store/modules/user";
 
 const router = useRouter();
@@ -23,12 +64,31 @@ const userStore = useUserStore();
 
 const userProfile = ref<UserProfileVO>({});
 
-const goToEdit = () => {
-  router.push({ name: "ProfileEdit" });
+const passwordChangeForm = ref<PasswordChangeForm>({});
+
+const dialogVisible = ref(false);
+const confirmPassword = ref("");
+
+const passwordChangeRules = {
+  oldPassword: [{ required: true, message: "请输入原密码", trigger: "blur" }],
+  newPassword: [{ required: true, message: "请输入新密码", trigger: "blur" }],
+  confirmPassword: [
+    { required: true, message: "请再次输入新密码", trigger: "blur" },
+  ],
 };
 
-const goToChangePassword = () => {
-  router.push({ name: "ChangePassword" });
+const handleOpenDialog = () => {
+  dialogVisible.value = true;
+};
+
+const handleChangePassword = async () => {
+  const form = passwordChangeForm.value;
+  if (form.newPassword !== confirmPassword.value) {
+    return;
+  }
+
+  await UserAPI.changePassword(form);
+  dialogVisible.value = false;
 };
 
 onMounted(async () => {
@@ -38,12 +98,6 @@ onMounted(async () => {
 </script>
 
 <style scoped>
-.profile-page {
-  display: flex;
-  justify-content: center;
-  padding: 20px;
-}
-
 .profile-info {
   margin-left: 20px;
 }

src/views/system/user/index.vue

@@ -402,7 +402,7 @@ function hancleResetPassword(row: { [key: string]: any }) {
         ElMessage.warning("密码至少需要6位字符，请重新输入");
         return false;
       }
-      UserAPI.updatePassword(row.id, value).then(() => {
+      UserAPI.resetPassword(row.id, value).then(() => {
         ElMessage.success("密码重置成功，新密码是：" + value);
       });
     },