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

<template>
	<!-- 顶部栏 -->
	<div
		style="
			height: 64px;
			display: flex;
			align-items: center;
			padding: 0 16px;
			justify-content: space-between;
			background: #fff;
			border-bottom: 1px solid #f0f0f0;
		"
	>
		<div style="display: flex; align-items: center; gap: 12px">
			<div style="font-weight: 700; font-size: 18px">AI Agent</div>
			<div style="color: #888; font-size: 13px">概述</div>
		</div>

		<div style="display: flex; align-items: center; gap: 12px">
			<el-dropdown
				style="background: #ff6b6b"
				split-button
				type="primary"
				@click="handleMenuClick(buttonConfig.text)"
			>
				{{ buttonConfig.text }}
				<template #dropdown>
					<el-dropdown-menu>
						<el-dropdown-item
							v-for="item in buttonConfig.items"
							:key="item"
							@click="handleMenuClick(item)"
						>
							{{ item }}
						</el-dropdown-item>
					</el-dropdown-menu>
				</template>
			</el-dropdown>
		</div>
	</div>

	<div style="padding: 16px">
		<el-card shadow="never" style="padding: 18px">
			<el-row :gutter="16" justify="start">
				<el-col :span="4" v-for="(card, idx) in cards" :key="idx">
					<div
						style="
							background: linear-gradient(135deg, #fff 0%, #fafafa 100%);
							padding: 16px;
							border-radius: 8px;
							box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
							border: 1px solid #f0f0f0;
						"
					>
						<div style="font-size: 13px; color: #888">{{ card.title }}</div>
						<div style="font-size: 20px; margin-top: 6px; font-weight: 600">{{ card.value }}</div>
					</div>
				</el-col>
			</el-row>
		</el-card>

		<el-card style="margin-top: 16px">
			<el-tabs v-model="dashboardStore.activeTab">
				<el-tab-pane label="工作流程" name="flows"></el-tab-pane>
				<el-tab-pane label="证书" name="certs"></el-tab-pane>
				<el-tab-pane label="执行" name="execs"></el-tab-pane>
				<el-tab-pane label="变量" name="vars"></el-tab-pane>
				<el-tab-pane label="数据表" name="tables"></el-tab-pane>
			</el-tabs>

			<!-- 工作流程和证书 Tab 的搜索和排序 -->
			<div
				v-if="activeTab === 'flows' || activeTab === 'certs'"
				style="display: flex; justify-content: space-between; align-items: center; margin-top: 12px"
			>
				<div style="display: flex; gap: 8px; align-items: center">
					<el-input
						placeholder="搜索"
						:prefix-icon="Search"
						v-model="filter"
						clearable
						style="width: 260px"
					/>
					<el-select v-model="sort" placeholder="排序" style="width: 180px">
						<el-option label="按更新时间排序" value="updated" />
						<el-option label="按创建时间排序" value="created" />
						<el-option label="按名称升序" value="name" />
						<el-option label="按名称降序" value="name-desc" />
					</el-select>
				</div>

				<div>
					<el-button text>筛选</el-button>
				</div>
			</div>

			<!-- 执行 Tab 的搜索和筛选 -->
			<div
				v-else-if="activeTab === 'execs'"
				style="display: flex; justify-content: space-between; align-items: center; margin-top: 12px"
			>
				<div style="display: flex; gap: 8px; align-items: center">
					<el-input
						placeholder="搜索"
						:prefix-icon="Search"
						v-model="filter"
						clearable
						style="width: 260px"
					/>
					<el-select v-model="sort" placeholder="排序" style="width: 180px">
						<el-option label="按名称升序" value="name" />
						<el-option label="按名称降序" value="name-desc" />
					</el-select>
				</div>

				<div>
					<el-button type="text">筛选</el-button>
				</div>
			</div>

			<!-- 变量 Tab 的搜索和添加按钮 -->
			<div
				v-else-if="activeTab === 'vars'"
				style="display: flex; justify-content: space-between; align-items: center; margin-top: 12px"
			>
				<div style="display: flex; gap: 8px; align-items: center">
					<el-input
						placeholder="搜索变量......"
						:prefix-icon="Search"
						v-model="varFilter"
						clearable
						style="width: 260px"
					/>
					<el-select v-model="varSort" placeholder="按名称排序" style="width: 200px">
						<el-option label="按名称排序" value="name" />
					</el-select>
				</div>

				<div style="display: flex; gap: 8px">
					<el-button type="text">筛选</el-button>
				</div>
			</div>

			<div style="margin-top: 12px">
				<!-- 工作流程 Tab -->
				<template v-if="activeTab === 'flows'">
					<el-empty v-if="getTabData.length === 0" description="无工作流程" />
					<div v-else>
						<div v-for="item in pagedData" :key="item.id" style="margin-bottom: 12px">
							<el-card>
								<div style="display: flex; justify-content: space-between; align-items: center">
									<div>
										<div style="font-weight: 700" class="cursor-pointer" @click="toEditor">
											{{ item.title }}
										</div>
										<div style="color: #999; font-size: 12px">上次更新时间: {{ item.created }}</div>
									</div>

									<div style="display: flex; gap: 8px; align-items: center">
										<el-tag size="small" type="info">流程标签</el-tag>
										<el-dropdown>
											<span class="el-dropdown-link cursor-pointer" @click.stop>•••</span>
											<template #dropdown>
												<el-dropdown-menu>
													<el-dropdown-item @click="toEditor">打开</el-dropdown-item>
													<el-dropdown-item>分享</el-dropdown-item>
													<el-dropdown-item>复制</el-dropdown-item>
													<el-dropdown-item>移动</el-dropdown-item>
													<el-dropdown-item>档案</el-dropdown-item>
												</el-dropdown-menu>
											</template>
										</el-dropdown>
									</div>
								</div>
							</el-card>
						</div>
					</div>
				</template>

				<!-- 执行 Tab - 表格形式 -->
				<template v-else-if="activeTab === 'execs'">
					<div
						v-if="getTabData.length === 0"
						style="text-align: center; padding: 40px; color: #999"
					>
						没有正在进行的执行。
					</div>
					<el-table v-else :data="getTabData" style="width: 100%; margin-top: 12px" stripe border>
						<el-table-column type="selection" width="50" />
						<el-table-column prop="workflow" label="工作流程">
							<template #default="scope">
								<el-button type="text" @click="$router.push(`/workflow/${scope.row.id}`)">{{
									scope.row.workflow
								}}</el-button>
							</template>
						</el-table-column>
						<el-table-column prop="status" label="地位" width="100">
							<template #default="scope">
								<div style="display: flex; align-items: center; gap: 6px">
									<el-icon style="color: #67c23a" v-if="scope.row.status === '成功'">
										<svg
											xmlns="http://www.w3.org/2000/svg"
											viewBox="0 0 24 24"
											fill="currentColor"
											width="1em"
											height="1em"
										>
											<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
										</svg>
									</el-icon>
									{{ scope.row.status }}
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="startTime" label="开始" />
						<el-table-column prop="duration" label="运行时间" width="100" />
						<el-table-column prop="executionId" label="执行 ID" width="80" />
						<el-table-column label="手动执行" width="100" align="center">
							<template #default>
								<el-button style="background: #ccc; color: #666; border: none" size="small"
									>手动执行</el-button
								>
							</template>
						</el-table-column>
						<el-table-column label="操作" width="80" align="center">
							<template #default>
								<el-dropdown>
									<span class="el-dropdown-link">⋯</span>
									<template #dropdown>
										<el-dropdown-menu>
											<el-dropdown-item>删除</el-dropdown-item>
										</el-dropdown-menu>
									</template>
								</el-dropdown>
							</template>
						</el-table-column>
					</el-table>
				</template>

				<!-- 变量 Tab - 表格或空状态 -->
				<template v-else-if="activeTab === 'vars'">
					<div
						v-if="filteredVariables.length === 0"
						style="
							text-align: center;
							padding: 60px 20px;
							border: 2px dashed #ddd;
							border-radius: 6px;
							background: #fafafa;
							color: #666;
						"
					>
						<div style="font-size: 48px; margin-bottom: 12px">👋</div>
						<div style="font-size: 16px; margin-bottom: 8px">迄今，我还没设置一个变量</div>
						<div style="font-size: 13px; color: #999; margin-bottom: 16px">
							变量可用于存储可在多个工作流程中轻松引用的数据。
						</div>
						<el-button @click="dashboardStore.openVarDialog">添加第一个变量</el-button>
					</div>
					<el-table v-else :data="filteredVariables" style="width: 100%; margin-top: 12px">
						<el-table-column prop="key" label="key" />
						<el-table-column prop="value" label="值" />
						<el-table-column prop="usage" label="使用语法" width="150">
							<template #default="scope">
								<el-tag type="info">{{ scope.row.usage }}</el-tag>
							</template>
						</el-table-column>
						<el-table-column prop="scope" label="范围" width="100">
							<template #default="scope">
								<el-tag size="small">{{ scope.row.scope === 'scope' ? '全局' : '' }}</el-tag>
							</template>
						</el-table-column>
						<el-table-column label="操作" width="200" align="right">
							<template #default="scope">
								<el-button text size="small" @click="editVariable(scope.row)">编辑</el-button>
								<el-button text size="small" type="danger" @click="deleteVariable(scope.row.id)"
									>删除</el-button
								>
							</template>
						</el-table-column>
					</el-table>
					<div v-if="filteredVariables.length > 0" style="margin-top: 12px; text-align: right">
						<span style="color: #999; font-size: 12px">页面大小: </span>
						<el-select v-model="varPageSize" size="small" style="width: 60px">
							<el-option label="25" value="25" />
							<el-option label="50" value="50" />
							<el-option label="100" value="100" />
						</el-select>
					</div>
				</template>

				<!-- 其他 Tab -->
				<template v-else-if="activeTab === 'tables'">
					<div
						v-if="tables.length === 0"
						style="
							text-align: center;
							padding: 60px 20px;
							border: 2px dashed #ddd;
							border-radius: 6px;
							background: #fafafa;
						"
					>
						<div style="font-size: 16px; margin-bottom: 8px; color: #333">
							您目前还没有任何数据表。
						</div>
						<div style="font-size: 13px; color: #999; margin-bottom: 20px">
							使用数据表来保存执行结果、在工作流之间共享数据以及跨进程体估指标。
						</div>
						<el-button @click="dashboardStore.openTableDialog">创建数据表</el-button>
					</div>
					<div v-else>
						<div
							v-for="item in tables"
							:key="item.id"
							style="
								margin-bottom: 12px;
								padding: 12px;
								border: 1px solid #f0f0f0;
								border-radius: 6px;
								background: #fff;
							"
						>
							<div style="display: flex; justify-content: space-between; align-items: center">
								<div style="display: flex; gap: 12px; align-items: center; flex: 1">
									<div style="font-size: 20px">📋</div>
									<div style="flex: 1">
										<div style="font-weight: 600; margin-bottom: 4px; font-size: 14px">
											{{ item.name }}
										</div>
										<div style="color: #999; font-size: 12px; display: flex; gap: 12px">
											<span>{{ item.size || '0MB' }}</span>
											<span>{{ item.rows || '0' }}行</span>
											<span style="color: #ff6b6b">操作更新</span>
											<span style="color: #ff6b6b">操作创建</span>
										</div>
									</div>
								</div>

								<div>
									<el-dropdown>
										<span class="el-dropdown-link">•••</span>
										<template #dropdown>
											<el-dropdown-menu>
												<el-dropdown-item>下载 CSV 文件</el-dropdown-item>
												<el-dropdown-item>删除</el-dropdown-item>
											</el-dropdown-menu>
										</template>
									</el-dropdown>
								</div>
							</div>
						</div>

						<!-- 数据表分页器 -->
						<div
							style="
								display: flex;
								justify-content: flex-end;
								align-items: center;
								margin-top: 16px;
								gap: 12px;
							"
						>
							<span style="color: #666; font-size: 13px">总计 {{ tables.length }}</span>
							<el-input v-model="tablePageInput" style="width: 50px" placeholder="1" />
							<el-select v-model="tablePageSize" size="small" style="width: 100px">
								<el-option label="50/页" value="50" />
								<el-option label="100/页" value="100" />
								<el-option label="200/页" value="200" />
							</el-select>
						</div>
					</div>
				</template>

				<!-- 其他 Tab -->
				<template v-else>
					<el-empty v-if="getTabData.length === 0" :description="`无${getTabLabel}`" />
					<div v-else>
						<div v-for="item in getTabData" :key="item.id" style="margin-bottom: 12px">
							<el-card>
								<div style="display: flex; justify-content: space-between; align-items: center">
									<div style="display: flex; gap: 12px; align-items: flex-start; flex: 1">
										<div style="font-size: 24px">{{ item.icon || '📋' }}</div>
										<div style="flex: 1">
											<div style="font-weight: 700; margin-bottom: 4px">{{ item.title }}</div>
											<div style="color: #999; font-size: 12px">{{ item.description }}</div>
										</div>
									</div>

									<div style="display: flex; gap: 8px; align-items: center">
										<!-- <el-tag size="small" type="info">个人的</el-tag> -->
										<el-dropdown>
											<span class="el-dropdown-link">•••</span>
											<template #dropdown>
												<el-dropdown-menu>
													<el-dropdown-item>打开</el-dropdown-item>
													<el-dropdown-item>删除</el-dropdown-item>
													<el-dropdown-item>变更所有者</el-dropdown-item>
												</el-dropdown-menu>
											</template>
										</el-dropdown>
									</div>
								</div>
							</el-card>
						</div>
					</div>
				</template>
			</div>

			<!-- 分页器仅在工作流程 Tab 显示 -->
			<div
				v-if="activeTab === 'flows'"
				style="
					display: flex;
					justify-content: flex-end;
					align-items: center;
					margin-top: 16px;
					gap: 12px;
				"
			>
				<el-pagination
					background
					:page-size="pageSize"
					:current-page="currentPage"
					:page-sizes="[10, 20, 50]"
					@update:current-page="currentPage = $event"
					@update:page-size="pageSize = $event"
					:total="getTabData.length"
					layout="total, prev, pager, next, sizes"
				/>
			</div>
		</el-card>

		<!-- 新变量对话框 -->
		<el-dialog
			v-model="dashboardStore.showVarDialog"
			:title="varDialogTitle"
			width="500px"
			@close="resetVarForm"
		>
			<el-form ref="varFormRef" :model="varForm" :rules="varFormRules" label-position="top">
				<el-form-item label="Key" prop="key">
					<el-input v-model="varForm.key" placeholder="请输入key" />
				</el-form-item>
				<el-form-item label="值" prop="value">
					<el-input v-model="varForm.value" type="textarea" placeholder="请输入一个值" rows="4" />
				</el-form-item>
				<el-form-item label="范围" prop="scope">
					<el-select v-model="varForm.scope" placeholder="选择">
						<el-option label="全局" value="scope" />
					</el-select>
				</el-form-item>
			</el-form>
			<template #footer>
				<div style="text-align: right">
					<el-button @click="dashboardStore.closeVarDialog">取消</el-button>
					<el-button type="primary" @click="submitVariable">提交</el-button>
				</div>
			</template>
		</el-dialog>

		<!-- 创建新数据表对话框 -->
		<el-dialog
			v-model="dashboardStore.showTableDialog"
			title="创建新数据表"
			width="500px"
			@close="resetTableForm"
		>
			<el-form ref="tableFormRef" :model="tableForm" :rules="tableFormRules" label-position="top">
				<el-form-item label="数据表名称" prop="name">
					<el-input v-model="tableForm.name" placeholder="输入数据表名称" />
				</el-form-item>
				<el-form-item label="创建方式" prop="method">
					<el-radio-group v-model="tableForm.method">
						<el-radio value="from-scratch">从零开始</el-radio>
						<el-radio value="import-csv">导入 CSV 文件</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-form>
			<template #footer>
				<div style="text-align: right">
					<el-button @click="dashboardStore.closeTableDialog">取消</el-button>
					<el-button type="primary" @click="submitTable">创建</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import { useDashboardStore } from '@/stores/dashboard'
import { v4 } from 'uuid'

const $router = useRouter()
const dashboardStore = useDashboardStore()

// 根据当前 tab 确定按钮文字和下拉菜单
const buttonConfig = computed(() => {
	const tab = dashboardStore.activeTab
	const configs: Record<string, { text: string; items: string[] }> = {
		flows: { text: '创建工作流程', items: ['创建凭证', '创建变量', '创建数据表'] },
		certs: { text: '创建凭证', items: ['创建工作流程', '创建变量', '创建数据表'] },
		execs: { text: '创建工作流程', items: ['创建凭证', '创建变量', '创建数据表'] },
		vars: { text: '创建变量', items: ['创建工作流程', '创建凭证', '创建数据表'] },
		tables: { text: '创建数据表', items: ['创建工作流程', '创建凭证', '创建变量'] }
	}
	return configs[tab] || { text: '创建工作流程', items: ['创建凭证', '创建变量', '创建数据表'] }
})

const handleMenuClick = (text: string) => {
	const actionMap: Record<string, () => void> = {
		创建工作流程: () => {
			const id = v4()
			$router.push(`/workflow/${id}`)
		},
		创建凭证: () => console.log('创建凭证'),
		创建变量: () => {
			dashboardStore.setActiveTab('vars')
			dashboardStore.openVarDialog()
		},
		创建数据表: () => {
			dashboardStore.setActiveTab('tables')
			dashboardStore.openTableDialog()
		}
	}
	const action = actionMap[text]
	if (action) action()
}

const cards = [
	{ title: '生产执行', value: 0 },
	{ title: '执行失败', value: 0 },
	{ title: '故障率', value: '0%' },
	{ title: '节省时间', value: '0%' },
	{ title: '运行时间(平均)', value: '0s' }
]

const projectMap = JSON.parse(localStorage.getItem(`workflow-map`) || '{}')

const workflows = ref([
	...Object.entries(projectMap)
		.map(([_id, workflow]) => workflow)
		.map((item: any) => ({
			...item,
			id: item.id,
			title: item.name
		})),
	{ id: 1, title: '与新同事人才交流', created: '1 月 23 日', description: '', icon: '' },
	{
		id: 2,
		title: 'RAG 同步机器人，基于 Supabase',
		created: '1 月 23 日',
		description: '',
		icon: ''
	},
	{
		id: 3,
		title: '利用 Gemini AI, OCR 和 Google Sheets',
		created: '1 月 23 日',
		description: '',
		icon: ''
	}
])

const certificates = ref([
	{
		id: 1,
		title: 'n8n 免费 OpenAI API 额度',
		description: 'OpenAI 创建更新了 3 天前 | 创建时间：1 月 23 日',
		created: '1 月 23 日',
		icon: '🤖'
	},
	{
		id: 2,
		title: 'Google Sheets 帐户',
		description: 'Google Sheets OAuth2 API | 上次更新时间：3 天前 | 创建时间：1 月 23 日',
		created: '1 月 23 日',
		icon: '📊'
	}
])

const executions = ref([
	{
		id: 1,
		workflow: '我的工作流程',
		status: '成功',
		startTime: '1 月 26 10:39:03',
		duration: '35 秒',
		executionId: '1'
	},
	{
		id: 2,
		workflow: '工作流程 2',
		status: '成功',
		startTime: '1 月 26 10:30:00',
		duration: '2 分钟',
		executionId: '2'
	}
])

const variables = ref<{ id: number; key: string; value: string; usage: string; scope: string }[]>(
	[]
)

const tables = ref<
	{ id: number; name: string; description: string; method: string; size: string; rows: string }[]
>([])

// 数据表相关
const tablePageInput = ref('')
const tablePageSize = ref('50')
const tableForm = ref({
	name: '',
	method: 'from-scratch'
})

const resetTableForm = () => {
	tableForm.value = {
		name: '',
		method: 'from-scratch'
	}
}

const tableFormRef = ref()

const tableFormRules = {
	name: [
		{ required: true, message: '请输入数据表名称', trigger: 'blur' },
		{ min: 1, max: 100, message: '数据表名称长度为 1-100 个字符', trigger: 'blur' }
	],
	method: [{ required: true, message: '请选择创建方式', trigger: 'change' }]
}

const submitTable = async () => {
	try {
		await tableFormRef.value?.validate()
		const newTable = {
			id: Math.max(...tables.value.map((t: any) => t.id), 0) + 1,
			name: tableForm.value.name,
			description: tableForm.value.method === 'from-scratch' ? '从零开始创建' : '从 CSV 导入',
			method: tableForm.value.method,
			size: '0MB',
			rows: '0'
		}
		tables.value.push(newTable)
		dashboardStore.closeTableDialog()
		resetTableForm()
		ElMessage.success('数据表已创建')
	} catch (error) {
		// 验证失败，form 会自动显示错误信息
	}
}

const filter = ref('')
const sort = ref('name')
const pageSize = ref(10)

// 使用 computed 来包装 dashboardStore.activeTab，以便简化模板中的引用
const activeTab = computed(() => dashboardStore.activeTab)

// 变量表单相关
const varFilter = ref('')
const varSort = ref('name')
const varPageSize = ref('25')
const varForm = ref({
	id: undefined as number | undefined,
	key: '',
	value: '',
	scope: 'scope'
})

const resetVarForm = () => {
	varForm.value = {
		id: undefined,
		key: '',
		value: '',
		scope: 'scope'
	}
}

const varFormRef = ref()

const varFormRules = {
	key: [
		{ required: true, message: '请输入Key', trigger: 'blur' },
		{ min: 1, max: 100, message: 'Key 长度为 1-100 个字符', trigger: 'blur' }
	],
	value: [],
	scope: [{ required: true, message: '请选择范围', trigger: 'change' }]
}

const submitVariable = async () => {
	try {
		await varFormRef.value?.validate()
		// 编辑已有变量
		if (varForm.value.id) {
			const idx = variables.value.findIndex((v: any) => v.id === varForm.value.id)
			if (idx !== -1) {
				variables.value[idx] = {
					id: varForm.value.id,
					key: varForm.value.key,
					value: varForm.value.value,
					usage: `$vars.${varForm.value.key}`,
					scope: varForm.value.scope
				}
				dashboardStore.closeVarDialog()
				resetVarForm()
				ElMessage.success('变量已更新')
				return
			}
		}

		// 新增变量
		const newVar = {
			id: Math.max(...variables.value.map((v: any) => v.id), 0) + 1,
			key: varForm.value.key,
			value: varForm.value.value,
			usage: `$vars.${varForm.value.key}`,
			scope: varForm.value.scope
		}
		variables.value.push(newVar)
		dashboardStore.closeVarDialog()
		resetVarForm()
		ElMessage.success('变量已添加')
	} catch (error) {
		// 验证失败，form 会自动显示错误信息
	}
}

const varDialogTitle = computed(() => (varForm.value.id ? '编辑变量' : '新增'))

const editVariable = (variable: any) => {
	varForm.value = { ...variable, scope: variable.scope }
	dashboardStore.openVarDialog()
}

const deleteVariable = (id: number) => {
	ElMessageBox.confirm('确定删除该变量吗?', '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning'
	})
		.then(() => {
			variables.value = variables.value.filter((v: any) => v.id !== id)
			ElMessage.success('变量已删除')
		})
		.catch(() => {})
}

