some fix

src/components/DenseFramework.vue

@@ -55,6 +55,15 @@ onFetchError(async (error) => {
   imageResult.result = 'error'
   imageResult.message = error
 })
+
+function download() {
+  if (imageResult.result === 'success') {
+    const a = document.createElement('a')
+    a.href = imageResult.resourceId
+    a.download = 'image.png'
+    a.click()
+  }
+}
 </script>
 
 <template>
@@ -70,6 +79,7 @@ onFetchError(async (error) => {
             $emit('submit')
             execute()
           }"
+          @download="download"
         >
           <slot />
         </ParamsCard>

src/components/ImageContainer.vue

@@ -7,18 +7,9 @@ export interface ImageResult {
   message?: string
 }
 
-const props = defineProps<{
+defineProps<{
   imageResult: ImageResult
 }>()
-
-function download() {
-  if (props.imageResult.result === 'success') {
-    const a = document.createElement('a')
-    a.href = props.imageResult.resourceId
-    a.download = 'image.png'
-    a.click()
-  }
-}
 </script>
 
 <template>
@@ -34,10 +25,5 @@ function download() {
     <div v-else class="flex flex-1 items-center justify-center text-xl">
       {{ imageResult.message }}
     </div>
-
-    <Button type="submit" size="sm" class="ml-auto gap-1.5" @click.prevent="download">
-      下载图片
-      <CornerDownLeft class="size-3.5" />
-    </Button>
   </div>
 </template>

src/components/ParamsCard.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-defineEmits(['submit'])
+defineEmits(['submit', 'download'])
 </script>
 
 <template>
@@ -24,6 +24,9 @@ defineEmits(['submit'])
             <Button type="submit" class="mt-5 w-full" @click.prevent="$emit('submit')">
               绘制
             </Button>
+            <Button type="submit" class="mt-5 w-full" @click.prevent="$emit('download')">
+              下载
+            </Button>
           </div>
         </fieldset>
       </form>

src/pages/balloon/single.vue

@@ -8,8 +8,6 @@ meta:
 
 <script setup lang="ts">
 import type { ImageResult } from '~/components/ImageContainer.vue'
-import { useForm } from 'vee-validate'
-import { z } from 'zod'
 import { API_BASE_URL } from '~/CONSTANT'
 
 const modes = [
@@ -19,41 +17,37 @@ const modes = [
   '温度-水平风矢量图',
 ] as const
 
-const formSchema = shallowRef<z.ZodObject< any, any, any >>(z.object({
-  selectedMode: z.enum(modes).describe('选择一个模式'),
-  selectedDate: z.enum(['no date']).describe('选择一个日期'),
-}))
-
-const form = useForm()
-
-const stagedDates = ref<string[]>([])
+const allPaths = ref([] as string[])
+const selected = reactive({
+  selectedMode: '观测的二阶多项式拟合',
+  selectedPath: '',
+})
 
 onMounted(async () => {
   await baseFetch<string []>(`${API_BASE_URL}/balloon/metadata`).json().then(({ data }) => {
     const das = data.value!
-    stagedDates.value = das
-    formSchema.value = z.object({
-      selectedMode: z.enum(modes).describe('选择一个模式'),
-      selectedDate: z.enum(das.map((d: string) => {
-        const datePattern = /_\d{8}T\d{6}/
-        if (!datePattern.test(d)) {
-          return ''
-        }
-        const capture = datePattern.exec(d)
-        if (!capture) {
-          return ''
-        }
-        return capture[0]
-      })),
-    }).describe('选择一个日期')
-    form.setFieldValue('selectedDate', data.value![0])
-    form.setFieldValue('selectedMode', modes[0])
+    allPaths.value = das
   })
 })
 
+function renderDate(str: string) {
+  const datePattern = /_\d{8}T\d{6}_/
+  const date = str.match(datePattern)![0]
+  const utcstr = date.replaceAll('_', '')
+  const realTime = new Date(utcstr.replace(/(\d{4})(\d{2})(\d{2})T(\d{2})(\d{2})(\d{2})/, '$1-$2-$3T$4:$5:$6'))
+  return realTime.toLocaleString('zh', {
+    year: 'numeric',
+    month: 'long',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: 'numeric',
+    second: 'numeric',
+  })
+}
+
 const queryUrl = computed(() => {
-  const selectedMode = form.values.selectedMode
-  const selectedDate = stagedDates.value.find(d => d.includes(form.values.selectedDate))!
+  const selectedMode = selected.selectedMode
+  const selectedDate = selected.selectedPath
   return `${API_BASE_URL}/balloon/render/single?mode=${encodeURIComponent(selectedMode)}&path=${encodeURIComponent(selectedDate)}`
 })
 
@@ -87,15 +81,28 @@ async function customHandle(resp: Response) {
 
 <template>
   <DenseFramework :image-query="queryUrl" :extra-response-handle="customHandle">
-    <AutoForm
-      :form="form"
-      :field-config="{
-        selectedMode: {
-          component: 'radio',
-        },
-      }"
-      :schema="formSchema"
-    />
+    <Label>选择模式</Label>
+    <Tabs v-model="selected.selectedMode" default-value="观测的二阶多项式拟合">
+      <TabsList class="grid grid-cols-1 w-full">
+        <TabsTrigger v-for="m in modes" :key="m" :value="m">
+          {{ m }}
+        </TabsTrigger>
+      </TabsList>
+    </Tabs>
+    <Label>选择日期</Label>
+    <Select v-model="selected.selectedPath">
+      <SelectTrigger>
+        <SelectValue placeholder="选择日期" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectGroup>
+          <SelectLabel>日期</SelectLabel>
+          <SelectItem v-for="path in allPaths" :key="path" :value="path">
+            {{ renderDate(path) }}
+          </SelectItem>
+        </SelectGroup>
+      </SelectContent>
+    </Select>
   </DenseFramework>
 </template>