feat: add Vue 3 admin frontend and integrate with backend like mediabot

web/src/views/Dashboard.vue

@@ -0,0 +1,88 @@
+<template>
+  <div>
+    <h2>系统概览</h2>
+    <el-row :gutter="20" style="margin-top: 20px">
+      <el-col :span="6">
+        <el-card>
+          <div class="stat-title">站点总数</div>
+          <div class="stat-value">{{ stats.sites }}</div>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card>
+          <div class="stat-title">配置版本数</div>
+          <div class="stat-value">{{ stats.configs }}</div>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card>
+          <div class="stat-title">待审核配置</div>
+          <div class="stat-value">{{ stats.pending }}</div>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card>
+          <div class="stat-title">注册用户</div>
+          <div class="stat-value">{{ stats.users }}</div>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <el-card style="margin-top: 20px">
+      <template #header>
+        <span>API 状态</span>
+      </template>
+      <el-tag :type="healthStatus ? 'success' : 'danger'">
+        {{ healthStatus ? '服务正常' : '服务异常' }}
+      </el-tag>
+    </el-card>
+  </div>
+</template>
+
+<script setup>
+import { reactive, ref, onMounted } from 'vue'
+import api from '../api'
+
+const stats = reactive({
+  sites: 0,
+  configs: 0,
+  pending: 0,
+  users: 0
+})
+const healthStatus = ref(false)
+
+onMounted(async () => {
+  try {
+    const [sitesRes, configsRes, usersRes] = await Promise.all([
+      api.sites.list().catch(() => ({ data: [] })),
+      api.configs.list().catch(() => ({ data: [] })),
+      api.users.list().catch(() => ({ data: [] }))
+    ])
+    stats.sites = sitesRes.data?.length || 0
+    stats.configs = configsRes.data?.length || 0
+    stats.users = usersRes.data?.length || 0
+  } catch (e) {
+    console.error(e)
+  }
+
+  try {
+    await api.health()
+    healthStatus.value = true
+  } catch {
+    healthStatus.value = false
+  }
+})
+</script>
+
+<style scoped>
+.stat-title {
+  color: #909399;
+  font-size: 14px;
+}
+.stat-value {
+  font-size: 32px;
+  font-weight: bold;
+  color: #303133;
+  margin-top: 10px;
+}
+</style>