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

<template>
	<div class="template-detail-page">
		<!-- 顶部栏 -->
		<div class="detail-header">
			<div class="header-left">
				<el-button text @click="goBack" class="back-btn">
					<span style="font-size: 18px; margin-right: 8px"> <SvgIcon name="goback" /> </span>返回
				</el-button>
				<el-divider direction="vertical" />
				<span class="breadcrumb">模板</span>
			</div>
			<div class="template-title">{{ currentTemplate?.title }}</div>
			<el-button type="primary" @click="useTemplate"> 使用此工作流程 </el-button>
		</div>

		<!-- 详情内容 -->
		<div class="detail-content">
			<!-- 流程图占位 -->
			<div class="workflow-diagram">
				<div class="diagram-placeholder">流程图占位</div>
			</div>

			<!-- 下方说明文本 -->
			<div class="detail-description">
				<h3>{{ currentTemplate?.title }}</h3>
				<p>{{ currentTemplate?.description }}</p>
				<p class="detail-text">
					此工作流程通过自动化手段连接电子邮件服务、AI 模型和数据库，帮助您高效管理和处理大量信息。
				</p>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'

interface Template {
	id: string
	title: string
	description: string
	icon: string
}

const router = useRouter()
const route = useRoute()

const currentTemplate = ref<Template | null>(null)

const templates: Record<string, Template> = {
	'1': {
		id: '1',
		title: 'Gmail + GPT-4o-mini',
		description: '使用 Gmail、GPT-4o-mini 和 Notion 自动处理电子邮件分类和摘要',
		icon: '✉️'
	},
	'2': {
		id: '2',
		title: 'Telegram + OpenAI',
		description: '使用 Telegram、OpenAI 和 Google Drive 将聊天内容分类为搜索引擎，并生成 PDF 文件',
		icon: '💬'
	},
	'3': {
		id: '3',
		title: 'Gmail + Memo RAG',
		description: '由 Gmail 和 Memo 提供持有的 RAG 代码的电子邮件分析',
		icon: '📧'
	},
	'4': {
		id: '4',
		title: 'Mistral + OpenRouter',
		description: '使用 Mistral 通过 OpenRouter 与 AI 模型处理工作流',
		icon: '🤖'
	},
	'5': {
		id: '5',
		title: 'RAG 架构',
		description: '基于 Supabase、TogetherAI 和 OpenRouter 的 RAG 架构',
		icon: '🔍'
	},
	'6': {
		id: '6',
		title: 'LINE + Supabase',
		description: '结合 LINE Messaging、Supabase Vector DB 和 Gmail 的 AI 综合应用本表记功能',
		icon: '💌'
	}
}

onMounted(() => {
	const templateId = route.params.id as string
	currentTemplate.value = templates[templateId] || null
})

// 返回上一个路由，保留所有参数
const goBack = () => {
	router.back()
}

// 使用此工作流程，跳转到编辑器
const useTemplate = () => {
	router.push('/workflow/0')
}
</script>

<style lang="less" scoped>
.template-detail-page {
	height: 100%;
	display: flex;
	flex-direction: column;
	background: var(--bg-page);

	.detail-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 24px;
		border-bottom: 1px solid var(--border-light);
		height: 50px;

		.header-left {
			display: flex;
			align-items: center;
			font-size: 14px;
			color: var(--text-secondary);

			.back-btn {
				padding: 0;
				color: var(--el-color-primary);
				font-size: 14px;

				&:hover {
					color: var(--el-color-primary-dark-2);
				}
			}

			:deep(.el-divider--vertical) {
				margin: 0 12px;
				height: 20px;
				background-color: var(--border-light);
			}

			.breadcrumb {
				color: var(--text-secondary);
			}
		}

		.template-title {
			flex: 1;
			text-align: center;
			font-size: 18px;
			font-weight: 600;
			color: var(--text-primary);
			margin: 0 24px;
		}
	}

	.detail-content {
		flex: 1;
		overflow-y: auto;
		padding: 32px 24px;
		display: flex;
		flex-direction: column;
		gap: 32px;

		.workflow-diagram {
			flex: 1;
			min-height: 400px;
			background: var(--bg-container);
			border: 1px solid var(--border-light);
			border-radius: 8px;
			display: flex;
			align-items: center;
			justify-content: center;
			overflow: hidden;

			.diagram-placeholder {
				font-size: 14px;
				color: var(--text-tertiary);
			}
		}

		.detail-description {
			padding: 24px;
			background: var(--bg-container);
			border-radius: 8px;

			h3 {
				font-size: 16px;
				font-weight: 600;
				color: var(--text-primary);
				margin: 0 0 12px 0;
			}

			p {
				font-size: 14px;
				color: var(--text-secondary);
				margin: 0 0 8px 0;
				line-height: 1.6;

				&.detail-text {
					color: var(--text-secondary);
				}
			}
		}
	}
}
</style>