hfb_sys/frontend/src/views/admin/AdminDashboardView.vue

<script setup lang="ts">
import { onMounted, ref } from 'vue'

import { fetchAdminDashboard, type AdminDashboard } from '@/api/adminDashboard'
import { disputeStatusLabel, orderStatusLabel } from '@/utils/statusLabels'
import { formatDateTime } from '@/utils/time'

const loading = ref(false)
const dashboard = ref<AdminDashboard | null>(null)

onMounted(loadDashboard)

async function loadDashboard() {
  loading.value = true
  try {
    dashboard.value = await fetchAdminDashboard()
  } finally {
    loading.value = false
  }
}

function money(value?: number) {
  return `¥${Number(value || 0).toFixed(2)}`
}
</script>

<template>
  <section class="page" v-loading="loading">
    <div class="page-header-row">
      <div class="page-header">
        <p class="eyebrow">Admin</p>
        <h1>后台仪表盘</h1>
        <p>待审核、待仲裁、订单和流水概览。</p>
      </div>
      <el-button @click="loadDashboard">刷新</el-button>
    </div>

    <div v-if="dashboard" class="metric-grid dashboard-metrics">
      <div class="metric-card">
        <span>用户总数</span>
        <strong>{{ dashboard.metrics.total_users }}</strong>
      </div>
      <div class="metric-card">
        <span>实名用户</span>
        <strong>{{ dashboard.metrics.verified_users }}</strong>
      </div>
      <div class="metric-card">
        <span>发布商品</span>
        <strong>{{ dashboard.metrics.total_listings }}</strong>
      </div>
      <div class="metric-card">
        <span>已上架</span>
        <strong>{{ dashboard.metrics.published_listings }}</strong>
      </div>
      <div class="metric-card">
        <span>订单总数</span>
        <strong>{{ dashboard.metrics.total_orders }}</strong>
      </div>
      <div class="metric-card">
        <span>使用中</span>
        <strong>{{ dashboard.metrics.renting_orders }}</strong>
      </div>
      <div class="metric-card">
        <span>今日订单</span>
        <strong>{{ dashboard.metrics.today_orders }}</strong>
      </div>
      <div class="metric-card">
        <span>今日流水</span>
        <strong>{{ money(dashboard.metrics.today_ledger_amount) }}</strong>
      </div>
    </div>

    <div v-if="dashboard" class="dashboard-panels">
      <div class="order-panel dashboard-panel">
        <h2>待处理</h2>
        <RouterLink class="pending-row" to="/admin/disputes">
          <span>待仲裁申诉</span>
          <strong>{{ dashboard.pending.disputes }}</strong>
        </RouterLink>
        <RouterLink class="pending-row" to="/admin/listings/review">
          <span>待审核商品</span>
          <strong>{{ dashboard.pending.listing_reviews }}</strong>
        </RouterLink>
        <div class="pending-row">
          <span>待交接订单</span>
          <strong>{{ dashboard.pending.pending_handoffs }}</strong>
        </div>
        <div class="pending-row">
          <span>待结账确认</span>
          <strong>{{ dashboard.pending.pending_return_confirms }}</strong>
        </div>
      </div>

      <div class="order-panel dashboard-panel">
        <h2>后台入口</h2>
        <RouterLink class="pending-row" to="/admin/users">
          <span>用户管理</span>
          <strong>进入</strong>
        </RouterLink>
        <RouterLink class="pending-row" to="/admin/orders">
          <span>订单管理</span>
          <strong>进入</strong>
        </RouterLink>
        <RouterLink class="pending-row" to="/admin/disputes">
          <span>仲裁中心</span>
          <strong>进入</strong>
        </RouterLink>
        <RouterLink class="pending-row" to="/admin/listings/review">
          <span>商品审核</span>
          <strong>进入</strong>
        </RouterLink>
        <RouterLink class="pending-row" to="/admin/system-configs">
          <span>系统配置</span>
          <strong>进入</strong>
        </RouterLink>
      </div>
    </div>

    <el-table v-if="dashboard" class="table-panel" :data="dashboard.recent_orders">
      <el-table-column prop="order_no" label="最近订单" min-width="210" />
      <el-table-column prop="title" label="账号" min-width="170" />
      <el-table-column label="状态" width="140">
        <template #default="{ row }">{{ orderStatusLabel(row.status) }}</template>
      </el-table-column>
      <el-table-column prop="rent_amount" label="订单金额" width="100" />
      <el-table-column prop="deposit_amount" label="押金" width="100" />
      <el-table-column label="创建时间" min-width="180">
        <template #default="{ row }">{{ formatDateTime(row.created_at) }}</template>
      </el-table-column>
    </el-table>

    <el-table v-if="dashboard" class="table-panel" :data="dashboard.recent_disputes">
      <el-table-column prop="order_no" label="最近申诉" min-width="210" />
      <el-table-column prop="title" label="账号" min-width="170" />
      <el-table-column prop="type" label="类型" width="160" />
      <el-table-column label="状态" width="120">
        <template #default="{ row }">{{ disputeStatusLabel(row.status) }}</template>
      </el-table-column>
      <el-table-column label="创建时间" min-width="180">
        <template #default="{ row }">{{ formatDateTime(row.created_at) }}</template>
      </el-table-column>
      <el-table-column label="操作" width="100">
        <template #default>
          <RouterLink to="/admin/disputes">
            <el-button size="small">处理</el-button>
          </RouterLink>
        </template>
      </el-table-column>
    </el-table>
  </section>
</template>