From 014dd2e6fc588d7183c424088e7984f461e9d288 Mon Sep 17 00:00:00 2001
From: kurihada <kurihada@qq.com>
Date: Thu, 18 Dec 2025 00:32:24 +0800
Subject: [PATCH] =?UTF-8?q?feat(website):=20=E6=89=A9=E5=B1=95=20Header=20?=
 =?UTF-8?q?=E5=AF=BC=E8=88=AA=E5=B9=B6=E6=B7=BB=E5=8A=A0=E7=A4=BA=E4=BE=8B?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 首页和文档页添加文档下拉菜单，快速访问各文档分类
- 新增"示例"导航链接
- 创建 examples.astro 示例页面，展示 6 种使用场景
- 移动端菜单同步更新
---
 packages/website/src/layouts/DocsLayout.astro |  20 +-
 packages/website/src/pages/examples.astro     | 294 ++++++++++++++++++
 packages/website/src/pages/index.astro        |  32 +-
 3 files changed, 343 insertions(+), 3 deletions(-)
 create mode 100644 packages/website/src/pages/examples.astro

diff --git a/packages/website/src/layouts/DocsLayout.astro b/packages/website/src/layouts/DocsLayout.astro
index 89db2df..fce5c02 100644
--- a/packages/website/src/layouts/DocsLayout.astro
+++ b/packages/website/src/layouts/DocsLayout.astro
@@ -52,7 +52,25 @@ const canonicalURL = Astro.site ? new URL(Astro.url.pathname, Astro.site) : Astr
         </a>
         <div class="flex items-center gap-4 sm:gap-6">
           <a href="/" class="text-sm text-gray-400 transition hover:text-white">首页</a>
-          <a href="/docs" class="text-sm font-medium text-white">文档</a>
+          <!-- 文档下拉菜单 -->
+          <div class="group relative">
+            <button class="flex items-center gap-1 text-sm font-medium text-white">
+              文档
+              <svg class="h-4 w-4 transition group-hover:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+              </svg>
+            </button>
+            <div class="invisible absolute right-0 top-full z-50 w-48 pt-2 opacity-0 transition-all group-hover:visible group-hover:opacity-100">
+              <div class="rounded-xl border border-gray-800 bg-gray-900 py-2 shadow-xl">
+                <a href="/docs" class="block px-4 py-2 text-sm text-gray-400 transition hover:bg-gray-800 hover:text-white">入门指南</a>
+                <a href="/docs/core/agent" class="block px-4 py-2 text-sm text-gray-400 transition hover:bg-gray-800 hover:text-white">核心功能</a>
+                <a href="/docs/api/rest" class="block px-4 py-2 text-sm text-gray-400 transition hover:bg-gray-800 hover:text-white">API 参考</a>
+                <a href="/docs/deploy/local" class="block px-4 py-2 text-sm text-gray-400 transition hover:bg-gray-800 hover:text-white">部署指南</a>
+                <a href="/docs/extend/custom-tools" class="block px-4 py-2 text-sm text-gray-400 transition hover:bg-gray-800 hover:text-white">扩展开发</a>
+              </div>
+            </div>
+          </div>
+          <a href="/examples" class="text-sm text-gray-400 transition hover:text-white">示例</a>
           <!-- Mobile sidebar toggle -->
           <button id="sidebar-toggle" class="flex items-center justify-center rounded-lg p-2 text-gray-400 hover:bg-gray-800 hover:text-white lg:hidden">
             <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
