新增：新增修改密码功能，并优化部分以往代码

2025-09-10 19:00:53 +08:00 · 2023-01-10 23:25:58 +08:00
parent 519124a3c7
commit a08fd7773e
14 changed files with 331 additions and 12 deletions
--- a/continew-admin-ui/src/api/system/user-center.ts
+++ b/continew-admin-ui/src/api/system/user-center.ts
@@ -19,4 +19,12 @@ export interface UpdateBasicInfoReq {
 }
 export function updateBasicInfo(req: UpdateBasicInfoReq) {
  return axios.patch('/system/user/center/basic/info', req);
+}
+
+export interface UpdatePasswordReq {
+  oldPassword: string;
+  newPassword: string;
+}
+export function updatePassword(req: UpdatePasswordReq) {
+  return axios.patch('/system/user/center/password', req);
 }
--- a/continew-admin-ui/src/views/login/components/login-form.vue
+++ b/continew-admin-ui/src/views/login/components/login-form.vue
@@ -105,9 +105,9 @@
  const loginConfig = useStorage('login-config', {
    rememberMe: true,
    username: 'admin', // 演示默认值
-    password: '123456', // 演示默认值
+    password: 'admin123', // 演示默认值
    // username: !debug ? '' : 'admin', // 演示默认值
-    // password: !debug ? '' : '123456', // 演示默认值
+    // password: !debug ? '' : 'admin123', // 演示默认值
  });

  const loginForm = reactive({
--- a/continew-admin-ui/src/views/system/user/center/components/basic-information.vue
+++ b/continew-admin-ui/src/views/system/user/center/components/basic-information.vue
@@ -19,6 +19,7 @@
      <a-input
        v-model="formData.username"
        :placeholder="$t('userCenter.basicInfo.placeholder.username')"
+        size="large"
        max-length="50"
      />
    </a-form-item>
@@ -35,6 +36,7 @@
      <a-input
        v-model="formData.nickname"
        :placeholder="$t('userCenter.basicInfo.placeholder.nickname')"
+        size="large"
        max-length="32"
      />
    </a-form-item>
--- a/continew-admin-ui/src/views/system/user/center/components/security-settings.vue
+++ b/continew-admin-ui/src/views/system/user/center/components/security-settings.vue
@@ -1,10 +1,85 @@
 <template>
+  <a-modal v-model:visible="updatePasswordVisible" :title="$t('userCenter.SecuritySettings.form.password.modal.title')" @cancel="handleCancelUpdatePassword" @before-ok="handleBeforeOkUpdatePassword">
+    <a-form
+      ref="formPasswordRef"
+      :model="formPasswordData"
+    >
+      <a-form-item
+        field="oldPassword"
+        :rules="{ required: true, message: $t('userCenter.SecuritySettings.form.password.oldPassword.placeholder') }"
+        :validate-trigger="['change', 'blur']"
+        :label="$t('userCenter.SecuritySettings.form.password.oldPassword.label')"
+      >
+        <a-input-password
+          v-model="formPasswordData.oldPassword"
+          :placeholder="$t('userCenter.SecuritySettings.form.password.oldPassword.placeholder')"
+          size="large"
+          allow-clear
+          max-length="50"
+        >
+        </a-input-password>
+      </a-form-item>
+      <a-form-item
+        field="newPassword"
+        :rules="[
+          {
+            required: true,
+            message: $t('userCenter.SecuritySettings.form.password.error.newPassword.required'),
+          },
+          {
+            match: /^(?=.*\d)(?=.*[a-z]).{6,32}$/,
+            message: $t('userCenter.SecuritySettings.form.password.newPassword.placeholder')
+          }
+        ]"
+        :validate-trigger="['change', 'blur']"
+        :label="$t('userCenter.SecuritySettings.form.password.newPassword.label')"
+      >
+        <a-input-password
+          v-model="formPasswordData.newPassword"
+          :placeholder="$t('userCenter.SecuritySettings.form.password.newPassword.placeholder')"
+          size="large"
+          allow-clear
+          max-length="50"
+        >
+        </a-input-password>
+      </a-form-item>
+      <a-form-item
+        field="rePassword"
+        :rules="[
+          {
+            required: true,
+            message: $t('userCenter.SecuritySettings.form.password.rePassword.placeholder'),
+          },
+          {
+            validator: (value, callback) => {
+              if (value !== formPasswordData.newPassword) {
+                callback($t('userCenter.SecuritySettings.form.password.error.rePassword.notequal'))
+              } else {
+                callback()
+              }
+            }
+          }
+        ]"
+        :validate-trigger="['change', 'blur']"
+        :label="$t('userCenter.SecuritySettings.form.password.rePassword.label')"
+      >
+        <a-input-password
+          v-model="formPasswordData.rePassword"
+          :placeholder="$t('userCenter.SecuritySettings.form.password.rePassword.placeholder')"
+          size="large"
+          allow-clear
+          max-length="50"
+        >
+        </a-input-password>
+      </a-form-item>
+    </a-form>
+  </a-modal>
  <a-list :bordered="false">
    <a-list-item>
      <a-list-item-meta>
        <template #avatar>
          <a-typography-paragraph>
-            {{ $t('userCenter.SecuritySettings.form.label.password') }}
+            {{ $t('userCenter.SecuritySettings.label.password') }}
          </a-typography-paragraph>
        </template>
        <template #description>
