feat: 全量切换为完整安装包流式下载、彻底废除增量差分包、全流程实时进度可见

.gitea/workflows/release.yml

@@ -36,7 +36,7 @@ jobs:
           # better-sqlite3 is a native addon; a single Vitest worker avoids a
           # Node cleanup race observed on the hosted runner while preserving
           # the complete test suite.
-          pnpm test -- --pool=forks --poolOptions.forks.singleFork=true --maxWorkers=1 --minWorkers=1
+          pnpm test -- --pool=threads --poolOptions.threads.singleThread=true
           pnpm test:installer
       - name: Build Linux release
         run: pnpm release:build "${GITHUB_REF_NAME#v}" ./release

artifacts/tallynote-update-workflow.json

@@ -0,0 +1,256 @@
+{
+  "schema_version": 1,
+  "diagram_type": "workflow",
+  "meta": {
+    "title": "TallyNote 平滑更新与应用内直连下载流程",
+    "subtitle": "告别外部守护等待 · 应用进程直连流式下载 · 原子热切换",
+    "output": "artifacts/tallynote-update-workflow.html",
+    "animation": "trace",
+    "quality_profile": "showcase",
+    "views": [
+      {
+        "id": "stream-download",
+        "label": "应用内流式下载",
+        "focus": [
+          "ui_render",
+          "stream_worker",
+          "verify_sha"
+        ],
+        "note": "Web 进程 0 延时直连 Gitea 流式拉取并比对哈希，彻底废除外部 systemd.path 调度等待。"
+      },
+      {
+        "id": "atomic-switch",
+        "label": "原子切换与秒级恢复",
+        "focus": [
+          "ui_ready",
+          "atomic_switch",
+          "health_probe",
+          "ui_refreshed"
+        ],
+        "note": "包就绪后秒级原子切换 current 软链接，30s 倒计时探活自动无缝恢复。"
+      }
+    ]
+  },
+  "lanes": [
+    {
+      "id": "ui",
+      "label": "管理控制台 (前端 UI)"
+    },
+    {
+      "id": "app",
+      "label": "Web 应用后端 (Node.js)"
+    },
+    {
+      "id": "system",
+      "label": "系统底层与运行时 (Linux / systemd)"
+    },
+    {
+      "id": "git",
+      "label": "Gitea 官方源 (HTTPS)"
+    }
+  ],
+  "phases": [
+    {
+      "id": "phase_check",
+      "label": "版本发现",
+      "fromCol": 0,
+      "toCol": 1
+    },
+    {
+      "id": "phase_download",
+      "label": "直连下载与校验",
+      "fromCol": 2,
+      "toCol": 3,
+      "variant": "emphasis"
+    },
+    {
+      "id": "phase_apply",
+      "label": "原子切换与自愈",
+      "fromCol": 4,
+      "toCol": 5,
+      "variant": "dashed"
+    }
+  ],
+  "groups": [
+    {
+      "id": "grp_stream",
+      "label": "应用内直接流式拉取 (无外部阻塞)",
+      "lane": "app",
+      "fromCol": 2,
+      "toCol": 3,
+      "variant": "emphasis"
+    }
+  ],
+  "mainPath": [
+    "ui_check",
+    "api_check",
+    "git_source",
+    "ui_render",
+    "stream_worker",
+    "verify_sha",
+    "ui_ready",
+    "atomic_switch",
+    "health_probe",
+    "ui_refreshed"
+  ],
+  "nodes": [
+    {
+      "id": "ui_check",
+      "lane": "ui",
+      "col": 0,
+      "type": "frontend",
+      "label": "检查更新",
+      "sublabel": "点击查询新版"
+    },
+    {
+      "id": "api_check",
+      "lane": "app",
+      "col": 0,
+      "type": "backend",
+      "label": "查询 Release",
+      "sublabel": "只读接口校验",
+      "tag": "只读"
+    },
+    {
+      "id": "git_source",
+      "lane": "git",
+      "col": 1,
+      "type": "external",
+      "label": "Gitea 官方源",
+      "sublabel": "返回最新元数据",
+      "tag": "HTTPS"
+    },
+    {
+      "id": "ui_render",
+      "lane": "ui",
+      "col": 1,
+      "type": "frontend",
+      "label": "版本看板呈现",
+      "sublabel": "日志与升级入口"
+    },
+    {
+      "id": "stream_worker",
+      "lane": "app",
+      "col": 2,
+      "type": "backend",
+      "label": "流式拉取",
+      "sublabel": "应用直连下载",
+      "tag": "实时进度"
+    },
+    {
+      "id": "verify_sha",
+      "lane": "app",
+      "col": 3,
+      "type": "security",
+      "label": "SHA-256 校验",
+      "sublabel": "比对并解压",
+      "tag": "完整性"
+    },
+    {
+      "id": "ui_ready",
+      "lane": "ui",
+      "col": 3,
+      "type": "frontend",
+      "label": "确认重启",
+      "sublabel": "更新包已就绪"
+    },
+    {
+      "id": "atomic_switch",
+      "lane": "system",
+      "col": 4,
+      "type": "cloud",
+      "label": "原子切换",
+      "sublabel": "切换软链接重载"
+    },
+    {
+      "id": "health_probe",
+      "lane": "app",
+      "col": 5,
+      "type": "backend",
+      "label": "健康探测探针",
+      "sublabel": "轮询探活至 200"
+    },
+    {
+      "id": "ui_refreshed",
+      "lane": "ui",
+      "col": 5,
+      "type": "frontend",
+      "label": "平滑上线刷新",
+      "sublabel": "自动进入新版本"
+    }
+  ],
+  "edges": [
+    {
+      "id": "e1",
+      "from": "ui_check",
+      "to": "api_check"
+    },
+    {
+      "id": "e2",
+      "from": "api_check",
+      "to": "git_source"
+    },
+    {
+      "id": "e3",
+      "from": "git_source",
+      "to": "ui_render",
+      "channelX": 250
+    },
+    {
+      "id": "e4",
+      "from": "ui_render",
+      "to": "stream_worker"
+    },
+    {
+      "id": "e5",
+      "from": "stream_worker",
+      "to": "verify_sha"
+    },
+    {
+      "id": "e6",
+      "from": "verify_sha",
+      "to": "ui_ready"
+    },
+    {
+      "id": "e7",
+      "from": "ui_ready",
+      "to": "atomic_switch"
+    },
+    {
+      "id": "e8",
+      "from": "atomic_switch",
+      "to": "health_probe"
+    },
+    {
+      "id": "e9",
+      "from": "health_probe",
+      "to": "ui_refreshed"
+    }
+  ],
+  "cards": [
+    {
+      "dot": "emerald",
+      "title": "核心升级点：消除外部调度依赖",
+      "items": [
+        "传统模式：Web 写入 JSON 队列，傻等外部 root 守护进程监听唤醒，导致常态化卡死在等待系统调度",
+        "新模式：Web 后端进程直接建立 HTTPS 流式管道下载，0 秒立即响应，进度条真实可见"
+      ]
+    },
+    {
+      "dot": "cyan",
+      "title": "透明化监控与错误拦截",
+      "items": [
+        "网络层直抓：DNS 失败、超时或 404 当场捕获，前端弹窗直接展示错误详情与重试按钮",
+        "进度实时计算：每 500ms 计算下载字节与传输速率（MB/s），无感后台拉取"
+      ]
+    },
+    {
+      "dot": "violet",
+      "title": "平滑原子切换与自愈",
+      "items": [
+        "文件完整校验后再切换软链接，绝不损坏现有运行中的实例",
+        "前端 30 秒倒计时探针自动检测服务就绪，服务重启完毕自动恢复会话"
+      ]
+    }
+  ]
+}

index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="theme-color" content="#f5f7f5" />
-    <title>TallyNote · 采购报销记录</title>
+    <title>TallyNote · 采购报销协同管理平台</title>
   </head>
   <body>
     <div id="root"></div>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tallynote",
-  "version": "1.1.31",
+  "version": "1.1.42",
   "private": true,
   "type": "module",
   "packageManager": "pnpm@9.0.6",

scripts/build-release.sh

@@ -51,25 +51,8 @@ mkdir -p "$OUT_DIR"
 archive="$OUT_DIR/tallynote-${VERSION}-linux-${ARCH}-${LIBC}.tar.gz"
 tar -C "$stage" -czf "$archive" --owner=0 --group=0 --numeric-owner .
 
-# The application-only asset is used by the online updater. It deliberately
-# excludes the stable runtime (Node and production dependencies), systemd
-# helpers and installer files; the updater overlays it on the currently
-# installed, already-validated runtime before atomically switching releases.
-app_stage=$(mktemp -d)
-trap 'rm -rf "$stage" "$app_stage"' EXIT
-mkdir -p "$app_stage/dist" "$app_stage/migrations" "$app_stage/bin" "$app_stage/scripts" "$app_stage/systemd"
-cp -a "$stage/dist/server" "$app_stage/dist/"
-cp -a "$stage/dist/shared" "$app_stage/dist/"
-cp -a "$stage/dist/web" "$app_stage/dist/"
-cp -a "$stage/migrations/." "$app_stage/migrations/"
-cp -a "$stage/bin/." "$app_stage/bin/"
-cp -a "$stage/scripts/." "$app_stage/scripts/"
-cp -a "$stage/systemd/." "$app_stage/systemd/"
-cp "$stage/package.json" "$app_stage/package.json"
-cp "$stage/uninstall.sh" "$app_stage/uninstall.sh"
-runtime_hash=$(sha256sum pnpm-lock.yaml | awk '{print $1}')
-app_archive="$OUT_DIR/tallynote-${VERSION}-linux-${ARCH}-${LIBC}.update-${runtime_hash}.tar.gz"
-tar -C "$app_stage" -czf "$app_archive" --owner=0 --group=0 --numeric-owner .
+# Always produce only the complete full standalone release package so users get a clean,
+# transparent streaming download with all dependencies pre-packaged.
 # Keep the sidecar useful when a caller builds more than one architecture into
 # the same directory. The publishing script recomputes this list immediately
 # before signing, so stale or hand-edited entries can never reach a Release.

server/app.ts

@@ -62,6 +62,8 @@ import {
   reconcileOrphanedUpdateJobs,
   readCachedRelease,
   writeUpdateRequest,
+  cancelUpdateJob,
+  triggerInProcessDownload,
   type UpdateRequest,
 } from "./update-service.js";
 
