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

<template>
	<div>
		<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: #fff;
							padding: 12px;
							border-radius: 6px;
							box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
						"
					>
						<div style="font-size: 13px; color: #888">{{ card.title }}</div>
						<div style="font-size: 20px; margin-top: 6px">{{ card.value }}</div>
					</div>
				</el-col>
			</el-row>
		</el-card>

		<el-card style="margin-top: 16px">
			<el-tabs v-model:active-name="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>

			<div
				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="搜索" v-model="filter" clearable style="width: 260px" />
					<el-select v-model="sort" placeholder="Sort" size="small" style="width: 160px">
						<el-option label="Sort by last updated" value="updated" />
						<el-option label="Sort by name" value="name" />
					</el-select>
				</div>

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

			<div style="margin-top: 12px">
				<el-empty v-if="filtered.length === 0" description="无工作流" />

				<div v-else>
					<div v-for="item in paged" :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">{{ 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">个人的</el-tag>
									<el-button type="primary" size="small">运行</el-button>
									<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-menu>
										</template>
									</el-dropdown>
								</div>
							</div>
						</el-card>
					</div>
				</div>
			</div>

			<div style="display: flex; justify-content: flex-end; margin-top: 12px">
				<el-pagination
					background
					:page-size="pageSize"
					:current-page.sync="page"
					:total="filtered.length"
					layout="prev, pager, next"
				/>
			</div>
		</el-card>
	</div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

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

const workflows = ref([
	{ id: 1, title: '与新同事人才交流', created: '1 月 23 日' },
	{ id: 2, title: 'RAG 同步机器人，基于 Supabase', created: '1 月 23 日' },
	{ id: 3, title: '利用 Gemini AI, OCR 和 Google Sheets', created: '1 月 23 日' }
])

const filter = ref('')
const sort = ref('updated')
const activeTab = ref('flows')
const page = ref(1)
const pageSize = 10

const filtered = computed(() => {
	const q = filter.value.trim().toLowerCase()
	if (!q) return workflows.value
	return workflows.value.filter((w) => w.title.toLowerCase().includes(q))
})

const paged = computed(() => {
	const start = (page.value - 1) * pageSize
	return filtered.value.slice(start, start + pageSize)
})
</script>

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