第 4 阶段：订单、交接与账务--ok

frontend/src/views/account/WalletView.vue

@@ -1,9 +1,58 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+
+import { fetchWalletBalance, fetchWalletLedger, type WalletAccount, type WalletLedger } from '@/api/wallet'
+
+const loading = ref(false)
+const account = ref<WalletAccount | null>(null)
+const ledger = ref<WalletLedger[]>([])
+
+onMounted(loadWallet)
+
+async function loadWallet() {
+  loading.value = true
+  try {
+    const [balance, rows] = await Promise.all([fetchWalletBalance(), fetchWalletLedger()])
+    account.value = balance
+    ledger.value = rows
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
 <template>
-  <section class="page">
+  <section class="page" v-loading="loading">
     <div class="page-header">
       <p class="eyebrow">Wallet</p>
       <h1>钱包</h1>
-      <p>查看可用余额、冻结余额和不可变资金流水。</p>
+      <p>查看可用余额、冻结余额和不可变资金流水。当前是开发态模拟账务，不代表真实支付余额。</p>
     </div>
+
+    <div v-if="account" class="metric-grid">
+      <div class="metric-card">
+        <span>可用余额</span>
+        <strong>¥{{ account.available_balance }}</strong>
+      </div>
+      <div class="metric-card">
+        <span>冻结余额</span>
+        <strong>¥{{ account.frozen_balance }}</strong>
+      </div>
+      <div class="metric-card">
+        <span>状态</span>
+        <strong>{{ account.status }}</strong>
+      </div>
+    </div>
+
+    <el-table class="table-panel" :data="ledger">
+      <el-table-column prop="ledger_no" label="流水号" min-width="220" />
+      <el-table-column prop="biz_type" label="业务" width="140" />
+      <el-table-column prop="direction" label="方向" width="80" />
+      <el-table-column prop="amount" label="金额" width="100" />
+      <el-table-column prop="balance_type" label="余额类型" width="110" />
+      <el-table-column prop="balance_after" label="变化后余额" width="130" />
+      <el-table-column prop="remark" label="备注" min-width="220" />
+      <el-table-column prop="created_at" label="时间" width="180" />
+    </el-table>
   </section>
 </template>