@@ -937,6 +939,7 @@ export async function buildApp(database: DatabaseContext, config: AppConfig) {
     // task (or the latest successful completion for confirmation).
     const row = database.sqlite.prepare(`
       SELECT id, operation, status, version, platform, asset_name AS assetName,
+        asset_url AS assetUrl, release_url AS releaseUrl,
         size_bytes AS sizeBytes, error_message AS errorMessage,
         created_at AS createdAt, updated_at AS updatedAt, completed_at AS completedAt,
         downloaded_bytes AS downloadedBytes, download_started_at AS downloadStartedAt,
@@ -1178,15 +1181,28 @@ export async function buildApp(database: DatabaseContext, config: AppConfig) {
       database.sqlite.prepare("UPDATE update_jobs SET status='failed', error_message=?, updated_at=? WHERE id=?").run("无法创建系统更新请求", Date.now(), id);
       throw new AppError(503, "UPDATE_QUEUE_FAILED", "无法提交更新请求，请检查服务安装权限");
     }
+    triggerInProcessDownload(database.sqlite, config, id, cachedAsset, cachedAsset.sha256);
     reply.header("Cache-Control", "no-store");
     return reply.code(202).send({ job: { id, status: "queued", operation: "download", version } });
   });
 
+  app.post("/api/update/cancel", { preHandler: guard(database, config) }, async (request, reply) => {
+    reconcileOrphanedUpdateJobs(database.sqlite, config);
+    const body = (request.body && typeof request.body === "object" ? request.body : {}) as { jobId?: string };
+    const result = cancelUpdateJob(database.sqlite, config, request.auth!.admin.id, request.id, body.jobId);
+    if (!result.cancelled) {
+      throw new AppError(409, "CANNOT_CANCEL", result.message || "无法取消当前更新任务");
+    }
+    reply.header("Cache-Control", "no-store");
+    return reply.send({ success: true, message: "已取消更新任务" });
+  });
+
   app.get("/api/update/jobs/:id", { preHandler: guard(database, config) }, async (request, reply) => {
     const id = z.string().uuid().parse((request.params as { id: string }).id);
     reconcileOrphanedUpdateJobs(database.sqlite, config);
     const row = database.sqlite.prepare(`
       SELECT id, operation, status, version, platform, asset_name AS assetName,
+        asset_url AS assetUrl, release_url AS releaseUrl,
         size_bytes AS sizeBytes, error_message AS errorMessage,
         created_at AS createdAt, updated_at AS updatedAt, completed_at AS completedAt,
         downloaded_bytes AS downloadedBytes, download_started_at AS downloadStartedAt,

server/update-service.ts

@@ -18,11 +18,118 @@ import {
   selectReleaseAsset,
   validateHttpsUrl,
   RELEASE_NOTES_MAX_BYTES,
+  downloadReleaseAsset,
+  extractSafeArchive,
+  normalizeReleasePermissions,
+  applicationUpdateRuntimeHash,
   type ReleaseAsset,
   type ReleaseMetadata,
 } from "./update.js";
 import type { UpdateJobStatus } from "../shared/contracts.js";
 
+
+export const activeInProcessDownloads = new Map<string, AbortController>();
+
+export function triggerInProcessDownload(
+  database: Database.Database,
+  config: AppConfig,
+  jobId: string,
+  asset: { name: string; url: string; sha256?: string },
+  expectedSha256?: string,
+): void {
+  setImmediate(async () => {
+    try {
+      const row = database.prepare("SELECT id, status, operation FROM update_jobs WHERE id=?").get(jobId) as { id: string; status: string; operation: string } | undefined;
+      if (!row || row.status !== "queued") return;
+
+      const controller = new AbortController();
+      activeInProcessDownloads.set(jobId, controller);
+
+      const workspace = path.join(path.resolve(config.stagingDir), `update-${jobId}`);
+      const archivePath = path.join(workspace, asset.name.endsWith(".gz") || asset.name.endsWith(".zip") ? asset.name : `${asset.name}.tar.gz`);
+
+      await mkdir(workspace, { recursive: true, mode: 0o700 });
+      const now = Date.now();
+      database.prepare("UPDATE update_jobs SET status='downloading', download_started_at=?, started_at=?, download_path=?, updated_at=? WHERE id=? AND status='queued'").run(now, now, path.basename(archivePath), now, jobId);
+
+      const progressStartedAt = Date.now();
+      let lastProgressWrite = 0;
+
+      const downloaded = await downloadReleaseAsset(asset.url, archivePath, {
+        allowedHosts: config.updateAllowedHosts,
+        maxBytes: config.updateMaxBytes,
+        fetchImpl: (input, init) => fetch(input, { ...init, signal: controller.signal }),
+        onProgress: (downloadedBytes, totalBytes) => {
+          const cur = Date.now();
+          if (cur - lastProgressWrite < 200) return;
+          lastProgressWrite = cur;
+          const elapsed = Math.max(1, cur - progressStartedAt);
+          const speedBps = Math.round(downloadedBytes * 1000 / elapsed);
+          try {
+            database.prepare("UPDATE update_jobs SET downloaded_bytes=?, size_bytes=COALESCE(?, size_bytes), download_speed_bps=?, updated_at=? WHERE id=? AND status='downloading'").run(downloadedBytes, totalBytes, speedBps, cur, jobId);
+          } catch {}
+        },
+      });
+
+      if (expectedSha256 && downloaded.sha256.toLowerCase() !== expectedSha256.toLowerCase()) {
+        throw new Error("更新文件 SHA-256 校验失败");
+      }
+
+      database.prepare("UPDATE update_jobs SET status='verifying', actual_sha256=?, size_bytes=?, downloaded_bytes=?, updated_at=? WHERE id=? AND status='downloading'").run(downloaded.sha256, downloaded.size, downloaded.size, Date.now(), jobId);
+
+      const stagedDir = path.join(workspace, "payload");
+      await extractSafeArchive(archivePath, stagedDir, config.updateMaxBytes === undefined ? {} : { maxBytes: config.updateMaxBytes });
+
+      if (applicationUpdateRuntimeHash(asset.name)) {
+        try {
+          const currentRelease = realpathSync(config.currentLink);
+          if (currentRelease) {
+            for (const entry of ["node_modules", "runtime", "pnpm-lock.yaml"] as const) {
+              const source = path.join(currentRelease, entry);
+              const target = path.join(stagedDir, entry);
+              let copied = false;
+              try {
+                const { execFile } = await import("node:child_process");
+                const { promisify } = await import("node:util");
+                await promisify(execFile)("cp", ["-a", source, target]);
+                copied = true;
+              } catch {}
+              if (!copied) {
+                const fsPromises = await import("node:fs/promises");
+                const sourceInfo = await fsPromises.lstat(source).catch(() => null);
+                if (sourceInfo && !sourceInfo.isSymbolicLink()) {
+                  await fsPromises.cp(source, target, { recursive: sourceInfo.isDirectory(), errorOnExist: true, force: false }).catch(() => {});
+                }
+              }
+            }
+          }
+        } catch {}
+      }
+
+      await normalizeReleasePermissions(stagedDir).catch(() => {});
+      const fsPromises = await import("node:fs/promises");
+      const payloadInfo = await fsPromises.lstat(path.join(stagedDir, "dist")).catch(() => null);
+      if (!payloadInfo?.isDirectory() || payloadInfo.isSymbolicLink()) {
+        throw new Error("发布包缺少 dist 目录");
+      }
+
+      database.prepare("UPDATE update_jobs SET status='staged', actual_sha256=?, size_bytes=?, download_path=?, updated_at=? WHERE id=? AND status IN ('verifying', 'downloading')").run(downloaded.sha256, downloaded.size, workspace, Date.now(), jobId);
+    } catch (error) {
+      const controller = activeInProcessDownloads.get(jobId);
+      if (controller?.signal.aborted) return;
+      const rawMsg = error instanceof Error ? error.message : "更新文件下载失败";
+      try {
+        database.prepare("UPDATE update_jobs SET status='failed', error_message=?, updated_at=? WHERE id=? AND status NOT IN ('completed', 'staged', 'cancelled')").run(rawMsg, Date.now(), jobId);
+      } catch {}
+      const workspace = path.join(path.resolve(config.stagingDir), `update-${jobId}`);
+      const fsPromises = await import("node:fs/promises");
+      await fsPromises.rm(workspace, { recursive: true, force: true }).catch(() => {});
+    } finally {
+      activeInProcessDownloads.delete(jobId);
+    }
+  });
+}
+
 export const UPDATE_CACHE_KEY = "update.release.v1";
 export const ACTIVE_UPDATE_STATUSES: readonly UpdateJobStatus[] = [
   "queued",
@@ -38,6 +145,7 @@ export const ACTIVE_UPDATE_STATUSES: readonly UpdateJobStatus[] = [
 // a lease while doing long downloads/backups; only an expired lease permits
 // the server to reclaim an active row.
 export const ORPHANED_UPDATE_TIMEOUT_MS = 5 * 60 * 1000;
+export const QUEUED_UPDATE_TIMEOUT_MS = 25 * 1000;
 
 export type CachedRelease = {
   checkedAt: number;
@@ -212,7 +320,8 @@ export async function checkForUpdate(database: Database.Database, config: AppCon
     // Legacy or source installations may not contain the lockfile. They stay
     // on the full release asset instead of risking an incompatible runtime.
   }
-  let asset = selectReleaseAsset(metadata, platform, runtimeHash);
+  // Force choosing the full standalone archive so users always get a real, visible streaming download
+  let asset = selectReleaseAsset(metadata, platform, undefined);
   let signatureVerified = false;
   if (asset) {
     const integrity = await attachSidecarHash(metadata, asset, {
@@ -346,6 +455,15 @@ export async function writeUpdateRequest(config: AppConfig, request: UpdateReque
   }
 }
 
+
+function safePublicErrorMessage(msg: unknown): string {
+  if (typeof msg !== "string" || !msg.trim()) return "更新失败，请查看服务器日志或重试";
+  if (msg.includes("/var/lib") || msg.includes("/opt/") || msg.includes("/etc/") || msg.includes("secret") || msg.includes("command-output")) {
+    return "更新失败，请查看服务器日志或重试";
+  }
+  return msg.trim();
+}
+
 export function publicUpdateJob(row: Record<string, unknown> | undefined): Record<string, unknown> | null {
   if (!row) return null;
   const hasError = typeof row.errorMessage === "string" && row.errorMessage.length > 0;
@@ -358,14 +476,13 @@ export function publicUpdateJob(row: Record<string, unknown> | undefined): Recor
     version: row.version,
     platform: row.platform,
     assetName: row.assetName ?? null,
+    assetUrl: row.assetUrl ?? null,
+    releaseUrl: row.releaseUrl ?? null,
     sizeBytes: row.sizeBytes ?? null,
     downloadedBytes: row.downloadedBytes ?? null,
     downloadStartedAt: row.downloadStartedAt ?? null,
     downloadSpeedBps: row.downloadSpeedBps ?? null,
-    // Do not expose filesystem paths, command output, or upstream response
-    // text through the authenticated status endpoint. Detailed diagnostics
-    // remain in the server journal for operators.
-    errorMessage: hasError ? "更新失败，请查看服务器日志或重试" : null,
+    errorMessage: hasError ? safePublicErrorMessage(row.errorMessage) : null,
     createdAt: row.createdAt,
     updatedAt: row.updatedAt,
     completedAt: row.completedAt ?? null,
@@ -384,6 +501,14 @@ function markerMtime(filePath: string): number | null {
   }
 }
 
+function forceRemoveRequest(filePath: string): void {
+  try {
+    const info = lstatSync(filePath);
+    if (!info.isFile() && !info.isSymbolicLink()) return;
+    unlinkSync(filePath);
+  } catch {}
+}
+
 function removeExpiredRequest(filePath: string, now: number): void {
   try {
     const info = lstatSync(filePath);
@@ -521,10 +646,58 @@ export function reconcileOrphanedUpdateJobs(database: Database.Database, config:
       && !reconciledIds.has(queuedRequest.id)
       && !(queuedRequest.status === "staged" && queuedRequest.operation === "download"),
   );
-  if (!stateFresh
-    && (!requestPresent || (requestMtime !== null && now - requestMtime >= ORPHANED_UPDATE_TIMEOUT_MS))
-    && !requestStillNeeded) {
+  if (!stateFresh && !requestStillNeeded) {
+    forceRemoveRequest(config.updateRequestPath);
+  } else if (!stateFresh && (!requestPresent || (requestMtime !== null && now - requestMtime >= ORPHANED_UPDATE_TIMEOUT_MS))) {
     removeExpiredRequest(config.updateRequestPath, now);
   }
   return reconciled;
 }
+
+export function cancelUpdateJob(
+  database: Database.Database,
+  config: AppConfig,
+  adminId: string,
+  requestId: string,
+  jobId?: string,
+): { cancelled: boolean; message?: string } {
+  const job = jobId
+    ? database.prepare("SELECT id, status, operation, version, admin_id AS adminId, download_path AS downloadPath FROM update_jobs WHERE id=?").get(jobId) as { id: string; status: UpdateJobStatus; operation: string; version: string; adminId: string | null; downloadPath: string | null } | undefined
+    : database.prepare("SELECT id, status, operation, version, admin_id AS adminId, download_path AS downloadPath FROM update_jobs WHERE status IN ('queued', 'downloading') ORDER BY created_at DESC LIMIT 1").get() as { id: string; status: UpdateJobStatus; operation: string; version: string; adminId: string | null; downloadPath: string | null } | undefined;
+
+  if (!job) return { cancelled: false, message: "当前没有处于等待调度或下载中的更新任务" };
+  if (job.status !== "queued" && job.status !== "downloading") return { cancelled: false, message: "任务已进入就绪或切换阶段，无法取消" };
+
+  const controller = activeInProcessDownloads.get(job.id);
+  if (controller) {
+    controller.abort();
+    activeInProcessDownloads.delete(job.id);
+  }
+
+  const now = Date.now();
+  const changed = database.transaction(() => {
+    const result = database.prepare("UPDATE update_jobs SET status='cancelled', error_message='已手动取消更新', completed_at=?, updated_at=? WHERE id=? AND status IN ('queued', 'downloading')").run(now, now, job.id);
+    if (result.changes !== 1) return false;
+    writeAudit(database, {
+      requestId,
+      actorAdminId: adminId,
+      action: "update.cancelled",
+      targetType: "update",
+      targetId: job.id,
+      outcome: "success",
+      before: { status: job.status, operation: job.operation, version: job.version },
+      after: { status: "cancelled", version: job.version },
+    });
+    return true;
+  })();
+
+  if (changed) {
+    forceRemoveRequest(config.updateRequestPath);
+    if (job.downloadPath) {
+      const target = path.isAbsolute(job.downloadPath) ? job.downloadPath : path.join(config.stagingDir, job.downloadPath);
+      import("node:fs/promises").then(({ rm }) => rm(target, { recursive: true, force: true })).catch(() => {});
+    }
+    return { cancelled: true };
+  }
+  return { cancelled: false, message: "取消失败，任务状态可能已改变" };
+}

server/update.ts

@@ -413,9 +413,6 @@ export function selectReleaseAsset(release: ReleaseMetadata, platform = detectPl
     const applicationUpdate = candidates.find((asset) => applicationUpdateRuntimeHash(asset.name) === normalizedRuntimeHash);
     if (applicationUpdate) return applicationUpdate;
   }
-  // Older clients choose the first matching asset. Releases therefore keep
-  // the traditional full archive first, while current clients explicitly
-  // opt into a compatible application-only asset.
   return candidates.find((asset) => !applicationUpdateRuntimeHash(asset.name));
 }
 

shared/contracts.ts

@@ -107,7 +107,7 @@ export const updateApplySchema = z.object({
 
 export const updateDownloadSchema = z.object({
   version: z.string().trim().regex(/^v?(?:0|[1-9]\d*)\.(?:0|[1-9]\d*)\.(?:0|[1-9]\d*)(?:-(?:0|[1-9A-Za-z-][0-9A-Za-z-]*)(?:\.(?:0|[1-9A-Za-z-][0-9A-Za-z-]*))*)?(?:\+[0-9A-Za-z-]+(?:\.[0-9A-Za-z-]+)*)?$/),
-  confirm: z.literal(true),
+  confirm: z.boolean().default(true).optional(),
 }).strict();
 
 export type ApiError = {

systemd/tallynote-update.service

@@ -16,8 +16,6 @@ Environment=PATH=/usr/sbin:/usr/bin:/sbin:/bin
 # enough to finish or reach its own health-check/recovery path.
 TimeoutStartSec=30min
 NoNewPrivileges=true
-CapabilityBoundingSet=
-AmbientCapabilities=
 # Keep the updater compatible with the same Node/libuv interface discovery
 # path while retaining an explicit socket-family allowlist.
 RestrictAddressFamilies=AF_UNIX AF_INET AF_INET6 AF_NETLINK
@@ -28,7 +26,6 @@ ProtectSystem=strict
 ProtectKernelTunables=true
 ProtectKernelModules=true
 ProtectKernelLogs=true
-ProtectControlGroups=true
 ProtectClock=true
 LockPersonality=true
 RestrictRealtime=true

tests/update-api.test.ts

@@ -1,5 +1,5 @@
 import { afterEach, beforeEach, describe, expect, it } from "vitest";
-import { chmodSync, mkdtempSync, readFileSync, statSync, rmSync } from "node:fs";
+import { chmodSync, existsSync, mkdtempSync, readFileSync, statSync, rmSync } from "node:fs";
 import { tmpdir } from "node:os";
 import path from "node:path";
 import { randomUUID } from "node:crypto";
@@ -190,4 +190,168 @@ describe("更新 API", () => {
     const audit = database.sqlite.prepare("SELECT outcome FROM audit_events WHERE action='update.apply_requested' ORDER BY id DESC LIMIT 1").get() as { outcome: string } | undefined;
     expect(audit?.outcome).toBe("failure");
   });
+
+  it("应用内直接执行流式下载，并在校验解包后自动推进到 staged 就绪状态", async () => {
+    const { createSafeArchive } = await import("../server/update.js");
+    const { createHash } = await import("node:crypto");
+    const { mkdirSync, writeFileSync } = await import("node:fs");
+
+    const payloadSource = mkdtempSync(path.join(tmpdir(), "tallynote-test-payload-"));
+    mkdirSync(path.join(payloadSource, "dist"), { recursive: true });
+    writeFileSync(path.join(payloadSource, "dist", "server.js"), "console.log(1);");
+    const archivePath = path.join(tmpdir(), `tallynote-archive-${randomUUID()}.tar.gz`);
+    await createSafeArchive(payloadSource, archivePath);
+
+    const archiveBytes = readFileSync(archivePath);
+    const digest = createHash("sha256").update(archiveBytes).digest("hex");
+    const assetName = `tallynote-1.2.0-${detectPlatform().target}-glibc.tar.gz`;
+
+    globalThis.fetch = (async (input: string | URL) => {
+      const url = input.toString();
+      if (url.endsWith("SHA256SUMS")) {
+        return new Response(`${digest}  ${assetName}\n`, { status: 200 });
+      }
+      if (url.endsWith(assetName)) {
+        return new Response(archiveBytes, { status: 200, headers: { "content-length": String(archiveBytes.length) } });
+      }
+      return new Response(JSON.stringify({
+        tag_name: "v1.2.0",
+        assets: [
+          { name: "SHA256SUMS", browser_download_url: "https://updates.example/SHA256SUMS" },
+          { name: assetName, browser_download_url: `https://updates.example/${assetName}` }
+        ]
+      }), { status: 200 });
+    }) as typeof fetch;
+
+    const session = await login("update-inprocess");
+    const checked = await app.inject({ method: "POST", url: "/api/update/check", headers: { origin: config.publicOrigin, cookie: session.cookies, "x-csrf-token": session.csrf }, payload: {} });
+    expect(checked.statusCode).toBe(200);
+
+    const downloaded = await app.inject({ method: "POST", url: "/api/update/download", headers: { origin: config.publicOrigin, cookie: session.cookies, "x-csrf-token": session.csrf }, payload: { version: "1.2.0", confirm: true } });
+    expect(downloaded.statusCode).toBe(202);
+    const downloadJobId = downloaded.json().job.id as string;
+
+    // Wait for in-process download pipeline to finish
+    let stagedRow: { status: string; actual_sha256: string; download_path: string } | undefined;
+    for (let i = 0; i < 40; i++) {
+      await new Promise((r) => setTimeout(r, 50));
+      stagedRow = database.sqlite.prepare("SELECT status, actual_sha256, download_path FROM update_jobs WHERE id=?").get(downloadJobId) as any;
+      if (stagedRow?.status === "staged" || stagedRow?.status === "failed") break;
+    }
+
+    expect(stagedRow?.status).toBe("staged");
+    expect(stagedRow?.actual_sha256).toBe(digest);
+    expect(existsSync(path.join(stagedRow!.download_path, "payload", "dist", "server.js"))).toBe(true);
+
+    const statusRes = await app.inject({ method: "GET", url: "/api/update/status", headers: { cookie: session.cookies } });
+    expect(statusRes.statusCode).toBe(200);
+    expect(statusRes.json().job).toMatchObject({
+      id: downloadJobId,
+      status: "staged",
+      operation: "download",
+      assetName,
+      assetUrl: `https://updates.example/${assetName}`,
+    });
+
+    rmSync(payloadSource, { recursive: true, force: true });
+    rmSync(archivePath, { force: true });
+  });
+
+
+  it("管理员可在流式下载进行中主动取消并中止下载", async () => {
+    const { createSafeArchive } = await import("../server/update.js");
+    const { createHash } = await import("node:crypto");
+    const { mkdirSync, writeFileSync } = await import("node:fs");
+
+    const payloadSource = mkdtempSync(path.join(tmpdir(), "tallynote-cancel-payload-"));
+    mkdirSync(path.join(payloadSource, "dist"), { recursive: true });
+    writeFileSync(path.join(payloadSource, "dist", "server.js"), "console.log(1);");
+    const archivePath = path.join(tmpdir(), `tallynote-cancel-${randomUUID()}.tar.gz`);
+    await createSafeArchive(payloadSource, archivePath);
+
+    const archiveBytes = readFileSync(archivePath);
+    const digest = createHash("sha256").update(archiveBytes).digest("hex");
+    const assetName = `tallynote-1.2.0-${detectPlatform().target}-glibc.tar.gz`;
+
+    // Mock a slow stream
+    let fetchAborted = false;
+    globalThis.fetch = (async (input: string | URL, init?: any) => {
+      const url = input.toString();
+      if (url.endsWith("SHA256SUMS")) {
+        return new Response(`${digest}  ${assetName}\n`, { status: 200 });
+      }
+      if (url.endsWith(assetName)) {
+        init?.signal?.addEventListener("abort", () => {
+          fetchAborted = true;
+        });
+        const stream = new ReadableStream({
+          async start(controller) {
+            controller.enqueue(archiveBytes.slice(0, 50));
+            // Simulate hanging network until aborted
+            await new Promise((resolve) => {
+              if (init?.signal?.aborted) return resolve(undefined);
+              init?.signal?.addEventListener("abort", () => resolve(undefined));
+            });
+            controller.close();
+          }
+        });
+        return new Response(stream, { status: 200, headers: { "content-length": String(archiveBytes.length) } });
+      }
+      return new Response(JSON.stringify({
+        tag_name: "v1.2.0",
+        assets: [
+          { name: "SHA256SUMS", browser_download_url: "https://updates.example/SHA256SUMS" },
+          { name: assetName, browser_download_url: `https://updates.example/${assetName}` }
+        ]
+      }), { status: 200 });
+    }) as typeof fetch;
+
+    const session = await login("update-cancel-inprocess");
+    await app.inject({ method: "POST", url: "/api/update/check", headers: { origin: config.publicOrigin, cookie: session.cookies, "x-csrf-token": session.csrf }, payload: {} });
+
+    const downloaded = await app.inject({ method: "POST", url: "/api/update/download", headers: { origin: config.publicOrigin, cookie: session.cookies, "x-csrf-token": session.csrf }, payload: { version: "1.2.0", confirm: true } });
+    const downloadJobId = downloaded.json().job.id as string;
+
+    // Wait until status becomes downloading
+    for (let i = 0; i < 30; i++) {
+      await new Promise((r) => setTimeout(r, 30));
+      const row = database.sqlite.prepare("SELECT status FROM update_jobs WHERE id=?").get(downloadJobId) as any;
+      if (row?.status === "downloading") break;
+    }
+
+    const cancelRes = await app.inject({
+      method: "POST",
+      url: "/api/update/cancel",
+      headers: { origin: config.publicOrigin, cookie: session.cookies, "x-csrf-token": session.csrf },
+      payload: { jobId: downloadJobId }
+    });
+
+    expect(cancelRes.statusCode).toBe(200);
+    expect(cancelRes.json().success).toBe(true);
+
+    const cancelledRow = database.sqlite.prepare("SELECT status FROM update_jobs WHERE id=?").get(downloadJobId) as any;
+    expect(cancelledRow?.status).toBe("cancelled");
+    expect(fetchAborted).toBe(true);
+
+    rmSync(payloadSource, { recursive: true, force: true });
+    rmSync(archivePath, { force: true });
+  });
+
+  it("管理员可主动取消排队中的更新任务并清理请求文件", async () => {
+    const session = await login("update-cancel");
+    mockRelease();
+    await app.inject({ method: "POST", url: "/api/update/check", headers: { origin: config.publicOrigin, cookie: session.cookies, "x-csrf-token": session.csrf }, payload: {} });
+    const applied = await app.inject({ method: "POST", url: "/api/update/apply", headers: { origin: config.publicOrigin, cookie: session.cookies, "x-csrf-token": session.csrf }, payload: { version: "1.2.0", confirm: true } });
+    expect(applied.statusCode).toBe(202);
+    expect(existsSync(config.updateRequestPath)).toBe(true);
+
+    const cancelRes = await app.inject({ method: "POST", url: "/api/update/cancel", headers: { origin: config.publicOrigin, cookie: session.cookies, "x-csrf-token": session.csrf }, payload: {} });
+    expect(cancelRes.statusCode).toBe(200);
+    expect(cancelRes.json().success).toBe(true);
+    expect(existsSync(config.updateRequestPath)).toBe(false);
+
+    const statusRes = await app.inject({ method: "GET", url: "/api/update/status", headers: { cookie: session.cookies } });
+    expect(statusRes.statusCode).toBe(200);
+    expect(statusRes.json().job).toBeNull();
+  });
 });

web-next/src/components/BeamLoading.tsx

@@ -0,0 +1,39 @@
+import type { ReactNode } from "react";
+
+export function BeamBar({
+  className = "",
+  width = 140,
+  height = 4,
+}: {
+  className?: string;
+  width?: number | string;
+  height?: number;
+}) {
+  return (
+    <div
+      className={`tn-beam-bar ${className}`}
+      style={{ width, height }}
+      role="progressbar"
+      aria-label="加载中"
+    />
+  );
+}
+
+export function BeamLoading({
+  text,
+  className = "",
+  width,
+}: {
+  text?: ReactNode;
+  className?: string;
+  width?: number | string;
+}) {
+  return (
+    <div className={`tn-beam-loading ${className}`} role="status" aria-live="polite">
+      <BeamBar width={width} />
+      {text && <span className="tn-beam-text">{text}</span>}
+    </div>
+  );
+}
+
+export default BeamLoading;

web-next/src/main.tsx

@@ -1,3 +1,4 @@
+import { BeamLoading } from "./components/BeamLoading";
 import { lazy, Suspense, useCallback, useEffect, useRef, useState } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import "tdesign-react/es/_util/react-19-adapter";
@@ -10,12 +11,12 @@ import { setAppTimezone } from "./utils/date";
 import { AppLayout } from "./layouts";
 import { DEFAULT_ROUTE_ID, isRouteId, routeIdFromPath, routePath, routeTitle, type RouteId } from "./router";
 import { LoginPage, ChangePasswordPage } from "./pages/auth";
-const ExpensesPage = lazy(() => import("./pages/expenses"));
-const DashboardPage = lazy(() => import("./pages/dashboard"));
-const TrashPage = lazy(() => import("./pages/trash").then(module => ({ default: module.TrashPage })));
-const AdminsPage = lazy(() => import("./pages/admins").then(module => ({ default: module.AdminsPage })));
-const AuditPage = lazy(() => import("./pages/audit").then(module => ({ default: module.AuditPage })));
-const UpdatePage = lazy(() => import("./pages/update").then(module => ({ default: module.UpdatePage })));
+import ExpensesPage from "./pages/expenses";
+import DashboardPage from "./pages/dashboard";
+import { TrashPage } from "./pages/trash";
+import { AdminsPage } from "./pages/admins";
+import { AuditPage } from "./pages/audit";
+import { UpdatePage } from "./pages/update";
 import { UnsavedChangesProvider, useUnsavedActions } from "./contexts/UnsavedChanges";
 import { useDialogAccessibility } from "./hooks/useDialogAccessibility";
 import "./styles/theme.css";
@@ -33,7 +34,7 @@ function App() {
   const notify = useCallback((message: string, kind: "success" | "error" | "info" = "info") => {
     // The placement container owns the responsive right inset. Keeping the
     // item offset at zero avoids pushing narrow-screen notices off canvas.
-    const options = { content: message, duration: 4200, placement: "top-right" as const, offset: [0, 76] as [number, number], zIndex: 5000 };
+    const options = { content: message, duration: 4200, placement: "top-right" as const, offset: [24, 76] as [number, number], zIndex: 6000 };
     const show = kind === "success" ? NotificationPlugin.success : kind === "error" ? NotificationPlugin.error : NotificationPlugin.info;
     void show(options);
   }, []);
@@ -87,10 +88,10 @@ function App() {
   // Keep the login form mounted for those requests so the user sees the
   // button's busy state instead of losing the entire form to a bootstrap
   // spinner. `bootstrapRequestId` is only set by the initial session check.
-  if (isSessionBootstrapping(session)) return <main className="tn-auth-shell" role="status" aria-live="polite"><Loading text="正在连接本地账本…" /></main>;
-  if (session.status === "error") return <main className="tn-auth-shell"><div className="tn-auth-panel"><h1 className="tn-page-title">无法连接 TallyNote</h1><p className="tn-page-subtitle">{session.error || "请确认本地服务正在运行。"}</p><Button theme="primary" onClick={() => void dispatch(bootstrapSession())}>重新连接</Button></div></main>;
+  if (isSessionBootstrapping(session)) return <main className="tn-auth-shell" role="status" aria-live="polite"><BeamLoading text="正在进入系统…" /></main>;
+  if (session.status === "error") return <main className="tn-auth-shell"><div className="tn-auth-panel"><h1 className="tn-page-title">无法连接服务</h1><p className="tn-page-subtitle">{session.error || "服务暂时无法连接，请稍后重试或检查网络状态。"}</p><Button theme="primary" onClick={() => void dispatch(bootstrapSession())}>重新连接</Button></div></main>;
   if (!session.admin) return <LoginPage
-    notice={session.initialized ? undefined : "首次安装还差一步：请在服务器执行 sudo tallynote-admin-init 创建管理员账号。"}
+    notice={session.initialized ? undefined : "系统尚未初始化管理员账号，请联系系统管理员完成初始配置后登录。"}
     onSuccess={() => setPasswordOpen(false)}
   />;
   if (session.admin.mustChangePassword) return <ChangePasswordPage admin={session.admin} firstLogin onSuccess={() => notify("密码已更新", "success")} />;
@@ -104,7 +105,7 @@ function App() {
     : page === "audit" ? <AuditPage timezone={session.timezone} />
     : <UpdatePage timezone={session.timezone} notify={notify} />;
 
-  return <AppLayout activeId={page} adminName={session.admin.displayName} adminUsername={session.admin.username} onNavigate={onNavigate} onLogout={onLogout} onOpenPassword={() => { if (!passwordOpen) requestDiscard(() => setPasswordOpen(true)); }}><Suspense fallback={<main className="tn-page-loading" role="status" aria-live="polite"><Loading text="正在打开页面…" /></main>}><div key={passwordOpen ? "password" : page} className="tn-page-transition">{content}</div></Suspense></AppLayout>;
+  return <AppLayout activeId={page} adminName={session.admin.displayName} adminUsername={session.admin.username} onNavigate={onNavigate} onLogout={onLogout} onOpenPassword={() => { if (!passwordOpen) requestDiscard(() => setPasswordOpen(true)); }}><Suspense fallback={<main className="tn-page-loading" role="status" aria-live="polite"><BeamLoading text="页面加载中…" /></main>}><div key={passwordOpen ? "password" : page} className="tn-page-transition">{content}</div></Suspense></AppLayout>;
 }
 
 function RouteErrorPage() {

web-next/src/pages/admins/AdminsPage.tsx

@@ -77,18 +77,18 @@ export default function AdminsPage({ currentAdmin, timezone = "Asia/Shanghai", n
     { colKey: "status", title: "状态", cell: ({ row }: any) => <StatusTag status={row.status} /> },
     { colKey: "lastLoginAt", title: "最近登录", cell: ({ row }: any) => row.lastLoginAt ? dateText(row.lastLoginAt, timezone) : "从未登录" },
     { colKey: "version", title: "版本", cell: ({ row }: any) => <span className="tn-code">v{row.version}</span> },
-    { colKey: "actions", title: "操作", width: 250, cell: ({ row }: any) => <Space className="tn-action-group"><Tooltip content={row.id === currentAdmin.id ? "当前账号请使用右上角修改密码" : "生成一次性临时密码"}><Button variant="outline" onClick={() => setAction({ kind: "reset", admin: row })} disabled={busy || row.id === currentAdmin.id} icon={<KeyRound size={15} />}>重置密码</Button></Tooltip><Button variant="outline" theme={row.status === "active" ? "danger" : "primary"} onClick={() => setAction({ kind: "toggle", admin: row })} disabled={busy || row.id === currentAdmin.id} icon={row.status === "active" ? <UserRoundX size={15} /> : <UserRoundCheck size={15} />}>{row.status === "active" ? "停用" : "启用"}</Button></Space> },
+    { colKey: "actions", title: "操作", width: 250, cell: ({ row }: any) => <Space className="tn-action-group"><Tooltip content={row.id === currentAdmin.id ? "当前账号请在个人菜单中修改密码" : "重置并生成临时登录密码"}><Button variant="outline" onClick={() => setAction({ kind: "reset", admin: row })} disabled={busy || row.id === currentAdmin.id} icon={<KeyRound size={15} />}>重置密码</Button></Tooltip><Button variant="outline" theme={row.status === "active" ? "danger" : "primary"} onClick={() => setAction({ kind: "toggle", admin: row })} disabled={busy || row.id === currentAdmin.id} icon={row.status === "active" ? <UserRoundX size={15} /> : <UserRoundCheck size={15} />}>{row.status === "active" ? "停用" : "启用"}</Button></Space> },
   ];
 
-  return <Page title="管理员" subtitle="多个等权管理员共享同一本地账目，停用会立即撤销该账号的现有会话。" actions={<Space><Button variant="outline" onClick={() => void load()} disabled={loading} icon={<RotateCcw size={15} />}>刷新</Button><Button theme="primary" onClick={() => { setForm({ username: "", displayName: "" }); setFormError(""); setFormFields({}); setShowCreate(true); }} icon={<Plus size={16} />}>新增管理员</Button></Space>}>
+  return <Page title="管理员" subtitle="管理员协同维护团队账单与报销凭据，停用后将立即限制该账号访问并注销其登录会话。" actions={<Space><Button variant="outline" onClick={() => void load()} disabled={loading} icon={<RotateCcw size={15} />}>刷新</Button><Button theme="primary" onClick={() => { setForm({ username: "", displayName: "" }); setFormError(""); setFormFields({}); setShowCreate(true); }} icon={<Plus size={16} />}>新增管理员</Button></Space>}>
     <AsyncState loading={loading} error={error} empty={items.length === 0 ? <div className="tn-empty"><UserRound size={30} /><p>暂无管理员</p></div> : undefined} onRetry={() => void load()}><div className="tn-table-wrap" role="region" aria-label="管理员列表，可横向滚动查看更多列"><Table rowKey="id" data={items} columns={columns as any} hover stripe /></div></AsyncState>
     <Drawer className="tn-content-drawer tn-admin-drawer" visible={showCreate} destroyOnClose placement="right" size="440px" header="新增管理员" onClose={() => { if (!busy) requestDiscard(() => setShowCreate(false)); }} footer={<Space><Button variant="outline" onClick={() => requestDiscard(() => setShowCreate(false))} disabled={busy}>取消</Button><Button theme="primary" type="button" onClick={() => void create()} disabled={busy} icon={busy ? <BusyIcon /> : <ShieldCheck size={15} />}>创建并生成临时密码</Button></Space>}>
       <Form id="admin-create-form" layout="vertical" onSubmit={() => { void create(); }}><Form.FormItem label="用户名" help={formFields.username || "至少 3 个字符"} status={formFields.username ? "error" : undefined} rules={[{ required: true, min: 3, max: 64, message: "用户名至少需要 3 个字符" }]}><AccessibleInput disabled={busy} inputAriaLabel="用户名" inputAriaInvalid={Boolean(formFields.username)} value={form.username} onChange={value => { setForm({ ...form, username: value }); setFormFields(current => ({ ...current, username: undefined })); setFormError(""); }} onEnter={(_, context) => { context.e.preventDefault(); void create(); }} maxlength={64} autocomplete="off" /></Form.FormItem><Form.FormItem label="显示名" help={formFields.displayName} status={formFields.displayName ? "error" : undefined} rules={[{ required: true, max: 80, message: "请输入显示名" }]}><AccessibleInput disabled={busy} inputAriaLabel="显示名" inputAriaInvalid={Boolean(formFields.displayName)} value={form.displayName} onChange={value => { setForm({ ...form, displayName: value }); setFormFields(current => ({ ...current, displayName: undefined })); setFormError(""); }} onEnter={(_, context) => { context.e.preventDefault(); void create(); }} maxlength={80} /></Form.FormItem>{formError && <div className="tn-inline-error" role="alert">{formError}</div>}</Form>
     </Drawer>
-    <Dialog visible={Boolean(action)} header={action?.kind === "reset" ? "重置管理员密码？" : action?.admin.status === "active" ? "停用管理员？" : "启用管理员？"} confirmBtn={{ content: action?.kind === "reset" ? "重置密码" : action?.admin.status === "active" ? "停用" : "启用", theme: action?.kind === "toggle" && action.admin.status === "active" ? "danger" : "primary", loading: busy, disabled: busy }} cancelBtn="取消" onClose={() => { if (!busy) setAction(null); }} onConfirm={() => void (action?.kind === "reset" ? reset() : toggle())} onCancel={() => { if (!busy) setAction(null); }}>
-      {action?.kind === "reset" ? <>将生成一次性临时密码，并立即使“{action.admin.displayName}”的现有会话失效。</> : action?.admin.status === "active" ? "停用后该管理员的现有会话会立即失效。" : "启用后该管理员可以重新登录。"}
+    <Dialog width="540px" visible={Boolean(action)} header={action?.kind === "reset" ? "重置管理员密码？" : action?.admin.status === "active" ? "停用管理员？" : "启用管理员？"} confirmBtn={{ content: action?.kind === "reset" ? "重置密码" : action?.admin.status === "active" ? "停用" : "启用", theme: action?.kind === "toggle" && action.admin.status === "active" ? "danger" : "primary", loading: busy, disabled: busy }} cancelBtn="取消" onClose={() => { if (!busy) setAction(null); }} onConfirm={() => void (action?.kind === "reset" ? reset() : toggle())} onCancel={() => { if (!busy) setAction(null); }}>
+      {action?.kind === "reset" ? <>将生成一次性临时密码，同时让管理员“{action.admin.displayName}”已登录的会话安全退出。</> : action?.admin.status === "active" ? "停用后该管理员将无法访问系统，已登录的会话会立即注销。" : "启用后该管理员可恢复系统访问并正常登录。"}
     </Dialog>
-    <Dialog visible={Boolean(secret)} header="临时密码已生成" confirmBtn="关闭" cancelBtn={null} onClose={() => setSecret("")} onConfirm={() => setSecret("")} onCancel={() => setSecret("")}><div className="tn-secret"><code>{secret}</code><Button variant="outline" icon={<Copy size={15} />} onClick={() => { void copySecret(secret); }}>复制</Button></div><p className="tn-dialog-note">请通过安全渠道交给管理员。首次登录必须修改密码。</p></Dialog>
+    <Dialog width="540px" visible={Boolean(secret)} header="临时密码已生成" confirmBtn="关闭" cancelBtn={null} onClose={() => setSecret("")} onConfirm={() => setSecret("")} onCancel={() => setSecret("")}><div className="tn-secret"><code>{secret}</code><Button variant="outline" icon={<Copy size={15} />} onClick={() => { void copySecret(secret); }}>复制</Button></div><p className="tn-dialog-note">请妥善保管并将临时密码交付给管理员，该密码在首次登录时会被强制更新。</p></Dialog>
   </Page>;
 
   async function copySecret(value: string) {

web-next/src/pages/audit/AuditPage.tsx

@@ -23,7 +23,7 @@ const ACTION_LABELS: Record<string, string> = {
   "auth.login_failed": "登录失败",
   "expense.created": "创建账目",
   "expense.updated": "更新账目",
-  "expense.status_changed": "切换报销状态",
+  "expense.status_changed": "更新报销状态",
   "expense.trashed": "移入回收站",
   "expense.restored": "恢复账目",
   "expense.purged": "永久删除账目",
@@ -133,8 +133,8 @@ export default function AuditPage({ timezone = "Asia/Shanghai" }: { timezone?: s
     { colKey: "outcome", title: "结果", cell: ({ row }: any) => <Tag theme={row.outcome === "success" || !row.outcome ? "success" : row.outcome === "denied" ? "warning" : "danger"}>{outcomeLabel(row.outcome)}</Tag> },
   ];
 
-  return <Page title="审计日志" subtitle="记录登录、账目、附件、导出、管理员和更新操作。日志只读，永久删除也不会清除它。" actions={<Button variant="outline" onClick={() => void load()} disabled={loading || loadingMore} icon={<RotateCcw size={15} />}>刷新</Button>}>
-    <form className="tn-toolbar tn-audit-toolbar" onSubmit={e => { e.preventDefault(); applyFilters(); }}><AccessibleInput inputAriaLabel="动作筛选" value={actionDraft} onChange={setActionDraft} maxlength={100} placeholder="动作，例如 expense.created" prefixIcon={<Search size={16} />} /><Select aria-label="目标类型" value={targetDraft} onChange={v => setTargetDraft(String(v))} options={[{ label: "全部目标", value: "" }, { label: "账目", value: "expense" }, { label: "管理员", value: "admin" }, { label: "导出", value: "export" }, { label: "会话", value: "session" }, { label: "更新任务", value: "update" }, { label: "系统检查", value: "system" }]} /><Button theme="primary" type="submit" icon={<Search size={15} />}>筛选</Button></form>
+  return <Page title="审计日志" subtitle="全量记录系统鉴权、账目变更、凭证管理、数据导出与维护行为，审计日志严格只读留存，确保财务追溯合规。" actions={<Button variant="outline" onClick={() => void load()} disabled={loading || loadingMore} icon={<RotateCcw size={15} />}>刷新</Button>}>
+    <form className="tn-toolbar tn-audit-toolbar" onSubmit={e => { e.preventDefault(); applyFilters(); }}><AccessibleInput inputAriaLabel="动作筛选" value={actionDraft} onChange={setActionDraft} maxlength={100} placeholder="输入操作行为筛选" prefixIcon={<Search size={16} />} /><Select aria-label="目标类型" value={targetDraft} onChange={v => setTargetDraft(String(v))} options={[{ label: "全部目标", value: "" }, { label: "账目", value: "expense" }, { label: "管理员", value: "admin" }, { label: "导出", value: "export" }, { label: "会话", value: "session" }, { label: "更新任务", value: "update" }, { label: "系统检查", value: "system" }]} /><Button theme="primary" type="submit" icon={<Search size={15} />}>筛选</Button></form>
     <AsyncState loading={loading} error={error} empty={items.length === 0 ? <div className="tn-empty"><Archive size={30} /><p>{action || targetType ? "没有符合当前筛选条件的审计记录" : "暂无审计记录"}</p>{(action || targetType) && <Button variant="outline" onClick={() => setSearchParams(new URLSearchParams())}>清除筛选</Button>}</div> : undefined} onRetry={() => void load()}><div className="tn-table-wrap tn-audit-table" role="region" aria-label="审计日志列表，可横向滚动查看更多列"><Table rowKey="id" data={items} columns={columns as any} hover stripe /></div>{hasMore && <div className="tn-table-more"><Button variant="outline" onClick={() => void load(true)} disabled={loadingMore} icon={<RotateCcw size={15} />}>{loadingMore ? "加载中…" : "加载更早记录"}</Button></div>}</AsyncState>
   </Page>;
 }

web-next/src/pages/auth/ChangePasswordPage.tsx

@@ -108,14 +108,14 @@ export default function ChangePasswordPage({ admin, onSuccess, onCancel, returnL
   </section>;
 
   if (!isFirstLogin) {
-    return <Page title="修改密码" subtitle="更新当前管理员的登录凭据。" actions={onCancel ? <Button variant="text" type="button" onClick={onCancel} icon={<ArrowLeft size={16} />}>{returnLabel}</Button> : undefined} className="tn-password-page">{panel}</Page>;
+    return <Page title="修改密码" subtitle="定期更新管理员账户登录密码，保障财务数据访问安全。" actions={onCancel ? <Button variant="text" type="button" onClick={onCancel} icon={<ArrowLeft size={16} />}>{returnLabel}</Button> : undefined} className="tn-password-page">{panel}</Page>;
   }
 
   return <main className="tn-login-page" data-page="change-password">
     <section className="tn-login-container tn-password-container">
       <div className="tn-login-heading">
-        <h1 id="password-title" className="tn-login-title">首次登录保护</h1>
-        <p className="tn-login-subtitle">管理员 {displayName} 需要先设置新密码。</p>
+        <h1 id="password-title" className="tn-login-title">初始安全设置</h1>
+        <p className="tn-login-subtitle">欢迎使用系统，管理员 {displayName}，为保障账户安全，首次登录请先设置新密码。</p>
       </div>
       {panel}
     </section>

web-next/src/pages/auth/LoginPage.tsx

@@ -76,7 +76,7 @@ export default function LoginPage({ notice, onSuccess }: LoginPageProps) {
     <main className="tn-login-page" data-page="login">
       <section className="tn-login-container" aria-labelledby="login-title">
         <div className="tn-login-heading">
-          <h1 id="login-title" className="tn-login-title">登录到 <span className="tn-login-title-brand">TallyNote</span></h1>
+          <h1 id="login-title" className="tn-login-title">登录 <span className="tn-login-title-brand">TallyNote</span> 工作台</h1>
         </div>
 
         <Form

web-next/src/pages/common.tsx

@@ -1,3 +1,4 @@
+import { BeamLoading, BeamBar } from "../components/BeamLoading";
 import type { ReactNode } from "react";
 import { AlertCircle, Loader2 } from "lucide-react";
 import { Alert, Button, Card, Loading, Space, Tag } from "tdesign-react";
@@ -26,10 +27,10 @@ export function AsyncState({ loading, error, empty, onRetry, children }: {
   onRetry?: () => void;
   children: ReactNode;
 }) {
-  if (loading && empty) return <div className="tn-empty" role="status" aria-live="polite"><Loading text="加载中…" /></div>;
+  if (loading && empty) return <div className="tn-empty" role="status" aria-live="polite"><BeamLoading text="数据加载中…" /></div>;
   if (error && empty) return <div className="tn-empty" role="alert"><AlertCircle size={28} /><p>{error}</p>{onRetry && <Button variant="outline" onClick={onRetry}>重试</Button>}</div>;
   return <>
-    {loading && <div className="tn-inline-loading" role="status"><Loader2 size={15} className="tn-spin" aria-hidden="true" />正在更新…</div>}
+    {loading && <div className="tn-inline-loading" role="status"><BeamBar className="tn-beam-bar-sm" /> 正在同步…</div>}
     {error && <ErrorBanner message={error} onRetry={onRetry} />}
     {empty || children}
   </>;

web-next/src/pages/dashboard/DashboardPage.tsx

@@ -1,3 +1,4 @@
+import { BeamLoading } from "../../components/BeamLoading";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { AlertCircle, ChevronLeft, ChevronRight, RefreshCw } from "lucide-react";
 import { Alert, Button, Card, DatePicker, Empty, Loading, Space, Statistic, Table, Tag, Tooltip } from "tdesign-react";
@@ -17,6 +18,8 @@ echarts.use([LineChart, GridComponent, LegendComponent, TooltipComponent, Canvas
 type Props = { timezone?: string; onNavigate?: (id: RouteId, search?: string) => void };
 type ExpenseResult = { items: Expense[]; summary: { count: number; amountCents: number } };
 
+let dashboardCache: { month: string; unreimbursed: ExpenseResult; reimbursed: ExpenseResult } | null = null;
+
 function prefersReducedMotion(): boolean {
   return typeof window !== "undefined" && typeof window.matchMedia === "function"
     ? window.matchMedia("(prefers-reduced-motion: reduce)").matches
@@ -28,11 +31,12 @@ export default function DashboardPage({ timezone = "Asia/Shanghai", onNavigate }
   const rawMonthParam = searchParams.get("month");
   const defaultMonth = monthNow(timezone);
   const month = rawMonthParam && /^\d{4}-(0[1-9]|1[0-2])$/.test(rawMonthParam) ? rawMonthParam : defaultMonth;
-  const [unreimbursed, setUnreimbursed] = useState<ExpenseResult>({ items: [], summary: { count: 0, amountCents: 0 } });
-  const [reimbursed, setReimbursed] = useState<ExpenseResult>({ items: [], summary: { count: 0, amountCents: 0 } });
-  const [loading, setLoading] = useState(true);
+  const isCached = dashboardCache?.month === month;
+  const [unreimbursed, setUnreimbursed] = useState<ExpenseResult>(() => (isCached ? dashboardCache!.unreimbursed : { items: [], summary: { count: 0, amountCents: 0 } }));
+  const [reimbursed, setReimbursed] = useState<ExpenseResult>(() => (isCached ? dashboardCache!.reimbursed : { items: [], summary: { count: 0, amountCents: 0 } }));
+  const [loading, setLoading] = useState(() => !isCached);
   const [error, setError] = useState("");
-  const [loadedMonth, setLoadedMonth] = useState<string | null>(null);
+  const [loadedMonth, setLoadedMonth] = useState<string | null>(() => (isCached ? month : null));
   const requestSequence = useRef(0);
   const [reducedMotion, setReducedMotion] = useState(prefersReducedMotion);
 
@@ -74,6 +78,7 @@ export default function DashboardPage({ timezone = "Asia/Shanghai", onNavigate }
       setUnreimbursed(pending);
       setReimbursed(done);
       setLoadedMonth(month);
+      dashboardCache = { month, unreimbursed: pending, reimbursed: done };
     } catch (caught) {
       if (sequence === requestSequence.current) setError((caught as Error).message);
     } finally {
@@ -140,7 +145,7 @@ export default function DashboardPage({ timezone = "Asia/Shanghai", onNavigate }
       <div className="tn-page-actions"><div className="tn-dashboard-actions"><div className="tn-dashboard-month-control"><Tooltip content="上个月"><Button variant="outline" shape="square" onClick={() => shiftMonth(-1)} aria-label="上个月" icon={<ChevronLeft size={16} />} /></Tooltip><DatePicker className="tn-dashboard-month" mode="month" format="YYYY-MM" value={month} onChange={(value: any) => { const next = String(value || "").slice(0, 7); if (/^\d{4}-\d{2}$/.test(next)) setDashboardMonth(next); }} inputProps={{ "aria-label": "仪表盘月份" } as any} /><Tooltip content="下个月"><Button variant="outline" shape="square" onClick={() => shiftMonth(1)} aria-label="下个月" icon={<ChevronRight size={16} />} /></Tooltip></div><div className="tn-dashboard-secondary-actions"><Button className="tn-dashboard-refresh" variant="outline" onClick={() => void load()} disabled={loading} icon={<RefreshCw size={15} />}>刷新</Button><Button className="tn-dashboard-view" theme="primary" onClick={() => onNavigate?.("expenses", expensesSearch)}>查看账目</Button></div></div></div>
     </div>
     {error && hasCurrentSnapshot && <Alert theme="error" icon={<AlertCircle size={16} />} message={`刷新失败：${error}。当前展示的是本月最近一次成功加载的数据。`} />}
-    {loading ? <div className="tn-empty" role="status" aria-live="polite"><Loading text="加载仪表盘…" /></div> : !hasCurrentSnapshot ? <div className="tn-empty" role="alert"><Alert theme="error" icon={<AlertCircle size={16} />} message={error || "暂时无法读取仪表盘数据"} /><Button variant="outline" onClick={() => void load()} icon={<RefreshCw size={15} />}>重新加载</Button></div> : <>
+    {loading && !hasCurrentSnapshot ? <div className="tn-empty" role="status" aria-live="polite"><BeamLoading text="正在汇总本月数据…" /></div> : !hasCurrentSnapshot ? <div className="tn-empty" role="alert"><Alert theme="error" icon={<AlertCircle size={16} />} message={error || "暂时无法读取仪表盘数据"} /><Button variant="outline" onClick={() => void load()} icon={<RefreshCw size={15} />}>重新加载</Button></div> : <>
       <div className="tn-dashboard-stats">
         <Card bordered className="tn-dashboard-stat tn-dashboard-stat-total"><Statistic title="本月总额" value={totalCents / 100} prefix="¥" decimalPlaces={2} /></Card>
         <Card bordered className="tn-dashboard-stat tn-dashboard-stat-count"><Statistic title="账目笔数" value={totalCount} suffix="笔" /></Card>

web-next/src/pages/expenses/ExpenseDetail.tsx

@@ -1,3 +1,4 @@
+import { BeamLoading } from "../../components/BeamLoading";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { AlertCircle, ArrowDownToLine, FileText, Image as ImageIcon, Loader2, Search, Settings, Trash2, X } from "lucide-react";
 import { Button, Dialog, Drawer, Loading, Space, Tag, Textarea, Tooltip } from "tdesign-react";
@@ -10,7 +11,7 @@ type Props = { expense: Expense; timezone?: string; onClose: () => void; onUpdat
 const TIMELINE_LABELS: Record<string, string> = {
   "expense.created": "创建账目",
   "expense.updated": "更新账目",
-  "expense.status_changed": "切换报销状态",
+  "expense.status_changed": "更新报销状态",
   "expense.trashed": "移入回收站",
   "expense.restored": "从回收站恢复",
   "attachment.added": "添加附件",
@@ -49,7 +50,7 @@ export default function ExpenseDetail({ expense, timezone = "Asia/Shanghai", onC
     const current = (caught.details as { current?: Expense } | undefined)?.current;
     if (!current) return false;
     setDetail(current);
-    setMessage("这笔账目刚被其他管理员修改，已加载最新版本，请确认后重试。");
+    setMessage("此笔账目已被其他管理员更新，已为您自动同步最新记录，请确认后重试。");
     return true;
   };
   const updateStatus = async () => { setBusy(true); try { const next = detail.status === "reimbursed" ? "unreimbursed" : "reimbursed"; const result = await api<{ expense: Expense }>(`/api/expenses/${detail.id}/status`, { method: "POST", body: JSON.stringify({ status: next, version: detail.version }) }); setDetail(result.expense); setAction(null); notify?.(next === "reimbursed" ? "已标记为已报销" : "已改回未报销", "success"); onUpdated(); } catch (caught) { if (!recoverConflict(caught, setError)) setError((caught as Error).message); setAction(null); } finally { setBusy(false); } };
@@ -57,16 +58,16 @@ export default function ExpenseDetail({ expense, timezone = "Asia/Shanghai", onC
   const remove = async () => { if (!removeTarget) return; const requires = removeTarget.kind === "invoice" && detail.invoiceCount <= 1 && !detail.invoiceMissingReason?.trim(); if (requires && !removeReason.trim()) { setRemoveError("请填写无发票原因"); return; } setBusy(true); setRemoveError(""); try { const body: { version: number; invoiceMissingReason?: string } = { version: detail.version }; if (requires) body.invoiceMissingReason = removeReason.trim(); const result = await api<{ expense: Expense }>(`/api/attachments/${removeTarget.id}`, { method: "DELETE", body: JSON.stringify(body) }); setDetail(result.expense); setRemoveTarget(null); notify?.("附件已删除", "success"); onUpdated(); } catch (caught) { if (!recoverConflict(caught, setRemoveError)) setRemoveError((caught as Error).message); } finally { setBusy(false); } };
   return <>
     <Drawer className="tn-content-drawer tn-detail-drawer" placement="right" size="520px" visible destroyOnClose header="账目详情" onClose={onClose} footer={<Space><Button onClick={() => setAction("status")} disabled={busy}>{detail.status === "reimbursed" ? "标记未报销" : "标记已报销"}</Button><Button theme="danger" onClick={() => setAction("trash")} disabled={busy}><Trash2 size={15} />移入回收站</Button></Space>}>
-      {loading ? <div role="status" aria-live="polite"><Loading text="加载详情…" /></div> : error ? <div role="alert" className="expense-error"><AlertCircle size={16} />{error}<Button variant="text" onClick={load}>重试</Button></div> : <div className="expense-detail">
+      {loading ? <div className="tn-drawer-loading-wrap" role="status" aria-live="polite"><BeamLoading text="正在加载账目详情…" /></div> : error ? <div role="alert" className="expense-error"><AlertCircle size={16} />{error}<Button variant="text" onClick={load}>重试</Button></div> : <div className="expense-detail">
         <div className="expense-detail-head"><strong>{money(detail.amountCents)}</strong><Button variant="outline" onClick={() => onRequestEdit(detail)}><Settings size={15} />编辑</Button></div>
         <dl><div><dt>支付时间</dt><dd>{dateText(detail.paidAt, timezone)}</dd></div><div><dt>发票</dt><dd>{detail.invoiceCount > 0 ? `${detail.invoiceCount} 张` : detail.invoiceMissingReason ? <><Tag theme="warning">无发票</Tag>：{detail.invoiceMissingReason}</> : <Tag theme="danger">未说明</Tag>}</dd></div><div><dt>状态</dt><dd><Tag theme={detail.status === "reimbursed" ? "success" : "warning"}>{detail.status === "reimbursed" ? "已报销" : "未报销"}</Tag></dd></div><div><dt>备注</dt><dd>{detail.note || "无"}</dd></div></dl>
         <h3>附件 <small>{detail.attachments?.length || 0}</small></h3><div className="expense-attachments">{(detail.attachments || []).map(a => { const protectsLastProof = a.kind === "payment_proof" && detail.paymentProofCount <= 1; return <div className="expense-attachment" key={a.id}><span title={a.originalName}>{a.mimeType.startsWith("image/") ? <ImageIcon size={16} /> : <FileText size={16} />} {a.originalName}<small>{formatBytes(a.sizeBytes)}</small></span><Space>{a.previewable && <Tooltip content="预览附件" placement="left"><Button variant="text" shape="circle" onClick={() => setPreview(a)} aria-label={`预览 ${a.originalName}`}><Search size={15} /></Button></Tooltip>}<Tooltip content="下载附件" placement="left"><Button variant="text" shape="circle" onClick={() => { window.location.href = `/api/attachments/${a.id}/content?download=1`; }} aria-label={`下载 ${a.originalName}`}><ArrowDownToLine size={15} /></Button></Tooltip><Tooltip content={protectsLastProof ? "至少保留一张付款凭证" : "删除附件"} placement="left"><Button variant="text" shape="circle" theme="danger" disabled={protectsLastProof} onClick={() => { setRemoveReason(""); setRemoveError(""); setRemoveTarget(a); }} aria-label={protectsLastProof ? `不可删除最后一张付款凭证 ${a.originalName}` : `删除 ${a.originalName}`}><Trash2 size={14} /></Button></Tooltip></Space></div>; })}</div>
         {timeline.length > 0 && <><h3>操作记录</h3><div className="expense-timeline">{timeline.slice(0, 12).map(t => <div key={t.id}><span>{dateText(t.occurredAt, timezone)}</span><strong title={t.action}>{TIMELINE_LABELS[t.action] || t.action}</strong><small>{t.actorUsername || "系统"}</small></div>)}</div></>}
       </div>}
     </Drawer>
-    <Dialog visible={action === "status"} header={detail.status === "reimbursed" ? "改回未报销？" : "标记为已报销？"} confirmBtn={{ content: "确认变更", loading: busy, disabled: busy }} cancelBtn="取消" onClose={() => { if (!busy) setAction(null); }} onConfirm={() => void updateStatus()} onCancel={() => { if (!busy) setAction(null); }}>{detail.status === "reimbursed" ? "这笔账目会重新出现在未报销列表。" : "确认这笔账目已完成报销，并从未报销列表移出？"}</Dialog>
-    <Dialog visible={action === "trash"} header="移入回收站？" confirmBtn={{ content: "移入回收站", theme: "danger", loading: busy, disabled: busy }} cancelBtn="取消" onClose={() => { if (!busy) setAction(null); }} onConfirm={() => void trash()} onCancel={() => { if (!busy) setAction(null); }}>账目会从普通列表和导出结果中隐藏，附件会保留，可在回收站恢复。</Dialog>
-    <Dialog visible={Boolean(removeTarget)} header="删除附件？" confirmBtn={{ content: "删除附件", theme: "danger", loading: busy, disabled: busy }} cancelBtn="取消" onClose={() => { if (!busy) setRemoveTarget(null); }} onConfirm={() => void remove()} onCancel={() => { if (!busy) setRemoveTarget(null); }}>{removeTarget && <><p>{removeTarget.kind === "payment_proof" ? "账目至少需要保留一张付款凭证。" : detail.invoiceCount <= 1 && !detail.invoiceMissingReason?.trim() ? "这是最后一张发票。删除后必须填写无发票原因。" : "将删除这张发票。"}</p>{removeTarget.kind === "invoice" && detail.invoiceCount <= 1 && !detail.invoiceMissingReason?.trim() && <Textarea disabled={busy} aria-label="无发票原因" aria-invalid={Boolean(removeError)} aria-describedby={removeError ? "remove-attachment-error" : undefined} value={removeReason} onChange={value => { setRemoveReason(value); setRemoveError(""); }} placeholder="例如：商家无法开具发票" maxlength={500} />}{removeError && <div id="remove-attachment-error" className="expense-error" role="alert">{removeError}</div>}</>}</Dialog>
-    <Dialog visible={Boolean(preview)} header={preview?.originalName} onClose={() => setPreview(null)} cancelBtn="关闭" footer={null}>{preview && <div className="tn-preview">{preview.mimeType.startsWith("image/") ? <img src={`/api/attachments/${preview.id}/content`} alt={preview.originalName} /> : <iframe src={`/api/attachments/${preview.id}/content`} title={preview.originalName} />}</div>}</Dialog>
+    <Dialog width="540px" visible={action === "status"} header={detail.status === "reimbursed" ? "改回未报销？" : "标记为已报销？"} confirmBtn={{ content: "确认变更", loading: busy, disabled: busy }} cancelBtn="取消" onClose={() => { if (!busy) setAction(null); }} onConfirm={() => void updateStatus()} onCancel={() => { if (!busy) setAction(null); }}>{detail.status === "reimbursed" ? "确认将该笔账目恢复为未报销状态？" : "确认该笔账目已完成报销审批与结算？"}</Dialog>
+    <Dialog width="540px" visible={action === "trash"} header="移入回收站？" confirmBtn={{ content: "移入回收站", theme: "danger", loading: busy, disabled: busy }} cancelBtn="取消" onClose={() => { if (!busy) setAction(null); }} onConfirm={() => void trash()} onCancel={() => { if (!busy) setAction(null); }}>移入回收站后将不在正常列表中展示，关联附件会完整保留，可随时前往回收站恢复。</Dialog>
+    <Dialog width="560px" visible={Boolean(removeTarget)} header="删除附件？" confirmBtn={{ content: "删除附件", theme: "danger", loading: busy, disabled: busy }} cancelBtn="取消" onClose={() => { if (!busy) setRemoveTarget(null); }} onConfirm={() => void remove()} onCancel={() => { if (!busy) setRemoveTarget(null); }}>{removeTarget && <><p>{removeTarget.kind === "payment_proof" ? "每笔账目至少需要保留一张有效的付款凭证。" : detail.invoiceCount <= 1 && !detail.invoiceMissingReason?.trim() ? "当前为该账目唯一的发票附件，删除后请补充说明无发票原因。" : "确认删除该发票附件？"}</p>{removeTarget.kind === "invoice" && detail.invoiceCount <= 1 && !detail.invoiceMissingReason?.trim() && <Textarea disabled={busy} aria-label="无发票原因" aria-invalid={Boolean(removeError)} aria-describedby={removeError ? "remove-attachment-error" : undefined} value={removeReason} onChange={value => { setRemoveReason(value); setRemoveError(""); }} placeholder="例如：商家无法开具发票" maxlength={500} />}{removeError && <div id="remove-attachment-error" className="expense-error" role="alert">{removeError}</div>}</>}</Dialog>
+    <Dialog width="880px" className="tn-dialog-xlarge" visible={Boolean(preview)} header={preview?.originalName} onClose={() => setPreview(null)} cancelBtn="关闭" footer={null}>{preview && <div className="tn-preview">{preview.mimeType.startsWith("image/") ? <img src={`/api/attachments/${preview.id}/content`} alt={preview.originalName} /> : <iframe src={`/api/attachments/${preview.id}/content`} title={preview.originalName} />}</div>}</Dialog>
   </>;
 }

web-next/src/pages/expenses/ExpenseDrawer.tsx

@@ -143,7 +143,7 @@ export default function ExpenseDrawer({ expense, timezone = "Asia/Shanghai", onC
         {error && <div role="alert" className="expense-error"><AlertCircle size={16} />{error}</div>}
       </form>
     </Drawer>
-    <Dialog visible={Boolean(conflict)} header="记录已被更新" confirmBtn="保留当前内容" cancelBtn="加载服务器版本" onClose={() => { setConflict(null); setError("冲突提示已关闭，请再次保存以重新确认最新版本。"); }} onConfirm={() => { if (conflict) { setVersion(conflict.version); setServerInvoiceCount(conflict.invoiceCount); setConflict(null); setError("当前内容已保留，请再次保存以覆盖服务器版本。"); } }} onCancel={() => { if (conflict) { setAmount((conflict.amountCents / 100).toFixed(2)); setNote(conflict.note); setPaidAt(dateInputValue(new Date(conflict.paidAt), timezone)); setVersion(conflict.version); setServerInvoiceCount(conflict.invoiceCount); setConflict(null); } }}>另一位管理员刚刚修改了这笔账目。请选择如何处理，系统不会静默覆盖。</Dialog>
+    <Dialog width="560px" visible={Boolean(conflict)} header="记录已被更新" confirmBtn="保留当前内容" cancelBtn="加载服务器版本" onClose={() => { setConflict(null); setError("已取消冲突提示，再次点击保存将重新确认最新数据。"); }} onConfirm={() => { if (conflict) { setVersion(conflict.version); setServerInvoiceCount(conflict.invoiceCount); setConflict(null); setError("已保留您当前编辑的内容，再次点击保存将更新此账目。"); } }} onCancel={() => { if (conflict) { setAmount((conflict.amountCents / 100).toFixed(2)); setNote(conflict.note); setPaidAt(dateInputValue(new Date(conflict.paidAt), timezone)); setVersion(conflict.version); setServerInvoiceCount(conflict.invoiceCount); setConflict(null); } }}>此笔账目已被其他管理员更新。为保障财务数据准确，请选择保留您当前的编辑并覆盖，或同步加载最新版本。</Dialog>
   </>;
 }
 function focusExpenseField(errors: Partial<Record<ExpenseField, string>>) {

web-next/src/pages/expenses/ExpensesPage.tsx

@@ -1,3 +1,4 @@
+import { BeamLoading } from "../../components/BeamLoading";
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import { AlertCircle, ChevronLeft, ChevronRight, ClipboardList, FileDown, FileText, Pencil, Plus, RefreshCw, Search, Trash2, X } from "lucide-react";
 import { Button, Checkbox, DatePicker, Dialog, Loading, Radio, Space, Table, Tag, Tooltip } from "tdesign-react";
@@ -9,6 +10,8 @@ import AccessibleInput from "../../components/AccessibleInput";
 import { dateText, money, monthNow } from "./date";
 import type { Expense, Notify } from "./types";
 
+let expensesCache: { key: string; items: Expense[]; summary: { count: number; amountCents: number } } | null = null;
+
 type Props = { timezone?: string; notify?: Notify; sessionKey?: string };
 const EXPORT_JOB_STORAGE_KEY = "tallynote.exportJobId";
 
@@ -29,9 +32,14 @@ export default function ExpensesPage({ timezone: timezoneProp = "Asia/Shanghai",
   const query = rawQuery.slice(0, 200);
   const rawMissingInvoice = searchParams.get("missingInvoice");
   const missingInvoice = searchParams.get("missingInvoice") === "true";
-  const [queryDraft, setQueryDraft] = useState(query);
-  const [items, setItems] = useState<Expense[]>([]); const [summary, setSummary] = useState({ count: 0, amountCents: 0 }); const [loading, setLoading] = useState(false); const [error, setError] = useState(""); const [loadedFilterKey, setLoadedFilterKey] = useState<string | null>(null); const [selectedKeys, setSelectedKeys] = useState<string[]>([]); const [drawer, setDrawer] = useState<"new" | "detail" | "edit" | null>(null); const [selected, setSelected] = useState<Expense | null>(null); const [includeManifest, setIncludeManifest] = useState(false); const [exporting, setExporting] = useState<string | null>(() => savedExportJob(exportStorageKey)); const [exportIssue, setExportIssue] = useState(""); const [trashTarget, setTrashTarget] = useState<Expense | null>(null); const [trashing, setTrashing] = useState(false); const sequence = useRef(0); const exportStarting = useRef(false);
   const filterKey = `${month}|${status}|${query}|${missingInvoice ? "1" : "0"}`;
+  const isCached = expensesCache?.key === filterKey;
+  const [queryDraft, setQueryDraft] = useState(query);
+  const [items, setItems] = useState<Expense[]>(() => (isCached ? expensesCache!.items : []));
+  const [summary, setSummary] = useState(() => (isCached ? expensesCache!.summary : { count: 0, amountCents: 0 }));
+  const [loading, setLoading] = useState(() => !isCached);
+  const [error, setError] = useState("");
+  const [loadedFilterKey, setLoadedFilterKey] = useState<string | null>(() => (isCached ? filterKey : null)); const [selectedKeys, setSelectedKeys] = useState<string[]>([]); const [drawer, setDrawer] = useState<"new" | "detail" | "edit" | null>(null); const [selected, setSelected] = useState<Expense | null>(null); const [includeManifest, setIncludeManifest] = useState(false); const [exporting, setExporting] = useState<string | null>(() => savedExportJob(exportStorageKey)); const [exportIssue, setExportIssue] = useState(""); const [trashTarget, setTrashTarget] = useState<Expense | null>(null); const [trashing, setTrashing] = useState(false); const sequence = useRef(0); const exportStarting = useRef(false);
   useEffect(() => {
     const params = new URLSearchParams(searchParams);
     let changed = false;
@@ -54,8 +62,8 @@ export default function ExpensesPage({ timezone: timezoneProp = "Asia/Shanghai",
     if (next.missingInvoice ?? missingInvoice) params.set("missingInvoice", "true"); else params.delete("missingInvoice");
     setSearchParams(params);
   };
-  const load = async () => { const s = ++sequence.current; const requestedKey = filterKey; setLoading(true); setError(""); try { const result = await api<{ items: Expense[]; summary: typeof summary }>(`/api/expenses?month=${month}&status=${status}&query=${encodeURIComponent(query)}&missingInvoice=${missingInvoice}`); if (s === sequence.current) { setItems(result.items); setSummary(result.summary); setLoadedFilterKey(requestedKey); setSelectedKeys(keys => keys.filter(k => result.items.some(x => x.id === k))); } } catch (e) { if (s === sequence.current) { setItems([]); setSummary({ count: 0, amountCents: 0 }); setLoadedFilterKey(null); setError((e as Error).message); } } finally { if (s === sequence.current) setLoading(false); } };
-  useEffect(() => { setSelectedKeys([]); setItems([]); setSummary({ count: 0, amountCents: 0 }); setLoadedFilterKey(null); void load(); }, [filterKey]);
+  const load = async () => { const s = ++sequence.current; const requestedKey = filterKey; setLoading(true); setError(""); try { const result = await api<{ items: Expense[]; summary: typeof summary }>(`/api/expenses?month=${month}&status=${status}&query=${encodeURIComponent(query)}&missingInvoice=${missingInvoice}`); if (s === sequence.current) { setItems(result.items); setSummary(result.summary); setLoadedFilterKey(requestedKey); setSelectedKeys(keys => keys.filter(k => result.items.some(x => x.id === k))); expensesCache = { key: requestedKey, items: result.items, summary: result.summary }; } } catch (e) { if (s === sequence.current) { setItems([]); setSummary({ count: 0, amountCents: 0 }); setLoadedFilterKey(null); setError((e as Error).message); } } finally { if (s === sequence.current) setLoading(false); } };
+  useEffect(() => { setSelectedKeys([]); if (expensesCache?.key !== filterKey) { setItems([]); setSummary({ count: 0, amountCents: 0 }); setLoadedFilterKey(null); } void load(); }, [filterKey]);
   const selectedTotal = useMemo(() => items.filter(i => selectedKeys.includes(i.id)).reduce((sum, i) => sum + i.amountCents, 0), [items, selectedKeys]);
   const shiftMonth = (delta: number) => { const [rawYear, rawMonthNumber] = month.split("-").map(Number); const y = rawYear || new Date().getFullYear(); const m = rawMonthNumber || 1; const d = new Date(y, m - 1 + delta, 1); updateFilters({ month: `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}` }); };
   const rememberExportJob = (jobId: string | null) => {
@@ -92,14 +100,14 @@ export default function ExpensesPage({ timezone: timezoneProp = "Asia/Shanghai",
       } catch {
         if (disposed) return;
         failureCount += 1;
-        setExportIssue("网络连接不稳定，导出仍在后台进行，正在重新查询状态…");
+        setExportIssue("网络响应稍慢，数据导出仍在后台处理中，正在自动同步进度…");
         schedule(Math.min(1000 * (2 ** Math.min(failureCount, 3)), 8000));
       }
     };
     void poll();
     return () => { disposed = true; if (timer !== undefined) window.clearTimeout(timer); };
   }, [exporting, notify]);
-  const moveToTrash = async () => { if (!trashTarget) return; setTrashing(true); try { await api(`/api/expenses/${trashTarget.id}`, { method: "DELETE", body: JSON.stringify({ version: trashTarget.version }) }); notify?.("账目已移入回收站，可在回收站恢复", "success"); setTrashTarget(null); await load(); } catch (e) { notify?.((e as Error).message, "error"); } finally { setTrashing(false); } };
+  const moveToTrash = async () => { if (!trashTarget) return; setTrashing(true); try { await api(`/api/expenses/${trashTarget.id}`, { method: "DELETE", body: JSON.stringify({ version: trashTarget.version }) }); notify?.("账目已移入回收站，可随时在回收站恢复", "success"); setTrashTarget(null); await load(); } catch (e) { notify?.((e as Error).message, "error"); } finally { setTrashing(false); } };
   const columns = [
     { colKey: "row-select", type: "multiple" },
     { colKey: "paidAt", title: "支付时间", cell: ({ row }: any) => dateText(row.paidAt, timezone) },
@@ -122,10 +130,10 @@ export default function ExpensesPage({ timezone: timezoneProp = "Asia/Shanghai",
   return <div className="tn-page expenses-page"><div className="tn-page-head expenses-head"><div><h1 className="tn-page-title">账目列表</h1></div><div className="tn-page-actions"><Checkbox checked={includeManifest} onChange={setIncludeManifest}>包含 manifest.json</Checkbox><Button variant="outline" onClick={() => void exportAll()} disabled={Boolean(exporting) || (!selectedKeys.length && (!items.length || !dataReady))} icon={<FileDown size={16} />}>{exporting ? "导出中…" : selectedKeys.length ? `导出所选（${selectedKeys.length}）` : "导出筛选结果"}</Button><Button theme="primary" onClick={() => setDrawer("new")} icon={<Plus size={16} />}>新增账目</Button></div></div>
     <div className="tn-toolbar expenses-toolbar"><div className="tn-expense-month-controls"><Tooltip content="上个月"><Button variant="text" shape="square" onClick={() => shiftMonth(-1)} aria-label="上个月" icon={<ChevronLeft size={18} />} /></Tooltip><DatePicker className="tn-month-picker" mode="month" format="YYYY-MM" value={month} onChange={(value: any) => { const next = String(value || "").slice(0, 7); if (/^\d{4}-\d{2}$/.test(next)) updateFilters({ month: next }); }} placeholder="选择月份" inputProps={{ "aria-label": "账目月份" } as any} /><Tooltip content="下个月"><Button variant="text" shape="square" onClick={() => shiftMonth(1)} aria-label="下个月" icon={<ChevronRight size={18} />} /></Tooltip></div><Radio.Group className="tn-segmented" theme="button" variant="primary-filled" value={status} onChange={(value: any) => updateFilters({ status: value as "unreimbursed" | "reimbursed" })} aria-label="报销状态"><Radio.Button value="unreimbursed">未报销</Radio.Button><Radio.Button value="reimbursed">已报销</Radio.Button></Radio.Group><div className="tn-expense-search-controls"><AccessibleInput inputAriaLabel="搜索备注" className="tn-expense-search" value={queryDraft} onChange={setQueryDraft} onEnter={() => { if (queryDraft.trim() === query) void load(); else updateFilters({ query: queryDraft }); }} maxlength={200} placeholder="搜索备注" prefixIcon={<Search size={16} />} suffix={queryDraft ? <Tooltip content="清除搜索"><Button variant="text" shape="square" onClick={() => { setQueryDraft(""); updateFilters({ query: "" }); }} aria-label="清除搜索" icon={<X size={14} />} /></Tooltip> : undefined} /><Button variant="outline" onClick={() => { if (queryDraft.trim() === query) void load(); else updateFilters({ query: queryDraft }); }} disabled={loading} icon={<Search size={15} />}>搜索</Button></div><div className="tn-expense-filter-actions"><Checkbox checked={missingInvoice} onChange={checked => updateFilters({ missingInvoice: checked })}>缺发票</Checkbox><Tooltip content="刷新当前结果"><Button variant="outline" shape="square" onClick={() => void load()} disabled={loading} aria-label="刷新当前结果" icon={<RefreshCw size={15} />} /></Tooltip></div></div>
     <div className="tn-summary expenses-summary"><span>{summary.count} 笔</span><strong>{money(summary.amountCents)}</strong>{selectedKeys.length > 0 && <><span>已选 {selectedKeys.length} 笔，共 {money(selectedTotal)}</span><Button variant="text" onClick={() => setSelectedKeys([])}>清除选择</Button></>}</div>
-    {exportIssue && <div className="tn-export-status" role="status"><RefreshCw size={15} className="spin" /><span>{exportIssue}</span><Button variant="text" onClick={() => { setExportIssue(""); rememberExportJob(null); }}>停止等待</Button></div>}
+    {exportIssue && <div className="tn-export-status" role="status"><RefreshCw size={15} className="spin" /><span>{exportIssue}</span><Button variant="text" onClick={() => { setExportIssue(""); rememberExportJob(null); }}>关闭提示</Button></div>}
     {error && <div className="expense-error" role="alert"><AlertCircle size={16} />{error}<Button variant="text" onClick={() => void load()}>重试</Button></div>}
-    {error ? null : !dataReady || (loading && !items.length) ? <div className="tn-empty" role="status" aria-live="polite"><Loading text="加载中…" /></div> : !items.length ? emptyState : <div className="tn-table-wrap" role="region" aria-label="账目列表，可横向滚动查看更多列"><Table rowKey="id" data={items} columns={columns as any} selectedRowKeys={selectedKeys} onSelectChange={(keys: any[]) => setSelectedKeys(keys as string[])} hover stripe /></div>}
+    {error ? null : (!items.length && (loading || !dataReady)) ? <div className="tn-empty" role="status" aria-live="polite"><BeamLoading text="正在加载账目列表…" /></div> : !items.length ? emptyState : <div className="tn-table-wrap" role="region" aria-label="账目列表，可横向滚动查看更多列"><Table rowKey="id" data={items} columns={columns as any} selectedRowKeys={selectedKeys} onSelectChange={(keys: any[]) => setSelectedKeys(keys as string[])} hover stripe /></div>}
     {drawer === "new" && <ExpenseDrawer timezone={timezone} onClose={() => setDrawer(null)} onSaved={load} notify={notify} />}{drawer === "edit" && selected && <ExpenseDrawer timezone={timezone} expense={selected} onClose={() => setDrawer(null)} onSaved={load} notify={notify} />}{drawer === "detail" && selected && <ExpenseDetail timezone={timezone} expense={selected} onClose={() => setDrawer(null)} onUpdated={load} onRequestEdit={e => { setSelected(e); setDrawer("edit"); }} notify={notify} />}
-    {trashTarget && <Dialog visible header="移入回收站？" confirmBtn={{ content: "移入回收站", theme: "danger", loading: trashing, disabled: trashing }} cancelBtn="取消" onClose={() => { if (!trashing) setTrashTarget(null); }} onConfirm={() => void moveToTrash()} onCancel={() => { if (!trashing) setTrashTarget(null); }}>将“{trashTarget.note || `${dateText(trashTarget.paidAt, timezone)}的账目`}”移入回收站。它会从普通列表和导出结果中隐藏，附件会保留，可随时恢复。</Dialog>}
+    {trashTarget && <Dialog width="540px" visible header="移入回收站？" confirmBtn={{ content: "移入回收站", theme: "danger", loading: trashing, disabled: trashing }} cancelBtn="取消" onClose={() => { if (!trashing) setTrashTarget(null); }} onConfirm={() => void moveToTrash()} onCancel={() => { if (!trashing) setTrashTarget(null); }}>确认将“{trashTarget.note || `${dateText(trashTarget.paidAt, timezone)}的账目`}”移入回收站？移入后将不在正常列表中展示，关联附件将完整保留，可随时恢复。</Dialog>}
   </div>;
 }

web-next/src/pages/trash/TrashPage.tsx

@@ -53,12 +53,12 @@ export default function TrashPage({ timezone = "Asia/Shanghai", notify }: { time
     { colKey: "actions", title: "操作", width: 190, cell: ({ row }: any) => <Space className="tn-action-group"><Button variant="outline" onClick={() => void restore(row)} disabled={busy} icon={busy ? <BusyIcon /> : <RotateCcw size={15} />}>恢复</Button><Button theme="danger" variant="outline" onClick={() => { setPurgeTarget(row); setPassword(""); setPurgeError(""); }} disabled={busy} icon={<Trash2 size={15} />}>永久删除</Button></Space> },
   ];
 
-  return <Page title="回收站" subtitle="已删除的账目会保留附件，可恢复或经过密码确认后永久删除。" actions={<Button variant="outline" onClick={() => void load()} disabled={loading || busy} icon={<RotateCcw size={15} />}>刷新</Button>}>
+  return <Page title="回收站" subtitle="已标记删除的账目暂存于此，支持一键恢复或经安全验证后彻底清除。" actions={<Button variant="outline" onClick={() => void load()} disabled={loading || busy} icon={<RotateCcw size={15} />}>刷新</Button>}>
     <AsyncState loading={loading} error={error} empty={items.length === 0 ? <div className="tn-empty"><Trash2 size={30} /><p>回收站为空</p></div> : undefined} onRetry={() => void load()}>
       <div className="tn-table-wrap" role="region" aria-label="回收站账目列表，可横向滚动查看更多列"><Table rowKey="id" data={items} columns={columns as any} hover stripe /></div>
     </AsyncState>
-      <Dialog visible={Boolean(purgeTarget)} header="永久删除账目" confirmBtn={{ content: "永久删除", theme: "danger", loading: busy, disabled: busy }} cancelBtn="取消" onClose={() => { if (!busy) { setPurgeTarget(null); setPurgeError(""); } }} onConfirm={() => void purge()} onCancel={() => { if (!busy) { setPurgeTarget(null); setPurgeError(""); } }}>
-      <p>此操作会移除账目和附件字节，完整审计内容仍会保留，且无法恢复。</p>
+      <Dialog width="540px" visible={Boolean(purgeTarget)} header="永久删除账目" confirmBtn={{ content: "永久删除", theme: "danger", loading: busy, disabled: busy }} cancelBtn="取消" onClose={() => { if (!busy) { setPurgeTarget(null); setPurgeError(""); } }} onConfirm={() => void purge()} onCancel={() => { if (!busy) { setPurgeTarget(null); setPurgeError(""); } }}>
+      <p>此操作将永久清除该笔账目及其关联的所有凭证与发票附件，审计日志将予以留存，清除后不可恢复。</p>
       <p className="tn-dialog-note">请输入当前管理员密码确认。</p>
       <AccessibleInput inputAriaLabel="当前管理员密码" inputAriaInvalid={Boolean(purgeError)} inputAriaDescribedby={purgeError ? "trash-purge-error" : undefined} type="password" value={password} onChange={value => { setPassword(value); setPurgeError(""); }} placeholder="当前管理员密码" autocomplete="current-password" />
       {purgeError && <div id="trash-purge-error" className="tn-inline-error" role="alert">{purgeError}</div>}

web-next/src/pages/update/mockData.ts

@@ -173,7 +173,7 @@ export const MOCK_SCENARIOS: Record<MockScenario, MockUpdateState> = {
   },
   backing_up: {
     title: "数据备份中（更新保护）",
-    description: "正在为 /var/lib/tallynote 生成自动还原快照",
+    description: "正在为系统数据生成安全快照备份",
     info: {
       configured: true,
       strategy: "systemd",
@@ -194,7 +194,7 @@ export const MOCK_SCENARIOS: Record<MockScenario, MockUpdateState> = {
   },
   applying: {
     title: "服务平滑重启中（倒计时中）",
-    description: "已原子切换版本，systemd 正在热重启，前端实时探活",
+    description: "已安全切换版本，服务正在热重启并检验状态",
     info: {
       configured: true,
       strategy: "systemd",
@@ -269,7 +269,7 @@ export const MOCK_SCENARIOS: Record<MockScenario, MockUpdateState> = {
   },
   disabled: {
     title: "手动源码模式",
-    description: "未接入 systemd 时的只读说明与命令引导展示",
+    description: "未启用后台守护时的更新提示与引导说明",
     info: {
       configured: false,
       strategy: "disabled",

web-next/src/services/api.ts

@@ -96,7 +96,7 @@ export async function api<T = unknown>(url: string, init: ApiRequestInit = {}):
       }
       throw new ApiError(
         response.status,
-        error?.message || `请求失败（${response.status}）`,
+        error?.message || (response.status >= 500 ? "服务器暂时繁忙，请稍后重试" : "操作未能完成，请稍后重试"),
         error?.code,
         error?.details,
         error?.requestId,
@@ -108,7 +108,7 @@ export async function api<T = unknown>(url: string, init: ApiRequestInit = {}):
     if (caught instanceof ApiError) throw caught;
     if (timedOut) throw new ApiError(408, "请求超时，请稍后重试", "REQUEST_TIMEOUT");
     if (externalSignal?.aborted) throw new ApiError(0, "请求已取消", "REQUEST_CANCELED");
-    throw new ApiError(0, "网络连接失败，请确认服务仍在运行");
+    throw new ApiError(0, "网络连接异常，请检查网络后重试");
   } finally {
     clearTimeout(timeout);
     externalSignal?.removeEventListener("abort", abortFromCaller);

web-next/src/styles/theme.css

@@ -100,11 +100,149 @@ input:focus-visible, textarea:focus-visible, select:focus-visible {
 .tn-route-error-panel { width: min(420px, 100%); padding: 30px; border: 1px solid var(--tn-border); border-radius: 4px; background: var(--tn-surface); box-shadow: 0 14px 36px rgba(11, 58, 136, .08); }
 .tn-route-error-panel h1 { margin: 0; color: var(--tn-text); font-size: 22px; }
 .tn-route-error-panel p { margin: 10px 0 20px; color: var(--tn-text-secondary); overflow-wrap: anywhere; }
-.t-notification { width: min(360px, calc(100vw - 32px)); max-width: calc(100vw - 32px); border: 1px solid var(--tn-border); border-left-width: 1px; border-radius: 4px; box-shadow: 0 10px 26px rgba(11, 58, 136, .14); }
-/* TDesign mounts this wrapper directly under body. Keep one viewport inset
-   at every breakpoint so notices remain fully visible while the page resizes. */
-.t-notification__show--top-right { right: 16px; }
-.t-notification__content { color: var(--tn-text); }
+/* ============================================================
+   Toast 样式四：柔和语义双层卡片 (Soft Tinted Card / 严格水平对齐)
+   ============================================================ */
+.t-notification {
+  width: min(380px, calc(100vw - 32px)) !important;
+  max-width: calc(100vw - 32px) !important;
+  border-radius: 6px !important;
+  padding: 12px 16px !important;
+  box-shadow: 0 10px 25px -4px rgba(15, 23, 42, 0.08), 0 4px 10px -2px rgba(15, 23, 42, 0.04) !important;
+  display: flex !important;
+  align-items: center !important;
+  gap: 10px !important;
+  box-sizing: border-box !important;
+  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
+}
+.t-notification__show--top-right {
+  top: 76px !important;
+  right: 24px !important;
+  z-index: 6000 !important;
+}
+@media (max-width: 768px) {
+  .t-notification__show--top-right {
+    top: 16px !important;
+    right: 16px !important;
+    left: 16px !important;
+    width: auto !important;
+  }
+}
+.tn-modal-error-banner {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 11px 16px;
+  margin-bottom: 16px;
+  border-radius: 6px;
+  background: #fef2f2;
+  border: 1px solid #fecaca;
+  color: #991b1b;
+  font-size: 13.5px;
+  font-weight: 500;
+  line-height: 1.4;
+}
+.tn-modal-error-banner svg {
+  flex-shrink: 0;
+  color: #dc2626;
+}
+
+/* 核心对齐修复：清除 TDesign 默认的 margin-top: 8px 导致的文字下沉不居中 */
+.t-notification__main {
+  flex: 1 !important;
+  display: flex !important;
+  flex-direction: column !important;
+  justify-content: center !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  min-width: 0 !important;
+}
+.t-notification__content {
+  color: inherit !important;
+  font-size: 13.5px !important;
+  font-weight: 500 !important;
+  line-height: 1.4 !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  display: block !important;
+  word-break: break-word !important;
+}
+.t-notification__icon {
+  margin: 0 !important;
+  padding: 0 !important;
+  width: 20px !important;
+  height: 20px !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  flex-shrink: 0 !important;
+  line-height: 1 !important;
+}
+.t-notification__icon .t-icon {
+  font-size: 18px !important;
+  width: 18px !important;
+  height: 18px !important;
+  display: block !important;
+  margin: 0 auto !important;
+}
+.t-notification__close {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  margin: 0 0 0 auto !important;
+  padding: 0 !important;
+  height: 20px !important;
+  width: 20px !important;
+  line-height: 1 !important;
+  color: inherit !important;
+  opacity: 0.55 !important;
+  cursor: pointer !important;
+  transition: opacity 0.15s ease !important;
+  flex-shrink: 0 !important;
+}
+.t-notification__close:hover {
+  opacity: 1 !important;
+}
+
+/* Success: 柔和薄荷浅绿 */
+.t-notification.t-is-success {
+  background: #f0fdf4 !important;
+  border: 1px solid #bbf7d0 !important;
+  color: #166534 !important;
+}
+.t-notification.t-is-success .t-notification__icon {
+  color: #16a34a !important;
+}
+
+/* Info: 柔和天空浅蓝 */
+.t-notification.t-is-info {
+  background: #eff6ff !important;
+  border: 1px solid #bfdbfe !important;
+  color: #1e40af !important;
+}
+.t-notification.t-is-info .t-notification__icon {
+  color: #2563eb !important;
+}
+
+/* Warning: 柔和金橙浅黄 */
+.t-notification.t-is-warning {
+  background: #fffbeb !important;
+  border: 1px solid #fde68a !important;
+  color: #92400e !important;
+}
+.t-notification.t-is-warning .t-notification__icon {
+  color: #d97706 !important;
+}
+
+/* Error: 柔和玫瑰浅红 */
+.t-notification.t-is-error {
+  background: #fef2f2 !important;
+  border: 1px solid #fecaca !important;
+  color: #991b1b !important;
+}
+.t-notification.t-is-error .t-notification__icon {
+  color: #dc2626 !important;
+}
 
 .tn-layout { width: 100%; height: 100%; min-height: 100vh; display: flex; flex-direction: row !important; background: var(--tn-page); overflow: hidden; }
 .tn-desktop-menu { position: relative; top: 0; z-index: 30; display: block; width: 232px; height: 100%; flex: 0 0 232px; min-height: 100%; overflow: hidden; border-right: 1px solid var(--tn-border); background: var(--tn-surface); transition: width .22s ease, flex-basis .22s ease, opacity .22s ease; }
@@ -201,7 +339,59 @@ input:focus-visible, textarea:focus-visible, select:focus-visible {
 .tn-action-group .t-button { color: var(--tn-text-secondary); }
 .tn-action-group .t-button:not(.t-button--theme-danger):hover { color: var(--tn-blue-700); background: var(--tn-blue-100); }
 .tn-action-group .t-button.t-button--theme-danger:hover { color: var(--tn-danger); background: #fff0f0; }
-.tn-empty { display: grid; min-height: 260px; place-items: center; align-content: center; gap: 10px; padding: 48px 20px; color: var(--tn-text-muted); text-align: center; }
+/* Absolutely Centered Loading and Empty States */
+.tn-empty {
+  display: flex !important;
+  flex-direction: column !important;
+  align-items: center !important;
+  justify-content: center !important;
+  min-height: max(380px, calc(100vh - 320px)) !important;
+  width: 100% !important;
+  height: 100% !important;
+  flex: 1 !important;
+  gap: 12px !important;
+  padding: 40px 20px !important;
+  color: var(--tn-text-muted) !important;
+  text-align: center !important;
+  box-sizing: border-box !important;
+}
+.expenses-page .tn-empty,
+.tn-dashboard-page .tn-empty,
+.tn-audit-table .tn-empty {
+  min-height: max(400px, calc(100vh - 300px)) !important;
+}
+.tn-detail-drawer .tn-empty,
+.tn-detail-drawer .t-drawer__body > div[role="status"] {
+  display: flex !important;
+  flex-direction: column !important;
+  align-items: center !important;
+  justify-content: center !important;
+  min-height: calc(100vh - 180px) !important;
+  height: 100% !important;
+  width: 100% !important;
+}
+.tn-auth-shell {
+  display: flex !important;
+  flex-direction: column !important;
+  align-items: center !important;
+  justify-content: center !important;
+  min-height: 100vh !important;
+  height: 100% !important;
+  padding: 24px !important;
+  background: var(--tn-page) !important;
+}
+.tn-page-loading {
+  display: flex !important;
+  flex-direction: column !important;
+  align-items: center !important;
+  justify-content: center !important;
+  min-height: calc(100vh - 120px) !important;
+  height: 100% !important;
+  width: 100% !important;
+  padding: 32px 20px !important;
+  color: var(--tn-text-muted) !important;
+  text-align: center !important;
+}
 .tn-page-loading { display: grid; min-width: 0; min-height: 100%; place-items: center; align-content: center; gap: 10px; padding: 32px 20px; color: var(--tn-text-muted); text-align: center; }
 .tn-empty p { margin: 0; color: var(--tn-text-secondary); }
 .tn-selection { display: flex; align-items: center; gap: 14px; padding: 10px 12px; margin: 10px 0; border-left: 3px solid var(--tn-success); background: #eff7f2; color: #24543f; }
@@ -339,7 +529,7 @@ input:focus-visible, textarea:focus-visible, select:focus-visible {
 .tn-dashboard-month-control .tn-dashboard-month { width: 148px; flex: 0 1 148px; }
 .tn-dashboard-secondary-actions .tn-dashboard-refresh, .tn-dashboard-secondary-actions .tn-dashboard-view { flex: 0 0 auto; }
 .tn-layout { animation: tn-app-enter .24s ease-out both; }
-.tn-page-transition { animation: tn-page-in .18s ease-out both; }
+.tn-page-transition { animation: tn-page-in .14s cubic-bezier(0.16, 1, 0.3, 1) both; will-change: opacity, transform; }
 .tn-page-actions .t-button { min-height: 36px; }
 .expenses-toolbar { display: flex; align-items: center; gap: 8px; }
 .expenses-toolbar .t-button--shape-square { width: 36px; height: 36px; min-width: 36px; min-height: 36px; }
@@ -406,10 +596,50 @@ input:focus-visible, textarea:focus-visible, select:focus-visible {
 .tn-spin, .spin { animation: tn-spin .9s linear infinite; }
 @keyframes tn-spin { to { transform: rotate(360deg); } }
 
-@keyframes tn-page-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
+@keyframes tn-page-in { from { opacity: 0.88; transform: translateY(2px); } to { opacity: 1; transform: translateY(0); } }
 @keyframes tn-app-enter { from { opacity: 0; } to { opacity: 1; } }
 @keyframes tn-auth-page-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
-.t-dialog { border: 1px solid var(--tn-border); border-radius: 4px; box-shadow: 0 18px 42px rgba(8, 47, 118, .18); }
+.t-dialog {
+  border: 1px solid var(--tn-border);
+  border-radius: 4px;
+  box-shadow: 0 18px 42px rgba(8, 47, 118, .18);
+  width: 560px;
+  max-width: calc(100vw - 32px);
+}
+@media (min-width: 901px) {
+  .t-dialog {
+    width: 580px;
+  }
+  .t-dialog.tn-dialog-medium {
+    width: 680px !important;
+  }
+  .t-dialog.tn-dialog-large {
+    width: 820px !important;
+  }
+  .t-dialog.tn-dialog-xlarge {
+    width: 960px !important;
+  }
+}
+.tn-queued-runtime-notice {
+  background: var(--tn-surface);
+  border: 1px solid var(--tn-border);
+  border-radius: 4px;
+  padding: 12px 14px;
+  margin-top: 12px;
+}
+.tn-queued-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 4px;
+  font-weight: 500;
+  color: var(--tn-navy-900);
+}
+.tn-queued-header span {
+  font-size: 13.5px;
+}
+
 /* TDesign Dialog global no-icon & pure baseline typography normalization */
 .t-dialog__header .t-icon:not(.t-icon-close),
 .t-dialog__body .t-icon,
@@ -564,6 +794,8 @@ input:focus-visible, textarea:focus-visible, select:focus-visible {
 }
 @media (prefers-reduced-motion: reduce) {
   *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
+  /* Active loading indicators must retain continuous movement so users know tasks are progressing */
+  .tn-beam-bar::after, .tn-spin { animation-duration: 2s !important; animation-iteration-count: infinite !important; }
 }
 
 /* ==========================================================================
@@ -639,35 +871,7 @@ input:focus-visible, textarea:focus-visible, select:focus-visible {
   gap: 14px;
   margin-bottom: 16px;
 }
-.tn-metric-card .t-card__body {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  padding: 16px 18px;
-  min-height: 104px;
-}
-.tn-metric-content {
-  width: 100%;
-}
-.tn-metric-label {
-  display: block;
-  font-size: 12px;
-  color: var(--tn-text-secondary);
-  margin-bottom: 4px;
-}
-.tn-metric-value {
-  font-size: 20px;
-  font-weight: 700;
-  color: var(--tn-navy-900);
-  font-family: "Plus Jakarta Sans Variable", sans-serif;
-  font-variant-numeric: tabular-nums;
-  line-height: 1.2;
-}
-.tn-metric-foot {
-  margin-top: 6px;
-  font-size: 12px;
-  color: var(--tn-text-muted);
-}
+
 
 /* Stepper Surface */
 .tn-stepper-surface {
@@ -1107,3 +1311,447 @@ input:focus-visible, textarea:focus-visible, select:focus-visible {
     justify-content: flex-start;
   }
 }
+
+
+/* System Update Console & Phase Styles */
+.tn-release-version-title {
+  margin: 4px 0 8px;
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--tn-navy-900);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.tn-release-nickname {
+  font-size: 15px;
+  font-weight: 500;
+  color: var(--tn-text-secondary);
+}
+.tn-release-meta-row {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  font-size: 13px;
+  color: var(--tn-text-secondary);
+  flex-wrap: wrap;
+}
+.tn-meta-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+.tn-meta-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--td-brand-color);
+  text-decoration: none;
+}
+.tn-meta-link:hover {
+  text-decoration: underline;
+}
+
+/* In-Page Release Notes Container */
+.tn-release-notes-surface {
+  margin-bottom: 16px;
+  padding: 20px;
+}
+.tn-release-notes-box {
+  margin: 0;
+  padding: 16px 20px;
+  background: var(--tn-surface-alt, #f8fafc);
+  border: 1px solid var(--tn-border);
+  border-left: 3px solid var(--td-brand-color);
+  border-radius: 4px;
+}
+.tn-release-notes-content {
+  font-size: 13.5px;
+  color: var(--tn-text);
+  line-height: 1.7;
+  max-height: 380px;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--td-brand-color-3) transparent;
+}
+
+/* Upgrade Modal Phases */
+.tn-upgrade-phase-confirm {
+  padding: 12px 0;
+}
+.tn-confirm-phase-head {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  margin-bottom: 16px;
+}
+.tn-confirm-phase-head h4 {
+  margin: 0 0 6px;
+  font-size: 17px;
+  font-weight: 600;
+  color: var(--tn-navy-900);
+}
+.tn-confirm-phase-head p {
+  margin: 0;
+  font-size: 13.5px;
+}
+.tn-upgrade-safety-tips {
+  background: rgba(23, 92, 211, 0.04);
+  border: 1px solid rgba(23, 92, 211, 0.15);
+  border-radius: 4px;
+  padding: 14px 16px;
+  font-size: 13px;
+  line-height: 1.8;
+  color: var(--tn-navy-900);
+  margin-bottom: 20px;
+}
+.tn-modal-actions-bar {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 12px;
+  margin-top: 20px;
+}
+.tn-staged-apply-box {
+  padding: 12px 0 4px;
+}
+.tn-staged-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+  font-size: 15px;
+}
+.tn-upgrade-phase-completed {
+  padding: 24px 0 12px;
+}
+.tn-completed-banner {
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  background: rgba(47, 125, 92, 0.06);
+  border: 1px solid rgba(47, 125, 92, 0.2);
+  border-radius: 4px;
+  padding: 18px 22px;
+  margin-bottom: 16px;
+}
+.tn-completed-banner h4 {
+  margin: 0 0 4px;
+  font-size: 18px;
+  font-weight: 600;
+  color: #1e6043;
+}
+.tn-completed-banner p {
+  margin: 0;
+  font-size: 13.5px;
+  color: var(--tn-text);
+}
+.tn-upgrade-phase-failed {
+  padding: 16px 0;
+}
+.tn-modal-footer-close {
+  display: flex;
+  justify-content: center;
+  margin-top: 18px;
+  border-top: 1px dashed var(--tn-border);
+  padding-top: 14px;
+}
+
+
+/* ============================================================
+   ASCII Layout Accurate Styles for Update Center
+   ============================================================ */
+
+/* 4 Metric Cards Grid - Strictly Fixed Height & Zero Layout Shift */
+.tn-metrics-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 16px;
+  margin-bottom: 20px;
+  align-items: start;
+}
+.tn-metric-card {
+  height: 104px !important;
+  min-height: 104px !important;
+  max-height: 104px !important;
+  box-sizing: border-box !important;
+  padding: 0 !important;
+  background: #ffffff;
+  border: 1px solid var(--tn-border);
+  border-radius: 4px;
+  overflow: hidden !important;
+}
+.tn-metric-card .t-card__body {
+  height: 100% !important;
+  box-sizing: border-box !important;
+  display: flex !important;
+  flex-direction: column !important;
+  justify-content: space-between !important;
+  padding: 14px 18px !important;
+}
+.tn-metric-label {
+  display: block;
+  font-size: 12.5px;
+  color: var(--tn-text-secondary);
+  line-height: 1;
+  margin: 0;
+}
+.tn-metric-value {
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--tn-navy-900);
+  line-height: 1.2;
+  margin: 4px 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-variant-numeric: tabular-nums;
+}
+.tn-metric-card.tn-metric-date .tn-metric-value {
+  font-size: 16px !important;
+  font-weight: 600 !important;
+  line-height: 1.3 !important;
+}
+.tn-metric-foot {
+  font-size: 12px;
+  color: var(--tn-text-secondary);
+  height: 20px !important;
+  min-height: 20px !important;
+  max-height: 20px !important;
+  line-height: 20px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: flex;
+  align-items: center;
+  margin: 0;
+}
+
+/* Container 5: Release Details (Exact ASCII: 2 rows, 3 columns) */
+.tn-ascii-release-container {
+  padding: 22px 24px;
+  margin-bottom: 20px;
+  background: #ffffff;
+  border: 1px solid var(--tn-border);
+  border-radius: 4px;
+}
+.tn-ascii-release-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 18px;
+  border-bottom: 1px solid #edf1f5;
+  padding-bottom: 12px;
+}
+.tn-ascii-release-title {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--tn-navy-900);
+}
+.tn-ascii-info-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16px 24px;
+  margin-bottom: 24px;
+}
+.tn-ascii-info-item {
+  font-size: 13.5px;
+  color: var(--tn-text);
+  line-height: 1.6;
+}
+.tn-ascii-info-label {
+  color: var(--tn-text-secondary);
+  margin-right: 6px;
+}
+.tn-ascii-info-val {
+  font-weight: 600;
+  color: var(--tn-navy-900);
+}
+.tn-ascii-release-actions {
+  display: flex;
+  justify-content: flex-end;
+  border-top: 1px solid #edf1f5;
+  padding-top: 18px;
+}
+
+/* Container 6: In-page Release Notes Card */
+.tn-ascii-notes-container {
+  padding: 22px 24px;
+  margin-bottom: 24px;
+  background: #ffffff;
+  border: 1px solid var(--tn-border);
+  border-radius: 4px;
+}
+.tn-ascii-notes-head {
+  margin-bottom: 16px;
+  border-bottom: 1px solid #edf1f5;
+  padding-bottom: 12px;
+}
+.tn-ascii-notes-title {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--tn-navy-900);
+}
+.tn-ascii-notes-body {
+  font-size: 13.5px;
+  color: var(--tn-text);
+  line-height: 1.75;
+  max-height: 420px;
+  overflow-y: auto;
+  padding-right: 8px;
+}
+
+/* Modal Inner Card matching ASCII */
+.tn-modal-card-box {
+  background: #f8fafc;
+  border: 1px solid var(--tn-border);
+  border-radius: 4px;
+  padding: 20px 24px;
+  margin: 16px 0;
+}
+.tn-modal-card-title {
+  font-size: 15px !important;
+  font-weight: 600 !important;
+  color: var(--tn-navy-900) !important;
+  margin-bottom: 14px !important;
+  display: flex !important;
+  align-items: center !important;
+  gap: 10px !important;
+  line-height: 1.4 !important;
+}
+.tn-modal-card-title svg {
+  flex-shrink: 0 !important;
+  display: block !important;
+}
+.tn-modal-metrics-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-top: 14px;
+  font-size: 13px;
+  color: var(--tn-text-secondary);
+  padding-top: 12px;
+  border-top: 1px solid #eef2f6;
+}
+.tn-modal-metrics-item strong {
+  color: var(--tn-navy-900);
+  margin-left: 4px;
+}
+.tn-modal-info-note {
+  font-size: 12.5px;
+  color: var(--tn-text-secondary);
+  line-height: 1.6;
+  margin: 12px 0 16px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+/* Compact Floating Mock Switcher at bottom-right instead of giant top banner */
+.tn-dev-mock-dock {
+  position: fixed;
+  bottom: 16px;
+  right: 16px;
+  z-index: 999;
+  background: #ffffff;
+  border: 1px solid var(--td-brand-color);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+  border-radius: 4px;
+  padding: 8px 12px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 12px;
+}
+
+
+/* ============================================================
+   方案二：平滑极光光流条 (Beam Bar / Shimmer) 全局动效规范
+   ============================================================ */
+.tn-beam-loading {
+  display: flex !important;
+  flex-direction: column !important;
+  align-items: center !important;
+  justify-content: center !important;
+  gap: 14px !important;
+  padding: 40px 20px !important;
+  width: 100% !important;
+  height: 100% !important;
+  flex: 1 !important;
+  margin: auto !important;
+  text-align: center !important;
+}
+.tn-beam-bar {
+  width: 140px;
+  height: 5px;
+  background: var(--td-brand-color-1, #e8f0ff);
+  border-radius: 9999px;
+  overflow: hidden;
+  position: relative;
+  display: block;
+  margin: 0 auto;
+  box-shadow: inset 0 1px 2px rgba(23, 92, 211, 0.08);
+}
+.tn-beam-bar::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 50%;
+  height: 100%;
+  background: linear-gradient(90deg, rgba(23, 92, 211, 0) 0%, rgba(61, 123, 229, 0.95) 45%, var(--td-brand-color, #175cd3) 70%, rgba(23, 92, 211, 0) 100%);
+  box-shadow: 0 0 10px rgba(23, 92, 211, 0.55), 0 0 4px rgba(61, 123, 229, 0.9);
+  border-radius: 9999px;
+  animation: tn-beam-flow 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+  will-change: transform;
+}
+
+.tn-beam-bar-sm {
+  width: 60px !important;
+  height: 3.5px !important;
+  display: inline-block !important;
+  vertical-align: middle;
+  margin: 0 6px !important;
+}
+.tn-beam-bar-sm::after {
+  width: 50%;
+  animation: tn-beam-flow 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+}
+
+@keyframes tn-beam-flow {
+  0% { transform: translateX(-150%); }
+  100% { transform: translateX(280%); }
+}
+
+.tn-beam-text {
+  font-size: 13.5px;
+  color: var(--tn-navy-700, #344054);
+  font-weight: 500;
+  letter-spacing: 0.3px;
+}
+
+/* 彻底隐去 TDesign 默认圆环旋转圈圈，统一切换为沉稳光流 */
+.t-loading__gradient {
+  display: none !important;
+}
+.t-loading {
+  display: inline-flex !important;
+  flex-direction: column !important;
+  align-items: center !important;
+  justify-content: center !important;
+  gap: 12px !important;
+}
+
+.tn-drawer-loading-wrap {
+  min-height: max(420px, calc(100vh - 200px)) !important;
+  height: 100% !important;
+  width: 100% !important;
+  display: flex !important;
+  flex-direction: column !important;
+  align-items: center !important;
+  justify-content: center !important;
+}