增加admin管理帐号和项目的界面--初步实现

frontend/src/views/admin/Users.vue

@@ -0,0 +1,141 @@
+<template>
+  <div class="page">
+    <el-card>
+      <div class="header">
+        <h3>用户账号管理</h3>
+        <el-button type="primary" @click="openCreate">新建用户</el-button>
+      </div>
+      <el-table :data="users" stripe v-loading="loading" style="width: 100%">
+        <el-table-column prop="username" label="用户名" min-width="140" />
+        <el-table-column prop="role" label="角色" width="120">
+          <template #default="scope">
+            <el-tag type="success" v-if="scope.row.role === 'ADMIN'">ADMIN</el-tag>
+            <el-tag v-else>{{ scope.row.role }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="状态" width="120">
+          <template #default="scope">
+            <el-tag type="success" v-if="scope.row.is_active">启用</el-tag>
+            <el-tag type="danger" v-else>已禁用</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="created_at" label="创建时间" width="200" />
+        <el-table-column label="操作" width="240" fixed="right">
+          <template #default="scope">
+            <el-button link type="primary" size="small" @click="openEdit(scope.row)">编辑</el-button>
+            <el-button
+              link
+              :type="scope.row.is_active ? 'danger' : 'primary'"
+              size="small"
+              @click="toggleStatus(scope.row)"
+            >
+              {{ scope.row.is_active ? "禁用" : "启用" }}
+            </el-button>
+            <el-button link type="danger" size="small" @click="openReset(scope.row)">重置密码</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="pagination">
+        <el-pagination
+          background
+          layout="prev, pager, next, total"
+          :page-size="pageSize"
+          :total="total"
+          v-model:current-page="page"
+          @current-change="loadUsers"
+        />
+      </div>
+    </el-card>
+    <UserForm v-model:visible="formVisible" :user="editingUser" @saved="loadUsers" />
+    <UserResetPassword v-model:visible="resetVisible" :user="resetUser" @reset="loadUsers" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { fetchUsers, updateUser } from "../../api/users";
+import type { UserInfo } from "../../types/api";
+import UserForm from "./UserForm.vue";
+import UserResetPassword from "./UserResetPassword.vue";
+
+const users = ref<UserInfo[]>([]);
+const total = ref(0);
+const page = ref(1);
+const pageSize = ref(10);
+const loading = ref(false);
+const formVisible = ref(false);
+const resetVisible = ref(false);
+const editingUser = ref<UserInfo | null>(null);
+const resetUser = ref<UserInfo | null>(null);
+
+const loadUsers = async () => {
+  loading.value = true;
+  try {
+    const { data } = await fetchUsers({ skip: (page.value - 1) * pageSize.value, limit: pageSize.value });
+    const items = (data as any).items || [];
+    users.value = items;
+    total.value = (data as any).total || items.length;
+  } catch (e: any) {
+    ElMessage.error(e?.response?.data?.message || "用户列表加载失败");
+  } finally {
+    loading.value = false;
+  }
+};
+
+const openCreate = () => {
+  editingUser.value = null;
+  formVisible.value = true;
+};
+
+const openEdit = (row: UserInfo) => {
+  editingUser.value = row;
+  formVisible.value = true;
+};
+
+const toggleStatus = async (row: UserInfo) => {
+  const disable = row.is_active;
+  const ok = await ElMessageBox.confirm(
+    disable ? "该操作将影响用户账号，请确认是否继续" : "确认启用该用户账号？",
+    disable ? "禁用账号" : "启用账号",
+    {
+      type: disable ? "warning" : "info",
+      confirmButtonText: "确认",
+      cancelButtonText: "取消",
+    }
+  ).catch(() => null);
+  if (!ok) return;
+  try {
+    await updateUser(row.id, { is_active: !row.is_active });
+    ElMessage.success(disable ? "已禁用" : "已启用");
+    loadUsers();
+  } catch (e: any) {
+    ElMessage.error(e?.response?.data?.message || "操作失败");
+  }
+};
+
+const openReset = (row: UserInfo) => {
+  resetUser.value = row;
+  resetVisible.value = true;
+};
+
+onMounted(() => {
+  loadUsers();
+});
+</script>
+
+<style scoped>
+.page {
+  padding: 16px;
+}
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+}
+.pagination {
+  margin-top: 12px;
+  text-align: right;
+}
+</style>