<script setup lang="ts">
|
import { computed } from "vue";
|
import { useRoute, useRouter } from "vue-router";
|
import {
|
AppstoreOutlined,
|
CheckCircleFilled,
|
CompassOutlined,
|
ExperimentOutlined
|
} from "@ant-design/icons-vue";
|
|
import { capabilities, verifiedCapabilities } from "@/data/capabilities";
|
|
const route = useRoute();
|
const router = useRouter();
|
const activeKey = computed(() => route.name === "overview" ? "overview" : String(route.params.id));
|
const plannedCapabilities = computed(() => capabilities.filter((item) => item.status !== "verified"));
|
|
function navigate(key: string) {
|
if (key === "overview") router.push({ name: "overview" });
|
else router.push({ name: "capability", params: { id: key } });
|
}
|
|
function handleMenuClick(info: { key: string | number }) {
|
navigate(String(info.key));
|
}
|
</script>
|
|
<template>
|
<a-layout class="application-frame">
|
<a-layout-sider class="application-sider" :width="252" breakpoint="lg" collapsed-width="0">
|
<div class="brand" @click="navigate('overview')">
|
<span class="brand-mark">GW</span>
|
<span><strong>GeoAI Workbench</strong><small>本地实验控制台</small></span>
|
</div>
|
|
<a-menu class="navigation-menu" theme="dark" mode="inline" :selected-keys="[activeKey]" @click="handleMenuClick">
|
<a-menu-item key="overview"><AppstoreOutlined /><span>实验总览</span></a-menu-item>
|
<a-menu-divider />
|
<a-menu-item-group key="verified" title="已验证能力">
|
<a-menu-item v-for="capability in verifiedCapabilities" :key="capability.id">
|
<ExperimentOutlined /><span>{{ capability.title }}</span>
|
</a-menu-item>
|
</a-menu-item-group>
|
<a-menu-divider />
|
<a-menu-item-group key="planned" title="能力目录">
|
<a-menu-item v-for="capability in plannedCapabilities" :key="capability.id">
|
<CompassOutlined /><span>{{ capability.title }}</span>
|
</a-menu-item>
|
</a-menu-item-group>
|
</a-menu>
|
|
<div class="sider-status">
|
<CheckCircleFilled />
|
<div><strong>仅本机读取</strong><small>无产品连接或外部服务</small></div>
|
</div>
|
</a-layout-sider>
|
|
<a-layout class="content-layout"><a-layout-content><router-view /></a-layout-content></a-layout>
|
</a-layout>
|
</template>
|
