rain/jiapuapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改部分样式

Browse Source
This commit is contained in:
rain
2026-07-27 17:29:58 +08:00
parent 04287e6777
commit 1e9e25fe67
53 changed files with 11562 additions and 2617 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/profile/m04-change-password.vue
+173 -19
View File
@@ -1,21 +1,56 @@
<!-- 页面编号：M-04；用途：修改登录密码。 -->
<template>
<view class="password-page" :class="{ 'password-state--ready': passwordState === 'ready', 'password-state--saving': passwordState === 'saving' }">
<view
class="password-page"
:class="{
'password-state--ready': passwordState === 'ready',
'password-state--saving': passwordState === 'saving',
}"
>
<ModulePageBackground module="profile" />
<view class="page-layer"><PageHeader title="修改密码" custom-back @back="requestBack" /></view>
<view class="page-layer"
><PageHeader title="修改密码" custom-back @back="requestBack"
/></view>
<view class="page-content page-layer">
<view class="security-tip"><text>设置安全密码</text><text>建议使用 8–32 位字母与数字组合，不要与其他应用共用。</text></view>
<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
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>
<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>
<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" />
<AppButton
block
:disabled="passwordState === 'saving'"
:label="passwordState === 'saving' ? '正在提交' : '确认修改密码'"
@click="savePassword"
/>
</view>
<AppToast :visible="toastVisible" :message="toastMessage" />
<AppDialog
@@ -41,7 +76,11 @@ import AppDialog from "@/components/AppDialog.vue";
import AppToast from "@/components/AppToast.vue";
import ModulePageBackground from "@/components/ModulePageBackground.vue";
import PageHeader from "@/components/PageHeader.vue";
import { appApi, createRequestController, isRequestCancelled } from "@/utils/api.js";
import {
appApi,
createRequestController,
isRequestCancelled,
} from "@/utils/api.js";
import { createDiscardConfirmation } from "@/utils/discard-confirmation.js";
import { calcMD5 } from "@/utils/md5.js";
import { handleBackPress, runBackGuard } from "@/utils/navigation.js";
@@ -51,7 +90,11 @@ import {
} from "@/utils/validation.js";
const passwordForm = reactive({ current: "", next: "", confirm: "" });
const passwordVisible = reactive({ current: false, next: false, confirm: false });
const passwordVisible = reactive({
current: false,
next: false,
confirm: false,
});
const errors = reactive({ current: "", next: "", confirm: "" });
const passwordState = ref("ready");
const discardVisible = ref(false);
@@ -60,7 +103,9 @@ const passwordFields = [
{ key: "next", label: "新密码", placeholder: "8–32 位字母与数字" },
{ key: "confirm", label: "确认新密码", placeholder: "请再次输入新密码" },
];
const toastVisible = ref(false); const toastMessage = ref(""); let timer = null;
const toastVisible = ref(false);
const toastMessage = ref("");
let timer = null;
const passwordRequestController = createRequestController();
let pageActive = true;
const formSnapshot = computed(() => JSON.stringify(passwordForm));
@@ -72,25 +117,39 @@ const discardConfirmation = createDiscardConfirmation((visible) => {
const requestDiscardConfirmation = discardConfirmation.request;
const confirmDiscard = discardConfirmation.confirm;
const cancelDiscard = discardConfirmation.cancel;
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 showToast = (message) => {
toastMessage.value = message;
toastVisible.value = true;
clearTimeout(timer);
timer = setTimeout(() => (toastVisible.value = false), 1800);
};
const togglePassword = (key) => {
passwordVisible[key] = !passwordVisible[key];
};
const validateForm = () => {
errors.current = passwordForm.current ? "" : "请输入当前密码";
const nextPassword = validatePassword(passwordForm.next);
errors.next = nextPassword.valid ? "" : PASSWORD_POLICY_MESSAGE;
if (!errors.next && passwordForm.next === passwordForm.current)
errors.next = "新密码不能与当前密码相同";
errors.confirm = !passwordForm.confirm ? "请再次输入新密码" : passwordForm.confirm !== passwordForm.next ? "两次输入的新密码不一致" : "";
errors.confirm = !passwordForm.confirm
? "请再次输入新密码"
: passwordForm.confirm !== passwordForm.next
? "两次输入的新密码不一致"
: "";
return !Object.values(errors).some(Boolean);
};
const savePassword = async () => {
if (!validateForm() || passwordState.value === "saving") return;
passwordState.value = "saving";
try {
await appApi.changePassword({
oldPasswordHash: calcMD5(passwordForm.current),
newPasswordHash: calcMD5(passwordForm.next),
}, { requestController: passwordRequestController });
await appApi.changePassword(
{
oldPasswordHash: calcMD5(passwordForm.current),
newPasswordHash: calcMD5(passwordForm.next),
},
{ requestController: passwordRequestController },
);
if (!pageActive) return;
passwordForm.current = "";
passwordForm.next = "";
@@ -125,5 +184,100 @@ onUnload(() => {
<style scoped lang="scss">
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
.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{@include adaptive.adaptive-profile-content}.security-tip{min-height:170rpx;padding:38rpx 44rpx;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}.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}}
.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 {
@include adaptive.adaptive-profile-content;
}
.security-tip {
min-height: 170rpx;
padding: 38rpx 44rpx;
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;
}
.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, 0.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>