Web Home Dashboard Clickable Cards (2026-05)

Session context: BOSS liked the xianyu-hunter Web dashboard visual polish, then requested that the home cards be actionable instead of decorative.

Implementation pattern used in /Users/chick/.Hermes/workspace/research/xianyu-hunter:

Keep the home dashboard as the landing/empty state, but make overview cards real <button> elements.
Add a generic routing helper in public/app.js:
- findLatestTask(predicate) sorts tasks by updatedAt || createdAt descending.
- openHomeCard(target) maps dashboard metrics to the most relevant task:
  - tasks → latest task
  - raw → latest task with products.rawCount > 0
  - fine → latest task with products.fineCount > 0
  - recommend → latest task with hermesAnalysis.recommendedCount > 0, then open analysis tab
  - running → latest running task
  - scheduled → latest task with config.schedule.enabled
- If no matching task exists, open showCreateModal() instead of silently doing nothing.
Extend selectTask(id, tab = 'products') so cards can deep-link into either the product list or Hermes analysis tab after refreshTask() and renderTaskDetail().
Convert workflow steps into clickable buttons:
- 登录 → showLoginModal()
- 新建任务 → showCreateModal()
- 采集/预筛 → openHomeCard('fine')
- Hermes 分析 → openHomeCard('recommend')
Style clickable cards with visible affordances:
- cursor: pointer, hover translate, border/glow changes, focus-visible outline.
- Include a small action line such as 查看分析结果 → so the behavior is legible.

Verification checklist:

cd /Users/chick/.Hermes/workspace/research/xianyu-hunter
node --check public/app.js
git diff --check -- public/index.html public/style.css public/app.js
node tools/xianyu_ops.mjs status --port 3000
node --input-type=module <<'JS'
const base = 'http://127.0.0.1:3000';
for (const path of ['/', '/style.css?v=<CACHE_VERSION>', '/app.js?v=<CACHE_VERSION>']) {
  const res = await fetch(base + path);
  const text = await res.text();
  console.log(path, res.status, text.length);
  if (!res.ok) process.exitCode = 1;
}
JS

Pitfalls:

If cards are changed from div to button, preserve visual reset (font: inherit, text-align: left, color: var(--text), width: 100%) or they will inherit browser button styling.
Bump both style.css?v=N and app.js?v=N in public/index.html after Web UI changes, otherwise BOSS may see stale assets.
Do not make a dashboard card a dead click target; when there is no matching data, open the task creation modal as a useful fallback.

2.6 KiB Raw Blame History

Web Home Dashboard Clickable Cards (2026-05)

2.6 KiB

Raw Blame History