diff --git a/packages/website/src/pages/examples.astro b/packages/website/src/pages/examples.astro
new file mode 100644
index 0000000..fcb9b1a
--- /dev/null
+++ b/packages/website/src/pages/examples.astro
@@ -0,0 +1,294 @@
+---
+import Layout from '../layouts/Layout.astro';
+
+const examples = [
+  {
+    icon: '💬',
+    title: '基础对话',
+    description: '简单的问答交互，让 AI 解释概念或回答问题',
+    gradient: 'from-blue-500 to-cyan-500',
+    input: '什么是 React 的 useEffect Hook？',
+    output: `useEffect 是 React 的一个 Hook，用于在函数组件中执行副作用操作。
+
+主要用途：
+• 数据获取
+• 订阅/取消订阅
+• 手动修改 DOM
+• 设置定时器
+
+基本语法：
+useEffect(() => {
+  // 副作用逻辑
+  return () => {
+    // 清理函数
+  };
+}, [dependencies]);`,
+  },
+  {
+    icon: '📂',
+    title: '文件操作',
+    description: '读取、编辑、创建文件，AI 会展示修改内容',
+    gradient: 'from-green-500 to-emerald-500',
+    input: '读取 package.json 并告诉我项目用了哪些主要依赖',
+    output: `[调用工具: read_file]
+路径: package.json
+
+项目主要依赖：
+
+运行时依赖：
+• @anthropic-ai/sdk: ^0.30.0 - Claude API SDK
+• hono: ^4.0.0 - Web 框架
+• zod: ^3.23.0 - Schema 验证
+
+开发依赖：
+• typescript: ^5.6.0
+• vitest: ^2.1.0 - 测试框架
+• tailwindcss: ^3.4.0 - CSS 框架`,
+  },
+  {
+    icon: '✨',
+    title: '代码生成',
+    description: '让 AI 编写函数、组件或完整功能模块',
+    gradient: 'from-purple-500 to-violet-500',
+    input: '帮我写一个防抖函数',
+    output: `我来为你创建一个 TypeScript 防抖函数：
+
+[调用工具: write_file]
+路径: src/utils/debounce.ts
+
+export function debounce<T extends (...args: any[]) => any>(
+  fn: T,
+  delay: number
+): (...args: Parameters<T>) => void {
+  let timeoutId: ReturnType<typeof setTimeout>;
+
+  return function (...args: Parameters<T>) {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => fn(...args), delay);
+  };
+}
+
+✓ 文件已创建`,
+  },
+  {
+    icon: '🔍',
+    title: '项目分析',
+    description: '分析代码结构、查找问题、理解架构',
+    gradient: 'from-orange-500 to-red-500',
+    input: '分析这个项目的整体架构',
+    output: `[调用工具: list_directory]
+[调用工具: read_file] x 5
+
+📁 项目架构分析
+
+Monorepo 结构 (pnpm workspaces)：
+
+packages/
+├── core/      → Agent 引擎、工具系统、MCP
+├── server/    → HTTP API、WebSocket、会话管理
+├── cli/       → 命令行工具
+├── web/       → React 前端
+└── desktop/   → Tauri 桌面应用
+
+依赖关系：
+cli/web → server → core
+
+技术栈：TypeScript + Hono + React + Tailwind`,
+  },
+  {
+    icon: '📝',
+    title: 'Git 操作',
+    description: '查看状态、创建提交、管理分支',
+    gradient: 'from-pink-500 to-rose-500',
+    input: '提交当前的更改，消息为"修复登录验证"',
+    output: `[调用工具: execute_bash]
+命令: git status
+
+修改的文件：
+• src/auth/login.ts
+• src/auth/validate.ts
+
+[调用工具: execute_bash]
+命令: git add -A && git commit -m "修复登录验证"
+
+[main 8f3a2b1] 修复登录验证
+ 2 files changed, 15 insertions(+), 3 deletions(-)
+
+✓ 提交成功`,
+  },
+  {
+    icon: '🔌',
+    title: 'MCP 扩展',
+    description: '使用 MCP 服务器扩展 AI 能力',
+    gradient: 'from-indigo-500 to-blue-500',
+    input: '用 GitHub MCP 创建一个新 Issue',
+    output: `[调用 MCP 工具: github.create_issue]
+仓库: my-org/my-repo
+
+参数：
+• title: "优化首页加载性能"
+• body: "当前首页加载较慢，需要优化..."
+• labels: ["enhancement", "performance"]
+
+✓ Issue 创建成功
+链接: https://github.com/my-org/my-repo/issues/42`,
+  },
+];
+---
+
+<Layout title="使用示例 - AI Terminal Assistant">
+  <!-- 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-6xl items-center justify-between px-6 py-4">
+      <a href="/" class="flex items-center gap-2 text-xl font-bold text-white">
+        <span class="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-primary-400 to-cyan-400">
+          <svg class="h-5 w-5 text-gray-950" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+          </svg>
+        </span>
+        <span><span class="text-primary-400">AI</span> Terminal</span>
+      </a>
+      <div class="hidden items-center gap-6 md:flex">
+        <a href="/" class="text-sm text-gray-400 transition hover:text-white">首页</a>
+        <!-- 文档下拉菜单 -->
+        <div class="group relative">
+          <button class="flex items-center gap-1 text-sm text-gray-400 transition hover:text-white">
+            文档
+            <svg class="h-4 w-4 transition group-hover:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+            </svg>
+          </button>
+          <div class="invisible absolute left-0 top-full z-50 w-48 pt-2 opacity-0 transition-all group-hover:visible group-hover:opacity-100">
+            <div class="rounded-xl border border-gray-800 bg-gray-900 py-2 shadow-xl">
+              <a href="/docs" class="block px-4 py-2 text-sm text-gray-400 transition hover:bg-gray-800 hover:text-white">入门指南</a>
+              <a href="/docs/core/agent" class="block px-4 py-2 text-sm text-gray-400 transition hover:bg-gray-800 hover:text-white">核心功能</a>
+              <a href="/docs/api/rest" class="block px-4 py-2 text-sm text-gray-400 transition hover:bg-gray-800 hover:text-white">API 参考</a>
+              <a href="/docs/deploy/local" class="block px-4 py-2 text-sm text-gray-400 transition hover:bg-gray-800 hover:text-white">部署指南</a>
+              <a href="/docs/extend/custom-tools" class="block px-4 py-2 text-sm text-gray-400 transition hover:bg-gray-800 hover:text-white">扩展开发</a>
+            </div>
+          </div>
+        </div>
+        <a href="/examples" class="text-sm font-medium text-white">示例</a>
+        <a
+          href="https://github.com"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="flex items-center gap-2 rounded-lg border border-gray-700 bg-gray-800/50 px-4 py-2 text-sm text-gray-300 transition hover:border-gray-600 hover:bg-gray-800 hover:text-white"
+        >
+          <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
+            <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" />
+          </svg>
+          GitHub
+        </a>
+      </div>
+    </div>
+  </nav>
+
+  <!-- Hero -->
+  <section class="px-6 pt-32 pb-16">
+    <div class="mx-auto max-w-4xl text-center">
+      <span class="mb-4 inline-block rounded-full bg-cyan-500/10 px-4 py-1.5 text-sm font-medium text-cyan-400">
+        使用示例
+      </span>
+      <h1 class="mb-4 text-4xl font-bold text-white sm:text-5xl">
+        看看 AI 能做什么
+      </h1>
+      <p class="mx-auto max-w-2xl text-gray-400">
+        通过这些示例了解 AI Terminal Assistant 的各种使用场景，
+        从简单问答到复杂的代码操作。
+      </p>
+    </div>
+  </section>
+
+  <!-- Examples Grid -->
+  <section class="px-6 pb-24">
+    <div class="mx-auto max-w-6xl">
+      <div class="grid gap-8 lg:grid-cols-2">
+        {examples.map((example) => (
+          <div class="group overflow-hidden rounded-2xl border border-gray-800 bg-gray-900/50 transition hover:border-gray-700 hover:bg-gray-900">
+            <!-- Header -->
+            <div class="border-b border-gray-800 p-6">
+              <div class="mb-3 flex items-center gap-3">
+                <span class="text-3xl">{example.icon}</span>
+                <div>
+                  <h3 class="text-lg font-semibold text-white">{example.title}</h3>
+                  <p class="text-sm text-gray-400">{example.description}</p>
+                </div>
+              </div>
+            </div>
+
+            <!-- Terminal Demo -->
+            <div class="bg-gray-950/50">
+              <!-- User Input -->
+              <div class="border-b border-gray-800 p-4">
+                <div class="flex items-start gap-2">
+                  <span class="mt-0.5 text-xs font-medium text-gray-500">You</span>
+                  <p class="text-sm text-white">{example.input}</p>
+                </div>
+              </div>
+
+              <!-- AI Response -->
+              <div class="p-4">
+                <div class="flex items-start gap-2">
+                  <span class="mt-0.5 text-xs font-medium text-primary-400">AI</span>
+                  <pre class="flex-1 whitespace-pre-wrap font-mono text-xs text-gray-300 leading-relaxed">{example.output}</pre>
+                </div>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  </section>
+
+  <!-- CTA -->
+  <section class="border-t border-gray-800 px-6 py-16">
+    <div class="mx-auto max-w-4xl text-center">
+      <h2 class="mb-4 text-2xl font-bold text-white">准备好开始了吗？</h2>
+      <p class="mb-8 text-gray-400">
+        按照快速开始指南，几分钟内搭建你的 AI 编程助手。
+      </p>
+      <div class="flex flex-wrap items-center justify-center gap-4">
+        <a
+          href="/docs/quickstart"
+          class="inline-flex items-center gap-2 rounded-xl bg-gradient-to-r from-primary-500 to-cyan-500 px-8 py-3.5 font-medium text-white shadow-lg shadow-primary-500/25 transition hover:shadow-xl hover:shadow-primary-500/30"
+        >
+          快速开始
+          <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
+          </svg>
+        </a>
+        <a
+          href="/docs"
+          class="inline-flex items-center gap-2 rounded-xl border border-gray-700 bg-gray-800/50 px-8 py-3.5 font-medium text-gray-300 transition hover:border-gray-600 hover:bg-gray-800 hover:text-white"
+        >
+          查看文档
+        </a>
+      </div>
+    </div>
+  </section>
+
+  <!-- Footer -->
+  <footer class="border-t border-gray-800 px-6 py-12">
+    <div class="mx-auto max-w-6xl">
+      <div class="flex flex-col items-center justify-between gap-6 sm:flex-row">
+        <div class="flex items-center gap-2 text-gray-400">
+          <span class="flex h-6 w-6 items-center justify-center rounded bg-gradient-to-br from-primary-400 to-cyan-400">
+            <svg class="h-4 w-4 text-gray-950" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+            </svg>
+          </span>
+          <span class="text-sm">AI Terminal Assistant</span>
+        </div>
+        <div class="flex items-center gap-6">
+          <a href="/docs" class="text-sm text-gray-500 transition hover:text-gray-300">文档</a>
+          <a href="/examples" class="text-sm text-gray-500 transition hover:text-gray-300">示例</a>
+          <a href="https://github.com" target="_blank" rel="noopener noreferrer" class="text-sm text-gray-500 transition hover:text-gray-300">GitHub</a>
+        </div>
+        <p class="text-sm text-gray-600">
+          Built with Claude API
+        </p>
+      </div>
+    </div>
+  </footer>
+</Layout>
diff --git a/packages/website/src/pages/index.astro b/packages/website/src/pages/index.astro
index de2aa0d..29e3459 100644
--- a/packages/website/src/pages/index.astro
+++ b/packages/website/src/pages/index.astro
@@ -81,7 +81,25 @@ const stats = [
       <div class="hidden items-center gap-6 md:flex">
         <a href="#features" class="text-sm text-gray-400 transition hover:text-white">功能</a>
         <a href="#quickstart" class="text-sm text-gray-400 transition hover:text-white">快速开始</a>
-        <a href="/docs" class="text-sm text-gray-400 transition hover:text-white">文档</a>
+        <!-- 文档下拉菜单 -->
+        <div class="group relative">
+          <button class="flex items-center gap-1 text-sm text-gray-400 transition hover:text-white">
+            文档
+            <svg class="h-4 w-4 transition group-hover:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+            </svg>
+          </button>
+          <div class="invisible absolute left-0 top-full z-50 w-48 pt-2 opacity-0 transition-all group-hover:visible group-hover:opacity-100">
+            <div class="rounded-xl border border-gray-800 bg-gray-900 py-2 shadow-xl">
+              <a href="/docs" class="block px-4 py-2 text-sm text-gray-400 transition hover:bg-gray-800 hover:text-white">入门指南</a>
+              <a href="/docs/core/agent" class="block px-4 py-2 text-sm text-gray-400 transition hover:bg-gray-800 hover:text-white">核心功能</a>
+              <a href="/docs/api/rest" class="block px-4 py-2 text-sm text-gray-400 transition hover:bg-gray-800 hover:text-white">API 参考</a>
+              <a href="/docs/deploy/local" class="block px-4 py-2 text-sm text-gray-400 transition hover:bg-gray-800 hover:text-white">部署指南</a>
+              <a href="/docs/extend/custom-tools" class="block px-4 py-2 text-sm text-gray-400 transition hover:bg-gray-800 hover:text-white">扩展开发</a>
+            </div>
+          </div>
+        </div>
+        <a href="/examples" class="text-sm text-gray-400 transition hover:text-white">示例</a>
         <a
           href="https://github.com"
           target="_blank"
@@ -106,7 +124,17 @@ const stats = [
       <div class="flex flex-col gap-4">
         <a href="#features" class="text-sm text-gray-400 transition hover:text-white">功能</a>
         <a href="#quickstart" class="text-sm text-gray-400 transition hover:text-white">快速开始</a>
-        <a href="/docs" class="text-sm text-gray-400 transition hover:text-white">文档</a>
+        <div class="border-t border-gray-800 pt-4">
+          <div class="mb-2 text-xs font-medium uppercase tracking-wider text-gray-500">文档</div>
+          <div class="flex flex-col gap-2 pl-2">
+            <a href="/docs" class="text-sm text-gray-400 transition hover:text-white">入门指南</a>
+            <a href="/docs/core/agent" class="text-sm text-gray-400 transition hover:text-white">核心功能</a>
+            <a href="/docs/api/rest" class="text-sm text-gray-400 transition hover:text-white">API 参考</a>
+            <a href="/docs/deploy/local" class="text-sm text-gray-400 transition hover:text-white">部署指南</a>
+            <a href="/docs/extend/custom-tools" class="text-sm text-gray-400 transition hover:text-white">扩展开发</a>
+          </div>
+        </div>
+        <a href="/examples" class="text-sm text-gray-400 transition hover:text-white">示例</a>
         <a href="https://github.com" target="_blank" rel="noopener noreferrer" class="text-sm text-gray-400 transition hover:text-white">GitHub</a>
       </div>
     </div>