feat(views): 添加无权限视图和用户登录视图
添加NoAuthView.vue显示无权限提示页面 添加UserLoginView.vue实现用户登录表单功能
This commit is contained in:
@@ -2,6 +2,7 @@ import type { RouteRecordRaw } from "vue-router";
|
||||
import HomeView from "../views/HomeView.vue";
|
||||
import AboutView from "../views/AboutView.vue";
|
||||
import ACCESS_ENUM from "../access/accessEnum";
|
||||
import UserLoginView from "../views/user/UserLoginView.vue";
|
||||
/**
|
||||
* 路由配置
|
||||
*/
|
||||
@@ -18,4 +19,10 @@ export const routes: Array<RouteRecordRaw> = [
|
||||
component: AboutView,
|
||||
meta: { hideInMenu: false, access: ACCESS_ENUM.NOT_LOGIN },
|
||||
},
|
||||
{
|
||||
path: "/user/login",
|
||||
name: "UserLoginView",
|
||||
component: UserLoginView,
|
||||
meta: { hideInMenu: false, access: ACCESS_ENUM.NOT_LOGIN },
|
||||
},
|
||||
];
|
||||
|
||||
13
src/views/NoAuthView.vue
Normal file
13
src/views/NoAuthView.vue
Normal file
@@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<div class="home">你没权限</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts"></script>
|
||||
<style lang="scss" scoped>
|
||||
.home {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
41
src/views/user/UserLoginView.vue
Normal file
41
src/views/user/UserLoginView.vue
Normal file
@@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<div id="userLoginView">
|
||||
<h2 style="margin-bottom: 16px">用户登录</h2>
|
||||
<a-form
|
||||
style="max-width: 480px; margin: 0 auto"
|
||||
label-align="left"
|
||||
auto-label-width
|
||||
:model="form"
|
||||
@submit="handleSubmit"
|
||||
>
|
||||
<a-form-item field="userAccount" label="账号">
|
||||
<a-input v-model="form.userAccount" placeholder="请输入账号" />
|
||||
</a-form-item>
|
||||
<a-form-item field="userPassword" tooltip="密码不少于 8 位" label="密码">
|
||||
<a-input-password
|
||||
v-model="form.userPassword"
|
||||
placeholder="请输入密码"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-button type="primary" html-type="submit" style="width: 120px">
|
||||
登录
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive } from "vue";
|
||||
|
||||
const form = reactive({
|
||||
userAccount: "",
|
||||
userPassword: "",
|
||||
});
|
||||
|
||||
const handleSubmit = async () => {
|
||||
console.log(form);
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
Reference in New Issue
Block a user