<template>
	<Breadcrumb />
	<TabFilter v-model="activeTab" :options="options" @change="handleTabChange">
		<template #actions>
			<el-button :icon="ArrowLeft" type="primary" class="is-gradient">返回</el-button>
		</template>
	</TabFilter>

</template>
<script setup lang="ts">
import { ArrowLeft } from '@element-plus/icons-vue'
const activeTab = ref('all')
const options = [
	{ label: 'SDK详情', value: 'all' },
	{ label: '转发规则', value: 'normal' },
	{ label: '连接清单', value: 'expiring' },
	{ label: '用量分析', value: 'disabled' },
	{ label: '限制多开', value: 'disabled' },
	{ label: '风险IP段', value: 'disabled' },
	{ label: '封禁IP段', value: 'disabled' },
	{ label: '生成SDK', value: 'disabled' },
]

function handleTabChange(value: string | number) {
	console.log('切换到:', value)
}

</script>
<style lang="scss" scoped></style>