src/layouts/MainGridLayout.astro

---
import Live2DWidget from "@components/features/Live2DWidget.astro";
import OverlayWallpaper from "@components/features/OverlayWallpaper.astro";
import SpineModel from "@components/features/SpineModel.astro";
import Footer from "@components/layout/Footer.astro";
import Navbar from "@components/layout/Navbar.astro";
import SideBar from "@components/layout/SideBar.astro";
import type { MarkdownHeading } from "astro";
import { Icon } from "astro-icon/components";
import ImageWrapper from "@/components/common/ImageWrapper.astro";
import FloatingControls from "@/components/controls/FloatingControls.astro";
import TypewriterText from "@/components/features/TypewriterText.astro";
import {
	backgroundWallpaper,
	live2dModelConfig,
	sidebarLayoutConfig,
	siteConfig,
} from "@/config";
import {
	BANNER_HEIGHT,
	BANNER_HEIGHT_EXTEND,
	MAIN_PANEL_OVERLAPS_BANNER_HEIGHT,
} from "@/constants/constants";
import { getImageQuality } from "@/utils/image-utils";
import { getBackgroundImages, isHomePage } from "@/utils/layout-utils";
import {
	generateGridClasses,
	generateMainContentClasses,
	generateRightSidebarClasses,
	generateSidebarClasses,
	getResponsiveSidebarConfig,
	type ResponsiveSidebarConfig,
} from "@/utils/responsive-utils";
import Layout from "./Layout.astro";

interface Props {
	title?: string;
	banner?: string;
	description?: string;
	lang?: string;
	setOGTypeArticle?: boolean;
	postSlug?: string;
	headings?: MarkdownHeading[];
}

const backgroundImages = getBackgroundImages();

const {
	title,
	banner,
	description,
	lang,
	setOGTypeArticle,
	postSlug,
	headings = [],
} = Astro.props;

// 检查背景壁纸模式和是否允许切换
const isBannerMode = backgroundWallpaper.mode === "banner";
const isOverlayMode = backgroundWallpaper.mode === "overlay";
const isBackgroundEnabled = backgroundWallpaper.mode !== "none";
const isWallpaperSwitchable = backgroundWallpaper.switchable ?? true;

// 检查是否启用波浪动画效果
const wavesConfig = backgroundWallpaper.banner?.waves?.enable;
// 处理分设备控制的波浪动画
const wavesEnabledOnDesktop =
	typeof wavesConfig === "object" ? wavesConfig.desktop : wavesConfig;
const wavesEnabledOnMobile =
	typeof wavesConfig === "object" ? wavesConfig.mobile : wavesConfig;

// 处理分设备控制的横幅信贷显示
const creditEnableConfig = backgroundWallpaper.banner?.credit?.enable;
const creditEnabledOnDesktop =
	typeof creditEnableConfig === "object"
		? creditEnableConfig.desktop
		: creditEnableConfig;
const creditEnabledOnMobile =
	typeof creditEnableConfig === "object"
		? creditEnableConfig.mobile
		: creditEnableConfig;

const hasBannerCredit =
	isBannerMode && isBackgroundEnabled && creditEnableConfig;

// 处理分设备控制的横幅信贷文本和链接
const creditTextConfig = backgroundWallpaper.banner?.credit?.text;
const creditTextDesktop =
	typeof creditTextConfig === "object"
		? creditTextConfig.desktop
		: creditTextConfig;
const creditTextMobile =
	typeof creditTextConfig === "object"
		? creditTextConfig.mobile
		: creditTextConfig;

const creditUrlConfig = backgroundWallpaper.banner?.credit?.url;
const creditUrlDesktop =
	typeof creditUrlConfig === "object"
		? creditUrlConfig.desktop
		: creditUrlConfig;
const creditUrlMobile =
	typeof creditUrlConfig === "object"
		? creditUrlConfig.mobile
		: creditUrlConfig;

// 检查是否为首页
const isHomePageCheck = isHomePage(Astro.url.pathname);

// 检查是否在文章详情页
const isPostPage = !!postSlug;

// 随机选择副标题（当打字机关闭且为数组时）
const getRandomSubtitle = () => {
	const subtitle = backgroundWallpaper.banner?.homeText?.subtitle;
	if (Array.isArray(subtitle)) {
		const randomIndex = Math.floor(Math.random() * subtitle.length);
		return subtitle[randomIndex];
	}
	return subtitle;
};
const randomSubtitle = getRandomSubtitle();

