feat(User): 扩展用户管理，添加用户注册

src/App.vue

@@ -140,6 +140,9 @@ function fullScreenListener(e: KeyboardEvent) {
               <span class="i-icon-park-outline:return" />返回首页
             </router-link>
             ·
+            <span
+              class="i-icon-park-outline-user"
+            />
             <router-link v-if="userStore.profile.nickName" to="/settings">
               {{ userStore.profile.nickName }}
             </router-link>
@@ -252,6 +255,10 @@ function fullScreenListener(e: KeyboardEvent) {
       line-height: 2.2rem;
       margin-top: .8rem;
       color: var(--el-text-color-secondary);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: .4rem;
 
       a {
         color: var(--el-color-primary) !important;

src/stores/tools.ts

@@ -12,6 +12,11 @@ const internalTools: ToolItem[] = [
     link: '/login',
     type: 'internal',
   },
+  {
+    name: '注册',
+    link: '/register',
+    type: 'internal',
+  },
   {
     name: '用户管理',
     link: '/userManager',

src/stores/user.ts

@@ -4,16 +4,18 @@ import type { AxiosError, AxiosResponse } from 'axios'
 import axios from '@/plugins/Axios'
 import type { AuthOption, User } from '@/types/auth'
 import { downloadSettings } from '@/plugins/PiniaSync'
+import config from '@/config'
 
 let tokenChecked = false
 let checkTokenPromise: Promise<AxiosResponse> | null = null
 
 const emptyProfile: User = {
-  nickName: null,
-  userName: null,
-  email: null,
-  userId: null,
-  roles: null,
+  nickName: '',
+  userName: '',
+  email: '',
+  userId: -1,
+  roles: [],
+  mobile: '',
 }
 
 export const useUserStore = defineStore('user', {
@@ -79,6 +81,23 @@ export const useUserStore = defineStore('user', {
         this.clearToken()
       }
     },
+    async register(form: Omit<User, 'roles' | 'userId'>) {
+      try {
+        const data = (await axios.post(`${config.apiOrigin}/auth/register`, form)).data
+        if (data && data.success) {
+          return true
+        }
+        else {
+          throw new Error(data.message)
+        }
+      }
+      catch (e) {
+        if (((e as AxiosError)?.response?.data as { message: string })?.message) {
+          throw new Error(((e as AxiosError)?.response?.data as { message: string })?.message)
+        }
+        throw e
+      }
+    },
     async updateUser(options: {
       nickName?: string
       email?: string

src/tools/internal/settings.vue

@@ -53,6 +53,11 @@ function login() {
     },
   })
 }
+
+function register() {
+  router.push('/register')
+}
+
 function logout() {
   router.push('/logout')
 }
@@ -257,6 +262,11 @@ async function updateUser(formEl: FormInstance | undefined) {
     >
       登录
     </el-button>
+    <el-button
+      @click="register"
+    >
+      注册
+    </el-button>
     <el-popconfirm
       title="您是否确定要清空本地缓存？"
       confirm-button-text="清空"

src/tools/internal/user/userManager.vue

@@ -38,12 +38,18 @@ async function getUsers(pageIndex: number, pageSize: number) {
 
 function operation(row: User, operation: string) {
   switch (operation) {
+    case 'edit':
+      // todo
+      break
     case 'disable':
       disableUser(row)
       break
     case 'activate':
       activateUser(row)
       break
+    case 'delete':
+      deleteUser(row)
+      break
   }
 }
 
@@ -86,6 +92,26 @@ async function activateUser(row: User) {
     ElMessage.error((e as Error).message)
   }
 }
+
+async function deleteUser(row: User) {
+  try {
+    const data = (await $axios.post(`${config.apiOrigin}/user/remove`, null, {
+      params: {
+        id: row.userId,
+      },
+    })).data
+    if (data.success) {
+      ElMessage.success(data.message)
+      await getUsers(page.index, page.size)
+    }
+    else {
+      throw new Error(data.message)
+    }
+  }
+  catch (e) {
+    ElMessage.error((e as Error).message)
+  }
+}
 </script>
 
 <template>

src/tools/internal/user/userTableColumns.tsx

@@ -1,8 +1,9 @@
 import dayjs from 'dayjs'
 import type { Columns } from 'element-plus'
-import { ElButton, ElTag } from 'element-plus'
+import { ElButton, ElPopconfirm, ElTag } from 'element-plus'
 import 'element-plus/es/components/tag/style/css'
 import 'element-plus/es/components/button/style/css'
+import 'element-plus/es/components/popconfirm/style/css'
 import { FixedDir } from 'element-plus/es/components/table-v2/src/constants'
 import type { User } from '@/types/auth'
 
@@ -93,29 +94,56 @@ export function getUserTableColumns(onClick: (row: User, operation: string) => v
     {
       key: 'operations',
       title: '操作',
-      width: 150,
+      width: 200,
       fixed: FixedDir.RIGHT,
       cellRenderer: ({ rowData }: { rowData: User }) => {
         return (
-          rowData.status === UserStatus.DEACTIVATED || rowData.status === UserStatus.DISABLED
-            ? (
-              <ElButton
-                size="small"
-                plain
-                onClick={() => onClick(rowData, 'activate')}
-              >
-                启用
-              </ElButton>
-              )
-            : (
-              <ElButton
-                size="small"
-                plain
-                onClick={() => onClick(rowData, 'disable')}
-              >
-                禁用
-              </ElButton>
-              )
+          <>
+            <ElButton
+              size="small"
+              plain
+              onClick={() => onClick(rowData, 'edit')}
+            >
+              修改
+            </ElButton>
+            {
+              rowData.status === UserStatus.DEACTIVATED || rowData.status === UserStatus.DISABLED
+                ? (
+                  <ElButton
+                    size="small"
+                    plain
+                    onClick={() => onClick(rowData, 'activate')}
+                  >
+                    启用
+                  </ElButton>
+                  )
+                : (
+                  <ElButton
+                    size="small"
+                    plain
+                    onClick={() => onClick(rowData, 'disable')}
+                  >
+                    禁用
+                  </ElButton>
+                  )
+            }
+            <ElPopconfirm
+              title="确定要删除吗？"
+              onConfirm={() => onClick(rowData, 'delete')}
+            >
+              {{
+                reference: () => (
+                  <ElButton
+                    size="small"
+                    plain
+                    type="danger"
+                  >
+                    删除
+                  </ElButton>
+                ),
+              }}
+            </ElPopconfirm>
+          </>
         )
       },
     },

src/types/auth.d.ts

@@ -9,11 +9,12 @@ export interface Role {
 }
 
 export interface User {
-  nickName: string | null
-  userName: string | null
-  email: string | null
-  userId: number | null
-  roles: Role[] | null
+  nickName: string
+  userName: string
+  email: string
+  userId: number
+  mobile: string
+  roles: Role[]
   createdAt?: string
   updatedAt?: string
   status?: UserStatus

src/types/auto-imports.d.ts

@@ -257,7 +257,6 @@ declare global {
   const useStorage: typeof import('@vueuse/core')['useStorage']
   const useStorageAsync: typeof import('@vueuse/core')['useStorageAsync']
   const useStore: typeof import('../stores/urlEncode')['useStore']
-  const useStyleStore: typeof import('../stores/style')['useStyleStore']
   const useStyleTag: typeof import('@vueuse/core')['useStyleTag']
   const useSupported: typeof import('@vueuse/core')['useSupported']
   const useSwipe: typeof import('@vueuse/core')['useSwipe']