🎨

2025-03-18 17:31:25 +09:00
parent 0a295e1bb0
commit d609f41f61
20 changed files with 324 additions and 73 deletions
--- a/packages/frontend/src/components/global/MkPageHeader.vue
+++ b/packages/frontend/src/components/global/MkPageHeader.vue
@@ -49,9 +49,9 @@ import type { Tab } from './MkPageHeader.tabs.vue';
 import type { PageHeaderItem } from '@/types/page-header.js';
 import type { PageMetadata } from '@/page.js';
 import { globalEvents } from '@/events.js';
-import { injectReactiveMetadata } from '@/page.js';
 import { openAccountMenu as openAccountMenu_ } from '@/accounts.js';
 import { $i } from '@/i.js';
+import { DI } from '@/di.js';

 const props = withDefaults(defineProps<{
 	overridePageMetadata?: PageMetadata;
@@ -69,7 +69,7 @@ const emit = defineEmits<{
 	(ev: 'update:tab', key: string);
 }>();

-const injectedPageMetadata = injectReactiveMetadata();
+const injectedPageMetadata = inject(DI.pageMetadata);
 const pageMetadata = computed(() => props.overridePageMetadata ?? injectedPageMetadata.value);

 const hideTitle = computed(() => inject('shouldOmitHeaderTitle', false) || props.hideTitle);
--- a/packages/frontend/src/components/global/NestedRouterView.vue
+++ b/packages/frontend/src/components/global/NestedRouterView.vue
@@ -0,0 +1,65 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<Suspense :timeout="0">
+	<component :is="currentPageComponent" :key="key" v-bind="Object.fromEntries(currentPageProps)"/>
+
+	<template #fallback>
+		<MkLoading/>
+	</template>
+</Suspense>
+</template>
+
+<script lang="ts" setup>
+import { inject, onBeforeUnmount, provide, ref, shallowRef } from 'vue';
+import type { IRouter, Resolved } from '@/nirax.js';
+import MkLoadingPage from '@/pages/_loading_.vue';
+import { DI } from '@/di.js';
+
+const props = defineProps<{
+	router?: IRouter;
+}>();
+
+const router = props.router ?? inject(DI.router);
+
+if (router == null) {
+	throw new Error('no router provided');
+}
+
+const currentDepth = inject(DI.routerCurrentDepth, 0);
+provide(DI.routerCurrentDepth, currentDepth + 1);
+
+function resolveNested(current: Resolved, d = 0): Resolved | null {
+	if (d === currentDepth) {
+		return current;
+	} else {
+		if (current.child) {
+			return resolveNested(current.child, d + 1);
+		} else {
+			return null;
+		}
+	}
+}
+
+const current = resolveNested(router.current)!;
+const currentPageComponent = shallowRef('component' in current.route ? current.route.component : MkLoadingPage);
+const currentPageProps = ref(current.props);
+const key = ref(router.getCurrentKey() + JSON.stringify(Object.fromEntries(current.props)));
+
+function onChange({ resolved, key: newKey }) {
+	const current = resolveNested(resolved);
+	if (current == null || 'redirect' in current.route) return;
+	currentPageComponent.value = current.route.component;
+	currentPageProps.value = current.props;
+	key.value = newKey + JSON.stringify(Object.fromEntries(current.props));
+}
+
+router.addListener('change', onChange);
+
+onBeforeUnmount(() => {
+	router.removeListener('change', onChange);
+});
+</script>
--- a/packages/frontend/src/components/global/RouterView.vue
+++ b/packages/frontend/src/components/global/RouterView.vue
@@ -4,18 +4,20 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->

 <template>
-<KeepAlive
-	:max="prefer.s.numberOfPageCache"
-	:exclude="pageCacheController"
->
-	<Suspense :timeout="0">
-		<component :is="currentPageComponent" :key="key" v-bind="Object.fromEntries(currentPageProps)"/>
+<div class="_pageContainer" style="height: 100%;">
+	<KeepAlive
+		:max="prefer.s.numberOfPageCache"
+		:exclude="pageCacheController"
+	>
+		<Suspense :timeout="0">
+			<component :is="currentPageComponent" :key="key" v-bind="Object.fromEntries(currentPageProps)"/>

-		<template #fallback>
-			<MkLoading/>
-		</template>
-	</Suspense>
-</KeepAlive>
+			<template #fallback>
+				<MkLoading/>
+			</template>
+		</Suspense>
+	</KeepAlive>
+</div>
 </template>

 <script lang="ts" setup>
@@ -28,7 +30,6 @@ import { DI } from '@/di.js';

 const props = defineProps<{
 	router?: IRouter;
-	nested?: boolean;
 }>();

 const router = props.router ?? inject(DI.router);
@@ -40,31 +41,16 @@ if (router == null) {
 const currentDepth = inject(DI.routerCurrentDepth, 0);
 provide(DI.routerCurrentDepth, currentDepth + 1);

-function resolveNested(current: Resolved, d = 0): Resolved | null {
-	if (!props.nested) return current;
-
-	if (d === currentDepth) {
-		return current;
-	} else {
-		if (current.child) {
-			return resolveNested(current.child, d + 1);
-		} else {
-			return null;
-		}
-	}
-}
-
-const current = resolveNested(router.current)!;
+const current = router.current!;
 const currentPageComponent = shallowRef('component' in current.route ? current.route.component : MkLoadingPage);
 const currentPageProps = ref(current.props);
 const key = ref(router.getCurrentKey() + JSON.stringify(Object.fromEntries(current.props)));

 function onChange({ resolved, key: newKey }) {
-	const current = resolveNested(resolved);
-	if (current == null || 'redirect' in current.route) return;
-	currentPageComponent.value = current.route.component;
-	currentPageProps.value = current.props;
-	key.value = newKey + JSON.stringify(Object.fromEntries(current.props));
+	if (resolved == null || 'redirect' in resolved.route) return;
+	currentPageComponent.value = resolved.route.component;
+	currentPageProps.value = resolved.props;
+	key.value = newKey + JSON.stringify(Object.fromEntries(resolved.props));

 	nextTick(() => {
 		// ページ遷移完了後に再びキャッシュを有効化
@@ -79,11 +65,11 @@ router.addListener('change', onChange);
 // #region キャッシュ制御

 /**
- * キャッシュクリアが有効になったら、全キャッシュをクリアする
- *
- * keepAlive側にwatcherがあるのですぐ消えるとはおもうけど、念のためページ遷移完了まではキャッシュを無効化しておく。
- * キャッシュ有効時向けにexcludeを使いたい場合は、pageCacheControllerに並列に突っ込むのではなく、下に追記すること
- */
+	 * キャッシュクリアが有効になったら、全キャッシュをクリアする
+	 *
+	 * keepAlive側にwatcherがあるのですぐ消えるとはおもうけど、念のためページ遷移完了まではキャッシュを無効化しておく。
+	 * キャッシュ有効時向けにexcludeを使いたい場合は、pageCacheControllerに並列に突っ込むのではなく、下に追記すること
+	 */
 const pageCacheController = computed(() => clearCacheRequested.value ? /.*/ : undefined);
 const clearCacheRequested = ref(false);

--- a/packages/frontend/src/components/global/StackingRouterView.vue
+++ b/packages/frontend/src/components/global/StackingRouterView.vue
@@ -0,0 +1,191 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<TransitionGroup
+	:enterActiveClass="prefer.s.animation ? $style.transition_x_enterActive : ''"
+	:leaveActiveClass="prefer.s.animation ? $style.transition_x_leaveActive : ''"
+	:enterFromClass="prefer.s.animation ? $style.transition_x_enterFrom : ''"
+	:leaveToClass="prefer.s.animation ? $style.transition_x_leaveTo : ''"
+	:moveClass="prefer.s.animation ? $style.transition_x_move : ''"
+	:duration="200"
+	tag="div" :class="$style.root"
+>
+	<div v-for="(tab, i) in tabs" :key="tab.key" :class="$style.tab" :style="{ '--i': i }">
+		<div v-if="i > 0" :class="$style.tabBg" @click="back()"></div>
+		<div :class="$style.tabFg">
+			<div :class="$style.tabContent" class="_pageContainer" @click.stop="">
+				<Suspense :timeout="0">
+					<component :is="tab.component" v-bind="Object.fromEntries(tab.props)"/>
+
+					<template #fallback>
+						<MkLoading/>
+					</template>
+				</Suspense>
+			</div>
+		</div>
+	</div>
+</TransitionGroup>
+</template>
+
+<script lang="ts" setup>
+import { inject, onBeforeUnmount, provide, ref, shallowRef, computed, nextTick } from 'vue';
+import type { IRouter, Resolved, RouteDef } from '@/nirax.js';
+import { prefer } from '@/preferences.js';
+import { globalEvents } from '@/events.js';
+import MkLoadingPage from '@/pages/_loading_.vue';
+import { DI } from '@/di.js';
+import { deepEqual } from '@/utility/deep-equal.js';
+
+const props = defineProps<{
+	router?: IRouter;
+}>();
+
+const router = props.router ?? inject(DI.router);
+
+if (router == null) {
+	throw new Error('no router provided');
+}
+
+const currentDepth = inject(DI.routerCurrentDepth, 0);
+provide(DI.routerCurrentDepth, currentDepth + 1);
+
+const current = router.current!;
+const key = ref(router.getCurrentKey() + JSON.stringify(Object.fromEntries(current.props)));
+
+const tabs = shallowRef([{
+	key: key.value,
+	path: router.getCurrentPath(),
+	component: 'component' in current.route ? current.route.component : MkLoadingPage,
+	props: current.props,
+}]);
+
+function onChange({ resolved, key: newKey }) {
+	const currentTab = tabs.value[tabs.value.length - 1];
+	if (resolved == null || 'redirect' in resolved.route) return;
+	if (resolved.route.path === currentTab.path && deepEqual(resolved.props, currentTab.props)) return;
+	key.value = newKey + JSON.stringify(Object.fromEntries(resolved.props));
+
+	if (tabs.value.some(tab => tab.key === key.value)) {
+		const newTabs = [];
+		for (const tab of tabs.value) {
+			newTabs.push(tab);
+
+			if (tab.key === key.value) {
+				break;
+			}
+		}
+		tabs.value = newTabs;
+		return;
+	}
+
+	tabs.value = tabs.value.length >= prefer.s.numberOfPageCache ? [
+		...tabs.value.slice(1),
+		{
+			key: key.value,
+			path: router.getCurrentPath(),
+			component: resolved.route.component,
+			props: resolved.props,
+		},
+	] : [...tabs.value, {
+		key: key.value,
+		path: router.getCurrentPath(),
+		component: resolved.route.component,
+		props: resolved.props,
+	}];
+}
+
+function back() {
+	const last = tabs.value[tabs.value.length - 1];
+	router.replace(last.path, last.key);
+	tabs.value = [...tabs.value.slice(0, tabs.value.length - 1)];
+}
+
+router.addListener('change', onChange);
+
+onBeforeUnmount(() => {
+	router.removeListener('change', onChange);
+});
+</script>
+
+<style lang="scss" module>
+.transition_x_move,
+.transition_x_enterActive,
+.transition_x_leaveActive {
+	.tabBg {
+		transition: opacity 0.2s cubic-bezier(0,.5,.5,1), transform 0.2s cubic-bezier(0,.5,.5,1) !important;
+	}
+
+	.tabFg {
+		transition: opacity 0.2s cubic-bezier(0,.5,.5,1), transform 0.2s cubic-bezier(0,.5,.5,1) !important;
+	}
+}
+.transition_x_enterFrom,
+.transition_x_leaveTo {
+	.tabBg {
+		opacity: 0;
+	}
+
+	.tabFg {
+		opacity: 0;
+		transform: translateY(100px);
+	}
+}
+.transition_x_leaveActive {
+	.tabFg {
+		//position: absolute;
+	}
+}
+
+.root {
+	position: relative;
+	height: 100%;
+	overflow: clip;
+}
+
+.tabBg {
+	position: absolute;
+	z-index: 1;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background: #0003;
+	-webkit-backdrop-filter: var(--MI-blur, blur(3px));
+	backdrop-filter: var(--MI-blur, blur(3px));
+}
+
+.tab {
+	position: absolute;
+	top: 0;
+	left: 0;
+	height: 100%;
+	width: 100%;
+	box-sizing: border-box;
+
+	&:not(:nth-child(1)) {
+		.tabFg {
+			position: absolute;
+			z-index: 1;
+			bottom: 0;
+			left: 0;
+			width: 100%;
+			height: calc(100% - 20px * var(--i));
+		}
+	}
+}
+
+.tabFg {
+	position: relative;
+	height: 100%;
+	background: var(--MI_THEME-bg);
+	border-radius: 16px 16px 0 0;
+	overflow: clip;
+}
+
+.tabContent {
+	height: 100%;
+}
+</style>