// 主页横幅文本只在首页且全局开关为 true 时显示，不区分设备
const homeTextEnable = backgroundWallpaper.banner?.homeText?.enable;
const showHomeText = isBannerMode && !!homeTextEnable && isHomePageCheck;
// 手机端非首页不显示banner的CSS类
const mobileNonHomeBannerClass = !isHomePageCheck ? "mobile-hide-banner" : "";

// 计算主内容区域位置，考虑手机端非首页时banner被隐藏
const mainPanelTop =
	isBannerMode && isBackgroundEnabled
		? `calc(${BANNER_HEIGHT}vh - ${MAIN_PANEL_OVERLAPS_BANNER_HEIGHT}rem)`
		: "5.5rem";

// 当banner模式被禁用时，主内容区域应该始终从顶栏下面开始
// 非首页在小于1024px时会通过 mobile-main-no-banner CSS类覆盖top值为5.5rem
const finalMainPanelTop =
	isBannerMode && isBackgroundEnabled ? mainPanelTop : "5.5rem";

// 获取响应式侧边栏配置
const sidebarConfig = getResponsiveSidebarConfig();

// 在文章页面且启用了showRightSidebarOnPostPage时，要确保有右侧组件并参与网格计算
const shouldShowRightSidebarOnPostPage: boolean =
	isPostPage &&
	sidebarLayoutConfig.position === "left" &&
	!!sidebarLayoutConfig.showRightSidebarOnPostPage;

const effectiveIsBothSidebars: boolean =
	sidebarConfig.isBothSidebars || shouldShowRightSidebarOnPostPage;
const effectiveHasRightComponents: boolean =
	sidebarConfig.hasRightComponents ||
	(shouldShowRightSidebarOnPostPage &&
		sidebarLayoutConfig.rightComponents.some((comp) => comp.enable));

// 使用effective值重新生成网格类
const updatedGridConfig: ResponsiveSidebarConfig = {
	...sidebarConfig,
	isBothSidebars: effectiveIsBothSidebars,
	hasRightComponents: effectiveHasRightComponents,
};

const { gridCols } = generateGridClasses(updatedGridConfig);
const sidebarClass = generateSidebarClasses();
const rightSidebarClass = effectiveIsBothSidebars
	? generateRightSidebarClasses()
	: "";
const mainContentClass = generateMainContentClasses(updatedGridConfig);

const footerClass = [
	"footer",
	"col-span-1",
	"md:col-span-2",
	"onload-animation",
];

if (
	updatedGridConfig.isBothSidebars &&
	updatedGridConfig.hasLeftComponents &&
	updatedGridConfig.hasRightComponents
) {
	footerClass.push("xl:col-start-2 xl:col-span-1");
} else if (
	updatedGridConfig.hasLeftComponents &&
	!updatedGridConfig.hasRightComponents
) {
	footerClass.push("xl:col-start-2 xl:col-span-1");
} else if (
	!updatedGridConfig.hasLeftComponents &&
	updatedGridConfig.hasRightComponents
) {
	footerClass.push("xl:col-start-1 xl:col-span-1");
} else {
	footerClass.push("xl:col-start-1 xl:col-span-1");
}

const footerClassName = footerClass.join(" ");

// 检查是否应该启用半透明效果
const shouldEnableTransparency = isOverlayMode && isBackgroundEnabled;

// 为组件添加半透明效果的CSS类
const transparentClass = shouldEnableTransparency
	? "wallpaper-transparent"
	: "";

const navbarWidthFull = siteConfig.navbar.widthFull ?? false;

// 获取图片质量配置
const configQuality = getImageQuality();
const mobileQuality = Math.round(configQuality * 0.9);
---

<Layout title={title} banner={banner} description={description} lang={lang} setOGTypeArticle={setOGTypeArticle} postSlug={postSlug}>





<!-- 全屏透明覆盖壁纸 - 如果允许切换则始终渲染，否则只渲染当前模式 -->

{(isWallpaperSwitchable || isOverlayMode) && (

	<OverlayWallpaper config={{

		src: {

			desktop: typeof backgroundImages.desktop === 'string' ? backgroundImages.desktop : '',

			mobile: typeof backgroundImages.mobile === 'string' ? backgroundImages.mobile : ''

		},

		zIndex: backgroundWallpaper.overlay?.zIndex,

		opacity: backgroundWallpaper.overlay?.opacity,

		blur: backgroundWallpaper.overlay?.blur,

	}} 

	className={isWallpaperSwitchable && !isOverlayMode ? "hidden opacity-0" : undefined} />

)}



<!-- 为全屏壁纸模式添加body类 -->

{shouldEnableTransparency && (

	<script>

		document.body.classList.add('wallpaper-transparent');

	</script>

)}



