diff options
Diffstat (limited to 'packages/frontend/src/components')
6 files changed, 292 insertions, 41 deletions
diff --git a/packages/frontend/src/components/MkPageWindow.vue b/packages/frontend/src/components/MkPageWindow.vue index 51f19faf29..eae2ccec4a 100644 --- a/packages/frontend/src/components/MkPageWindow.vue +++ b/packages/frontend/src/components/MkPageWindow.vue @@ -22,8 +22,10 @@ SPDX-License-Identifier: AGPL-3.0-only </template> </template> - <div :class="$style.root" class="_pageContainer"> - <RouterView :key="reloadCount" :router="windowRouter"/> + <div :class="$style.root"> + <StackingRouterView :key="reloadCount" :router="windowRouter"/> + <StackingRouterView v-if="prefer.s['experimental.stackingRouterView']" :key="reloadCount" :router="windowRouter"/> + <RouterView v-else :key="reloadCount" :router="windowRouter"/> </div> </MkWindow> </template> @@ -44,6 +46,7 @@ import { useRouterFactory } from '@/router/supplier.js'; import { mainRouter } from '@/router/main.js'; import { analytics } from '@/analytics.js'; import { DI } from '@/di.js'; +import { prefer } from '@/preferences.js'; const props = defineProps<{ initialPath: string; diff --git a/packages/frontend/src/components/global/MkPageHeader.vue b/packages/frontend/src/components/global/MkPageHeader.vue index 69bbd88cb6..b353269fef 100644 --- 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); diff --git a/packages/frontend/src/components/global/NestedRouterView.vue b/packages/frontend/src/components/global/NestedRouterView.vue new file mode 100644 index 0000000000..eb7192d8e0 --- /dev/null +++ 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> diff --git a/packages/frontend/src/components/global/RouterView.vue b/packages/frontend/src/components/global/RouterView.vue index 25a29a4ae7..b01e355c5e 100644 --- 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); diff --git a/packages/frontend/src/components/global/StackingRouterView.vue b/packages/frontend/src/components/global/StackingRouterView.vue new file mode 100644 index 0000000000..c9364bdffa --- /dev/null +++ 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> diff --git a/packages/frontend/src/components/index.ts b/packages/frontend/src/components/index.ts index 66ac871f7d..c28c457e33 100644 --- a/packages/frontend/src/components/index.ts +++ b/packages/frontend/src/components/index.ts @@ -16,6 +16,8 @@ import MkTime from './global/MkTime.vue'; import MkUrl from './global/MkUrl.vue'; import I18n from './global/I18n.vue'; import RouterView from './global/RouterView.vue'; +import NestedRouterView from './global/NestedRouterView.vue'; +import StackingRouterView from './global/StackingRouterView.vue'; import MkLoading from './global/MkLoading.vue'; import MkError from './global/MkError.vue'; import MkAd from './global/MkAd.vue'; @@ -38,6 +40,8 @@ export default function(app: App) { export const components = { I18n: I18n, RouterView: RouterView, + NestedRouterView: NestedRouterView, + StackingRouterView: StackingRouterView, Mfm: Mfm, MkA: MkA, MkAcct: MkAcct, @@ -65,6 +69,8 @@ declare module '@vue/runtime-core' { export interface GlobalComponents { I18n: typeof I18n; RouterView: typeof RouterView; + NestedRouterView: typeof NestedRouterView; + StackingRouterView: typeof StackingRouterView; Mfm: typeof Mfm; MkA: typeof MkA; MkAcct: typeof MkAcct; |