1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
import { SingletonMode } from '../decorators/SingletonMode';
import { LayoutState } from '../interface/LayoutState';
import { on } from '@/utils/dom/dom';
/**
* 应用UI状态管理服务类
*
* @export
* @class UIStateService
*/
@SingletonMode()
export class UIStateService {
/**
* 缓存标识
*
* @protected
* @type {string}
* @memberof UIStateService
*/
protected localStoreKey: string = 'UIStateCache';
/**
* 全局布局状态管理
*
* @type {LayoutState}
* @memberof UIStateService
*/
public layoutState!: LayoutState;
/**
* Creates an instance of UIStateService.
* @memberof UIStateService
*/
constructor() {
try {
const data: any = localStorage.getItem(this.localStoreKey);
if (data) {
this.fillLayoutState(JSON.parse(data));
} else {
this.fillLayoutState({});
}
} catch (error) {
this.fillLayoutState({});
}
on(window, 'beforeunload', () => {
localStorage.setItem(this.localStoreKey, JSON.stringify(this.layoutState));
});
}
/**
* 填充状态
*
* @protected
* @param {*} data
* @memberof UIStateService
*/
protected fillLayoutState(data: any): void {
this.layoutState = {
styleMode: 'DEFAULT',
contentBottomShow: true,
contentHorizontalSplit: 0.23,
contentVerticalSplit: 0.65,
leftExpActiveIndex: 0,
bottomExpActiveIndex: 0,
leftExpContentShow: true,
leftNavMenuCollapse: false,
leftNavOpenedMenus: []
};
Object.assign(this.layoutState, data)
}
/**
* 改变布局状态
*
* @param {LayoutState} state
* @memberof UIStateService
*/
public changeLayoutState(state: any): void {
if (state) {
Object.assign(this.layoutState, state);
}
}
/**
* 左侧导航内容区显示切换
*
* @param {boolean} [bool]
* @memberof UIStateService
*/
public leftExpContentShowChange(bool?: boolean): void {
if (bool !== undefined) {
this.layoutState.leftExpContentShow = bool;
} else {
this.layoutState.leftExpContentShow = !this.layoutState.leftExpContentShow;
}
}
/**
* 改变左侧菜单收缩状态
*
* @param {boolean} [bool]
* @memberof UIStateService
*/
public leftNavMenuCollapseChange(bool?: boolean): void {
if (bool !== undefined) {
this.layoutState.leftNavMenuCollapse = bool;
} else {
this.layoutState.leftNavMenuCollapse = !this.layoutState.leftNavMenuCollapse;
}
}
/**
* 是否为Style2模式
*
* @returns {boolean}
* @memberof UIStateService
*/
public isStyle2(): boolean {
return this.layoutState.styleMode === 'STYLE2';
}
}