feat(views): 添加无权限视图和用户登录视图

添加NoAuthView.vue显示无权限提示页面
添加UserLoginView.vue实现用户登录表单功能
This commit is contained in:
2025-11-15 23:32:02 +08:00
parent 55a048725b
commit a13dae85b3
3 changed files with 61 additions and 0 deletions

View File

@@ -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
View 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>

View 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>