kurihada/ai-terminal-assistant
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(website): 优化布局模板和首页样式

Browse Source 
- Layout: 添加完整 SEO meta 标签 (Open Graph, Twitter Cards)
- Layout: 添加主题色、PWA 支持和 canonical URL
- DocsLayout: 增强响应式设计，添加移动端侧边栏
- DocsLayout: 改进导航样式和页面底部导航
- index: 功能卡片添加渐变效果和统计数据展示
- index: 改进导航栏和整体响应式布局
This commit is contained in:
kurihada
2025-12-17 23:50:53 +08:00
parent 00680b8ed3
commit 1119afae5b
3 changed files with 440 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/website/src/layouts/DocsLayout.astro
+97 -13
View File
@@ -8,47 +8,131 @@ interface Props {
const { title, description } = Astro.props;
const currentPath = Astro.url.pathname;
const fullDescription = description || 'AI Terminal Assistant 文档';
const canonicalURL = Astro.site ? new URL(Astro.url.pathname, Astro.site) : Astro.url;
---
<!doctype html>
<html lang="zh-CN">
<html lang="zh-CN" class="scroll-smooth">
<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" />
<!-- Primary Meta Tags -->
<title>{title} - AI Terminal Assistant</title>
<meta name="title" content={`${title} - AI Terminal Assistant`} />
<meta name="description" content={fullDescription} />
<meta name="keywords" content="AI, Terminal, Assistant, 文档, 教程, 编程助手" />
<link rel="canonical" href={canonicalURL} />
<!-- Open Graph -->
<meta property="og:type" content="article" />
<meta property="og:url" content={canonicalURL} />
<meta property="og:title" content={`${title} - AI Terminal Assistant`} />
<meta property="og:description" content={fullDescription} />
<!-- Favicon -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<!-- Theme Color -->
<meta name="theme-color" content="#030712" />
<meta name="color-scheme" content="dark" />
</head>
<body class="bg-gray-950 text-gray-100 antialiased">
<body class="min-h-screen 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
<div class="mx-auto flex max-w-7xl items-center justify-between px-4 py-4 sm:px-6">
<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 class="hidden sm:inline"><span class="text-primary-400">AI</span> Terminal</span>
</a>
<div class="flex items-center gap-6">
<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 text-white">文档</a>
<a href="/docs" class="text-sm font-medium 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">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</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">
<!-- Sidebar - Desktop -->
<aside class="fixed left-0 top-16 bottom-0 hidden w-64 overflow-y-auto border-r border-gray-800 bg-gray-950 p-6 lg:block">
<DocsSidebar currentPath={currentPath} />
</aside>
<!-- Sidebar - Mobile (overlay) -->
<div id="mobile-sidebar-overlay" class="fixed inset-0 z-40 hidden bg-gray-950/80 backdrop-blur-sm lg:hidden">
<aside id="mobile-sidebar" class="fixed left-0 top-16 bottom-0 w-72 -translate-x-full overflow-y-auto border-r border-gray-800 bg-gray-950 p-6 transition-transform duration-300 ease-in-out">
<DocsSidebar currentPath={currentPath} />
</aside>
</div>
<!-- Content -->
<main class="ml-64 flex-1 min-h-screen">
<div class="mx-auto max-w-4xl px-8 py-12">
<main class="min-h-screen flex-1 lg:ml-64">
<div class="mx-auto max-w-4xl px-4 py-8 sm:px-8 sm:py-12">
<article class="prose prose-invert prose-gray max-w-none">
<slot />
</article>
<!-- Page navigation -->
<nav class="mt-12 flex items-center justify-between border-t border-gray-800 pt-6">
<a href="/docs" class="group flex items-center gap-2 text-sm text-gray-400 transition hover:text-white">
<svg class="h-4 w-4 transition group-hover:-translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16l-4-4m0 0l4-4m-4 4h18" />
</svg>
<span>返回文档</span>
</a>
<a href="#" class="text-sm text-gray-500 transition hover:text-gray-300">
回到顶部
</a>
</nav>
</div>
</main>
</div>
<script>
// Mobile sidebar toggle
const sidebarToggle = document.getElementById('sidebar-toggle');
const mobileSidebarOverlay = document.getElementById('mobile-sidebar-overlay');
const mobileSidebar = document.getElementById('mobile-sidebar');
function openSidebar() {
mobileSidebarOverlay?.classList.remove('hidden');
setTimeout(() => {
mobileSidebar?.classList.remove('-translate-x-full');
}, 10);
}
function closeSidebar() {
mobileSidebar?.classList.add('-translate-x-full');
setTimeout(() => {
mobileSidebarOverlay?.classList.add('hidden');
}, 300);
}
sidebarToggle?.addEventListener('click', openSidebar);
mobileSidebarOverlay?.addEventListener('click', (e) => {
if (e.target === mobileSidebarOverlay) {
closeSidebar();
}
});
// Close sidebar when clicking a link
mobileSidebar?.querySelectorAll('a').forEach(link => {
link.addEventListener('click', closeSidebar);
});
</script>
</body>
</html>
packages/website/src/layouts/Layout.astro
+46 -5
View File
@@ -1,21 +1,62 @@
---
interface Props {
title: string;
description?: string;
image?: string;
}
const { title } = Astro.props;
const {
title,
description = 'AI Terminal Assistant - 功能完整的终端 AI 编程助手。内置 23+ 工具、Shadow Git 检查点、MCP 扩展、多模型支持。',
image = '/og-image.png'
} = Astro.props;
const canonicalURL = Astro.site ? new URL(Astro.url.pathname, Astro.site) : Astro.url;
---
<!doctype html>
<html lang="zh-CN">
<html lang="zh-CN" class="scroll-smooth">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="AI Terminal Assistant - 终端 AI 编程助手" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<!-- Primary Meta Tags -->
<title>{title}</title>
<meta name="title" content={title} />
<meta name="description" content={description} />
<meta name="keywords" content="AI, Terminal, Assistant, Claude, 编程助手, 代码助手, AI编程, MCP, LLM, 开发工具" />
<meta name="author" content="AI Terminal Assistant" />
<link rel="canonical" href={canonicalURL} />
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content={canonicalURL} />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={image} />
<meta property="og:locale" content="zh_CN" />
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content={canonicalURL} />
<meta property="twitter:title" content={title} />
<meta property="twitter:description" content={description} />
<meta property="twitter:image" content={image} />
<!-- Favicon -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<!-- Theme Color -->
<meta name="theme-color" content="#030712" />
<meta name="color-scheme" content="dark" />
<!-- Mobile Web App -->
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
</head>
<body class="bg-gray-950 text-gray-100 antialiased">
<body class="min-h-screen bg-gray-950 text-gray-100 antialiased">
<slot />
</body>
</html>
packages/website/src/pages/index.astro
+297 -30
View File
@@ -6,99 +6,171 @@ const features = [
icon: '⚡',
title: '流式对话',
description: '基于 AI SDK 的实时流式响应，支持多种 LLM 提供商（Claude、OpenAI 等）。',
gradient: 'from-yellow-500 to-orange-500',
},
{
icon: '🛠️',
title: '23+ 内置工具',
description: '完整的工具系统：文件操作、Bash 执行、Git 管理、代码搜索、Web 搜索等。',
gradient: 'from-blue-500 to-cyan-500',
},
{
icon: '📝',
title: '智能编辑',
description: '三种编辑模式（Whole、Search-Replace、Diff）+ 统一编辑接口，准确修改代码。',
gradient: 'from-green-500 to-emerald-500',
},
{
icon: '💾',
title: 'Checkpoint 系统',
description: 'Shadow Git 架构 + 7点安全检查，支持检查点创建、恢复、撤销恢复。',
gradient: 'from-purple-500 to-violet-500',
},
{
icon: '🔌',
title: 'MCP 集成',
description: '完整的 Model Context Protocol 支持，通过外部工具扩展 AI 能力。',
gradient: 'from-pink-500 to-rose-500',
},
{
icon: '🎯',
title: 'Agent 系统',
description: '可配置的 Agent 预设（General、Plan、CodeReviewer），支持自定义 Agent。',
gradient: 'from-red-500 to-orange-500',
},
{
icon: '📦',
title: '会话管理',
description: '三层存储架构（Message → Part → Storage），自动保存、消息压缩、上下文管理。',
gradient: 'from-indigo-500 to-blue-500',
},
{
icon: '🔍',
title: 'LSP 集成',
description: '语言服务器协议支持，提供代码诊断、多语言识别等智能编程能力。',
gradient: 'from-teal-500 to-cyan-500',
},
{
icon: '⚙️',
title: 'Hooks 系统',
description: '工具执行前后的 Hook 机制，支持自定义扩展和流程控制。',
gradient: 'from-amber-500 to-yellow-500',
},
];
const stats = [
{ value: '23+', label: '内置工具' },
{ value: '3', label: '编辑模式' },
{ value: '7', label: '安全检查' },
{ value: '∞', label: '扩展能力' },
];
---
<Layout title="AI Terminal Assistant - 终端 AI 编程助手">
<!-- 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="text-xl font-bold text-white">
<span class="text-primary-400">AI</span> Terminal Assistant
<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="flex items-center gap-6">
<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>
<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>
<!-- Mobile menu button -->
<button id="mobile-menu-btn" class="flex items-center justify-center rounded-lg p-2 text-gray-400 hover:bg-gray-800 hover:text-white md:hidden">
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
<!-- Mobile menu -->
<div id="mobile-menu" class="hidden border-t border-gray-800 bg-gray-950 px-6 py-4 md:hidden">
<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>
<a href="https://github.com" target="_blank" rel="noopener noreferrer" class="text-sm text-gray-400 transition hover:text-white">GitHub</a>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="relative flex min-h-screen items-center justify-center overflow-hidden px-6 pt-20">
<!-- Background gradient -->
<!-- Background effects -->
<div class="absolute inset-0 bg-gradient-to-b from-primary-900/20 via-transparent to-transparent"></div>
<div class="absolute top-1/4 left-1/2 h-96 w-96 -translate-x-1/2 rounded-full bg-primary-500/10 blur-3xl"></div>
<div class="absolute top-1/3 right-1/4 h-64 w-64 rounded-full bg-cyan-500/10 blur-3xl"></div>
<!-- Grid pattern -->
<div class="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.02)_1px,transparent_1px)] bg-[size:64px_64px]"></div>
<div class="relative z-10 mx-auto max-w-4xl text-center">
<h1 class="mb-6 text-5xl font-bold leading-tight text-white md:text-6xl">
<!-- Badge -->
<div class="mb-6 inline-flex items-center gap-2 rounded-full border border-primary-500/30 bg-primary-500/10 px-4 py-2 text-sm text-primary-300">
<span class="relative flex h-2 w-2">
<span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-primary-400 opacity-75"></span>
<span class="relative inline-flex h-2 w-2 rounded-full bg-primary-500"></span>
</span>
开源 · 功能完整 · 安全可控
</div>
<h1 class="mb-6 text-4xl font-bold leading-tight text-white sm:text-5xl md:text-6xl">
终端中的
<span class="bg-gradient-to-r from-primary-400 to-cyan-400 bg-clip-text text-transparent">
<span class="bg-gradient-to-r from-primary-400 via-cyan-400 to-primary-400 bg-clip-text text-transparent">
AI 编程助手
</span>
</h1>
<p class="mx-auto mb-10 max-w-2xl text-lg text-gray-400">
<p class="mx-auto mb-8 max-w-2xl text-base text-gray-400 sm:text-lg">
功能完整的终端 AI 编程助手。内置 23+ 工具、Shadow Git 检查点、MCP 扩展、
多模型支持，让 AI 安全高效地参与编程工作。
</p>
<!-- Stats -->
<div class="mb-10 flex flex-wrap items-center justify-center gap-6 sm:gap-10">
{stats.map((stat) => (
<div class="text-center">
<div class="text-2xl font-bold text-white sm:text-3xl">{stat.value}</div>
<div class="text-xs text-gray-500 sm:text-sm">{stat.label}</div>
</div>
))}
</div>
<!-- Terminal Demo -->
<div class="mx-auto mb-10 max-w-2xl overflow-hidden rounded-xl border border-gray-800 bg-gray-900 shadow-2xl">
<div class="mx-auto mb-10 max-w-2xl overflow-hidden rounded-xl border border-gray-800 bg-gray-900/80 shadow-2xl shadow-primary-500/5 backdrop-blur-sm">
<div class="flex items-center gap-2 border-b border-gray-800 bg-gray-900 px-4 py-3">
<div class="h-3 w-3 rounded-full bg-red-500"></div>
<div class="h-3 w-3 rounded-full bg-yellow-500"></div>
<div class="h-3 w-3 rounded-full bg-green-500"></div>
<span class="ml-2 text-sm text-gray-500">terminal</span>
<span class="ml-2 text-sm text-gray-500">AI Terminal Assistant</span>
</div>
<div class="p-6 text-left font-mono text-sm">
<div class="p-4 text-left font-mono text-xs sm:p-6 sm:text-sm">
<p class="text-gray-500">$ ai-assistant serve --port 3000</p>
<p class="mt-2 text-green-400">✓ Server started on http://localhost:3000</p>
<p class="mt-4 text-gray-500">$ ai-assistant attach</p>
<p class="mt-2 text-primary-400">AI Assistant ready. How can I help?</p>
<p class="mt-4 text-white">
<span class="text-gray-500">&gt;</span> 帮我找出这个项目中所有的 TODO 注释
<span class="text-gray-500">&gt;</span> 帮我重构 src/utils/api.ts，添加错误处理
</p>
<p class="mt-2 text-gray-300">正在搜索代码库中的 TODO 注释...</p>
<p class="mt-2 text-gray-300">分析文件结构中...</p>
<p class="text-gray-300">已创建 checkpoint: <span class="text-cyan-400">pre-refactor-api</span></p>
<p class="text-gray-300">正在应用 Search-Replace 编辑模式...</p>
<span class="inline-block h-4 w-2 animate-pulse bg-primary-400"></span>
</div>
</div>
@@ -106,30 +178,54 @@ const features = [
<!-- CTA Buttons -->
<div class="flex flex-wrap items-center justify-center gap-4">
<a
href="/docs"
class="rounded-xl bg-primary-500 px-8 py-3 font-medium text-white shadow-lg shadow-primary-500/25 transition hover:bg-primary-600"
href="#quickstart"
class="group relative 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"
>
查看文档
<span>快速开始</span>
<svg class="h-4 w-4 transition group-hover:translate-x-1" 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"
>
<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="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
</svg>
<span>查看文档</span>
</a>
</div>
</div>
</section>
<!-- Features Section -->
<section id="features" class="px-6 py-24">
<div class="mx-auto max-w-6xl">
<h2 class="mb-4 text-center text-3xl font-bold text-white">核心功能</h2>
<p class="mx-auto mb-16 max-w-2xl text-center text-gray-400">
专为开发者设计，让 AI 真正融入你的开发工作流
</p>
<section id="features" class="relative px-6 py-24">
<!-- Background -->
<div class="absolute inset-0 bg-gradient-to-b from-transparent via-gray-900/50 to-transparent"></div>
<div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
<div class="relative mx-auto max-w-6xl">
<div class="mb-16 text-center">
<span class="mb-4 inline-block rounded-full bg-primary-500/10 px-4 py-1.5 text-sm font-medium text-primary-400">
核心功能
</span>
<h2 class="mb-4 text-3xl font-bold text-white sm:text-4xl">强大的工具集</h2>
<p class="mx-auto max-w-2xl text-gray-400">
专为开发者设计，让 AI 真正融入你的开发工作流
</p>
</div>
<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
{
features.map((feature) => (
<div class="group rounded-2xl border border-gray-800 bg-gray-900/50 p-6 transition hover:border-gray-700 hover:bg-gray-900">
<div class="mb-4 text-4xl">{feature.icon}</div>
<h3 class="mb-2 text-lg font-semibold text-white">{feature.title}</h3>
<p class="text-sm leading-relaxed text-gray-400">{feature.description}</p>
<div class="group relative overflow-hidden rounded-2xl border border-gray-800 bg-gray-900/50 p-6 transition-all duration-300 hover:-translate-y-1 hover:border-gray-700 hover:bg-gray-900 hover:shadow-xl hover:shadow-primary-500/5">
<!-- Gradient overlay on hover -->
<div class={`absolute inset-0 bg-gradient-to-br ${feature.gradient} opacity-0 transition-opacity duration-300 group-hover:opacity-5`}></div>
<div class="relative">
<div class="mb-4 text-4xl">{feature.icon}</div>
<h3 class="mb-2 text-lg font-semibold text-white">{feature.title}</h3>
<p class="text-sm leading-relaxed text-gray-400">{feature.description}</p>
</div>
</div>
))
}
@@ -137,12 +233,183 @@ const features = [
</div>
</section>
<!-- Quick Start Section -->
<section id="quickstart" class="px-6 py-24">
<div class="mx-auto max-w-4xl">
<div class="mb-16 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>
<h2 class="mb-4 text-3xl font-bold text-white sm:text-4xl">三步上手</h2>
<p class="mx-auto max-w-2xl text-gray-400">
简单配置，立即开始使用 AI 编程助手
</p>
</div>
<div class="space-y-6">
<!-- Step 1 -->
<div class="group flex gap-4 rounded-2xl border border-gray-800 bg-gray-900/50 p-6 transition hover:border-gray-700 hover:bg-gray-900">
<div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-primary-500 to-cyan-500 text-lg font-bold text-white">
1
</div>
<div class="flex-1">
<h3 class="mb-2 text-lg font-semibold text-white">克隆并安装</h3>
<div class="overflow-x-auto rounded-lg bg-gray-950 p-4 font-mono text-sm">
<code class="text-gray-300">git clone https://github.com/your-repo/ai-terminal-assistant.git</code><br/>
<code class="text-gray-300">cd ai-terminal-assistant && pnpm install</code>
</div>
</div>
</div>
<!-- Step 2 -->
<div class="group flex gap-4 rounded-2xl border border-gray-800 bg-gray-900/50 p-6 transition hover:border-gray-700 hover:bg-gray-900">
<div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-primary-500 to-cyan-500 text-lg font-bold text-white">
2
</div>
<div class="flex-1">
<h3 class="mb-2 text-lg font-semibold text-white">配置 API Key</h3>
<div class="overflow-x-auto rounded-lg bg-gray-950 p-4 font-mono text-sm">
<code class="text-gray-500"># 创建 .env 文件</code><br/>
<code class="text-gray-300">echo "ANTHROPIC_API_KEY=your-api-key" > .env</code>
</div>
</div>
</div>
<!-- Step 3 -->
<div class="group flex gap-4 rounded-2xl border border-gray-800 bg-gray-900/50 p-6 transition hover:border-gray-700 hover:bg-gray-900">
<div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-primary-500 to-cyan-500 text-lg font-bold text-white">
3
</div>
<div class="flex-1">
<h3 class="mb-2 text-lg font-semibold text-white">启动服务</h3>
<div class="overflow-x-auto rounded-lg bg-gray-950 p-4 font-mono text-sm">
<code class="text-gray-500"># 启动服务器</code><br/>
<code class="text-gray-300">pnpm server:dev</code><br/><br/>
<code class="text-gray-500"># 另一个终端，打开 Web UI</code><br/>
<code class="text-gray-300">cd packages/web && pnpm dev</code><br/><br/>
<code class="text-gray-500"># 或使用 CLI</code><br/>
<code class="text-gray-300">pnpm cli attach http://localhost:3000</code>
</div>
</div>
</div>
</div>
<div class="mt-10 text-center">
<a
href="/docs"
class="inline-flex items-center gap-2 text-primary-400 transition hover:text-primary-300"
>
<span>查看详细文档</span>
<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>
</div>
</div>
</section>
<!-- Architecture Overview -->
<section class="px-6 py-24">
<div class="mx-auto max-w-6xl">
<div class="mb-16 text-center">
<span class="mb-4 inline-block rounded-full bg-purple-500/10 px-4 py-1.5 text-sm font-medium text-purple-400">
架构设计
</span>
<h2 class="mb-4 text-3xl font-bold text-white sm:text-4xl">模块化架构</h2>
<p class="mx-auto max-w-2xl text-gray-400">
Monorepo 结构，清晰的模块划分
</p>
</div>
<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
<div class="rounded-xl border border-gray-800 bg-gray-900/50 p-5">
<div class="mb-3 flex items-center gap-2">
<div class="flex h-8 w-8 items-center justify-center rounded-lg bg-blue-500/10">
<svg class="h-4 w-4 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
</svg>
</div>
<h3 class="font-semibold text-white">Core</h3>
</div>
<p class="text-sm text-gray-400">Agent 引擎、工具链、LSP、Checkpoint、MCP</p>
</div>
<div class="rounded-xl border border-gray-800 bg-gray-900/50 p-5">
<div class="mb-3 flex items-center gap-2">
<div class="flex h-8 w-8 items-center justify-center rounded-lg bg-green-500/10">
<svg class="h-4 w-4 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" />
</svg>
</div>
<h3 class="font-semibold text-white">Server</h3>
</div>
<p class="text-sm text-gray-400">Hono HTTP 服务、REST API、WebSocket、SSE</p>
</div>
<div class="rounded-xl border border-gray-800 bg-gray-900/50 p-5">
<div class="mb-3 flex items-center gap-2">
<div class="flex h-8 w-8 items-center justify-center rounded-lg bg-cyan-500/10">
<svg class="h-4 w-4 text-cyan-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
</div>
<h3 class="font-semibold text-white">Web</h3>
</div>
<p class="text-sm text-gray-400">React 前端、Vite 构建、Tailwind CSS</p>
</div>
<div class="rounded-xl border border-gray-800 bg-gray-900/50 p-5">
<div class="mb-3 flex items-center gap-2">
<div class="flex h-8 w-8 items-center justify-center rounded-lg bg-orange-500/10">
<svg class="h-4 w-4 text-orange-400" 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>
</div>
<h3 class="font-semibold text-white">CLI</h3>
</div>
<p class="text-sm text-gray-400">命令行工具、serve/attach 命令</p>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="border-t border-gray-800 px-6 py-12">
<div class="mx-auto max-w-6xl text-center">
<p class="text-sm text-gray-500">
AI Terminal Assistant · Built with Claude API
</p>
<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="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>
<script>
// Mobile menu toggle
const menuBtn = document.getElementById('mobile-menu-btn');
const mobileMenu = document.getElementById('mobile-menu');
menuBtn?.addEventListener('click', () => {
mobileMenu?.classList.toggle('hidden');
});
// Close mobile menu when clicking a link
mobileMenu?.querySelectorAll('a').forEach(link => {
link.addEventListener('click', () => {
mobileMenu?.classList.add('hidden');
});
});
</script>
</Layout>