Skip to content

Commit d919acf

Browse files
PanJiaChenPanJiaChen
committed
feature: add fixedHeader settings
1 parent 3594052 commit d919acf

File tree

7 files changed

+113
-58
lines changed

7 files changed

+113
-58
lines changed

‎src/components/RightPanel/index.vue

Lines changed: 50 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -74,57 +74,60 @@ export default {
7474
</style>
7575

7676
<style rel="stylesheet/scss" lang="scss" scoped>
77-
.rightPanel-background {
78-
opacity: 0;
79-
transition: opacity .3s cubic-bezier(.7,.3,.1,1);
80-
background: rgba(0, 0, 0, .2);
81-
width: 0;
82-
height: 0;
83-
position: fixed;
84-
z-index: -1;
85-
}
77+
.rightPanel-background {
78+
opacity: 0;
79+
transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
80+
background: rgba(0, 0, 0, .2);
81+
width: 0;
82+
height: 0;
83+
top: 0;
84+
left: 0;
85+
position: fixed;
86+
z-index: -1;
87+
}
8688
87-
.rightPanel {
88-
background: #fff;
89-
z-index: 3000;
90-
position: fixed;
91-
height: 100vh;
92-
width: 100%;
93-
max-width: 260px;
94-
top: 0px;
89+
.rightPanel {
90+
background: #fff;
91+
z-index: 3000;
92+
position: fixed;
93+
height: 100vh;
94+
width: 100%;
95+
max-width: 260px;
96+
top: 0px;
9597
left: 0px;
96-
box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
97-
transition: all .25s cubic-bezier(.7,.3,.1,1);
98-
transform: translate(100%);
99-
z-index: 40000;
100-
left: auto;
101-
right: 0px;
102-
}
98+
box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
99+
transition: all .25s cubic-bezier(.7, .3, .1, 1);
100+
transform: translate(100%);
101+
z-index: 40000;
102+
left: auto;
103+
right: 0px;
104+
}
103105
104-
.show {
106+
.show {
105107
106-
transition: all .3s cubic-bezier(.7,.3,.1,1);
107-
.rightPanel-background {
108-
z-index: 20000;
109-
opacity: 1;
110-
width: 100%;
111-
height: 100%;
112-
}
108+
transition: all .3s cubic-bezier(.7, .3, .1, 1);
113109
114-
.rightPanel {
115-
transform: translate(0);
116-
}
117-
}
110+
.rightPanel-background {
111+
z-index: 20000;
112+
opacity: 1;
113+
width: 100%;
114+
height: 100%;
115+
}
118116
119-
.handle-button {
120-
position: absolute;
121-
left: -48px;
122-
border-radius: 6px 0 0 6px !important;
123-
width: 48px;
124-
height: 48px;
125-
pointer-events: auto;
126-
z-index: 0;
127-
font-size: 24px;
128-
text-align: center;
129-
}
117+
.rightPanel {
118+
transform: translate(0);
119+
}
120+
}
121+
122+
.handle-button {
123+
position: absolute;
124+
left: -48px;
125+
border-radius: 6px 0 0 6px !important;
126+
width: 48px;
127+
height: 48px;
128+
pointer-events: auto;
129+
z-index: 0;
130+
font-size: 24px;
131+
text-align: center;
132+
}
130133
</style>

‎src/layout/Layout.vue

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,10 @@
33
<div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
44
<sidebar class="sidebar-container" />
55
<div :class="{hasTagsView:needTagsView}" class="main-container">
6-
<navbar />
7-
<tags-view v-if="needTagsView" />
6+
<div :class="{'fixed-header':fixedHeader}">
7+
<navbar />
8+
<tags-view v-if="needTagsView" />
9+
</div>
810
<app-main />
911
<right-panel v-if="showSettings">
1012
<settings />
@@ -35,7 +37,8 @@ export default {
3537
sidebar: state => state.app.sidebar,
3638
device: state => state.app.device,
3739
showSettings: state => state.settings.showSettings,
38-
needTagsView: state => state.settings.tagsView
40+
needTagsView: state => state.settings.tagsView,
41+
fixedHeader: state => state.settings.fixedHeader
3942
}),
4043
classObj() {
4144
return {
@@ -56,6 +59,8 @@ export default {
5659

5760
<style rel="stylesheet/scss" lang="scss" scoped>
5861
@import "~@/styles/mixin.scss";
62+
@import "~@/styles/variables.scss";
63+
5964
.app-wrapper {
6065
@include clearfix;
6166
position: relative;
@@ -75,4 +80,15 @@ export default {
7580
position: absolute;
7681
z-index: 999;
7782
}
83+
.fixed-header{
84+
position: fixed;
85+
top: 0;
86+
right: 0;
87+
z-index: 9;
88+
width: calc(100% - #{$sideBarWidth});
89+
transition: width 0.28s;
90+
}
91+
.hideSidebar .fixed-header{
92+
width: calc(100% - 54px)
93+
}
7894
</style>

‎src/layout/components/AppMain.vue

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export default {
2222
}
2323
</script>
2424

25-
<style scoped>
25+
<style rel="stylesheet/scss" lang="scss" scoped>
2626
.app-main {
2727
/*50= navbar 50 */
2828
min-height: calc(100vh - 50px);
@@ -31,9 +31,19 @@ export default {
3131
overflow: hidden;
3232
}
3333
34-
.hasTagsView .app-main {
35-
/*84 = navbar + tags-view = 50 + 34 */
36-
min-height: calc(100vh - 84px);
34+
.fixed-header+.app-main {
35+
margin-top: 50px;
36+
}
37+
38+
.hasTagsView {
39+
.app-main {
40+
/*84 = navbar + tags-view = 50 + 34 */
41+
min-height: calc(100vh - 84px);
42+
}
43+
44+
.fixed-header+.app-main {
45+
margin-top: 80px;
46+
}
3747
}
3848
</style>
3949

‎src/layout/components/Navbar.vue

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,8 @@ export default {
9595
.navbar {
9696
height: 50px;
9797
overflow: hidden;
98+
position: relative;
99+
background: #fff;
98100
box-shadow: 0 1px 4px rgba(0,21,41,.08);
99101
100102
.hamburger-container {

‎src/layout/components/Settings/index.vue

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,21 @@
55
系统布局配置
66
</h3>
77

8+
<div class="drawer-item">
9+
<span>主题色</span>
10+
<theme-picker style="float: right;height: 26px;margin: -3px 5px 0 0;" />
11+
</div>
12+
813
<div class="drawer-item">
914
<span>开启 Tags-View</span>
1015
<el-switch v-model="tagsView" class="drawer-switch" />
1116
</div>
1217

1318
<div class="drawer-item">
14-
<span>主题色</span>
15-
<theme-picker style="float: right;height: 26px;margin: -3px 5px 0 0;" />
19+
<span>固定 Header</span>
20+
<el-switch v-model="fixedHeader" class="drawer-switch" />
1621
</div>
22+
1723
</div>
1824
</div>
1925
</template>
@@ -29,6 +35,17 @@ export default {
2935
}
3036
},
3137
computed: {
38+
fixedHeader: {
39+
get() {
40+
return this.$store.state.settings.fixedHeader
41+
},
42+
set(val) {
43+
this.$store.dispatch('settings/changeSetting', {
44+
key: 'fixedHeader',
45+
value: val
46+
})
47+
}
48+
},
3249
tagsView: {
3350
get() {
3451
return this.$store.state.settings.tagsView

‎src/settings.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,12 @@ export default {
1313
*/
1414
tagsView: true,
1515

16+
/**
17+
* @type {boolean} true | false
18+
* @description Whether fix the header
19+
*/
20+
fixedHeader: true,
21+
1622
/**
1723
* @type {string | array} 'production' | ['production','development']
1824
* @description Need show err logs component.

‎src/store/modules/settings.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import defaultSettings from '@/settings'
2-
const { showSettings, tagsView } = defaultSettings
2+
const { showSettings, tagsView, fixedHeader } = defaultSettings
33

44
const state = {
55
showSettings: showSettings,
6-
tagsView: tagsView
6+
tagsView: tagsView,
7+
fixedHeader: fixedHeader
78
}
89

910
const mutations = {

0 commit comments

Comments
 (0)