cabinw
10cf93a324
Add the paper direction with thin tracks, outlined hexagons and line arrows, without exterior color markers or piece numbers. Add a unified catalog for five designs and their 25 themes, with direct review links. Organize each design into an authored design.md, generated tokens.json and preview. Add Agent routing, shared integration guidance, a machine-readable manifest and an executable rendering example. Preserve legacy preview and document links. Validation: 16 focused design, theme and package tests passed; npm run design and static build passed. Confirmed all eight authored documents survive generation unchanged. Browser checks covered mobile, tablet and desktop layouts, theme links and migrated previews. Native engine integration and visual verification remain pending.
26 lines
4.4 KiB
JavaScript
26 lines
4.4 KiB
JavaScript
import { writeFile } from 'node:fs/promises';
|
||
|
||
export async function buildDesignCatalog(directions) {
|
||
const latest = directions.at(-1), themes = directions[0].themes;
|
||
const html = `<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>设计总览 · HEX TRAILS</title><link rel="stylesheet" href="catalog.css"></head>
|
||
<body>
|
||
<header class="catalog-nav"><a class="brand" href="../index.html">HEX TRAILS <span>设计档案</span></a><nav aria-label="设计文档入口"><a href="README.md">Agent 接入文档 ↗</a><a href="../design-showcase.html">多选与审核 ↗</a></nav></header>
|
||
<main>
|
||
<section class="catalog-intro"><div><span class="eyebrow">ART DIRECTION LIBRARY / 01–${latest.code}</span><h1>${directions.length} 套设计，<br>放在一起看。</h1><p>按方案编号整理，每套都有轻松、进阶、烧脑、挑战和每周挑战。<br>喜欢的可以同时保留，再到审核页逐套记录意见。</p></div><a class="latest-design" href="directions/${latest.id}/index.html"><span>最近新增 · 第 ${latest.code} 套</span><strong>${latest.name}</strong><small>${latest.description}</small><b>查看完整设计稿 ↗</b></a></section>
|
||
<section aria-labelledby="compare-title">
|
||
<div class="compare-heading"><div><span class="eyebrow">01 / COMPARE</span><h2 id="compare-title">同一棋盘，看清不同画法</h2><p>统一弯曲轨道与七色棋子；切换主题，同时更新全部方案。</p></div><a href="#theme-map">查看 ${directions.length * themes.length} 种主题 ↓</a></div>
|
||
<div class="catalog-theme-picker" role="group" aria-label="对比主题">${themes.map((t,i)=>`<button type="button" data-theme="${t.id}" aria-pressed="${i===0}">${t.label}</button>`).join('')}</div>
|
||
<p class="comparison-status" id="comparison-status" aria-live="polite">当前对比：轻松 · ${directions.length} 套设计</p>
|
||
<div class="catalog-grid">${directions.map(d=>`<article class="catalog-card" id="${d.id}"><div class="card-preview" style="background:${d.themes[0].background};color:${d.themes[0].ink}"><span class="design-number">${d.code} / ${d.tag}</span><canvas data-catalog-design="${d.id}" width="600" height="600" aria-label="${d.name} · 轻松主题棋盘"></canvas><span class="preview-theme">${d.themes[0].name}</span></div><div class="card-body"><span class="eyebrow">${d.en}</span><h3>${d.name}${d.id===latest.id?'<small>最新</small>':''}</h3><p>${d.description}</p><div class="card-actions"><a href="directions/${d.id}/index.html">完整设计稿 ↗</a><a data-review-design="${d.id}" href="../design-showcase.html?design=${d.id}&theme=lagoon#phone">试玩与审核 →</a></div></div></article>`).join('')}</div>
|
||
</section>
|
||
<section class="theme-map" id="theme-map" aria-labelledby="themes-title"><span class="eyebrow">02 / THEME INDEX</span><h2 id="themes-title">${directions.length} 套设计 × ${themes.length} 种主题</h2><p>每个名字对应一份配色。点击主题，直接进入对应方案的试玩与审核。</p><div class="theme-matrix">${directions.map(d=>`<article class="theme-family"><h3><a href="directions/${d.id}/index.html"><span>${d.code}</span> ${d.name} ↗</a></h3><div>${d.themes.map(t=>`<a class="theme-entry" href="../design-showcase.html?design=${d.id}&theme=${t.id}#phone"><i style="background:${t.background}" aria-hidden="true"></i><span><small>${t.label}</small><strong>${t.name}</strong></span><b aria-hidden="true">↗</b></a>`).join('')}</div></article>`).join('')}</div></section>
|
||
<section class="catalog-notes"><div><span class="eyebrow">03 / SHARED DETAILS</span><h2>已经统一的细节</h2></div><ul><li>棋盘垂直居中，适配手机、平板、折叠屏和桌面。</li><li>通知统一在剩余步数下方；底部三个道具放大，使用无阴影的纯色平面。</li><li>奖励星星为发光金色；次数和广告角标仅在设计稿中示意。</li><li>第 05 套保留浅色细轨道、细白边和线条箭头，去掉棋盘外围色标与棋子编号。</li></ul><a href="../Design.html">查看组件与交互规范 ↗</a></section>
|
||
</main>
|
||
<footer><span>HEX TRAILS · 设计方案 01–${latest.code}</span><a href="../design-showcase.html">选择方案、记录意见与导出审核 →</a></footer>
|
||
<script type="module" src="../src/design-catalog.js"></script>
|
||
</body></html>`;
|
||
await writeFile(new URL('../design/index.html', import.meta.url), html);
|
||
}
|