feat: 添加账单页面及相关组件，优化充值记录显示和国际化支持

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

@@ -1,5 +1,6 @@
 <script lang='ts' setup>
 import { eyeOffOutline, eyeOutline } from "ionicons/icons";
+import IcBaselineBlurCircular from "~icons/ic/baseline-blur-circular";
 import IcRoundArrowCircleDown from "~icons/ic/round-arrow-circle-down";
 import IcRoundArrowCircleUp from "~icons/ic/round-arrow-circle-up";
 import RechargeChannel from "./recharge-channel.vue";
@@ -20,6 +21,9 @@ function onCloseModal() {
 function handleWithdraw() {
   router.push("/withdraw/index");
 }
+function handleBill() {
+  router.push("/wallet/bill");
+}
 
 onMounted(() => {
   walletStore.updateBalances();
@@ -42,7 +46,7 @@ onMounted(() => {
     </div>
   </div>
 
-  <div class="flex gap-10 w-full">
+  <div class="flex gap-5 w-full">
     <ion-button id="open-recharge-modal" expand="full" color="success" shape="round" class="w-full min-h-10 h-10">
       <IcRoundArrowCircleDown slot="start" />
       {{ t("wallet.recharge") }}
@@ -52,6 +56,11 @@ onMounted(() => {
       <IcRoundArrowCircleUp slot="start" />
       {{ t("wallet.withdraw") }}
     </ion-button>
+
+    <ion-button expand="full" color="success" shape="round" class="w-full min-h-10 h-10" @click="handleBill">
+      <IcBaselineBlurCircular slot="start" />
+      账单
+    </ion-button>
     <!-- <div id="open-recharge-modal" class="flex-col-center">
       <ion-ripple-effect />
       <ion-button shape="round" color="success" size="large">