<div class="login-content"> | <div class="login-content"> | ||||
<a-image width="100vw" height="41vh" | <a-image width="100vw" height="41vh" | ||||
src="https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/V-_oS6r-i7wAAAAAAAAAAAAAFl94AQBr" /> | 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-row type="flex" justify="center"> | ||||
<a-col span="18"> | <a-col span="18"> | ||||
<a-row type="flex" justify="end"> | <a-row type="flex" justify="end"> | ||||
<a-input v-model:value="value" placeholder="验证码" /> | <a-input v-model:value="value" placeholder="验证码" /> | ||||
</a-col> | </a-col> | ||||
<a-col span="24"> | <a-col span="24"> | ||||
<a-button type="primary" block>登录/注册</a-button> | |||||
<a-button type="primary" block @click="login">登录/注册</a-button> | |||||
</a-col> | </a-col> | ||||
<a-col span="24"> | <a-col span="24"> | ||||
忘记密码? | 忘记密码? | ||||
<script setup lang="ts"> | <script setup lang="ts"> | ||||
import { ref, computed } from 'vue'; | 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> | </script> | ||||
<style lang="less" scoped> | <style lang="less" scoped> |
<template> | <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> | </template> | ||||
<script lang="ts" setup> | <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> | </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> | </style> |
<template> | <template> | ||||
<div style="min-height: 100vh;"> | <div style="min-height: 100vh;"> | ||||
<a-layout class="layout" style="width: 100%; display: flex;align-items: center;justify-items: center;"> | <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> | </a-layout-header> | ||||
<!-- <layout-swiper ></layout-swiper> --> | |||||
<!-- <layout-tabs></layout-tabs> --> | |||||
<a-layout-content> | <a-layout-content> | ||||
<router-view></router-view> | <router-view></router-view> | ||||
</a-layout-content> | </a-layout-content> | ||||
</template> | </template> | ||||
<script lang="ts" setup> | <script lang="ts" setup> | ||||
import { ref, computed } from 'vue'; | import { ref, computed } from 'vue'; | ||||
import { router } from '@/router'; | |||||
import ASider from './sider/aSider.vue'; | |||||
import AFooter from './footer/index.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> | </script> | ||||
<style lang="less"> | |||||
<style lang="less" scoped> | |||||
::-webkit-scrollbar { | ::-webkit-scrollbar { | ||||
/* 设置滚动条宽度 */ | /* 设置滚动条宽度 */ | ||||
width: 0px; | width: 0px; | ||||
width: 120px; | width: 120px; | ||||
height: 31px; | height: 31px; | ||||
margin: 16px 34px 16px 0; | margin: 16px 34px 16px 0; | ||||
background: #000; | |||||
background: #fff; | |||||
} | |||||
.login-label { | |||||
} | } | ||||
.ant-layout-content { | .ant-layout-content { | ||||
background-color: #f0f0f0 !important; | background-color: #f0f0f0 !important; | ||||
padding-top: 64px; | padding-top: 64px; | ||||
padding-bottom: 30px; | padding-bottom: 30px; | ||||
} | } | ||||
.ant-layout-footer { | .ant-layout-footer { |
let { onMenu, routerCur, routerArrayCur, routerArrayParentChildCur } = useMenu(); | let { onMenu, routerCur, routerArrayCur, routerArrayParentChildCur } = useMenu(); | ||||
let selectedMenu = computed(() => { | let selectedMenu = computed(() => { | ||||
console.log(131,routerCur()) | |||||
let newSelectedMenu = [routerCur()]; | let newSelectedMenu = [routerCur()]; | ||||
return newSelectedMenu; | return newSelectedMenu; | ||||
}) | }) |
import { ref , watch } from 'vue'; | |||||
import { store } from '@/store/index'; | |||||
import type { AppRouteRecordRaw } from '@/router/types'; | import type { AppRouteRecordRaw } from '@/router/types'; | ||||
import { HomeOutlined } from '@ant-design/icons-vue'; | import { HomeOutlined } from '@ant-design/icons-vue'; | ||||
// } | // } | ||||
// } | // } | ||||
// layout路由 | // layout路由 | ||||
export const LayoutRoute: AppRouteRecordRaw = { | |||||
export const LayoutRoute : AppRouteRecordRaw = { | |||||
path: '', | path: '', | ||||
name: 'layout', | name: 'layout', | ||||
component: Layout, | component: Layout, | ||||
// children: [ | // children: [ | ||||
// ...routesManageModuleList | // ...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 = [ | export const basicRoutes = [ | ||||
LayoutRoute | LayoutRoute | ||||
] | |||||
] |
import { createStore } from 'vuex'; | import { createStore } from 'vuex'; | ||||
import { state } from './state'; | import { state } from './state'; | ||||
import { mutations } from './mutations'; | import { mutations } from './mutations'; | ||||
// import { permissionsModule } from './usePermissionStore'; | |||||
import { permissionsModule } from './usePermissionStore'; | |||||
export const store = createStore({ | export const store = createStore({ | ||||
state, | state, | ||||
mutations, | mutations, | ||||
// modules: { | |||||
// permissions: permissionsModule, | |||||
// } | |||||
modules: { | |||||
permissions: permissionsModule, | |||||
} | |||||
}) | }) | ||||
state.routeName = payload.routeName; | 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 = { | export const mutations = { | ||||
getRouteName | |||||
getRouteName, | |||||
setShowLoginBox, | |||||
getLogined, | |||||
getRoleName | |||||
} | } |
import { StateType } from './types' | import { StateType } from './types' | ||||
export const state = <StateType>{ | export const state = <StateType>{ | ||||
routeName: '' | |||||
routeName: '', | |||||
showLoginBox: false, | |||||
logined: false, | |||||
roleName: '' | |||||
} | } |
export interface StateType { | export interface StateType { | ||||
routeName ?: String | |||||
routeName ?: String, | |||||
showLoginBox ?: Boolean, | |||||
logined ?: Boolean, | |||||
roleName ?: String, | |||||
} | } |
// 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 | |||||
}; |
// https://vitejs.dev/config/ | // https://vitejs.dev/config/ | ||||
export default defineConfig({ | export default defineConfig({ | ||||
plugins: [vue()], | plugins: [vue()], | ||||
base: '/web/', | |||||
// base: '/web/', | |||||
build: { | build: { | ||||
outDir: 'dist' | outDir: 'dist' | ||||
}, | }, |