Mr.April
d84d972e73
主要变更： 1. 重构API目录结构，采用模块化设计，适配5.x后端接口规范 2. 优化布局组件，提升用户界面体验 3. 增强国际化支持，完善多语言配置 4. 新增权限控制功能，支持前端路由权限管理 5. 优化认证流程，支持JWT认证机制 6. 新增中间件和插件，提升系统扩展性 7. 优化状态管理，采用更清晰的模块化设计 8. 新增搜索框、广告等组件，丰富页面功能 9. 更改包管理工具从npm到pnpm，提升依赖管理效率 10. 完善配置系统，支持多环境配置 适配5.x后端特性： - 采用新的API接口规范 - 支持JWT认证机制 - 适配后端权限控制体系 - 支持后端国际化接口 - 优化数据交互方式
84 lines
1.8 KiB
Vue
84 lines
1.8 KiB
Vue
<template>
|
|
<div class="loginPopup">
|
|
<el-dialog
|
|
v-model="dialogVisible"
|
|
align-center
|
|
width="450"
|
|
:before-close="beforeClose"
|
|
custom-class="login !rounded-[var(--rounded-big)]"
|
|
:show-close="false"
|
|
append-to-body
|
|
>
|
|
<login v-if="type === 'login' && dialogVisible" @typeChange="typeChange" />
|
|
<register v-if="type === 'register' && dialogVisible" @typeChange="typeChange" />
|
|
<forget-password v-if="type === 'forget-password' && dialogVisible" @typeChange="typeChange" />
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { ref, computed, watch } from "vue";
|
|
import login from "./login.vue";
|
|
import register from "./register.vue";
|
|
import forgetPassword from "./forget-password.vue";
|
|
import { useMemberStore } from '~/stores/member';
|
|
|
|
const type = ref("login");
|
|
|
|
const memberStore = useMemberStore();
|
|
//弹框状态
|
|
const dialogVisible = computed(() => {
|
|
return memberStore.loginPopup;
|
|
});
|
|
//弹框关闭
|
|
const beforeClose = (next: any) => {
|
|
memberStore.logClose();
|
|
type.value = "login";
|
|
next();
|
|
};
|
|
const handleClose = () => {
|
|
memberStore.logClose();
|
|
type.value = "login";
|
|
};
|
|
//判断当前是登录还是注册
|
|
const typeChange = (val: any) => {
|
|
type.value = val;
|
|
};
|
|
</script>
|
|
<style>
|
|
.login .el-dialog__header {
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.login .el-dialog__body {
|
|
padding: 0 !important;
|
|
}
|
|
.login .el-dialog__headerbtn {
|
|
z-index: 99;
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
:deep(.el-form-item) {
|
|
.el-input__wrapper {
|
|
box-shadow: unset !important;
|
|
border-radius: 0;
|
|
&.is-focus {
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
&.is-error {
|
|
.el-input__wrapper {
|
|
border: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
:deep(.el-form-item__error) {
|
|
padding-top: 5px;
|
|
}
|
|
|
|
.text-color {
|
|
color: var(--el-color-primary);
|
|
}
|
|
</style>
|