refactor: routes

package.json

@@ -4,7 +4,7 @@
   "packageManager": "pnpm@9.14.4",
   "scripts": {
     "build": "vite build",
-    "dev": "vite --port 10514 --open",
+    "dev": "vite --port 10514 --host",
     "lint": "eslint .",
     "typecheck": "vue-tsc --noEmit",
     "preview": "vite preview",

src/CONSTANT.ts

@@ -2,111 +2,3 @@ const KURONEKO_API = 'http://100.89.232.74:18200'
 // export const API_BASE_URL = 'http://localhost:5000'
 export const API_BASE_URL = import.meta.env.PROD ? 'https://gca-api.dustella.net:8443' : KURONEKO_API
 // export const API_BASE_URL = 'https://gca-api.dustella.net:8443'
-
-export const headerData = {
-  user: {
-    name: 'shadcn',
-    email: 'm@example.com',
-    avatar: '/avatars/shadcn.jpg',
-  },
-  navMain: [
-    {
-      title: '流星雷达',
-      url: '#',
-      icon: 'ri-radar-fill',
-      isActive: true,
-      items: [
-        {
-          title: '潮汐波提取',
-          url: '/radar/TW-single',
-        },
-        {
-          title: '潮汐波统计',
-          url: '/radar/TW-stats',
-        },
-        {
-          title: '行星波提取',
-          url: '/radar/PW-single',
-        },
-        {
-          title: '行星波统计',
-          url: '/radar/PW-stats',
-        },
-      ],
-    },
-    {
-      title: 'SABER',
-      url: '#',
-      icon: 'game-icons:cracked-saber',
-      isActive: true,
-      items: [
-        {
-          title: '重力波提取',
-          url: '/saber/gw/single',
-        },
-        {
-          title: '重力波统计',
-          url: '/saber/gw/stats',
-        },
-      ],
-
-    },
-    {
-      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',
-        },
-        {
-          title: '行星波单次',
-          url: '/cosmic/single',
-        },
-      ],
-    },
-  ],
-
-  关于: [
-    {
-      name: 'Design Engineering',
-      url: '#',
-      icon: 'Frame',
-    },
-
-  ],
-} as const

src/components/DefaultLayout.vue

@@ -35,7 +35,6 @@ import {
 } from '~/components/ui/sidebar'
 
 import { authCode, useBackendOnline } from '../composables'
-import { headerData as data } from '../CONSTANT'
 
 const router = useRouter()
 
@@ -45,6 +44,55 @@ function logout() {
   authCode.value = ''
   router.push('/auth')
 }
