diff --git a/auto-imports.d.ts b/auto-imports.d.ts
index ce2b6d5..b4500cf 100644
--- a/auto-imports.d.ts
+++ b/auto-imports.d.ts
@@ -38,6 +38,7 @@ declare global {
   const getCurrentInstance: typeof import('vue')['getCurrentInstance']
   const getCurrentScope: typeof import('vue')['getCurrentScope']
   const h: typeof import('vue')['h']
+  const hasConnection: typeof import('./src/composables/online')['hasConnection']
   const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
   const inject: typeof import('vue')['inject']
   const injectLocal: typeof import('@vueuse/core')['injectLocal']
@@ -335,6 +336,7 @@ declare module 'vue' {
     readonly getCurrentInstance: UnwrapRef<typeof import('vue')['getCurrentInstance']>
     readonly getCurrentScope: UnwrapRef<typeof import('vue')['getCurrentScope']>
     readonly h: UnwrapRef<typeof import('vue')['h']>
+    readonly hasConnection: UnwrapRef<typeof import('./src/composables/online')['hasConnection']>
     readonly ignorableWatch: UnwrapRef<typeof import('@vueuse/core')['ignorableWatch']>
     readonly inject: UnwrapRef<typeof import('vue')['inject']>
     readonly injectLocal: UnwrapRef<typeof import('@vueuse/core')['injectLocal']>
diff --git a/src/App.vue b/src/App.vue
index aa50e72..5fe6f05 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -100,7 +100,20 @@ const data = {
         },
       ],
     },
+    {
+      title: 'TIDI',
+      url: '#',
+      icon: 'mdi:telescope',
+      isActive: true,
+      items: [
+        {
+          title: '波动',
+          url: '/tidi/waves',
+        },
+      ],
+    },
   ],