<!-- Navbar -->

<slot slot="head" name="head"></slot>

<div id="top-row" class="z-50 pointer-events-none relative transition-all duration-700 mx-auto" class:list={[navbarWidthFull ? "" : "max-w-(--page-width) px-0 md:px-4"]}>

    <div id="navbar-wrapper" class="pointer-events-auto sticky top-0 transition-all">

        <Navbar></Navbar>

    </div>

</div>



<!-- Banner - 如果允许切换则始终渲染，否则只渲染当前模式 -->

{(isWallpaperSwitchable || isBannerMode) && (

<div id="banner-wrapper" class={`absolute z-10 w-full transition duration-700 overflow-hidden ${mobileNonHomeBannerClass}`} style={isWallpaperSwitchable ? `top: -${BANNER_HEIGHT_EXTEND}vh; display: none;` : `top: -${BANNER_HEIGHT_EXTEND}vh`}>

    <!-- 背景图片显示 -->

    <div class="relative h-full w-full">

        <!-- Mobile: use mobile-specific image -->

        <ImageWrapper

            alt="Mobile background image of the blog"

            class:list={["block lg:hidden object-cover h-full w-full transition duration-700 opacity-100"]}

            src={typeof backgroundImages.mobile === 'string' ? backgroundImages.mobile : (typeof backgroundImages.desktop === 'string' ? backgroundImages.desktop : '')}

            position={backgroundWallpaper.banner?.position}

            widths={[640, 750, 1080]}

            sizes="100vw"

            loading="eager"

            fetchpriority="high"

            quality={mobileQuality}

        />

        <!-- Desktop: use desktop-specific image -->

        <ImageWrapper

            id="banner"

            alt="Desktop background image of the blog"

            class:list={["hidden lg:block object-cover h-full transition duration-700 opacity-100"]}

            src={typeof backgroundImages.desktop === 'string' ? backgroundImages.desktop : (typeof backgroundImages.mobile === 'string' ? backgroundImages.mobile : '')}

            position={backgroundWallpaper.banner?.position}

            widths={[1280, 1920, 2560]}

            sizes="100vw"

            loading="eager"

            fetchpriority="high"

            quality={configQuality}

        />

    </div>

    

    <!-- Home page text overlay - 始终渲染以便切换模式时控制显示 -->

    {(isWallpaperSwitchable || showHomeText) && homeTextEnable && (

        <div class={`banner-text-overlay absolute inset-0 z-20 flex items-center justify-center ${!showHomeText ? 'hidden' : ''}`}>

            <div class="w-4/5 lg:w-3/4 text-center mb-0">

                <div class="flex flex-col">

                    {backgroundWallpaper.banner?.homeText?.title && (

                        <h1 class="banner-title font-bold text-white mb-2 lg:mb-4 leading-tight" style={{ fontSize: backgroundWallpaper.banner.homeText.titleSize || "3rem" }}>

                            {backgroundWallpaper.banner.homeText.title}

                        </h1>

                    )}

                    {backgroundWallpaper.banner?.homeText?.subtitle && (

                        <h2 id="banner-subtitle" class="banner-subtitle text-white/90 leading-snug" style={{ fontSize: backgroundWallpaper.banner.homeText.subtitleSize || "1.5rem" }} data-subtitles={JSON.stringify(backgroundWallpaper.banner.homeText.subtitle)}>

                            {backgroundWallpaper.banner.homeText.typewriter?.enable ? (

                                <TypewriterText 

                                    text={backgroundWallpaper.banner.homeText.subtitle}

                                    speed={backgroundWallpaper.banner.homeText.typewriter.speed}

                                    deleteSpeed={backgroundWallpaper.banner.homeText.typewriter.deleteSpeed}

                                    pauseTime={backgroundWallpaper.banner.homeText.typewriter.pauseTime}

                                />

                            ) : (

                                randomSubtitle

                            )}

                        </h2>

                    )}

                </div>

            </div>

        </div>

    )}

    

    <script is:inline>

        function setRandomSubtitle() {

            const subtitleElement = document.getElementById('banner-subtitle');

            if (!subtitleElement) return;

            

            const subtitlesData = subtitleElement.dataset.subtitles;

            if (!subtitlesData) return;

            

            try {

                const subtitles = JSON.parse(subtitlesData);

                // Only randomize if it's an array and typewriter is NOT enabled (check for typewriter class)

                if (Array.isArray(subtitles) && subtitles.length > 0 && !subtitleElement.querySelector('.typewriter')) {

                    // Use a global variable to persist the subtitle across Swup navigations

                    // This variable will be reset on full page reload (F5), meeting the requirement

                    if (!window.fireflyCachedSubtitle) {

                        const randomIndex = Math.floor(Math.random() * subtitles.length);

                        window.fireflyCachedSubtitle = subtitles[randomIndex];

                    }

                    subtitleElement.textContent = window.fireflyCachedSubtitle;

                }

            } catch (e) {

                console.error("Failed to parse subtitles", e);

            }

        }



        // Run on initial load

        setRandomSubtitle();

    </script>

    

    <!-- Water waves effect - 始终渲染以便动态切换 -->

    {(wavesEnabledOnDesktop || wavesEnabledOnMobile) ? (

    <div class={`waves absolute -bottom-px h-[10vh] max-h-37.5 min-h-12.5 w-full md:h-[15vh] 

        ${!wavesEnabledOnMobile ? 'hidden' : ''} ${!wavesEnabledOnDesktop ? 'md:hidden' : ''} ${wavesEnabledOnDesktop ? 'md:block' : ''}`} 

        id="header-waves" 

        style="transform: translateZ(0); will-change: fill;">

        <svg

            class="waves"

            xmlns="http://www.w3.org/2000/svg"

            xmlns:xlink="http://www.w3.org/1999/xlink"

            viewBox="0 24 150 28"

            preserveAspectRatio="none"

            shape-rendering="geometricPrecision"

        >

            <defs>

                <path

                    id="gentle-wave"

                    d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v48h-352z"

                >

                </path>

            </defs>

            <g class="parallax">

                <use

                    xlink:href="#gentle-wave"

                    x="48"

                    y="0"

                    class="opacity-25 fill-(--page-bg)"

                ></use>

                <use

                    xlink:href="#gentle-wave"

                    x="48"

                    y="3"

                    class="opacity-50 fill-(--page-bg)"

                ></use>

                <use

                    xlink:href="#gentle-wave"

                    x="48"

                    y="5"

                    class="opacity-65 fill-(--page-bg)"

                ></use>

                <use

                    xlink:href="#gentle-wave"

                    x="48"

                    y="7"

                    class=" opacity-75 fill-(--page-bg)"

                ></use>

            </g>

        </svg>

    </div>

    ) : null}

</div>

)}



