edit user.

src/admin/api.ts

@@ -1,5 +1,5 @@
 import http from "utils/http"
-import { Problem } from "~/utils/types"
+import { Problem, User } from "~/utils/types"
 
 export async function getProblemList(offset = 0, limit = 10, keyword: string) {
   const res = await http.get("admin/problem", {
@@ -35,3 +35,11 @@ export function getUserList(offset = 0, limit = 10, keyword: string) {
     params: { paging: true, offset, limit, keyword },
   })
 }
+
+export function deleteUsers(userIDs: number[]) {
+  return http.delete("admin/user", { params: { id: userIDs.join(",") } })
+}
+
+export function editUser(user: User & { password: string }) {
+  return http.put("admin/user", user)
+}

src/admin/problem/components/Actions.vue

@@ -10,8 +10,8 @@ const emit = defineEmits(["deleted"])
 const router = useRouter()
 const message = useMessage()
 
-async function handleDeleteProblem(problemID: number) {
-  await deleteProblem(problemID)
+async function handleDeleteProblem() {
+  await deleteProblem(props.problemID)
   message.success("删除成功")
   emit("deleted")
 }
@@ -32,7 +32,7 @@ function goEdit() {
     <n-button size="small" secondary type="primary" @click="goEdit">
       编辑
     </n-button>
-    <n-popconfirm @positive-click="() => handleDeleteProblem(props.problemID)">
+    <n-popconfirm @positive-click="handleDeleteProblem">
       <template #trigger>
         <n-button secondary size="small" type="error">删除</n-button>
       </template>

src/admin/user/components/Actions.vue

@@ -1,15 +1,46 @@
 <script lang="ts" setup>
+import { editUser } from "~/admin/api"
 import { User } from "~/utils/types"
 
 interface Props {
   user: User
 }
 const props = defineProps<Props>()
+const emit = defineEmits<{
+  (e: "deleteUser", value: number[]): void
+  (e: "userBanned", value: User): void
+  (e: "openEditModal", value: User): void
+}>()
+
+async function banUser() {
+  props.user.is_disabled = !props.user.is_disabled
+  await editUser(props.user)
+  emit("userBanned", props.user)
+}
 </script>
 <template>
   <n-space align="center">
-    <n-button size="small" secondary type="primary">编辑</n-button>
-    <n-button size="small" secondary type="error">封号</n-button>
-    <n-button size="small" secondary type="default">删除</n-button>
+    <n-button
+      size="small"
+      type="primary"
+      secondary
+      @click="$emit('openEditModal', props.user)"
+    >
+      编辑
+    </n-button>
+    <n-button
+      size="small"
+      secondary
+      :type="props.user.is_disabled ? 'info' : 'error'"
+      @click="banUser"
+    >
+      {{ props.user.is_disabled ? "解封" : "封号" }}
+    </n-button>
+    <n-popconfirm @positive-click="$emit('deleteUser', [props.user.id])">
+      <template #trigger>
+        <n-button size="small" secondary type="warning">删除</n-button>
+      </template>
+      确定删除这个用户吗？删除后无法恢复！
+    </n-popconfirm>
   </n-space>
 </template>

src/admin/user/list.vue

@@ -1,26 +1,39 @@
 <script setup lang="ts">
-import { DataTableColumn } from "naive-ui"
+import {
+  DataTableColumn,
+  DataTableRowKey,
+  messageDark,
+  SelectOption,
+} from "naive-ui"
 import Pagination from "~/shared/Pagination.vue"
 import { parseTime } from "~/utils/functions"
 import { User } from "~/utils/types"
-import { getUserList } from "../api"
+import { getUserList, deleteUsers, editUser } from "../api"
 import Actions from "./components/Actions.vue"
 import Name from "./components/Name.vue"
 
+const message = useMessage()
+
 const total = ref(0)
 const users = ref<User[]>([])
+const userEditing = ref<User | null>(null)
 const query = reactive({
   limit: 10,
   page: 1,
   keyword: "",
 })
+const password = ref("")
+const userIDs = ref<DataTableRowKey[]>([])
+
+const rowKey = (row: User) => row.id
 
 const columns: DataTableColumn<User>[] = [
+  { type: "selection" },
   { title: "ID", key: "id", width: 60 },
   {
     title: "用户名",
     key: "username",
-    width: 150,
+    width: 180,
     render: (row) => h(Name, { user: row }),
   },
   {
@@ -42,11 +55,24 @@ const columns: DataTableColumn<User>[] = [
   { title: "邮箱", key: "email", width: 200 },
   {
     key: "edit",
+    title: "选项",
     width: 200,
-    render: (row) => h(Actions, { user: row }),
+    render: (row) =>
+      h(Actions, {
+        user: row,
+        onDeleteUser: onDeleteUsers,
+        onUserBanned,
+        onOpenEditModal,
+      }),
   },
 ]
 
+const options: SelectOption[] = [
+  { label: "普通", value: "Regular User" },
+  { label: "管理员", value: "Admin" },
+  { label: "超级管理员", value: "Super Admin" },
+]
+
 async function listUsers() {
   const offset = (query.page - 1) * query.limit
   const res = await getUserList(offset, query.limit, query.keyword)
@@ -54,6 +80,46 @@ async function listUsers() {
   users.value = res.data.results
 }
 
+function chooseUsers(rowKeys: DataTableRowKey[]) {
+  userIDs.value = rowKeys
+}
+
+async function onDeleteUsers(userIDs: DataTableRowKey[] | Ref<number[]>) {
+  await deleteUsers(toRaw(userIDs) as number[])
+  listUsers()
+}
+
+async function onUserBanned(user: User) {
+  users.value = users.value.map((it) => {
+    if (it.id === user.id) {
+      it.is_disabled = user.is_disabled
+    }
+    return it
+  })
+}
+
+async function onOpenEditModal(user: User) {
+  userEditing.value = user
+  password.value = ""
+}
+
+async function onCloseEditModal() {
+  userEditing.value = null
+  password.value = ""
+}
+
+async function handleEditUser() {
+  if (!userEditing.value) return
+  if (password.value && password.value.length < 6) {
+    message.error("密码长度不得小于 6")
+    return
+  }
+  const user = Object.assign(userEditing.value, { password: password.value })
+  await editUser(user)
+  userEditing.value = null
+  password.value = ""
+}
+
 onMounted(listUsers)
 watch(query, listUsers, { deep: true })
 </script>
@@ -63,13 +129,63 @@ watch(query, listUsers, { deep: true })
     <n-form-item>
       <n-input placeholder="请输入关键字搜索" v-model:value="query.keyword" />
     </n-form-item>
+    <n-form-item v-if="userIDs.length">
+      <n-popconfirm @positive-click="onDeleteUsers(userIDs)">
+        <template #trigger>
+          <n-button type="warning">删除</n-button>
+        </template>
+        确定删除这个用户吗？删除后无法恢复！
+      </n-popconfirm>
+    </n-form-item>
   </n-form>
-  <n-data-table :data="users" :columns="columns" size="small" striped />
+  <n-data-table
+    :data="users"
+    :columns="columns"
+    size="small"
+    striped
+    :row-key="rowKey"
+    @update:checked-row-keys="chooseUsers"
+  />
   <Pagination
     :total="total"
     v-model:limit="query.limit"
     v-model:page="query.page"
   />
+  <n-modal
+    :mask-closable="false"
+    :show="!!userEditing"
+    preset="card"
+    title="编辑用户"
+    style="width: 700px"
+    @close="onCloseEditModal"
+  >
+    <n-form label-placement="left" v-if="userEditing">
+      <n-grid :cols="2" :x-gap="16">
+        <n-form-item-gi :span="1" label="用户">
+          <n-input v-model:value="userEditing.username" />
+        </n-form-item-gi>
+        <n-form-item-gi :span="1" label="真名">
+          <n-input v-model:value="userEditing.real_name" />
+        </n-form-item-gi>
+        <n-form-item-gi :span="1" label="邮箱">
+          <n-input v-model:value="userEditing.email" />
+        </n-form-item-gi>
+        <n-form-item-gi :span="1" label="密码">
+          <n-input v-model:value="password" />
+        </n-form-item-gi>
+        <n-form-item-gi :span="1" label="类型">
+          <n-select v-model:value="userEditing.admin_type" :options="options" />
+        </n-form-item-gi>
+        <n-form-item-gi :span="1" label="是否封禁">
+          <n-switch v-model:value="userEditing.is_disabled">封号</n-switch>
+        </n-form-item-gi>
+      </n-grid>
+      <n-space justify="end">
+        <n-button @click="onCloseEditModal">取消</n-button>
+        <n-button type="primary" @click="handleEditUser">保存</n-button>
+      </n-space>
+    </n-form>
+  </n-modal>
 </template>
 
 <style scoped></style>

src/components.d.ts

@@ -32,6 +32,7 @@ declare module '@vue/runtime-core' {
     NEmpty: typeof import('naive-ui')['NEmpty']
     NForm: typeof import('naive-ui')['NForm']
     NFormItem: typeof import('naive-ui')['NFormItem']
+    NFormItemGi: typeof import('naive-ui')['NFormItemGi']
     NGi: typeof import('naive-ui')['NGi']
     NGrid: typeof import('naive-ui')['NGrid']
     NIcon: typeof import('naive-ui')['NIcon']

src/routes.ts

@@ -127,7 +127,7 @@ export const routes: RouteRecordRaw[] = [
       {
         path: "user/importing",
         name: "admin user importing",
-        component: () => import("admin/user/import.vue"),
+        component: () => import("~/admin/user/importing.vue"),
       },
       {
         path: "problem/list",

src/shared/Login.vue

@@ -7,7 +7,7 @@ import type { FormRules } from "naive-ui"
 const userStore = useUserStore()
 const loginRef = ref()
 const [isLoading] = useToggle()
-const error = ref()
+const msg = ref("")
 const form = reactive({
   username: "",
   password: "",
@@ -20,21 +20,25 @@ const rules: FormRules = {
   ],
 }
 
-const msg = computed(() => error.value && "用户名或密码不正确")
-
 async function submit() {
   loginRef.value?.validate(async (errors: FormRules | undefined) => {
     if (!errors) {
       try {
-        error.value = null
+        msg.value = ""
         isLoading.value = true
         await login(form)
-      } catch (err) {
-        error.value = err
+      } catch (err: any) {
+        if (err.data === "Your account has been disabled") {
+          msg.value = "此账号已被封禁"
+        } else if (err.data === "Invalid username or password") {
+          msg.value = "用户名或密码不正确"
+        } else {
+          msg.value = "无法登录"
+        }
       } finally {
         isLoading.value = false
       }
-      if (!error.value) {
+      if (!msg.value) {
         toggleLogin(false)
         userStore.getMyProfile()
       }

src/utils/types.ts

@@ -36,6 +36,7 @@ export interface Profile {
 export interface User {
   id: number
   username: string
+  real_name: string
   email: string
   admin_type: "Regular User" | "Super Admin" | "Admin"
   problem_permission: string