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

同步封存A06自适应骨架

Browse Source
This commit is contained in:
rain
2026-07-21 12:13:07 +08:00
parent b774ce8212
commit cd3dbb2ab1
2 changed files with 74 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/auth/a06-auth-status.vue
+52 -94
View File
@@ -1,18 +1,6 @@
<!-- 页面编号：A-06；用途：只承接账号冻结、停用与风险限制等阻断登录状态。 -->
<template>
<view class="auth-page status-page">
<view class="page-canvas">
<image
class="page-backdrop"
src="/static/assets/modules/auth/opaque/a01-red-hall-ink-backdrop-v1.png"
mode="scaleToFill"
/>
<image
class="brand-seal"
src="/static/assets/foundation/transparent/brand-seal.png"
mode="aspectFit"
/>
<AuthPageShell class="auth-page status-page">
<view class="status-content">
<view class="page-heading">
<view class="back-button" hover-class="tap-fade" @click="goBack">
@@ -85,42 +73,48 @@
>返回登录</view
>
</view>
</view>
<view v-if="recoveryVisible" class="recovery-layer" @click="closeRecovery">
<view class="recovery-dialog" @click.stop>
<image
class="recovery-dialog__skin"
src="/static/assets/modules/auth/transparent/a01-scroll-dialog-v3.png"
mode="aspectFit"
/>
<view class="recovery-dialog__content">
<text class="recovery-title">{{ currentState.recoveryTitle }}</text>
<text class="recovery-copy">{{ currentState.recoveryDetail }}</text>
<text class="recovery-note"
>账号恢复服务将在功能阶段接入，当前仅审核页面样式与状态位置。</text
>
<view
class="recovery-action"
hover-class="button-hover"
@click="closeRecovery"
>
<image
class="recovery-action__skin"
src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png"
mode="aspectFit"
/>
<text class="recovery-action__copy">我知道了</text>
<template #overlay>
<view
v-if="recoveryVisible"
class="recovery-layer"
@click="closeRecovery"
>
<view class="recovery-dialog" @click.stop>
<image
class="recovery-dialog__skin"
src="/static/assets/modules/auth/transparent/a01-scroll-dialog-v3.png"
mode="aspectFit"
/>
<view class="recovery-dialog__content">
<text class="recovery-title">{{ currentState.recoveryTitle }}</text>
<text class="recovery-copy">{{ currentState.recoveryDetail }}</text>
<text class="recovery-note"
>账号恢复服务将在功能阶段接入，当前仅审核页面样式与状态位置。</text
>
<view
class="recovery-action"
hover-class="button-hover"
@click="closeRecovery"
>
<image
class="recovery-action__skin"
src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png"
mode="aspectFit"
/>
<text class="recovery-action__copy">我知道了</text>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
</AuthPageShell>
</template>
<script setup>
import { computed, ref } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import AuthPageShell from "@/components/AuthPageShell.vue";
const status = ref("risk");
const recoveryVisible = ref(false);
@@ -203,47 +197,20 @@ const goBack = () => uni.navigateBack();
</script>
<style scoped lang="scss">
.auth-page {
width: 100%;
height: 100dvh;
min-height: 100%;
overflow-y: auto;
background: #f7f0e4;
color: #493323;
}
.page-canvas {
display: grid;
box-sizing: border-box;
width: 100%;
min-height: calc(1665rpx + env(safe-area-inset-bottom));
padding-bottom: env(safe-area-inset-bottom);
}
.page-backdrop {
grid-area: 1 / 1;
align-self: start;
width: 100%;
height: 1665rpx;
pointer-events: none;
}
.brand-seal {
z-index: 1;
grid-area: 1 / 1;
align-self: start;
justify-self: center;
width: 184rpx;
height: 221rpx;
margin-top: 64rpx;
pointer-events: none;
}
.status-content {
z-index: 2;
grid-area: 1 / 1;
display: flex;
flex: 1;
flex-direction: column;
box-sizing: border-box;
padding: 430rpx 64rpx 46rpx;
width: 100%;
max-width: 480px;
min-width: 0;
margin: 0 auto;
padding: clamp(10px, 2.2vh, 20px) clamp(24px, 8.5vw, 44px);
}
.page-heading {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto auto auto;
justify-items: center;
min-height: 154rpx;
@@ -256,8 +223,8 @@ const goBack = () => uni.navigateBack();
justify-self: start;
align-items: center;
justify-content: center;
width: 88rpx;
height: 88rpx;
width: var(--app-touch-min);
height: var(--app-touch-min);
margin-top: 10rpx;
}
.back-button__icon {
@@ -266,13 +233,15 @@ const goBack = () => uni.navigateBack();
transform: scaleX(-1);
}
.page-title {
grid-column: 1;
grid-row: 1;
color: #9f170f;
font-size: 66rpx;
font-size: 58rpx;
font-weight: 700;
letter-spacing: 7rpx;
}
.page-subtitle {
grid-column: 1;
grid-row: 2;
margin-top: 12rpx;
color: #806c58;
@@ -280,6 +249,7 @@ const goBack = () => uni.navigateBack();
letter-spacing: 1rpx;
}
.status-divider {
grid-column: 1;
grid-row: 3;
width: 300rpx;
height: 50rpx;
@@ -348,7 +318,7 @@ const goBack = () => uni.navigateBack();
.status-primary {
display: grid;
place-items: center;
min-height: 104rpx;
min-height: var(--app-touch-min);
margin-top: 28rpx;
}
.status-primary__skin,
@@ -368,7 +338,7 @@ const goBack = () => uni.navigateBack();
display: flex;
align-items: center;
justify-content: center;
min-height: 82rpx;
min-height: var(--app-touch-min);
color: #a7160c;
font-size: 24rpx;
}
@@ -388,7 +358,7 @@ const goBack = () => uni.navigateBack();
display: grid;
width: 620rpx;
min-height: 520rpx;
max-height: calc(100vh - 80rpx);
max-height: calc(var(--app-viewport-height) - 40px);
}
.recovery-dialog__skin {
grid-area: 1 / 1;
@@ -444,16 +414,4 @@ const goBack = () => uni.navigateBack();
opacity: 0.72;
}
@media screen and (max-width: 340px) {
.status-content {
padding-right: 48rpx;
padding-left: 48rpx;
}
.page-title {
font-size: 60rpx;
}
.status-detail__label {
flex-basis: 108rpx;
}
}
</style>
tests/a06-auth-status-contract.ps1
+22 -6
View File
@@ -39,17 +39,16 @@ foreach ($required in @(
'const openRecovery = () =>',
'const closeRecovery = () =>',
'const goBack = () =>',
'a01-red-hall-ink-backdrop-v1.png',
'brand-seal.png',
'<AuthPageShell',
'import AuthPageShell from "@/components/AuthPageShell.vue";',
'a01-vnext-divider-v1.png',
'a01-scroll-primary-v3.png',
'a01-scroll-dialog-v3.png',
'chevron-right.png',
'auth-login-outline.png',
'class="recovery-layer"',
'width: 184rpx;',
'height: 221rpx;',
'mode="aspectFit"'
'mode="aspectFit"',
'max-height: calc(var(--app-viewport-height) - 40px);'
)) {
Assert-Contains -Content $page -Expected $required -Message "Missing A-06 auth-status contract: $required"
}
@@ -60,7 +59,9 @@ foreach ($removedState in @('normal:', 'failed:', 'restricted:', "'register-pend
foreach ($nativeUi in @('uni.showToast', 'uni.showModal', 'uni.showLoading', 'uni.showActionSheet')) {
Assert-NotContains -Content $page -Unexpected $nativeUi -Message "A-06 must not use native UniApp feedback: $nativeUi"
}
Assert-NotContains -Content $page -Unexpected 'auth-design-scenery-v1.png' -Message 'A-06 must use the selected red-hall ink backdrop'
foreach ($forbidden in @('class="page-canvas"', 'class="page-backdrop"', 'mode="scaleToFill"', '1665rpx', 'a01-red-hall-ink-backdrop-v1.png')) {
Assert-NotContains -Content $page -Unexpected $forbidden -Message "A06 retains rejected page coordinates: $forbidden"
}
foreach ($obsoleteVisual in @(
'a01-primary-button.png',
'a02-login-panel.png',
@@ -82,4 +83,19 @@ foreach ($forbidden in @(
if ($page -match $forbidden) { throw "A-06 retains forbidden CSS visual construction: $forbidden" }
}
$contentRule = [regex]::Match($page, '(?ms)^\.status-content\s*\{(?<Body>.*?)^\}')
if (-not $contentRule.Success) { throw 'A06 status content rule is missing.' }
foreach ($required in @('display: flex;', 'flex: 1;', 'flex-direction: column;', 'max-width: 480px;', 'margin: 0 auto;')) {
Assert-Contains -Content $contentRule.Groups['Body'].Value -Expected $required -Message "A06 status content must use document flow: $required"
}
$headingRule = [regex]::Match($page, '(?ms)^\.page-heading\s*\{(?<Body>.*?)^\}')
if (-not $headingRule.Success) { throw 'A06 page heading rule is missing.' }
Assert-Contains -Content $headingRule.Groups['Body'].Value -Expected 'grid-template-columns: minmax(0, 1fr);' -Message 'A06 heading must center against the full content width.'
foreach ($selector in @('page-title', 'page-subtitle', 'status-divider')) {
$rule = [regex]::Match($page, "(?ms)^\.$selector\s*\{(?<Body>.*?)^\}")
if (-not $rule.Success) { throw "A06 heading child rule is missing: $selector" }
Assert-Contains -Content $rule.Groups['Body'].Value -Expected 'grid-column: 1;' -Message "A06 heading child must remain in the full-width grid column: $selector"
}
Write-Output 'A06-AUTH-STATUS-CONTRACT PASS'