From fc52caddfdfc3b182c364d7499a0c139287985b6 Mon Sep 17 00:00:00 2001
From: Zichao Lin <earthjasonlin@163.com>
Date: Wed, 5 Aug 2026 07:41:23 +0800
Subject: [PATCH] =?UTF-8?q?fix(ui):=20=E8=87=AA=E5=8A=A8=E5=88=B7=E6=96=B0?=
 =?UTF-8?q?=E6=97=B6=E9=9D=99=E9=BB=98=E6=9B=B4=E6=96=B0=E5=8D=A1=E7=89=87?=
 =?UTF-8?q?=EF=BC=8C=E4=B8=8D=E5=86=8D=E9=87=8D=E6=92=AD=E8=BF=9B=E5=85=A5?=
 =?UTF-8?q?=E5=8A=A8=E7=94=BB=E5=AF=BC=E8=87=B4=E9=97=AA=E7=83=81=20=20-?=
 =?UTF-8?q?=20renderAccounts/renderPlatforms=20=E5=A2=9E=E5=8A=A0=20animat?=
 =?UTF-8?q?e=20=E5=8F=82=E6=95=B0=20-=20refresh=20=E8=87=AA=E5=8A=A8?=
 =?UTF-8?q?=E8=BD=AE=E8=AF=A2=E4=BC=A0=20false=EF=BC=88=E6=97=A0=E5=8A=A8?=
 =?UTF-8?q?=E7=94=BB=EF=BC=89=EF=BC=8C=E9=A6=96=E6=AC=A1=E6=B8=B2=E6=9F=93?=
 =?UTF-8?q?=E4=B8=8E=E7=94=A8=E6=88=B7=E6=93=8D=E4=BD=9C=E4=BF=9D=E7=95=99?=
 =?UTF-8?q?=20stagger=20=E5=8A=A8=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/static/app.js | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/app/static/app.js b/app/static/app.js
index 80a3fcb..1895fa6 100644
--- a/app/static/app.js
+++ b/app/static/app.js
@@ -13,6 +13,7 @@
   let filterPlatform = 0;
   const checkingIds = new Set();
   let historyCache = {};
+  let hasRendered = false;   // 首次渲染保留进入动画，自动刷新静默更新
   const accountWindows = {};   // {accountId: 'all'|'1h'|'1d'|'1w'|'1mo'|'1yr'}
   const windowCache = {};      // {'aid:win': [...]}
 
@@ -149,8 +150,9 @@
       platforms = plat;
       historyCache = hist || {};
       providersList = provs || [];
-      renderAccounts();
-      if (!document.getElementById("view-platforms").classList.contains("hidden")) renderPlatforms();
+      renderAccounts(!hasRendered);
+      if (!document.getElementById("view-platforms").classList.contains("hidden")) renderPlatforms(!hasRendered);
+      hasRendered = true;
       const d = new Date();
       document.getElementById("refresh-time").textContent =
         d.toLocaleTimeString("zh-CN", { hour12: false });
@@ -174,7 +176,7 @@
     return { cls: "pending", text: "待检查" };
   }
 
-  function accountCard(a, idx) {
+  function accountCard(a, idx, animate = true) {
     const st = statusInfo(a);
     const plat = platforms.find((p) => p.id === a.platform_id) || {};
     const b = brandStyle(plat.icon || "");
@@ -188,6 +190,7 @@
       st.cls === "disabled" ? "disabled" : "",
       st.cls === "pending" ? "pending" : "",
     ].join(" ").trim();
+    const animStyle = animate ? `animation-delay:${Math.min(idx, 12) * 40}ms` : "animation:none";
     const win = accountWindows[a.id] || "all";
     let hist;
     if (win === "all") {
@@ -203,7 +206,7 @@
       ? `<button class="btn sm check-btn loading" disabled><span class="spinner"></span>检查中</button>`
       : `<button class="btn sm check-btn" data-act="check" data-id="${a.id}" ${!a.enabled ? "disabled title=启用后可用" : ""}>${ICONS.refresh}立即检查</button>`;
     return `
-      <div class="${cardCls}" style="animation-delay:${Math.min(idx, 12) * 40}ms">
+      <div class="${cardCls}" style="${animStyle}">
         <div class="card-head">
           <div class="badge" style="background:${b.color}">${escapeHtml(b.abbr)}</div>
           <div class="card-title">
@@ -290,7 +293,7 @@
     return `<svg class="sparkline" viewBox="0 0 ${W} ${H}" preserveAspectRatio="none">${thLine}<polyline points="${pts.join(" ")}" fill="none" stroke="${lineColor}" stroke-width="1.5" stroke-linejoin="round" stroke-linecap="round" vector-effect="non-scaling-stroke"/></svg>`;
   }
 
-  function renderAccounts() {
+  function renderAccounts(animate = true) {
     const grid = document.getElementById("account-grid");
     const stats = { total: accounts.length, ok: 0, below: 0, error: 0, disabled: 0, pending: 0 };
     accounts.forEach((a) => {
@@ -326,7 +329,7 @@
     });
     list = [...list].sort((x, y) => STATUS_ORDER[statusInfo(x).cls] - STATUS_ORDER[statusInfo(y).cls]);
 
-    grid.innerHTML = list.map(accountCard).join("");
+    grid.innerHTML = list.map((a, i) => accountCard(a, i, animate)).join("");
     const hint = document.getElementById("empty-hint");
     if (accounts.length > 0) {
       hint.classList.add("hidden");
@@ -343,7 +346,7 @@
 
   /* ---------- 渲染：平台 ---------- */
 
-  function renderPlatforms() {
+  function renderPlatforms(animate = true) {
     const list = document.getElementById("platform-list");
     if (platforms.length === 0) {
       list.innerHTML = `<div class="empty-hint">暂无平台（代码内置平台会在启动时自动同步）。</div>`;
@@ -352,8 +355,9 @@
     list.innerHTML = platforms.map((p, i) => {
       const b = brandStyle(p.icon || "");
       const prov = providersList.find((x) => x.id === p.provider_id);
+      const animStyle = animate ? `animation-delay:${Math.min(i, 10) * 35}ms` : "animation:none";
       return `
-        <div class="platform-row ${p.enabled ? "" : "platform-off"}" style="animation-delay:${Math.min(i, 10) * 35}ms">
+        <div class="platform-row ${p.enabled ? "" : "platform-off"}" style="${animStyle}">
           <div class="badge" style="background:${b.color}">${escapeHtml(b.abbr)}</div>
           <div class="platform-info">
             <div class="platform-name">${escapeHtml(p.name)}