添加用户管理部分接口和页面

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

@@ -29,3 +29,6 @@ export const apiUserDetailSave = (form, success, failure) =>
 
 export const apiUserDetail = (success) =>
     get('/api/user/details', success)
+
+export const apiUserList = (page, size, success) =>
+    get(`/api/admin/user/list?page=${page}&size=${size}`, success)

my-project-frontend/src/views/AdminView.vue

@@ -74,7 +74,7 @@ onMounted(() => {
         .flatMap(menu => menu.sub)
         .find(sub => sub.index === route.fullPath)
     if(initPage) {
-        handleTabsClick(initPage)
+        openAdminTab(initPage)
     }
 })
 </script>

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

@@ -1,13 +1,82 @@
 <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" style="width: 100%" 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 style="margin-top: 20px;display: flex;justify-content: right">
+            <el-pagination style="width: fit-content"
+                           :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>
+<style lang="less" 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;
+    }
+}
 </style>