xjs
4 years ago
parent
472af60970
commit
05cd60971c
@ -1,107 +1,128 @@
|
|||||||
<template>
|
<template>
|
||||||
<div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}">
|
<div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}">
|
||||||
<div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
|
<div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
|
||||||
<sidebar class="sidebar-container"/>
|
<sidebar class="sidebar-container"/>
|
||||||
<div :class="{hasTagsView:needTagsView}" class="main-container">
|
<div :class="{hasTagsView:needTagsView}" class="main-container">
|
||||||
<div :class="{'fixed-header':fixedHeader}">
|
<div :class="{'fixed-header':fixedHeader}">
|
||||||
<navbar />
|
<navbar/>
|
||||||
<tags-view v-if="needTagsView" />
|
<tags-view v-if="needTagsView"/>
|
||||||
</div>
|
</div>
|
||||||
<app-main />
|
<app-main/>
|
||||||
<right-panel>
|
<right-panel>
|
||||||
<settings />
|
<settings/>
|
||||||
</right-panel>
|
</right-panel>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import RightPanel from '@/components/RightPanel'
|
import RightPanel from '@/components/RightPanel'
|
||||||
import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
|
import {AppMain, Navbar, Settings, Sidebar, TagsView} from './components'
|
||||||
import ResizeMixin from './mixin/ResizeHandler'
|
import ResizeMixin from './mixin/ResizeHandler'
|
||||||
import { mapState } from 'vuex'
|
import {mapState} from 'vuex'
|
||||||
import variables from '@/assets/styles/variables.scss'
|
import variables from '@/assets/styles/variables.scss'
|
||||||
|
|
||||||
export default {
|
import SocketService from "@/utils/socket-server";
|
||||||
name: 'Layout',
|
|
||||||
components: {
|
export default {
|
||||||
AppMain,
|
name: 'Layout',
|
||||||
Navbar,
|
components: {
|
||||||
RightPanel,
|
AppMain,
|
||||||
Settings,
|
Navbar,
|
||||||
Sidebar,
|
RightPanel,
|
||||||
TagsView
|
Settings,
|
||||||
},
|
Sidebar,
|
||||||
mixins: [ResizeMixin],
|
TagsView
|
||||||
computed: {
|
},
|
||||||
...mapState({
|
mixins: [ResizeMixin],
|
||||||
theme: state => state.settings.theme,
|
computed: {
|
||||||
sideTheme: state => state.settings.sideTheme,
|
...mapState({
|
||||||
sidebar: state => state.app.sidebar,
|
theme: state => state.settings.theme,
|
||||||
device: state => state.app.device,
|
sideTheme: state => state.settings.sideTheme,
|
||||||
needTagsView: state => state.settings.tagsView,
|
sidebar: state => state.app.sidebar,
|
||||||
fixedHeader: state => state.settings.fixedHeader
|
device: state => state.app.device,
|
||||||
}),
|
needTagsView: state => state.settings.tagsView,
|
||||||
classObj() {
|
fixedHeader: state => state.settings.fixedHeader
|
||||||
return {
|
}),
|
||||||
hideSidebar: !this.sidebar.opened,
|
classObj() {
|
||||||
openSidebar: this.sidebar.opened,
|
return {
|
||||||
withoutAnimation: this.sidebar.withoutAnimation,
|
hideSidebar: !this.sidebar.opened,
|
||||||
mobile: this.device === 'mobile'
|
openSidebar: this.sidebar.opened,
|
||||||
}
|
withoutAnimation: this.sidebar.withoutAnimation,
|
||||||
},
|
mobile: this.device === 'mobile'
|
||||||
variables() {
|
}
|
||||||
return variables;
|
},
|
||||||
}
|
variables() {
|
||||||
},
|
return variables;
|
||||||
methods: {
|
}
|
||||||
handleClickOutside() {
|
},
|
||||||
this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
|
created() {
|
||||||
}
|
this.connectWebsocket();
|
||||||
}
|
},
|
||||||
}
|
|
||||||
</script>
|
methods: {
|
||||||
|
//连接websocket
|
||||||
<style lang="scss" scoped>
|
connectWebsocket() {
|
||||||
@import "~@/assets/styles/mixin.scss";
|
if (!this.$socket) {
|
||||||
@import "~@/assets/styles/variables.scss";
|
SocketService.Instance.connect();
|
||||||
|
this.$store.dispatch("app/set$Socket", SocketService.Instance);
|
||||||
.app-wrapper {
|
}
|
||||||
@include clearfix;
|
},
|
||||||
position: relative;
|
|
||||||
height: 100%;
|
handleClickOutside() {
|
||||||
width: 100%;
|
this.$store.dispatch('app/closeSideBar', {withoutAnimation: false})
|
||||||
|
}
|
||||||
&.mobile.openSidebar {
|
},
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
beforeDestroy() {
|
||||||
}
|
if (this.$socket) {
|
||||||
}
|
this.$socket.closeWebsocket();
|
||||||
|
this.$store.dispatch("app/set$Socket", null);
|
||||||
.drawer-bg {
|
}
|
||||||
background: #000;
|
},
|
||||||
opacity: 0.3;
|
}
|
||||||
width: 100%;
|
</script>
|
||||||
top: 0;
|
|
||||||
height: 100%;
|
<style lang="scss" scoped>
|
||||||
position: absolute;
|
@import "~@/assets/styles/mixin.scss";
|
||||||
z-index: 999;
|
@import "~@/assets/styles/variables.scss";
|
||||||
}
|
|
||||||
|
.app-wrapper {
|
||||||
.fixed-header {
|
@include clearfix;
|
||||||
position: fixed;
|
position: relative;
|
||||||
top: 0;
|
height: 100%;
|
||||||
right: 0;
|
width: 100%;
|
||||||
z-index: 9;
|
|
||||||
width: calc(100% - #{$base-sidebar-width});
|
&.mobile.openSidebar {
|
||||||
transition: width 0.28s;
|
position: fixed;
|
||||||
}
|
top: 0;
|
||||||
|
}
|
||||||
.hideSidebar .fixed-header {
|
}
|
||||||
width: calc(100% - 54px);
|
|
||||||
}
|
.drawer-bg {
|
||||||
|
background: #000;
|
||||||
.mobile .fixed-header {
|
opacity: 0.3;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
top: 0;
|
||||||
</style>
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fixed-header {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 9;
|
||||||
|
width: calc(100% - #{$base-sidebar-width});
|
||||||
|
transition: width 0.28s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hideSidebar .fixed-header {
|
||||||
|
width: calc(100% - 54px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile .fixed-header {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@ -1,18 +1,19 @@
|
|||||||
const getters = {
|
const getters = {
|
||||||
sidebar: state => state.app.sidebar,
|
sidebar: state => state.app.sidebar,
|
||||||
size: state => state.app.size,
|
size: state => state.app.size,
|
||||||
device: state => state.app.device,
|
device: state => state.app.device,
|
||||||
visitedViews: state => state.tagsView.visitedViews,
|
visitedViews: state => state.tagsView.visitedViews,
|
||||||
cachedViews: state => state.tagsView.cachedViews,
|
cachedViews: state => state.tagsView.cachedViews,
|
||||||
token: state => state.user.token,
|
token: state => state.user.token,
|
||||||
avatar: state => state.user.avatar,
|
avatar: state => state.user.avatar,
|
||||||
name: state => state.user.name,
|
name: state => state.user.name,
|
||||||
introduction: state => state.user.introduction,
|
introduction: state => state.user.introduction,
|
||||||
roles: state => state.user.roles,
|
roles: state => state.user.roles,
|
||||||
permissions: state => state.user.permissions,
|
permissions: state => state.user.permissions,
|
||||||
permission_routes: state => state.permission.routes,
|
permission_routes: state => state.permission.routes,
|
||||||
topbarRouters:state => state.permission.topbarRouters,
|
topbarRouters:state => state.permission.topbarRouters,
|
||||||
defaultRoutes:state => state.permission.defaultRoutes,
|
defaultRoutes:state => state.permission.defaultRoutes,
|
||||||
sidebarRouters:state => state.permission.sidebarRouters,
|
sidebarRouters:state => state.permission.sidebarRouters,
|
||||||
}
|
$socket: state => state.app.$socket,
|
||||||
export default getters
|
}
|
||||||
|
export default getters
|
||||||
|
|||||||
@ -1,56 +1,64 @@
|
|||||||
import Cookies from 'js-cookie'
|
import Cookies from 'js-cookie'
|
||||||
|
|
||||||
const state = {
|
const state = {
|
||||||
sidebar: {
|
sidebar: {
|
||||||
opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true,
|
opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true,
|
||||||
withoutAnimation: false
|
withoutAnimation: false
|
||||||
},
|
},
|
||||||
device: 'desktop',
|
device: 'desktop',
|
||||||
size: Cookies.get('size') || 'medium'
|
size: Cookies.get('size') || 'medium',
|
||||||
}
|
// websocket实例
|
||||||
|
$socket: null
|
||||||
const mutations = {
|
}
|
||||||
TOGGLE_SIDEBAR: state => {
|
|
||||||
state.sidebar.opened = !state.sidebar.opened
|
const mutations = {
|
||||||
state.sidebar.withoutAnimation = false
|
TOGGLE_SIDEBAR: state => {
|
||||||
if (state.sidebar.opened) {
|
state.sidebar.opened = !state.sidebar.opened
|
||||||
Cookies.set('sidebarStatus', 1)
|
state.sidebar.withoutAnimation = false
|
||||||
} else {
|
if (state.sidebar.opened) {
|
||||||
Cookies.set('sidebarStatus', 0)
|
Cookies.set('sidebarStatus', 1)
|
||||||
}
|
} else {
|
||||||
},
|
Cookies.set('sidebarStatus', 0)
|
||||||
CLOSE_SIDEBAR: (state, withoutAnimation) => {
|
}
|
||||||
Cookies.set('sidebarStatus', 0)
|
},
|
||||||
state.sidebar.opened = false
|
CLOSE_SIDEBAR: (state, withoutAnimation) => {
|
||||||
state.sidebar.withoutAnimation = withoutAnimation
|
Cookies.set('sidebarStatus', 0)
|
||||||
},
|
state.sidebar.opened = false
|
||||||
TOGGLE_DEVICE: (state, device) => {
|
state.sidebar.withoutAnimation = withoutAnimation
|
||||||
state.device = device
|
},
|
||||||
},
|
TOGGLE_DEVICE: (state, device) => {
|
||||||
SET_SIZE: (state, size) => {
|
state.device = device
|
||||||
state.size = size
|
},
|
||||||
Cookies.set('size', size)
|
SET_SIZE: (state, size) => {
|
||||||
}
|
state.size = size
|
||||||
}
|
Cookies.set('size', size)
|
||||||
|
},
|
||||||
const actions = {
|
SET_$SOCKET: (state, socket) => {
|
||||||
toggleSideBar({ commit }) {
|
state.$socket = socket
|
||||||
commit('TOGGLE_SIDEBAR')
|
}
|
||||||
},
|
}
|
||||||
closeSideBar({ commit }, { withoutAnimation }) {
|
|
||||||
commit('CLOSE_SIDEBAR', withoutAnimation)
|
const actions = {
|
||||||
},
|
toggleSideBar({commit}) {
|
||||||
toggleDevice({ commit }, device) {
|
commit('TOGGLE_SIDEBAR')
|
||||||
commit('TOGGLE_DEVICE', device)
|
},
|
||||||
},
|
closeSideBar({commit}, {withoutAnimation}) {
|
||||||
setSize({ commit }, size) {
|
commit('CLOSE_SIDEBAR', withoutAnimation)
|
||||||
commit('SET_SIZE', size)
|
},
|
||||||
}
|
toggleDevice({commit}, device) {
|
||||||
}
|
commit('TOGGLE_DEVICE', device)
|
||||||
|
},
|
||||||
export default {
|
setSize({commit}, size) {
|
||||||
namespaced: true,
|
commit('SET_SIZE', size)
|
||||||
state,
|
},
|
||||||
mutations,
|
set$Socket({commit}, socket) {
|
||||||
actions
|
commit('SET_$SOCKET', socket)
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
|
namespaced: true,
|
||||||
|
state,
|
||||||
|
mutations,
|
||||||
|
actions
|
||||||
|
}
|
||||||
|
|||||||
Loading…
Reference in new issue