新增 Web 浏览端(Go+Vue 报表系统)

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

web/frontend/src/views/AdminUsersView.vue

@@ -0,0 +1,198 @@
+<script setup lang="ts">
+import { onMounted, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import {
+  createUser,
+  deleteUser,
+  listUsers,
+  updateUser,
+  type AdminUser,
+} from '@/api/users'
+import { useAuthStore } from '@/stores/auth'
+
+const auth = useAuthStore()
+const users = ref<AdminUser[]>([])
+const loading = ref(false)
+
+const createDialog = reactive({
+  visible: false,
+  username: '',
+  password: '',
+  role: 'user' as 'admin' | 'user',
+})
+
+const resetDialog = reactive({
+  visible: false,
+  user: null as AdminUser | null,
+  password: '',
+})
+
+async function reload() {
+  loading.value = true
+  try {
+    users.value = await listUsers()
+  } finally {
+    loading.value = false
+  }
+}
+
+function openCreate() {
+  createDialog.username = ''
+  createDialog.password = ''
+  createDialog.role = 'user'
+  createDialog.visible = true
+}
+
+async function submitCreate() {
+  const { username, password, role } = createDialog
+  if (!username.trim() || password.length < 6) {
+    ElMessage.warning('用户名必填,密码至少 6 位')
+    return
+  }
+  await createUser(username.trim(), password, role)
+  ElMessage.success('账号已创建')
+  createDialog.visible = false
+  await reload()
+}
+
+function openReset(u: AdminUser) {
+  resetDialog.user = u
+  resetDialog.password = ''
+  resetDialog.visible = true
+}
+
+async function submitReset() {
+  if (!resetDialog.user) return
+  if (resetDialog.password.length < 6) {
+    ElMessage.warning('新密码至少 6 位')
+    return
+  }
+  await updateUser(resetDialog.user.id, { password: resetDialog.password })
+  ElMessage.success('密码已重置')
+  resetDialog.visible = false
+}
+
+async function toggleDisabled(u: AdminUser) {
+  await updateUser(u.id, { disabled: !u.disabled })
+  ElMessage.success(u.disabled ? '已启用' : '已禁用')
+  await reload()
+}
+
+async function remove(u: AdminUser) {
+  try {
+    await ElMessageBox.confirm(`确认删除用户「${u.username}」?`, '确认', {
+      type: 'warning',
+    })
+  } catch {
+    return
+  }
+  await deleteUser(u.id)
+  ElMessage.success('已删除')
+  await reload()
+}
+
+onMounted(reload)
+</script>
+
+<template>
+  <div class="page">
+    <el-card shadow="never" class="head-card">
+      <div class="head">
+        <span>用户管理 — 仅管理员可访问,本系统不开放注册</span>
+        <el-button type="primary" @click="openCreate">新建账号</el-button>
+      </div>
+    </el-card>
+
+    <el-table :data="users" v-loading="loading" stripe>
+      <el-table-column prop="id" label="ID" width="60" />
+      <el-table-column prop="username" label="用户名" />
+      <el-table-column prop="role" label="角色" width="100">
+        <template #default="{ row }">
+          <el-tag :type="row.role === 'admin' ? 'danger' : 'info'">{{ row.role }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="状态" width="100">
+        <template #default="{ row }">
+          <el-tag :type="row.disabled ? 'warning' : 'success'">
+            {{ row.disabled ? '已禁用' : '正常' }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="created_at" label="创建于" width="180" />
+      <el-table-column prop="updated_at" label="更新于" width="180" />
+      <el-table-column label="操作" width="280" fixed="right">
+        <template #default="{ row }">
+          <el-button link type="primary" @click="openReset(row)">重置密码</el-button>
+          <el-button
+            link
+            :type="row.disabled ? 'success' : 'warning'"
+            :disabled="row.id === auth.user?.id"
+            @click="toggleDisabled(row)"
+          >
+            {{ row.disabled ? '启用' : '禁用' }}
+          </el-button>
+          <el-button
+            link
+            type="danger"
+            :disabled="row.id === auth.user?.id"
+            @click="remove(row)"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-dialog v-model="createDialog.visible" title="新建账号" width="420px">
+      <el-form label-width="80px">
+        <el-form-item label="用户名">
+          <el-input v-model="createDialog.username" />
+        </el-form-item>
+        <el-form-item label="密码">
+          <el-input v-model="createDialog.password" type="password" show-password />
+        </el-form-item>
+        <el-form-item label="角色">
+          <el-radio-group v-model="createDialog.role">
+            <el-radio value="user">普通用户</el-radio>
+            <el-radio value="admin">管理员</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="createDialog.visible = false">取消</el-button>
+        <el-button type="primary" @click="submitCreate">创建</el-button>
+      </template>
+    </el-dialog>
+
+    <el-dialog v-model="resetDialog.visible" title="重置密码" width="420px">
+      <p>用户:{{ resetDialog.user?.username }}</p>
+      <el-input
+        v-model="resetDialog.password"
+        type="password"
+        show-password
+        placeholder="新密码 (至少 6 位)"
+      />
+      <template #footer>
+        <el-button @click="resetDialog.visible = false">取消</el-button>
+        <el-button type="primary" @click="submitReset">提交</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<style scoped>
+.page {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.head-card :deep(.el-card__body) {
+  padding: 12px 16px;
+}
+.head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: #606266;
+}
+</style>