feat(modal): add rollout telemetry foundation

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
kate522andClaude Fable 5 committed 2026-08-04 21:23:04 +08:00
1 parent 8b728295a9
commit 113a6bcab0
14 files changed
+320 -1

No files matched your search

@@ -25,6 +25,16 @@ export const toolsSection = {
canonicalDomain: 'tools',
section: 'backup',
}),
schemaPage({
key: 'tools-modal-rollout',
name: 'ToolsModalRollout',
label: '前台弹窗灰度',
route: '/tools/modal-rollout',
title: '前台弹窗灰度',
desc: '按领域控制前台弹窗新流程的分阶段发布。',
canonicalDomain: 'tools',
section: 'modal-rollout',
}),
customPage({
key: 'tools-health',
name: 'ToolsHealth',
@@ -7,10 +7,12 @@ import { importExportSchema } from './import-export.js'
import { healthSchema } from './health.js'
import { emailRollbackSchema } from './email-rollback.js'
import { backupSchema } from './backup.js'
import { modalRolloutSchema } from './modal-rollout.js'
export const toolsSchemas = {
'import-export': importExportSchema,
health: healthSchema,
'email-rollback': emailRollbackSchema,
backup: backupSchema,
'modal-rollout': modalRolloutSchema,
}
@@ -0,0 +1,45 @@
export const modalRolloutSchema = {
key: 'tools.modal-rollout',
title: '前台弹窗灰度',
icon: 'fas fa-bolt',
description: '按领域控制前台弹窗新流程的分阶段发布。',
defaults: {
frontend_modal_rollout_identity: false,
frontend_modal_rollout_badges: false,
frontend_modal_rollout_orders: false,
frontend_modal_rollout_vip: false,
},
groups: [
{
key: 'modal-rollout',
title: '弹窗新流程开关',
icon: 'fas fa-toggle-on',
fields: [
{
key: 'frontend_modal_rollout_identity',
label: '官方认证新流程',
type: 'switch',
help: '启用统一弹窗运行时与认证快照流程。',
},
{
key: 'frontend_modal_rollout_badges',
label: '徽章新流程',
type: 'switch',
help: '启用统一 JSON 徽章流程和短缓存。',
},
{
key: 'frontend_modal_rollout_orders',
label: '订单新流程',
type: 'switch',
help: '启用订单详情快速开壳与状态同步流程。',
},
{
key: 'frontend_modal_rollout_vip',
label: '会员支付新流程',
type: 'switch',
help: '启用统一会员购买、支付和结果同步流程。',
},
],
},
],
}
+112
View File
@@ -0,0 +1,112 @@
/**
* Frontend modal performance marks.
*
* Records only bounded domain/event names and timing data. Never include
* payment credentials, order contents, identity evidence, or user payloads.
*
* @package AKSRT
*/
(function (window) {
'use strict';
var allowedKinds = {
identity: true,
badges: true,
orders: true,
vip: true,
};
var allowedEvents = {
click: true,
shell: true,
'first-content': true,
ready: true,
'action-start': true,
'action-end': true,
unauthorized: true,
error: true,
};
var sessions = Object.create(null);
var sequence = 0;
var maxSessions = 100;
function normalize(value, fallback) {
var normalized = String(value || fallback || '').toLowerCase().replace(/[^a-z0-9-]/g, '');
return normalized || fallback;
}
function now() {
return window.performance && typeof window.performance.now === 'function'
? window.performance.now()
: 0;
}
function markName(session, event) {
return 'aksrt-modal-' + session.kind + '-' + session.id + '-' + event;
}
function emit(session, event) {
if (!window.performance || typeof window.performance.mark !== 'function') return;
var name = markName(session, event);
window.performance.mark(name);
session.marks[event] = name;
if (typeof window.performance.measure === 'function' && session.marks.click && event !== 'click') {
try {
window.performance.measure(
'aksrt-modal-' + session.kind + '-' + session.id + '-click-to-' + event,
session.marks.click,
name
);
} catch (error) {
// A missing mark must never affect the modal interaction.
}
}
}
function start(kind) {
var safeKind = normalize(kind, 'unknown');
if (!allowedKinds[safeKind]) safeKind = 'unknown';
sequence += 1;
var id = String(sequence);
var session = {
id: id,
kind: safeKind,
startedAt: now(),
marks: Object.create(null),
};
sessions[id] = session;
emit(session, 'click');
var ids = Object.keys(sessions);
while (ids.length > maxSessions) {
delete sessions[ids.shift()];
}
return id;
}
function mark(id, event) {
var session = sessions[String(id || '')];
var safeEvent = normalize(event, 'error');
if (!session || !allowedEvents[safeEvent]) return;
emit(session, safeEvent);
}
function finish(id) {
mark(id, 'ready');
}
function fail(id) {
mark(id, 'error');
}
window.AksrtModalTelemetry = {
start: start,
mark: mark,
finish: finish,
error: fail,
};
})(window);
+10
View File
@@ -98,18 +98,28 @@
function openDetail(orderNumber) {
if (!detailModal || !detailBody) return;
detailOrderNumber = orderNumber;
var telemetry = window.AksrtModalTelemetry;
var telemetryId = telemetry && typeof telemetry.start === "function" ? telemetry.start("orders") : "";
function telemetryMark(event) {
if (telemetry && telemetryId && typeof telemetry.mark === "function") telemetry.mark(telemetryId, event);
}
detailBody.innerHTML = '<p class="muted-2-color">加载中…</p>';
detailFooter.innerHTML = "";
detailModal.hidden = false;
document.documentElement.classList.add("aksrt-modal-open");
telemetryMark("shell");
request(orderPath(orderNumber), undefined, "GET").then(function (result) {
if (orderNumber !== detailOrderNumber) return;
if (!result.success || !result.data) {
telemetryMark("error");
detailBody.innerHTML = '<p class="c-red">' + escapeHtml(result.message || "订单不存在") + "</p>";
return;
}
telemetryMark("first-content");
renderDetail(result.data);
telemetryMark("ready");
}).catch(function () {
telemetryMark("error");
detailBody.innerHTML = '<p class="c-red">网络错误,请稍后重试</p>';
});
}
+11
View File
@@ -252,21 +252,29 @@
}
if (loading) return;
loading = true;
var telemetry = window.AksrtModalTelemetry;
var telemetryId = telemetry && typeof telemetry.start === "function" ? telemetry.start("vip") : "";
function telemetryMark(event) {
if (telemetry && telemetryId && typeof telemetry.mark === "function") telemetry.mark(telemetryId, event);
}
var shell = ensureModalShell();
var body = shell.querySelector("[data-aksrt-vip-modal-body]");
if (body) body.innerHTML = '<div class="text-center padding-20 muted-2-color">加载中…</div>';
openModal();
telemetryMark("shell");
api("/pay/vip/modal", { query: { vip_level: level } })
.then(function (r) {
loading = false;
if (r.status === 401) {
telemetryMark("unauthorized");
closeModal();
var login = document.querySelector(".signin-loader");
if (login) login.click();
return;
}
if (!r.ok || !r.json || !r.json.html) {
telemetryMark("error");
if (body) {
body.innerHTML =
'<div class="text-center padding-20 c-red">' +
@@ -277,11 +285,14 @@
}
if (body) {
body.innerHTML = r.json.html;
telemetryMark("first-content");
bindModalUi(body);
telemetryMark("ready");
}
})
.catch(function () {
loading = false;
telemetryMark("error");
if (body) {
body.innerHTML = '<div class="text-center padding-20 c-red">网络错误</div>';
}
+15 -1
View File
@@ -63,8 +63,20 @@
var currentUuid = config.currentUuid || '';
var pollTimer = null;
var shouldPoll = false;
var telemetry = window.AksrtModalTelemetry;
var telemetryId = '';
function open() { modal.classList.add('is-open'); modal.setAttribute('aria-hidden', 'false'); document.body.style.overflow = 'hidden'; }
function telemetryMark(event) {
if (telemetry && telemetryId && typeof telemetry.mark === 'function') telemetry.mark(telemetryId, event);
}
function open() {
telemetryId = telemetry && typeof telemetry.start === 'function' ? telemetry.start('identity') : '';
modal.classList.add('is-open');
modal.setAttribute('aria-hidden', 'false');
document.body.style.overflow = 'hidden';
telemetryMark('shell');
}
function close() { modal.classList.remove('is-open'); modal.setAttribute('aria-hidden', 'true'); document.body.style.overflow = ''; }
root.querySelectorAll('[data-auth-modal-open]').forEach(function (button) { button.addEventListener('click', open); });
modal.querySelectorAll('[data-auth-modal-close]').forEach(function (button) { button.addEventListener('click', close); });
@@ -80,6 +92,7 @@
function render(data) {
if (!data) return;
telemetryMark('first-content');
currentUuid = data.uuid || currentUuid;
if (statusBox) statusBox.hidden = false;
if (createForm) createForm.hidden = true;
@@ -102,6 +115,7 @@
} else {
stopPolling();
}
telemetryMark('ready');
}
function refresh() {
+11
View File
@@ -93,6 +93,12 @@
var wearSlot = modal.querySelector('[data-aksrt-badges-wear-slot]');
var state = { data: null, detailSlug: '' };
var telemetry = window.AksrtModalTelemetry;
var telemetryId = '';
function telemetryMark(event) {
if (telemetry && telemetryId && typeof telemetry.mark === 'function') telemetry.mark(telemetryId, event);
}
function findItem(slug) {
var cats = (state.data && state.data.categories) || [];
@@ -230,6 +236,7 @@
}
return api('/users/' + userId + '/badges').then(function (r) {
if (!r.ok || !r.json || !r.json.data) {
telemetryMark('error');
if (body) {
body.innerHTML = '<div class="uc-badges-error">' +
'<span class="c-red em09">' + escapeHtml('加载失败') + '</span>' +
@@ -239,8 +246,10 @@
return;
}
state.data = r.json.data;
telemetryMark('first-content');
renderHead();
renderGrid();
telemetryMark('ready');
});
}
@@ -271,7 +280,9 @@
openers.forEach(function (btn) {
btn.addEventListener('click', function (e) {
e.preventDefault();
telemetryId = telemetry && typeof telemetry.start === 'function' ? telemetry.start('badges') : '';
openModal();
telemetryMark('shell');
showView('grid');
load();
});