diff --git a/components.d.ts b/components.d.ts
index 647a590..da4b015 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -54,7 +54,6 @@ declare module 'vue' {
     Collapsible: typeof import('./src/components/ui/collapsible/Collapsible.vue')['default']
     CollapsibleContent: typeof import('./src/components/ui/collapsible/CollapsibleContent.vue')['default']
     CollapsibleTrigger: typeof import('./src/components/ui/collapsible/CollapsibleTrigger.vue')['default']
-    CoolBack: typeof import('./src/components/CoolBack.vue')['default']
     DenseFramework: typeof import('./src/components/DenseFramework.vue')['default']
     Drawer: typeof import('./src/components/ui/drawer/Drawer.vue')['default']
     DrawerContent: typeof import('./src/components/ui/drawer/DrawerContent.vue')['default']
@@ -116,7 +115,6 @@ declare module 'vue' {
     NumberFieldDecrement: typeof import('./src/components/ui/number-field/NumberFieldDecrement.vue')['default']
     NumberFieldIncrement: typeof import('./src/components/ui/number-field/NumberFieldIncrement.vue')['default']
     NumberFieldInput: typeof import('./src/components/ui/number-field/NumberFieldInput.vue')['default']
-    Paper: typeof import('./src/components/Paper.vue')['default']
     ParamsCard: typeof import('./src/components/ParamsCard.vue')['default']
     Popover: typeof import('./src/components/ui/popover/Popover.vue')['default']
     PopoverContent: typeof import('./src/components/ui/popover/PopoverContent.vue')['default']
@@ -177,14 +175,10 @@ declare module 'vue' {
     TabsContent: typeof import('./src/components/ui/tabs/TabsContent.vue')['default']
     TabsList: typeof import('./src/components/ui/tabs/TabsList.vue')['default']
     TabsTrigger: typeof import('./src/components/ui/tabs/TabsTrigger.vue')['default']
-    TestHeader: typeof import('./src/components/TestHeader.vue')['default']
     Textarea: typeof import('./src/components/ui/textarea/Textarea.vue')['default']
-    TheFooter: typeof import('./src/components/TheFooter.vue')['default']
-    TheHeader: typeof import('./src/components/TheHeader.vue')['default']
     Tooltip: typeof import('./src/components/ui/tooltip/Tooltip.vue')['default']
     TooltipContent: typeof import('./src/components/ui/tooltip/TooltipContent.vue')['default']
     TooltipProvider: typeof import('./src/components/ui/tooltip/TooltipProvider.vue')['default']
     TooltipTrigger: typeof import('./src/components/ui/tooltip/TooltipTrigger.vue')['default']
-    TopHeader: typeof import('./src/components/TopHeader.vue')['default']
   }
 }
diff --git a/src/App.vue b/src/App.vue
index 79ba9f5..d509dff 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -141,6 +141,10 @@ const data = {
           title: '行星波月统计',
           url: '/cosmic/stats',
         },
+        {
+          title: '行星波单次',
+          url: '/cosmic/single',
+        },
       ],
     },
   ],
diff --git a/src/CONSTANT.ts b/src/CONSTANT.ts
index 78b053a..2e3de48 100644
--- a/src/CONSTANT.ts
+++ b/src/CONSTANT.ts
@@ -1,3 +1,3 @@
 // export const API_BASE_URL = 'http://localhost:5000'
-export const API_BASE_URL = 'http://localhost:18200'
+export const API_BASE_URL = import.meta.env.PROD ? 'https://gca-api.dustella.net:8443' : 'http://localhost:18200'
 // export const API_BASE_URL = 'https://gca-api.dustella.net:8443'
diff --git a/src/components/AuthBlock.vue b/src/components/AuthBlock.vue
index 87a08b1..3ab87fe 100644
--- a/src/components/AuthBlock.vue
+++ b/src/components/AuthBlock.vue
@@ -56,7 +56,11 @@ function auth() {
             <Input id="password" v-model="code" type="password" required />
           </div>
           <div flex="~ items-center gap-2">
-            <Checkbox id="remember" v-model="remember" />
+            <Checkbox
+              id="remember" :checked="remember" @update:checked="(state) => {
+                remember = state
+              }"
+            />
             <Label for="remember" class="flex items-center">
               记住我
             </Label>
