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

<template>
	<div class="about-container">
		<div class="hero-section">
			<div class="logo-area">
				<div class="logo-circle">
					<span class="logo-text">AI</span>
				</div>
				<h1>AI Agent</h1>
			</div>
			<p class="version">版本 1.0.0</p>
		</div>

		<div class="content-section">
			<div class="info-card">
				<h2>关于我们</h2>
				<p>
					AI Agent
					是一个强大且灵活的自动化工作流平台，帮助团队和个人构建智能化的业务流程。我们致力于让自动化变得简单、高效且易于维护。
				</p>
			</div>

			<div class="features-grid">
				<div class="feature-card">
					<SvgIcon name="zap" class="feature-icon" size="30"/>
					<h3>高性能</h3>
					<p>优化的执行引擎，确保工作流快速可靠运行</p>
				</div>
				<div class="feature-card">
					<SvgIcon name="shield" class="feature-icon" size="30"/>
					<h3>安全可靠</h3>
					<p>企业级安全标准，保护你的数据和凭证</p>
				</div>
				<div class="feature-card">
					<SvgIcon name="users" class="feature-icon" size="30"/>
					<h3>团队协作</h3>
					<p>支持多人协作，共同构建和维护工作流</p>
				</div>
				<div class="feature-card">
					<SvgIcon name="code" class="feature-icon" size="30"/>
					<h3>开放扩展</h3>
					<p>支持自定义节点和集成，满足个性化需求</p>
				</div>
			</div>

			<div class="footer-text">
				<p>&copy; 2026 AI Agent. All rights reserved.</p>
			</div>
		</div>
	</div>
</template>

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

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

	.hero-section {
		text-align: center;
		padding: 60px 0;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		border-radius: 20px;
		margin-bottom: 40px;
		color: #fff;

		.logo-area {
			margin-bottom: 16px;

			.logo-circle {
				width: 120px;
				height: 120px;
				background: rgba(255, 255, 255, 0.2);
				backdrop-filter: blur(10px);
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 0 auto 24px;
				border: 3px solid rgba(255, 255, 255, 0.3);

				.logo-text {
					font-size: 48px;
					font-weight: 900;
					letter-spacing: -2px;
				}
			}

			h1 {
				font-size: 42px;
				font-weight: 700;
				margin: 0;
			}
		}

		.version {
			font-size: 16px;
			opacity: 0.9;
		}
	}

	.content-section {
		.info-card {
			background: #fff;
			border-radius: 12px;
			padding: 32px;
			margin-bottom: 24px;
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

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

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

		.features-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
			gap: 20px;
			margin-bottom: 24px;

			.feature-card {
				background: #fff;
				border-radius: 12px;
				padding: 28px;
				text-align: center;
				box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
				transition: all 0.3s;

				&:hover {
					transform: translateY(-4px);
					box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
				}

				.feature-icon {
					font-size: 40px;
					color: #667eea;
					margin-bottom: 16px;
				}

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

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

		.footer-text {
			text-align: center;
			padding: 20px 0;

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