Vertex/vertex-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: pos display and index

Browse Source
This commit is contained in:
Dustella 2025-02-22 14:47:20 +08:00
parent 9c366d331c
commit 01916d6f67
Signed by: Dustella
GPG Key ID: 35AA0AA3DC402D5C
11 changed files with 38 additions and 206 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/auto-imports.d.ts vendored
View File

@ -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']>

20
src/components/AMapClient.vue
View File

@ -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>
`,
})

21
src/components/PosForm.vue
View File

@ -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"

20
src/composables/position.ts Normal file
View File

@ -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 }
}

20
src/pages/README.md
View File

@ -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'
```

14
src/pages/[...all].vue
View File

@ -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>

21
src/pages/about.md
View File

@ -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.

47
src/pages/hi/[name].vue
View File

@ -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>

59
src/pages/index.vue
View File

@ -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>

15
src/pages/map.vue
View File

@ -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>

5
src/typed-router.d.ts vendored
View File

@ -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>>,
}
}