lizhong
/
ReptileFront
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

login

Browse Source
main
lizhong 2 years ago
parent d1d9098a64
commit 1cf23f7f32
7 changed files with 159 additions and 74 deletions
Show Stats Download Patch File Download Diff File

4
app.vue
Unescape View File

@ -1,12 +1,12 @@
<template>
<div>
<el-scrollbar>
<el-config-provider>
<NuxtLayout :name="layout">
<NuxtPage></NuxtPage>
</NuxtLayout>
</el-config-provider>
<!-- AppConf-->
</div>
</el-scrollbar>
</template>
<script setup lang="ts">
// import TabLayout from "~/layouts/TabLayout.vue";

2
assets/style/public.scss
Unescape View File

@ -1,6 +1,6 @@
#__nuxt {
width: 100%;
height: 100%;
height: 100vh;
min-width: 1800px;
margin: 0 auto;
max-width: 1940px;

109
components/Header/Index.vue
Unescape View File

@ -14,42 +14,75 @@
</el-menu-item>
</el-menu>
<div v-if="!token" @click="setLoginVisible(true)">登录</div>
<el-dropdown v-else trigger="click">
<span class="el-dropdown-link">
登录
<div class="login-action-wrap">
<div class="login-btn cursor-pointer" v-if="!token" @click="setLoginVisible(true)">登录</div>
<el-dropdown popper-class="login-popper" @command="handleCommand" v-else trigger="click">
<div class="el-dropdown-link text-xl" style="line-height: 100px;">
{{ userInfo.mobile }}
<el-icon class="el-icon--right"><ElIconCaretBottom/></el-icon>
</span>
</div>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>OCR识别</el-dropdown-item>
<el-dropdown-item>优化翻译</el-dropdown-item>
<el-dropdown-item>翻译文本</el-dropdown-item>
<el-dropdown-item>翻译文件</el-dropdown-item>
<el-dropdown-item>推出登录</el-dropdown-item>
<el-dropdown-item command="0">OCR识别</el-dropdown-item>
<el-dropdown-item command="1">优化翻译</el-dropdown-item>
<el-dropdown-item command="2">翻译文本</el-dropdown-item>
<el-dropdown-item command="3">翻译文件</el-dropdown-item>
<el-dropdown-item command="4">退出登录</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</el-header>
</template>
<script setup>
<script setup lang="ts">
const {prefixCls} = useDesign('header-wrap')
const route = useRoute()
const router = useRouter();
const routes = ref(router.getRoutes().filter(it => !it.meta.hidden));
//@ts-ignore
routes.value.sort((a, b) => a.meta.order - b.meta.order);
const activeRoute = ref(route.path)
const store = useAppStore()
const { setLoginVisible } = useUserInfo()
const token = computed(()=> useUserInfo().$state.token);
const {setLoginVisible, setInfo, setToken} = useUserInfo()
const token = computed(() => useUserInfo().$state.token);
const userInfo = ref()
function handleCommand(command:string) {
if (command === '4') {
ElMessageBox.confirm(
'确定要退出登录吗？',
'提示',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}
)
.then(() => {
setInfo({})
setToken('')
ElNotification.success('已退出登录')
})
.catch(() => {
ElMessage({
type: 'info',
message: '已取消退出登录',
})
})
}
}
onMounted(()=>{
console.log('token>>>>>', token)
watchEffect(()=>{
console.log('useUserInfo().$state.info>>>>>>> header', useUserInfo().$state.info)
userInfo.value = useUserInfo().$state.info;
})
function handleChange(val) {
function handleChange(val: any) {
activeRoute.value = val.path;
if (val.meta.hasOwnProperty('headerHost') && val.meta.headerHost) {
store.setMenuTheme('dark')
@ -136,4 +169,48 @@ $prefix-cls: '#{$name-prefix}-header-wrap';
//height: 100px;
}
.login-btn {
line-height: 100px;
font-size: 20px;
font-weight: 400;
//@apply ;
}
.login-action-wrap {
padding-right: 30px;
}
.is-host {
* {
color: $white;
}
}
</style>
<style lang="scss">
.login-popper {
.el-dropdown-menu {
@apply shadow-2xl;
padding: 0 0;
}
.el-dropdown-menu__item {
width: 176px;
padding: 20px 0;
text-align: center;
line-height: 1;
//border-bottom: 1px solid #eee;
@apply text-base block relative;
&:after{
content: '';
position: absolute;
height: 1px;
background-color: #eee;
left: 12px;
right: 12px;
bottom: 0;
}
&:last-of-type:after {
height: 0;
}
}
}
</style>

75
components/Login/Index.vue
Unescape View File

@ -4,9 +4,15 @@
v-model="loginVisible"
footer=""
header=""
:closable="false"
:show-close="false"
@close="onClose"
>
<template #header>
<h2 class="mb-3 text-2xl font-bold text-center xl:text-3xl enter-x xl:text-left">
欢迎来到
<p>{{ title }}</p>
</h2>
</template>
<el-form
class="p-4 enter-x"
:model="formData"
@ -56,7 +62,7 @@ import { computed, reactive, ref, unref } from 'vue';
import {FormInstance} from "element-plus";
const userStore = useUserInfo();
const title = computed(()=> import.meta.env.VITE_GLOB_APP_TITLE)
const formRules = ref({
})
@ -65,9 +71,9 @@ const formRef = ref<FormInstance>();
const loading = ref(false);
const formData = reactive({
account: 'vben',
account: 'test',
password: '123456',
captcha: '123456',
// captcha: '123456',
});
const prefixCls = useDesign('login');
@ -77,13 +83,19 @@ async function handleLogin(formEl: FormInstance | undefined) {
await formEl.validate(async (vail: boolean) => {
if (vail) {
loading.value = true;
try {
const userInfo = await userStore.login({
...formData
});
if (userInfo) {
userStore.setLoginVisible(false);
ElMessage.success('登录成功');
ElNotification.success('登录成功')
}
} catch (e) {
loading.value = false;
} finally {
loading.value = false;
}
}else {
loading.value = false;
}
@ -101,16 +113,13 @@ const onClose = () => {
</script>
<style lang="less">
.mai-login-modal {
//$elPrefix: 'el-dialog';
.el-dialog {
width: 1105px !important;
max-width: 1105px !important;
min-width: 1105px !important;
.ant-modal-content {
padding: 0 105px;
border-radius: 16px;
box-sizing: border-box;
border-radius: 10px;
&__header {
h2 {
font-size: 48px;
line-height: 67px;
@ -124,47 +133,43 @@ const onClose = () => {
margin-top: 12px;
}
}
}
&__body {
padding: 0 105px;
border-radius: 16px;
box-sizing: border-box;
.ant-input {
.el-input__wrapper {
height: 117px;
font-size: 32px;
border-radius: 8px;
padding: 0 60px;
}
.ant-input-suffix {
height: 100%;
.anticon {
font-size: 32px;
margin: 0 20px;
.el-input-group--append {
height: 117px;
.el-input__wrapper {
border-radius: 8px 0 0 8px;
}
.el-input-group__append {
padding: 1px;
box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color)) inset;
}
background-color: unset;
img {
width: 100%;
height: 100%;
}
}
.ant-input-password {
border-radius: 8px;
}
.ant-input-affix-wrapper {
display: flex;
align-items: center;
height: 119px;
padding: 0;
border-radius: 8px;
overflow: hidden;
}
.ant-btn {
.el-button {
font-size: 28px;
height: 106px;
margin-bottom: 107px;
background-color: #14417a;
border-radius: 8px;
@apply w-full;
}
}
}

14
composables/useUserInfo.ts
Unescape View File

@ -24,12 +24,18 @@ const useUserInfo = defineStore('user', {
this.loginVisible = val;
},
async login(data: any){
async login(data: any, redirect?: string){
const { commonApi } = useApi()
const res = await commonApi.login(data);
// if (res.data)
console.log('login>>>>', res)
// this.setInfo(res.data)
// this.setToken(res.data.token)
// this.setLoginVisible(false)
this.token = res.data.userinfo.token;
this.loginVisible = false
this.info = res.data.userinfo
if(redirect) {
useRouter().push(redirect)
}
return res;
}

4
utils/http.ts
Unescape View File

@ -36,8 +36,12 @@ function transform(error: any) {
const fetch = $fetch.create({
async onRequest({options}){
options.baseURL = '/api';
const token = useUserInfo().$state.token;
console.log('options>>>', options)
options.headers = new Headers(options.headers);
if (token) {
options.headers.set('X-Access-Token', token)
}
},
// 响应拦截
onResponse(ctx) {

7
utils/index.ts
Unescape View File

@ -7,13 +7,6 @@ import { cloneDeep } from 'lodash-es';
export const noop = () => {};
/**
* @description: Set ui mount node
*/
export function getPopupContainer(node?: HTMLElement): HTMLElement {
return (node?.parentNode as HTMLElement) ?? document.body;
}
/**
* Add the object as a parameter to the URL
* @param baseUrl url

Write Preview
Loading…
Cancel
Save