fix

src/components/AMapClient.vue

@@ -33,6 +33,9 @@ const apiKey = import.meta.env.VITE_AMAP_API_KEY
 const { options, currentFocus, getImageUrl, getHeatPoints } = useOptions()
 
 watch(options, async () => {
+  await updateMap()
+})
+async function updateMap() {
   if (!map || !amapInstance) {
     return
   }
@@ -48,8 +51,7 @@ watch(options, async () => {
   if (mode === 'image') {
     await updateMapImage()
   }
-})
-
+}
 watch(currentFocus, (newFocus) => {
   if (!newFocus) {
     return
@@ -157,6 +159,8 @@ onMounted(async () => {
       })
       infoWindow.open(map!, e.lnglat)
     })
+
+    await updateMap()
   }
 })
 </script>

src/components/OptForm.vue

@@ -9,7 +9,7 @@ import {
   parseDate,
 } from '@internationalized/date'
 
-const df = new DateFormatter('en-US', {
+const df = new DateFormatter('zh-CN', {
   dateStyle: 'long',
 })
 
@@ -145,6 +145,7 @@ const isTargetDateDisabled = computed(() => {
                 v-model="castBeginDate" class="z-300"
                 initial-focus :is-date-disabled="isDateDisabled"
                 prevent-deselect
+                locale="zh-CN"
               />
             </PopoverContent>
           </Popover>
@@ -171,6 +172,7 @@ const isTargetDateDisabled = computed(() => {
                 class="z-300" initial-focus
                 :is-date-disabled="isTargetDateDisabled"
                 prevent-deselect
+                locale="zh-CN"
               />
             </PopoverContent>
           </Popover>

src/components/PosForm.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+const emit = defineEmits(['setFocus'])
+
 const {
   currentTcLoc,
   currentFocus,
@@ -7,6 +9,7 @@ const {
 function jump(postion: [number, number]) {
   const getter = () => postion
   currentFocus.value = getter
+  emit('setFocus')
 }
 function getPostionText(position: [number, number]) {
   const [x, y] = position
@@ -25,10 +28,8 @@ function getPostionText(position: [number, number]) {
 </script>
 
 <template>
-  <fieldset class="grid gap-6 border rounded-lg p-4">
-    <legend class="px-1 text-sm font-medium -ml-1">
-      预报台风
-    </legend>
+  <fieldset class="grid gap-2 border rounded-lg p-4">
+    <Label class="px-2 pt-3 text-center">台风位置</Label>
     <Table v-if="currentTcLoc">
       <!-- <TableCaption>预报台风</TableCaption> -->
       <TableHeader>
@@ -36,7 +37,7 @@ function getPostionText(position: [number, number]) {
           <TableHead>Lat </TableHead>
           <TableHead>Lon</TableHead>
           <TableHead class="text-right">
-            操作
+            操作 &nbsp;&nbsp;&nbsp;
           </TableHead>
         </TableRow>
       </TableHeader>

src/composables/dateOpt.ts

@@ -27,6 +27,7 @@ function _useOptions() {
     }
     if (options.castDayNo >= 29) {
       autoPlayer.pause()
+      setTargetDate(castBeginDate.value!.add({ days: 1 }))
     }
     setTargetDate(castTargetDate.value!.add({ days: 1 }))
     castTargetDate.value = castTargetDate.value?.add({ days: 1 })

src/layouts/map.vue

@@ -6,6 +6,7 @@ import Colorbar from '../assets/colorbar.png'
 const { autoPlayer, options, castBeginDate, castTargetDate } = useOptions()
 
 const isPlaying = ref(false)
+const posOpen = ref(false)
 
 const dark = useDark()
 
@@ -77,30 +78,6 @@ function flipDark() {
                 <img :src="Colorbar" mx-auto max-h="60px">
               </div>
               <div grid="~ cols-2 gap-4">
-                <Drawer class="z-100">
-                  <DrawerTrigger as-child>
-                    <Button size="icon" variant="outline" class="w-full md:hidden">
-                      <span class="i-mingcute-typhoon-fill size-4" />
-                      <span class="">台风列表</span>
-                    </Button>
-                  </DrawerTrigger>
-                  <DrawerContent class="z-200 max-h-[80vh] p-5">
-                    <DrawerHeader>
-                      <DrawerTitle>台风列表</DrawerTitle>
-                      <DrawerDescription>
-                        点击可以跳转
-                      </DrawerDescription>
-                    </DrawerHeader>
-                    <PosForm />
-                    <DrawerClose as-child>
-                      <div class="py-3">
-                        <Button class="w-full">
-                          取消
-                        </Button>
-                      </div>
-                    </DrawerClose>
-                  </DrawerContent>
-                </Drawer>
                 <Drawer class="z-100">
                   <DrawerTrigger as-child>
                     <Button size="icon" variant="outline" class="w-full md:hidden">
@@ -125,6 +102,34 @@ function flipDark() {
                     </DrawerClose>
                   </DrawerContent>
                 </Drawer>
+                <Drawer v-model:open="posOpen" class="z-100">
+                  <DrawerTrigger as-child>
+                    <Button size="icon" variant="outline" class="w-full md:hidden">
+                      <span class="i-mingcute-typhoon-fill size-4" />
+                      <span class="">台风列表</span>
+                    </Button>
+                  </DrawerTrigger>
+                  <DrawerContent class="z-200 max-h-[80vh] p-5">
+                    <DrawerHeader>
+                      <DrawerTitle>台风列表</DrawerTitle>
+                      <DrawerDescription>
+                        点击可以跳转
+                      </DrawerDescription>
+                    </DrawerHeader>
+                    <PosForm
+                      @set-focus="() => {
+                        posOpen = false
+                      }"
+                    />
+                    <DrawerClose as-child>
+                      <div class="py-3">
+                        <Button class="w-full">
+                          取消
+                        </Button>
+                      </div>
+                    </DrawerClose>
+                  </DrawerContent>
+                </Drawer>
               </div>
               <div>
                 <Button