@windcoder/astro-theme-orchid 0.0.0-stage → 0.1.0

package/src/components/OutdatedCard.astro

@@ -0,0 +1,53 @@
+---
+/**
+ * 文章过时提醒卡片（orchid-blog showLastModified 卡片移植）。
+ * 构建期输出 hidden 卡片 + data-*（日期/阈值/天数文案模板）；
+ * 天数由客户端计算（静态站构建期计算会随访问时间失效），超过阈值才显示。
+ * enabled 单点裁决（与 License.astro 模式一致）。
+ */
+import config from "virtual:theme/config";
+import { t } from "../i18n/index.js";
+import { formatDate } from "../utils.js";
+
+interface Props {
+	/** 最后更新时间（调用方传 updated ?? published） */
+	updated: Date;
+	published: Date;
+}
+
+const { updated, published } = Astro.props;
+const o = config.outdated;
+---
+
+{
+  o.enabled && (
+    <div class="outdated-card" id="outdated-card" hidden data-date={updated.toISOString()} data-threshold={o.threshold}>
+      <div class="outdated-icon" aria-hidden="true">
+        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path><path d="M3 3v5h5"></path><path d="M12 7v5l4 2"></path></svg>
+      </div>
+      <div class="outdated-text">
+        <p class="outdated-line">
+          {t('lastModifiedPrefix')}{formatDate(updated)}
+          <span class="outdated-days" data-template={t('lastModifiedDaysAgo')}></span>
+        </p>
+        <p class="outdated-warning" hidden>{t('lastModifiedOutdated')}</p>
+      </div>
+    </div>
+  )
+}
+
+<script is:inline data-astro-rerun>
+  (function () {
+    const card = document.getElementById("outdated-card");
+    if (!card) return;
+    const days = Math.floor((Date.now() - new Date(card.dataset.date).getTime()) / 86400000);
+    if (days < Number(card.dataset.threshold)) return;
+    card.hidden = false;
+    if (days >= 1) {
+      const el = card.querySelector(".outdated-days");
+      if (el) el.textContent = (el.dataset.template || "").replace("{days}", String(days));
+    }
+    const warn = card.querySelector(".outdated-warning");
+    if (warn) warn.hidden = false;
+  })();
+</script>

package/src/components/Pagination.astro

@@ -0,0 +1,94 @@
+---
+import { t } from "../i18n/index.js";
+
+interface Props {
+	/** 当前页（从 1 开始） */
+	page: number;
+	/** 总页数 */
+	total: number;
+	/** 列表基路径，如 '/'、'/tags/xx/'（带尾斜杠） */
+	basePath: string;
+}
+
+const { page, total, basePath } = Astro.props;
+const hrefFor = (p: number) =>
+	p === 1 ? basePath : `${basePath.replace(/\/$/, "")}/page/${p}/`;
+
+/**
+ * 页码序列（§4.53 PC 页码翻页，§4.54 加大窗口）：恒含首页/末页/当前页及前后各两页，
+ * 间隙以省略号占位——如 total=12、page=6 → 1 … 4 5 6 7 8 … 12
+ */
+const pageNums = (): (number | "ellipsis")[] => {
+	const kept = new Set(
+		[1, total, page - 2, page - 1, page, page + 1, page + 2].filter(
+			(p) => p >= 1 && p <= total,
+		),
+	);
+	const sorted = [...kept].sort((a, b) => a - b);
+	const out: (number | "ellipsis")[] = [];
+	let prev = 0;
+	for (const p of sorted) {
+		if (p - prev > 1) out.push("ellipsis");
+		out.push(p);
+		prev = p;
+	}
+	return out;
+};
+---
+
+<nav class="pagination reveal" aria-label={t('pagination')}>
+  {/* PC（≥768px）：页码条，两端箭头翻页 */}
+  <div class="pg-nums">
+    {
+      page > 1 ? (
+        <a class="page-item" href={hrefFor(page - 1)} aria-label={t('prevPage')}>
+          ‹
+        </a>
+      ) : (
+        <span class="page-item disabled">‹</span>
+      )
+    }
+    {
+      pageNums().map((n) =>
+        n === "ellipsis" ? (
+          <span class="pg-gap">…</span>
+        ) : n === page ? (
+          <span class="page-item current" aria-current="page">{n}</span>
+        ) : (
+          <a class="page-item" href={hrefFor(n)}>{n}</a>
+        ),
+      )
+    }
+    {
+      page < total ? (
+        <a class="page-item" href={hrefFor(page + 1)} aria-label={t('nextPage')}>
+          ›
+        </a>
+      ) : (
+        <span class="page-item disabled">›</span>
+      )
+    }
+  </div>
+  {/* 移动端（<768px）：上一页 / 第 x / N 页 / 下一页 */}
+  <div class="pg-adj">
+    {
+      page > 1 ? (
+        <a class="page-item" href={hrefFor(page - 1)}>
+          {t('prevPage')}
+        </a>
+      ) : (
+        <span class="page-item disabled">{t('prevPage')}</span>
+      )
+    }
+    <span>{t('pageOf', { current: page, total })}</span>
+    {
+      page < total ? (
+        <a class="page-item" href={hrefFor(page + 1)}>
+          {t('nextPage')}
+        </a>
+      ) : (
+        <span class="page-item disabled">{t('nextPage')}</span>
+      )
+    }
+  </div>
+</nav>

