feat: 添加国际化支持，更新相关配置和组件，优化余额格式化

src/api/index.ts

@@ -1,7 +1,7 @@
 import type { App } from "@riwa/api-types";
 import { treaty } from "@elysiajs/eden";
 
-const client = treaty<App>(`${window.location.origin}/api`, {
+const client = treaty<App>(window.location.origin, {
   fetch: {
     credentials: "include",
   },

src/locales/en-US.json

@@ -0,0 +1,9 @@
+{
+  "wallet": {
+    "wallet": "Wallet",
+    "recharge": "Recharge",
+    "withdraw": "Withdraw",
+    "transfer": "Transfer",
+    "balance": "Balance"
+  }
+}

src/locales/index.ts

@@ -0,0 +1,16 @@
+import { createI18n } from "vue-i18n";
+import enUS from "./en-US.json";
+import zhCN from "./zh-CN.json";
+
+export type MessageSchema = typeof enUS;
+
+const i18n = createI18n<MessageSchema, "en-US" | "zh-CN">({
+  locale: "en-US",
+  fallbackLocale: "en-US",
+  messages: {
+    "en-US": enUS,
+    "zh-CN": zhCN,
+  },
+});
+
+export { i18n };

src/locales/zh-CN.json

@@ -0,0 +1,9 @@
+{
+  "wallet": {
+    "wallet": "钱包",
+    "recharge": "充值",
+    "withdraw": "提现",
+    "transfer": "转账",
+    "balance": "余额"
+  }
+}

src/main.ts

@@ -2,6 +2,7 @@ import { IonicVue } from "@ionic/vue";
 import { createApp } from "vue";
 import App from "./App.vue";
 
+import { i18n } from "./locales";
 import router from "./router";
 
 /* UnoCSS */
@@ -40,7 +41,8 @@ import "./theme/ionic.css";
 
 const app = createApp(App)
   .use(IonicVue)
-  .use(router);
+  .use(router)
+  .use(i18n);
 
 router.isReady().then(() => {
   app.mount("#app");

src/utils/helper.ts

@@ -1,6 +1,6 @@
 export function formatBalance(amount: MaybeRefOrGetter<number>, locale: Intl.LocalesArgument = "en-US"): ComputedRef<string> {
   return computed(() => {
     const balance = toValue(amount);
-    return `$${balance.toLocaleString(locale, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
+    return `$${balance.toLocaleString(locale, { minimumFractionDigits: 0, maximumFractionDigits: 2 })}`;
   });
 }

src/views/user/components/wallet-card.vue

@@ -1,30 +1,46 @@
 <script lang='ts' setup>
 import { client } from "@/api";
 
-const balance = ref(9999999.00);
+const { t } = useI18n();
+
+const balance = ref(9999999);
 
 const formattedBalance = formatBalance(balance);
-const { data } = await client.asset.balances.get();
+const { data } = await client.api.asset.balances.get();
 </script>
 
 <template>
-  <ion-card>
-    <ion-card-header>
-      <ion-card-title>{{ formattedBalance }}</ion-card-title>
-      <ion-card-subtitle>Wallet</ion-card-subtitle>
-    </ion-card-header>
+  <div class="mt-20px">
+    <div class="grid grid-cols-2 gap-20px p-20px bg-[var(--ion-card-background)] rounded-t-6px">
+      <div class="flex flex-col gap-4px">
+        <div class="ion-text-uppercase text-xs color-text-400 font-500 tracking-0.4px">
+          {{ t('wallet.balance') }}
+        </div>
+        <div class="text-lg font-bold">
+          {{ formattedBalance }}
+        </div>
+      </div>
+      <div class="flex flex-col gap-4px">
+        <div class="ion-text-uppercase text-xs color-text-400 font-500 tracking-0.4px">
+          {{ t('wallet.balance') }}
+        </div>
+        <div class="text-lg font-bold">
+          {{ formattedBalance }}
+        </div>
+      </div>
+    </div>
 
-    <!-- <ion-card-content>
-      Here's a small text description for the card content. Nothing more, nothing less.
-    </ion-card-content> -->
-
-    <ion-button fill="clear">
-      Recharge
-    </ion-button>
-    <ion-button fill="clear">
-      Withdrawal
-    </ion-button>
-  </ion-card>
+    <div class="px-10px pb-20px bg-[var(--ion-card-background)] rounded-b-6px">
+      <ion-buttons class="gap-10px" expand="block">
+        <ion-button expand="block" fill="clear">
+          {{ t("wallet.recharge") }}
+        </ion-button>
+        <ion-button expand="block" fill="clear">
+          {{ t("wallet.withdraw") }}
+        </ion-button>
+      </ion-buttons>
+    </div>
+  </div>
 </template>
 
 <style scoped></style>

src/vite-env.d.ts

@@ -1,2 +1,23 @@
 /// <reference types="vite/client" />
 /// <reference types="unplugin-icons/types/vue" />
+
+import type { MessageSchema } from "@/locales";
+import {
+  DefineDateTimeFormat,
+  DefineLocaleMessage,
+  DefineNumberFormat,
+} from "vue-i18n";
+
+declare module "vue-i18n" {
+  // define the locale messages schema
+  export interface DefineLocaleMessage extends MessageSchema {
+  }
+
+  // define the datetime format schema
+  export interface DefineDateTimeFormat {
+  }
+
+  // define the number format schema
+  export interface DefineNumberFormat {
+  }
+}