shalu-agent-workflow/apps/web/src/views/Docs.vue

<template>
	<div class="docs-container">
		<aside class="sidebar">
			<div class="sidebar-header">
				<h2>文档导航</h2>
			</div>
			<nav class="nav-menu">
				<div class="nav-section">
					<h3>快速开始</h3>
					<ul>
						<li :class="{ active: activeDoc === 'intro' }" @click="activeDoc = 'intro'">
							介绍
						</li>
						<li
							:class="{ active: activeDoc === 'installation' }"
							@click="activeDoc = 'installation'"
						>
							安装部署
						</li>
					</ul>
				</div>
				<div class="nav-section">
					<h3>核心概念</h3>
					<ul>
						<li :class="{ active: activeDoc === 'workflow' }" @click="activeDoc = 'workflow'">
							工作流
						</li>
						<li :class="{ active: activeDoc === 'nodes' }" @click="activeDoc = 'nodes'">节点</li>
						<li
							:class="{ active: activeDoc === 'credentials' }"
							@click="activeDoc = 'credentials'"
						>
							凭证管理
						</li>
					</ul>
				</div>
				<div class="nav-section">
					<h3>节点文档</h3>
					<ul>
						<li :class="{ active: activeDoc === 'http' }" @click="activeDoc = 'http'">
							HTTP 节点
						</li>
						<li :class="{ active: activeDoc === 'code' }" @click="activeDoc = 'code'">
							代码节点
						</li>
						<li :class="{ active: activeDoc === 'database' }" @click="activeDoc = 'database'">
							数据库节点
						</li>
					</ul>
				</div>
			</nav>
		</aside>

		<main class="docs-content">
			<article class="doc-article">
				<h1>{{ docTitle }}</h1>
				<div class="doc-body">
					<p class="lead">{{ docDescription }}</p>

					<section class="doc-section">
						<h2>概述</h2>
						<p>
							AI Agent 是一个强大的自动化工作流平台，允许你创建复杂的自动化流程。通过可视化的工作流编辑器，你可以轻松添加各种节点类型，连接各种服务和应用，实现数据的自动化处理和传输。
						</p>
					</section>

					<section class="doc-section">
						<h2>主要特性</h2>
						<ul class="feature-list">
							<li>
								<strong>可视化编辑器</strong> - 直观的工作流设计器，支持开始、结束、HTTP请求、条件分支、代码执行、数据查询等多种节点
							</li>
							<li>
								<strong>丰富的节点库</strong> - 支持 HTTP、数据库、代码执行等多种节点类型
							</li>
							<li>
								<strong>实时调试</strong> - 支持单步执行和断点调试
							</li>
							<li>
								<strong>数据转换</strong> - 强大的数据映射和转换能力
							</li>
						</ul>
					</section>

					<section class="doc-section">
						<h2>快速示例</h2>
						<div class="code-block">
							<pre><code>// 在代码节点中处理数据
const data = $input.all();

const result = data.map(item => ({
  id: item.json.id,
  name: item.json.name.toUpperCase(),
  timestamp: new Date().toISOString()
}));

return result;</code></pre>
						</div>
					</section>

					<section class="doc-section">
						<h2>下一步</h2>
						<div class="next-steps">
							<a href="#" class="step-link">
								<SvgIcon name="video" />
								<span>观看教程视频</span>
							</a>
							<a href="#" class="step-link">
								<SvgIcon name="box" />
								<span>浏览示例模板</span>
							</a>
						</div>
					</section>
				</div>
			</article>
		</main>
	</div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

const activeDoc = ref('intro')

const docTitle = computed(() => {
	const titles: Record<string, string> = {
		intro: 'AI Agent 介绍',
		installation: '安装与部署',
		workflow: '工作流概念',
		nodes: '节点系统',
		credentials: '凭证管理',
		http: 'HTTP 节点',
		code: '代码节点',
		database: '数据库节点'
	}
	return titles[activeDoc.value] || 'AI Agent 文档'
})

