feat(admin): migrate admin UI to Vue3

admin-frontend/src/components/StatsCards.vue

@@ -0,0 +1,52 @@
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  stats: { type: Object, required: true },
+  loading: { type: Boolean, default: false },
+})
+
+const items = computed(() => [
+  { key: 'total_users', label: '总用户数' },
+  { key: 'approved_users', label: '已审核' },
+  { key: 'pending_users', label: '待审核' },
+  { key: 'total_accounts', label: '总账号数' },
+  { key: 'vip_users', label: 'VIP用户' },
+])
+</script>
+
+<template>
+  <el-row :gutter="12" class="stats-row">
+    <el-col v-for="it in items" :key="it.key" :xs="12" :sm="8" :md="6" :lg="4" :xl="4">
+      <el-card shadow="never" class="stat-card" :body-style="{ padding: '14px' }">
+        <div class="stat-value">
+          <el-skeleton v-if="loading" :rows="1" animated />
+          <template v-else>{{ stats?.[it.key] ?? 0 }}</template>
+        </div>
+        <div class="stat-label">{{ it.label }}</div>
+      </el-card>
+    </el-col>
+  </el-row>
+</template>
+
+<style scoped>
+.stats-row {
+  margin-bottom: 14px;
+}
+.stat-card {
+  border-radius: var(--app-radius);
+  border: 1px solid var(--app-border);
+  box-shadow: var(--app-shadow);
+}
+.stat-value {
+  font-size: 22px;
+  font-weight: 800;
+  line-height: 1.1;
+}
+.stat-label {
+  margin-top: 6px;
+  font-size: 12px;
+  color: var(--app-muted);
+}
+</style>
+