+
   关于: [
     {
       name: 'Design Engineering',
diff --git a/src/pages/radar/v1.vue b/src/pages/radar/v1.vue
index 1e69b18..71705a5 100644
--- a/src/pages/radar/v1.vue
+++ b/src/pages/radar/v1.vue
@@ -19,7 +19,7 @@ const selectedDateType = ref('day')
 const selectedStation = ref('武汉左岭镇站')
 const selectedYear = ref('2017')
 const selectedWindType = ref('uwind')
-const selectedH = ref(90000)
+const selectedH = ref(94000)
 const selectedDate = ref('20170316')
 const selectedMonth = ref('1')
 
@@ -55,6 +55,7 @@ const queryUrl = computed(() => {
   query.set('model_name', mode)
   query.set('wind_type', windType)
   query.set('H', selectedH.value.toString())
+  query.set('mode', selectedDateType.value)
   if (selectedDateType.value === 'day') {
     const queryDay = `${selectedDate.value.slice(0, 4)}-${selectedDate.value.slice(4, 6)}-${selectedDate.value.slice(6, 8)}`
     query.set('day', queryDay)
@@ -87,8 +88,8 @@ onMounted(async () => {
   const data = await resp.json()
   // use regex to extract the year from the path,
   // ./radar/data\\武汉左岭镇站\\2017\\ZLT_MET01_DLL_L21_01D_20170316.txt
-  const station_pattern = /data\\(.*?)\\/
-  const year_pattern = /(\d{4})\\ZLT_/
+  const station_pattern = /data\/(.*?)\//
+  const year_pattern = /(\d{4})\/ZLT_/
   const date_pattern = /01D_(\d{8})\.txt/
   const pairs = data.map((source_text: string) => {
     const station = source_text.match(station_pattern)?.[1]
@@ -179,7 +180,7 @@ onMounted(async () => {
           id="start"
           v-model:model-value="selectedH" :format-options="{
             useGrouping: false,
-          }" :default-value="90000"
+          }" :default-value="94000"
         >
           <NumberFieldContent>
             <NumberFieldDecrement />
diff --git a/src/pages/radar/v2.vue b/src/pages/radar/v2.vue
index 58a318b..37145c5 100644
--- a/src/pages/radar/v2.vue
+++ b/src/pages/radar/v2.vue
@@ -13,9 +13,11 @@
 import type { ImageResult } from '~/components/ImageContainer.vue'
 import { API_BASE_URL } from '~/CONSTANT'
 
-const selectedMode = ref('潮汐波')
+const selectedMode = ref('2日行星波')
+const selectedWave = ref('潮汐波')
 const selectedStation = ref('武汉左岭镇站')
 const selectedYear = ref('2017')
+const selectedMonthRange = reactive({ start: '1', end: '12' })
 const imageResult = reactive<ImageResult>({
   result: 'idle',
   imageUrl: '',
@@ -23,7 +25,6 @@ const imageResult = reactive<ImageResult>({
 })
 
 const modes = [
-  '潮汐波',
   '2日行星波',
   '5日行星波',
   '10日行星波',
@@ -35,15 +36,18 @@ const stations = ref<Set<string>>(new Set())
 const years = ref<Set<string>>(new Set())
 
 const queryUrl = computed(() => {
-  const station = encodeURIComponent(selectedStation.value)
-  const year = encodeURIComponent(selectedYear.value)
-  const mode = encodeURIComponent(selectedMode.value)
-  const query = `?station=${station}&year=${year}&model_name=${mode}`
-  const path = `${API_BASE_URL}/radar/render/v2${query}`
+  // const query = `?station=${station}&year=${year}&model_name=${mode}`
+  const query = new URLSearchParams()
+  query.set('station', selectedStation.value)
+  query.set('year', selectedYear.value)
+  query.set('model_name', selectedWave.value === '潮汐波' ? '潮汐波' : selectedMode.value)
+  query.set('start_month', selectedMonthRange.start)
+  query.set('end_month', selectedMonthRange.end)
+  const path = `${API_BASE_URL}/radar/render/changes?${query}`
   return path
 })
 
-const { onFetchResponse, isFetching, execute } = useFetch(queryUrl, { refetch: true })
+const { onFetchResponse, isFetching, execute } = useFetch(queryUrl, { immediate: false })
 
 onFetchResponse(async (resp) => {
   const blob = await resp.blob()
@@ -63,8 +67,8 @@ onMounted(async () => {
   const data = await resp.json()
   // use regex to extract the year from the path,
   // ./radar/data\\武汉左岭镇站\\2017\\ZLT_MET01_DLL_L21_01D_20170316.txt
-  const station_pattern = /data\\(.*?)\\/
-  const year_pattern = /(\d{4})\\ZLT_/
+  const station_pattern = /data\/(.*?)\//
+  const year_pattern = /(\d{4})\/ZLT_/
   const pairs = data.map((source_text: string) => {
     const station = source_text.match(station_pattern)?.[1]
     const year = source_text.match(year_pattern)?.[1]
@@ -86,19 +90,28 @@ onMounted(async () => {
   <DenseFramework :image-result="imageResult" @submit="execute">
     <div>
       <div flex="~ col items-stretch gap-3" py-3>
-        <Select v-model="selectedMode">
-          <SelectTrigger>
-            <SelectValue placeholder="Select a fruit" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectGroup>
-              <SelectLabel>计算模式</SelectLabel>
-              <SelectItem v-for="mode in modes" :key="mode" :value="mode">
-                {{ mode }}
-              </SelectItem>
-            </SelectGroup>
-          </SelectContent>
-        </Select>
+        <Label>计算模式</Label>
+        <Tabs id="waves" v-model="selectedWave" default-value="潮汐波">
+          <TabsList class="grid grid-cols-2 w-full">
+            <TabsTrigger value="潮汐波">
+              潮汐波
+            </TabsTrigger>
+            <TabsTrigger value="行星波">
+              行星波
+            </TabsTrigger>
+          </TabsList>
+        </Tabs>
+        <div v-if="selectedWave === '行星波'">
+          <Label>行星波类型</Label>
+          <Tabs v-model="selectedMode" default-value="uwind">
+            <TabsList class="grid grid-cols-4 w-full">
+              <TabsTrigger v-for="m in modes" :key="m" :value="m">
+                {{ m.replace("行星波", "") }}
+              </TabsTrigger>
+            </TabsList>
+          </Tabs>
+        </div>
+        <Label>观测站</Label>
         <Select v-model="selectedStation">
           <SelectTrigger>
             <SelectValue placeholder="Select a fruit" />
@@ -112,19 +125,56 @@ onMounted(async () => {
             </SelectGroup>
           </SelectContent>
         </Select>
+        <Label>年份</Label>
         <Select v-model="selectedYear">
           <SelectTrigger>
             <SelectValue placeholder="Select a fruit" />
           </SelectTrigger>
           <SelectContent>
             <SelectGroup>
-              <SelectLabel>天</SelectLabel>
+              <SelectLabel>年</SelectLabel>
               <SelectItem v-for="year in years" :key="year" :value="year">
                 {{ year }}
               </SelectItem>
             </SelectGroup>
           </SelectContent>
         </Select>
+        <Label>起始月份</Label>
+        <Select v-model="selectedMonthRange.start">
+          <SelectTrigger>
+            <SelectValue placeholder="选择起始月" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              <SelectLabel>月</SelectLabel>
+              <SelectItem
+                v-for="month in [
+                  1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12,
+                ]" :key="month" :value="month.toString()"
+              >
+                {{ month }}
+              </SelectItem>
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+        <Label>终止月份</Label>
+        <Select v-model="selectedMonthRange.end">
+          <SelectTrigger>
+            <SelectValue placeholder="选择终止月" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              <SelectLabel>月</SelectLabel>
+              <SelectItem
+                v-for="month in [
+                  1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12,
+                ]" :key="month" :value="month.toString()"
+              >
+                {{ month }}
+              </SelectItem>
+            </SelectGroup>
+          </SelectContent>
+        </Select>
       </div>
     </div>
   </DenseFramework>
diff --git a/src/pages/tidi/waves.vue b/src/pages/tidi/waves.vue
new file mode 100644
index 0000000..5188b4c
--- /dev/null
+++ b/src/pages/tidi/waves.vue
@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import type { ImageResult } from '~/components/ImageContainer.vue'
+import { API_BASE_URL } from '~/CONSTANT'
+
+const imageResult = reactive<ImageResult>({
+  result: 'idle',
+  imageUrl: '',
+  message: '请你选择一个模式和日期',
+})
+
+const selectedMode = ref('V_Meridional')
+
+const years = ref([] as string[])
+const selectedYear = ref('2017')
+
+// const k = [ -4,-3,-2,-1,0,1,2,3,4]
+const selectedK = ref(0)
+const selectedT = ref(15)
+
+const queryUrl = computed(() => {
+  const query = new URLSearchParams()
+  query.set('mode', selectedMode.value)
+  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}`
+})
+
+const { execute, onFetchResponse, isFetching } = useFetch(queryUrl, { immediate: false })
+
+watch(isFetching, (fetching) => {
+  if (fetching) {
+    imageResult.result = 'pending'
+  }
+})
+
+onFetchResponse(async (resp) => {
+  const blob = await resp.blob()
+  const url = URL.createObjectURL(blob)
+  imageResult.result = 'success'
+  imageResult.imageUrl = url
+})
+
+onMounted(async () => {
+  const metas = await fetch(`${API_BASE_URL}/tidi/metadata`).then(resp => resp.json())
+  const _years = metas.path.map((a: string) => {
+    const year_pattern = /data\/(\d{4})\//
+    return a.match(year_pattern)?.[1]
+  })
+  _years.sort()
+  years.value = Array.from(new Set(_years))
+})
+</script>
+
+<template>
+  <DenseFramework :image-result="imageResult" @submit="execute">
+    <div flex="col gap-3 ~  justify-stretch">
+      <Label>计算模式</Label>
+      <Tabs id="modes" v-model="selectedMode" default-value="V_Meridional">
+        <TabsList class="grid grid-cols-2 w-full">
+          <TabsTrigger value="V_Meridional">
+            纬向风
+          </TabsTrigger>
+          <TabsTrigger value="V_Zonal">
+            经向风
+          </TabsTrigger>
+        </TabsList>
+      </Tabs>
+      <Label>年份</Label>
+      <Select v-model="selectedYear">
+        <SelectTrigger>
+          <SelectValue placeholder="选择年份" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectGroup>
+            <SelectLabel>年份</SelectLabel>
+            <SelectItem v-for="year in years" :key="year" :value="year">
+              {{ year }}
+            </SelectItem>
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+      <Label>波数 k</Label>
+      <NumberField
+        v-model="selectedK"
+        :max="4" :min="-4" :step="1"
+      >
+        <NumberFieldContent>
+          <NumberFieldIncrement />
+          <NumberFieldInput />
+          <NumberFieldDecrement />
+        </NumberFieldContent>
+      </NumberField>
+      <Label>滑动窗口 T</Label>
+      <Tabs v-model:model-value="selectedT" default-value="15">
+        <TabsList class="grid grid-cols-3 w-full">
+          <TabsTrigger value="5">
+            5
+          </TabsTrigger>
+          <TabsTrigger value="10">
+            10
+          </TabsTrigger>
+          <TabsTrigger value="15">
+            15
+          </TabsTrigger>
+        </TabsList>
+      </Tabs>
+    </div>
+  </DenseFramework>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/typed-router.d.ts b/typed-router.d.ts
index 828d443..be241ca 100644
--- a/typed-router.d.ts
+++ b/typed-router.d.ts
@@ -28,5 +28,6 @@ declare module 'vue-router/auto-routes' {
     '/saber/day_fft_ifft_plot': RouteRecordInfo<'/saber/day_fft_ifft_plot', '/saber/day_fft_ifft_plot', Record<never, never>, Record<never, never>>,
     '/saber/month_power_wave_plot': RouteRecordInfo<'/saber/month_power_wave_plot', '/saber/month_power_wave_plot', Record<never, never>, Record<never, never>>,
     '/saber/plot_wave_fitting': RouteRecordInfo<'/saber/plot_wave_fitting', '/saber/plot_wave_fitting', Record<never, never>, Record<never, never>>,
+    '/tidi/waves': RouteRecordInfo<'/tidi/waves', '/tidi/waves', Record<never, never>, Record<never, never>>,
   }
 }