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

frontend/src/views/account/OrdersView.vue

@@ -1,3 +1,23 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+
+import { fetchOrders, type Order } from '@/api/orders'
+
+const loading = ref(false)
+const orders = ref<Order[]>([])
+
+onMounted(loadOrders)
+
+async function loadOrders() {
+  loading.value = true
+  try {
+    orders.value = await fetchOrders()
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
 <template>
   <section class="page">
     <div class="page-header">
@@ -5,5 +25,21 @@
       <h1>我的订单</h1>
       <p>跟踪待交接、租赁中、待归还、申诉中和已完成订单。</p>
     </div>
+
+    <el-table v-loading="loading" class="table-panel" :data="orders">
+      <el-table-column prop="order_no" label="订单号" min-width="210" />
+      <el-table-column prop="title" label="账号" min-width="180" />
+      <el-table-column prop="rent_hours" label="租期" width="90" />
+      <el-table-column prop="rent_amount" label="租金" width="100" />
+      <el-table-column prop="deposit_amount" label="押金" width="100" />
+      <el-table-column prop="status" label="状态" width="140" />
+      <el-table-column label="操作" width="100">
+        <template #default="{ row }">
+          <RouterLink :to="`/orders/${row.id}`">
+            <el-button size="small">详情</el-button>
+          </RouterLink>
+        </template>
+      </el-table-column>
+    </el-table>
   </section>
 </template>