wip

Author: Yuki-Nagori

docs/.vitepress/theme/Layout.vue

@@ -1,29 +1,43 @@
 <script setup lang="ts">
-import { useData } from 'vitepress'
+import { useData, Content } from 'vitepress'
 import NavBar from './components/NavBar.vue'
 import Footer from './components/Footer.vue'
+import Sidebar from './components/Sidebar.vue'
+import Toc from './components/Toc.vue'
+import Hero from './components/Hero.vue'
 
 const { frontmatter } = useData()
+
+const isHome = frontmatter.value?.home === true
 </script>
 
 <template>
   <div class="layout">
     <!-- 导航栏 -->
     <NavBar />
 
-    <!-- 主要内容区 -->
-    <main class="main-content">
-      <!-- 首页布局 -->
-      <div v-if="frontmatter.home" class="home">
-        <Content />
-      </div>
-
-      <!-- 文档页面布局 -->
-      <div v-else class="page">
-        <Content />
-      </div>
+    <!-- 首页布局 -->
+    <main v-if="isHome" class="home-layout">
+      <Hero />
+      <Content />
     </main>
 
+    <!-- 文档页面布局 -->
+    <div v-else class="doc-layout">
+      <!-- 侧边栏 -->
+      <Sidebar />
+
+      <!-- 主内容区 -->
+      <main class="main-content">
+        <div class="content-wrapper">
+          <Content />
+        </div>
+      </main>
+
+      <!-- 目录 -->
+      <Toc />
+    </div>
+
     <!-- 页脚 -->
     <Footer />
   </div>
@@ -36,75 +50,143 @@ const { frontmatter } = useData()
   flex-direction: column;
 }
 
-.main-content {
+/* 首页布局 */
+.home-layout {
   flex: 1;
   padding: 2rem;
   max-width: 1200px;
   margin: 0 auto;
   width: 100%;
 }
 
-/* 首页样式 - 居中布局 */
-.home {
-  text-align: center;
+/* 文档页面布局 */
+.doc-layout {
+  flex: 1;
+  display: flex;
+  max-width: 1400px;
+  margin: 0 auto;
+  width: 100%;
 }
 
-.home :deep(h1) {
-  font-size: 3rem;
-  font-weight: 700;
-  margin-bottom: 1rem;
-  background: linear-gradient(120deg, #3b82f6, #10b981);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
+.main-content {
+  flex: 1;
+  min-width: 0;
+  padding: 2rem;
 }
 
-.home :deep(p) {
-  font-size: 1.25rem;
-  color: #666;
-  margin-bottom: 2rem;
+.content-wrapper {
+  max-width: 800px;
+  margin: 0 auto;
 }
 
 /* 文档页面样式 - 左对齐 */
-.page {
-  text-align: left;
-}
-
-.page :deep(h1) {
+.content-wrapper :deep(h1) {
   font-size: 2rem;
   margin-bottom: 1rem;
   border-bottom: 1px solid #e5e7eb;
   padding-bottom: 0.5rem;
 }
 
-.page :deep(h2) {
+.content-wrapper :deep(h2) {
   font-size: 1.5rem;
   margin-top: 2rem;
   margin-bottom: 1rem;
 }
 
-.page :deep(p) {
+.content-wrapper :deep(h3) {
+  font-size: 1.25rem;
+  margin-top: 1.5rem;
+  margin-bottom: 0.75rem;
+}
+
+.content-wrapper :deep(p) {
   line-height: 1.8;
   margin-bottom: 1rem;
 }
 
-.page :deep(pre) {
+.content-wrapper :deep(pre) {
   background: #1e1e1e;
   color: #d4d4d4;
   padding: 1rem;
   border-radius: 0.5rem;
   overflow-x: auto;
 }
 
-.page :deep(code) {
+.content-wrapper :deep(code) {
   font-family: 'JetBrains Mono', monospace;
   background: #f3f4f6;
   padding: 0.2em 0.4em;
   border-radius: 0.25rem;
   font-size: 0.875em;
 }
 
-.page :deep(pre code) {
+.content-wrapper :deep(pre code) {
   background: transparent;
   padding: 0;
 }
+
+.content-wrapper :deep(table) {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1rem 0;
+}
+
+.content-wrapper :deep(th),
+.content-wrapper :deep(td) {
+  border: 1px solid #e5e7eb;
+  padding: 0.5rem 0.75rem;
+  text-align: left;
+}
+
+.content-wrapper :deep(th) {
+  background: #f9fafb;
+  font-weight: 600;
+}
+
+.content-wrapper :deep(ul),
+.content-wrapper :deep(ol) {
+  padding-left: 1.5rem;
+  margin-bottom: 1rem;
+}
+
+.content-wrapper :deep(li) {
+  margin: 0.5rem 0;
+}
+
+.content-wrapper :deep(a) {
+  color: #3b82f6;
+  text-decoration: none;
+}
+
+.content-wrapper :deep(a:hover) {
+  text-decoration: underline;
+}
+
+.content-wrapper :deep(blockquote) {
+  border-left: 4px solid #3b82f6;
+  padding-left: 1rem;
+  margin: 1rem 0;
+  color: #4b5563;
+}
+
+/* 响应式布局 */
+@media (max-width: 1024px) {
+  .doc-layout {
+    flex-direction: column;
+  }
+
+  .main-content {
+    padding: 1.5rem;
+  }
+}
+
+@media (max-width: 640px) {
+  .home-layout {
+    padding: 1rem;
+  }
+
+  .main-content {
+    padding: 1rem;
+  }
+}
 </style>