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/auth/a01-entry.vue
+229 -204
View File
@@ -1,212 +1,242 @@
<!-- 页面编号：A-01；用途：APP 唯一登录入口，承载密码与验证码登录。 -->
<template>
<AuthPageShell class="auth-page login-page">
<view class="login-content">
<view class="login-heading">
<text class="login-title">登录家谱</text>
<image
class="title-divider"
src="/static/assets/modules/auth/transparent/a01-vnext-divider-v1.png"
mode="aspectFit"
/>
</view>
<view class="login-tabs" role="tablist" aria-label="登录方式">
<button
class="auth-plain-button login-tab"
role="tab"
:aria-selected="activeLoginMethod === 'password'"
:class="{ active: activeLoginMethod === 'password' }"
:disabled="submitting || sendingCode || tacVisible"
hover-class="tap-fade"
@click="switchLoginMethod('password')"
>密码登录</button
>
<button
class="auth-plain-button login-tab"
role="tab"
:aria-selected="activeLoginMethod === 'sms'"
:class="{ active: activeLoginMethod === 'sms' }"
:disabled="submitting || sendingCode || tacVisible"
hover-class="tap-fade"
@click="switchLoginMethod('sms')"
>验证码登录</button
>
</view>
<view class="form-content">
<view class="input-row input-row--required">
<image
class="input-icon"
src="/static/assets/modules/auth/transparent/a01-icon-phone-v1.png"
mode="aspectFit"
/>
<input
v-model.trim="phone"
class="auth-input"
type="number"
maxlength="11"
:disabled="sendingCode || submitting || tacVisible || authenticationCommitted || (cooldownSeconds > 0 && phone.length > 0)"
placeholder="手机号"
aria-label="手机号"
placeholder-class="input-placeholder"
confirm-type="next"
@input="handlePhoneInput"
/>
</view>
<view v-if="activeLoginMethod === 'password'" class="input-row input-row--required">
<image
class="input-icon"
src="/static/assets/modules/auth/transparent/a01-icon-lock-v1.png"
mode="aspectFit"
/>
<input
v-model="password"
class="auth-input"
:password="!passwordVisible"
maxlength="32"
:disabled="submitting || tacVisible"
placeholder="密码"
aria-label="登录密码"
placeholder-class="input-placeholder"
confirm-type="done"
@confirm="submitLogin"
/>
<button
class="auth-plain-button password-toggle"
:aria-label="passwordVisible ? '隐藏密码' : '显示密码'"
:aria-pressed="passwordVisible"
:disabled="submitting || tacVisible"
hover-class="tap-fade"
@click="togglePasswordVisibility"
>
<image
class="password-toggle__icon"
:src="
passwordVisible
? '/static/assets/modules/auth/transparent/a01-icon-eye-open-v1.png'
: '/static/assets/modules/auth/transparent/a01-icon-eye-closed-pupil-v2.png'
"
mode="aspectFit"
aria-hidden="true"
/>
</button>
</view>
<view v-else class="input-row input-row--required">
<image
class="input-icon input-icon--sms"
src="/static/assets/modules/auth/transparent/a01-icon-sms-code-v2.png"
mode="aspectFit"
/>
<input
v-model.trim="verificationCode"
class="auth-input"
type="number"
maxlength="4"
:disabled="submitting"
placeholder="短信验证码"
aria-label="短信验证码"
placeholder-class="input-placeholder"
confirm-type="done"
@confirm="submitLogin"
/>
<button
class="auth-plain-button get-code"
:class="{ 'get-code--disabled': sendingCode || cooldownSeconds > 0 }"
:disabled="sendingCode || submitting || cooldownSeconds > 0"
hover-class="tap-fade"
@click="prepareGetCode"
>{{ sendingCode ? "请求中…" : cooldownSeconds > 0 ? `${cooldownSeconds}s 后重发` : "获取验证码" }}</button
>
</view>
<view class="form-secondary-row">
<button
class="auth-plain-button forgot-password"
hover-class="tap-fade"
@click="prepareForgotPassword"
>忘记密码</button
>
</view>
</view>
<view class="login-content">
<view class="login-heading">
<text class="login-title">登录家谱</text>
<image
class="title-divider"
src="/static/assets/modules/auth/transparent/a01-vnext-divider-v1.png"
mode="aspectFit"
/>
</view>
<view class="login-tabs" role="tablist" aria-label="登录方式">
<button
class="auth-plain-button login-submit"
class="auth-plain-button login-tab"
role="tab"
:aria-selected="activeLoginMethod === 'password'"
:class="{ active: activeLoginMethod === 'password' }"
:disabled="submitting || sendingCode || tacVisible"
:aria-busy="submitting"
hover-class="button-pressed"
@click="submitLogin"
hover-class="tap-fade"
@click="switchLoginMethod('password')"
>
密码登录
</button>
<button
class="auth-plain-button login-tab"
role="tab"
:aria-selected="activeLoginMethod === 'sms'"
:class="{ active: activeLoginMethod === 'sms' }"
:disabled="submitting || sendingCode || tacVisible"
hover-class="tap-fade"
@click="switchLoginMethod('sms')"
>
验证码登录
</button>
</view>
<view class="form-content">
<view class="input-row input-row--required">
<image
class="button-skin"
src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png"
class="input-icon"
src="/static/assets/modules/auth/transparent/a01-icon-phone-v1.png"
mode="aspectFit"
/>
<text class="login-submit__copy">{{
submitting
? authenticationCommitted
? "正在进入…"
: "登录中…"
: authenticationCommitted
? "进入家谱"
: "登录"
}}</text>
</button>
<view class="register-entry">
<text>还没有账号？</text>
<button
class="auth-plain-button register-link"
:disabled="submitting || sendingCode || tacVisible"
hover-class="tap-fade"
@click="prepareRegister"
>注册账号</button
>
<input
v-model.trim="phone"
class="auth-input"
type="number"
maxlength="11"
:disabled="
sendingCode ||
submitting ||
tacVisible ||
authenticationCommitted ||
(cooldownSeconds > 0 && phone.length > 0)
"
placeholder="手机号"
aria-label="手机号"
placeholder-class="input-placeholder"
confirm-type="next"
@input="handlePhoneInput"
/>
</view>
<view
class="agreement-area"
:class="{ 'agreement-area--error': agreementError }"
v-if="activeLoginMethod === 'password'"
class="input-row input-row--required"
>
<view class="agreement-row">
<button
class="auth-plain-button agreement-toggle"
role="checkbox"
:aria-checked="agreed"
:aria-label="agreed ? '取消同意用户协议与隐私政策' : '同意用户协议与隐私政策'"
:disabled="submitting || sendingCode || tacVisible"
@click="toggleAgreement"
>
<image
class="agreement-icon"
:src="
agreed
? '/static/assets/modules/auth/transparent/a02-agreement-checked.png'
: '/static/assets/modules/auth/transparent/a02-agreement-unchecked.png'
"
mode="aspectFit"
aria-hidden="true"
/>
</button>
<view class="agreement-copy">
<text>我已阅读并同意</text>
<button class="auth-plain-button agreement-link" @click="prepareAgreement"
>《用户协议》</button
>
<text>与</text>
<button class="auth-plain-button agreement-link" @click="prepareAgreement"
>《隐私政策》</button
>
</view>
</view>
<text v-if="agreementError" class="agreement-error" role="alert"
>请先阅读并同意用户协议与隐私政策</text
<image
class="input-icon"
src="/static/assets/modules/auth/transparent/a01-icon-lock-v1.png"
mode="aspectFit"
/>
<input
v-model="password"
class="auth-input"
:password="!passwordVisible"
maxlength="32"
:disabled="submitting || tacVisible"
placeholder="密码"
aria-label="登录密码"
placeholder-class="input-placeholder"
confirm-type="done"
@confirm="submitLogin"
/>
<button
class="auth-plain-button password-toggle"
:aria-label="passwordVisible ? '隐藏密码' : '显示密码'"
:aria-pressed="passwordVisible"
:disabled="submitting || tacVisible"
hover-class="tap-fade"
@click="togglePasswordVisibility"
>
<image
class="password-toggle__icon"
:src="
passwordVisible
? '/static/assets/modules/auth/transparent/a01-icon-eye-open-v1.png'
: '/static/assets/modules/auth/transparent/a01-icon-eye-closed-pupil-v2.png'
"
mode="aspectFit"
aria-hidden="true"
/>
</button>
</view>
<view v-else class="input-row input-row--required">
<image
class="input-icon input-icon--sms"
src="/static/assets/modules/auth/transparent/a01-icon-sms-code-v2.png"
mode="aspectFit"
/>
<input
v-model.trim="verificationCode"
class="auth-input"
type="number"
maxlength="4"
:disabled="submitting"
placeholder="短信验证码"
aria-label="短信验证码"
placeholder-class="input-placeholder"
confirm-type="done"
@confirm="submitLogin"
/>
<button
class="auth-plain-button get-code"
:class="{
'get-code--disabled': sendingCode || cooldownSeconds > 0,
}"
:disabled="sendingCode || submitting || cooldownSeconds > 0"
hover-class="tap-fade"
@click="prepareGetCode"
>
{{
sendingCode
? "请求中…"
: cooldownSeconds > 0
? `${cooldownSeconds}s 后重发`
: "获取验证码"
}}
</button>
</view>
<view class="form-secondary-row">
<button
class="auth-plain-button forgot-password"
hover-class="tap-fade"
@click="prepareForgotPassword"
>
忘记密码
</button>
</view>
</view>
<button
class="auth-plain-button login-submit"
:disabled="submitting || sendingCode || tacVisible"
:aria-busy="submitting"
hover-class="button-pressed"
@click="submitLogin"
>
<image
class="button-skin"
src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png"
mode="aspectFit"
/>
<text class="login-submit__copy">{{
submitting
? authenticationCommitted
? "正在进入…"
: "登录中…"
: authenticationCommitted
? "进入家谱"
: "登录"
}}</text>
</button>
<view class="register-entry">
<text>还没有账号？</text>
<button
class="auth-plain-button register-link"
:disabled="submitting || sendingCode || tacVisible"
hover-class="tap-fade"
@click="prepareRegister"
>
注册账号
</button>
</view>
<view
class="agreement-area"
:class="{ 'agreement-area--error': agreementError }"
>
<view class="agreement-row">
<button
class="auth-plain-button agreement-toggle"
role="checkbox"
:aria-checked="agreed"
:aria-label="
agreed ? '取消同意用户协议与隐私政策' : '同意用户协议与隐私政策'
"
:disabled="submitting || sendingCode || tacVisible"
@click="toggleAgreement"
>
<image
class="agreement-icon"
:src="
agreed
? '/static/assets/modules/auth/transparent/a02-agreement-checked.png'
: '/static/assets/modules/auth/transparent/a02-agreement-unchecked.png'
"
mode="aspectFit"
aria-hidden="true"
/>
</button>
<view class="agreement-copy">
<text>我已阅读并同意</text>
<button
class="auth-plain-button agreement-link"
@click="prepareAgreement"
>
《用户协议》
</button>
<text>与</text>
<button
class="auth-plain-button agreement-link"
@click="prepareAgreement"
>
《隐私政策》
</button>
</view>
</view>
<text v-if="agreementError" class="agreement-error" role="alert"
>请先阅读并同意用户协议与隐私政策</text
>
</view>
</view>
<template #overlay>
<TacVerification
:visible="tacVisible"
@@ -338,7 +368,8 @@ const blockBusyAction = () => {
const switchLoginMethod = (method) => {
if (blockBusyAction()) return;
if (method === "password" || method === "sms") activeLoginMethod.value = method;
if (method === "password" || method === "sms")
activeLoginMethod.value = method;
};
const togglePasswordVisibility = () => {
@@ -414,7 +445,8 @@ const prepareGetCode = async () => {
{ requestController: authRequestController },
);
if (!pageActive) return;
if (phone.value !== requestedPhone) throw new Error("手机号已变化，请重新获取验证码");
if (phone.value !== requestedPhone)
throw new Error("手机号已变化，请重新获取验证码");
const requirement = normalizeCaptchaRequirement(response);
if (!requirement.required) {
await appApi.sendSmsCode(
@@ -507,7 +539,8 @@ const completeTac = async (result) => {
if (!expectedContext || !action) return;
try {
const ticket = normalizeTacSuccess(result, expectedContext.requestId);
if (phone.value !== expectedContext.subject) throw new Error("手机号已变化，请重新验证");
if (phone.value !== expectedContext.subject)
throw new Error("手机号已变化，请重新验证");
if (action.kind === "password-login") {
if (
phone.value !== action.phone ||
@@ -554,10 +587,7 @@ const completeTac = async (result) => {
} catch (error) {
closeTac();
if (pageActive) {
if (
action?.kind === "sms-code" &&
isSmsDeliveryOutcomeUnknown(error)
) {
if (action?.kind === "sms-code" && isSmsDeliveryOutcomeUnknown(error)) {
sentPhone.value = expectedContext.subject;
smsCooldown.start();
showFeedback("发送结果未知，如收到短信可直接填写；60 秒后可重试");
@@ -594,10 +624,7 @@ const submitLogin = async () => {
showFeedback("请输入密码");
return;
}
if (
activeLoginMethod.value === "sms" &&
sentPhone.value !== phone.value
) {
if (activeLoginMethod.value === "sms" && sentPhone.value !== phone.value) {
showFeedback("请先获取当前手机号的验证码");
return;
}
@@ -646,7 +673,6 @@ const prepareAgreement = () => showFeedback("协议页面准备中");
</script>
<style scoped lang="scss">
.login-content {
display: flex;
flex: 1;
@@ -930,5 +956,4 @@ const prepareAgreement = () => showFeedback("协议页面准备中");
.button-pressed {
opacity: 0.82;
}
</style>
pages/auth/a04-register.vue
+288 -219
View File
@@ -1,229 +1,296 @@
<!-- 页面编号：A-04；用途：注册账号与本页服务协议确认。 -->
<template>
<AuthPageShell class="auth-page register-page">
<view class="register-content">
<view class="page-heading">
<view class="register-content">
<view class="page-heading">
<button
class="auth-plain-button back-button"
aria-label="返回登录"
hover-class="tap-fade"
@click="requestBack"
>
<image
class="back-button__icon"
src="/static/assets/foundation/transparent/chevron-right.png"
mode="aspectFit"
aria-hidden="true"
/>
</button>
<text class="page-title">注册账号</text>
<text class="page-subtitle">创建属于你的家谱账号</text>
<image
class="register-divider"
src="/static/assets/modules/auth/transparent/a01-vnext-divider-v1.png"
mode="aspectFit"
/>
</view>
<view class="form-content">
<view
class="field-block"
:class="{ 'field-block--error': fieldErrors.phone }"
>
<view class="input-row">
<label class="input-label" for="a04-phone"
><text class="required-mark">*</text>手机号</label
>
<input
id="a04-phone"
v-model.trim="phone"
class="auth-input"
type="number"
maxlength="11"
:disabled="
sendingCode ||
submitting ||
tacVisible ||
registrationCommitted ||
(cooldownSeconds > 0 && phone.length > 0)
"
placeholder="请输入手机号"
placeholder-class="placeholder"
:aria-invalid="Boolean(fieldErrors.phone)"
:aria-describedby="
fieldErrors.phone ? 'a04-phone-error' : undefined
"
@input="handlePhoneInput"
/>
</view>
<text
v-if="fieldErrors.phone"
id="a04-phone-error"
class="field-error"
role="alert"
>{{ fieldErrors.phone }}</text
>
</view>
<view class="field-block">
<view class="input-row">
<label class="input-label" for="a04-nickname">昵称</label>
<input
id="a04-nickname"
v-model.trim="nickName"
class="auth-input"
:disabled="submitting || registrationCommitted"
placeholder="请输入昵称"
placeholder-class="placeholder"
/>
</view>
</view>
<view
class="field-block"
:class="{ 'field-block--error': fieldErrors.verificationCode }"
>
<view class="input-row code-row">
<label class="input-label" for="a04-verification-code"
><text class="required-mark">*</text>验证码</label
>
<input
id="a04-verification-code"
v-model.trim="verificationCode"
class="auth-input"
type="number"
maxlength="4"
:disabled="submitting || registrationCommitted"
placeholder="请输入验证码"
placeholder-class="placeholder"
:aria-invalid="Boolean(fieldErrors.verificationCode)"
:aria-describedby="
fieldErrors.verificationCode
? 'a04-verification-code-error'
: undefined
"
@input="clearFieldError('verificationCode')"
/>
<button
class="auth-plain-button get-code"
:class="{
'get-code--disabled': sendingCode || cooldownSeconds > 0,
}"
:disabled="
sendingCode ||
submitting ||
cooldownSeconds > 0 ||
registrationCommitted
"
hover-class="tap-fade"
@click="prepareGetCode"
>
{{
sendingCode
? "请求中…"
: cooldownSeconds > 0
? `${cooldownSeconds}s 后重发`
: "获取验证码"
}}
</button>
</view>
<text
v-if="fieldErrors.verificationCode"
id="a04-verification-code-error"
class="field-error"
role="alert"
>{{ fieldErrors.verificationCode }}</text
>
</view>
<view
class="field-block"
:class="{ 'field-block--error': fieldErrors.password }"
>
<view class="input-row">
<label class="input-label" for="a04-password"
><text class="required-mark">*</text>设置密码</label
>
<input
id="a04-password"
v-model="password"
class="auth-input"
password
maxlength="32"
:disabled="submitting || registrationCommitted"
placeholder="请设置登录密码"
placeholder-class="placeholder"
:aria-invalid="Boolean(fieldErrors.password)"
:aria-describedby="
fieldErrors.password ? 'a04-password-error' : undefined
"
@input="clearFieldError('password')"
/>
</view>
<text
v-if="fieldErrors.password"
id="a04-password-error"
class="field-error"
role="alert"
>{{ fieldErrors.password }}</text
>
</view>
<view
class="field-block"
:class="{ 'field-block--error': fieldErrors.confirmPassword }"
>
<view class="input-row">
<label class="input-label" for="a04-confirm-password"
><text class="required-mark">*</text>确认密码</label
>
<input
id="a04-confirm-password"
v-model="confirmPassword"
class="auth-input"
password
maxlength="32"
:disabled="submitting || registrationCommitted"
placeholder="请再次输入密码"
placeholder-class="placeholder"
:aria-invalid="Boolean(fieldErrors.confirmPassword)"
:aria-describedby="
fieldErrors.confirmPassword
? 'a04-confirm-password-error'
: undefined
"
@input="clearFieldError('confirmPassword')"
/>
</view>
<text
v-if="fieldErrors.confirmPassword"
id="a04-confirm-password-error"
class="field-error"
role="alert"
>{{ fieldErrors.confirmPassword }}</text
>
</view>
</view>
<button
class="auth-plain-button register-submit"
:disabled="submitting || sendingCode || tacVisible"
:aria-busy="submitting"
hover-class="button-hover"
@click="submitRegister"
>
<image
class="register-submit__skin"
src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png"
mode="aspectFit"
/>
<text class="register-submit__content">{{
submitting
? registrationCommitted
? "正在进入…"
: "注册中…"
: registrationCommitted
? "进入家谱"
: "注册账号"
}}</text>
</button>
<view
class="agreement-area"
:class="{ 'agreement-area--error': agreementError }"
>
<view class="agreement-row">
<button
class="auth-plain-button back-button"
aria-label="返回登录"
hover-class="tap-fade"
@click="requestBack"
class="auth-plain-button agreement-toggle"
role="checkbox"
:aria-checked="agreed"
:aria-label="
agreed ? '取消同意用户协议与隐私政策' : '同意用户协议与隐私政策'
"
:disabled="
sendingCode || submitting || tacVisible || registrationCommitted
"
@click="toggleAgreement"
>
<image
class="back-button__icon"
src="/static/assets/foundation/transparent/chevron-right.png"
class="agreement-icon"
:src="
agreed
? '/static/assets/modules/auth/transparent/a02-agreement-checked.png'
: '/static/assets/modules/auth/transparent/a02-agreement-unchecked.png'
"
mode="aspectFit"
aria-hidden="true"
/>
</button>
<text class="page-title">注册账号</text>
<text class="page-subtitle">创建属于你的家谱账号</text>
<image
class="register-divider"
src="/static/assets/modules/auth/transparent/a01-vnext-divider-v1.png"
mode="aspectFit"
/>
</view>
<view class="form-content">
<view
class="field-block"
:class="{ 'field-block--error': fieldErrors.phone }"
>
<view class="input-row">
<label class="input-label" for="a04-phone"><text class="required-mark">*</text>手机号</label>
<input
id="a04-phone"
v-model.trim="phone"
class="auth-input"
type="number"
maxlength="11"
:disabled="sendingCode || submitting || tacVisible || registrationCommitted || (cooldownSeconds > 0 && phone.length > 0)"
placeholder="请输入手机号"
placeholder-class="placeholder"
:aria-invalid="Boolean(fieldErrors.phone)"
:aria-describedby="fieldErrors.phone ? 'a04-phone-error' : undefined"
@input="handlePhoneInput"
/>
</view>
<text v-if="fieldErrors.phone" id="a04-phone-error" class="field-error" role="alert">{{
fieldErrors.phone
}}</text>
</view>
<view class="field-block">
<view class="input-row">
<label class="input-label" for="a04-nickname">昵称</label>
<input
id="a04-nickname"
v-model.trim="nickName"
class="auth-input"
:disabled="submitting || registrationCommitted"
placeholder="请输入昵称"
placeholder-class="placeholder"
/>
</view>
</view>
<view
class="field-block"
:class="{ 'field-block--error': fieldErrors.verificationCode }"
>
<view class="input-row code-row">
<label class="input-label" for="a04-verification-code"><text class="required-mark">*</text>验证码</label>
<input
id="a04-verification-code"
v-model.trim="verificationCode"
class="auth-input"
type="number"
maxlength="4"
:disabled="submitting || registrationCommitted"
placeholder="请输入验证码"
placeholder-class="placeholder"
:aria-invalid="Boolean(fieldErrors.verificationCode)"
:aria-describedby="fieldErrors.verificationCode ? 'a04-verification-code-error' : undefined"
@input="clearFieldError('verificationCode')"
/>
<button
class="auth-plain-button get-code"
:class="{ 'get-code--disabled': sendingCode || cooldownSeconds > 0 }"
:disabled="sendingCode || submitting || cooldownSeconds > 0 || registrationCommitted"
hover-class="tap-fade"
@click="prepareGetCode"
>{{ sendingCode ? "请求中…" : cooldownSeconds > 0 ? `${cooldownSeconds}s 后重发` : "获取验证码" }}</button
>
</view>
<text v-if="fieldErrors.verificationCode" id="a04-verification-code-error" class="field-error" role="alert">{{
fieldErrors.verificationCode
}}</text>
</view>
<view
class="field-block"
:class="{ 'field-block--error': fieldErrors.password }"
>
<view class="input-row">
<label class="input-label" for="a04-password"><text class="required-mark">*</text>设置密码</label>
<input
id="a04-password"
v-model="password"
class="auth-input"
password
maxlength="32"
:disabled="submitting || registrationCommitted"
placeholder="请设置登录密码"
placeholder-class="placeholder"
:aria-invalid="Boolean(fieldErrors.password)"
:aria-describedby="fieldErrors.password ? 'a04-password-error' : undefined"
@input="clearFieldError('password')"
/>
</view>
<text v-if="fieldErrors.password" id="a04-password-error" class="field-error" role="alert">{{
fieldErrors.password
}}</text>
</view>
<view
class="field-block"
:class="{ 'field-block--error': fieldErrors.confirmPassword }"
>
<view class="input-row">
<label class="input-label" for="a04-confirm-password"><text class="required-mark">*</text>确认密码</label>
<input
id="a04-confirm-password"
v-model="confirmPassword"
class="auth-input"
password
maxlength="32"
:disabled="submitting || registrationCommitted"
placeholder="请再次输入密码"
placeholder-class="placeholder"
:aria-invalid="Boolean(fieldErrors.confirmPassword)"
:aria-describedby="fieldErrors.confirmPassword ? 'a04-confirm-password-error' : undefined"
@input="clearFieldError('confirmPassword')"
/>
</view>
<text v-if="fieldErrors.confirmPassword" id="a04-confirm-password-error" class="field-error" role="alert">{{
fieldErrors.confirmPassword
}}</text>
</view>
</view>
<button
class="auth-plain-button register-submit"
:disabled="submitting || sendingCode || tacVisible"
:aria-busy="submitting"
hover-class="button-hover"
@click="submitRegister"
>
<image
class="register-submit__skin"
src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png"
mode="aspectFit"
/>
<text class="register-submit__content">{{
submitting
? registrationCommitted
? "正在进入…"
: "注册中…"
: registrationCommitted
? "进入家谱"
: "注册账号"
}}</text>
</button>
<view
class="agreement-area"
:class="{ 'agreement-area--error': agreementError }"
>
<view class="agreement-row">
<view class="agreement-copy">
<text>我已阅读并同意</text>
<button
class="auth-plain-button agreement-toggle"
role="checkbox"
:aria-checked="agreed"
:aria-label="agreed ? '取消同意用户协议与隐私政策' : '同意用户协议与隐私政策'"
:disabled="sendingCode || submitting || tacVisible || registrationCommitted"
@click="toggleAgreement"
class="auth-plain-button agreement-link"
@click="prepareAgreement"
>
<image
class="agreement-icon"
:src="
agreed
? '/static/assets/modules/auth/transparent/a02-agreement-checked.png'
: '/static/assets/modules/auth/transparent/a02-agreement-unchecked.png'
"
mode="aspectFit"
aria-hidden="true"
/>
《用户协议》
</button>
<text>与</text>
<button
class="auth-plain-button agreement-link"
@click="prepareAgreement"
>
《隐私政策》
</button>
<view class="agreement-copy">
<text>我已阅读并同意</text>
<button class="auth-plain-button agreement-link" @click="prepareAgreement"
>《用户协议》</button
>
<text>与</text>
<button class="auth-plain-button agreement-link" @click="prepareAgreement"
>《隐私政策》</button
>
</view>
</view>
<text v-if="agreementError" class="agreement-error" role="alert"
>请先阅读并同意用户协议与隐私政策</text
>
</view>
<view class="login-entry">
<text>已有账号？</text>
<button
class="auth-plain-button login-entry__link"
:disabled="submitting || sendingCode || tacVisible"
hover-class="tap-fade"
@click="requestBack"
>登录</button
>
</view>
<text v-if="agreementError" class="agreement-error" role="alert"
>请先阅读并同意用户协议与隐私政策</text
>
</view>
<view class="login-entry">
<text>已有账号？</text>
<button
class="auth-plain-button login-entry__link"
:disabled="submitting || sendingCode || tacVisible"
hover-class="tap-fade"
@click="requestBack"
>
登录
</button>
</view>
</view>
<template #overlay>
<TacVerification
:visible="tacVisible"
@@ -303,16 +370,17 @@ const submitting = ref(false);
const registrationCommitted = ref(false);
const cooldownSeconds = ref(0);
const sentPhone = ref("");
const isDirty = computed(() =>
!registrationCommitted.value &&
Boolean(
phone.value ||
const isDirty = computed(
() =>
!registrationCommitted.value &&
Boolean(
phone.value ||
nickName.value ||
verificationCode.value ||
password.value ||
confirmPassword.value ||
agreed.value,
),
),
);
let feedbackTimer = null;
let tacSequence = 0;
@@ -416,7 +484,8 @@ const handlePhoneInput = () => {
};
const prepareGetCode = async () => {
if (sendingCode.value || submitting.value || cooldownSeconds.value > 0) return;
if (sendingCode.value || submitting.value || cooldownSeconds.value > 0)
return;
if (!isAuthPhone(phone.value)) {
fieldErrors.value.phone = "请输入正确手机号";
return;
@@ -435,7 +504,8 @@ const prepareGetCode = async () => {
{ requestController: authRequestController },
);
if (!pageActive) return;
if (phone.value !== requestedPhone) throw new Error("手机号已变化，请重新获取验证码");
if (phone.value !== requestedPhone)
throw new Error("手机号已变化，请重新获取验证码");
const requirement = normalizeCaptchaRequirement(response);
if (!requirement.required) {
await appApi.sendSmsCode(
@@ -473,7 +543,8 @@ const completeTac = async (result) => {
if (!expectedContext) return;
try {
const ticket = normalizeTacSuccess(result, expectedContext.requestId);
if (phone.value !== expectedContext.subject) throw new Error("手机号已变化，请重新验证");
if (phone.value !== expectedContext.subject)
throw new Error("手机号已变化，请重新验证");
closeTac();
sendingCode.value = true;
await appApi.sendSmsCode(
@@ -566,7 +637,6 @@ const submitRegister = async () => {
</script>
<style scoped lang="scss">
.register-content {
display: flex;
flex: 1;
@@ -818,5 +888,4 @@ const submitRegister = async () => {
.button-hover {
opacity: 0.84;
}
</style>
pages/auth/a05-reset-password.vue
+216 -166
View File
@@ -1,168 +1,220 @@
<!-- 页面编号：A-05；用途：通过手机号验证后重设登录密码。 -->
<template>
<AuthPageShell class="auth-page reset-page">
<view class="reset-content">
<view class="page-heading">
<button
class="auth-plain-button back-button"
aria-label="返回登录"
hover-class="tap-fade"
@click="requestBack"
>
<image
class="back-button__icon"
src="/static/assets/foundation/transparent/chevron-right.png"
mode="aspectFit"
aria-hidden="true"
/>
</button>
<text class="page-title">重设密码</text>
<text class="page-subtitle">验证手机号后设置新的登录密码</text>
<image
class="reset-divider"
src="/static/assets/modules/auth/transparent/a01-vnext-divider-v1.png"
mode="aspectFit"
/>
</view>
<view class="form-content">
<view
class="field-block"
:class="{ 'field-block--error': fieldErrors.phone }"
>
<view class="input-row">
<label class="input-label" for="a05-phone"><text class="required-mark">*</text>手机号</label>
<input
id="a05-phone"
v-model.trim="phone"
class="auth-input"
type="number"
maxlength="11"
:disabled="sendingCode || submitting || (cooldownSeconds > 0 && phone.length > 0)"
placeholder="请输入手机号"
placeholder-class="placeholder"
:aria-invalid="Boolean(fieldErrors.phone)"
:aria-describedby="fieldErrors.phone ? 'a05-phone-error' : undefined"
@input="handlePhoneInput"
/>
</view>
<text v-if="fieldErrors.phone" id="a05-phone-error" class="field-error" role="alert">{{
fieldErrors.phone
}}</text>
</view>
<view
class="field-block"
:class="{ 'field-block--error': fieldErrors.verificationCode }"
>
<view class="input-row code-row">
<label class="input-label" for="a05-verification-code"><text class="required-mark">*</text>验证码</label>
<input
id="a05-verification-code"
v-model.trim="verificationCode"
class="auth-input"
type="number"
maxlength="4"
:disabled="submitting"
placeholder="请输入验证码"
placeholder-class="placeholder"
:aria-invalid="Boolean(fieldErrors.verificationCode)"
:aria-describedby="fieldErrors.verificationCode ? 'a05-verification-code-error' : undefined"
@input="clearFieldError('verificationCode')"
/>
<button
class="auth-plain-button get-code"
:class="{ 'get-code--disabled': sendingCode || cooldownSeconds > 0 }"
:disabled="sendingCode || submitting || cooldownSeconds > 0"
hover-class="tap-fade"
@click="prepareGetCode"
>{{ sendingCode ? "请求中…" : cooldownSeconds > 0 ? `${cooldownSeconds}s 后重发` : "获取验证码" }}</button
>
</view>
<text v-if="fieldErrors.verificationCode" id="a05-verification-code-error" class="field-error" role="alert">{{
fieldErrors.verificationCode
}}</text>
</view>
<view
class="field-block"
:class="{ 'field-block--error': fieldErrors.password }"
>
<view class="input-row">
<label class="input-label" for="a05-password"><text class="required-mark">*</text>新密码</label>
<input
id="a05-password"
v-model="password"
class="auth-input"
password
maxlength="32"
:disabled="submitting"
placeholder="请设置新密码"
placeholder-class="placeholder"
:aria-invalid="Boolean(fieldErrors.password)"
:aria-describedby="fieldErrors.password ? 'a05-password-error' : undefined"
@input="clearFieldError('password')"
/>
</view>
<text v-if="fieldErrors.password" id="a05-password-error" class="field-error" role="alert">{{
fieldErrors.password
}}</text>
</view>
<view
class="field-block"
:class="{ 'field-block--error': fieldErrors.confirmPassword }"
>
<view class="input-row">
<label class="input-label" for="a05-confirm-password"><text class="required-mark">*</text>确认新密码</label>
<input
id="a05-confirm-password"
v-model="confirmPassword"
class="auth-input"
password
maxlength="32"
:disabled="submitting"
placeholder="请再次输入新密码"
placeholder-class="placeholder"
:aria-invalid="Boolean(fieldErrors.confirmPassword)"
:aria-describedby="fieldErrors.confirmPassword ? 'a05-confirm-password-error' : undefined"
@input="clearFieldError('confirmPassword')"
/>
</view>
<text v-if="fieldErrors.confirmPassword" id="a05-confirm-password-error" class="field-error" role="alert">{{
fieldErrors.confirmPassword
}}</text>
</view>
</view>
<view class="reset-content">
<view class="page-heading">
<button
class="auth-plain-button reset-submit"
:disabled="submitting || sendingCode || tacVisible"
:aria-busy="submitting"
hover-class="button-hover"
@click="submitReset"
class="auth-plain-button back-button"
aria-label="返回登录"
hover-class="tap-fade"
@click="requestBack"
>
<image
class="reset-submit__skin"
src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png"
class="back-button__icon"
src="/static/assets/foundation/transparent/chevron-right.png"
mode="aspectFit"
aria-hidden="true"
/>
<text class="reset-submit__content">{{ submitting ? "提交中…" : "确认重设" }}</text>
</button>
<text class="page-title">重设密码</text>
<text class="page-subtitle">验证手机号后设置新的登录密码</text>
<image
class="reset-divider"
src="/static/assets/modules/auth/transparent/a01-vnext-divider-v1.png"
mode="aspectFit"
/>
</view>
<text class="reset-tip">重设成功后，请使用新密码登录</text>
<view class="login-entry">
<text>想起密码了？</text>
<button
class="auth-plain-button login-entry__link"
:disabled="submitting || sendingCode || tacVisible"
hover-class="tap-fade"
@click="requestBack"
>返回登录</button
<view class="form-content">
<view
class="field-block"
:class="{ 'field-block--error': fieldErrors.phone }"
>
<view class="input-row">
<label class="input-label" for="a05-phone"
><text class="required-mark">*</text>手机号</label
>
<input
id="a05-phone"
v-model.trim="phone"
class="auth-input"
type="number"
maxlength="11"
:disabled="
sendingCode ||
submitting ||
(cooldownSeconds > 0 && phone.length > 0)
"
placeholder="请输入手机号"
placeholder-class="placeholder"
:aria-invalid="Boolean(fieldErrors.phone)"
:aria-describedby="
fieldErrors.phone ? 'a05-phone-error' : undefined
"
@input="handlePhoneInput"
/>
</view>
<text
v-if="fieldErrors.phone"
id="a05-phone-error"
class="field-error"
role="alert"
>{{ fieldErrors.phone }}</text
>
</view>
<view
class="field-block"
:class="{ 'field-block--error': fieldErrors.verificationCode }"
>
<view class="input-row code-row">
<label class="input-label" for="a05-verification-code"
><text class="required-mark">*</text>验证码</label
>
<input
id="a05-verification-code"
v-model.trim="verificationCode"
class="auth-input"
type="number"
maxlength="4"
:disabled="submitting"
placeholder="请输入验证码"
placeholder-class="placeholder"
:aria-invalid="Boolean(fieldErrors.verificationCode)"
:aria-describedby="
fieldErrors.verificationCode
? 'a05-verification-code-error'
: undefined
"
@input="clearFieldError('verificationCode')"
/>
<button
class="auth-plain-button get-code"
:class="{
'get-code--disabled': sendingCode || cooldownSeconds > 0,
}"
:disabled="sendingCode || submitting || cooldownSeconds > 0"
hover-class="tap-fade"
@click="prepareGetCode"
>
{{
sendingCode
? "请求中…"
: cooldownSeconds > 0
? `${cooldownSeconds}s 后重发`
: "获取验证码"
}}
</button>
</view>
<text
v-if="fieldErrors.verificationCode"
id="a05-verification-code-error"
class="field-error"
role="alert"
>{{ fieldErrors.verificationCode }}</text
>
</view>
<view
class="field-block"
:class="{ 'field-block--error': fieldErrors.password }"
>
<view class="input-row">
<label class="input-label" for="a05-password"
><text class="required-mark">*</text>新密码</label
>
<input
id="a05-password"
v-model="password"
class="auth-input"
password
maxlength="32"
:disabled="submitting"
placeholder="请设置新密码"
placeholder-class="placeholder"
:aria-invalid="Boolean(fieldErrors.password)"
:aria-describedby="
fieldErrors.password ? 'a05-password-error' : undefined
"
@input="clearFieldError('password')"
/>
</view>
<text
v-if="fieldErrors.password"
id="a05-password-error"
class="field-error"
role="alert"
>{{ fieldErrors.password }}</text
>
</view>
<view
class="field-block"
:class="{ 'field-block--error': fieldErrors.confirmPassword }"
>
<view class="input-row">
<label class="input-label" for="a05-confirm-password"
><text class="required-mark">*</text>确认新密码</label
>
<input
id="a05-confirm-password"
v-model="confirmPassword"
class="auth-input"
password
maxlength="32"
:disabled="submitting"
placeholder="请再次输入新密码"
placeholder-class="placeholder"
:aria-invalid="Boolean(fieldErrors.confirmPassword)"
:aria-describedby="
fieldErrors.confirmPassword
? 'a05-confirm-password-error'
: undefined
"
@input="clearFieldError('confirmPassword')"
/>
</view>
<text
v-if="fieldErrors.confirmPassword"
id="a05-confirm-password-error"
class="field-error"
role="alert"
>{{ fieldErrors.confirmPassword }}</text
>
</view>
</view>
<button
class="auth-plain-button reset-submit"
:disabled="submitting || sendingCode || tacVisible"
:aria-busy="submitting"
hover-class="button-hover"
@click="submitReset"
>
<image
class="reset-submit__skin"
src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png"
mode="aspectFit"
/>
<text class="reset-submit__content">{{
submitting ? "提交中…" : "确认重设"
}}</text>
</button>
<text class="reset-tip">重设成功后，请使用新密码登录</text>
<view class="login-entry">
<text>想起密码了？</text>
<button
class="auth-plain-button login-entry__link"
:disabled="submitting || sendingCode || tacVisible"
hover-class="tap-fade"
@click="requestBack"
>
返回登录
</button>
</view>
</view>
<template #overlay>
<TacVerification
:visible="tacVisible"
@@ -230,11 +282,7 @@ import { createAuthSmsCooldown } from "@/utils/auth-sms-cooldown.js";
import { runtimeConfig } from "@/utils/config.js";
import { createDiscardConfirmation } from "@/utils/discard-confirmation.js";
import { calcMD5 } from "@/utils/md5.js";
import {
handleBackPress,
returnTo,
runBackGuard,
} from "@/utils/navigation.js";
import { handleBackPress, returnTo, runBackGuard } from "@/utils/navigation.js";
import {
PASSWORD_POLICY_MESSAGE,
validatePassword,
@@ -260,14 +308,15 @@ const fieldErrors = ref({
password: "",
confirmPassword: "",
});
const isDirty = computed(() =>
!successVisible.value &&
Boolean(
phone.value ||
const isDirty = computed(
() =>
!successVisible.value &&
Boolean(
phone.value ||
verificationCode.value ||
password.value ||
confirmPassword.value,
),
),
);
let feedbackTimer = null;
let tacSequence = 0;
@@ -348,7 +397,8 @@ const handlePhoneInput = () => {
};
const prepareGetCode = async () => {
if (sendingCode.value || submitting.value || cooldownSeconds.value > 0) return;
if (sendingCode.value || submitting.value || cooldownSeconds.value > 0)
return;
if (!isAuthPhone(phone.value)) {
fieldErrors.value.phone = "请输入正确手机号";
return;
@@ -363,7 +413,8 @@ const prepareGetCode = async () => {
{ requestController: authRequestController },
);
if (!pageActive) return;
if (phone.value !== requestedPhone) throw new Error("手机号已变化，请重新获取验证码");
if (phone.value !== requestedPhone)
throw new Error("手机号已变化，请重新获取验证码");
const requirement = normalizeCaptchaRequirement(response);
if (!requirement.required) {
await appApi.sendSmsCode(
@@ -401,7 +452,8 @@ const completeTac = async (result) => {
if (!expectedContext) return;
try {
const ticket = normalizeTacSuccess(result, expectedContext.requestId);
if (phone.value !== expectedContext.subject) throw new Error("手机号已变化，请重新验证");
if (phone.value !== expectedContext.subject)
throw new Error("手机号已变化，请重新验证");
closeTac();
sendingCode.value = true;
await appApi.sendSmsCode(
@@ -487,7 +539,6 @@ const submitReset = async () => {
</script>
<style scoped lang="scss">
.reset-content {
display: flex;
flex: 1;
@@ -668,5 +719,4 @@ const submitReset = async () => {
.button-hover {
opacity: 0.72;
}
</style>
pages/auth/a06-auth-status.vue
+63 -68
View File
@@ -1,79 +1,75 @@
<!-- 页面编号：A-06；用途：只承接账号冻结、停用与风险限制等阻断登录状态。 -->
<template>
<AuthPageShell class="auth-page status-page">
<view class="status-content">
<view class="page-heading">
<view class="back-button" hover-class="tap-fade" @click="requestBack">
<image
class="back-button__icon"
src="/static/assets/foundation/transparent/chevron-right.png"
mode="aspectFit"
/>
</view>
<text class="page-title">登录受限</text>
<text class="page-subtitle">请根据当前账号状态完成恢复</text>
<view class="status-content">
<view class="page-heading">
<view class="back-button" hover-class="tap-fade" @click="requestBack">
<image
class="status-divider"
src="/static/assets/modules/auth/transparent/a01-vnext-divider-v1.png"
class="back-button__icon"
src="/static/assets/foundation/transparent/chevron-right.png"
mode="aspectFit"
/>
</view>
<view class="status-body">
<image
class="status-icon"
src="/static/assets/foundation/transparent/auth-login-outline.png"
mode="aspectFit"
/>
<text class="status-eyebrow">{{ currentState.eyebrow }}</text>
<text class="status-title">{{ currentState.title }}</text>
<text class="status-description">{{ currentState.description }}</text>
<view class="status-details">
<view class="status-detail">
<text class="status-detail__label">{{
currentState.reasonLabel
}}</text>
<text class="status-detail__value">{{
currentState.reason
}}</text>
</view>
<view class="status-detail">
<text class="status-detail__label">{{
currentState.impactLabel
}}</text>
<text class="status-detail__value">{{
currentState.impact
}}</text>
</view>
<view class="status-detail">
<text class="status-detail__label">{{
currentState.recoveryLabel
}}</text>
<text class="status-detail__value">{{
currentState.recovery
}}</text>
</view>
</view>
</view>
<view
class="status-primary"
hover-class="button-hover"
@click="openRecovery"
>
<image
class="status-primary__skin"
src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png"
mode="aspectFit"
/>
<text class="status-primary__copy">查看恢复方式</text>
</view>
<view class="status-secondary" hover-class="tap-fade" @click="requestBack"
>返回登录</view
>
<text class="page-title">登录受限</text>
<text class="page-subtitle">请根据当前账号状态完成恢复</text>
<image
class="status-divider"
src="/static/assets/modules/auth/transparent/a01-vnext-divider-v1.png"
mode="aspectFit"
/>
</view>
<view class="status-body">
<image
class="status-icon"
src="/static/assets/foundation/transparent/auth-login-outline.png"
mode="aspectFit"
/>
<text class="status-eyebrow">{{ currentState.eyebrow }}</text>
<text class="status-title">{{ currentState.title }}</text>
<text class="status-description">{{ currentState.description }}</text>
<view class="status-details">
<view class="status-detail">
<text class="status-detail__label">{{
currentState.reasonLabel
}}</text>
<text class="status-detail__value">{{ currentState.reason }}</text>
</view>
<view class="status-detail">
<text class="status-detail__label">{{
currentState.impactLabel
}}</text>
<text class="status-detail__value">{{ currentState.impact }}</text>
</view>
<view class="status-detail">
<text class="status-detail__label">{{
currentState.recoveryLabel
}}</text>
<text class="status-detail__value">{{
currentState.recovery
}}</text>
</view>
</view>
</view>
<view
class="status-primary"
hover-class="button-hover"
@click="openRecovery"
>
<image
class="status-primary__skin"
src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png"
mode="aspectFit"
/>
<text class="status-primary__copy">查看恢复方式</text>
</view>
<view class="status-secondary" hover-class="tap-fade" @click="requestBack"
>返回登录</view
>
</view>
<template #overlay>
<view
v-if="recoveryVisible"
@@ -415,5 +411,4 @@ onBackPress((event) => handleBackPress(event, requestBack));
.button-hover {
opacity: 0.72;
}
</style>