优化详情页和发布界面等

frontend/src/views/account/OrdersView.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { ElMessage } from 'element-plus'
+import { useRoute, useRouter } from 'vue-router'
 
 import { fetchOrders, payOrder, type Order } from '@/api/orders'
 import { useSessionStore } from '@/stores/session'
@@ -10,9 +11,43 @@ const loading = ref(false)
 const orders = ref<Order[]>([])
 const payingOrderId = ref<number | null>(null)
 const session = useSessionStore()
+const route = useRoute()
+const router = useRouter()
+const statusTabs = [
+  { key: 'all', label: '全部' },
+  { key: 'pending_payment', label: '待支付' },
+  { key: 'pending_handoff', label: '待交接' },
+  { key: 'renting', label: '使用中' },
+  { key: 'pending_checkout_confirm', label: '待结账' },
+  { key: 'completed', label: '已完成' },
+]
+const tabKeys = new Set(statusTabs.map((item) => item.key))
+const activeTab = ref(readTab(route.query.tab))
+
+const displayOrders = computed(() => {
+  if (activeTab.value === 'all') return orders.value
+  return orders.value.filter((order) => order.status === activeTab.value)
+})
 
 onMounted(loadOrders)
 
+watch(
+  () => route.query.tab,
+  (tab) => {
+    activeTab.value = readTab(tab)
+  },
+)
+
+function readTab(tab: unknown) {
+  const value = typeof tab === 'string' ? tab : 'all'
+  return tabKeys.has(value) ? value : 'all'
+}
+
+function handleTabChange(tab: string | number) {
+  const nextTab = readTab(String(tab))
+  router.replace({ path: '/orders', query: nextTab === 'all' ? {} : { tab: nextTab } })
+}
+
 async function loadOrders() {
   loading.value = true
   try {
@@ -62,7 +97,11 @@ function money(value: unknown) {
       <p>跟踪待支付、待交接、使用中、待归还、申诉中和已完成订单。</p>
     </div>
 
-    <el-table v-loading="loading" class="table-panel" :data="orders">
+    <el-tabs v-model="activeTab" class="order-tabs" @tab-change="handleTabChange">
+      <el-tab-pane v-for="tab in statusTabs" :key="tab.key" :label="tab.label" :name="tab.key" />
+    </el-tabs>
+
+    <el-table v-loading="loading" class="table-panel" :data="displayOrders">
       <el-table-column prop="order_no" label="订单号" min-width="210" />
       <el-table-column prop="title" label="账号" min-width="180" />
       <el-table-column label="我的金额" width="100">
@@ -97,3 +136,21 @@ function money(value: unknown) {
     </el-table>
   </section>
 </template>
+
+<style scoped>
+.order-tabs {
+  margin-top: 24px;
+  border: 1px solid #e4e7ed;
+  border-radius: 8px;
+  background: #ffffff;
+  padding: 0 16px;
+}
+
+.order-tabs :deep(.el-tabs__header) {
+  margin: 0;
+}
+
+.order-tabs :deep(.el-tabs__nav-wrap::after) {
+  height: 0;
+}
+</style>