package/src/components/PhotoCard.astro

@@ -0,0 +1,22 @@
+---
+/**
+ * 照片卡（M3b-b8）：详情页瀑布流单元。
+ * data-lightbox-item + 外层 data-lightbox-group 容器（路由页提供）
+ * 供灯箱（PhotoSwipe，§4.69）点击组浏览（app.ts 绑定委托，加密解密注入后经
+ * showDecrypted → initLightbox 重预置生效）。
+ */
+import { getLqipStyle } from "../utils/lqip.js";
+
+interface Props {
+	src: string;
+	alt?: string;
+}
+
+const { src, alt = "" } = Astro.props;
+---
+
+<figure class="gallery-photo" data-lightbox-item>
+  {/* LQIP 占位渐变（b9.5）：src 支持外链，getLqipStyle 查不到时降级纯色 */}
+  <div class="qy-lqip" style={getLqipStyle(src)} aria-hidden="true"></div>
+  <img src={src} alt={alt} loading="lazy" decoding="async" data-lqip />
+</figure>

package/src/components/PostCard.astro

@@ -0,0 +1,89 @@
+---
+import config from "virtual:theme/config";
+import { t } from "../i18n/index.js";
+import { getLqipStyle } from "../utils/lqip.js";
+import { formatDate, type PostLike, resolveCover } from "../utils.js";
+
+interface Props {
+	post: PostLike;
+	/** 置顶/特写形态（大图卡 + 置顶徽标） */
+	featured?: boolean;
+}
+
+const { post, featured = false } = Astro.props;
+const d = post.data;
+
+/* 形态判定：frontmatter.cardStyle 按篇覆盖 > 全局 postList.style；无图可降级为纯文字 */
+const style = d.cardStyle ?? config.postList.style;
+/* 封面（§4.33）：image:"api" 时经图源解析出确定性随机图，并携带客户端重试列表；
+   §4.55 showCover=false 时整体关闭列表封面（classes/模板自动降级纯文字形态） */
+const { cover: rawCover, retries } = resolveCover(
+	d.image,
+	d.firstImage,
+	config.postList.fallbackCover,
+	config.postList.randomCover.apis,
+	post.id,
+);
+const cover = config.postList.showCover ? rawCover : null;
+const classes = [
+	"post-card",
+	featured ? "featured" : "",
+	cover ? "has-cover" : "no-cover",
+	style === "cover" ? "" : "compact",
+	style !== "cover" && !cover ? "text-only" : "",
+]
+	.filter(Boolean)
+	.join(" ");
+
+const href = `/posts/${post.id}/`;
+const excerpt = d.excerpt || d.description;
+---
+
+<article class={classes}>
+  {
+    cover && (
+      <a class="post-cover" href={href} aria-label={d.title}>
+        {featured && d.pinned && <span class="pin-badge">{t('pinned')}</span>}
+        {/* LQIP 占位渐变（b9.5）：绝对定位盖在 img 上，加载完成后由 app.ts 淡出 */}
+        <div class="qy-lqip" style={getLqipStyle(cover)} aria-hidden="true"></div>
+        <img
+          src={cover}
+          alt={d.title}
+          loading="lazy"
+          data-lqip
+          data-api-retries={retries ? JSON.stringify(retries) : undefined}
+        />
+      </a>
+    )
+  }
+  <div class="post-body">
+    <h2 class="post-title"><a href={href}>{d.title}</a></h2>
+    {excerpt && <p class="post-excerpt">{excerpt}</p>}
+    <div class="post-meta">
+      <span>{formatDate(d.published)}</span>
+      {d.category && <span class="dot">{d.category}</span>}
+      {d.password && <span class="dot enc-flag">{t('postEncrypted')}</span>}
+      {d.words ? <span class="dot">{t('wordsCount', { n: d.words })}</span> : null}
+      {d.minutes ? <span class="dot">{t('minutesCount', { n: d.minutes })}</span> : null}
+    </div>
+    {
+      d.tags.length > 0 && (
+        <div class="post-tags">
+          {d.tags.map((tag) => (
+            <a class="chip" href={`/tags/${encodeURIComponent(tag)}/`}>
+              {tag}
+            </a>
+          ))}
+        </div>
+      )
+    }
+  </div>
+  {
+    /* 无封面卡（§4.34 迭代）：右侧进入按钮竖条，为正文右侧留白，避免文字铺满/挤压 */
+    !cover && (
+      <a class="post-enter" href={href} aria-label={d.title}>
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg>
+      </a>
+    )
+  }
+</article>