const docDescription = computed(() => {
	const descriptions: Record<string, string> = {
		intro: '了解 AI Agent 的核心概念和基本使用方法',
		installation: '学习如何在你的环境中安装和配置 AI Agent',
		workflow: '深入理解工作流的设计模式和最佳实践',
		nodes: '掌握节点系统的工作原理和使用技巧',
		credentials: '安全地管理和使用第三方服务凭证',
		http: '使用 HTTP 节点与 REST API 进行交互',
		code: '编写自定义代码处理复杂的业务逻辑',
		database: '连接和操作各种数据库系统'
	}
	return descriptions[activeDoc.value] || ''
})
</script>

<style lang="less" scoped>
.docs-container {
	display: flex;
	height: calc(100vh - 32px);
	background: #f8f9fa;

	.sidebar {
		width: 280px;
		background: #fff;
		border-right: 1px solid #e5e7eb;
		overflow-y: auto;
		flex-shrink: 0;

		.sidebar-header {
			padding: 0px 20px;
			border-bottom: 1px solid #e5e7eb;

			h2 {
				font-size: 18px;
				font-weight: 600;
				color: #333;
			}
		}

		.nav-menu {
			padding: 16px 0;

			.nav-section {
				margin-bottom: 24px;

				h3 {
					padding: 8px 20px;
					font-size: 12px;
					font-weight: 600;
					color: #999;
					text-transform: uppercase;
					letter-spacing: 0.5px;
				}

				ul {
					list-style: none;
					padding: 0;
					margin: 0;

					li {
						padding: 8px 20px 8px 32px;
						font-size: 14px;
						color: #666;
						cursor: pointer;
						transition: all 0.2s;

						&:hover {
							background: #f8f9fa;
							color: #333;
						}

						&.active {
							color: #667eea;
							background: #f0f3ff;
							border-right: 3px solid #667eea;
							font-weight: 500;
						}
					}
				}
			}
		}
	}

	.docs-content {
		flex: 1;
		overflow-y: auto;
		padding: 40px;

		.doc-article {
			max-width: 900px;
			margin: 0 auto;
			background: #fff;
			border-radius: 12px;
			padding: 48px;
			box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);

			h1 {
				font-size: 36px;
				font-weight: 700;
				color: #333;
				margin-bottom: 16px;
			}

			.doc-body {
				.lead {
					font-size: 18px;
					color: #666;
					margin-bottom: 32px;
					line-height: 1.6;
				}

				.doc-section {
					margin-bottom: 40px;

					h2 {
						font-size: 24px;
						font-weight: 600;
						color: #333;
						margin-bottom: 16px;
						padding-bottom: 8px;
						border-bottom: 2px solid #f0f0f0;
					}

					p {
						font-size: 15px;
						color: #666;
						line-height: 1.8;
						margin-bottom: 16px;
					}

					.feature-list {
						list-style: none;
						padding: 0;

						li {
							padding: 12px 0;
							padding-left: 28px;
							position: relative;
							color: #666;
							line-height: 1.6;

							&:before {
								content: '✓';
								position: absolute;
								left: 0;
								color: #667eea;
								font-weight: 700;
							}

							strong {
								color: #333;
							}
						}
					}

					.code-block {
						background: #282c34;
						border-radius: 8px;
						padding: 20px;
						overflow-x: auto;
						margin: 16px 0;

						pre {
							margin: 0;

							code {
								color: #abb2bf;
								font-family: 'Courier New', monospace;
								font-size: 14px;
								line-height: 1.6;
							}
						}
					}

					.next-steps {
						display: flex;
						gap: 16px;
						margin-top: 24px;

						.step-link {
							flex: 1;
							display: flex;
							align-items: center;
							gap: 12px;
							padding: 16px 20px;
							background: #f8f9fa;
							border: 1px solid #e5e7eb;
							border-radius: 8px;
							text-decoration: none;
							color: #333;
							transition: all 0.3s;

							&:hover {
								background: #fff;
								border-color: #667eea;
								box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
							}

							svg {
								font-size: 24px;
								color: #667eea;
							}

							span {
								font-size: 14px;
								font-weight: 500;
							}
						}
					}
				}
			}
		}
	}
}
</style>