zephyr-frontend/src/App.vue

<script setup lang="ts">
import { Icon } from '@iconify/vue'

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from '~/components/ui/breadcrumb'
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from '~/components/ui/collapsible'

import { Separator } from '~/components/ui/separator'
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupLabel,
  SidebarInset,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuSub,
  SidebarMenuSubButton,
  SidebarMenuSubItem,
  SidebarProvider,
  SidebarRail,
  SidebarTrigger,
} from '~/components/ui/sidebar'

// This is sample data.
const data = {
  user: {
    name: 'shadcn',
    email: 'm@example.com',
    avatar: '/avatars/shadcn.jpg',
  },
  navMain: [
    {
      title: '流星雷达',
      url: '#',
      icon: 'ri-radar-fill',
      isActive: true,
      items: [
        {
          title: '潮汐波强度',
          url: '/radar/v1',
        },
        {
          title: '潮汐波时空变化',
          url: '/radar/v2',
        },
      ],
    },
    {
      title: 'Saber',
      url: '#',
      icon: 'game-icons:cracked-saber',
      isActive: true,
      items: [
        {
          title: '波动拟合图',
          url: '/saber/plot_wave_fitting',
        },
        {
          title: '日数据傅里叶变换分析',
          url: '/saber/day_fft_ifft_plot',
        },
        {
          title: '日周期波动能量分析',
          url: '/saber/day_cycle_power_wave_plot',
        },
        {
          title: '月度波动能量分析',
          url: '/saber/month_power_wave_plot',
        },
      ],

    },
    {
      title: '探空气球',
      url: '#',
      icon: 'bxs:balloon',
      isActive: true,
      items: [
        {
          title: '重力波单次',
          url: '/balloon/single',
        },
        {
          title: '重力波统计',
          url: '/balloon/year',
        },
      ],
    },
  ],
  关于: [
    {
      name: 'Design Engineering',
      url: '#',
      icon: 'Frame',
    },

  ],
}
</script>

<template>
  <SidebarProvider>
    <Sidebar collapsible="icon">
      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupLabel>模型</SidebarGroupLabel>
          <SidebarMenu>
            <Collapsible
              v-for="item in data.navMain"
              :key="item.title"
              as-child
              :default-open="item.isActive"
              class="group/collapsible"
            >
              <SidebarMenuItem>
                <CollapsibleTrigger as-child>
                  <SidebarMenuButton :tooltip="item.title">
                    <Icon :icon="item.icon" />
                    <span>{{ item.title }}</span>
                    <ChevronRight class="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
                  </SidebarMenuButton>
                </CollapsibleTrigger>

                <CollapsibleContent>
                  <SidebarMenuSub>
                    <SidebarMenuSubItem
                      v-for="subItem in item.items"
                      :key="subItem.title"
                      class="hover:bg-gray-100"
                    >
                      <SidebarMenuSubButton as-child>
                        <RouterLink
                          :to="subItem.url"
                          active-class="bg-accent-foreground text-accent"
                        >
                          <span>{{ subItem.title }}</span>
                        </RouterLink>
                      </SidebarMenuSubButton>
                    </SidebarMenuSubItem>
                  </SidebarMenuSub>
                </CollapsibleContent>
              </SidebarMenuItem>
            </Collapsible>
          </SidebarMenu>
        </SidebarGroup>
      </SidebarContent>
      <SidebarFooter>
        <SidebarMenu>
          <SidebarMenuItem />
        </SidebarMenu>
      </SidebarFooter>
      <SidebarRail />
    </Sidebar>
    <SidebarInset>
      <header class="group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12 h-16 flex shrink-0 items-center gap-2 transition-[width,height] ease-linear">
        <div class="flex items-center gap-2 px-4">
          <SidebarTrigger class="-ml-1" />
          <Separator orientation="vertical" class="mr-2 h-4" />
          <Breadcrumb>
            <BreadcrumbList>
              <BreadcrumbItem class="hidden md:block">
                <BreadcrumbLink href="#">
                  {{ $route.meta.group }}
                </BreadcrumbLink>
              </BreadcrumbItem>
              <BreadcrumbSeparator class="hidden md:block" />
              <BreadcrumbItem>
                <BreadcrumbPage>{{ $route.meta.item_name }}</BreadcrumbPage>
              </BreadcrumbItem>
            </BreadcrumbList>
          </Breadcrumb>
        </div>
      </header>
      <div class="jusitfy-center w-full flex flex-1 flex-col items-center gap-4 p-4 pt-0">
        <RouterView />
      </div>
    </SidebarInset>
  </SidebarProvider>
</template>