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

- 新增 DocsSidebar 文档导航侧边栏组件
- 新增 DocsLayout 文档页面布局模板
- 首页导航添加文档入口链接
- 根目录 package.json 添加各包快捷脚本
This commit is contained in:
2025-12-12 23:09:41 +08:00
parent 2f9db8d7d8
commit 87620a1141
4 changed files with 243 additions and 1 deletions
+27 -1
View File
@@ -11,11 +11,37 @@
"test:coverage": "pnpm -r test:coverage", "test:coverage": "pnpm -r test:coverage",
"lint": "pnpm -r lint", "lint": "pnpm -r lint",
"clean": "pnpm -r exec rm -rf dist node_modules", "clean": "pnpm -r exec rm -rf dist node_modules",
"typecheck": "pnpm -r typecheck",
"core:build": "pnpm --filter @ai-assistant/core build",
"core:dev": "pnpm --filter @ai-assistant/core dev",
"core:test": "pnpm --filter @ai-assistant/core test",
"core:test:watch": "pnpm --filter @ai-assistant/core test:watch",
"server:build": "pnpm --filter @ai-assistant/server build",
"server:start": "pnpm --filter @ai-assistant/server start", "server:start": "pnpm --filter @ai-assistant/server start",
"server:dev": "pnpm --filter @ai-assistant/server start:dev", "server:dev": "pnpm --filter @ai-assistant/server start:dev",
"server:test": "pnpm --filter @ai-assistant/server test",
"cli:build": "pnpm --filter @ai-assistant/cli build",
"cli:dev": "pnpm --filter @ai-assistant/cli dev",
"cli:serve": "pnpm --filter @ai-assistant/cli serve",
"web:build": "pnpm --filter @ai-assistant/web build",
"web:dev": "pnpm --filter @ai-assistant/web dev", "web:dev": "pnpm --filter @ai-assistant/web dev",
"web:preview": "pnpm --filter @ai-assistant/web preview",
"web:typecheck": "pnpm --filter @ai-assistant/web typecheck",
"ui:build": "pnpm --filter @ai-assistant/ui build",
"ui:dev": "pnpm --filter @ai-assistant/ui dev",
"desktop:build": "pnpm --filter @ai-assistant/desktop build",
"desktop:dev": "pnpm --filter @ai-assistant/desktop dev", "desktop:dev": "pnpm --filter @ai-assistant/desktop dev",
"desktop:build": "pnpm --filter @ai-assistant/desktop build" "desktop:build:debug": "pnpm --filter @ai-assistant/desktop build:debug",
"website:build": "pnpm --filter @ai-assistant/website build",
"website:dev": "pnpm --filter @ai-assistant/website dev",
"website:preview": "pnpm --filter @ai-assistant/website preview"
}, },
"keywords": [ "keywords": [
"ai", "ai",
@@ -0,0 +1,73 @@
---
interface Props {
currentPath: string;
}
const { currentPath } = Astro.props;
const navigation = [
{
title: '开始',
items: [
{ title: '概览', href: '/docs' },
],
},
{
title: '架构设计',
items: [
{ title: 'GUI Server/Client 架构', href: '/docs/architecture' },
],
},
{
title: '功能设计',
items: [
{ title: '编辑模式', href: '/docs/features/edit-modes' },
{ title: '增强型仓库地图', href: '/docs/features/repo-map' },
{ title: '多模型支持', href: '/docs/features/multi-model' },
{ title: 'Linting 集成', href: '/docs/features/linting' },
{ title: '测试集成', href: '/docs/features/testing' },
{ title: '对话历史管理', href: '/docs/features/chat-history' },
{ title: 'Watch 模式', href: '/docs/features/watch-mode' },
{ title: '语音输入', href: '/docs/features/voice-input' },
{ title: '浏览器 GUI', href: '/docs/features/browser-gui' },
{ title: '配置管理', href: '/docs/features/configuration' },
{ title: 'Checkpoint 增强', href: '/docs/features/checkpoint' },
],
},
];
function isActive(href: string): boolean {
// 精确匹配或以 href 开头(用于子路径)
if (currentPath === href || currentPath === href + '/') {
return true;
}
return false;
}
---
<nav class="space-y-6">
{navigation.map((section) => (
<div>
<h3 class="mb-3 text-xs font-semibold uppercase tracking-wider text-gray-500">
{section.title}
</h3>
<ul class="space-y-1">
{section.items.map((item) => (
<li>
<a
href={item.href}
class:list={[
'block rounded-lg px-3 py-2 text-sm transition',
isActive(item.href)
? 'bg-primary-500/10 text-primary-400 font-medium'
: 'text-gray-400 hover:bg-gray-800 hover:text-white',
]}
>
{item.title}
</a>
</li>
))}
</ul>
</div>
))}
</nav>
@@ -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>
+1
View File
@@ -45,6 +45,7 @@ const features = [
<div class="flex items-center gap-6"> <div class="flex items-center gap-6">
<a href="#features" class="text-sm text-gray-400 transition hover:text-white">功能</a> <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="#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 <a
href="https://github.com" href="https://github.com"
target="_blank" target="_blank"