@windcoder/astro-theme-orchid 0.2.1 → 0.4.0

package/src/components/BaseLayout.astro

@@ -4,6 +4,7 @@
 import { Font } from "astro:assets";
 import { ClientRouter } from "astro:transitions";
 import Analytics from "virtual:theme/components/Analytics.astro";
+import DisplaySettings from "virtual:theme/components/DisplaySettings.astro";
 import Footer from "virtual:theme/components/Footer.astro";
 import Header from "virtual:theme/components/Header.astro";
 import Live2DWidget from "virtual:theme/components/Live2DWidget.astro";
@@ -11,6 +12,7 @@ import MusicPlayer from "virtual:theme/components/MusicPlayer.astro";
 import SakuraEffect from "virtual:theme/components/SakuraEffect.astro";
 import config from "virtual:theme/config";
 import { t } from "../i18n/index.js";
+import { resolveSiteImages } from "../utils/image.js";
 import { hexToHsl } from "../utils.js";
 import "@windcoder/astro-theme-orchid/styles/global.css";
 /* 灯箱（§4.69）：PhotoSwipe 样式随页面 CSS 一起打包，JS 由 app.ts 惰性动态加载 */
@@ -25,6 +27,8 @@ interface Props {
 	page?: string;
 	/** OG 分享图路径（b9.4，文章页传 /og/<slug>.png）；绝对链接依赖站点 site 配置 */
 	ogImage?: string;
+	/** 整页排除 Pagefind 索引（§4.104 搜索页自身不进索引，防自指噪声） */
+	pagefindIgnore?: boolean;
 }
 
 const {
@@ -33,23 +37,90 @@ const {
 	keywords = config.keywords,
 	page,
 	ogImage,
+	pagefindIgnore,
 } = Astro.props;
 const pageTitle = title ? `${title} · ${config.title}` : config.title;
 const { h, s, l } = hexToHsl(config.accentColor);
-/* 首页 banner（§4.42，hero+壁纸合并单配置）：数组时构建期随机选一张（每页构建各自取，零 JS）；
-   enabled=false 或 src 未配置不渲染图 */
-const bannerSrc = Array.isArray(config.banner.src)
-	? config.banner.src.length
-		? config.banner.src[Math.floor(Math.random() * config.banner.src.length)]
-		: ""
-	: config.banner.src || "";
-const showBanner =
-	config.banner.enabled &&
-	Boolean(bannerSrc) &&
-	(!config.banner.homeOnly || page === "home");
-/* hero 文案（§4.42）：quote 留空不渲染；有 banner 时叠加其上，否则渲染为列表上方独立区块 */
-const heroEnabled = config.banner.enabled && Boolean(config.banner.quote);
-const heroOnBanner = heroEnabled && showBanner && page === "home";
+/* 统一壁纸体系（§4.98）：banner+background 合并为 wallpaper 四模式，单一 #wp-stage
+   容器 + html[data-wallpaper-mode] 属性驱动四种形态（banner/fullscreen/overlay/none）。
+   图源走三格式解析（§4.97）：相对站点 src/ 的路径构建期查表转产物 URL，public/外链原样 */
+const wp = config.wallpaper;
+const wpDesktopAll = await resolveSiteImages(wp.src.desktop);
+const wpMobileAll = await resolveSiteImages(wp.src.mobile);
+/* 轮播关：构建期各端随机一张（每页构建各自取，零 JS）；轮播开：全列表渲染交 JS 轮换 */
+const wpCarouselOn = wp.common.carousel.enable;
+const wpPick = (arr: string[]): string =>
+	arr[Math.floor(Math.random() * arr.length)];
+const stageDesktop = wpCarouselOn
+	? wpDesktopAll
+	: wpDesktopAll.length
+		? [wpPick(wpDesktopAll)]
+		: [];
+const stageMobile = wpCarouselOn
+	? wpMobileAll
+	: wpMobileAll.length
+		? [wpPick(wpMobileAll)]
+		: [];
+/* 实际首页判定：仅根路径 / 为 true（分页 /page/2/ 虽 page=home 但非首页）。
+   非首页 fullscreen 降级（§4.98）：classic→banner（横幅高度，跨页可见）、
+   hero→overlay（透明背景，无顶部全屏区），保持首页大气全屏、内页轻量的层次 */
+const isActualHome = page === "home" && Astro.url.pathname === "/";
+const fsLayout = wp.fullscreen.layout;
+const visualMode =
+	wp.mode === "fullscreen" && !isActualHome
+		? fsLayout === "hero"
+			? "overlay"
+			: "banner"
+		: wp.mode;
+/* stage 渲染门槛：有图且模式非 none。非首页也渲染 stage（banner 模式展示页面标题
+   横幅，fullscreen 降级为 banner/overlay），homeOnly 仅控制壁纸图是否在非首页
+   显示，不再隐藏整个 stage——保证非首页有页面标题横幅且刷新不丢失样式 */
+const stageMode =
+	visualMode === "none" || stageDesktop.length === 0 ? null : visualMode;
+const stageHidden = false;
+const stageVisible = Boolean(stageMode);
+/* hero 文案（§4.98）：首页用 homeText 配置（标题+副标题/打字机），非首页用页面
+   传入的 title（归档→"归档"、文章→文章标题等）。仅 stage 可见时渲染，叠加在
+   壁纸之上；overlay/none 模式 stage 为 fixed 垫底或不存在，CSS 隐藏 .wp-hero */
+const homeText = wp.common.homeText;
+const wpSubs = Array.isArray(homeText.subtitle)
+	? homeText.subtitle
+	: homeText.subtitle
+		? [homeText.subtitle]
+		: [];
+const hasHeroText =
+	homeText.enable && (Boolean(homeText.title) || wpSubs.length > 0);
+const typerOn = homeText.typewriter.enable && wpSubs.length > 0;
+const staticSub = typerOn ? "" : wpSubs.length ? wpPick(wpSubs) : "";
+/* hero 渲染条件：首页需 homeText 有内容；非首页需有 title。两种情况都要求
+   stage 存在（banner/fullscreen 模式） */
+const heroTitle = isActualHome ? homeText.title : title;
+const heroSub = isActualHome ? staticSub : "";
+const heroTyperOn = isActualHome && typerOn;
+const heroInStage = Boolean(stageMode) && (isActualHome ? hasHeroText : Boolean(title));
+/* 底部装饰分端归一化：布尔简写展开为两端同值 */
+const wpWaves =
+	typeof wp.common.waves === "boolean"
+		? { desktop: wp.common.waves, mobile: wp.common.waves }
+		: wp.common.waves;
+const wpGradient =
+	typeof wp.common.gradient === "boolean"
+		? {
+				desktop: wp.common.gradient,
+				mobile: wp.common.gradient,
+				height: "10%",
+			}
+		: wp.common.gradient;
+/* 视频源：仅支持 public 路径与外链（原样输出；视频文件不入构建管线） */
+const wpVideos = wp.playerEnable ? wp.src.playerUrl : [];
+/* 导航栏透明形态（§4.98 navbar）：壁纸不可见（none/无图/隐藏）时 SSR 直接实底 */
+const wpNavMode = stageVisible ? wp.common.navbar.transparentMode : "solid";
+/* 显示设置面板（§4.103）：enable 时渲染齿轮与浮层；面板开启且壁纸模式组可见
+   即视为允许访客切换模式（与 wallpaper.switchable 取并集，data-wp-switchable
+   驱动 boot/app.ts 的模式覆写判定） */
+const dsEnable = config.displaySettings.enable;
+const wpSwitchAllowed =
+	wp.switchable || (dsEnable && config.displaySettings.wallpaperModeSwitchable);
 /* 字体角色映射（§4.66）：配置了 role 的字体生成 html:root 规则，把主题三角色
    变量重定向为 var(字体变量), 原角色回退栈（取自 global.css :root 默认值，
    字体未覆盖的字形如中文自然回落）。html:root Specificity (0,1,1) 高于
@@ -70,7 +141,21 @@ const fontRoleCss = config.fonts
 ---
 
 <!doctype html>
-<html lang={config.lang} style={`--accent-h:${h};--accent-s:${s}%;--accent-l:${l}%;--page-width:${config.pageWidth}px`} data-accent-h={h} data-color-mode={config.colorMode}>
+<html
+  lang={config.lang}
+  style={`--accent-h:${h};--accent-s:${s}%;--accent-l:${l}%;--page-width:${config.pageWidth}px${config.darkMode.adaptExternalImages ? ";--img-adapt-b:.85" : ""};--wp-dim:${wp.common.dimOpacity};--wp-dim-dark:${wp.common.darkDimOpacity};--wp-card-opacity:${Math.round(wp.overlay.cardOpacity * 100)}%;--wp-nav-blur:${wp.common.navbar.enableBlur ? wp.common.navbar.blur : 0}px;--banner-h:${wp.banner.height}vh;--banner-pos:${wp.banner.position};--fs-pos:${wp.fullscreen.position};--wp-grad-h:${wpGradient.height};--wp-overlay-opacity:${wp.overlay.opacity};--wp-overlay-blur:${wp.overlay.blur}px;--wp-overlay-scale:${(1 + wp.overlay.blur / 100).toFixed(3)}`}
+  data-accent-h={h}
+  data-color-mode={config.colorMode}
+  data-wallpaper-mode={wp.mode ?? "none"}
+  data-wallpaper-nav={wpNavMode}
+  data-wp-nav-config={wp.common.navbar.transparentMode}
+  data-wp-switchable={wpSwitchAllowed ? "true" : "false"}
+  data-wp-fs-layout={wp.fullscreen.layout}
+  data-wp-is-home={isActualHome ? "true" : undefined}
+  data-wp-stage-hidden={stageHidden ? "true" : undefined}
+  data-wp-hero={heroInStage ? "visible" : undefined}
+  data-ds-enable={dsEnable ? "true" : "false"}
+>
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -97,6 +182,8 @@ const fontRoleCss = config.fonts
     <link rel="alternate" type="application/rss+xml" title={config.title} href={Astro.site ? new URL("rss.xml", Astro.site).href : "/rss.xml"} />
     <meta name="theme-color" media="(prefers-color-scheme: light)" content="#f6f4ef" />
     <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#131516" />
+    {/* PWA（§4.95）：manifest 清单链接，端点由 pwa.enabled 门控注入 */}
+    {config.pwa.enabled && <link rel="manifest" href="/manifest.webmanifest" />}
     {/* OG/Twitter meta（b9.4）：ogImage 仅文章页传入；绝对链接依赖 site 配置 */}
     <meta property="og:type" content={ogImage ? 'article' : 'website'} />
     <meta property="og:title" content={pageTitle} />
