用户：用户登录

src/api/index.ts

@@ -3,6 +3,8 @@
 // API 更新时间：
 // API 唯一标识：
 import * as mainController from './mainController'
+import * as userController from './userController'
 export default {
   mainController,
+  userController,
 }

src/api/typings.d.ts

@@ -1,7 +1,143 @@
 declare namespace API {
+  type DeleteRequest = {
+    id?: number
+  }
+
+  type getUserByIdUsingGETParams = {
+    /** id */
+    id?: number
+  }
+
+  type getUserVoByIdUsingGETParams = {
+    /** id */
+    id?: number
+  }
+
+  type LoginUserVO = {
+    createTime?: string
+    editTime?: string
+    id?: number
+    updateTime?: string
+    userAccount?: string
+    userAvatar?: string
+    userName?: string
+    userProfile?: string
+    userRole?: string
+  }
+
+  type PageUserVO_ = {
+    current?: number
+    pages?: number
+    records?: UserVO[]
+    size?: number
+    total?: number
+  }
+
+  type RBoolean_ = {
+    code?: number
+    data?: boolean
+    msg?: string
+  }
+
+  type RLoginUserVO_ = {
+    code?: number
+    data?: LoginUserVO
+    msg?: string
+  }
+
+  type RLong_ = {
+    code?: number
+    data?: number
+    msg?: string
+  }
+
   type RObject_ = {
     code?: number
     data?: Record<string, any>
     msg?: string
   }
+
+  type RPageUserVO_ = {
+    code?: number
+    data?: PageUserVO_
+    msg?: string
+  }
+
+  type RUser_ = {
+    code?: number
+    data?: User
+    msg?: string
+  }
+
+  type RUserVO_ = {
+    code?: number
+    data?: UserVO
+    msg?: string
+  }
+
+  type User = {
+    createTime?: string
+    editTime?: string
+    id?: number
+    isDelete?: number
+    updateTime?: string
+    userAccount?: string
+    userAvatar?: string
+    userName?: string
+    userPassword?: string
+    userProfile?: string
+    userRole?: string
+  }
+
+  type UserAddRequest = {
+    userAccount?: string
+    userAvatar?: string
+    userName?: string
+    userProfile?: string
+    userRole?: string
+  }
+
+  type UserLoginRequest = {
+    userAccount?: string
+    userPassword?: string
+  }
+
+  type UserQueryRequest = {
+    current?: number
+    id?: number
+    pageSize?: number
+    sortField?: string
+    sortOrder?: string
+    userAccount?: string
+    userName?: string
+    userProfile?: string
+    userRole?: string
+  }
+
+  type UserRegisterRequest = {
+    checkPassword?: string
+    userAccount?: string
+    userPassword?: string
+  }
+
+  type UserUpdateRequest = {
+    id?: number
+    userAvatar?: string
+    userName?: string
+    userProfile?: string
+    userRole?: string
+  }
+
+  type UserVO = {
+    createTime?: string
+    id?: number
+    userAccount?: string
+    userAvatar?: string
+    userName?: string
+    userProfile?: string
+    userRole?: string
+    vipCode?: string
+    vipExpireTime?: string
+    vipNumber?: number
+  }
 }

src/api/userController.ts

