feat(website): 添加文档页面布局和根目录快捷脚本

- 新增 DocsSidebar 文档导航侧边栏组件 - 新增 DocsLayout 文档页面布局模板 - 首页导航添加文档入口链接 - 根目录 package.json 添加各包快捷脚本
2025-12-12 23:09:41 +08:00
parent 2f9db8d7d8
commit 87620a1141
4 changed files with 243 additions and 1 deletions
@@ -0,0 +1,142 @@
+---
+import DocsSidebar from '../components/DocsSidebar.astro';
+
+interface Props {
+  title: string;
+  description?: string;
+}
+
+const { title, description } = Astro.props;
+const currentPath = Astro.url.pathname;
+---
+
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content={description || 'AI Terminal Assistant 文档'} />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <title>{title} - AI Terminal Assistant</title>
+  </head>
+  <body class="bg-gray-950 text-gray-100 antialiased">
+    <!-- Navigation -->
+    <nav class="fixed top-0 left-0 right-0 z-50 border-b border-gray-800 bg-gray-950/80 backdrop-blur-sm">
+      <div class="mx-auto flex max-w-7xl items-center justify-between px-6 py-4">
+        <a href="/" class="text-xl font-bold text-white">
+          <span class="text-primary-400">AI</span> Terminal Assistant
+        </a>
+        <div class="flex items-center gap-6">
+          <a href="/" class="text-sm text-gray-400 transition hover:text-white">首页</a>
+          <a href="/docs" class="text-sm text-white">文档</a>
+          <a
+            href="https://github.com"
+            target="_blank"
+            class="rounded-lg bg-gray-800 px-4 py-2 text-sm font-medium text-white transition hover:bg-gray-700"
+          >
+            GitHub
+          </a>
+        </div>
+      </div>
+    </nav>
+
+    <!-- Main Layout -->
+    <div class="flex pt-16">
+      <!-- Sidebar -->
+      <aside class="fixed left-0 top-16 bottom-0 w-64 overflow-y-auto border-r border-gray-800 bg-gray-950 p-6">
+        <DocsSidebar currentPath={currentPath} />
+      </aside>
+
+      <!-- Content -->
+      <main class="ml-64 flex-1 min-h-screen">
+        <div class="mx-auto max-w-4xl px-8 py-12">
+          <article class="prose prose-invert prose-gray max-w-none">
+            <slot />
+          </article>
+        </div>
+      </main>
+    </div>
+  </body>
+</html>
+
+<style is:global>
+  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+
+  html {
+    font-family: 'Inter', system-ui, sans-serif;
+    scroll-behavior: smooth;
+  }
+
+  ::selection {
+    background: rgba(14, 165, 233, 0.3);
+  }
+
+  /* Prose 样式覆盖 */
+  .prose h1 {
+    @apply text-3xl font-bold text-white mb-4 pb-4 border-b border-gray-800;
+  }
+
+  .prose h2 {
+    @apply text-2xl font-semibold text-white mt-10 mb-4;
+  }
+
+  .prose h3 {
+    @apply text-xl font-semibold text-white mt-8 mb-3;
+  }
+
+  .prose h4 {
+    @apply text-lg font-semibold text-white mt-6 mb-2;
+  }
+
+  .prose p {
+    @apply text-gray-300 leading-relaxed mb-4;
+  }
+
+  .prose ul, .prose ol {
+    @apply text-gray-300 mb-4 pl-6;
+  }
+
+  .prose li {
+    @apply mb-2;
+  }
+
+  .prose code {
+    @apply bg-gray-800 text-primary-400 px-1.5 py-0.5 rounded text-sm;
+  }
+
+  .prose pre {
+    @apply bg-gray-900 border border-gray-800 rounded-lg p-4 overflow-x-auto mb-4;
+  }
+
+  .prose pre code {
+    @apply bg-transparent p-0 text-gray-300;
+  }
+
+  .prose a {
+    @apply text-primary-400 hover:text-primary-300 transition;
+  }
+
+  .prose table {
+    @apply w-full border-collapse mb-4;
+  }
+
+  .prose th {
+    @apply bg-gray-800 text-white text-left px-4 py-2 border border-gray-700;
+  }
+
+  .prose td {
+    @apply text-gray-300 px-4 py-2 border border-gray-800;
+  }
+
+  .prose blockquote {
+    @apply border-l-4 border-primary-500 bg-gray-900/50 px-4 py-2 italic text-gray-400 mb-4;
+  }
+
+  .prose hr {
+    @apply border-gray-800 my-8;
+  }
+
+  .prose strong {
+    @apply text-white font-semibold;
+  }
+</style>