const pageMap = ref({
	flows: 1,
	certs: 1,
	execs: 1,
	vars: 1,
	tables: 1
})

const currentPage = computed({
	get: () => pageMap.value[activeTab.value as keyof typeof pageMap.value] || 1,
	set: (val: number) => {
		pageMap.value[activeTab.value as keyof typeof pageMap.value] = val
	}
})

const getTabLabel = computed(() => {
	const labels: Record<string, string> = {
		flows: '工作流程',
		certs: '证书',
		execs: '执行',
		vars: '变量',
		tables: '数据表'
	}
	return labels[activeTab.value] || '项目'
})

const getTabData = computed(() => {
	const tabs: Record<string, any> = {
		flows: workflows.value,
		certs: certificates.value,
		execs: executions.value,
		vars: variables.value,
		tables: tables.value
	}
	const data = tabs[activeTab.value] || []
	const q = filter.value.trim().toLowerCase()
	if (!q) return data
	return data.filter((item: any) => item.title.toLowerCase().includes(q))
})

const pagedData = computed(() => {
	const start = (currentPage.value - 1) * pageSize.value
	return getTabData.value.slice(start, start + pageSize.value)
})

const filteredVariables = computed(() => {
	let result = variables.value
	const q = varFilter.value.trim().toLowerCase()
	if (q) {
		result = result.filter(
			(v: any) => v.key.toLowerCase().includes(q) || v.value.toLowerCase().includes(q)
		)
	}
	// 排序
	if (varSort.value === 'name') {
		result.sort((a: any, b: any) => a.key.localeCompare(b.key))
	} else if (varSort.value === 'name-desc') {
		result.sort((a: any, b: any) => b.key.localeCompare(a.key))
	}
	return result
})

const toEditor = () => {
	$router.push('/workflow/1')
}
</script>

<style lang="less" scoped></style>