update

src/api.ts

@@ -1,13 +1,10 @@
 import axios from "axios"
 import { router } from "./router"
 import type { TutorialIn } from "./utils/type"
-import { STORAGE_KEY } from "./utils/const"
+import { BASE_URL, STORAGE_KEY } from "./utils/const"
 
 const http = axios.create({
-  baseURL:
-    import.meta.env.MODE === "development"
-      ? "http://localhost:8000/api"
-      : "https://web.xuyue.cc/api",
+  baseURL: BASE_URL,
   xsrfCookieName: "xsrfCookieName",
   xsrfHeaderName: "X-CSRFTOKEN",
   withCredentials: true,

src/components/Corner.vue

@@ -20,11 +20,12 @@
 import { computed, h } from "vue"
 import { useMessage } from "naive-ui"
 import { Icon } from "@iconify/vue"
-import { user, authed, roleNormal } from "../store/user"
+import { user, authed, roleNormal, roleSuper } from "../store/user"
 import { loginModal } from "../store/modal"
 import { Account } from "../api"
 import { Role } from "../utils/type"
 import { router } from "../router"
+import { ADMIN_URL } from "../utils/const"
 
 const message = useMessage()
 
@@ -38,6 +39,15 @@ const menu = computed(() => [
         icon: "streamline-emojis:robot-face-1",
       }),
   },
+  {
+    label: "管理",
+    key: "admin",
+    show: roleSuper.value,
+    icon: () =>
+      h(Icon, {
+        icon: "skill-icons:django",
+      }),
+  },
   {
     label: "退出",
     key: "logout",
@@ -53,6 +63,9 @@ function clickMenu(name: string) {
     case "dashboard":
       router.push({ name: "tutorial" })
       break
+    case "admin":
+      window.open(ADMIN_URL)
+      break
     case "logout":
       handleLogout()
       break

src/pages/UserManage.vue

@@ -5,7 +5,7 @@
         <n-input v-model:value="query.username" clearable />
       </div>
       <n-button @click="init">搜索</n-button>
-      <n-button>新建一个</n-button>
+      <n-button @click="goDjangoUserAdd">新建一个</n-button>
       <n-button>批量新建</n-button>
     </n-flex>
     <n-flex>
@@ -18,7 +18,8 @@ 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"
+import { getRole, type User } from "../utils/type"
+import { ADMIN_URL } from "../utils/const"
 
 const data = ref([])
 const query = reactive({
@@ -43,11 +44,14 @@ const columns: DataTableColumn<User>[] = [
     title: "上次登录",
     key: "last_login",
     render: (row) =>
-      row.last_login ? parseTime(row.last_login, "YYYY-MM-DD HH:mm:ss") : "从未登录",
+      row.last_login
+        ? parseTime(row.last_login, "YYYY-MM-DD HH:mm:ss")
+        : "从未登录",
   },
   {
     title: "权限",
     key: "role",
+    render: (row) => getRole(row.role),
   },
   {
     title: "选项",
@@ -55,6 +59,10 @@ const columns: DataTableColumn<User>[] = [
   },
 ]
 
+function goDjangoUserAdd() {
+  window.open(`${ADMIN_URL}/account/user/add/`)
+}
+
 async function init() {
   data.value = await Account.list(query)
 }

src/store/user.ts

@@ -9,4 +9,4 @@ export const user = reactive({
 export const authed = computed(() => !!user.username)
 export const roleNormal = computed(() => user.role === Role.Normal)
 export const roleAdmin = computed(() => user.role === Role.Admin)
-export const roleSuper = computed(() => user.role !== Role.Super)
+export const roleSuper = computed(() => user.role === Role.Super)

src/utils/const.ts

@@ -35,4 +35,14 @@ export const STORAGE_KEY = {
   JS: "web-js",
   TAB: "web-tab",
   FONTSIZE: "web-fontsize",
-}
+}
+
+export const ADMIN_URL =
+  import.meta.env.MODE === "development"
+    ? "http://localhost:8000/admin"
+    : "https://web.xuyue.cc/admin"
+
+export const BASE_URL =
+  import.meta.env.MODE === "development"
+    ? "http://localhost:8000/api"
+    : "https://web.xuyue.cc/api"

src/utils/type.ts

@@ -4,6 +4,14 @@ export enum Role {
   Normal = "normal",
 }
 
+export function getRole(role: Role) {
+  return {
+    [Role.Super]: "超级管理员",
+    [Role.Admin]: "管理员",
+    [Role.Normal]: "普通用户",
+  }[role]
+}
+
 export interface TutorialSlim {
   display: number
   title: string
@@ -22,4 +30,4 @@ export interface User {
   last_login: Date
   role: Role
   is_active: boolean
-}
+}