From 89b88409de61b7e5c326225b0f82dfef24241885 Mon Sep 17 00:00:00 2001
From: Yue-plus <Yue_plus@foxmail.com>
Date: Wed, 4 Sep 2024 00:34:42 +0800
Subject: [PATCH] =?UTF-8?q?docs(demo):=20=E5=BC=80=E5=8F=91=E8=80=85?=
 =?UTF-8?q?=E6=96=87=E6=A1=A3=20=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                                     |  1 +
 src/components/DemoSlotBlock.astro            | 14 +++++++++++
 .../\345\270\203\345\261\200.md"              | 12 +++++++++
 src/layouts/InfoLayout.astro                  |  2 +-
 src/pages/demo/InfoLayoutSlot.astro           | 25 +++++++++++++++++++
 src/pages/demo/RootLayoutSlot.astro           |  8 ++++++
 6 files changed, 61 insertions(+), 1 deletion(-)
 create mode 100644 src/components/DemoSlotBlock.astro
 create mode 100644 "src/content/docs/02-\345\274\200\345\217\221\350\200\205\346\226\207\346\241\243/\345\270\203\345\261\200.md"
 create mode 100644 src/pages/demo/InfoLayoutSlot.astro
 create mode 100644 src/pages/demo/RootLayoutSlot.astro

diff --git a/README.md b/README.md
index 3b39a48..87dae10 100644
--- a/README.md
+++ b/README.md
@@ -47,6 +47,7 @@ All content in the [Content Collections (`src/content`)](https://github.com/Yue-
     <img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/nc.svg?ref=chooser-v1" alt="">
     <img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/sa.svg?ref=chooser-v1" alt="">
 </a>；
+
 [内容集合（`src/content`）](https://github.com/Yue-plus/astro-arknights/tree/main/src/content) 内的所有内容使用
 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh-hans" target="_blank" rel="license noopener noreferrer" style="display:inline-block;">
     CC BY-NC-SA 4.0
diff --git a/src/components/DemoSlotBlock.astro b/src/components/DemoSlotBlock.astro
new file mode 100644
index 0000000..28a5b1c
--- /dev/null
+++ b/src/components/DemoSlotBlock.astro
@@ -0,0 +1,14 @@
+---
+interface Props {
+    title: string,
+    fontSize: string,
+    background: string,
+}
+
+const {title, fontSize, background} = Astro.props
+---
+
+<div class="w-full h-full font-benderBold flex items-center justify-center select-none"
+     style=`background: ${background}; font-size: ${fontSize};`>
+    {title}
+</div>
diff --git "a/src/content/docs/02-\345\274\200\345\217\221\350\200\205\346\226\207\346\241\243/\345\270\203\345\261\200.md" "b/src/content/docs/02-\345\274\200\345\217\221\350\200\205\346\226\207\346\241\243/\345\270\203\345\261\200.md"
new file mode 100644
index 0000000..dab49b9
--- /dev/null
+++ "b/src/content/docs/02-\345\274\200\345\217\221\350\200\205\346\226\207\346\241\243/\345\270\203\345\261\200.md"
@@ -0,0 +1,12 @@
+---
+title: 布局
+---
+
+# 布局
+
+> 参考官方文档：[布局 - 基础知识](https://docs.astro.build/zh-cn/basics/layouts/)
+
+## 布局插槽（slot）关系展示
+
+- [RootLayout](../../demo/RootLayoutSlot)
+  + [InfoLayout](../../demo/InfoLayoutSlot)
diff --git a/src/layouts/InfoLayout.astro b/src/layouts/InfoLayout.astro
index e830679..928c21d 100644
--- a/src/layouts/InfoLayout.astro
+++ b/src/layouts/InfoLayout.astro
@@ -75,7 +75,7 @@ const subNavigationItems = Astro.props.subNavigationItems
     {
         Astro.slots.has("tool-panel") &&
             <div id="info-layout-tool-panel-slot"
-                 class="h-[3.75rem] mb-[5.75rem] fixed bottom-0 left-0 landscape:left-auto landscape:right-0">
+                 class="h-[3.75rem] mb-[5.75rem] absolute bottom-0 right-0 z-10">
                 <slot name="tool-panel"/>
             </div>
     }
diff --git a/src/pages/demo/InfoLayoutSlot.astro b/src/pages/demo/InfoLayoutSlot.astro
new file mode 100644
index 0000000..faa90d5
--- /dev/null
+++ b/src/pages/demo/InfoLayoutSlot.astro
@@ -0,0 +1,25 @@
+---
+import InfoLayout from "../../layouts/InfoLayout.astro";
+import DemoSlotBlock from "../../components/DemoSlotBlock.astro";
+import {SubNavigationItem} from "../../_types/SubNavigationItem";
+
+const subNavigationItems: SubNavigationItem[] = [...Array(100)]
+    .map((item, index): SubNavigationItem => ({title: `子导航项 - ${index}`, href: ""}))
+---
+
+<InfoLayout {...{subNavigationItems}}>
+    <DemoSlotBlock slot="left-aside" title="LeftAsideSlot" fontSize="3rem"
+                   background="linear-gradient(to bottom right, darkblue, darksalmon)"/>
+
+    <DemoSlotBlock title="Slot" fontSize="25rem"
+                   background="linear-gradient(to bottom right, darkred, darkgreen)"/>
+
+    <DemoSlotBlock slot="aside-header" title="AsideHeaderSlot" fontSize="3rem"
+                   background="linear-gradient(to bottom right, DarkSlateGray, DarkOrchid)"/>
+
+    <DemoSlotBlock slot="aside-footer" title="AsideFooterSlot" fontSize="3rem"
+                   background="linear-gradient(to bottom right, DarkMagenta, DarkOliveGreen )"/>
+
+    <DemoSlotBlock slot="tool-panel" title="ToolPanelSlot" fontSize="3rem"
+                   background="linear-gradient(to bottom right, DarkGoldenRod, Crimson)"/>
+</InfoLayout>
diff --git a/src/pages/demo/RootLayoutSlot.astro b/src/pages/demo/RootLayoutSlot.astro
new file mode 100644
index 0000000..dca7b97
--- /dev/null
+++ b/src/pages/demo/RootLayoutSlot.astro
@@ -0,0 +1,8 @@
+---
+import RootLayout from "../../layouts/RootLayout.astro"
+import DemoSlotBlock from "../../components/DemoSlotBlock.astro";
+---
+
+<RootLayout>
+    <DemoSlotBlock title="Slot" fontSize="25rem" background="linear-gradient(to bottom right, darkred, darkgreen)"/>
+</RootLayout>