package/src/components/PostNav.astro

@@ -0,0 +1,40 @@
+---
+import { t } from "../i18n/index.js";
+import type { PostLike } from "../utils.js";
+
+interface Props {
+	prev?: PostLike;
+	next?: PostLike;
+}
+
+const { prev, next } = Astro.props;
+---
+
+<nav class="post-nav" aria-label={t('prevNext')}>
+  {
+    prev ? (
+      <a href={`/posts/${prev.id}/`}>
+        <div class="pn-label">{t('prevPost')}</div>
+        <div class="pn-title">{prev.data.title}</div>
+      </a>
+    ) : (
+      <div class="pn-disabled">
+        <div class="pn-label">{t('prevPost')}</div>
+        <div class="pn-title">{t('firstPost')}</div>
+      </div>
+    )
+  }
+  {
+    next ? (
+      <a class="next" href={`/posts/${next.id}/`}>
+        <div class="pn-label">{t('nextPost')}</div>
+        <div class="pn-title">{next.data.title}</div>
+      </a>
+    ) : (
+      <div class="pn-disabled">
+        <div class="pn-label">{t('nextPost')}</div>
+        <div class="pn-title">{t('lastPost')}</div>
+      </div>
+    )
+  }
+</nav>

package/src/components/RecommendedPost.astro

