51 lines
2.6 KiB
Markdown
51 lines
2.6 KiB
Markdown
# 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:
|
|
|
|
```bash
|
|
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.
|