update

components.d.ts

@@ -15,6 +15,7 @@ declare module 'vue' {
     NButton: typeof import('naive-ui')['NButton']
     NCard: typeof import('naive-ui')['NCard']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
+    NDataTable: typeof import('naive-ui')['NDataTable']
     NDialogProvider: typeof import('naive-ui')['NDialogProvider']
     NDropdown: typeof import('naive-ui')['NDropdown']
     NFlex: typeof import('naive-ui')['NFlex']

package-lock.json

@@ -1474,10 +1474,11 @@
       "license": "MIT"
     },
     "node_modules/date-fns": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
-      "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+      "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
       "license": "MIT",
+      "peer": true,
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/kossnocorp"
@@ -2264,6 +2265,16 @@
         "vue": "^3.0.0"
       }
     },
+    "node_modules/naive-ui/node_modules/date-fns": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
+      "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.8",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",

src/api.ts

@@ -53,6 +53,13 @@ export class Account {
     const res = await http.get("/account/profile")
     return res.data
   }
+
+  static async list(query: { username: string }) {
+    const res = await http.get("/account/list", {
+      params: query,
+    })
+    return res.data
+  }
 }
 
 export class Tutorial {

src/pages/UserManage.vue

@@ -1 +1,68 @@
-<template>用户管理页面</template>
+<template>
+  <n-flex vertical class="container">
+    <n-flex>
+      <div>
+        <n-input v-model:value="query.username" clearable />
+      </div>
+      <n-button @click="init">搜索</n-button>
+      <n-button>新建一个</n-button>
+      <n-button>批量新建</n-button>
+    </n-flex>
+    <n-flex>
+      <n-data-table :columns="columns" :data="data"></n-data-table>
+    </n-flex>
+  </n-flex>
+</template>
+<script lang="ts" setup>
+import { onMounted, reactive, ref } from "vue"
+import { Account } from "../api"
+import { parseTime } from "../utils/helper"
+import type { DataTableColumn } from "naive-ui"
+import type { User } from "../utils/type"
+
+const data = ref([])
+const query = reactive({
+  username: "",
+})
+
+const columns: DataTableColumn<User>[] = [
+  {
+    title: "用户名",
+    key: "username",
+  },
+  {
+    title: "凭证",
+    key: "raw_password",
+  },
+  {
+    title: "创建时间",
+    key: "date_joined",
+    render: (row) => parseTime(row.date_joined, "YYYY-MM-DD HH:mm:ss"),
+  },
+  {
+    title: "上次登录",
+    key: "last_login",
+    render: (row) =>
+      row.last_login ? parseTime(row.last_login, "YYYY-MM-DD HH:mm:ss") : "从未登录",
+  },
+  {
+    title: "权限",
+    key: "role",
+  },
+  {
+    title: "选项",
+    key: "actions",
+  },
+]
+
+async function init() {
+  data.value = await Account.list(query)
+}
+
+onMounted(init)
+</script>
+<style scoped>
+.container {
+  padding: 10px 10px 10px 0;
+}
+</style>

src/utils/helper.ts

@@ -0,0 +1,6 @@
+import { useDateFormat } from "@vueuse/core"
+
+export function parseTime(utc: Date | string, format = "YYYY年M月D日") {
+  const time = useDateFormat(utc, format, { locales: "zh-CN" })
+  return time.value
+}

src/utils/type.ts

@@ -15,3 +15,11 @@ export interface TutorialIn {
   title: string
   content: string
 }
+
+export interface User {
+  username: string
+  date_joined: Date
+  last_login: Date
+  role: Role
+  is_active: boolean
+}