@@ -122,42 +209,136 @@ const fontRoleCss = config.fonts
     <script is:inline>
       (function(){var m=localStorage.getItem('qy-mode');var d=document.documentElement.dataset.colorMode||'system';if(m==='dark'||(!m&&d==='dark')||(!m&&d==='system'&&matchMedia('(prefers-color-scheme: dark)').matches))document.documentElement.classList.add('dark');var h=localStorage.getItem('qy-hue');if(h)document.documentElement.style.setProperty('--accent-h',h);})();
     </script>
+    <!-- 壁纸模式 boot（§4.98）：switchable 开启时首帧前应用访客偏好（localStorage 优先于
+         SSR 配置），none 等形态即时生效防闪烁；VT swap 后 html 属性随新页重建，由 app.ts
+         的 astro:after-swap 监听重应用。stage hidden 属性清理交给 initWallpaper。
+         §4.103 扩展：显示设置面板开启（data-ds-enable）时追加恢复全屏布局/壁纸设置显隐/
+         透明三件套/樱花开关（overlay 三变量在 html style 上，boot 直接覆写即时生效） -->
+    <script is:inline>
+      (function(){try{var d=document.documentElement;var ls=localStorage;if(d.dataset.wpSwitchable==='true'){var m=ls.getItem('qy-wallpaper');if(m&&['banner','fullscreen','overlay','none'].indexOf(m)>=0&&m!==d.dataset.wallpaperMode)d.dataset.wallpaperMode=m;}if(d.dataset.dsEnable==='true'){var l=ls.getItem('qy-wp-fs-layout');if(l==='classic'||l==='hero')d.dataset.wpFsLayout=l;var P=[['qy-wp-home-text','wpHomeText'],['qy-wp-carousel','wpCarousel'],['qy-wp-waves','wpWaves'],['qy-wp-gradient','wpGradient'],['qy-sakura','wpSakura']];for(var i=0;i<P.length;i++){var v=ls.getItem(P[i][0]);if(v==='0'||v==='1')d.dataset[P[i][1]]=v==='1'?'on':'off';}var op=parseFloat(ls.getItem('qy-wp-opacity')||'');if(!isNaN(op))d.style.setProperty('--wp-overlay-opacity',String(op));var bl=parseFloat(ls.getItem('qy-wp-blur')||'');if(!isNaN(bl)){d.style.setProperty('--wp-overlay-blur',bl+'px');d.style.setProperty('--wp-overlay-scale',(1+bl/100).toFixed(3));}var co=parseFloat(ls.getItem('qy-wp-card-opacity')||'');if(!isNaN(co))d.style.setProperty('--wp-card-opacity',Math.round(co*100)+'%');}}catch(e){}})();
+    </script>
+    {/* PWA（§4.95）：SW 注册。load 后注册不抢占首屏；is:inline + define:vars 在
+        ClientRouter VT swap 时不重复执行，全站仅注册一次；注册失败静默（离线兜底
+        属增强能力，不影响正常浏览） */}
+    {config.pwa.enabled && (
+      <script is:inline define:vars={{ swUrl: "/sw.js" }}>
+        if ("serviceWorker" in navigator) {
+          window.addEventListener("load", function () {
+            navigator.serviceWorker.register(swUrl).catch(function () {});
+          });
+        }
+      </script>
+    )}
   </head>
   <!-- 客户端动态文案载体（i18n，M3b-b5）：app.ts 读取，VT swap 后随新 body 重建 -->