diff --git a/src/pages/cosmic/single.vue b/src/pages/cosmic/single.vue
new file mode 100644
index 0000000..52c33da
--- /dev/null
+++ b/src/pages/cosmic/single.vue
@@ -0,0 +1,110 @@
+<route lang='json'>
+  {
+    "meta":{
+      "title":"COSMIC单次",
+      "description":"COSMIC重力波单次",
+      "group":"COSMIC",
+      "item_name":"重力波单次"
+    }
+  }
+</route>
+
+<script setup lang="ts">
+import {
+  CalendarDate,
+  createCalendar,
+  DateFormatter,
+  type DateValue,
+  getLocalTimeZone,
+  toCalendar,
+} from '@internationalized/date'
+import { Calendar as CalendarIcon } from 'lucide-vue-next'
+import { ref } from 'vue'
+import { cn } from '~/lib/utils'
+
+function getDayOfYear(date: Date) {
+  const start = new Date(date.getFullYear(), 0, 0)
+  // @ts-expect-error date - start
+  const diff = date - start
+  const oneDay = 1000 * 60 * 60 * 24
+  return Math.floor(diff / oneDay)
+}
+const df = new DateFormatter('zh-CN', {
+  dateStyle: 'long',
+})
+
+const selected = reactive({
+  year: '2008',
+  day: '1',
+  mode: 'mean_ktemp_Nz',
+})
+
+const value = ref<DateValue>(
+)
+
+onMounted(() => {
+  value.value = toCalendar(new CalendarDate(2008, 1, 1), createCalendar('zh-CN'))
+})
+const queryUrl = computed(() => {
+  const query = new URLSearchParams()
+  query.set('year', selected.year)
+  const theDate = value.value?.toDate(getLocalTimeZone()) ?? new Date(2008, 1, 1)
+  const day_No = getDayOfYear(theDate)
+  query.set('day', day_No.toString())
+  query.set('mode', selected.mode)
+  return `/cosmic/render/single?${query}`
+})
+</script>
+
+<template>
+  <DenseFramework :image-query="queryUrl">
+    <Label>模式</Label>
+    <Tabs v-model:model-value="selected.mode">
+      <TabsList class="grid grid-cols-1 w-full">
+        <TabsTrigger value="mean_ktemp_Nz">
+          平均浮力频率和平均势能随高度变化
+        </TabsTrigger>
+        <TabsTrigger value="mean_ktemp_Ptz">
+          平均势能（mean_ktemp_Ptz）随高度变化
+        </TabsTrigger>
+      </TabsList>
+    </Tabs>
+    <Label>年份</Label>
+    <Select v-model="selected.year">
+      <SelectTrigger>
+        <SelectValue placeholder="Select a year" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectGroup>
+          <SelectLabel>年份</SelectLabel>
+          <SelectItem value="2008">
+            2008
+          </SelectItem>
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+    <Label>日期</Label>
+    <Popover>
+      <PopoverTrigger as-child>
+        <Button
+          variant="outline"
+          :class="cn(
+            'w-full justify-start text-left font-normal',
+            !value && 'text-muted-foreground',
+          )"
+        >
+          <CalendarIcon class="mr-2 h-4 w-4" />
+          {{ value ? df.format(value.toDate(getLocalTimeZone())) : "选择日期" }}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent class="w-auto p-0">
+        <!-- @ts-expect-error dsa -->
+        <Calendar v-model="value " initial-focus />
+      </PopoverContent>
+    </Popover>
+  </DenseFramework>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/typed-router.d.ts b/typed-router.d.ts
index bf614c7..24540fa 100644
--- a/typed-router.d.ts
+++ b/typed-router.d.ts
@@ -23,6 +23,7 @@ declare module 'vue-router/auto-routes' {
     '/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/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>>,