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>