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

web/src/views/Configs.vue

@@ -0,0 +1,72 @@
+<template>
+  <div>
+    <h2>配置审核</h2>
+    <el-card style="margin-top: 20px">
+      <template #header>
+        <span>待审核配置</span>
+      </template>
+      <el-table :data="pendingConfigs" v-loading="loading" stripe>
+        <el-table-column prop="siteId" label="站点ID" width="120" />
+        <el-table-column prop="version" label="版本" width="100" />
+        <el-table-column prop="schemaVersion" label="Schema" width="100" />
+        <el-table-column prop="submitterId" label="提交者" width="100" />
+        <el-table-column prop="createdAt" label="提交时间" width="180" />
+        <el-table-column label="操作" width="200">
+          <template #default="scope">
+            <el-button size="small" type="success" @click="handleApprove(scope.row)">通过</el-button>
+            <el-button size="small" type="danger" @click="handleReject(scope.row)">拒绝</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import api from '../api'
+
+const pendingConfigs = ref([])
+const loading = ref(false)
+
+const fetchPending = async () => {
+  loading.value = true
+  try {
+    const res = await api.configs.pending()
+    pendingConfigs.value = res.data || []
+  } catch (e) {
+    ElMessage.error('获取待审核列表失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+const handleApprove = async (row) => {
+  try {
+    await ElMessageBox.confirm(`确认通过站点 ${row.siteId} 的配置版本 ${row.version}？`, '提示')
+    await api.configs.approve(row.id)
+    ElMessage.success('已通过')
+    fetchPending()
+  } catch (e) {
+    if (e !== 'cancel') ElMessage.error(e.response?.data?.message || '操作失败')
+  }
+}
+
+const handleReject = async (row) => {
+  try {
+    const { value: comment } = await ElMessageBox.prompt('请输入拒绝原因', '拒绝配置', {
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+      inputValidator: (v) => v ? true : '请输入拒绝原因'
+    })
+    await api.configs.reject(row.id, comment)
+    ElMessage.success('已拒绝')
+    fetchPending()
+  } catch (e) {
+    if (e !== 'cancel') ElMessage.error(e.response?.data?.message || '操作失败')
+  }
+}
+
+onMounted(fetchPending)
+</script>