init

frontend/fatemaster-admin/src/views/Dashboard.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="dashboard">
+    <a-row :gutter="16">
+      <a-col :span="6">
+        <a-card>
+          <a-statistic
+            title="总订单数"
+            :value="statistics.total"
+            :loading="loading"
+          />
+        </a-card>
+      </a-col>
+      <a-col :span="6">
+        <a-card>
+          <a-statistic
+            title="已支付订单"
+            :value="statistics.paidCount"
+            :loading="loading"
+          />
+        </a-card>
+      </a-col>
+      <a-col :span="6">
+        <a-card>
+          <a-statistic
+            title="总收入"
+            :value="statistics.totalRevenue"
+            :precision="2"
+            prefix="¥"
+            :loading="loading"
+          />
+        </a-card>
+      </a-col>
+    </a-row>
+
+    <a-card title="各类型卜卦统计" style="margin-top: 16px" :loading="loading">
+      <a-table
+        :columns="columns"
+        :data-source="statistics.typeStats"
+        :pagination="false"
+      />
+    </a-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import axios from 'axios'
+
+const loading = ref(true)
+const statistics = ref({
+  total: 0,
+  paidCount: 0,
+  totalRevenue: 0,
+  typeStats: [],
+})
+
+const columns = [
+  {
+    title: '类型',
+    dataIndex: 'Type',
+    key: 'Type',
+  },
+  {
+    title: '数量',
+    dataIndex: 'Count',
+    key: 'Count',
+  },
+]
+
+onMounted(async () => {
+  try {
+    const response = await axios.get('/api/admin/records/statistics')
+    statistics.value = response.data
+  } catch (error) {
+    console.error('Failed to fetch statistics:', error)
+  } finally {
+    loading.value = false
+  }
+})
+</script>