From 113c7f284863a1cc634ad5cbd9fed2e06ea73e63 Mon Sep 17 00:00:00 2001
From: noelorin <noelorin@outlook.com>
Date: Fri, 25 Sep 2026 04:07:35 +0800
Subject: [PATCH] fix(web): hide template side-rail on media pages

---
 app/web/src/layouts/AppLayout.astro | 67 ++++++++++++++++-------------
 app/web/src/styles/globals.css      |  6 +++
 app/web/src/views/mounts.astro      |  1 +
 3 files changed, 43 insertions(+), 31 deletions(-)

diff --git a/app/web/src/layouts/AppLayout.astro b/app/web/src/layouts/AppLayout.astro
index ddab262..9de107d 100644
--- a/app/web/src/layouts/AppLayout.astro
+++ b/app/web/src/layouts/AppLayout.astro
@@ -20,6 +20,8 @@ export interface Props {
   switchHref?: string;
   switchLabel?: string;
   seo?: PageSeoInput;
+  /** 媒体页只保留 AppShell 侧栏时隐藏模板 side-rail（含左让位） */
+  hideSideRail?: boolean;
 }
 
 const {
@@ -30,6 +32,7 @@ const {
   switchHref,
   switchLabel,
   seo,
+  hideSideRail = false,
 } = Astro.props;
 
 const brandName = brand ?? t(locale, "meta.brand");
@@ -125,38 +128,40 @@ const brandInitial = locale === "zh-CN" ? "模" : "A";
     <div aria-hidden="true" class="bg-glow pointer-events-none fixed inset-0 z-0"></div>
     <div aria-hidden="true" class="bg-vignette pointer-events-none fixed inset-0 z-0"></div>
 
-    <aside class="side-rail" aria-label={t(locale, "nav.primary")}>
-      <a href={brandHref} class="side-rail__brand" aria-label={brandName}>
-        <span
-          class="brand-signal flex size-8 items-center justify-center text-[12px] font-bold"
-          style="background: var(--edge); color: #101110;"
-        >
-          {brandInitial}
-        </span>
-        <span class="side-rail__brand-text">{brandName}</span>
-      </a>
-      <div class="side-rail__rule" aria-hidden="true"></div>
-      <nav class="side-rail__nav">
-        <a href={brandHref} class="side-rail__link is-home">
-          <span class="u-mono">00</span>
-          <span>{t(locale, "nav.home")}</span>
-        </a>
-        {
-          nav.map((item) => (
-            <a href={item.href} class="side-rail__link">
-              <span class="u-mono">{item.n}</span>
-              <span>{item.label}</span>
+    {
+      !hideSideRail && (
+        <aside class="side-rail" aria-label={t(locale, "nav.primary")}>
+          <a href={brandHref} class="side-rail__brand" aria-label={brandName}>
+            <span
+              class="brand-signal flex size-8 items-center justify-center text-[12px] font-bold"
+              style="background: var(--edge); color: #101110;"
+            >
+              {brandInitial}
+            </span>
+            <span class="side-rail__brand-text">{brandName}</span>
+          </a>
+          <div class="side-rail__rule" aria-hidden="true"></div>
+          <nav class="side-rail__nav">
+            <a href={brandHref} class="side-rail__link is-home">
+              <span class="u-mono">00</span>
+              <span>{t(locale, "nav.home")}</span>
             </a>
-          ))
-        }
-      </nav>
-      <div class="side-rail__rule" aria-hidden="true"></div>
-      <div class="side-rail__foot">
-        <ThemeSwitch client:visible />
-      </div>
-    </aside>
+            {nav.map((item) => (
+              <a href={item.href} class="side-rail__link">
+                <span class="u-mono">{item.n}</span>
+                <span>{item.label}</span>
+              </a>
+            ))}
+          </nav>
+          <div class="side-rail__rule" aria-hidden="true"></div>
+          <div class="side-rail__foot">
+            <ThemeSwitch client:visible />
+          </div>
+        </aside>
+      )
+    }
 
-    <div class="site-shell">
+    <div class:list={["site-shell", { "site-shell--no-rail": hideSideRail }]}>
       <header class="site-header">
         <div class="site-header__inner">
           <a href={brandHref} class="site-header__brand md:hidden" aria-label={brandName}>
@@ -192,7 +197,7 @@ const brandInitial = locale === "zh-CN" ? "模" : "A";
                 </a>
               )
             }
-            <span class="md:hidden">
+            <span class={hideSideRail ? "" : "md:hidden"}>
               <ThemeSwitch client:visible />
             </span>
             <UserMenu client:visible locale={locale} />
diff --git a/app/web/src/styles/globals.css b/app/web/src/styles/globals.css
index e5f940f..a0091cb 100644
--- a/app/web/src/styles/globals.css
+++ b/app/web/src/styles/globals.css
@@ -471,12 +471,18 @@ html.has-reveal astro-island .u-reveal {
         padding-left: 8.5rem;
         padding-right: 3.5rem;
     }
+    .site-shell--no-rail {
+        padding-left: 3.5rem;
+    }
 }
 @media (min-width: 1280px) {
     .site-shell {
         padding-left: 10.5rem;
         padding-right: 5rem;
     }
+    .site-shell--no-rail {
+        padding-left: 5rem;
+    }
 }
 .site-shell--page {
     height: 100dvh;
diff --git a/app/web/src/views/mounts.astro b/app/web/src/views/mounts.astro
index 93c1eb0..c4b3ab7 100644
--- a/app/web/src/views/mounts.astro
+++ b/app/web/src/views/mounts.astro
@@ -24,6 +24,7 @@ const labels: Record<string, string> = {
   title={t(locale, "mounts.title")}
   locale={locale}
   nav={[]}
+  hideSideRail
   switchHref={alternatePath(Astro.url.pathname, other)}
   switchLabel={t(other, `locale.${other}` as never)}
   seo={{