feat(avatar): add user token accounting

digital-avatar-app/src/views/TokenCharge.vue

@@ -13,6 +13,7 @@
         <span class="balance-label">当前余额</span>
         <span class="balance-amount">{{ currentBalance.toLocaleString() }}</span>
         <span class="balance-unit">Token</span>
+        <span class="balance-used">累计使用 {{ totalConsumed.toLocaleString() }} Token</span>
       </div>
     </section>
 
@@ -28,7 +29,7 @@
           @click="selectedPlan = plan"
         >
           <div class="plan-badge" v-if="plan.badge">{{ plan.badge }}</div>
-          <div class="plan-amount">{{ plan.amount.toLocaleString() }}</div>
+          <div class="plan-amount">{{ formatTokenAmount(plan.amount) }}</div>
           <div class="plan-unit">Token</div>
           <div class="plan-price">¥{{ plan.price }}</div>
           <div class="plan-desc" v-if="plan.desc">{{ plan.desc }}</div>
@@ -83,7 +84,8 @@ import { getTokenBalance, getRechargePlans, chargeToken } from '@/api'
 const router = useRouter()
 
 // 当前余额
-const currentBalance = ref<number>(1250)
+const currentBalance = ref<number>(0)
+const totalConsumed = ref<number>(0)
 
 // 充值套餐
 const plans = ref<Array<{
@@ -105,6 +107,7 @@ const loadData = async () => {
   try {
     const b: any = await getTokenBalance()
     currentBalance.value = b?.balance ?? 0
+    totalConsumed.value = b?.totalConsumed ?? 0
   } catch (e) {
     console.error('加载余额失败', e)
   }
@@ -118,6 +121,10 @@ const loadData = async () => {
 
 // 执行充值（写入后端）
 const charging = ref(false)
+const formatTokenAmount = (amount: number) => {
+  if (amount >= 1_000_000 && amount % 1_000_000 === 0) return `${amount / 1_000_000}M`
+  return amount.toLocaleString()
+}
 const doCharge = async () => {
   if (!selectedPlan.value || charging.value) return
   charging.value = true
@@ -187,6 +194,7 @@ onMounted(() => {
 
 .balance-card {
   display: flex;
+  flex-wrap: wrap;
   align-items: baseline;
   gap: 8px;
   padding: 20px;
@@ -211,6 +219,12 @@ onMounted(() => {
   opacity: 0.9;
 }
 
+.balance-used {
+  flex-basis: 100%;
+  font-size: 12px;
+  opacity: 0.82;
+}
+
 /* 充值套餐 */
 .plans-section {
   padding: 0 20px 20px;