<script setup lang="ts">
|
import { computed } from "vue";
|
import { useRoute } from "vue-router";
|
|
import PageHeader from "@/components/PageHeader.vue";
|
import ObjectDetectionPanel from "@/components/ObjectDetectionPanel.vue";
|
import TrajectoryAnalysisPanel from "@/components/TrajectoryAnalysisPanel.vue";
|
import { capabilityById } from "@/data/capabilities";
|
|
const route = useRoute();
|
const capability = computed(() => capabilityById(String(route.params.id)));
|
</script>
|
|
<template>
|
<div class="view-container" v-if="capability">
|
<PageHeader :eyebrow="`CAPABILITY ${capability.id} / ${capability.level}`" :title="capability.title" :description="capability.note" />
|
<ObjectDetectionPanel v-if="capability.id === '01-object-detection'" />
|
<TrajectoryAnalysisPanel v-else-if="capability.id === '15-trajectory-analysis'" />
|
<a-empty v-else description="等待第一个可验证 Demo"><template #description><h2>尚无本地结果工件</h2><p>该能力已登记在目录中，但尚未产生可视化结果、结构化输出或运行元数据。</p></template></a-empty>
|
</div>
|
<div v-else class="view-container"><a-result status="404" title="未找到能力页面" sub-title="请从左侧目录选择已登记的能力。" /></div>
|
</template>
|
