feat: prepare ARR for controlled public deployment

arr_web/static/h5.js

@@ -0,0 +1,129 @@
+(() => {
+  "use strict";
+
+  const colors = ["#2563eb", "#0f9f6e", "#7a5af8", "#f79009", "#06aed5", "#e0528d", "#64748b", "#84cc16"];
+  const BUSINESS_TIME_ZONE = "Asia/Bangkok";
+  const $ = (selector) => document.querySelector(selector);
+
+  function escapeHtml(value) {
+    return String(value ?? "").replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&#039;");
+  }
+
+  function monthNow() {
+    const parts = Object.fromEntries(new Intl.DateTimeFormat("en-CA", {
+      timeZone: BUSINESS_TIME_ZONE,
+      year: "numeric",
+      month: "2-digit",
+    }).formatToParts(new Date()).map((part) => [part.type, part.value]));
+    return `${parts.year}-${parts.month}`;
+  }
+
+  function integer(value) {
+    return new Intl.NumberFormat("zh-CN", { maximumFractionDigits: 0 }).format(Number(value || 0));
+  }
+
+  function money(value, compact = true) {
+    const amount = Number(value || 0);
+    if (compact && amount >= 10000) return `¥${(amount / 10000).toFixed(amount >= 100000 ? 1 : 2)}万`;
+    return new Intl.NumberFormat("zh-CN", { style: "currency", currency: "CNY", maximumFractionDigits: 0 }).format(amount);
+  }
+
+  async function api(path) {
+    const response = await fetch(path, { credentials: "same-origin" });
+    const payload = await response.json();
+    if (!response.ok || !payload.ok) throw new Error(payload?.error?.message || "数据读取失败");
+    return payload.data;
+  }
+
+  function notify(message) {
+    const node = $("#h5-message");
+    node.textContent = message;
+    node.classList.add("visible");
+    window.setTimeout(() => node.classList.remove("visible"), 3000);
+  }
+
+  function reset(message) {
+    ["#h5-rooms", "#h5-revenue", "#h5-nights", "#h5-companies", "#h5-donut-total"].forEach((id) => { $(id).textContent = "—"; });
+    $("#h5-ranking").innerHTML = `<p class="empty">${escapeHtml(message)}</p>`;
+    $("#h5-matrix").innerHTML = `<p class="empty">${escapeHtml(message)}</p>`;
+    $("#h5-legend").innerHTML = "";
+    $("#h5-donut").style.background = "#d8e0ec";
+  }
+
+  function renderSales(channels) {
+    const sorted = [...channels].sort((a, b) => Number(b.totals.total_price) - Number(a.totals.total_price));
+    const total = sorted.reduce((sum, item) => sum + Number(item.totals.total_price || 0), 0);
+    const maximum = Math.max(1, ...sorted.map((item) => Number(item.totals.total_price || 0)));
+    let cursor = 0;
+    const stops = sorted.map((item, index) => {
+      const start = cursor;
+      cursor += total ? Number(item.totals.total_price || 0) / total * 100 : 0;
+      return `${colors[index % colors.length]} ${start.toFixed(3)}% ${cursor.toFixed(3)}%`;
+    });
+    $("#h5-donut").style.background = total ? `conic-gradient(${stops.join(",")})` : "#d8e0ec";
+    $("#h5-donut-total").textContent = money(total);
+    $("#h5-legend").innerHTML = sorted.map((item, index) => `
+      <span class="mobile-legend-item"><i data-color="${colors[index % colors.length]}"></i><span>${escapeHtml(item.worksheet)}</span><b>${total ? (Number(item.totals.total_price || 0) / total * 100).toFixed(1) : "0.0"}%</b></span>`).join("");
+    [...document.querySelectorAll("#h5-legend .mobile-legend-item i")].forEach((marker) => { marker.style.backgroundColor = marker.dataset.color; });
+    $("#h5-ranking").innerHTML = sorted.length ? sorted.map((item) => `
+      <div class="mobile-rank"><span title="${escapeHtml(item.worksheet)}">${escapeHtml(item.worksheet)}</span><span class="track"><i data-width="${Number(item.totals.total_price || 0) / maximum * 100}"></i></span><b>${money(item.totals.total_price)}</b></div>`).join("") : '<p class="empty">暂无销售数据</p>';
+    [...document.querySelectorAll("#h5-ranking .track i")].forEach((bar) => { bar.style.width = `${Number(bar.dataset.width || 0)}%`; });
+  }
+
+  function renderMatrix(data) {
+    const rooms = data.overall.room_types.map((item) => item.room_type);
+    if (!rooms.length || !data.channels.length) {
+      $("#h5-matrix").innerHTML = '<p class="empty">暂无渠道与房型数据</p>';
+      return;
+    }
+    const rows = data.channels.map((channel) => {
+      const values = new Map(channel.room_types.map((item) => [item.room_type, item.rooms_sold]));
+      return `<tr><td><b>${escapeHtml(channel.worksheet)}</b></td>${rooms.map((room) => `<td>${integer(values.get(room) || 0)}</td>`).join("")}<td class="total">${integer(channel.totals.rooms_sold)}</td></tr>`;
+    }).join("");
+    const totals = new Map(data.overall.room_types.map((item) => [item.room_type, item.rooms_sold]));
+    $("#h5-matrix").innerHTML = `<table><thead><tr><th>渠道</th>${rooms.map((room) => `<th>${escapeHtml(room)}</th>`).join("")}<th>合计</th></tr></thead><tbody>${rows}<tr><td class="total">合计</td>${rooms.map((room) => `<td class="total">${integer(totals.get(room) || 0)}</td>`).join("")}<td class="total">${integer(data.overall.totals.rooms_sold)}</td></tr></tbody></table>`;
+  }
+
+  function render(data) {
+    const totals = data.overall.totals;
+    $("#h5-rooms").textContent = integer(totals.rooms_sold);
+    $("#h5-revenue").textContent = money(totals.total_price);
+    $("#h5-nights").textContent = integer(totals.room_nights);
+    $("#h5-companies").textContent = integer(totals.channel_count);
+    $("#h5-updated").textContent = `更新至 ${data.max_arrival_date || "—"} · 数据库月报快照`;
+    renderSales(data.channels);
+    renderMatrix(data);
+  }
+
+  async function load() {
+    const month = $("#h5-month").value || monthNow();
+    try {
+      render(await api(`/api/analytics?month=${encodeURIComponent(month)}`));
+    } catch (error) {
+      reset("该月份暂无可用看板数据");
+      notify(error.message);
+    }
+  }
+
+  async function boot() {
+    const connection = $("#h5-connection");
+    try {
+      const health = await api("/api/health");
+      connection.classList.add(health.database_ready ? "ready" : "error");
+      connection.lastChild.textContent = health.database_ready ? " 数据库已连接" : " 数据服务未连接";
+    } catch (_) {
+      connection.classList.add("error");
+      connection.lastChild.textContent = " 数据服务未连接";
+    }
+    let months = [];
+    try { months = await api("/api/months"); } catch (_) { /* handled by load */ }
+    const select = $("#h5-month");
+    select.innerHTML = months.length
+      ? months.map((item) => `<option value="${escapeHtml(item.month_key)}">${escapeHtml(item.month_key)}</option>`).join("")
+      : `<option value="${monthNow()}">${monthNow()}</option>`;
+    select.addEventListener("change", load);
+    await load();
+  }
+
+  boot();
+})();