添加用户数据接口和基本表格

my-project-backend/src/main/java/com/example/config/SecurityConfiguration.java

@@ -56,6 +56,7 @@ public class SecurityConfiguration {
                         .requestMatchers("/api/auth/**", "/error").permitAll()
                         .requestMatchers("/images/**").permitAll()
                         .requestMatchers("/swagger-ui/**", "/v3/api-docs/**").permitAll()
+                        .requestMatchers("/api/admin/**").hasRole(Const.ROLE_ADMIN)
                         .anyRequest().hasAnyRole(Const.ROLE_DEFAULT, Const.ROLE_ADMIN)
                 )
                 .formLogin(conf -> conf

my-project-backend/src/main/java/com/example/controller/admin/AccountAdminController.java

@@ -0,0 +1,34 @@
+package com.example.controller.admin;
+
+import com.alibaba.fastjson2.JSONObject;
+import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
+import com.example.entity.RestBean;
+import com.example.entity.vo.response.AccountVO;
+import com.example.service.AccountService;
+import jakarta.annotation.Resource;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+
+import java.util.List;
+
+@RestController
+@RequestMapping("/api/admin/user")
+public class AccountAdminController {
+
+    @Resource
+    AccountService service;
+
+    @GetMapping("/list")
+    public RestBean<JSONObject> accountList(int page, int size) {
+        JSONObject object = new JSONObject();
+        List<AccountVO> list = service.page(Page.of(page, size))
+                .getRecords()
+                .stream()
+                .map(a -> a.asViewObject(AccountVO.class))
+                .toList();
+        object.put("total", service.count());
+        object.put("list", list);
+        return RestBean.success(object);
+    }
+}

my-project-frontend/src/App.vue

@@ -3,6 +3,7 @@ import { useDark, useToggle } from '@vueuse/core'
 import {onMounted, provide, ref} from "vue";
 import {isUnauthorized} from "@/net";
 import {apiUserInfo} from "@/net/api/user";
+import zhCn from "element-plus/es/locale/lang/zh-cn";
 
 useDark({
   selector: 'html',
@@ -26,15 +27,15 @@ onMounted(() => {
 </script>
 
 <template>
-  <header>
-    <div class="wrapper">
-      <router-view/>
-    </div>
-  </header>
+  <el-config-provider :locale="zhCn">
+      <div class="wrapper">
+          <router-view/>
+      </div>
+  </el-config-provider>
 </template>
 
 <style scoped>
-header {
+.wrapper {
   line-height: 1.5;
 }
 </style>

my-project-frontend/src/net/api/user.js

@@ -49,7 +49,7 @@ export const apiUserPrivacy = (success) =>
     get('/api/user/privacy', success)
 
 export const apiUserPrivacySave = (data, loadingRef) => {
-    loadingRef.value = false
+    loadingRef.value = true
     post('/api/user/save-privacy', data, () => {
         ElMessage.success('隐私设置修改成功！')
         loadingRef.value = false
@@ -77,3 +77,6 @@ export const apiNotificationDeleteAll = (success) =>
 export const apiNotificationDelete = (id, success) =>
     get(`/api/notification/delete?id=${id}`, success)
 
+export const apiUserList = (page, size, success) =>
+    get(`api/admin/user/list?page=${page}&size=${size}`, success)
+

my-project-frontend/src/views/admin/UserAdmin.vue

@@ -1,13 +1,88 @@
 <script setup>
+import {User} from "@element-plus/icons-vue";
+import {apiUserList} from "@/net/api/user";
+import {reactive, watchEffect} from "vue";
+import {useStore} from "@/store";
 
+const store = useStore()
+
+const userTable = reactive({
+    page: 1,
+    size: 10,
+    total: 0,
+    data: []
+})
+
+watchEffect(() => apiUserList(userTable.page, userTable.size, data => {
+    userTable.total = data.total
+    userTable.data = data.list
+}))
 </script>
 
 <template>
-    <div>
-        我是用户管理
+    <div class="user-admin">
+        <div class="title">
+          <el-icon><User/></el-icon>
+          论坛用户列表
+        </div>
+        <div class="desc">
+          在这里管理论坛的所有用户，包括账号信息、封禁和禁言处理。
+        </div>
+        <el-table :data="userTable.data" height="320">
+            <el-table-column prop="id" label="编号" width="80"/>
+            <el-table-column label="用户名" width="180">
+                <template #default="{ row }">
+                    <div class="table-username">
+                        <el-avatar :size="30" :src="store.avatarUserUrl(row.avatar)"/>
+                        <div>{{ row.username }}</div>
+                    </div>
+                </template>
+            </el-table-column>
+            <el-table-column label="角色" width="100" align="center">
+                <template #default="{ row }">
+                    <el-tag type="danger" v-if="row.role === 'admin'">管理员</el-tag>
+                    <el-tag v-else>普通用户</el-tag>
+                </template>
+            </el-table-column>
+            <el-table-column prop="email" label="电子邮件"/>
+            <el-table-column label="注册时间">
+                <template #default="{ row }">
+                    {{ new Date(row.registerTime).toLocaleString() }}
+                </template>
+            </el-table-column>
+        </el-table>
+        <div class="pagination">
+            <el-pagination :total="userTable.total"
+                           v-model:current-page="userTable.page"
+                           v-model:page-size="userTable.size"
+                           layout="total, sizes, prev, pager, next, jumper"/>
+        </div>
     </div>
 </template>
 
 <style scoped>
+.user-admin {
+    .title {
+        font-weight: bold;
+    }
 
+    .desc {
+        color: #bababa;
+        font-size: 13px;
+        margin-bottom: 20px;
+    }
+
+    .table-username {
+        height: 30px;
+        display: flex;
+        align-items: center;
+        gap: 15px;
+    }
+
+    .pagination {
+        margin-top: 20px;
+        display: flex;
+        justify-content: right;
+    }
+}
 </style>