feat: show host target level and format metrics

This commit is contained in:
zhx 2026-05-29 16:59:32 +08:00
parent 196438b02c
commit c484579358
3 changed files with 54 additions and 6 deletions

View File

@ -4,7 +4,7 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
<title>Host Center</title>
<link rel="stylesheet" href="./style.css?v=20260429-0300" />
<link rel="stylesheet" href="./style.css?v=20260529-1200" />
</head>
<body>
<div class="host-center" aria-label="Host Center" data-i18n-aria="page_label" data-loading="true" data-view="loading">
@ -56,7 +56,10 @@
</div>
<div class="vertical-line" aria-hidden="true"></div>
<div class="metric gift-metric">
<div class="label" data-i18n="target">Target</div>
<div class="target-label-row">
<div class="label" data-i18n="target">Target</div>
<span class="target-level" id="currentTargetLevel">Lv. -</span>
</div>
<button class="gift-value" type="button" aria-live="polite" aria-label="Open daily data" data-i18n-aria="open_daily_data">
<span class="amount-text" id="currentGiftValue"></span>
<span class="chevron">&rsaquo;</span>
@ -185,6 +188,6 @@
<div class="loading-copy">loading....</div>
</div>
</div>
<script src="./script.js?v=20260428-2120" defer></script>
<script src="./script.js?v=20260529-1200" defer></script>
</body>
</html>

View File

@ -245,6 +245,7 @@
let currentSalary = "0.00";
let currentStreamingDuration = "0";
let currentGiftValue = "0";
let currentTargetLevel = "-";
let currentDailyTargets = [];
let foundJoinAgency = null;
let pendingJoinRecord = null;
@ -658,7 +659,7 @@
const numericValue = Number(value);
if (!Number.isFinite(numericValue)) return "0";
const safeValue = Math.max(0, numericValue);
return Number.isInteger(safeValue) ? String(safeValue) : String(Number(safeValue.toFixed(2)));
return formatCountValue(safeValue);
}
function pickStreamingDuration(body) {
@ -675,11 +676,20 @@
function formatCountValue(value) {
if (value === null || value === undefined || value === "") return "-";
const number = Number(value);
if (Number.isFinite(number) && Number.isInteger(number)) return String(number);
if (Number.isFinite(number)) return String(Number(number.toFixed(2)));
if (Number.isFinite(number)) {
return new Intl.NumberFormat("en-US", {
maximumFractionDigits: 2
}).format(number);
}
return String(value);
}
function renderCurrentTargetLevel(value) {
currentTargetLevel = formatCountValue(value);
const levelNode = document.querySelector("#currentTargetLevel");
if (levelNode) levelNode.textContent = `Lv. ${currentTargetLevel}`;
}
function renderCurrentGiftValue(value) {
currentGiftValue = formatCountValue(value === null || value === undefined || value === "" ? 0 : value);
const giftNode = document.querySelector("#currentGiftValue");
@ -698,6 +708,11 @@
return target.acceptGiftValue ?? target.giftValue ?? target.giftScore ?? target.currentGiftValue ?? null;
}
function pickTargetLevel(workTarget) {
const target = workTarget?.target || workTarget || {};
return target?.settlementResult?.level ?? target.level ?? "-";
}
function pickDailyTargets(workTarget) {
const target = workTarget?.target || workTarget || {};
return Array.isArray(target.dailyTargets) ? target.dailyTargets : [];
@ -767,6 +782,7 @@
const workTarget = pickFirstMemberWorkTarget(memberWork);
renderStreamingDuration(pickStreamingDuration(memberWork));
renderCurrentGiftValue(pickGiftValue(workTarget) ?? 0);
renderCurrentTargetLevel(pickTargetLevel(workTarget));
renderDailyTargets(pickDailyTargets(workTarget));
}

View File

@ -471,6 +471,35 @@ a {
line-height: 1.12;
}
.target-label-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
min-height: 36px;
}
.target-label-row .label {
min-height: 0;
}
.target-level {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 42px;
min-height: 22px;
flex: 0 0 auto;
padding: 0 7px;
border-radius: 999px;
background: #f1fbf8;
color: #18a777;
font-size: 12px;
font-weight: 950;
line-height: 1;
white-space: nowrap;
}
.value {
margin-top: 4px;
color: #292d33;