+const IconMapping = {
+  探空气球: 'bxs:balloon',
+  SABER: 'game-icons:cracked-saber',
+  流星雷达: 'ri-radar-fill',
+  TIDI: 'mdi:telescope',
+  COSMIC: 'mdi:telescope',
+} as Record<string, string>
+
+function generateNavigationFromRoutes() {
+  const allRoutesWithMeta = router.getRoutes().filter(
+    (r) => {
+      // check if r.meta is {}
+      return Object.keys(r.meta).length > 0 && !!r.meta.group
+    },
+  )
+  // @ts-expect-error i expect grpup
+  const groupedItems = Object.groupBy(allRoutesWithMeta, r => r.meta.group)
+  return Object.entries(groupedItems).map(([group, routes]) => {
+    return {
+      title: group,
+      url: '#',
+      icon: IconMapping[group] ?? 'ri-radar-fill',
+      isActive: true,
+      items: routes!.map((r) => {
+        return {
+          title: r.meta.item_name as string,
+          url: r.path,
+        }
+      }),
+    }
+  })
+}
+const data = {
+  user: {
+    name: 'shadcn',
+    email: 'm@example.com',
+    avatar: '/avatars/shadcn.jpg',
+  },
+  navMain: generateNavigationFromRoutes(),
+
+  关于: [
+    {
+      name: 'Design Engineering',
+      url: '#',
+      icon: 'Frame',
+    },
+
+  ],
+} as const
 
 onMounted(() => {
   if (!authCode.value) {

src/components/dense/saber/day_cycle_power_wave_plot.vue

@@ -35,7 +35,7 @@ const urll = computed(() => {
   query.set('day', selected.day)
   query.set('cycle_no', selected.cycle_no.toString())
   query.set('lat_range', selected.lat_range)
-  return `${API_BASE_URL}/saber/render/day_cycle_power_wave_plot?${query}`
+  return `${API_BASE_URL}/saber/render/gravity_wave/per_day/power_wave_plot?${query}`
 })
 
 onMounted(async () => {

src/components/dense/saber/day_fft_ifft_plot.vue

@@ -38,7 +38,7 @@ const urll = computed(() => {
   query.set('day', selected.day)
   query.set('cycle_no', selected.cycle_no.toString())
   query.set('lat_range', selected.lat_range)
-  return `${API_BASE_URL}/saber/render/day_fft_ifft_plot?${query}`
+  return `${API_BASE_URL}/saber/render/gravity_wave/per_day/fft_ifft?${query}`
 })
 
 onMounted(async () => {

src/components/dense/saber/month_power_wave_plot.vue

@@ -31,7 +31,7 @@ const urll = computed(() => {
   const query = new URLSearchParams()
   query.set('path', selected.path)
   query.set('lat_range', selected.lat_range)
-  return `${API_BASE_URL}/saber/render/month_power_wave_plot?${query}`
+  return `${API_BASE_URL}/saber/render/gravity_wave/per_month/power_wave_plot?${query}`
 })
 
 onMounted(async () => {

src/components/dense/saber/plot_wave_fitting.vue

@@ -35,7 +35,7 @@ const urll = computed(() => {
   query.set('day', selected.day)
   query.set('height_no', selected.height_no.toString())
   query.set('lat_ranges', selected.lat_ranges)
-  return `${API_BASE_URL}/saber/render/plot_wave_fitting?${query}`
+  return `${API_BASE_URL}/saber/render/gravity_wave/per_day/wave_fitting?${query}`
 })
 
 onMounted(async () => {

src/main.ts

@@ -1,6 +1,6 @@
 import { createApp } from 'vue'
 import { createRouter, createWebHistory } from 'vue-router'
-import { routes } from 'vue-router/auto-routes'
+import { handleHotUpdate, routes } from 'vue-router/auto-routes'
 import App from './App.vue'
 
 import '@unocss/reset/tailwind.css'
@@ -13,5 +13,9 @@ const router = createRouter({
   routes,
   history: createWebHistory(import.meta.env.BASE_URL),
 })
+if (import.meta.hot) {
+  handleHotUpdate(router)
+}
+
 app.use(router)
 app.mount('#app')

src/pages/balloon/gravity_wave/single.vue

@@ -18,17 +18,32 @@ const modes = [
 ] as const
 
 const allPaths = ref([] as string[])
+const allStations = ref([] as string[])
+
 const selected = reactive({
   selectedMode: '观测的二阶多项式拟合',
   selectedPath: '',
   station: 'LIN',
 })
+const currentPathesList = computed(() => {
+  const station = selected.station
+  return allPaths.value.filter((a: string) => a.includes(station))
+})
 
 onMounted(async () => {
   await baseFetch<string []>(`${API_BASE_URL}/balloon/metadata`).json().then(({ data }) => {
     const das = data.value!
     allPaths.value = das
     selected.selectedPath = das[0]
+
+    const _allStations = das.map((a: string) => {
+      const stationPattern = /data\/balloon\/(\w+)\//
+      return a.match(stationPattern)?.[1]
+    }) as string[]
+
+    const stations = Array.from(new Set(_allStations))
+    allStations.value = stations
+    selected.station = stations[0]
   })
 })
 
@@ -58,7 +73,7 @@ const metadata = ref({} as Record<string, string>)
 async function customHandle(resp: Response) {
   if (resp.status === 204) {
     const res: ImageResult = {
-      message: '这一天没有数据',
+      message: '这一天没有重力波',
       result: 'error',
       resourceId: '',
     }
@@ -109,8 +124,8 @@ async function customHandle(resp: Response) {
       <SelectContent>
         <SelectGroup>
           <SelectLabel>台站</SelectLabel>
-          <SelectItem value="LIN">
-            LIN
+          <SelectItem v-for="s in allStations" :key="s" :value="s">
+            {{ s }}
           </SelectItem>
         </SelectGroup>
       </SelectContent>
@@ -123,7 +138,7 @@ async function customHandle(resp: Response) {
       <SelectContent>
         <SelectGroup>
           <SelectLabel>日期</SelectLabel>
-          <SelectItem v-for="path in allPaths" :key="path" :value="path">
+          <SelectItem v-for="path in currentPathesList" :key="path" :value="path">
             {{ renderDate(path) }}
           </SelectItem>
         </SelectGroup>

src/pages/cosmic/gravity_wave/perday.vue

@@ -4,7 +4,7 @@
       "title":"COSMIC单次",
       "description":"COSMIC重力波单次",
       "group":"COSMIC",
-      "item_name":"重力波单次"
+      "item_name":"重力波提取"
     }
   }
 </route>
@@ -52,7 +52,7 @@ const queryUrl = computed(() => {
   const day_No = getDayOfYear(theDate)
   query.set('day', day_No.toString())
   query.set('mode', selected.mode)
-  return `/cosmic/render/single?${query}`
+  return `/cosmic/render/gravity_wave/perday?${query}`
 })
 </script>
 

src/pages/cosmic/planet_wave/daily.vue

@@ -1,9 +1,9 @@
 <route lang="json">
 {"meta":{
   "title":"COSMIC",
-  "description":"行星波月统计",
+  "description":"行星波统计",
   "group":"COSMIC",
-  "item_name":"行星波月统计"
+  "item_name":"行星波统计"
 }}
 </route>
 
@@ -16,7 +16,7 @@ const selectedT = ref<'5' | '10' | '16'>('5')
 const fetchUrl = computed(() => {
   const query = new URLSearchParams()
   query.set('T_', selectedT.value)
-  return `${API_BASE_URL}/cosmic/temp_render?${query}`
+  return `${API_BASE_URL}/cosmic/render/planet_wave/daily?${query}`
 })
 </script>
 

src/pages/debug.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="grid grid-cols-3">
+    <pre>
+      {{ JSON.stringify($router.getRoutes(), null, 4) }}
+    </pre>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

src/pages/radar/v1.vue

@@ -1,4 +1,4 @@
-<route lang="json">
+<!-- <route lang="json">
 {
   "meta": {
     "title": "流星雷达-热力图",
@@ -7,7 +7,7 @@
     "item_name": "热力图"
   }
 }
-</route>
+</route> -->
 
 <script setup lang="ts">
 import { API_BASE_URL } from '~/CONSTANT'

src/pages/radar/v2.vue

@@ -1,4 +1,4 @@
-<route lang="json">
+<!-- <route lang="json">
 {
   "meta": {
     "title": "流星雷达-潮汐波时空变化",
@@ -7,7 +7,7 @@
     "item_name": "潮汐波时空变化"
   }
 }
-</route>
+</route> -->
 
 <script setup lang="ts">
 import { API_BASE_URL } from '~/CONSTANT'

src/pages/saber/gravity_wave/monthly.vue

@@ -0,0 +1,11 @@
+<route lang="yaml">
+  meta:
+    title: Saber 重力波月统计
+    description: Saber 重力波月统计
+    group: Saber
+    item_name: 重力波月统计
+  </route>
+
+<template>
+  <Month_power_wave_plot />
+</template>

src/pages/saber/gravity_wave/perday.vue

@@ -1,3 +1,11 @@
+<route lang="yaml">
+meta:
+  title: Saber 重力波单日
+  description: Saber 重力波单日
+  group: Saber
+  item_name: 重力波单日
+</route>
+
 <script setup lang="ts">
 import Day_cycle_power_wave_plot from '~/components/dense/saber/day_cycle_power_wave_plot.vue'
 import Day_fft_ifft_plot from '~/components/dense/saber/day_fft_ifft_plot.vue'

src/pages/saber/gw/stats.vue

@@ -1,3 +0,0 @@
-<template>
-  <Month_power_wave_plot />
-</template>

src/pages/saber/planet_wave/monthly.vue

@@ -0,0 +1,65 @@
+<route lang="json">
+  {
+    "meta":{
+      "title":"Saber 行星波月统计",
+      "description":"Saber 行星波月统计",
+      "group":"Saber",
+      "item_name":"行星波月统计"
+    }
+  }
+</route>
+
+<script setup lang="ts">
+import { API_BASE_URL } from '~/CONSTANT'
+
+const selected = reactive({
+  year: '2018',
+  T: '16',
+})
+
+const queryUrl = computed(() => {
+  const q = new URLSearchParams()
+  q.set('year', selected.year)
+  q.set('T', selected.T.toString())
+  return `${API_BASE_URL}/saber/render/planet_wave/per_year/energy_plot?${q}`
+})
+</script>
+
+<template>
+  <DenseFramework :image-query="queryUrl">
+    <Label>年份</Label>
+    <Select v-model="selected.year">
+      <SelectTrigger>
+        <SelectValue placeholder="选择年份" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectGroup>
+          <SelectLabel>年份</SelectLabel>
+          <SelectItem v-for="year in ['2018', '2015']" :key="year" :value="year">
+            {{ year }}
+          </SelectItem>
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+    <Label>时间窗口大小</Label>
+    <!-- can be 5，10,16 -->
+    <!-- use Tabs -->
+    <Tabs v-model="selected.T" default-value="16">
+      <TabsList class="grid grid-cols-3 w-full">
+        <TabsTrigger value="5">
+          5
+        </TabsTrigger>
+        <TabsTrigger value="10">
+          10
+        </TabsTrigger>
+        <TabsTrigger value="16">
+          16
+        </TabsTrigger>
+      </TabsList>
+    </Tabs>
+  </DenseFramework>
+</template>
+
+<style scoped>
+
+</style>

src/pages/tidi/gravity_wave/monthly.vue

@@ -1,10 +1,10 @@
 <route lang="json">
   {
     "meta":{
-      "title":"TIDI月统计",
-      "description":"TIDI月统计",
+      "title":"TIDI 重力波统计",
+      "description":"TIDI 重力波统计",
       "group":"TIDI",
-      "item_name":"月统计"
+      "item_name":"重力波统计"
     }
   }
 </route>
@@ -12,7 +12,7 @@
 <script setup lang="ts">
 const selected = reactive({
   year: '2015',
-  mode: 'v1',
+  mode: 'monthly_height',
   lat_range: '0 ~ 20',
 })
 
@@ -23,7 +23,7 @@ const queryUrl = computed(() => {
   const query = new URLSearchParams()
   query.set('year', selected.year)
   const mode = selected.mode
-  return `/tidi/render/month_stats_${mode}?${query}`
+  return `/tidi/render/gravity_wave/${mode}?${query}`
 })
 
 onMounted(async () => {
@@ -40,10 +40,10 @@ onMounted(async () => {
     <Label>选择模式</Label>
     <Tabs v-model="selected.mode" default-value="v1">
       <TabsList class="grid grid-cols-1 w-full">
-        <TabsTrigger value="v1">
+        <TabsTrigger value="monthly_height">
           重力波势能(取log)随高度变化热力图
         </TabsTrigger>
-        <TabsTrigger value="v2">
+        <TabsTrigger value="monthly_energy">
           重力波势能(取log)变化折线图
         </TabsTrigger>
       </TabsList>

src/pages/tidi/planet_wave/daily.vue

@@ -4,8 +4,7 @@
     "title":"TIDI 行星波振幅",
     "icon":"mdi:telescope",
     "group":"TIDI",
-    "item_name":"行星波振幅"
-
+    "item_name":"行星波提取"
   }
 }
 </route>
@@ -13,14 +12,18 @@
 <script setup lang="ts">
 import { API_BASE_URL } from '~/CONSTANT'
 
-const selectedMode = ref('V_Meridional')
-
 const years = ref([] as string[])
+const ranges = ['0 ~ 5', '5 ~ 10', '10 ~ 15', '15 ~ 20']
+const heights = [70, 72.5, 75, 77.5, 80, 82.5, 85, 87.5, 90, 92.5, 95, 97.5, 100, 102.5, 105, 107.5, 110, 112.5, 115, 117.5, 120].map(String)
+
+const selectedMode = ref('V_Meridional')
 const selectedYear = ref('2017')
 
 // const k = [ -4,-3,-2,-1,0,1,2,3,4]
 const selectedK = ref(0)
 const selectedT = ref('5')
+const selectedRange = ref('0 ~ 5')
+const selectedHeight = ref('70')
 
 const queryUrl = computed(() => {
   const query = new URLSearchParams()
@@ -28,7 +31,9 @@ const queryUrl = computed(() => {
   query.set('year', selectedYear.value)
   query.set('k', selectedK.value.toString())
   query.set('T', selectedT.value.toString())
-  return `${API_BASE_URL}/tidi/render/wave?${query}`
+  query.set('lat_range', selectedRange.value)
+  query.set('height', selectedHeight.value)
+  return `${API_BASE_URL}/tidi/render/planet_wave/daily?${query}`
 })
 
 onMounted(async () => {
@@ -82,6 +87,34 @@ onMounted(async () => {
           <NumberFieldDecrement />
         </NumberFieldContent>
       </NumberField>
+      <Label>高度</Label>
+      <Select v-model="selectedHeight">
+        <SelectTrigger>
+          <SelectValue placeholder="选择高度" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectGroup>
+            <SelectLabel>高度</SelectLabel>
+            <SelectItem v-for="height in heights" :key="height" :value="height">
+              {{ height }}
+            </SelectItem>
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+      <Label>纬度范围</Label>
+      <Select v-model="selectedRange">
+        <SelectTrigger>
+          <SelectValue placeholder="选择纬度范围" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectGroup>
+            <SelectLabel>纬度范围</SelectLabel>
+            <SelectItem v-for="range in ranges" :key="range" :value="range">
+              {{ range }}
+            </SelectItem>
+          </SelectGroup>
+        </SelectContent>
+      </Select>
       <Label>滑动窗口 T</Label>
       <Tabs v-model:model-value="selectedT" default-value="15">
         <TabsList class="grid grid-cols-3 w-full">

typed-router.d.ts

@@ -21,19 +21,21 @@ declare module 'vue-router/auto-routes' {
     '/': RouteRecordInfo<'/', '/', Record<never, never>, Record<never, never>>,
     '/[...all]': RouteRecordInfo<'/[...all]', '/:all(.*)', { all: ParamValue<true> }, { all: ParamValue<false> }>,
     '/auth': RouteRecordInfo<'/auth', '/auth', Record<never, never>, Record<never, never>>,
-    '/balloon/single': RouteRecordInfo<'/balloon/single', '/balloon/single', Record<never, never>, Record<never, never>>,
-    '/balloon/year': RouteRecordInfo<'/balloon/year', '/balloon/year', Record<never, never>, Record<never, never>>,
-    '/cosmic/single': RouteRecordInfo<'/cosmic/single', '/cosmic/single', Record<never, never>, Record<never, never>>,
-    '/cosmic/stats': RouteRecordInfo<'/cosmic/stats', '/cosmic/stats', Record<never, never>, Record<never, never>>,
-    '/radar/PW-single': RouteRecordInfo<'/radar/PW-single', '/radar/PW-single', Record<never, never>, Record<never, never>>,
-    '/radar/PW-stats': RouteRecordInfo<'/radar/PW-stats', '/radar/PW-stats', Record<never, never>, Record<never, never>>,
-    '/radar/TW-single': RouteRecordInfo<'/radar/TW-single', '/radar/TW-single', Record<never, never>, Record<never, never>>,
-    '/radar/TW-stats': RouteRecordInfo<'/radar/TW-stats', '/radar/TW-stats', Record<never, never>, Record<never, never>>,
+    '/balloon/gravity_wave/single': RouteRecordInfo<'/balloon/gravity_wave/single', '/balloon/gravity_wave/single', Record<never, never>, Record<never, never>>,
+    '/balloon/gravity_wave/year': RouteRecordInfo<'/balloon/gravity_wave/year', '/balloon/gravity_wave/year', Record<never, never>, Record<never, never>>,
+    '/cosmic/gravity_wave/perday': RouteRecordInfo<'/cosmic/gravity_wave/perday', '/cosmic/gravity_wave/perday', Record<never, never>, Record<never, never>>,
+    '/cosmic/planet_wave/daily': RouteRecordInfo<'/cosmic/planet_wave/daily', '/cosmic/planet_wave/daily', Record<never, never>, Record<never, never>>,
+    '/debug': RouteRecordInfo<'/debug', '/debug', Record<never, never>, Record<never, never>>,
+    '/radar/planet_wave/single': RouteRecordInfo<'/radar/planet_wave/single', '/radar/planet_wave/single', Record<never, never>, Record<never, never>>,
+    '/radar/planet_wave/stats': RouteRecordInfo<'/radar/planet_wave/stats', '/radar/planet_wave/stats', Record<never, never>, Record<never, never>>,
+    '/radar/tidal_wave/single': RouteRecordInfo<'/radar/tidal_wave/single', '/radar/tidal_wave/single', Record<never, never>, Record<never, never>>,
+    '/radar/tidal_wave/stats': RouteRecordInfo<'/radar/tidal_wave/stats', '/radar/tidal_wave/stats', Record<never, never>, Record<never, never>>,
     '/radar/v1': RouteRecordInfo<'/radar/v1', '/radar/v1', Record<never, never>, Record<never, never>>,
     '/radar/v2': RouteRecordInfo<'/radar/v2', '/radar/v2', Record<never, never>, Record<never, never>>,
-    '/saber/gw/single': RouteRecordInfo<'/saber/gw/single', '/saber/gw/single', Record<never, never>, Record<never, never>>,
-    '/saber/gw/stats': RouteRecordInfo<'/saber/gw/stats', '/saber/gw/stats', Record<never, never>, Record<never, never>>,
-    '/tidi/month_stats': RouteRecordInfo<'/tidi/month_stats', '/tidi/month_stats', Record<never, never>, Record<never, never>>,
-    '/tidi/waves': RouteRecordInfo<'/tidi/waves', '/tidi/waves', Record<never, never>, Record<never, never>>,
+    '/saber/gravity_wave/monthly': RouteRecordInfo<'/saber/gravity_wave/monthly', '/saber/gravity_wave/monthly', Record<never, never>, Record<never, never>>,
+    '/saber/gravity_wave/perday': RouteRecordInfo<'/saber/gravity_wave/perday', '/saber/gravity_wave/perday', Record<never, never>, Record<never, never>>,
+    '/saber/planet_wave/monthly': RouteRecordInfo<'/saber/planet_wave/monthly', '/saber/planet_wave/monthly', Record<never, never>, Record<never, never>>,
+    '/tidi/gravity_wave/monthly': RouteRecordInfo<'/tidi/gravity_wave/monthly', '/tidi/gravity_wave/monthly', Record<never, never>, Record<never, never>>,
+    '/tidi/planet_wave/daily': RouteRecordInfo<'/tidi/planet_wave/daily', '/tidi/planet_wave/daily', Record<never, never>, Record<never, never>>,
   }
 }