shalu-agent-workflow/apps/web/src/components/SearchDialog/index.vue

<template>
	<div v-if="isOpen" class="search-dialog-overlay" @click.self="closeDialog">
		<div class="search-dialog-container">
			<!-- 搜索框 -->
			<div class="search-header">
				<el-input
					v-model="searchQuery"
					placeholder="输入全部搜索........."
					clearable
					@keydown.escape="closeDialog"
					autofocus
				>
					<template #prefix>
						<el-icon><Search /></el-icon>
					</template>
				</el-input>
			</div>

			<!-- 项目 -->
			<div class="search-section" v-if="!searchQuery">
				<div class="section-title">项目</div>
				<div class="search-items">
					<div
						class="search-item"
						v-for="item in projectItems"
						:key="item.id"
						@click="selectItem(item)"
					>
						<span class="item-icon">{{ item.icon }}</span>
						<span class="item-text">{{ item.text }}</span>
					</div>
				</div>
			</div>

			<!-- 工作流程 -->
			<div class="search-section" v-if="!searchQuery">
				<div class="section-title">工作流程</div>
				<div class="search-items">
					<div class="search-item action-item" @click="handleCreateWorkflow">
						<span class="item-icon">+</span>
						<span class="item-text">创建工作流程</span>
					</div>
				</div>
			</div>

			<!-- 搜索结果 -->
			<div class="search-section" v-if="searchQuery">
				<div class="section-title">搜索结果</div>
				<div class="search-items">
					<div
						class="search-item"
						v-for="item in filteredResults"
						:key="item.id"
						@click="selectItem(item)"
					>
						<span class="item-icon">{{ item.icon || '→' }}</span>
						<span class="item-text">{{ item.text }}</span>
					</div>
					<div v-if="filteredResults.length === 0" class="no-results">没有找到相关结果</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { Search } from '@element-plus/icons-vue'

interface SearchItem {
	id: string
	text: string
	icon?: string
	action?: () => void
}

const router = useRouter()

const props = defineProps({
	isOpen: {
		type: Boolean,
		required: true
	}
})

const emit = defineEmits(['close', 'select'])

const searchQuery = ref('')

const recentItems: SearchItem[] = [
	{
		id: '1',
		text: '利用 Gemini AI, OCR 和 Google Sheets 编成，打开并解析发票的文档。'
	},
	{
		id: '2',
		text: '打开我的工作流程'
	},
	{
		id: '3',
		text: '并启与新闻的期间内'
	}
]

const projectItems: SearchItem[] = [
	{
		id: '4',
		text: '创建项目',
		icon: '📁'
	},
	{
		id: '5',
		text: '开放项目',
		icon: '📁'
	}
]

const allItems = [...recentItems, ...projectItems]

const filteredResults = computed(() => {
	if (!searchQuery.value.trim()) {
		return []
	}
	const query = searchQuery.value.toLowerCase()
	return allItems.filter((item) => item.text.toLowerCase().includes(query))
})

const closeDialog = () => {
	searchQuery.value = ''
	emit('close')
}

const selectItem = (item: SearchItem) => {
	emit('select', item)
	closeDialog()
}

const handleCreateWorkflow = () => {
	router.push('/workflow/0')
	closeDialog()
}

const handleKeyDown = (e: KeyboardEvent) => {
	if (e.key === 'Escape' && props.isOpen) {
		closeDialog()
	}
}

onMounted(() => {
	window.addEventListener('keydown', handleKeyDown)
})

onUnmounted(() => {
	window.removeEventListener('keydown', handleKeyDown)
})
</script>

<style lang="less" scoped>
.search-dialog-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.45);
	display: flex;
	justify-content: center;
	align-items: flex-start;
	padding-top: 60px;
	z-index: 1000;
	animation: fadeIn 0.2s ease-out;

	@keyframes fadeIn {
		from {
			background: rgba(0, 0, 0, 0);
		}
		to {
			background: rgba(0, 0, 0, 0.45);
		}
	}
}

.search-dialog-container {
	width: 600px;
	max-height: 70vh;
	background: #fff;
	border-radius: 12px;
	box-shadow:
		0 3px 12px rgba(0, 0, 0, 0.15),
		0 6px 24px rgba(0, 0, 0, 0.1);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	animation: slideDown 0.3s ease-out;

	@keyframes slideDown {
		from {
			opacity: 0;
			transform: translateY(-20px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
}

.search-header {
	padding: 16px 20px;
	border-bottom: 1px solid #f0f0f0;
	display: flex;
	gap: 12px;
	align-items: center;
	background: #fafafa;

	:deep(.el-input) {
		input {
			border-radius: 8px;
			font-size: 14px;

			&::placeholder {
				color: #d0d0d0;
			}
		}
	}
}

.search-content {
	flex: 1;
	overflow-y: auto;
	padding: 12px 0;

	&::-webkit-scrollbar {
		width: 6px;
	}

	&::-webkit-scrollbar-track {
		background: transparent;
	}

	&::-webkit-scrollbar-thumb {
		background: #e0e0e0;
		border-radius: 3px;

		&:hover {
			background: #ccc;
		}
	}
}

.search-section {
	padding: 8px 0;
}

.section-title {
	font-size: 12px;
	color: #999;
	padding: 8px 20px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.search-items {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 0 8px;
}

.search-item {
	padding: 10px 16px;
	margin: 0 8px;
	background: transparent;
	border-radius: 8px;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 12px;
	transition: all 0.2s ease;
	color: #333;
	font-size: 13px;

	&:hover {
		background: #f5f5f5;
		color: #ff6b6b;

		.item-icon {
			color: #ff6b6b;
		}
	}

	&.action-item {
		color: #999;

		&:hover {
			color: #ff6b6b;
			background: #fff5f5;
		}
	}
}

.item-icon {
	font-size: 14px;
	width: 20px;
	text-align: center;
	color: #ccc;
	transition: color 0.2s ease;
	flex-shrink: 0;
}

.item-text {
	flex: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.no-results {
	padding: 40px 20px;
	text-align: center;
	color: #999;
	font-size: 14px;
}
</style>