From 838a703023ccd1c0897498af0587deb3a2e13fe1 Mon Sep 17 00:00:00 2001
From: yuetsh <517252939@qq.com>
Date: Wed, 5 Mar 2025 20:50:13 +0800
Subject: [PATCH] add user pagination

---
 components.d.ts                          |  2 +
 src/api.ts                               |  7 +++-
 src/components/dashboard/UserActions.vue | 52 ++++++++++++++++++++++++
 src/pages/Dashboard.vue                  |  2 +-
 src/pages/UserManage.vue                 | 33 +++++++++++----
 src/router.ts                            |  2 +-
 src/utils/type.ts                        |  1 +
 7 files changed, 89 insertions(+), 10 deletions(-)
 create mode 100644 src/components/dashboard/UserActions.vue

diff --git a/components.d.ts b/components.d.ts
index d6c4598..67a3d3e 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -29,6 +29,7 @@ declare module 'vue' {
     NMessageProvider: typeof import('naive-ui')['NMessageProvider']
     NModal: typeof import('naive-ui')['NModal']
     NModalProvider: typeof import('naive-ui')['NModalProvider']
+    NPagination: typeof import('naive-ui')['NPagination']
     NSplit: typeof import('naive-ui')['NSplit']
     NSwitch: typeof import('naive-ui')['NSwitch']
     NTabPane: typeof import('naive-ui')['NTabPane']
@@ -39,5 +40,6 @@ declare module 'vue' {
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     Tutorial: typeof import('./src/components/Tutorial.vue')['default']
+    UserActions: typeof import('./src/components/dashboard/UserActions.vue')['default']
   }
 }
diff --git a/src/api.ts b/src/api.ts
index 7056c58..afce8d5 100644
--- a/src/api.ts
+++ b/src/api.ts
@@ -51,12 +51,17 @@ export class Account {
     return res.data
   }
 
-  static async list(query: { username: string }) {
+  static async list(query: { username: string; page: number }) {
     const res = await http.get("/account/list", {
       params: query,
     })
     return res.data
   }
+
+  static async toggleActive(id: number) {
+    const res = await http.put(`/account/active/${id}`)
+    return res.data
+  }
 }
 
 export class Tutorial {
diff --git a/src/components/dashboard/UserActions.vue b/src/components/dashboard/UserActions.vue
new file mode 100644
index 0000000..d0fe924
--- /dev/null
+++ b/src/components/dashboard/UserActions.vue
@@ -0,0 +1,52 @@
+<template>
+  <n-flex>
+    <n-button
+      secondary
+      v-if="user.role !== Role.Super"
+      @click="edit"
+    >
+      修改
+    </n-button>
+    <n-button
+      secondary
+      type="error"
+      v-if="user.role !== Role.Super && user.is_active"
+      @click="toggleUserActive"
+    >
+      封号
+    </n-button>
+    <n-button
+      secondary
+      type="primary"
+      v-if="user.role !== Role.Super && !user.is_active"
+      @click="toggleUserActive"
+    >
+      解封
+    </n-button>
+  </n-flex>
+</template>
+<script lang="ts" setup>
+import { useMessage } from "naive-ui"
+import { Account } from "../../api"
+import { ADMIN_URL } from "../../utils/const"
+import { Role, type User } from "../../utils/type"
+
+interface Props {
+  user: User
+}
+
+const props = defineProps<Props>()
+const emits = defineEmits(["reload"])
+
+const message = useMessage()
+
+function edit() {
+  window.open(`${ADMIN_URL}/account/user/${props.user.id}/change/`)
+}
+
+async function toggleUserActive() {
+  const data = await Account.toggleActive(props.user.id)
+  message.success(data.message)
+  emits("reload")
+}
+</script>
diff --git a/src/pages/Dashboard.vue b/src/pages/Dashboard.vue
index b18ba59..a1413d4 100644
--- a/src/pages/Dashboard.vue
+++ b/src/pages/Dashboard.vue
@@ -25,7 +25,7 @@ const menu = [
     label: "教程",
     route: { name: "tutorial", params: { display: step.value } },
   },
-  { label: "用户", route: { name: "user-manage" } },
+  { label: "用户", route: { name: "user-manage", params: { page: 1 } } },
 ]
 </script>
 <style scoped>
diff --git a/src/pages/UserManage.vue b/src/pages/UserManage.vue
index 993ba35..2392e57 100644
--- a/src/pages/UserManage.vue
+++ b/src/pages/UserManage.vue
@@ -7,23 +7,33 @@
       <n-button @click="init">搜索</n-button>
       <n-button @click="goDjangoUserAdd">新建一个</n-button>
       <n-button>批量新建</n-button>
+      <n-pagination
+        v-model:page="query.page"
+        :page-size="20"
+        :item-count="count"
+        simple
+      />
     </n-flex>
-    <n-flex>
-      <n-data-table :columns="columns" :data="data"></n-data-table>
-    </n-flex>
+    <n-data-table :columns="columns" :data="users"></n-data-table>
   </n-flex>
 </template>
 <script lang="ts" setup>
-import { onMounted, reactive, ref } from "vue"
+import { onMounted, reactive, ref, h, watch } from "vue"
 import { Account } from "../api"
 import { parseTime } from "../utils/helper"
 import type { DataTableColumn } from "naive-ui"
 import { getRole, type User } from "../utils/type"
 import { ADMIN_URL } from "../utils/const"
+import UserActions from "../components/dashboard/UserActions.vue"
+import { useRoute, useRouter } from "vue-router"
 
-const data = ref([])
+const users = ref([])
+const count = ref(0)
+const route = useRoute()
+const router = useRouter()
 const query = reactive({
   username: "",
+  page: Number(route.params.page),
 })
 
 const columns: DataTableColumn<User>[] = [
@@ -32,7 +42,7 @@ const columns: DataTableColumn<User>[] = [
     key: "username",
   },
   {
-    title: "凭证",
+    title: "密码",
     key: "raw_password",
   },
   {
@@ -56,6 +66,7 @@ const columns: DataTableColumn<User>[] = [
   {
     title: "选项",
     key: "actions",
+    render: (row) => h(UserActions, { user: row, onReload: init }),
   },
 ]
 
@@ -64,9 +75,17 @@ function goDjangoUserAdd() {
 }
 
 async function init() {
-  data.value = await Account.list(query)
+  const data = await Account.list(query)
+  users.value = data.items
+  count.value = data.count
 }
 
+watch(query, init)
+watch(
+  () => query.page,
+  (v) => router.push({ params: { page: v } }),
+)
+
 onMounted(init)
 </script>
 <style scoped>
diff --git a/src/router.ts b/src/router.ts
index cdbbde6..2153112 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -18,7 +18,7 @@ const routes = [
         component: () => import("./pages/Markdown.vue"),
       },
       {
-        path: "user-manage",
+        path: "user-manage/:page",
         name: "user-manage",
         component: () => import("./pages/UserManage.vue"),
       },
diff --git a/src/utils/type.ts b/src/utils/type.ts
index 97892c9..6490ff9 100644
--- a/src/utils/type.ts
+++ b/src/utils/type.ts
@@ -29,6 +29,7 @@ export interface TutorialIn {
 }
 
 export interface User {
+  id: number
   username: string
   date_joined: Date
   last_login: Date