@@ -17,7 +92,7 @@
            </a-typography-paragraph>
          </div>
          <div class="operation">
-            <a-link>
+            <a-link @click="handleClickUpdatePassword">
              {{ $t('userCenter.SecuritySettings.button.update') }}
            </a-link>
          </div>
@@ -76,9 +151,49 @@
 </template>

 <script lang="ts" setup>
+  import { reactive, ref } from 'vue';
  import { useLoginStore } from '@/store';
+  import { FormInstance } from "@arco-design/web-vue/es/form";
+  import useLoading from "@/hooks/loading";
+  import { updatePassword } from "@/api/system/user-center";
+  import { Message } from "@arco-design/web-vue";
+  import { encryptByRsa } from "@/utils/encrypt";

+  const { loading, setLoading } = useLoading();
  const loginStore = useLoginStore();
+  const formPasswordRef = ref<FormInstance>();
+  const updatePasswordVisible = ref(false);
+  const formPasswordData = reactive({
+    oldPassword: '',
+    newPassword: '',
+    rePassword: '',
+  });
+
+  const handleClickUpdatePassword = () => {
+    updatePasswordVisible.value = true;
+  };
+
+  const handleBeforeOkUpdatePassword = async () => {
+    const errors = await formPasswordRef.value?.validate();
+    if (loading.value) return false;
+    if (errors) return false;
+    setLoading(true);
+    try {
+      const res = await updatePassword({
+        oldPassword: encryptByRsa(formPasswordData.oldPassword) || '',
+        newPassword: encryptByRsa(formPasswordData.newPassword) || '',
+      });
+      if (res.success) Message.success(res.msg);
+    } finally {
+      setLoading(false);
+    }
+    return true;
+  };
+
+  const handleCancelUpdatePassword = () => {
+    updatePasswordVisible.value = false;
+    formPasswordRef.value?.resetFields()
+  };
 </script>

 <style scoped lang="less">
--- a/continew-admin-ui/src/views/system/user/center/locale/en-US.ts
+++ b/continew-admin-ui/src/views/system/user/center/locale/en-US.ts
@@ -18,9 +18,19 @@ export default {
  'userCenter.reset': 'Reset',

  'userCenter.tab.securitySettings': 'Security Settings',
-  'userCenter.SecuritySettings.form.label.password': 'Login Password',
+  'userCenter.SecuritySettings.label.password': 'Login Password',
  'userCenter.SecuritySettings.placeholder.password':
    'You have not set a password yet. The password must contain at least six letters, digits, and special characters except Spaces.',
+  'userCenter.SecuritySettings.form.password.modal.title': 'Update login password',
+  'userCenter.SecuritySettings.form.password.oldPassword.label': 'Old password',
+  'userCenter.SecuritySettings.form.password.oldPassword.placeholder': 'Please enter old password',
+  'userCenter.SecuritySettings.form.password.newPassword.label': 'New password',
+  'userCenter.SecuritySettings.form.password.error.newPassword.required': 'Please enter new password',
+  'userCenter.SecuritySettings.form.password.newPassword.placeholder': 'Password contains 6 to 32 digits and letters',
+  'userCenter.SecuritySettings.form.password.rePassword.label': 'Confirm password',
+  'userCenter.SecuritySettings.form.password.rePassword.placeholder': 'Please enter new password again',
+  'userCenter.SecuritySettings.form.password.error.rePassword.notequal': 'Two passwords are different',
+
  'userCenter.SecuritySettings.form.label.phone': 'Phone',
  'userCenter.SecuritySettings.placeholder.phone':
    'You have not set a phone yet. The phone binding can be used to retrieve passwords and receive notifications and SMS login.',
--- a/continew-admin-ui/src/views/system/user/center/locale/zh-CN.ts
+++ b/continew-admin-ui/src/views/system/user/center/locale/zh-CN.ts
@@ -18,9 +18,19 @@ export default {
  'userCenter.reset': '重置',

  'userCenter.tab.securitySettings': '安全设置',
-  'userCenter.SecuritySettings.form.label.password': '登录密码',
+  'userCenter.SecuritySettings.label.password': '登录密码',
  'userCenter.SecuritySettings.placeholder.password':
    '您暂未设置密码，密码至少6位字符，支持数字、字母和除空格外的特殊字符。',
+  'userCenter.SecuritySettings.form.password.modal.title': '修改登录密码',
+  'userCenter.SecuritySettings.form.password.oldPassword.label': '当前密码',
+  'userCenter.SecuritySettings.form.password.oldPassword.placeholder': '请输入当前密码',
+  'userCenter.SecuritySettings.form.password.newPassword.label': '新密码',
+  'userCenter.SecuritySettings.form.password.error.newPassword.required': '请输入新密码',
+  'userCenter.SecuritySettings.form.password.newPassword.placeholder': '密码长度6到32位，同时包含数字和字母',
+  'userCenter.SecuritySettings.form.password.rePassword.label': '确认新密码',
+  'userCenter.SecuritySettings.form.password.rePassword.placeholder': '请再次输入新密码',
+  'userCenter.SecuritySettings.form.password.error.rePassword.notequal': '两次输入的密码不一致',
+
  'userCenter.SecuritySettings.form.label.phone': '安全手机',
  'userCenter.SecuritySettings.placeholder.phone':
    '您暂未设置手机号，绑定手机号可以用来找回密码、接收通知、短信登录等。',