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

web/src/views/Sites.vue

@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <h2>站点管理</h2>
+    <el-card style="margin-top: 20px">
+      <el-table :data="sites" v-loading="loading" stripe>
+        <el-table-column prop="siteId" label="站点ID" width="120" />
+        <el-table-column prop="name" label="名称" width="150" />
+        <el-table-column prop="baseUrl" label="基础URL" />
+        <el-table-column prop="siteType" label="类型" width="100" />
+        <el-table-column prop="status" label="状态" width="100">
+          <template #default="scope">
+            <el-tag :type="scope.row.status === 'active' ? 'success' : 'info'">
+              {{ scope.row.status }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="schemaVersion" label="Schema版本" width="120" />
+        <el-table-column label="操作" width="150">
+          <template #default="scope">
+            <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { ElMessage } from 'element-plus'
+import api from '../api'
+
+const sites = ref([])
+const loading = ref(false)
+
+const fetchSites = async () => {
+  loading.value = true
+  try {
+    const res = await api.sites.list()
+    sites.value = res.data || []
+  } catch (e) {
+    ElMessage.error('获取站点列表失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+const handleEdit = (row) => {
+  ElMessage.info(`编辑站点: ${row.name}`)
+}
+
+onMounted(fetchSites)
+</script>