用户模块：用户管理

src/access.ts

@@ -0,0 +1,29 @@
+import { useLoginUserStore } from '@/stores/useLoginUserStore'
+import { message } from 'ant-design-vue'
+import router from '@/router'
+
+// 是否为首次获取登录用户
+let firstFetchLoginUser = true;
+
+/**
+ * 全局权限校验
+ */
+router.beforeEach(async (to, from, next) => {
+  const loginUserStore = useLoginUserStore()
+  let loginUser = loginUserStore.loginUser
+  // 确保页面刷新，首次加载时，能够等后端返回用户信息后再校验权限
+  if (firstFetchLoginUser) {
+    await loginUserStore.fetchLoginUser()
+    loginUser = loginUserStore.loginUser
+    firstFetchLoginUser = false;
+  }
+  const toUrl = to.fullPath
+  if (toUrl.startsWith('/admin')) {
+    if (!loginUser || loginUser.userRole !== 'admin') {
+      message.error('没有权限')
+      next(`/user/login?redirect=${to.fullPath}`)
+      return
+    }
+  }
+  next()
+})

src/components/GlobalHeader.vue

@@ -45,7 +45,7 @@
 </template>
 
 <script lang="ts" setup>
-import { h, ref } from 'vue'
+import { computed, h, ref } from 'vue'
 import { HomeOutlined, LogoutOutlined } from '@ant-design/icons-vue'
 import { useRouter } from 'vue-router'
 import { useLoginUserStore } from '@/stores/useLoginUserStore.ts'
@@ -54,7 +54,7 @@ import { message } from 'ant-design-vue'
 
 const loginUserStore = useLoginUserStore()
 
-const items = [
+const originItems = [
   {
     key: '/',
     icon: () => h(HomeOutlined),
@@ -62,9 +62,9 @@ const items = [
     title: '主页',
   },
   {
-    key: '/about',
-    label: '关于',
-    title: '关于',
+    key: '/admin/userManage',
+    label: '用户管理',
+    title: '用户管理',
   },
   {
     key: 'others',
@@ -73,6 +73,23 @@ const items = [
   },
 ]
 
+// 根据权限过滤菜单项
+const filterMenus = (menus = [] as MenuProps['items']) => {
+  return menus?.filter((menu) => {
+    // 管理员才能看到 /admin 开头的菜单
+    if (menu?.key?.startsWith('/admin')) {
+      const loginUser = loginUserStore.loginUser
+      if (!loginUser || loginUser.userRole !== 'admin') {
+        return false
+      }
+    }
+    return true
+  })
+}
+
+// 展示在菜单的路由数组
+const items = computed(() => filterMenus(originItems))
+
 const router = useRouter()
 // 当前要高亮的菜单项
 const current = ref<string[]>([])

src/pages/admin/UserManagePage.vue

@@ -1,11 +1,155 @@
 <template>
-
+  <div id="userManagePage">
+    <!-- 搜索表单 -->
+    <a-form layout="inline" :model="searchParams" @finish="doSearch">
+      <a-form-item label="账号">
+        <a-input v-model:value="searchParams.userAccount" placeholder="输入账号" allow-clear />
+      </a-form-item>
+      <a-form-item label="用户名">
+        <a-input v-model:value="searchParams.userName" placeholder="输入用户名" allow-clear />
+      </a-form-item>
+      <a-form-item>
+        <a-button type="primary" html-type="submit">搜索</a-button>
+      </a-form-item>
+    </a-form>
+    <div style="margin-bottom: 16px" />
+    <!-- 表格 -->
+    <a-table
+      :columns="columns"
+      :data-source="dataList"
+      :pagination="pagination"
+      @change="doTableChange"
+    >
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.dataIndex === 'userAvatar'">
+          <a-image :src="record.userAvatar" :width="120" />
+        </template>
+        <template v-else-if="column.dataIndex === 'userRole'">
+          <div v-if="record.userRole === 'admin'">
+            <a-tag color="green">管理员</a-tag>
+          </div>
+          <div v-else>
+            <a-tag color="blue">普通用户</a-tag>
+          </div>
+        </template>
+        <template v-if="column.dataIndex === 'createTime'">
+          {{ dayjs(record.createTime).format('YYYY-MM-DD HH:mm:ss') }}
+        </template>
+        <template v-else-if="column.key === 'action'">
+          <a-button danger @click="doDelete(record.id)">删除</a-button>
+        </template>
+      </template>
+    </a-table>
+  </div>
 </template>
+<script lang="ts" setup>
+import { computed, onMounted, reactive, ref } from 'vue'
+import { deleteUserUsingPost, listUserVoByPageUsingPost } from '@/api/userController.ts'
+import { message } from 'ant-design-vue'
+import dayjs from 'dayjs'
 
-<script setup lang="ts" name="">
+const columns = [
+  {
+    title: 'id',
+    dataIndex: 'id',
+  },
+  {
+    title: '账号',
+    dataIndex: 'userAccount',
+  },
+  {
+    title: '用户名',
+    dataIndex: 'userName',
+  },
+  {
+    title: '头像',
+    dataIndex: 'userAvatar',
+  },
+  {
+    title: '简介',
+    dataIndex: 'userProfile',
+  },
+  {
+    title: '用户角色',
+    dataIndex: 'userRole',
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createTime',
+  },
+  {
+    title: '操作',
+    key: 'action',
+  },
+]
 
+// 定义数据
+const dataList = ref<API.UserVO[]>([])
+const total = ref(0)
+
+// 搜索条件
+const searchParams = reactive<API.UserQueryRequest>({
+  current: 1,
+  pageSize: 10,
+  sortField: 'createTime',
+  sortOrder: 'ascend',
+})
+
+// 获取数据
+const fetchData = async () => {
+  const res = await listUserVoByPageUsingPost({
+    ...searchParams,
+  })
+  if (res.data.code === 200 && res.data.data) {
+    dataList.value = res.data.data.records ?? []
+    total.value = res.data.data.total ?? 0
+  } else {
+    message.error('获取数据失败，' + res.data.message)
+  }
+}
+
+// 页面加载时获取数据，请求一次
+onMounted(() => {
+  fetchData()
+})
+
+// 分页参数
+const pagination = computed(() => {
+  return {
+    current: searchParams.current,
+    pageSize: searchParams.pageSize,
+    total: total.value,
+    showSizeChanger: true,
+    showTotal: (total) => `共 ${total} 条`,
+  }
+})
+
+// 表格变化之后，重新获取数据
+const doTableChange = (page: any) => {
+  searchParams.current = page.current
+  searchParams.pageSize = page.pageSize
+  fetchData()
+}
+
+// 搜索数据
+const doSearch = () => {
+  // 重置页码
+  searchParams.current = 1
+  fetchData()
+}
+
+// 删除数据
+const doDelete = async (id: string) => {
+  if (!id) {
+    return
+  }
+  const res = await deleteUserUsingPost({ id })
+  if (res.data.code === 200) {
+    message.success('删除成功')
+    // 刷新数据
+    fetchData()
+  } else {
+    message.error('删除失败')
+  }
+}
 </script>
-
-<style scoped>
-
-</style>