From 01916d6f67f3156933c9f348052cd7a08c0cd67d Mon Sep 17 00:00:00 2001
From: Dustella <fdnoaivj@outlook.com>
Date: Sat, 22 Feb 2025 14:47:20 +0800
Subject: [PATCH] fix: pos display and index

---
 src/auto-imports.d.ts         |  2 ++
 src/components/AMapClient.vue | 20 ++----------
 src/components/PosForm.vue    | 21 +++----------
 src/composables/position.ts   | 20 ++++++++++++
 src/pages/README.md           | 20 ------------
 src/pages/[...all].vue        | 14 ---------
 src/pages/about.md            | 21 -------------
 src/pages/hi/[name].vue       | 47 ----------------------------
 src/pages/index.vue           | 59 ++++++-----------------------------
 src/pages/map.vue             | 15 ---------
 src/typed-router.d.ts         |  5 ---
 11 files changed, 38 insertions(+), 206 deletions(-)
 create mode 100644 src/composables/position.ts
 delete mode 100644 src/pages/README.md
 delete mode 100755 src/pages/[...all].vue
 delete mode 100644 src/pages/about.md
 delete mode 100644 src/pages/hi/[name].vue
 delete mode 100644 src/pages/map.vue

diff --git a/src/auto-imports.d.ts b/src/auto-imports.d.ts
index 8e268a8..3b92a32 100644
--- a/src/auto-imports.d.ts
+++ b/src/auto-imports.d.ts
@@ -38,6 +38,7 @@ declare global {
   const extendRef: typeof import('@vueuse/core')['extendRef']
   const getCurrentInstance: typeof import('vue')['getCurrentInstance']
   const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const getPostionText: typeof import('./composables/position')['getPostionText']
   const h: typeof import('vue')['h']
   const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
   const inject: typeof import('vue')['inject']
@@ -345,6 +346,7 @@ declare module 'vue' {
     readonly extendRef: UnwrapRef<typeof import('@vueuse/core')['extendRef']>
     readonly getCurrentInstance: UnwrapRef<typeof import('vue')['getCurrentInstance']>
     readonly getCurrentScope: UnwrapRef<typeof import('vue')['getCurrentScope']>
+    readonly getPostionText: UnwrapRef<typeof import('./composables/position')['getPostionText']>
     readonly h: UnwrapRef<typeof import('vue')['h']>
     readonly ignorableWatch: UnwrapRef<typeof import('@vueuse/core')['ignorableWatch']>
     readonly inject: UnwrapRef<typeof import('vue')['inject']>
diff --git a/src/components/AMapClient.vue b/src/components/AMapClient.vue
index 92db04d..ba29d1e 100644
--- a/src/components/AMapClient.vue
+++ b/src/components/AMapClient.vue
@@ -5,6 +5,7 @@
 
 <script setup lang="ts">
 import { useOptions } from '@/composables/dateOpt'
+import { getPostionText } from '@/composables/position'
 import '@amap/amap-jsapi-types'
 
 let amapInstance: null | typeof AMap = null
@@ -13,21 +14,6 @@ let previousLayer: null | AMap.ImageLayer = null
 
 const FORCE_MODE_OVERRIDE = null as 'image' | 'heatmap' | null
 
-function getPostionText(position: [number, number]) {
-  const [x, y] = position
-  function getX() {
-    // add E or W
-    const suffix = x < 180 ? 'E°' : 'W°'
-    return `${x.toFixed(2)} ${suffix}`
-  }
-  function getY() {
-    // add N or S
-    const suffix = y < 0 ? 'S°' : 'N°'
-    return `${y.toFixed(2)} ${suffix}`
-  }
-  return { getX, getY }
-}
-
 const apiKey = import.meta.env.VITE_AMAP_API_KEY
 
 const { options, currentFocus, getImageUrl, getHeatPoints } = useOptions()
@@ -151,9 +137,9 @@ onMounted(async () => {
       const infoWindow = new amapInstance!.InfoWindow({
         content: `
           <div class="p-2 text-black">
-            ${getPostionText(position).getX()}
+            ${getPostionText(position).getLat()}
             ,
-            ${getPostionText(position).getY()}
+            ${getPostionText(position).getLon()}
           </div>
         `,
       })
diff --git a/src/components/PosForm.vue b/src/components/PosForm.vue
index 80ed212..e2d9fd1 100644
--- a/src/components/PosForm.vue
+++ b/src/components/PosForm.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
-const emit = defineEmits(['setFocus'])
+import { getPostionText } from '@/composables/position'
 
+const emit = defineEmits(['setFocus'])
 const {
   currentTcLoc,
   currentFocus,
@@ -11,20 +12,6 @@ function jump(postion: [number, number]) {
   currentFocus.value = getter
   emit('setFocus')
 }
-function getPostionText(position: [number, number]) {
-  const [x, y] = position
-  function getX() {
-    // add E or W
-    const suffix = x < 180 ? 'E°' : 'W°'
-    return `${x.toFixed(2)} ${suffix}`
-  }
-  function getY() {
-    // add N or S
-    const suffix = y < 0 ? 'S°' : 'N°'
-    return `${y.toFixed(2)} ${suffix}`
-  }
-  return { getX, getY }
-}
 </script>
 
 <template>
@@ -43,8 +30,8 @@ function getPostionText(position: [number, number]) {
       </TableHeader>
       <TableBody>
         <TableRow v-for="postion in currentTcLoc" :key="postion[0]">
-          <TableCell>{{ getPostionText(postion).getY() }}</TableCell>
-          <TableCell>{{ getPostionText(postion).getX() }}</TableCell>
+          <TableCell>{{ getPostionText(postion).getLat() }}</TableCell>
+          <TableCell>{{ getPostionText(postion).getLon() }}</TableCell>
           <TableCell class="text-right">
             <Button
               class="h-6 text-[13.2px]" variant="outline"
diff --git a/src/composables/position.ts b/src/composables/position.ts
new file mode 100644
index 0000000..652a9e1
--- /dev/null
+++ b/src/composables/position.ts
@@ -0,0 +1,20 @@
+export function getPostionText(position: [number, number]) {
+  /**
+   * @param {number[]} position
+   * @param {number} position[0] - longitude
+   * @param {number} position[1] - latitude
+   * @returns {object} { getLat: () => string, getLon: () => string }
+   */
+  const [x, y] = position
+  function getLon() {
+    // add E or W
+    const suffix = x < 180 ? 'E°' : 'W°'
+    return `${Math.abs(x < 180 ? x : 360 - x).toFixed(2)} ${suffix}`
+  }
+  function getLat() {
+    // add N or S
+    const suffix = y < 0 ? 'S°' : 'N°'
+    return `${Math.abs(y).toFixed(2)} ${suffix}`
+  }
+  return { getLon, getLat }
+}
diff --git a/src/pages/README.md b/src/pages/README.md
deleted file mode 100644
index fc8af25..0000000
--- a/src/pages/README.md
+++ /dev/null
@@ -1,20 +0,0 @@
-## File-based Routing
-
-Routes will be auto-generated for Vue files in this dir with the same file structure.
-Check out [`unplugin-vue-router`](https://github.com/posva/unplugin-vue-router) for more details.
-
-### Path Aliasing
-
-`@/` is aliased to `./src/` folder.
-
-For example, instead of having
-
-```ts
-import { isDark } from '../../../../composables'
-```
-
-now, you can use
-
-```ts
-import { isDark } from '@/composables'
-```
diff --git a/src/pages/[...all].vue b/src/pages/[...all].vue
deleted file mode 100755
index 673f718..0000000
--- a/src/pages/[...all].vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<script setup lang="ts">
-const { t } = useI18n()
-</script>
-
-<template>
-  <div>
-    {{ t('not-found') }}
-  </div>
-</template>
-
-<route lang="yaml">
-meta:
-  layout: 404
-</route>
diff --git a/src/pages/about.md b/src/pages/about.md
deleted file mode 100644
index 907d03d..0000000
--- a/src/pages/about.md
+++ /dev/null
@@ -1,21 +0,0 @@
----
-title: About
----
-
-<div class="text-center">
-  <!-- You can use Vue components inside markdown -->
-  <div i-carbon-dicom-overlay class="text-4xl -mb-6 m-auto" />
-  <h3>About</h3>
-</div>
-
-[Vitesse](https://github.com/antfu/vitesse) is an opinionated [Vite](https://github.com/vitejs/vite) starter template made by [@antfu](https://github.com/antfu) for mocking apps swiftly. With **file-based routing**, **components auto importing**, **markdown support**, I18n, PWA and uses **UnoCSS** for styling and icons.
-
-```js
-// syntax highlighting example
-function vitesse() {
-  const foo = 'bar'
-  console.log(foo)
-}
-```
-
-Check out the [GitHub repo](https://github.com/antfu/vitesse) for more details.
diff --git a/src/pages/hi/[name].vue b/src/pages/hi/[name].vue
deleted file mode 100644
index b732d7c..0000000
--- a/src/pages/hi/[name].vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<script setup lang="ts">
-const router = useRouter()
-const route = useRoute('/hi/[name]')
-const user = useUserStore()
-const { t } = useI18n()
-
-watchEffect(() => {
-  user.setNewName(route.params.name)
-})
-</script>
-
-<template>
-  <div>
-    <div text-4xl>
-      <div i-carbon-pedestrian inline-block />
-    </div>
-    <p>
-      {{ t('intro.hi', { name: user.savedName }) }}
-    </p>
-
-    <p text-sm opacity-75>
-      <em>{{ t('intro.dynamic-route') }}</em>
-    </p>
-
-    <template v-if="user.otherNames.length">
-      <div mt-4 text-sm>
-        <span opacity-75>{{ t('intro.aka') }}:</span>
-        <ul>
-          <li v-for="otherName in user.otherNames" :key="otherName">
-            <RouterLink :to="`/hi/${otherName}`" replace>
-              {{ otherName }}
-            </RouterLink>
-          </li>
-        </ul>
-      </div>
-    </template>
-
-    <div>
-      <button
-        m="3 t6" text-sm btn
-        @click="router.back()"
-      >
-        {{ t('button.back') }}
-      </button>
-    </div>
-  </div>
-</template>
diff --git a/src/pages/index.vue b/src/pages/index.vue
index efc3d2f..b021345 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -1,56 +1,15 @@
 <script setup lang="ts">
-defineOptions({
-  name: 'IndexPage',
-})
-const user = useUserStore()
-const name = ref(user.savedName)
-
-const router = useRouter()
-function go() {
-  if (name.value)
-    router.push(`/hi/${encodeURIComponent(name.value)}`)
-}
-
-const { t } = useI18n()
+import AMapClient from '@/components/AMapClient.vue'
+// import  from 'vite-ssg'
 </script>
 
-<template>
-  <div>
-    <div text-4xl>
-      <div i-carbon-campsite inline-block />
-    </div>
-    <p>
-      <a rel="noreferrer" href="https://github.com/antfu/vitesse" target="_blank">
-        Vitesse
-      </a>
-    </p>
-    <p>
-      <em text-sm opacity-75>{{ t('intro.desc') }}</em>
-    </p>
-
-    <div py-4 />
-
-    <TheInput
-      v-model="name"
-      :placeholder="t('intro.whats-your-name')"
-      autocomplete="false"
-      @keydown.enter="go"
-    />
-    <label class="hidden" for="input">{{ t('intro.whats-your-name') }}</label>
-
-    <div>
-      <button
-        m-3 text-sm btn
-        :disabled="!name"
-        @click="go"
-      >
-        {{ t('button.go') }}
-      </button>
-    </div>
-  </div>
-</template>
-
 <route lang="yaml">
 meta:
-  layout: default
+   layout: map
 </route>
+
+<template>
+  <ClientOnly>
+    <AMapClient />
+  </ClientOnly>
+</template>
diff --git a/src/pages/map.vue b/src/pages/map.vue
deleted file mode 100644
index b021345..0000000
--- a/src/pages/map.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<script setup lang="ts">
-import AMapClient from '@/components/AMapClient.vue'
-// import  from 'vite-ssg'
-</script>
-
-<route lang="yaml">
-meta:
-   layout: map
-</route>
-
-<template>
-  <ClientOnly>
-    <AMapClient />
-  </ClientOnly>
-</template>
diff --git a/src/typed-router.d.ts b/src/typed-router.d.ts
index 2b3b754..331ee51 100644
--- a/src/typed-router.d.ts
+++ b/src/typed-router.d.ts
@@ -19,10 +19,5 @@ declare module 'vue-router/auto-routes' {
    */
   export interface RouteNamedMap {
     '/': RouteRecordInfo<'/', '/', Record<never, never>, Record<never, never>>,
-    '/[...all]': RouteRecordInfo<'/[...all]', '/:all(.*)', { all: ParamValue<true> }, { all: ParamValue<false> }>,
-    '/about': RouteRecordInfo<'/about', '/about', Record<never, never>, Record<never, never>>,
-    '/hi/[name]': RouteRecordInfo<'/hi/[name]', '/hi/:name', { name: ParamValue<true> }, { name: ParamValue<false> }>,
-    '/map': RouteRecordInfo<'/map', '/map', Record<never, never>, Record<never, never>>,
-    '/README': RouteRecordInfo<'/README', '/README', Record<never, never>, Record<never, never>>,
   }
 }