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

<template>
	<div class="quick-start-container">
		<div class="header">
			<h1>快速入门</h1>
			<p class="subtitle">欢迎使用 AI Agent，让我们开始你的第一个工作流</p>
		</div>

		<div class="content">
			<div class="video-section">
				<div class="video-placeholder">
					<SvgIcon name="video" class="video-icon" size="60" />
					<p>教学视频</p>
				</div>
			</div>

			<div class="steps-section">
				<h2>开始步骤</h2>
				<div class="steps">
					<div class="step-card">
						<div class="step-number">1</div>
						<div class="step-content">
							<h3>创建工作流</h3>
							<p>点击左侧菜单的 "+" 按钮，选择"工作流程"创建你的第一个工作流</p>
						</div>
					</div>
					<div class="step-card">
						<div class="step-number">2</div>
						<div class="step-content">
							<h3>添加节点</h3>
							<p>
								支持多种节点类型 -
								包括开始、结束、HTTP请求、条件分支、代码执行、数据查询等，快速搭建自动化业务逻辑
							</p>
						</div>
					</div>
					<div class="step-card">
						<div class="step-number">3</div>
						<div class="step-content">
							<h3>配置与测试</h3>
							<p>配置节点参数，测试运行，确保工作流按预期执行</p>
						</div>
					</div>
					<div class="step-card">
						<div class="step-number">4</div>
						<div class="step-content">
							<h3>部署上线</h3>
							<p>保存并激活工作流，让它自动为你工作</p>
						</div>
					</div>
				</div>
			</div>

			<div class="resources-section">
				<h2>更多资源</h2>
				<div class="resource-cards">
					<div class="resource-card" @click="$router.push('/docs')">
						<SvgIcon name="book" size="60" />
						<h3>查看文档</h3>
						<p>深入了解所有功能特性</p>
					</div>
					<div class="resource-card" @click="$router.push('/templates/1')">
						<SvgIcon name="box" size="60" />
						<h3>浏览模板</h3>
						<p>使用预设模板快速开始</p>
					</div>
					<div class="resource-card">
						<SvgIcon name="help" size="60" />
						<h3>获取帮助</h3>
						<p>遇到问题？联系我们</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts"></script>

<style lang="less" scoped>
.quick-start-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 40px 20px;

	.header {
		text-align: center;
		margin-bottom: 60px;

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

		.subtitle {
			font-size: 16px;
			color: #666;
		}
	}

	.content {
		.video-section {
			margin-bottom: 60px;

			.video-placeholder {
				width: 100%;
				max-width: 800px;
				margin: 0 auto;
				aspect-ratio: 16/9;
				background: linear-gradient(135deg, var(--el-color-primary) 0%, #764ba2 100%);
				border-radius: 12px;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				color: #fff;

				.video-icon {
					font-size: 64px;
					margin-bottom: 16px;
				}

				p {
					font-size: 18px;
					font-weight: 500;
				}
			}
		}

		.steps-section {
			margin-bottom: 60px;

			h2 {
				font-size: 28px;
				font-weight: 600;
				color: #333;
				margin-bottom: 32px;
			}

			.steps {
				display: grid;
				grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
				gap: 24px;

				.step-card {
					background: #fff;
					border: 1px solid #f0f0f0;
					border-radius: 12px;
					padding: 24px;
					display: flex;
					gap: 16px;
					transition: all 0.3s ease;

					&:hover {
						box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
						transform: translateY(-2px);
					}

					.step-number {
						width: 40px;
						height: 40px;
						background: linear-gradient(135deg, var(--el-color-primary) 0%, #764ba2 100%);
						color: #fff;
						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 20px;
						font-weight: 700;
						flex-shrink: 0;
					}

					.step-content {
						h3 {
							font-size: 18px;
							font-weight: 600;
							color: #333;
							margin-bottom: 8px;
						}

						p {
							font-size: 14px;
							color: #666;
							line-height: 1.6;
						}
					}
				}
			}
		}

		.resources-section {
			h2 {
				font-size: 28px;
				font-weight: 600;
				color: #333;
				margin-bottom: 32px;
			}

			.resource-cards {
				display: grid;
				grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
				gap: 24px;

				.resource-card {
					background: #fff;
					border: 1px solid #f0f0f0;
					border-radius: 12px;
					padding: 32px;
					text-align: center;
					cursor: pointer;
					transition: all 0.3s ease;

					&:hover {
						border-color: var(--el-color-primary);
						box-shadow: 0 4px 12px var(--el-color-primary-light-7);
						transform: translateY(-4px);
					}

					svg {
						font-size: 48px;
						color: var(--el-color-primary);
					}

					h3 {
						font-size: 18px;
						font-weight: 600;
						color: #333;
						margin-bottom: 8px;
					}

					p {
						font-size: 14px;
						color: #666;
					}
				}
			}
		}
	}
}
</style>