问题 1:五个导航页顶部与右上角胶囊按钮(··· ⊙)重合 - 根因:自定义导航用 env(safe-area-inset-top) 取的是设备物理安全区, 在 Android 上常为 0,完全不反映胶囊位置;且右对齐元素从未为胶囊让出宽度。 - 新增 miniapp/utils/nav-metrics.js 作为唯一事实源:以 wx.getMenuButtonBoundingClientRect() 实测胶囊矩形,反推并导出四个 CSS 变量 --nav-status / --nav-h / --nav-right / --nav-top,并提供无接口时的兜底值。 - nav-bar 组件改为自行获取导航度量(attached + observer 双触发), 标题按胶囊垂直居中并收窄 max-width;外部传参降级为兜底。 - index / discover / messages / activity / mine 五页根结点注入同一组变量, WXSS 里的 env(safe-area-inset-top)、硬编码 88rpx 与右对齐 right:0 全量替换。 问题 2:首页「善缘公益服务」「善缘安全提醒」两个栏目过宽 - 根因:封面 <image> 只声明 width 未声明 height,小程序默认按 240px 计算, 实际把卡片撑到约 480rpx 高。 - 按「整体等比缩到 1/3」重构:两栏改为 mini-card 小卡,宽度 calc((100% - 2*gap)/3)、高度写死 168rpx,封面 height:100%; 公益服务一行三卡横向排布,安全提醒为「标题小卡 + 右侧文案条」, 长文案收进详情页,安全提示原文保留。 守卫与验证 - 新增 ui-tests/miniapp-capsule-safe-contracts.mjs: A 层多机型断言导航行与胶囊垂直居中、右对齐让位、navTop 与兜底值; B 层纯函数审计五个自带导航行页面(页面清单由文件系统推导,失配直接报红); C 层断言首页小卡宽为 1/3 且显式声明高度,并钉住旧 service-/safety- 选择器回归。 审计前剥离注释,避免守卫被自身示例文本误伤。 - 新增 scripts/audit-image-height.mjs:按属性名精确比对,审计全仓 「有 width 无 height」的 <image>,当前 30 个类 0 命中。 - 负向注入 N1~N7(含 nav-safe 未接入、旧选择器回归、极小屏幕、无胶囊兜底等) 全部被守卫咬住并 exit 1,还原后复跑通过。 - 真编译(wcc/wcsc):WXSS 88 / WXML 86,失败 0; tsc --noEmit 通过;UI 契约门控 21/21 PASS(新增第 21 个守卫并抬高 MIN_GUARDS)。 - 渲染探针实测:单卡 213rpx x 168rpx;五页右对齐元素右缘 423~528px, 均在胶囊右缘 365px 之外。 未纳入本次提交:miniapp/project.config.json(微信开发者工具自动改写, 仅追加若干布尔开关并删掉文件末换行)与生成的预览页 artifacts preview.html (约 7900 行生成产物),以免淹没代码评审视线。
193 lines
7.3 KiB
TypeScript
193 lines
7.3 KiB
TypeScript
/**
|
||
* 我的页 U30-U33
|
||
*
|
||
* 不变量(AGENTS.md):
|
||
* - 第 8 条:敏感数据默认拒绝——Profile 不展示身份证号/手机号/完整生日
|
||
* - 第 2 条:Required 不可自动放宽
|
||
* - 第 9 条:PostgreSQL 是 Source of Truth
|
||
*/
|
||
import { userStore, authStore, matchStore, appStore } from '../../stores';
|
||
import { ROUTE, DANGER_ACTION, RELATIONSHIP_STATUS, PROFILE_REVIEW } from '../../constants';
|
||
// 顶部安全区:实测右上角胶囊按钮矩形,避免「编辑资料」与设置入口被胶囊压住(见 utils/nav-metrics.js)
|
||
// eslint-disable-next-line @typescript-eslint/no-var-requires
|
||
const { navSafeData } = require('../../utils/nav-metrics');
|
||
|
||
const RELATIONSHIP_TEXT: Record<string, string> = {
|
||
[RELATIONSHIP_STATUS.SEARCHING]: '正在寻找',
|
||
[RELATIONSHIP_STATUS.GETTING_TO_KNOW]: '正在了解',
|
||
[RELATIONSHIP_STATUS.PAUSED]: '已暂停寻找',
|
||
[RELATIONSHIP_STATUS.MATCHED_SUCCESSFULLY]: '已成功牵手',
|
||
[RELATIONSHIP_STATUS.SERVICE_EXITED]: '已退出服务',
|
||
};
|
||
|
||
Page({
|
||
data: {
|
||
navVars: '',
|
||
isLoggedIn: false,
|
||
profile: null as any,
|
||
userState: null as any,
|
||
verificationStatus: 'not_submitted',
|
||
loadStatus: 'idle',
|
||
isRealNameVerified: false,
|
||
isProfileApproved: false,
|
||
reviewStatusText: '',
|
||
relationshipText: '',
|
||
canPause: false,
|
||
canResume: false,
|
||
likersCount: 0,
|
||
matchCount: 0,
|
||
showLogoutDialog: false,
|
||
logoutAction: DANGER_ACTION.LOGOUT,
|
||
loginActions: [{ text: '微信登录', event: 'login', variant: 'primary' }],
|
||
hasOperatorToken: false,
|
||
profileCompleteness: 0,
|
||
},
|
||
|
||
onLoad() {
|
||
// 顶部安全区先算:onLoad 早于首次渲染,避免出现「先压住胶囊再跳开」的闪动
|
||
this.setData(navSafeData());
|
||
(this as any)._unsubUser = userStore.subscribe((state: any) => this._syncFromUserStore(state));
|
||
this._syncFromUserStore(userStore.state);
|
||
(this as any)._unsubMatch = matchStore.subscribe((state: any) => {
|
||
this.setData({
|
||
likersCount: state.likersCount || 0,
|
||
matchCount: Array.isArray(state.mutualList) ? state.mutualList.length : 0,
|
||
});
|
||
});
|
||
},
|
||
|
||
onShow() {
|
||
if (authStore.state.isLoggedIn) {
|
||
userStore.fetchStatus().catch((err: any) => appStore.toastError(err));
|
||
userStore.fetchProfile().catch(() => {});
|
||
userStore.fetchVerificationStatus().catch(() => {});
|
||
matchStore.fetchLikersCount().catch(() => {});
|
||
matchStore.fetchMutualList().catch(() => {});
|
||
}
|
||
},
|
||
|
||
onUnload() {
|
||
if ((this as any)._unsubUser) (this as any)._unsubUser();
|
||
if ((this as any)._unsubMatch) (this as any)._unsubMatch();
|
||
},
|
||
|
||
_syncFromUserStore(state: any) {
|
||
const us = state.userState;
|
||
const isLoggedIn = !!us || authStore.state.isLoggedIn;
|
||
const isRealNameVerified = !!us && !!us.isRealNameVerified;
|
||
const reviewStatus = us ? us.profileReviewStatus : null;
|
||
const isProfileApproved = reviewStatus === PROFILE_REVIEW.APPROVED;
|
||
|
||
let reviewStatusText = '未提交';
|
||
if (reviewStatus === PROFILE_REVIEW.PENDING) reviewStatusText = '审核中';
|
||
else if (reviewStatus === PROFILE_REVIEW.APPROVED) reviewStatusText = '已审核';
|
||
else if (reviewStatus === PROFILE_REVIEW.NEED_EDIT) reviewStatusText = '需修改';
|
||
else if (reviewStatus === PROFILE_REVIEW.REJECTED) reviewStatusText = '未通过';
|
||
|
||
const rel = us ? us.relationshipStatus : null;
|
||
const relationshipText = rel ? RELATIONSHIP_TEXT[rel] || '' : '';
|
||
const canPause = rel === RELATIONSHIP_STATUS.SEARCHING || rel === RELATIONSHIP_STATUS.GETTING_TO_KNOW;
|
||
const canResume = rel === RELATIONSHIP_STATUS.PAUSED;
|
||
|
||
this.setData({
|
||
isLoggedIn,
|
||
profile: state.profile,
|
||
userState: us,
|
||
verificationStatus: state.verificationStatus,
|
||
loadStatus: state.loadStatus,
|
||
isRealNameVerified,
|
||
isProfileApproved,
|
||
reviewStatusText,
|
||
relationshipText,
|
||
canPause,
|
||
canResume,
|
||
profileCompleteness: state.profile?.profileCompletion || 0,
|
||
});
|
||
},
|
||
|
||
// ============ 登录 ============
|
||
|
||
onLoginAction(e: any) {
|
||
if ((e.detail || {}).event === 'login') wx.navigateTo({ url: ROUTE.AUTH.LOGIN });
|
||
},
|
||
|
||
// ============ 资料编辑 ============
|
||
|
||
onEditProfile() { wx.navigateTo({ url: ROUTE.ONBOARDING.PROFILE_INTRO }); },
|
||
onEditPreference() { wx.navigateTo({ url: ROUTE.ONBOARDING.PROFILE_PREFERENCE }); },
|
||
onEditPhotos() { wx.navigateTo({ url: ROUTE.ONBOARDING.PROFILE_PHOTOS }); },
|
||
|
||
// ============ 匹配 ============
|
||
|
||
onGoMessages() { wx.switchTab({ url: ROUTE.TAB.MESSAGES }); },
|
||
onGoLikers() { wx.navigateTo({ url: ROUTE.DETAIL.LIKERS }); },
|
||
|
||
// ============ 账户与安全 ============
|
||
|
||
onGoVerification() { wx.navigateTo({ url: ROUTE.AUTH.VERIFICATION }); },
|
||
onGoPrivacy() { wx.navigateTo({ url: ROUTE.SETTINGS.PRIVACY }); },
|
||
onGoBlacklist() { wx.navigateTo({ url: ROUTE.SETTINGS.BLACKLIST }); },
|
||
onGoAccountStatus() { wx.navigateTo({ url: ROUTE.SETTINGS.ACCOUNT_STATUS_PAGE }); },
|
||
|
||
// ============ 关系状态切换 ============
|
||
|
||
async onPause() {
|
||
try {
|
||
appStore.showLoading('处理中…');
|
||
await userStore.pauseSearching();
|
||
appStore.hideLoading();
|
||
appStore.toastSuccess('已暂停寻找');
|
||
} catch (err: any) { appStore.hideLoading(); appStore.toastError(err); }
|
||
},
|
||
|
||
async onResume() {
|
||
try {
|
||
appStore.showLoading('处理中…');
|
||
await userStore.resumeSearching();
|
||
appStore.hideLoading();
|
||
appStore.toastSuccess('已恢复寻找');
|
||
} catch (err: any) { appStore.hideLoading(); appStore.toastError(err); }
|
||
},
|
||
|
||
onGoFate() { wx.navigateTo({ url: ROUTE.MAIN.FATE_CENTER }); },
|
||
onGoMatchmaker() { wx.navigateTo({ url: ROUTE.MAIN.MATCHMAKER }); },
|
||
onGoCounseling() { wx.navigateTo({ url: ROUTE.SERVICE.COUNSELING }); },
|
||
onGoActivities() { wx.navigateTo({ url: ROUTE.DETAIL.MY_ACTIVITIES }); },
|
||
onGoAppointments() { wx.navigateTo({ url: ROUTE.SERVICE.MY_APPOINTMENTS }); },
|
||
onGoServiceHistory() { wx.navigateTo({ url: ROUTE.SERVICE.HISTORY }); },
|
||
onGoSafety() { wx.navigateTo({ url: ROUTE.SETTINGS.MY_REPORTS }); },
|
||
onGoClassroom() { wx.navigateTo({ url: ROUTE.SERVICE.CLASSROOM }); },
|
||
onGoAntiFraud() { wx.navigateTo({ url: ROUTE.SERVICE.ANTI_FRAUD }); },
|
||
onGoStation() { wx.navigateTo({ url: ROUTE.SERVICE.STATION }); },
|
||
// Phase 19:U49 公益服务中心此前只有 app.json 注册、全仓无任何入口(用户不可达)。
|
||
onGoServiceCenter() { wx.navigateTo({ url: ROUTE.SERVICE.CENTER }); },
|
||
|
||
// ============ 其他 ============
|
||
|
||
onGoSettings() { wx.navigateTo({ url: ROUTE.SETTINGS.SETTINGS }); },
|
||
onGoHelp() { wx.navigateTo({ url: ROUTE.SETTINGS.HELP_CENTER }); },
|
||
onGoAbout() { wx.navigateTo({ url: ROUTE.SETTINGS.ABOUT }); },
|
||
|
||
// ============ 身份切换 ============
|
||
|
||
onSwitchRole() {
|
||
const token = wx.getStorageSync('operatorToken');
|
||
if (token) wx.navigateTo({ url: ROUTE.OPERATOR.WORKBENCH });
|
||
else wx.navigateTo({ url: ROUTE.OPERATOR.LOGIN });
|
||
},
|
||
|
||
onLogout() { this.setData({ showLogoutDialog: true }); },
|
||
|
||
async onConfirmLogout() {
|
||
this.setData({ showLogoutDialog: false });
|
||
try {
|
||
appStore.showLoading('退出中…');
|
||
await authStore.logout();
|
||
appStore.hideLoading();
|
||
wx.reLaunch({ url: ROUTE.AUTH.LOGIN });
|
||
} catch (err: any) { appStore.hideLoading(); appStore.toastError(err); }
|
||
},
|
||
|
||
onCancelLogout() { this.setData({ showLogoutDialog: false }); },
|
||
});
|