@@ -0,0 +1,166 @@
+---
+import { t } from "../i18n/index.js";
+/**
+ * 相关/随机文章推荐（P1-12，移植自 orchid-blog RecommendedPost）。
+ * 左栏：构建期静态渲染的相关文章（getRelatedPosts 评分）；
+ * 右栏：客户端 fetch /api/allPostMeta.json 随机抽取（Fisher-Yates），
+ *       加密文章已在 json 侧排除；<random-posts> 为 VT 安全 custom element
+ *       （is:inline + customElements.get 防重复 define，VT 换页自动 re-connect）。
+ */
+import type { PostLike } from "../utils.js";
+
+interface Props {
+	related: PostLike[];
+	currentId: string;
+	randomCount?: number;
+}
+
+const { related, currentId, randomCount = 5 } = Astro.props;
+const excludeIds = JSON.stringify([currentId, ...related.map((p) => p.id)]);
+---
+
+<div class="related-grid">
+  <div class="related-card">
+    <div class="related-head">
+      <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m21.66 9.65-6.87-6.87a1.03 1.03 0 0 0-1.59.16l-2.88 4.5-4.5 2.88a1.03 1.03 0 0 0-.16 1.59l6.87 6.87c.4.4 1.07.4 1.47 0l7.66-7.66c.4-.4.4-1.07 0-1.47M8.6 9.31 4.19 6.4l2.24-2.24 2.93 4.43zm6.09 6.09 2.24-2.24-4.43-2.93-2.91 4.41z"></path></svg>
+      <span>{t('relatedPosts')}</span>
+      <span class="related-badge">{t('smartRecommend')}</span>
+    </div>
+    {related.length > 0 ? (
+      <div class="related-list">
+        {related.map((p, idx) => (
+          <a class="related-item" href={`/posts/${p.id}/`}>
+            <span class="related-num">{idx + 1}</span>
+            <span class="related-body">
+              <span class="related-title">{p.data.title}</span>
+              <span class="related-meta">
+                {p.data.category && <span class="related-cat">{p.data.category}</span>}
+                <span class="related-desc">{p.data.description || p.data.published.toISOString().substring(0, 10)}</span>
+              </span>
+            </span>
+            <svg class="related-arrow" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M9.29 6.71a1 1 0 0 0 0 1.41L13.17 12l-3.88 3.88a1 1 0 1 0 1.41 1.41l4.59-4.59a1 1 0 0 0 0-1.41L10.7 6.7a1 1 0 0 0-1.41.01z"></path></svg>
+          </a>
+        ))}
+      </div>
+    ) : (
+      <div class="related-empty">
+        <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M19 5v14H5V5zm0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2m-5 4H7v2h7zm2 4H7v2h9z"></path></svg>
+        <span>{t('noRelatedPosts')}</span>
+      </div>
+    )}
+  </div>
+
+  <div class="related-card">
+    <div class="related-head">
+      <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M18 7h1.5a2.5 2.5 0 0 1 0 5H18v1h2v1h-2v2h-1V7h3v1h-2zm-7 1.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5S12.5 10.83 12.5 10s-.67-1.5-1.5-1.5M18 2H6a2 2 0 0 0-2 2v16c0 1.1.9 2 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2m0 18H6V4h12z" transform="scale(.9) translate(1.2 1.2)"></path><path d="M12.01 12.46c-.89 0-1.61.72-1.61 1.61s.72 1.61 1.61 1.61 1.61-.72 1.61-1.61-.72-1.61-1.61-1.61M6 2h12a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2m1 4v2h10V6zm1.6 8.07c0 .89.72 1.61 1.61 1.61s1.61-.72 1.61-1.61-.72-1.61-1.61-1.61-1.61.72-1.61 1.61"></path></svg>
+      <span>{t('randomPosts')}</span>
+      <span class="related-badge">{t('randomRecommend')}</span>
+    </div>
+    <random-posts
+      class="related-list"
+      data-api-url="/api/allPostMeta.json"
+      data-current-id={currentId}
+      data-exclude-ids={excludeIds}
+      data-count={randomCount}
+      data-empty-html={t('noRandomPosts')}
+    >
+      <div class="related-empty">
+        <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M19 5v14H5V5zm0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2m-5 4H7v2h7zm2 4H7v2h9z"></path></svg>
+        <span>{t('noRandomPosts')}</span>
+      </div>
+    </random-posts>
+  </div>
+</div>
+
+<script is:inline>
+  if (!customElements.get('random-posts')) {
+    customElements.define(
+      'random-posts',
+      class extends HTMLElement {
+        connectedCallback() {
+          // 随机抽取每次连接重跑：VT 往返后重新洗牌是期望行为
+          const apiUrl = this.dataset.apiUrl;
+          const excludeIds = JSON.parse(this.dataset.excludeIds || '[]');
+          const count = parseInt(this.dataset.count || '5', 10);
+          const emptyHtml = this.dataset.emptyHtml || '';
+
+          const render = (allPosts) => {
+            const candidates = allPosts.filter((p) => !excludeIds.includes(p.id));
+            // Fisher-Yates 洗牌后取前 count 个
+            for (let i = candidates.length - 1; i > 0; i--) {
+              const j = Math.floor(Math.random() * (i + 1));
+              [candidates[i], candidates[j]] = [candidates[j], candidates[i]];
+            }
+            const picked = candidates.slice(0, count);
+            this.innerHTML = '';
+            if (picked.length === 0) {
+              const empty = document.createElement('div');
+              empty.className = 'related-empty';
+              empty.innerHTML =
+                '<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M19 5v14H5V5zm0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2m-5 4H7v2h7zm2 4H7v2h9z"></path></svg><span></span>';
+              empty.querySelector('span').textContent = emptyHtml;
+              this.appendChild(empty);
+              return;
+            }
+            const frag = document.createDocumentFragment();
+            picked.forEach((post, idx) => {
+              const a = document.createElement('a');
+              a.className = 'related-item';
+              a.href = '/posts/' + post.id + '/';
+              const num = document.createElement('span');
+              num.className = 'related-num';
+              num.textContent = String(idx + 1);
+              const body = document.createElement('span');
+              body.className = 'related-body';
+              const title = document.createElement('span');
+              title.className = 'related-title';
+              title.textContent = post.title;
+              const meta = document.createElement('span');
+              meta.className = 'related-meta';
+              if (post.category) {
+                const cat = document.createElement('span');
+                cat.className = 'related-cat';
+                cat.textContent = post.category;
+                meta.appendChild(cat);
+              }
+              const desc = document.createElement('span');
+              desc.className = 'related-desc';
+              desc.textContent = post.description || new Date(post.published).toISOString().substring(0, 10);
+              meta.appendChild(desc);
+              body.appendChild(title);
+              body.appendChild(meta);
+              const arrow = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+              arrow.setAttribute('class', 'related-arrow');
+              arrow.setAttribute('viewBox', '0 0 24 24');
+              arrow.setAttribute('fill', 'currentColor');
+              arrow.setAttribute('aria-hidden', 'true');
+              const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+              path.setAttribute('d', 'M9.29 6.71a1 1 0 0 0 0 1.41L13.17 12l-3.88 3.88a1 1 0 1 0 1.41 1.41l4.59-4.59a1 1 0 0 0 0-1.41L10.7 6.7a1 1 0 0 0-1.41.01z');
+              arrow.appendChild(path);
+              a.appendChild(num);
+              a.appendChild(body);
+              a.appendChild(arrow);
+              frag.appendChild(a);
+            });
+            this.appendChild(frag);
+          };
+
+          // 缓存复用：VT 导航往返不重复请求
+          if (window.__qyAllPostMetaCache) {
+            render(window.__qyAllPostMetaCache);
+          } else {
+            fetch(apiUrl)
+              .then((r) => r.json())
+              .then((data) => {
+                window.__qyAllPostMetaCache = data;
+                render(data);
+              })
+              .catch(() => {
+                /* 索引缺失等场景静默保持占位 */
+              });
+          }
+        }
+      },
+    );
+  }
+</script>

