migrate i18n helper.js some code to typescript and migrate vue file to composition API and typescript

This commit is contained in:
MaysWind
2025-01-11 00:49:21 +08:00
parent 25c8b9baf8
commit 8da3d2aa35
30 changed files with 937 additions and 492 deletions
+5 -4
View File
@@ -7,8 +7,8 @@
<v-card-text v-if="textContent" class="pa-4 pb-6">{{ textContent }}</v-card-text>
<v-card-actions class="px-4 pb-4">
<v-spacer></v-spacer>
<v-btn color="gray" @click="cancel">{{ $t('Cancel') }}</v-btn>
<v-btn :color="finalColor" @click="confirm">{{ $t('OK') }}</v-btn>
<v-btn color="gray" @click="cancel">{{ tt('Cancel') }}</v-btn>
<v-btn :color="finalColor" @click="confirm">{{ tt('OK') }}</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
@@ -17,7 +17,8 @@
<script setup lang="ts">
import { type Ref, ref, watch } from 'vue';
import { useI18n } from '@/locales/helper.js';
import { useI18n } from '@/locales/helpers.ts';
import { isString } from '@/lib/common.ts';
const props = defineProps<{
@@ -46,7 +47,7 @@ function open(titleOrText: string, textOrOptions: string | Record<string, unknow
if (isString(textOrOptions)) { // second parameter is text
titleContent.value = tt(titleOrText, options);
textContent.value = tt(textOrOptions, options);
textContent.value = tt(textOrOptions as string, options);
} else { // second parameter is options
const actualOptions = textOrOptions as Record<string, unknown>;
titleContent.value = tt('global.app.title');
+3 -2
View File
@@ -3,7 +3,7 @@
{{ messageContent }}
<template #actions>
<v-btn color="primary" variant="text" @click="showState = false">{{ $t('Close') }}</v-btn>
<v-btn color="primary" variant="text" @click="showState = false">{{ tt('Close') }}</v-btn>
</template>
</v-snackbar>
</template>
@@ -11,8 +11,9 @@
<script setup lang="ts">
import { type Ref, ref, watch } from 'vue';
import { useI18n } from '@/locales/helpers.ts';
import { isObject } from '@/lib/common.ts';
import { useI18n } from '@/locales/helper.js';
const emit = defineEmits<{
(e: 'update:show', value: boolean): void
@@ -3,11 +3,11 @@
<v-card class="pa-2 pa-sm-4 pa-md-4">
<template #title>
<div class="d-flex align-center justify-center">
<h4 class="text-h4">{{ $t('Use on Mobile Device') }}</h4>
<h4 class="text-h4">{{ tt('Use on Mobile Device') }}</h4>
</div>
</template>
<template #subtitle>
<div class="text-body-1 text-center text-wrap mt-4">{{ $t('You can scan the QR code below on your mobile device.') }}</div>
<div class="text-body-1 text-center text-wrap mt-4">{{ tt('You can scan the QR code below on your mobile device.') }}</div>
</template>
<v-card-text class="mb-md-4">
<v-row>
@@ -20,8 +20,8 @@
</v-card-text>
<v-card-text class="overflow-y-visible">
<div class="w-100 d-flex justify-center gap-4">
<v-btn :href="mobileVersionPath">{{$t('Switch to Mobile Version') }}</v-btn>
<v-btn color="secondary" variant="tonal" @click="showState = false">{{ $t('Close') }}</v-btn>
<v-btn :href="mobileVersionPath">{{ tt('Switch to Mobile Version') }}</v-btn>
<v-btn color="secondary" variant="tonal" @click="showState = false">{{ tt('Close') }}</v-btn>
</div>
</v-card-text>
</v-card>
@@ -31,6 +31,8 @@
<script setup lang="ts">
import { computed } from 'vue';
import { useI18n } from '@/locales/helpers.ts';
import { getMobileUrlQrCodePath } from '@/lib/qrcode.ts';
import { getMobileVersionPath } from '@/lib/version.ts';
@@ -42,6 +44,8 @@ const emit = defineEmits<{
(e: 'update:show', value: boolean): void
}>();
const { tt } = useI18n();
const mobileUrlQrCodePath = getMobileUrlQrCodePath();
const mobileVersionPath = getMobileVersionPath();