zephyr-frontend/src/App.vue

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

import { ChevronRight, ChevronsUpDown } from 'lucide-vue-next'
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,
} from '~/components/ui/sidebar'
import { authCode } from './composables'

const router = useRouter()

function logout() {
  localStorage.clear()
  sessionStorage.clear()
  authCode.value = ''
  router.push('/auth')
}

onMounted(() => {
  if (!authCode.value) {
    router.push('/auth')
  }
})
// 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',
        },
      ],
    },
    {
      title: 'TIDI',
      url: '#',
      icon: 'mdi:telescope',
      isActive: true,
      items: [
        {
          title: '行星波振幅',
          url: '/tidi/waves',
        },
        {
          title: '行星波月统计',
          url: '/tidi/month_stats',
        },
      ],
    },
    {
      title: 'COSMIC',
      url: '#',
      icon: 'mdi:telescope',
      isActive: true,
      items: [
        {
          title: '行星波月统计',
          url: '/cosmic/stats',
        },
      ],
    },
  ],

  关于: [
    {
      name: 'Design Engineering',
      url: '#',
      icon: 'Frame',
    },

  ],
} as const
</script>

<template>
  <div>
    <div v-if="$route.path === '/auth'">
      <RouterView />
    </div>
    <div v-else>
      <SidebarProvider>
        <Sidebar collapsible="icon">
          <SidebarHeader>
            <Alert>
              <AlertTitle>服务状态正常</AlertTitle>
            </Alert>
          </SidebarHeader>
          <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>&nbsp;</span>
                              <span>{{ subItem.title }}</span>
                            </RouterLink>
                          </SidebarMenuSubButton>
                        </SidebarMenuSubItem>
                      </SidebarMenuSub>
                    </CollapsibleContent>
                  </SidebarMenuItem>
                </Collapsible>
              </SidebarMenu>
            </SidebarGroup>
          </SidebarContent>
          <SidebarFooter>
            <SidebarMenu>
              <SidebarMenuItem flex="~ row items-center gap-2">
                <DropdownMenu>
                  <DropdownMenuTrigger as-child>
                    <SidebarMenuButton
                      size="lg"
                      class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
                    >
                      <div class="grid flex-1 text-left text-sm leading-tight">
                        <span class="truncate font-semibold">操作员</span>
                        <span class="truncate text-xs">已授权</span>
                      </div>
                      <ChevronsUpDown class="ml-auto size-4" />
                    </SidebarMenuButton>
                  </DropdownMenuTrigger>
                  <DropdownMenuContent
                    class="min-w-56 w-[--radix-dropdown-menu-trigger-width] rounded-lg" side="bottom" align="end"
                    :side-offset="4"
                  >
                    <div @click="logout">
                      <DropdownMenuItem>
                        <Icon icon="heroicons-solid:logout" class="h-4 w-4" />
                        退出系统
                      </DropdownMenuItem>
                    </div>
                  </DropdownMenuContent>
                </DropdownMenu>
                <Button variant="outline" size="icon" class="ml-auto h-8 w-8">
                  <Icon icon="icon-park-outline:setting" class="h-4 w-4" />
                  <span class="sr-only">设置</span>
                </Button>
              </SidebarMenuItem>
            </SidebarMenu>
          </SidebarFooter>
          <SidebarRail />
        </Sidebar>
        <SidebarInset>
          <header class="group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12 h-16 flex shrink-0 items-center justify-between gap-2 transition-[width,height] ease-linear">
            <div class="flex items-center gap-2 px-4">
              <Icon icon="heroicons-solid:home" class="h-4 w-4" />
              <Separator orientation="vertical" class="mr-2 h-4" />
              <Breadcrumb>
                <BreadcrumbList>
                  <BreadcrumbItem>
                    <BreadcrumbLink href="/">
                      中高层大气波动解析识别技术系统
                    </BreadcrumbLink>
                  </BreadcrumbItem>
                  <BreadcrumbSeparator class="hidden md:block" />

                  <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>
            <div px-7>
              <Alert variant="default">
                <Icon icon="el:ok-circle" class="h-4 w-4 text-green!" />
                <AlertTitle>服务状态正常</AlertTitle>
              </Alert>
            </div>
          </header>
          <RouterView class="h-full overflow-hidden" />
        </SidebarInset>
      </SidebarProvider>
    </div>
  </div>
</template>