feat: page preload, card grid span, wallpaper into webview for glass blur

app/src/main/assets/h5/js/pages/home.js

@@ -3,12 +3,12 @@
 // (big time card + generic placeholders for the rest)
 window.updateHomeCards = async function () {
   const page = document.querySelector('[data-page="home"]');
-  page.innerHTML = `<div class="tri-col" id="tri-col">
-    <div class="col" id="col-0"></div><div class="col" id="col-1"></div><div class="col" id="col-2"></div>
-  </div>`;
+  page.innerHTML = `<div class="tri-col" id="tri-col"></div>`;
   let catalog = [];
   try {
-    catalog = JSON.parse(await bridge.call('fetchCards'));
+    // 优先用预加载缓存，未就绪则实时加载
+    // Prefer the preloaded cache; fetch live when not ready yet
+    catalog = window.preload.cards || JSON.parse(await bridge.call('fetchCards'));
   } catch (e) {
     // 桥接不可用（如未接线）时按空目录处理
     // Treat bridge failure as an empty catalog
@@ -20,27 +20,33 @@ window.updateHomeCards = async function () {
   if (!catalog.some((c) => c.id === 'time')) {
     catalog.push({ id: 'time', name: '大字时间', priority: 0 });
   }
-  const cols = cards.layout(catalog);
-  cols.forEach((ids, i) => {
-    const col = document.getElementById(`col-${i}`);
-    ids.forEach((id) => {
-      if (id === 'time') col.appendChild(renderTimeCard());
-      else col.appendChild(renderGenericCard(id));
-    });
-  });
-  // 若有当前媒体，覆盖中间栏为媒体卡（切页回来后恢复媒体卡）
-  // If there is active media, replace the middle column with the media card
-  // (restores the media card when navigating back to home)
-  if (currentMedia) {
-    const mediaCol = document.getElementById('col-1');
-    if (mediaCol) {
-      mediaCol.innerHTML = '';
-      mediaCol.appendChild(renderMediaCard(currentMedia));
-    }
-  }
+  renderCards(catalog);
   startTimeCardTicker();
 };
 
+// 卡片 Grid 渲染：media 卡 span 2（跨栏），time/其他卡 span 1
+// Card grid render: media card spans 2 columns, time/other cards span 1
+function renderCards(catalog) {
+  const grid = document.getElementById('tri-col');
+  grid.textContent = '';
+  const items = [];
+  // 按 priority 排序（数字小者优先）
+  // Sort by priority (smaller first)
+  const sorted = [...catalog].sort((a, b) => (a.priority || 0) - (b.priority || 0));
+  // time 卡（内置，span 1）
+  if (sorted.some(c => c.id === 'time')) items.push({ span: 1, el: renderTimeCard() });
+  // media 卡（有媒体时 span 2，跨栏更美观）
+  if (currentMedia) items.push({ span: 2, el: renderMediaCard(currentMedia) });
+  // 其他卡（排除 time）span 1
+  sorted.filter(c => c.id !== 'time').forEach(c => {
+    items.push({ span: 1, el: renderGenericCard(c.id) });
+  });
+  items.forEach(item => {
+    item.el.classList.add('span-' + item.span);
+    grid.appendChild(item.el);
+  });
+}
+
 // 内置大字时间卡：当前时间（时:分 + 小号秒）+ 日期
 // Builtin big time card: current time (HH:MM + small seconds) + date
 function renderTimeCard() {
@@ -100,16 +106,11 @@ let currentMedia = null;
 window.HearthEvents = window.HearthEvents || {};
 window.HearthEvents.mediaSessionChanged = function (info) {
   currentMedia = info;
-  const mediaCol = document.getElementById('col-1');
-  if (!mediaCol) return;
-  if (info) {
-    mediaCol.innerHTML = '';
-    mediaCol.appendChild(renderMediaCard(info));
-  } else {
-    // 无媒体：降级到日历/天气（由 cards.layout 重新计算）
-    // No media: fall back to calendar/weather (recomputed by cards.layout)
-    window.updateHomeCards();
-  }
+  const grid = document.getElementById('tri-col');
+  if (!grid) return;
+  // 重新渲染：有媒体时 media 卡 span 2，无媒体时其他卡填满
+  // Re-render: media card spans 2 when present, others fill otherwise
+  window.updateHomeCards();
 };
 
 // 媒体卡：正在播放标签 + 标题/艺术家 + 进度条