feat:修改密码界面

src/views/userInfo/resetpwd/index.vue

@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import { reactive, computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useFormRules } from '@/hooks/common/form';
+import type { Rule } from 'ant-design-vue/es/form';
+import {
+  Form as AForm,
+  FormItem as AFormItem,
+  Input,
+  Button as AButton,
+  Card as ACard
+} from 'ant-design-vue';
+import { useRouter } from 'vue-router';
+
+const AInputPassword = Input.Password;
+
+const { t } = useI18n();
+const formRef = ref();
+
+interface FormModel {
+  password: string;
+  confirmPassword: string;
+}
+
+const formModel = reactive<FormModel>({
+  password: '',
+  confirmPassword: ''
+});
+
+// 复用注册界面的密码验证规则
+const formRules = computed<Record<string, Rule | Rule[]>>(() => {
+  const { createConfirmPwdRule } = useFormRules();
+
+  return {
+    password: [
+      { required: true, message: t('page.login.register.passwordRequired') },
+      { min: 6, message: t('page.login.register.passwordLength') }
+    ],
+    confirmPassword: createConfirmPwdRule(formModel.password)
+  };
+});
+
+async function handleSubmit() {
+  try {
+    await formRef.value?.validate();
+//
+    window.$message?.success(t('common.success'));
+  } catch (error) {
+    console.error('Form validation failed:', error);
+  }
+}
+
+const router = useRouter();
+
+const handleBack = () => {
+  router.push('/userInfo/usercard');
+};
+</script>
+
+<template>
+  <div class="reset-password-container">
+    <ACard :title="t('page.login.resetPwd.title')" :bordered="false">
+      <template #extra>
+        <AButton @click="handleBack">
+          {{ t('page.login.common.back') }}
+        </AButton>
+      </template>
+      <AForm
+        ref="formRef"
+        :model="formModel"
+        :rules="formRules"
+        :label-col="{ span: 6 }"
+        :wrapper-col="{ span: 18 }"
+      >
+        <AFormItem name="password" :label="t('page.login.register.password')">
+          <AInputPassword
+            v-model:value="formModel.password"
+            :placeholder="t('page.login.common.passwordPlaceholder')"
+          />
+        </AFormItem>
+        <AFormItem name="confirmPassword" :label="t('page.login.register.confirmPassword')">
+          <AInputPassword
+            v-model:value="formModel.confirmPassword"
+            :placeholder="t('page.login.common.confirmPasswordPlaceholder')"
+          />
+        </AFormItem>
+        <AFormItem :wrapper-col="{ span: 24 }">
+          <AButton type="primary" block @click="handleSubmit">
+            {{ t('common.confirm') }}
+          </AButton>
+        </AFormItem>
+      </AForm>
+    </ACard>
+  </div>
+</template>
+
+<style scoped>
+.reset-password-container {
+  max-width: 480px;
+  margin: 0 auto;
+  padding: 24px;
+}
+
+:deep(.ant-card-head-title) {
+  text-align: center;
+}
+
+@media (max-width: 640px) {
+  .reset-password-container {
+    padding: 16px;
+  }
+
+  :deep(.ant-form-item) {
+    margin-bottom: 16px;
+  }
+}
+</style>