package/src/components/SakuraEffect.astro

@@ -0,0 +1,152 @@
+---
+/**
+ * 樱花飘落特效（§4.30）：全站 canvas 粒子层，程序化贝塞尔花瓣（零贴图资产）。
+ * - prefers-reduced-motion 自动停用
+ * - 页签隐藏暂停、可见时恢复
+ * - VT swap 后 body 重建，经 astro:page-load 重新初始化（模块级单例清理旧动画）
+ */
+interface Props {
+	/** 同屏花瓣数（schema sakura.density） */
+	density?: number;
+}
+
+const { density = 24 } = Astro.props;
+---
+
+<canvas id="sakura-canvas" data-density={density} aria-hidden="true"></canvas>
+
+<style>
+	#sakura-canvas {
+		position: fixed;
+		inset: 0;
+		width: 100%;
+		height: 100%;
+		pointer-events: none;
+		z-index: 90;
+	}
+</style>
+
+<script>
+	let raf = 0;
+	let cleanup: (() => void) | null = null;
+
+	function startSakura() {
+		// 清理旧实例（VT swap 前的动画循环与监听）
+		cleanup?.();
+
+		const canvas = document.getElementById(
+			"sakura-canvas",
+		) as HTMLCanvasElement | null;
+		if (!canvas) return;
+		if (matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+
+		const ctx = canvas.getContext("2d");
+		if (!ctx) return;
+
+		const count = Number(canvas.dataset.density) || 24;
+		const dpr = Math.min(window.devicePixelRatio || 1, 2);
+
+		let w = 0;
+		let h = 0;
+		const resize = () => {
+			w = window.innerWidth;
+			h = window.innerHeight;
+			canvas.width = w * dpr;
+			canvas.height = h * dpr;
+			ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+		};
+		resize();
+		window.addEventListener("resize", resize);
+
+		// 3 档粉调色板（对齐参考站观感）
+		const colors = ["#ffd7e2", "#ffc0d0", "#fdaec5"];
+
+		interface Petal {
+			x: number;
+			y: number;
+			size: number;
+			speedY: number;
+			swayAmp: number;
+			swayFreq: number;
+			phase: number;
+			rot: number;
+			rotSpeed: number;
+			color: string;
+			opacity: number;
+		}
+
+		const spawn = (randomY = false): Petal => {
+			const i = Math.floor(Math.random() * colors.length);
+			return {
+				x: Math.random() * w,
+				y: randomY ? Math.random() * h : -20,
+				size: 6 + Math.random() * 8,
+				speedY: 0.6 + Math.random() * 1.2,
+				swayAmp: 20 + Math.random() * 40,
+				swayFreq: 0.005 + Math.random() * 0.01,
+				phase: Math.random() * Math.PI * 2,
+				rot: Math.random() * Math.PI * 2,
+				rotSpeed: (Math.random() - 0.5) * 0.03,
+				color: colors[i] ?? colors[0]!,
+				opacity: 0.5 + Math.random() * 0.4,
+			};
+		};
+
+		const petals: Petal[] = Array.from({ length: count }, () => spawn(true));
+
+		// 程序化花瓣：两段贝塞尔拼出泪滴形
+		const drawPetal = (p: Petal) => {
+			const s = p.size;
+			ctx.save();
+			ctx.translate(p.x, p.y);
+			ctx.rotate(p.rot);
+			ctx.globalAlpha = p.opacity;
+			ctx.fillStyle = p.color;
+			ctx.beginPath();
+			ctx.moveTo(0, -s);
+			ctx.bezierCurveTo(s * 0.9, -s * 0.6, s * 0.7, s * 0.6, 0, s);
+			ctx.bezierCurveTo(-s * 0.7, s * 0.6, -s * 0.9, -s * 0.6, 0, -s);
+			ctx.fill();
+			ctx.restore();
+		};
+
+		let paused = false;
+		let frame = 0;
+		const tick = () => {
+			if (paused) return;
+			frame++;
+			ctx.clearRect(0, 0, w, h);
+			for (const p of petals) {
+				p.y += p.speedY;
+				p.x += Math.sin(frame * p.swayFreq + p.phase) * (p.swayAmp / 60);
+				p.rot += p.rotSpeed;
+				if (p.y > h + 30) Object.assign(p, spawn());
+				drawPetal(p);
+			}
+			raf = requestAnimationFrame(tick);
+		};
+
+		const onVisibility = () => {
+			if (document.hidden) {
+				paused = true;
+				cancelAnimationFrame(raf);
+			} else if (paused) {
+				paused = false;
+				raf = requestAnimationFrame(tick);
+			}
+		};
+		document.addEventListener("visibilitychange", onVisibility);
+
+		raf = requestAnimationFrame(tick);
+
+		cleanup = () => {
+			cancelAnimationFrame(raf);
+			window.removeEventListener("resize", resize);
+			document.removeEventListener("visibilitychange", onVisibility);
+			cleanup = null;
+		};
+	}
+
+	// ClientRouter 下 astro:page-load 首载与每次导航都会触发
+	document.addEventListener("astro:page-load", startSakura);
+</script>