-  <script type="application/json" id="qy-ui-labels" set:html={JSON.stringify({ close: t('close'), prevImage: t('prevImage'), nextImage: t('nextImage'), copied: t('copied'), fullscreen: t('fullscreen'), slideshow: t('slideshow'), thumbs: t('thumbs'), sharePoster: t('sharePoster'), generatingPoster: t('generatingPoster'), copyLink: t('copyLink'), savePoster: t('savePoster'), scanToRead: t('scanToRead'), author: t('author'), searchLoading: t('searchLoading'), searchNoResults: t('searchNoResults'), searchUnavailable: t('searchUnavailable'), searchTypeSomething: t('searchTypeSomething') })} />
-  <body data-page={page}>
+  <script type="application/json" id="qy-ui-labels" set:html={JSON.stringify({ close: t('close'), prevImage: t('prevImage'), nextImage: t('nextImage'), copied: t('copied'), fullscreen: t('fullscreen'), slideshow: t('slideshow'), thumbs: t('thumbs'), sharePoster: t('sharePoster'), generatingPoster: t('generatingPoster'), copyLink: t('copyLink'), savePoster: t('savePoster'), scanToRead: t('scanToRead'), author: t('author'), searchLoading: t('searchLoading'), searchNoResults: t('searchNoResults'), searchUnavailable: t('searchUnavailable'), searchTypeSomething: t('searchTypeSomething'), searchMore: t('searchMore'), searchResultsTotal: t('searchResultsTotal'), prevPage: t('prevPage'), nextPage: t('nextPage'), pageOf: t('pageOf'), wpPlay: t('wpPlay'), wpPause: t('wpPause'), wpPrev: t('wpPrev'), wpNext: t('wpNext'), wpMode: t('wpMode') })} />
+  <body data-page={page} data-pagefind-ignore={pagefindIgnore ? "" : undefined}>
     <a class="skip-link" href="#main">{t('skipToContent')}</a>
     <Header />