@@ -0,0 +1,136 @@
+// @ts-ignore
+/* eslint-disable */
+import request from '@/request'
+
+/** addUser POST /api/user/add */
+export async function addUserUsingPost(body: API.UserAddRequest, options?: { [key: string]: any }) {
+  return request<API.RLong_>('/api/user/add', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    data: body,
+    ...(options || {}),
+  })
+}
+
+/** deleteUser POST /api/user/delete */
+export async function deleteUserUsingPost(
+  body: API.DeleteRequest,
+  options?: { [key: string]: any }
+) {
+  return request<API.RBoolean_>('/api/user/delete', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    data: body,
+    ...(options || {}),
+  })
+}
+
+/** getUserById GET /api/user/get */
+export async function getUserByIdUsingGet(
+  // 叠加生成的Param类型 (非body参数swagger默认没有生成对象)
+  params: API.getUserByIdUsingGETParams,
+  options?: { [key: string]: any }
+) {
+  return request<API.RUser_>('/api/user/get', {
+    method: 'GET',
+    params: {
+      ...params,
+    },
+    ...(options || {}),
+  })
+}
+
+/** getLoginUser GET /api/user/get/login */
+export async function getLoginUserUsingGet(options?: { [key: string]: any }) {
+  return request<API.RLoginUserVO_>('/api/user/get/login', {
+    method: 'GET',
+    ...(options || {}),
+  })
+}
+
+/** getUserVoById GET /api/user/get/vo */
+export async function getUserVoByIdUsingGet(
+  // 叠加生成的Param类型 (非body参数swagger默认没有生成对象)
+  params: API.getUserVoByIdUsingGETParams,
+  options?: { [key: string]: any }
+) {
+  return request<API.RUserVO_>('/api/user/get/vo', {
+    method: 'GET',
+    params: {
+      ...params,
+    },
+    ...(options || {}),
+  })
+}
+
+/** listUserVOByPage POST /api/user/list/page/vo */
+export async function listUserVoByPageUsingPost(
+  body: API.UserQueryRequest,
+  options?: { [key: string]: any }
+) {
+  return request<API.RPageUserVO_>('/api/user/list/page/vo', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    data: body,
+    ...(options || {}),
+  })
+}
+
+/** userLogin POST /api/user/login */
+export async function userLoginUsingPost(
+  body: API.UserLoginRequest,
+  options?: { [key: string]: any }
+) {
+  return request<API.RLoginUserVO_>('/api/user/login', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    data: body,
+    ...(options || {}),
+  })
+}
+
+/** userLogout POST /api/user/logout */
+export async function userLogoutUsingPost(options?: { [key: string]: any }) {
+  return request<API.RBoolean_>('/api/user/logout', {
+    method: 'POST',
+    ...(options || {}),
+  })
+}
+
+/** userRegister POST /api/user/register */
+export async function userRegisterUsingPost(
+  body: API.UserRegisterRequest,
+  options?: { [key: string]: any }
+) {
+  return request<API.RLong_>('/api/user/register', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    data: body,
+    ...(options || {}),
+  })
+}
+
+/** updateUser POST /api/user/update */
+export async function updateUserUsingPost(
+  body: API.UserUpdateRequest,
+  options?: { [key: string]: any }
+) {
+  return request<API.RBoolean_>('/api/user/update', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    data: body,
+    ...(options || {}),
+  })
+}

src/pages/admin/UserManagePage.vue

@@ -0,0 +1,11 @@
+<template>
+
+</template>
+
+<script setup lang="ts" name="">
+
+</script>
+
+<style scoped>
+
+</style>

src/pages/user/UserLoginPage.vue

