ddac-front/src/views/sdk/detail.vue

<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>
  <component :is="currentComponent" />
</template>
<script setup lang="ts">
import { ArrowLeft } from '@element-plus/icons-vue'
import { ref, computed } from 'vue'
import SDKDetail from './components/SDKDetail.vue'
type TabKey = keyof typeof componentMap

const activeTab = ref<TabKey>('sdkDetail')
const options: Array<{ label: string; value: TabKey }> = [
  { label: 'SDK详情', value: 'sdkDetail' },
  { label: '转发规则', value: 'forwardRules' },
  { label: '连接清单', value: 'connectionList' },
  { label: '用量分析', value: 'usageAnalysis' },
  { label: '限制多开', value: 'multiOpenRestriction' },
  { label: '风险IP段', value: 'riskIpSegments' },
  { label: '封禁IP段', value: 'blockedIpSegments' },
  { label: '生成SDK', value: 'generateSdk' },
]

// 组件映射对象
const componentMap = {
  sdkDetail: SDKDetail,
  forwardRules: SDKDetail, // 临时映射到SDKDetail，后续可替换为实际组件
  connectionList: SDKDetail, // 临时映射到SDKDetail，后续可替换为实际组件
  usageAnalysis: SDKDetail, // 临时映射到SDKDetail，后续可替换为实际组件
  multiOpenRestriction: SDKDetail, // 临时映射到SDKDetail，后续可替换为实际组件
  riskIpSegments: SDKDetail, // 临时映射到SDKDetail，后续可替换为实际组件
  blockedIpSegments: SDKDetail, // 临时映射到SDKDetail，后续可替换为实际组件
  generateSdk: SDKDetail, // 临时映射到SDKDetail，后续可替换为实际组件
}

// 计算当前要显示的组件
const currentComponent = computed(() => {
  return componentMap[activeTab.value] || SDKDetail
})

function handleTabChange(value: TabKey) {
}

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