feat: offline package download/import, load progress, local-first open

2026-08-17 13:11:32 +08:00
parent 010076ff28
commit 49b84f83ad
6 changed files with 347 additions and 10 deletions
@@ -492,6 +492,52 @@ body.webapp-active [data-page="webapplist"] {
  visibility: hidden;
 }

+/* webapp 加载/下载进度覆盖层 */
+/* webapp load/download progress overlay */
+#webapp-loading {
+  position: fixed;
+  inset: 0;
+  z-index: 200;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, .4);
+}
+
+#webapp-loading.show { display: flex; }
+
+#webapp-loading .wl-box {
+  min-width: 220px;
+  padding: 20px 24px;
+  border-radius: 16px;
+  background: var(--glass-bg);
+  border: 1px solid var(--glass-border);
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+#webapp-loading .wl-text {
+  font-size: 14px;
+  color: var(--text);
+  text-align: center;
+}
+
+#webapp-loading .wl-bar {
+  height: 4px;
+  border-radius: 999px;
+  background: var(--glass-border);
+  overflow: hidden;
+}
+
+#webapp-loading .wl-fill {
+  height: 100%;
+  width: 0;
+  border-radius: 999px;
+  background: var(--accent);
+  transition: width .2s ease;
+}
+
 #web-topbar {
  position: fixed;
  top: 12px;
@@ -11,6 +11,12 @@
 </head>
 <body>
 <div id="wallpaper-dim"></div>
+<div id="webapp-loading">
+  <div class="wl-box">
+    <div class="wl-text">加载中…</div>
+    <div class="wl-bar"><div class="wl-fill"></div></div>
+  </div>
+</div>
 <div class="app">
  <aside class="rail" id="rail">
    <div class="rail-clock" id="rail-clock">14:30</div>
@@ -1,5 +1,5 @@
-// H5 应用列表页：富卡片 + 在线/离线标签 + 搜索
-// H5 web app list page: rich cards + online/offline badge + search
+// H5 应用列表页：富卡片 + 在线/离线标签 + 搜索 + 长按导入离线包
+// H5 web app list page: rich cards + online/offline badge + search + long-press import
 window.loadWebAppList = async function () {
  const page = document.querySelector('[data-page="webapplist"]');
  if (page.dataset.loaded) return; page.dataset.loaded = '1';
@@ -31,7 +31,13 @@ window.loadWebAppList = async function () {
      tag.textContent = a.offline ? '离线' : '在线';
      btn.append(img, lbl, tag);
      btn.onclick = () => bridge.call('openWebApp', btn.dataset.id);
+      // 长按导入离线包
+      setupImportLongPress(btn, a.id);
      grid.appendChild(btn);
+      // 异步检查本地离线包状态，更新标签
+      bridge.call('hasLocalPackage', a.id).then(has => {
+        if (has) tag.textContent = '离线';
+      }).catch(() => {});
    });
  };
  render(apps);
@@ -40,3 +46,41 @@ window.loadWebAppList = async function () {
    render(apps.filter(a => a.name.toLowerCase().includes(kw)));
  };
 };
+
+// 长按（600ms）导入离线包
+// Long-press (600ms) to import an offline package
+function setupImportLongPress(btn, id) {
+  let timer = null;
+  btn.addEventListener('touchstart', () => {
+    timer = setTimeout(() => {
+      bridge.call('importOfflinePackage', id).catch(() => {});
+    }, 600);
+  }, { passive: true });
+  btn.addEventListener('touchend', () => { if (timer) clearTimeout(timer); }, { passive: true });
+  btn.addEventListener('touchmove', () => { if (timer) clearTimeout(timer); }, { passive: true });
+}
+
+// webapp 加载/下载进度：显示覆盖层
+// webapp load/download progress: show the overlay
+window.HearthEvents = window.HearthEvents || {};
+window.HearthEvents.webappProgress = function (id, progress) {
+  const loading = document.getElementById('webapp-loading');
+  if (!loading) return;
+  if (progress >= 100) {
+    loading.classList.remove('show');
+    return;
+  }
+  loading.classList.add('show');
+  loading.querySelector('.wl-fill').style.width = progress + '%';
+};
+
+// 导入完成：刷新列表（离线标签更新）
+// Import complete: refresh the list (badge updates)
+window.HearthEvents.webappImported = function (id, ok) {
+  if (!ok) return;
+  const page = document.querySelector('[data-page="webapplist"]');
+  if (page) {
+    page.dataset.loaded = '';
+    if (page.classList.contains('active')) window.loadWebAppList();
+  }
+};