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

web/src/views/Users.vue

@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <h2>用户管理</h2>
+    <el-card style="margin-top: 20px">
+      <el-table :data="users" v-loading="loading" stripe>
+        <el-table-column prop="id" label="ID" width="80" />
+        <el-table-column prop="email" label="邮箱" />
+        <el-table-column prop="displayName" label="昵称" width="150" />
+        <el-table-column prop="trustLevel" label="信任等级" width="100">
+          <template #default="scope">
+            <el-tag :type="trustLevelType(scope.row.trustLevel)">
+              {{ scope.row.trustLevel }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="isActive" label="状态" width="80">
+          <template #default="scope">
+            <el-tag :type="scope.row.isActive ? 'success' : 'danger'">
+              {{ scope.row.isActive ? '启用' : '禁用' }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createdAt" label="注册时间" width="180" />
+        <el-table-column label="操作" width="150">
+          <template #default="scope">
+            <el-button size="small" @click="handleSetLevel(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 users = ref([])
+const loading = ref(false)
+
+const trustLevelType = (level) => {
+  const map = { MEMBER: '', TRUSTED: 'warning', ADMIN: 'danger' }
+  return map[level] || ''
+}
+
+const fetchUsers = async () => {
+  loading.value = true
+  try {
+    const res = await api.users.list()
+    users.value = res.data || []
+  } catch (e) {
+    ElMessage.error('获取用户列表失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+const handleSetLevel = async (row) => {
+  try {
+    const { value: level } = await ElMessageBox.prompt('请输入信任等级 (MEMBER/TRUSTED/ADMIN)', '设置信任等级', {
+      inputValue: row.trustLevel,
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+      inputValidator: (v) => ['MEMBER', 'TRUSTED', 'ADMIN'].includes(v) ? true : '无效等级'
+    })
+    await api.users.setTrustLevel(row.id, level)
+    ElMessage.success('设置成功')
+    fetchUsers()
+  } catch (e) {
+    if (e !== 'cancel') ElMessage.error(e.response?.data?.message || '操作失败')
+  }
+}
+
+onMounted(fetchUsers)
+</script>