修改完成

2026-07-21 07:53:03 +08:00
parent 01d246c47b
commit ff60119277
172 changed files with 7982 additions and 2999 deletions
@@ -1,5 +1,59 @@
-<!-- 页面编号：M-04；用途：修改密码。 -->
-<template><ModulePage page-id="m04" /></template>
+<!-- 页面编号：M-04；用途：修改登录密码。 -->
+<template>
+  <view class="password-page" :class="{ 'password-state--ready': passwordState === 'ready', 'password-state--saving': passwordState === 'saving' }">
+    <ModulePageBackground module="profile" />
+    <view class="page-layer"><PageHeader title="修改密码" /></view>
+    <view class="page-content page-layer">
+      <view class="security-tip"><text>设置安全密码</text><text>建议使用 8–32 位字母与数字组合，不要与其他应用共用。</text></view>
+      <view class="form-panel">
+        <view v-for="field in passwordFields" :key="field.key" class="field-block">
+          <view class="form-row">
+            <text>{{ field.label }}</text>
+            <input v-model="passwordForm[field.key]" :password="!passwordVisible[field.key]" maxlength="32" :aria-label="field.label" :placeholder="field.placeholder" @input="errors[field.key] = ''" />
+            <view class="password-toggle" role="button" :aria-label="`${passwordVisible[field.key] ? '隐藏' : '显示'}${field.label}`" @click="togglePassword(field.key)">{{ passwordVisible[field.key] ? "隐藏" : "显示" }}</view>
+          </view>
+          <text v-if="errors[field.key]" class="field-error">{{ errors[field.key] }}</text>
+        </view>
+      </view>
+      <AppButton block :disabled="passwordState === 'saving'" :label="passwordState === 'saving' ? '正在修改' : '确认修改'" @click="savePassword" />
+    </view>
+    <AppToast :visible="toastVisible" :message="toastMessage" />
+  </view>
+</template>
+
 <script setup>
-import ModulePage from "@/components/ModulePage.vue";
+import { onUnmounted, reactive, ref } from "vue";
+import AppButton from "@/components/AppButton.vue";
+import AppToast from "@/components/AppToast.vue";
+import ModulePageBackground from "@/components/ModulePageBackground.vue";
+import PageHeader from "@/components/PageHeader.vue";
+
+const passwordForm = reactive({ current: "", next: "", confirm: "" });
+const passwordVisible = reactive({ current: false, next: false, confirm: false });
+const errors = reactive({ current: "", next: "", confirm: "" });
+const passwordState = ref("ready");
+const passwordFields = [
+  { key: "current", label: "当前密码", placeholder: "请输入当前密码" },
+  { key: "next", label: "新密码", placeholder: "8–32 位字母与数字" },
+  { key: "confirm", label: "确认新密码", placeholder: "请再次输入新密码" },
+];
+const toastVisible = ref(false); const toastMessage = ref(""); let timer = null;
+const showToast = (message) => { toastMessage.value = message; toastVisible.value = true; clearTimeout(timer); timer = setTimeout(() => (toastVisible.value = false), 1800); };
+const togglePassword = (key) => { passwordVisible[key] = !passwordVisible[key]; };
+const validatePassword = () => {
+  errors.current = passwordForm.current ? "" : "请输入当前密码";
+  errors.next = /^(?=.*[A-Za-z])(?=.*\d).{8,32}$/.test(passwordForm.next) ? "" : "新密码需为 8–32 位，并同时包含字母和数字";
+  errors.confirm = !passwordForm.confirm ? "请再次输入新密码" : passwordForm.confirm !== passwordForm.next ? "两次输入的新密码不一致" : "";
+  return !Object.values(errors).some(Boolean);
+};
+const savePassword = () => {
+  if (!validatePassword() || passwordState.value === "saving") return;
+  passwordState.value = "saving";
+  timer = setTimeout(() => { passwordState.value = "ready"; passwordForm.current = ""; passwordForm.next = ""; passwordForm.confirm = ""; showToast("密码已修改，请妥善保管新密码"); }, 500);
+};
+onUnmounted(() => clearTimeout(timer));
 </script>
+
+<style scoped lang="scss">
+.password-page{display:flex;min-height:100vh;flex-direction:column;background:$paper}.page-layer{z-index:1}.page-content{flex:1;padding:28rpx 30rpx 72rpx}.security-tip,.form-panel{background:url("/static/assets/modules/profile/transparent/module-content-frame.png") center/100% 100% no-repeat}.security-tip{min-height:170rpx;padding:38rpx 44rpx;box-sizing:border-box;text-align:center}.security-tip text{display:block}.security-tip text:first-child{color:$ink;font-size:32rpx;font-weight:700}.security-tip text:last-child{margin-top:10rpx;color:$ink-muted;font-size:22rpx;line-height:1.55}.form-panel{margin-top:20rpx;padding:22rpx 34rpx 30rpx;box-sizing:border-box}.field-block+.field-block{margin-top:6rpx}.form-row{display:grid;grid-template-columns:142rpx minmax(0,1fr) 74rpx;min-height:92rpx;align-items:center;gap:12rpx;border-bottom:1px solid rgba(181,137,63,.42)}.form-row>text{color:$ink;font-size:23rpx;font-weight:700}.form-row input{width:auto;min-width:0;min-height:68rpx;color:$ink;font-size:23rpx}.password-toggle{display:flex;min-height:68rpx;align-items:center;justify-content:flex-end;color:$brand-red;font-size:21rpx}.field-error{display:block;padding-top:7rpx;color:#b42318;font-size:20rpx;line-height:1.4;text-align:right}.page-content>.app-button{margin-top:28rpx}@media(max-width:340px){.page-content{padding-right:22rpx;padding-left:22rpx}.form-panel{padding-right:26rpx;padding-left:26rpx}.form-row{grid-template-columns:120rpx minmax(0,1fr) 64rpx;gap:8rpx}}
+</style>