feat: card repository and home three-column layout

2026-08-16 16:43:30 +08:00
parent 065625843d
commit fdaa8d0516
9 changed files with 332 additions and 0 deletions
@@ -0,0 +1,70 @@
+// 首页三栏卡片：拉取目录 -> cards.layout 分配三栏 -> 渲染（time 卡大字 + 其他占位）
+// Home three-column cards: fetch catalog -> cards.layout assigns 3 columns -> render
+// (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>`;
+  let catalog = [];
+  try {
+    catalog = JSON.parse(await bridge.call('fetchCards'));
+  } catch (e) {
+    // 桥接不可用（如未接线）时降级为内置时间卡
+    // Degrade to builtin time card when the bridge is unavailable (e.g. not wired yet)
+    catalog = [{ id: 'time', priority: 0, enabled: true }];
+  }
+  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));
+    });
+  });
+  startTimeCardTicker();
+};
+
+// 内置大字时间卡：当前时间 + 日期
+// Builtin big time card: current time + date
+function renderTimeCard() {
+  const el = document.createElement('div');
+  el.className = 'card time-card';
+  const now = new Date();
+  el.innerHTML = `<div class="big">${fmtTime(now)}</div><div class="sub">${fmtDate(now)}</div>`;
+  return el;
+}
+
+// 其他卡片占位：仅显示 id，后续 Task 接具体卡片渲染
+// Other cards placeholder: show id only; concrete renderers land in later tasks
+function renderGenericCard(id) {
+  const el = document.createElement('div');
+  el.className = 'card';
+  el.textContent = id;
+  return el;
+}
+
+function fmtTime(d) {
+  const hh = String(d.getHours()).padStart(2, '0');
+  const mm = String(d.getMinutes()).padStart(2, '0');
+  return `${hh}:${mm}`;
+}
+
+function fmtDate(d) {
+  const days = ['日', '一', '二', '三', '四', '五', '六'];
+  return `${d.getMonth() + 1}月${d.getDate()}日 周${days[d.getDay()]}`;
+}
+
+// 每 10s 刷新一次大字时间卡
+// Refresh the big time card every 10 seconds
+let timeTicker = null;
+function startTimeCardTicker() {
+  if (timeTicker) return;
+  timeTicker = setInterval(() => {
+    const card = document.querySelector('.time-card');
+    if (!card) return;
+    const now = new Date();
+    card.querySelector('.big').textContent = fmtTime(now);
+    card.querySelector('.sub').textContent = fmtDate(now);
+  }, 10000);
+}