mirrors/misskey
1
0
Fork 1
mirror of https://github.com/misskey-dev/misskey.git synced 2026-05-05 18:15:53 +02:00
Code Releases Activity

refactor(frontend): router refactoring

Browse Source
This commit is contained in:
syuilo
2025-03-19 18:06:22 +09:00
parent 2c76018b7f
commit 81ac71f7e5
10 changed files with 115 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
packages/frontend/src/components/global/StackingRouterView.vue
View File

@@ -13,7 +13,7 @@ SPDX-License-Identifier: AGPL-3.0-only
:duration="200"
tag="div" :class="$style.tabs"
>
<div v-for="(tab, i) in tabs" :key="tab.key" :class="$style.tab" :style="{ '--i': i - 1 }">
<div v-for="(tab, i) in tabs" :key="tab.fullPath" :class="$style.tab" :style="{ '--i': i - 1 }">
<div v-if="i > 0" :class="$style.tabBg" @click="back()"></div>
<div :class="$style.tabFg" @click.stop="back()">
<div v-if="i > 0" :class="$style.tabMenu">
@@ -41,10 +41,9 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { inject, onBeforeUnmount, provide, ref, shallowRef, computed, nextTick } from 'vue';
import type { Router, Resolved, RouteDef } from '@/router.js';
import { inject, provide, shallowRef } from 'vue';
import type { Router } from '@/router.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';
@@ -63,26 +62,36 @@ const currentDepth = inject(DI.routerCurrentDepth, 0);
provide(DI.routerCurrentDepth, currentDepth + 1);
const tabs = shallowRef([{
key: router.getCurrentPath(),
path: router.getCurrentPath(),
route: router.current.route.path,
fullPath: router.getCurrentFullPath(),
routePath: router.current.route.path,
component: 'component' in router.current.route ? router.current.route.component : MkLoadingPage,
props: router.current.props,
}]);
function onChange({ resolved }) {
function mount() {
const currentTab = tabs.value[tabs.value.length - 1];
const route = resolved.route.path;
if (resolved == null || 'redirect' in resolved.route) return;
if (resolved.route.path === currentTab.path && deepEqual(resolved.props, currentTab.props)) return;
const fullPath = router.getCurrentPath();
tabs.value = [currentTab];
}
if (tabs.value.some(tab => tab.route === route && deepEqual(resolved.props, tab.props))) {
function back() {
const prev = tabs.value[tabs.value.length - 2];
tabs.value = [...tabs.value.slice(0, tabs.value.length - 1)];
router.replace(prev.fullPath);
}
router.useListener('change', ({ resolved }) => {
const currentTab = tabs.value[tabs.value.length - 1];
const routePath = resolved.route.path;
if (resolved == null || 'redirect' in resolved.route) return;
if (resolved.route.path === currentTab.routePath && deepEqual(resolved.props, currentTab.props)) return;
const fullPath = router.getCurrentFullPath();
if (tabs.value.some(tab => tab.routePath === routePath && deepEqual(resolved.props, tab.props))) {
const newTabs = [];
for (const tab of tabs.value) {
newTabs.push(tab);
if (tab.route === route && deepEqual(resolved.props, tab.props)) {
if (tab.routePath === routePath && deepEqual(resolved.props, tab.props)) {
break;
}
}
@@ -93,45 +102,23 @@ function onChange({ resolved }) {
tabs.value = tabs.value.length >= prefer.s.numberOfPageCache ? [
...tabs.value.slice(1),
{
key: fullPath,
path: fullPath,
route,
fullPath: fullPath,
routePath,
component: resolved.route.component,
props: resolved.props,
},
] : [...tabs.value, {
key: fullPath,
path: fullPath,
route,
fullPath: fullPath,
routePath,
component: resolved.route.component,
props: resolved.props,
}];
}
});
function onReplace({ path }) {
router.useListener('replace', ({ fullPath }) => {
const currentTab = tabs.value[tabs.value.length - 1];
console.log('replace', currentTab.path, path);
currentTab.path = path;
currentTab.fullPath = fullPath;
tabs.value = [...tabs.value.slice(0, tabs.value.length - 1), currentTab];
}
function mount() {
const currentTab = tabs.value[tabs.value.length - 1];
tabs.value = [currentTab];
}
function back() {
const prev = tabs.value[tabs.value.length - 2];
tabs.value = [...tabs.value.slice(0, tabs.value.length - 1)];
router.replace(prev.path);
}
router.addListener('replace', onReplace);
router.addListener('change', onChange);
onBeforeUnmount(() => {
router.removeListener('replace', onReplace);
router.removeListener('change', onChange);
});
</script>