feat(website): 扩展 Header 导航并添加示例页面
- 首页和文档页添加文档下拉菜单，快速访问各文档分类 - 新增"示例"导航链接 - 创建 examples.astro 示例页面，展示 6 种使用场景 - 移动端菜单同步更新
This commit is contained in:
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user