@@ -0,0 +1,87 @@
+<template>
+  <div id="userLoginPage">
+    <h2 class="title">龙儿的云图库 - 用户登录</h2>
+    <div class="desc">企业级智能协同云图库</div>
+    <a-form :model="formState" name="basic" autocomplete="off" @finish="handleSubmit">
+      <a-form-item name="userAccount" :rules="[{ required: true, message: '请输入账号' }]">
+        <a-input v-model:value="formState.userAccount" placeholder="请输入账号" />
+      </a-form-item>
+      <a-form-item
+        name="userPassword"
+        :rules="[
+          { required: true, message: '请输入密码' },
+          { min: 8, message: '密码不能小于 8 位' },
+        ]"
+      >
+        <a-input-password v-model:value="formState.userPassword" placeholder="请输入密码" />
+      </a-form-item>
+      <div class="tips">
+        没有账号？
+        <RouterLink to="/user/register">去注册</RouterLink>
+      </div>
+      <a-form-item>
+        <a-button type="primary" html-type="submit" style="width: 100%">登录</a-button>
+      </a-form-item>
+    </a-form>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive } from 'vue'
+import { useRouter } from 'vue-router'
+import { useLoginUserStore } from '@/stores/useLoginUserStore.ts'
+import { userLoginUsingPost } from '@/api/userController.ts'
+import { message } from 'ant-design-vue'
+
+const router = useRouter()
+const loginUserStore = useLoginUserStore()
+
+const formState = reactive<API.UserLoginRequest>({
+  userAccount: '',
+  userPassword: '',
+})
+
+/**
+ * 提交表单
+ * @param values
+ */
+const handleSubmit = async (values: any) => {
+  const res = await userLoginUsingPost(values)
+  // 登录成功，把登录态保存到全局状态中
+  if (res.data.code === 0 && res.data.data) {
+    await loginUserStore.fetchLoginUser()
+    message.success('登录成功')
+    await router.push({
+      path: '/',
+      replace: true,
+    })
+  } else {
+    message.error('登录失败，' + res.data.message)
+  }
+}
+</script>
+
+<style scoped>
+#userLoginPage {
+  max-width: 360px;
+  margin: 0 auto;
+}
+
+.title {
+  text-align: center;
+  margin-bottom: 16px;
+}
+
+.desc {
+  text-align: center;
+  color: #bbb;
+  margin-bottom: 16px;
+}
+
+.tips {
+  margin-bottom: 16px;
+  color: #bbb;
+  font-size: 13px;
+  text-align: right;
+}
+</style>

src/pages/user/UserRegisterPage.vue

@@ -0,0 +1,11 @@
+<template>
+
+</template>
+
+<script setup lang="ts" name="">
+
+</script>
+
+<style scoped>
+
+</style>

src/router/index.ts

@@ -1,14 +1,32 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import HomePage from '@/pages/HomePage.vue'
+import UserLoginPage from '@/pages/user/UserLoginPage.vue'
+import UserRegisterPage from '@/pages/user/UserRegisterPage.vue'
+import UserManagePage from '@/pages/admin/UserManagePage.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
     {
       path: '/',
-      name: 'home',
+      name: '主页',
       component: HomePage,
     },
+    {
+      path: '/user/login',
+      name: '用户登录',
+      component: UserLoginPage,
+    },
+    {
+      path: '/user/register',
+      name: '用户注册',
+      component: UserRegisterPage,
+    },
+    {
+      path: '/admin/userManage',
+      name: '用户管理',
+      component: UserManagePage,
+    },
   ],
 })
 

src/stores/useLoginUserStore.ts

@@ -1,21 +1,21 @@
 import { defineStore } from 'pinia'
 import { ref } from 'vue'
+import { getLoginUserUsingGet } from '@/api/userController.ts'
 
 export const useLoginUserStore = defineStore('loginUser', () => {
-  const loginUser = ref<any>({
+  const loginUser = ref<API.LoginUserVO>({
     userName: '未登录',
   })
 
   async function fetchLoginUser() {
-    // todo 由于后端还没提供接口，暂时注释
-    // const res = await getCurrentUser();
-    // if (res.data.code === 0 && res.data.data) {
-    //   loginUser.value = res.data.data;
-    // }
-    // 测试用户登录，3 秒后自动登录
-    setTimeout(() => {
-      loginUser.value = { userName: '测试用户', id: 1 }
-    }, 3000)
+    const res = await getLoginUserUsingGet()
+    if (res.data.code === 0 && res.data.data) {
+      loginUser.value = res.data.data
+    }
+    // // 测试用户登录，3 秒后自动登录
+    // setTimeout(() => {
+    //   loginUser.value = { userName: '测试用户', id: 1 }
+    // }, 3000)
   }
 
   function setLoginUser(newLoginUser: any) {