@@ -2,7 +2,7 @@ | |||
<div class="login-content"> | |||
<a-image width="100vw" height="41vh" | |||
src="https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/V-_oS6r-i7wAAAAAAAAAAAAAFl94AQBr" /> | |||
<div class="login-position content-padding-inline"> | |||
<div v-if="showLoginBox" class="login-position content-padding-inline"> | |||
<a-row type="flex" justify="center"> | |||
<a-col span="18"> | |||
<a-row type="flex" justify="end"> | |||
@@ -21,7 +21,7 @@ | |||
<a-input v-model:value="value" placeholder="验证码" /> | |||
</a-col> | |||
<a-col span="24"> | |||
<a-button type="primary" block>登录/注册</a-button> | |||
<a-button type="primary" block @click="login">登录/注册</a-button> | |||
</a-col> | |||
<a-col span="24"> | |||
忘记密码? | |||
@@ -41,6 +41,27 @@ | |||
<script setup lang="ts"> | |||
import { ref, computed } from 'vue'; | |||
import { store } from '@/store/index'; | |||
const showLoginBox = computed(() => { | |||
return store.state.showLoginBox | |||
}) | |||
const login = () => { | |||
store.commit('setShowLoginBox', { | |||
showLoginBox: false | |||
}) | |||
store.commit('getLogined', { | |||
logined: true | |||
}) | |||
store.commit('getRoleName', { | |||
roleName: 'company' | |||
}) | |||
sessionStorage.setItem('role', 'company') | |||
sessionStorage.setItem('token', 'admin') | |||
} | |||
</script> | |||
<style lang="less" scoped> |
@@ -1,14 +1,80 @@ | |||
<template> | |||
<a-row type="flex" justify="center"> | |||
<a-col span="18"> | |||
<a-row> | |||
<a-col span="4"> | |||
<div class="logo" /> | |||
</a-col> | |||
<a-col span="16" style="color: aliceblue;"> | |||
<a-top-menu></a-top-menu> | |||
</a-col> | |||
<a-col span="4"> | |||
<div class="login-label" @click="toLogin"> | |||
<template v-if="logined"> | |||
<a-dropdown placement="bottomRight"> | |||
<template #overlay> | |||
<a-menu @click="handleMenuClick"> | |||
<a-menu-item key="1"> | |||
<a-space :size="80"> | |||
<div>发布中</div> | |||
<div>0分</div> | |||
</a-space> | |||
</a-menu-item> | |||
<a-menu-item key="2"> | |||
<UserOutlined /> | |||
2nd menu item | |||
</a-menu-item> | |||
<a-menu-item key="3"> | |||
<UserOutlined /> | |||
3rd item | |||
</a-menu-item> | |||
</a-menu> | |||
</template> | |||
<a-space :size="10"> | |||
<div style="color: aliceblue;">admin</div> | |||
<a-avatar style="color: #f56a00; background-color: #fde3cf">U</a-avatar> | |||
</a-space> | |||
</a-dropdown> | |||
</template> | |||
<template v-else> | |||
登录/注册 | |||
</template> | |||
</div> | |||
</a-col> | |||
</a-row> | |||
</a-col> | |||
</a-row> | |||
</template> | |||
<script lang="ts" setup> | |||
import { ref, onMounted, computed } from 'vue'; | |||
import { store } from '@/store'; | |||
import { router } from '@/router'; | |||
import { MenuUnfoldOutlined, MenuFoldOutlined, LogoutOutlined } from '@ant-design/icons-vue'; | |||
import { ref, onMounted, computed, defineProps, defineEmits } from 'vue'; | |||
import ATopMenu from '@/components/layout/menu/aMenu.vue'; | |||
import { store } from '@/store/index'; | |||
const emit = defineEmits(); | |||
const toLogin = () => { | |||
store.commit('setShowLoginBox', { | |||
showLoginBox: true | |||
}) | |||
} | |||
const logined = computed(() => { | |||
return store.state.logined | |||
}) | |||
</script> | |||
<style> | |||
<style lang="less" scoped> | |||
.logo { | |||
float: left; | |||
width: 120px; | |||
height: 31px; | |||
margin: 16px 34px 16px 0; | |||
background: #fff; | |||
} | |||
.login-label { | |||
height: 100%; | |||
display: flex; | |||
align-items: center; | |||
justify-content: flex-end; | |||
color: #fff; | |||
} | |||
</style> |
@@ -1,27 +1,9 @@ | |||
<template> | |||
<div style="min-height: 100vh;"> | |||
<a-layout class="layout" style="width: 100%; display: flex;align-items: center;justify-items: center;"> | |||
<a-layout-header style="position: fixed; z-index: 99;background: #0a130d;width: 100%;"> | |||
<a-row type="flex" justify="center"> | |||
<a-col span="18"> | |||
<a-row> | |||
<a-col span="4"> | |||
<div class="logo" /> | |||
</a-col> | |||
<a-col span="16"> | |||
<a-sider></a-sider> | |||
</a-col> | |||
<a-col span="4"> | |||
<div | |||
style="display: flex;flex-direction: column;align-items: flex-end;justify-content: center;"> | |||
登录/注册</div> | |||
</a-col> | |||
</a-row> | |||
</a-col> | |||
</a-row> | |||
<a-layout-header style="position: fixed;z-index: 99;background: #0a130d;width: 100%;"> | |||
<a-header></a-header> | |||
</a-layout-header> | |||
<!-- <layout-swiper ></layout-swiper> --> | |||
<!-- <layout-tabs></layout-tabs> --> | |||
<a-layout-content> | |||
<router-view></router-view> | |||
</a-layout-content> | |||
@@ -34,16 +16,11 @@ | |||
</template> | |||
<script lang="ts" setup> | |||
import { ref, computed } from 'vue'; | |||
import { router } from '@/router'; | |||
import ASider from './sider/aSider.vue'; | |||
import AFooter from './footer/index.vue'; | |||
import { MenuUnfoldOutlined, MenuFoldOutlined, } from '@ant-design/icons-vue'; | |||
import AHeader from './header/aHeader.vue'; | |||
const toRouter = () => { | |||
router.push('/job') | |||
} | |||
</script> | |||
<style lang="less"> | |||
<style lang="less" scoped> | |||
::-webkit-scrollbar { | |||
/* 设置滚动条宽度 */ | |||
width: 0px; | |||
@@ -54,7 +31,11 @@ | |||
width: 120px; | |||
height: 31px; | |||
margin: 16px 34px 16px 0; | |||
background: #000; | |||
background: #fff; | |||
} | |||
.login-label { | |||
} | |||
.ant-layout-content { | |||
@@ -64,7 +45,7 @@ | |||
background-color: #f0f0f0 !important; | |||
padding-top: 64px; | |||
padding-bottom: 30px; | |||
} | |||
.ant-layout-footer { |
@@ -35,6 +35,7 @@ | |||
let { onMenu, routerCur, routerArrayCur, routerArrayParentChildCur } = useMenu(); | |||
let selectedMenu = computed(() => { | |||
console.log(131,routerCur()) | |||
let newSelectedMenu = [routerCur()]; | |||
return newSelectedMenu; | |||
}) |
@@ -1,3 +1,5 @@ | |||
import { ref , watch } from 'vue'; | |||
import { store } from '@/store/index'; | |||
import type { AppRouteRecordRaw } from '@/router/types'; | |||
import { HomeOutlined } from '@ant-design/icons-vue'; | |||
@@ -17,8 +19,9 @@ import { routesManageModuleList } from '@/router/manageDynamic'; | |||
// } | |||
// } | |||
// layout路由 | |||
export const LayoutRoute: AppRouteRecordRaw = { | |||
export const LayoutRoute : AppRouteRecordRaw = { | |||
path: '', | |||
name: 'layout', | |||
component: Layout, | |||
@@ -29,9 +32,23 @@ export const LayoutRoute: AppRouteRecordRaw = { | |||
// children: [ | |||
// ...routesManageModuleList | |||
// ] | |||
} | |||
let roleName = ref<String>(store.state.roleName) | |||
console.log(roleName) | |||
watch(() => roleName, (newVal) => { | |||
if(roleName == newVal) { | |||
LayoutRoute.children = [...routesModuleList]; | |||
LayoutRoute.redirect = '/job/home'; | |||
} else { | |||
LayoutRoute.children = [...routesManageModuleList] | |||
LayoutRoute.redirect = '/manage/home'; | |||
} | |||
}) | |||
console.log(LayoutRoute) | |||
export const basicRoutes = [ | |||
LayoutRoute | |||
] | |||
] |
@@ -1,13 +1,13 @@ | |||
import { createStore } from 'vuex'; | |||
import { state } from './state'; | |||
import { mutations } from './mutations'; | |||
// import { permissionsModule } from './usePermissionStore'; | |||
import { permissionsModule } from './usePermissionStore'; | |||
export const store = createStore({ | |||
state, | |||
mutations, | |||
// modules: { | |||
// permissions: permissionsModule, | |||
// } | |||
modules: { | |||
permissions: permissionsModule, | |||
} | |||
}) | |||
@@ -2,6 +2,21 @@ const getRouteName = (state, payload) => { | |||
state.routeName = payload.routeName; | |||
} | |||
const setShowLoginBox = (state, payload) => { | |||
state.showLoginBox = payload.showLoginBox; | |||
} | |||
const getLogined = (state, payload) => { | |||
state.logined = payload.logined; | |||
} | |||
const getRoleName = (state, payload) => { | |||
state.roleName = payload.roleName; | |||
} | |||
export const mutations = { | |||
getRouteName | |||
getRouteName, | |||
setShowLoginBox, | |||
getLogined, | |||
getRoleName | |||
} |
@@ -1,5 +1,8 @@ | |||
import { StateType } from './types' | |||
export const state = <StateType>{ | |||
routeName: '' | |||
routeName: '', | |||
showLoginBox: false, | |||
logined: false, | |||
roleName: '' | |||
} |
@@ -1,3 +1,6 @@ | |||
export interface StateType { | |||
routeName ?: String | |||
routeName ?: String, | |||
showLoginBox ?: Boolean, | |||
logined ?: Boolean, | |||
roleName ?: String, | |||
} |
@@ -1,55 +1,56 @@ | |||
// import { Module } from 'vuex'; | |||
// import { useAsRouter } from '@/hooks/useAsRouter'; | |||
// import { routesModuleList } from '@/router/dynamic'; | |||
// import { LayoutRoute } from '@/router/routes'; | |||
// const { routerDynamic, routerAdd, routerInit } = useAsRouter(); | |||
// export interface PermissionState { | |||
// menuList : string[]; | |||
// permissionList : string[] | null; | |||
// breadcrumbList : string[]; | |||
// } | |||
// const state : PermissionState = { | |||
// menuList: [], | |||
// permissionList: null, | |||
// breadcrumbList: [] | |||
// }; | |||
// const mutations = { | |||
// SET_PERMISSION(state, routes) { | |||
// state.permissionList = routes | |||
// }, | |||
// SET_MENU(state, menu) { | |||
// state.menuList = menu | |||
// } | |||
// }; | |||
// const actions = { | |||
// async FETCH_PERMISSION({ | |||
// commit | |||
// }) { | |||
// try { | |||
// // let res = await LOGIN.permissions(); | |||
// // let arr = res.data.data; | |||
// let arr = ['permission','role', 'account', 'company', 'vip', 'member', 'job', 'department', 'jobSeeker', 'jobResume', 'jobFair','jobFairList', 'information' ,'section','article', 'list']; | |||
// let routes = routerDynamic(arr, routesModuleList); | |||
// LayoutRoute.children.push(...routes); | |||
// commit('SET_MENU', LayoutRoute.children); | |||
// routerAdd(LayoutRoute); | |||
// let initialRoutes = routerInit(); | |||
// commit('SET_PERMISSION', [...initialRoutes]); | |||
// } catch { | |||
// } | |||
// } | |||
// }; | |||
// export const permissionsModule : Module<PermissionState> = { | |||
// namespaced: true, | |||
// state, | |||
// mutations, | |||
// actions | |||
// }; | |||
import { Module } from 'vuex'; | |||
import { useAsRouter } from '@/hooks/useAsRouter'; | |||
import { routesModuleList } from '@/router/dynamic'; | |||
import { routesManageModuleList } from '@/router/manageDynamic'; // 企业管理 | |||
import { LayoutRoute } from '@/router/routes'; | |||
const { routerDynamic, routerAdd, routerInit } = useAsRouter(); | |||
export interface PermissionState { | |||
menuList : string[]; | |||
permissionList : string[] | null; | |||
breadcrumbList : string[]; | |||
} | |||
const state : PermissionState = { | |||
menuList: [], | |||
permissionList: null, | |||
breadcrumbList: [] | |||
}; | |||
const mutations = { | |||
SET_PERMISSION(state, routes) { | |||
state.permissionList = routes | |||
}, | |||
SET_MENU(state, menu) { | |||
state.menuList = menu | |||
} | |||
}; | |||
const actions = { | |||
async FETCH_PERMISSION({ | |||
commit | |||
}) { | |||
try { | |||
if(sessionStorage.getItem('role') == "company") { | |||
LayoutRoute.redirect = '/manage/home' | |||
LayoutRoute.children = routesManageModuleList | |||
routerAdd(LayoutRoute); | |||
} else { | |||
LayoutRoute.children = routesModuleList | |||
routerAdd(LayoutRoute); | |||
} | |||
} catch { | |||
} | |||
} | |||
}; | |||
export const permissionsModule : Module<PermissionState> = { | |||
namespaced: true, | |||
state, | |||
mutations, | |||
actions | |||
}; |
@@ -5,7 +5,7 @@ import path from 'path' | |||
// https://vitejs.dev/config/ | |||
export default defineConfig({ | |||
plugins: [vue()], | |||
base: '/web/', | |||
// base: '/web/', | |||
build: { | |||
outDir: 'dist' | |||
}, |