-    <!-- 首页 banner（§4.42，hero+壁纸合并单配置）：Header 之后下沉横幅 + 黑蒙层；enabled=false / src 未配置 / homeOnly 非首页不渲染 -->
+    <!-- 统一壁纸 stage（§4.98）：单容器承载图/视频/蒙层/装饰/hero，四种形态由
+         html[data-wallpaper-mode] 驱动（CSS 切换 banner/fullscreen/overlay/none）；
+         无图或 none 模式不渲染；homeOnly 非首页渲染但标 hidden（访客切换即解除）。
+         stage 位于 Header 之后（DOM 序），banner/fullscreen 的 margin-top: -header-h
+         将 stage 上缘拉入 sticky Header 底下，壁纸从视口顶铺满而非独立于导航栏之上 -->
     {
-      showBanner && (
+      stageMode && (
         <div
-          class="wallpaper-banner"
-          style={`--banner-h:${config.banner.height}vh;--banner-dim:${config.banner.dimOpacity};--banner-pos:${config.banner.position}`}
+          class="wp-stage"
+          style={`--wp-hero-title-size:${homeText.titleSize};--wp-hero-sub-size:${homeText.subtitleSize}`}
+          data-carousel={wpCarouselOn ? "true" : "false"}
+          data-carousel-interval={wp.common.carousel.interval}
+          data-effect={wp.common.carousel.transitionEffect}
+          data-wallpaper-hidden={stageHidden ? "" : undefined}
+          aria-hidden={stageHidden ? "true" : undefined}
         >
-          <img src={bannerSrc} alt="" aria-hidden="true" loading="eager" />
-          <div class="wallpaper-dim" aria-hidden="true" />
-          {/* hero 文案叠加（§4.42）：quote 配置时主句/副句居中显示在 banner 上 */}
-          {heroOnBanner && (
-            <div class="wallpaper-hero reveal">
-              <h1 class="hero-quote" set:html={config.banner.quote} />
-              {config.banner.sub && <p class="hero-sub">{config.banner.sub}</p>}
+          <div class="wp-images wp-desktop" aria-hidden="true">
+            {stageDesktop.map((src, i) => (
+              <img
+                class={`wp-img${i === 0 ? " active" : ""}`}
+                src={src}
+                alt=""
+                loading="eager"
+                decoding="async"
+              />
+            ))}
+          </div>
+          {stageMobile.length > 0 && (
+            <div class="wp-images wp-mobile" aria-hidden="true">
+              {stageMobile.map((src, i) => (
+                <img
+                  class={`wp-img${i === 0 ? " active" : ""}`}
+                  src={src}
+                  alt=""
+                  loading="eager"
+                  decoding="async"
+                />
+              ))}
+            </div>
+          )}
+          {wpVideos.length > 0 && (
+            <video
+              class="wp-video"
+              muted
+              loop
+              playsinline
+              preload="none"
+              data-player-urls={JSON.stringify(wpVideos)}
+              data-player-mode={wp.common.playerMode}
+            />
+          )}
+          <div class="wp-dim" aria-hidden="true" />
+          {wpGradient.desktop && <div class="wp-gradient is-desktop" aria-hidden="true" />}
+          {wpGradient.mobile && <div class="wp-gradient is-mobile" aria-hidden="true" />}
+          {wpWaves.desktop && (
+            <div class="wp-waves is-desktop" aria-hidden="true">
+              <svg class="wave w1" viewBox="0 0 2880 120" preserveAspectRatio="none"><path d="M0,64 C240,96 480,32 720,64 C960,96 1200,32 1440,64 C1680,96 1920,32 2160,64 C2400,96 2640,32 2880,64 L2880,120 L0,120 Z" /></svg>
+              <svg class="wave w2" viewBox="0 0 2880 120" preserveAspectRatio="none"><path d="M0,80 C240,48 480,112 720,80 C960,48 1200,112 1440,80 C1680,48 1920,112 2160,80 C2400,48 2640,112 2880,80 L2880,120 L0,120 Z" /></svg>
+            </div>
+          )}
+          {wpWaves.mobile && (
+            <div class="wp-waves is-mobile" aria-hidden="true">
+              <svg class="wave w1" viewBox="0 0 2880 120" preserveAspectRatio="none"><path d="M0,64 C240,96 480,32 720,64 C960,96 1200,32 1440,64 C1680,96 1920,32 2160,64 C2400,96 2640,32 2880,64 L2880,120 L0,120 Z" /></svg>
+              <svg class="wave w2" viewBox="0 0 2880 120" preserveAspectRatio="none"><path d="M0,80 C240,48 480,112 720,80 C960,48 1200,112 1440,80 C1680,48 1920,112 2160,80 C2400,48 2640,112 2880,80 L2880,120 L0,120 Z" /></svg>
             </div>
           )}
+          {heroInStage && (
+            <div class="wp-hero reveal">
+              {heroTitle && <h1 class="hero-quote" set:html={heroTitle} />}
+              {heroTyperOn ? (
+                <p class="hero-sub">
+                  <span
+                    class="typewriter"
+                    id="wpTyper"
+                    data-subtitles={JSON.stringify(wpSubs)}
+                    data-speed={homeText.typewriter.speed}
+                    data-delete-speed={homeText.typewriter.deleteSpeed}
+                    data-pause-time={homeText.typewriter.pauseTime}
+                  />
+                </p>
+              ) : (
+                heroSub && <p class="hero-sub">{heroSub}</p>
+              )}
+            </div>
+          )}
+          {/* 全屏首屏滚动提示（§4.98）：仅 fullscreen 模式可见（CSS 门控，SSR 始终渲染，
+              访客切换到 fullscreen 即可用）；点击平滑滚过首屏；
+              hero 布局滚动后随 .wp-hero 一起淡出（共用 wp-scrolled 规则） */}
+          <button
+            type="button"
+            class="wp-scroll-hint"
+            aria-label={t("scrollDown")}
+            onclick="document.querySelector('.site-main')?.scrollIntoView({behavior:'smooth'})"
+          >
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+              <path d="M12 5v14" />
+              <path d="m19 12-7 7-7-7" />
+            </svg>
+          </button>
         </div>
       )
     }
     <main id="main" class="site-main">
       <div class="shell">
-        {/* hero 独立区块形态（§4.42）：无 banner 图时的首页 hero 文案，保持原列表上方位置 */}
-        {
-          heroEnabled && page === "home" && !heroOnBanner && (
-            <section class="hero reveal">
-              <h1 class="hero-quote" set:html={config.banner.quote} />
-              {config.banner.sub && <p class="hero-sub">{config.banner.sub}</p>}
-            </section>
-          )
-        }
         <slot />
       </div>
     </main>
@@ -169,14 +350,16 @@ const fontRoleCss = config.fonts
     <Footer />
     <!-- 站点统计（P1-16）：ID 全空零输出，挂 body 尾与 orchid-blog 口径一致 -->
     <Analytics />
-    <!-- 樱花飘落特效（§4.30）：sakura.enabled 开启才渲染 -->
-    {config.sakura.enabled && <SakuraEffect density={config.sakura.density} />}
+    <!-- 樱花飘落特效（§4.30/§4.101 八维参数）：sakura.enabled 开启才渲染 -->
+    {config.sakura.enabled && <SakuraEffect cfg={config.sakura} />}
     <!-- 悬浮音乐播放器（§4.36）：music.enabled 且歌单非空才渲染 -->
     {config.music.enabled && config.music.playlist.length > 0 && (
       <MusicPlayer music={config.music} />
     )}
     <!-- Live2D 看板娘（§4.38）：live2d.enabled 且配置了 model 才渲染 -->
     {config.live2d.enabled && config.live2d.model && <Live2DWidget live2d={config.live2d} />}
+    <!-- 显示设置面板（§4.103）：齿轮入口的三 Tab 浮层，enable 才渲染 -->
+    {dsEnable && <DisplaySettings />}
     <button class="back-top" id="backTop" type="button" aria-label={t('backToTop')} hidden>
       <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m18 15-6-6-6 6"/></svg>
     </button>