<!-- Main content -->

<div class={`absolute w-full z-30 pointer-events-none ${mobileNonHomeBannerClass ? 'mobile-main-no-banner' : ''} ${!(isBannerMode && isBackgroundEnabled) ? 'no-banner-layout' : ''} ${transparentClass}`} style={`top: ${finalMainPanelTop}`}>

    <!-- The pointer-events-none here prevent blocking the click event of the TOC -->

    <div class="relative max-w-(--page-width) mx-auto pointer-events-auto">

        <div id="main-grid"

          class={`transition duration-700 w-full left-0 right-0 grid ${gridCols} grid-rows-[auto_1fr_auto] lg:grid-rows-[auto] mx-auto gap-4 px-2 md:px-4 ${!sidebarConfig.mobileShowSidebar ? 'mobile-no-sidebar' : ''}`}

          data-sidebar-position={sidebarLayoutConfig.position}

          data-show-right-sidebar-on-post={sidebarLayoutConfig.showRightSidebarOnPostPage ? "true" : "false"}

        >

            <!-- Background image credit - Desktop -->

            {hasBannerCredit && creditEnabledOnDesktop && <a 

                href={creditUrlDesktop || "#"} 

                id="banner-credit-desktop" 

                target={creditUrlDesktop ? "_blank" : "_self"}

                rel={creditUrlDesktop ? "noopener" : ""}

                aria-label="Visit image source"

                class:list={[

                    "group onload-animation transition-all absolute justify-center items-center rounded-full " +

                    "px-3 right-4 -top-13 bg-black/60 hover:bg-black/70 h-9 hidden md:flex", 

                    {"hover:pr-9 active:bg-black/80": creditUrlDesktop}

                ]}

            >

                <Icon class="text-white/75 text-[1.25rem] mr-1" name="material-symbols:copyright-outline-rounded" ></Icon>

                <div class="text-white/75 text-xs">{creditTextDesktop}</div>

                {creditUrlDesktop && <Icon class:list={["transition absolute text-[oklch(0.75_0.14_var(--hue))] right-4 text-[0.75rem] opacity-0 group-hover:opacity-100"]}

                      name="fa7-solid:arrow-up-right-from-square">

                </Icon>}

            </a>}



            <!-- Background image credit - Mobile -->

            {hasBannerCredit && creditEnabledOnMobile && <a 

                href={creditUrlMobile || "#"} 

                id="banner-credit-mobile" 

                target={creditUrlMobile ? "_blank" : "_self"}

                rel={creditUrlMobile ? "noopener" : ""}

                aria-label="Visit image source"

                class:list={[

                    "group onload-animation transition-all absolute justify-center items-center rounded-full " +

                    "px-3 right-4 -top-13 bg-black/60 hover:bg-black/70 h-9 flex md:hidden", 

                    {"hover:pr-9 active:bg-black/80": creditUrlMobile}

                ]}

            >

                <Icon class="text-white/75 text-[1.25rem] mr-1" name="material-symbols:copyright-outline-rounded" ></Icon>

                <div class="text-white/75 text-xs">{creditTextMobile}</div>

                {creditUrlMobile && <Icon class:list={["transition absolute text-[oklch(0.75_0.14_var(--hue))] right-4 text-[0.75rem] opacity-0 group-hover:opacity-100"]}

                      name="fa7-solid:arrow-up-right-from-square">

                </Icon>}

            </a>}





            {/* 渲染侧边栏 - 769px及以上显示 */}

            <div id="left-sidebar-wrapper" class="contents" style="contain: layout style paint;">

                {sidebarConfig.hasLeftComponents && (

                    <SideBar

                        side={sidebarConfig.isBothSidebars ? "left" : undefined}

                        class={`${sidebarClass} ${transparentClass}`}

                        headings={headings}

                    />

                )}

            </div>

                    

            {/* 主内容区 - 始终渲染，确保 Swup 容器存在 */}

            <main id="swup-container" class={`${mainContentClass} transition-main`}>

                {/* 携带网格布局类名，用于JS更新父容器 */}

                <div id="grid-class-carrier" data-grid-class={gridCols} class="hidden"></div>

                {/* 备用 h1 标题 - 当主页横幅文本未启用时，提供隐藏的主标题 */}

                {isHomePageCheck && !showHomeText && (

                        <h1 class="sr-only">{siteConfig.title}</h1>

                )}

                <div id="content-wrapper" class="onload-animation transition-leaving">

                    <slot></slot>



                </div>

            </main>

            

            {/* 右侧边栏 - 仅双侧边栏模式 */}

            {/*

                如果全局配置为双侧栏(position: both)，则使用静态容器(不被swup替换)，避免闪烁。

                如果全局配置为单侧栏(position: left)，则使用动态容器(被swup替换)，以便在文章页显示右侧栏。

                注意：为了满足swup要求所有containers必须存在，我们在两种模式下都必须渲染 #right-sidebar-dynamic。

                右侧边栏在1280px以下隐藏（CSS处理）。

            */}

            {sidebarLayoutConfig.position === "both" ? (

                <>

                    <div id="right-sidebar-static" class="contents">

                        {effectiveIsBothSidebars && effectiveHasRightComponents && (

                            <SideBar side="right" class={`${rightSidebarClass} ${transparentClass}`} headings={headings}></SideBar>

                        )}

                    </div>

                    <div id="right-sidebar-dynamic" class="hidden transition-swup-fade"></div>

                </>

            ) : (

                <div id="right-sidebar-dynamic" class="contents transition-swup-fade">

                    {effectiveIsBothSidebars && effectiveHasRightComponents && (

                        <SideBar side="right" class={`${rightSidebarClass} ${transparentClass}`} headings={headings}></SideBar>

                    )}

                </div>

            )}



            {/* 移动端底部组件 - 768px及以下显示 */}

            {sidebarLayoutConfig.mobileBottomComponents && sidebarLayoutConfig.mobileBottomComponents.length > 0 && (

                <div id="mobile-bottom-sidebar" class="col-span-1 block md:hidden mt-4">

                    <SideBar side="bottom" class={`${transparentClass}`} headings={headings}></SideBar>

                </div>

            )}



            <div class={footerClassName}>

                <Footer></Footer>

            </div>

        </div>



        <SpineModel></SpineModel>

        {live2dModelConfig.enable && <Live2DWidget config={live2dModelConfig} />}

    </div>

</div>

<FloatingControls headings={headings} />


</Layout>

<style is:global>

  /* 右侧栏平滑过渡 */

  #right-sidebar {

    transition: opacity 0.35s ease-in-out,

                transform 0.35s ease-in-out;

  }





  @keyframes swupFadeOut {

    from {

      opacity: 1;

    }

    to {

      opacity: 0.95;

    }

  }



  /* 横幅文字阴影 - 更柔和的扩散效果 */

  .banner-title {

    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.6);

  }



  .banner-subtitle {

    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.6);

  }

</style>