feat: internationalize various components and views with i18n translations

src/views/wallet/components/deposit.vue

@@ -7,6 +7,7 @@ import CryptocurrencyColorNuls from "~icons/cryptocurrency-color/nuls";
 import { client, safeClient } from "@/api";
 import { DepositTypeEnum } from "@/api/enum";
 
+const { t } = useI18n();
 const [query] = useResetRef<UserDepositOrderBody>({
   limit: 20,
   offset: 0,
@@ -49,14 +50,14 @@ async function handleInfinite(event: InfiniteScrollCustomEvent) {
 }
 async function handleCancel(id: string) {
   const alert = await alertController.create({
-    header: "确认取消充值？",
+    header: t("wallet.deposit.confirmCancel"),
     buttons: [
       {
-        text: "取消",
+        text: t("wallet.deposit.cancel"),
         role: "cancel",
       },
       {
-        text: "确认取消",
+        text: t("wallet.deposit.confirmCancelButton"),
         role: "destructive",
         handler: async () => {
           await safeClient(client.api.deposit.orders({ orderId: id }).cancel.post());
@@ -102,7 +103,7 @@ onBeforeMount(() => {
         <ion-row class="ion-align-items-center">
           <ion-col size="3" class="flex flex-col">
             <div class="text-xs text-text-500">
-              金额
+              {{ t('wallet.deposit.amount') }}
             </div>
             <div class="text-sm font-bold">
               {{ Number(item.amount).toFixed(2) }}
@@ -110,7 +111,7 @@ onBeforeMount(() => {
           </ion-col>
           <ion-col size="3" class="flex flex-col">
             <div class="text-xs text-text-500">
-              充值方式
+              {{ t('wallet.deposit.depositMethod') }}
             </div>
             <div class="text-xs font-bold">
               {{ item.depositType }}
@@ -118,7 +119,7 @@ onBeforeMount(() => {
           </ion-col>
           <ion-col size="6" class="flex flex-col">
             <div class="text-xs text-text-500 text-right">
-              创建时间
+              {{ t('wallet.deposit.createdAt') }}
             </div>
             <div class="text-xs font-bold text-right">
               {{ useDateFormat(item.createdAt, 'MM/DD HH:mm') }}
@@ -129,7 +130,7 @@ onBeforeMount(() => {
         <ion-row class="ion-align-items-center">
           <ion-col size="6" class="flex flex-col">
             <div class="text-xs text-text-500">
-              订单号
+              {{ t('wallet.deposit.orderNo') }}
             </div>
             <div class="text-xs font-bold">
               {{ item.orderNo }}
@@ -137,7 +138,7 @@ onBeforeMount(() => {
           </ion-col>
           <ion-col size="6" class="text-right">
             <ion-button v-if="item.status === 'pending'" size="small" fill="outline" color="success" @click.stop="handleCancel(item.id)">
-              取消充值
+              {{ t('wallet.deposit.cancelDeposit') }}
             </ion-button>
           </ion-col>
         </ion-row>

src/views/wallet/components/withdraw.vue

@@ -5,6 +5,7 @@ import { alertController } from "@ionic/vue";
 import CryptocurrencyColorNuls from "~icons/cryptocurrency-color/nuls";
 import { client, safeClient } from "@/api";
 
+const { t } = useI18n();
 const [query] = useResetRef<UserWithdrawOrderBody>({
   limit: 20,
   offset: 0,
@@ -46,14 +47,14 @@ async function handleInfinite(event: InfiniteScrollCustomEvent) {
 }
 async function handleCancel(id: string) {
   const alert = await alertController.create({
-    header: "确认取消提现？",
+    header: t("wallet.withdrawDetail.confirmCancel"),
     buttons: [
       {
-        text: "取消",
+        text: t("wallet.withdrawDetail.cancel"),
         role: "cancel",
       },
       {
-        text: "确认取消",
+        text: t("wallet.withdrawDetail.confirmCancelButton"),
         role: "destructive",
         handler: async () => {
           await safeClient(client.api.withdraw({ orderId: id }).delete());
@@ -98,7 +99,7 @@ onBeforeMount(() => {
         <ion-row class="ion-align-items-center">
           <ion-col size="3" class="flex flex-col">
             <div class="text-xs text-text-500">
-              金额
+              {{ t('wallet.withdrawDetail.amount') }}
             </div>
             <div class="text-sm font-bold">
               {{ Number(item.amount).toFixed(2) }}
@@ -106,7 +107,7 @@ onBeforeMount(() => {
           </ion-col>
           <ion-col size="3" class="flex flex-col">
             <div class="text-xs text-text-500">
-              实际到账
+              {{ t('wallet.withdrawDetail.actualAmount') }}
             </div>
             <div class="text-sm font-bold">
               {{ Number(item.actualAmount).toFixed(2) }}
@@ -114,7 +115,7 @@ onBeforeMount(() => {
           </ion-col>
           <ion-col size="6" class="flex flex-col">
             <div class="text-xs text-text-500 text-right">
-              创建时间
+              {{ t('wallet.withdrawDetail.createdAt') }}
             </div>
             <div class="text-xs font-bold text-right">
               {{ useDateFormat(item.createdAt, 'MM/DD HH:mm') }}
@@ -124,7 +125,7 @@ onBeforeMount(() => {
         <ion-row class="ion-align-items-center">
           <ion-col size="3" class="flex flex-col">
             <div class="text-xs text-text-500">
-              手续费
+              {{ t('wallet.withdrawDetail.fee') }}
             </div>
             <div class="text-sm font-bold">
               {{ Number(item.fee).toFixed(2) }}
@@ -132,7 +133,7 @@ onBeforeMount(() => {
           </ion-col>
           <ion-col size="3" class="flex flex-col">
             <div class="text-xs text-text-500">
-              提现方式
+              {{ t('wallet.withdrawDetail.withdrawMethod') }}
             </div>
             <div class="text-xs font-bold">
               <span>{{ item.withdrawMethod }}</span>
@@ -141,7 +142,7 @@ onBeforeMount(() => {
           </ion-col>
           <ion-col size="6" class="text-right">
             <ion-button v-if="item.status === 'pending'" size="small" fill="outline" color="success" @click.stop="handleCancel(item.id)">
-              取消提现
+              {{ t('wallet.withdrawDetail.cancelWithdraw') }}
             </ion-button>
           </ion-col>
         </ion-row>