7
7
<div >
8
8
<XAnnouncements v-if =" $i" :class =" $style.announcements" />
9
9
<XStatusBars :class =" $style.statusbars" />
10
- <MkPageHeader v-if =" isRootPage " :actions =" headerActions" />
10
+ <MkPageHeader v-if =" isRoot " :actions =" headerActions" />
11
11
</div >
12
12
</template >
13
- <MkSpacer v-if =" isRootPage " :contentMax =" 800" >
13
+ <MkSpacer v-if =" isRoot " :contentMax =" 800" >
14
14
<MkPostForm :class =" $style.postForm" class =" post-form _panel" fixed style =" margin-bottom : var (--margin );" />
15
15
<XWidgets v-if =" showWidgets" />
16
16
</MkSpacer >
23
23
<i :class =" $style.navButtonIcon" class =" ti ti-menu-2" ></i >
24
24
<span v-if =" menuIndicated" :class =" $style.navButtonIndicator" ><i class =" _indicatorCircle" ></i ></span >
25
25
</button >
26
- <button :class =" $style.navButton" class =" _button" @click =" mainRouter.currentRoute.value.name === 'index' ? top() : mainRouter.push('/')" >
27
- <i :class =" $style.navButtonIcon" class =" ti ti-home" ></i >
28
- </button >
26
+ <button :class =" $style.navButton" class =" _button" @click =" isRoot ? top() : mainRouter.push('/')" ><i :class =" $style.navButtonIcon" class =" ti ti-home" ></i ></button >
27
+ <i :class =" $style.navButtonIcon" class =" ti ti-home" ></i >
29
28
<button :class =" $style.postButton" class =" _button" @click =" os.post()" ><i :class =" $style.navButtonIcon" class =" ti ti-pencil" ></i ></button >
30
29
</div >
31
30
@@ -66,7 +65,7 @@ import { navbarItemDef } from '@/navbar.js';
66
65
import { i18n } from ' @/i18n.js' ;
67
66
import { $i } from ' @/account.js' ;
68
67
import { mainRouter } from ' @/router/main.js' ;
69
- import { definePageMetadata , PageMetadata , provideMetadataReceiver } from ' @/scripts/page-metadata.js' ;
68
+ import { PageMetadata , provideMetadataReceiver , provideReactiveMetadata } from ' @/scripts/page-metadata.js' ;
70
69
import { deviceKind } from ' @/scripts/device-kind.js' ;
71
70
import { miLocalStorage } from ' @/local-storage.js' ;
72
71
import { CURRENT_STICKY_BOTTOM } from ' @/const.js' ;
@@ -78,6 +77,8 @@ const XSidebar = defineAsyncComponent(() => import('@/ui/_common_/navbar.vue'));
78
77
const XStatusBars = defineAsyncComponent (() => import (' @/ui/_common_/statusbars.vue' ));
79
78
const XAnnouncements = defineAsyncComponent (() => import (' @/ui/_common_/announcements.vue' ));
80
79
80
+ const isRoot = ref (mainRouter .currentRoute .value .name === ' index' );
81
+
81
82
const DESKTOP_THRESHOLD = 1100 ;
82
83
const MOBILE_THRESHOLD = 500 ;
83
84
@@ -88,28 +89,43 @@ window.addEventListener('resize', () => {
88
89
isMobile .value = deviceKind === ' smartphone' || window .innerWidth <= MOBILE_THRESHOLD ;
89
90
});
90
91
91
- const pageMetadata = ref <null | PageMetadata >();
92
+ const defaultPageMetadata: PageMetadata = {
93
+ title: i18n .ts .zenMode ,
94
+ icon: ' ti ti-seeding' ,
95
+ };
96
+
97
+ const pageMetadata = ref <null | PageMetadata >(isRoot .value ? defaultPageMetadata : null );
92
98
const navFooter = shallowRef <HTMLElement >();
93
99
const contents = shallowRef <InstanceType <typeof MkStickyContainer >>();
94
100
95
- const isRootPage = ref (mainRouter .currentRoute .value .path === ' /' );
96
-
97
101
const showWidgets = ref (zenStore .state .showWidgets );
98
102
watch (zenStore .reactiveState .showWidgets , (value ) => {
99
103
showWidgets .value = value ;
100
104
});
101
105
102
- watch (mainRouter .currentRoute , (route ) => {
103
- isRootPage .value = route .path === ' /' ;
106
+ watch (mainRouter .currentRoute , () => {
107
+ const isRootPage = mainRouter .currentRoute .value .name === ' index' ;
108
+ isRoot .value = isRootPage ;
109
+
110
+ if (isRootPage ) {
111
+ pageMetadata .value = defaultPageMetadata ;
112
+ }
104
113
});
105
114
106
115
provide (' router' , mainRouter );
107
- provideMetadataReceiver ((info ) => {
108
- pageMetadata .value = info .value ;
116
+ provideMetadataReceiver ((metadataGetter ) => {
117
+ const info = metadataGetter ();
118
+ pageMetadata .value = info ;
119
+
109
120
if (pageMetadata .value ) {
110
- document .title = ` ${pageMetadata .value .title } | ${instanceName } ` ;
121
+ if (isRoot .value && pageMetadata .value .title === instanceName ) {
122
+ document .title = pageMetadata .value .title ;
123
+ } else {
124
+ document .title = ` ${pageMetadata .value .title } | ${instanceName } ` ;
125
+ }
111
126
}
112
127
});
128
+ provideReactiveMetadata (pageMetadata );
113
129
114
130
const menuIndicated = computed (() => {
115
131
for (const def in navbarItemDef ) {
@@ -181,7 +197,7 @@ const onContextmenu = (ev) => {
181
197
};
182
198
183
199
function top() {
184
- contents .value .rootEl .scrollTo ({
200
+ contents .value ? .rootEl ? .scrollTo ({
185
201
top: 0 ,
186
202
behavior: ' smooth' ,
187
203
});
@@ -204,7 +220,7 @@ watch(navFooter, () => {
204
220
immediate: true ,
205
221
});
206
222
207
- useScrollPositionManager (() => contents .value .rootEl , mainRouter );
223
+ useScrollPositionManager (() => contents .value ? .rootEl ?? null , mainRouter );
208
224
209
225
const headerActions = computed (() => [{
210
226
icon: ' ti ti-settings' ,
@@ -213,11 +229,6 @@ const headerActions = computed(() => [{
213
229
mainRouter .push (' /settings/zen' );
214
230
},
215
231
}]);
216
-
217
- definePageMetadata (computed (() => ({
218
- title: i18n .ts .zenMode ,
219
- icon: ' ti ti-seeding' ,
220
- })));
221
232
</script >
222
233
223
234
<style >
0 commit comments