feat(miniapp): align UI with H5 and harden device debugging
五个页面按 h5/css 的 style.css → ui-20261009 → ui-20261012 覆盖顺序逐条重排， 换算规则固定为 calc(N * var(--u)) → 2N rpx，固定 px 的字号保持 px。 - app.acss：换回 H5 设计 token（方角小倒角按钮 10rpx、卡片 14rpx、.chev 折线箭头） - splash/profile/history：底图与按钮文字图改用 H5 资源，隐私/政策弹窗按 H5 重排 - report：环形分用 conic-gradient、人脸裁切窗口叠加 face_maps、标记点百分比盒、 侧脸皱纹 pending/unavailable 文案；用 Playwright 抓 H5 94 个选择器几何比对， 整页高 2438.7 vs 2438.67 - camera：淘宝 <camera> 组件在真机整页崩溃（嵌了微信专有的 <cover-view>）， 改为默认系统相机 + `config.nativeCamera` 开关 + pages/camtest 冒烟页验证组件 - permissions：淘宝用带前缀的 scope.camera（裸名返回 5022 Scope:camera信息不存在）， 先试带前缀再退回裸名，拒绝后不再重复弹窗 - voice：非 HTTPS 资源导致的异常不再冒泡成整页崩溃；app.js 加开发版错误 toast - 开发版入口：权限诊断（启动页/相机页）、相机组件测试 - 测试 20/20（新增权限与相机能力用例）
This commit is contained in:
@@ -1,49 +1,84 @@
|
||||
<!-- ═════ 01 启动页 ═════ -->
|
||||
<!-- ═════ 01 启动页 —— 对照 H5 index.html #s-splash(L43-58) + #p-privacy(L294-307) + #p-policy(L335-466) ═════ -->
|
||||
<view class="splash">
|
||||
<view class="camera-debug-entry" a:if="{{showCameraDebug}}" onTap="onCameraDebug">开发调试 · 相机验收</view>
|
||||
<view class="camera-debug-entry mvp-debug-entry" a:if="{{showMvpDebug}}" onTap="onMvpDebug">SAE MVP 连通性</view>
|
||||
<image class="splash-bg" src="{{bgUrl}}" mode="aspectFill" />
|
||||
<view class="splash-slogan">
|
||||
<text>1'me,</text>
|
||||
<text>FROM THE INSIDE OUT</text>
|
||||
<text>以我为始 自有表现</text>
|
||||
<!-- 开发版入口(H5 无此入口,保持现有实现,样式低调) -->
|
||||
<view class="dev-entries" a:if="{{showCameraDebug || showMvpDebug || showDiagnose}}">
|
||||
<view class="dev-entry" a:if="{{showCameraDebug}}" onTap="onCameraDebug">开发调试 · 相机验收</view>
|
||||
<view class="dev-entry" a:if="{{showMvpDebug}}" onTap="onMvpDebug">SAE MVP 连通性</view>
|
||||
<view class="dev-entry" a:if="{{showDiagnose}}" onTap="onDiagnose">权限诊断</view>
|
||||
<view class="dev-entry" a:if="{{showDiagnose}}" onTap="onCamTest">相机组件测试</view>
|
||||
</view>
|
||||
<!-- 诊断结果浮层:真机上唯一能看到相机能力/授权返回值的地方 -->
|
||||
<view class="diag-panel" a:if="{{diagText}}">
|
||||
<scroll-view class="diag-scroll" scroll-y>
|
||||
<text class="diag-text">{{diagText}}</text>
|
||||
</scroll-view>
|
||||
<view class="diag-close" onTap="onCloseDiagnose">关闭</view>
|
||||
</view>
|
||||
|
||||
<!-- H5 .splash-bg -->
|
||||
<image class="splash-bg" src="{{bgUrl}}" mode="aspectFill" />
|
||||
|
||||
<!-- H5 .account-status.account-status-home -->
|
||||
<view class="account-status account-status-home {{signedIn ? 'account-status-on' : ''}}">
|
||||
<view class="account-label">
|
||||
<view class="account-dot"></view>
|
||||
<text class="account-text">{{accountLabel}}</text>
|
||||
</view>
|
||||
<view class="account-logout" a:if="{{signedIn}}" onTap="onLogout">退出登录</view>
|
||||
</view>
|
||||
|
||||
<!-- H5 .splash-slogan.splash-slogan-updated
|
||||
.splash-slogan-copy 原为 object-fit + clip-path:inset(68% 0 0) 只露底部 32%(中文那行),
|
||||
acss 里改成等价的 overflow 裁切容器 + 上移 68% 的 image,像素结果一致 -->
|
||||
<view class="splash-slogan">
|
||||
<view class="splash-slogan-copy-clip">
|
||||
<image class="splash-slogan-copy" src="{{sloganUrl}}" mode="scaleToFill" />
|
||||
</view>
|
||||
<view class="splash-slogan-brand">1'me,</view>
|
||||
<view class="splash-slogan-english">FROM THE INSIDE OUT</view>
|
||||
</view>
|
||||
|
||||
<!-- H5 .splash-bottom:brand-lockup + 开始检测 + 我的报告 -->
|
||||
<view class="splash-bottom">
|
||||
<view class="brand-row">
|
||||
<image src="{{logoUrl}}" class="brand-logo" mode="heightFix" />
|
||||
</view>
|
||||
<button class="btn-primary splash-btn" onTap="onOpenPrivacy">开始检测</button>
|
||||
<view a:if="{{signedIn}}" class="account-links">
|
||||
<text onTap="onHistory">历史报告</text><text onTap="onLogout">退出登录</text>
|
||||
<image class="brand-lockup" src="{{logoUrl}}" mode="aspectFit" />
|
||||
</view>
|
||||
<button class="btn-primary" hover-class="btn-press" onTap="onOpenPrivacy">
|
||||
<image class="splash-button-label" src="{{startLabelUrl}}" mode="aspectFit" />
|
||||
</button>
|
||||
<button class="btn-primary btn-history" hover-class="btn-press" onTap="onHistory">
|
||||
<image class="splash-button-label btn-history-label" src="{{historyLabelUrl}}" mode="aspectFit" />
|
||||
</button>
|
||||
</view>
|
||||
|
||||
<!-- ═══ 弹窗:隐私授权 ═══ -->
|
||||
<view class="overlay" a:if="{{showPrivacy}}" onTap="onClosePrivacy">
|
||||
<view class="popup" catchTap="noop">
|
||||
<button class="popup-close" onTap="onClosePrivacy">✕</button>
|
||||
<!-- ═══ 弹窗:隐私授权(H5 #p-privacy) ═══ -->
|
||||
<view class="overlay overlay-privacy" a:if="{{showPrivacy}}" onTap="onClosePrivacy">
|
||||
<image class="overlay-bg" src="{{bgUrl}}" mode="aspectFill" />
|
||||
<view class="overlay-dim"></view>
|
||||
<view class="popup privacy-popup" catchTap="noop">
|
||||
<button class="popup-close" onTap="onClosePrivacy">
|
||||
<image class="popup-close-img" src="{{closeIconUrl}}" mode="aspectFit" />
|
||||
</button>
|
||||
<view class="popup-title">
|
||||
<text>欢迎体验1'me</text>
|
||||
<text>肌肤状态评估服务！</text>
|
||||
<view>欢迎体验1'me</view>
|
||||
<view>肌肤状态评估服务！</view>
|
||||
</view>
|
||||
<view class="popup-body">授权淘宝账号后，我们将采集您的面部影像和基础档案，用于生成肌肤分析报告，并在服务器保存检测记录及照片，供您查看最近5份报告。照片将交由 Face⁺⁺ 提供检测分析。</view>
|
||||
<view class="popup-body">我们将采集您的面部影像，为您生成专属肌肤分析与状态管理方案。所有数据严格保密，仅用于本次检测分析。</view>
|
||||
<view class="privacy-row" onTap="onToggleAgree">
|
||||
<view class="checkbox {{agreed ? 'checked' : ''}}"></view>
|
||||
<view class="privacy-text">
|
||||
我已阅读并同意
|
||||
<text class="privacy-link" catchTap="onOpenPolicy">相关隐私协议</text>
|
||||
</view>
|
||||
<view class="privacy-text">我已阅读并同意相关<text class="privacy-link" catchTap="onOpenPolicy">隐私协议</text></view>
|
||||
</view>
|
||||
<button class="btn-primary popup-btn" loading="{{busy}}" disabled="{{busy}}" onTap="onAgreeContinue">授权登录并继续</button>
|
||||
<button class="btn-primary popup-btn {{busy ? 'btn-busy' : ''}}" hover-class="btn-press" onTap="onAgreeContinue">继续</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- ═══ 弹层:隐私政策全文(Face++ 个人信息与隐私保护政策,与 H5 同文) ═══ -->
|
||||
<!-- ═══ 弹层:隐私政策全文(H5 #p-policy) ═══ -->
|
||||
<view class="overlay overlay-policy" a:if="{{showPolicy}}">
|
||||
<view class="policy-page">
|
||||
<button class="policy-back" onTap="onClosePolicy">‹</button>
|
||||
<scroll-view scroll-y class="policy-scroll">
|
||||
<button class="nav-back policy-float-back" onTap="onClosePolicy">
|
||||
<view class="chev left"></view>
|
||||
</button>
|
||||
<scroll-view scroll-y class="policy-body">
|
||||
<view class="policy-title">Face⁺⁺个人信息与隐私保护政策</view>
|
||||
|
||||
<view class="policy-h2">前言</view>
|
||||
@@ -80,4 +115,7 @@
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- H5 .toast -->
|
||||
<view class="toast {{toastOn ? 'show' : ''}}">{{toastText}}</view>
|
||||
</view>
|
||||
|
||||
Reference in New Issue
Block a user