æ·feat: commplete init process
This commit is contained in:
engigu
@@ -0,0 +1,121 @@
|
||||
<template>
|
||||
<div class="inex-title-bar" v-if="pageState.isLogin">
|
||||
<el-menu :collapse="isCollapse" breakpoint="768px" mode="horizontal" @select="handleSelect()"
|
||||
:default-active="currActivate()" :ellipsis="false" :menu-width="'auto'">
|
||||
<el-menu-item index="0" :disabled="false">
|
||||
<img style="width: 60px" src="../../../public/titlelogo.svg" alt="Element logo" />
|
||||
</el-menu-item>
|
||||
|
||||
<div class="flex-grow" style="flex-grow: 1" />
|
||||
<div v-for="(item, index) in menuData" :key="index" class="banner-title">
|
||||
<router-link :to="{ path: item.path }">
|
||||
<el-menu-item :index="item.id">{{ item.title }}</el-menu-item>
|
||||
</router-link>
|
||||
</div>
|
||||
<el-button plain class="logout-btn" @click="clickLogout()">登出</el-button>
|
||||
</el-menu>
|
||||
</div>
|
||||
<router-view></router-view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, onMounted, reactive } from 'vue';
|
||||
import { usePageState } from '../../store/page_sate.js';
|
||||
import { CONSTANT } from '../../constant'
|
||||
import { useRouter, useRoute } from 'vue-router';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const pageState = usePageState();
|
||||
const router = useRouter();
|
||||
const isCollapse = ref(false);
|
||||
const menuData = reactive([
|
||||
{
|
||||
id: '1',
|
||||
title: '发信日志',
|
||||
path: '/sendlogs',
|
||||
}, {
|
||||
id: '2',
|
||||
title: '发信任务',
|
||||
path: '/sendtasks',
|
||||
}, {
|
||||
id: '3',
|
||||
title: '发信渠道',
|
||||
path: '/sendways',
|
||||
}, {
|
||||
id: '4',
|
||||
title: '设置',
|
||||
path: '/settings',
|
||||
},
|
||||
]);
|
||||
|
||||
const checkIsLogin = () => {
|
||||
pageState.isLogin = Boolean(localStorage.getItem(CONSTANT.STORE_TOKEN_NAME));
|
||||
};
|
||||
|
||||
const clickLogout = () => {
|
||||
localStorage.removeItem(CONSTANT.STORE_TOKEN_NAME);
|
||||
console.log('clickLogout')
|
||||
router.push('/login', { replace: true }).then(() => { router.go() });
|
||||
};
|
||||
|
||||
const loadLocalToken = () => {
|
||||
pageState.setToken(localStorage.getItem(CONSTANT.STORE_TOKEN_NAME));
|
||||
}
|
||||
|
||||
const currActivate = () => {
|
||||
const cur_path = useRoute().path;
|
||||
let result = '1';
|
||||
menuData.forEach(element => {
|
||||
if (element.path == cur_path) {
|
||||
result = element.id;
|
||||
};
|
||||
});
|
||||
return result;
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
checkIsLogin();
|
||||
loadLocalToken();
|
||||
});
|
||||
|
||||
const handleSelect = () => { };
|
||||
|
||||
return {
|
||||
isCollapse, handleSelect, menuData, pageState, clickLogout, currActivate
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.el-menu-item ul {
|
||||
height: 15vh;
|
||||
}
|
||||
|
||||
.el-menu-item {
|
||||
width: 150px !important;
|
||||
font-size: 15px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
.el-menu-item li {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.logout-btn {
|
||||
margin: auto 40px auto 40px;
|
||||
float: right;
|
||||
/* background-color: #f7efee;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
transition: background-color 0.3s ease; */
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,123 @@
|
||||
<template>
|
||||
<div class="login-center-container" v-if="!pageState.isLogin">
|
||||
|
||||
<div class="main-center-body">
|
||||
<div class="container">
|
||||
<img class="login-logo" src="../../../public/logo.svg" alt="login logo">
|
||||
<p class="desc">A Message Way Hosted Site</p>
|
||||
|
||||
<div class="login-block">
|
||||
<p class="login-text">账号：</p>
|
||||
<el-input style="width: 80%;" v-model="account" placeholder="请输入账号" />
|
||||
</div>
|
||||
|
||||
<div class="login-block">
|
||||
<p class="login-text">密码：</p>
|
||||
<el-input style="width: 80%;" v-model="passwd" type="password" placeholder="请输入密码" show-password />
|
||||
</div>
|
||||
|
||||
<div class="btn-area">
|
||||
<el-button id="custom-h2d-copy-button" type="success" @click="clickLogin()">登录</el-button>
|
||||
<el-button type="primary" @click="clickRegister()">注册</el-button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { toRefs, reactive, onMounted } from 'vue';
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { request } from '../../api/api'
|
||||
import { CONSTANT } from '../../constant'
|
||||
import { usePageState } from '../../store/page_sate';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const router = useRouter();
|
||||
|
||||
|
||||
const pageState = usePageState();
|
||||
const state = reactive({
|
||||
account: 'admin',
|
||||
passwd: '123456',
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
});
|
||||
|
||||
// 登录
|
||||
const clickLogin = async () => {
|
||||
const rspe = await request.post('/auth', { username: state.account, passwd: state.passwd });
|
||||
const rsp = rspe.data;
|
||||
if (rsp.code != 200) {
|
||||
ElMessage({ message: rsp.msg, type: 'error' });
|
||||
} else {
|
||||
pageState.setToken(rsp.data.token);
|
||||
pageState.setIsLogin(true);
|
||||
localStorage.setItem(CONSTANT.STORE_TOKEN_NAME, rsp.data.token);
|
||||
router.push('/sendlogs', { replace: true })
|
||||
}
|
||||
};
|
||||
|
||||
// 注册
|
||||
const clickRegister = () => {
|
||||
ElMessage({ message: `暂未开放注册！`, type: 'error' })
|
||||
|
||||
};
|
||||
|
||||
return { ...toRefs(state), clickLogin, clickRegister, pageState };
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
@import url('../../../src/assets/center_button_textarea.css');
|
||||
|
||||
.login-logo {
|
||||
height: 200px !important;
|
||||
}
|
||||
|
||||
.login-center-container {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.login-center-container img {
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.desc {
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
font-size: 25px;
|
||||
margin-bottom: 80px;
|
||||
/* color: rgb(64, 87, 45); */
|
||||
}
|
||||
|
||||
.login-text {
|
||||
font-size: 13px;
|
||||
/* width: 20px; */
|
||||
width: 20%;
|
||||
display: inline;
|
||||
/* display: flex; */
|
||||
/* justify-content: right; */
|
||||
/* align-items: center; */
|
||||
}
|
||||
|
||||
.login-block {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.btn-area {
|
||||
margin-top: 30px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user