sendnrw/misskey
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'develop' into chat

Browse Source
This commit is contained in:
syuilo
2025-03-19 09:34:56 +09:00
parent 6b5cf2e229 11378b17c5
commit 83c7d74e11
23 changed files with 767 additions and 647 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
packages/frontend/src/components/MkPageWindow.vue
View File

@@ -22,8 +22,9 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
</template>
<div ref="contents" :class="$style.root" style="container-type: inline-size;">
<RouterView :key="reloadCount" :router="windowRouter"/>
<div :class="$style.root">
<StackingRouterView v-if="prefer.s['experimental.stackingRouterView']" :key="reloadCount" :router="windowRouter"/>
<RouterView v-else :key="reloadCount" :router="windowRouter"/>
</div>
</MkWindow>
</template>
@@ -31,13 +32,11 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup>
import { computed, onMounted, onUnmounted, provide, ref, shallowRef } from 'vue';
import { url } from '@@/js/config.js';
import { getScrollContainer } from '@@/js/scroll.js';
import type { PageMetadata } from '@/page.js';
import RouterView from '@/components/global/RouterView.vue';
import MkWindow from '@/components/MkWindow.vue';
import { popout as _popout } from '@/utility/popout.js';
import { copyToClipboard } from '@/utility/copy-to-clipboard.js';
import { useScrollPositionManager } from '@/nirax.js';
import { i18n } from '@/i18n.js';
import { provideMetadataReceiver, provideReactiveMetadata } from '@/page.js';
import { openingWindowsCount } from '@/os.js';
@@ -46,6 +45,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;
@@ -58,7 +58,6 @@ const emit = defineEmits<{
const routerFactory = useRouterFactory();
const windowRouter = routerFactory(props.initialPath);
const contents = shallowRef<HTMLElement | null>(null);
const pageMetadata = ref<null | PageMetadata>(null);
const windowEl = shallowRef<InstanceType<typeof MkWindow>>();
const history = ref<{ path: string; key: string; }[]>([{
@@ -177,8 +176,6 @@ function popout() {
windowEl.value?.close();
}
useScrollPositionManager(() => getScrollContainer(contents.value), windowRouter);
onMounted(() => {
analytics.page({
path: props.initialPath,
@@ -202,9 +199,7 @@ defineExpose({
<style lang="scss" module>
.root {
overscroll-behavior: contain;
min-height: 100%;
height: 100%;
background: var(--MI_THEME-bg);
--MI-margin: var(--MI-marginHalf);

4
packages/frontend/src/components/global/MkPageHeader.vue
View File

@@ -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);

65
packages/frontend/src/components/global/NestedRouterView.vue Normal file
View File

@@ -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>

60
packages/frontend/src/components/global/RouterView.vue
View File

@@ -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);

256
packages/frontend/src/components/global/StackingRouterView.vue Normal file
View File

@@ -0,0 +1,256 @@
<!--
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.tabs"
>
<div v-for="(tab, i) in tabs" :key="tab.key" :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">
<svg :class="$style.tabMenuShape" viewBox="0 0 24 16">
<g transform="matrix(2.04108e-17,-0.333333,0.222222,1.36072e-17,21.3333,15.9989)">
<path d="M23.997,-42C47.903,-23.457 47.997,12 47.997,12L-0.003,12L-0.003,-96C-0.003,-96 0.091,-60.543 23.997,-42Z" style="fill:var(--MI_THEME-panel);"/>
</g>
</svg>
<button :class="$style.tabMenuButton" class="_button" @click.stop="mount"><i class="ti ti-rectangle"></i></button>
<button :class="$style.tabMenuButton" class="_button" @click.stop="back"><i class="ti ti-x"></i></button>
</div>
<div v-if="i > 0" :class="$style.tabBorder"></div>
<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 tabs = shallowRef([{
key: router.getCurrentPath(),
path: router.getCurrentPath(),
route: router.current.route.path,
component: 'component' in router.current.route ? router.current.route.component : MkLoadingPage,
props: router.current.props,
}]);
function onChange({ resolved }) {
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();
if (tabs.value.some(tab => tab.route === route && 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)) {
break;
}
}
tabs.value = newTabs;
return;
}
tabs.value = tabs.value.length >= prefer.s.numberOfPageCache ? [
...tabs.value.slice(1),
{
key: fullPath,
path: fullPath,
route,
component: resolved.route.component,
props: resolved.props,
},
] : [...tabs.value, {
key: fullPath,
path: fullPath,
route,
component: resolved.route.component,
props: resolved.props,
}];
}
function onReplace({ path }) {
const currentTab = tabs.value[tabs.value.length - 1];
console.log('replace', currentTab.path, path);
currentTab.path = path;
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, prev.key);
}
router.addListener('replace', onReplace);
router.addListener('change', onChange);
onBeforeUnmount(() => {
router.removeListener('replace', onReplace);
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;
}
}
.tabs {
position: relative;
width: 100%;
height: 100%;
}
.tab {
overflow: clip;
&:first-child {
position: relative;
width: 100%;
height: 100%;
.tabFg {
position: relative;
width: 100%;
height: 100%;
}
.tabContent {
position: relative;
width: 100%;
height: 100%;
}
}
&:not(:first-child) {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
.tabBg {
position: absolute;
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));
}
.tabFg {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: calc(100% - (10px + (20px * var(--i))));
display: flex;
flex-direction: column;
}
.tabContent {
flex: 1;
width: 100%;
height: 100%;
background: var(--MI_THEME-bg);
}
}
}
.tabMenu {
position: relative;
margin-left: auto;
padding: 0 4px;
background: var(--MI_THEME-panel);
}
.tabMenuShape {
position: absolute;
bottom: -1px;
left: -100%;
height: calc(100% + 1px);
width: 129%;
pointer-events: none;
}
.tabBorder {
height: 6px;
background: var(--MI_THEME-panel);
}
.tabMenuButton {
padding: 8px;
font-size: 13px;
}
</style>

6
packages/frontend/src/components/index.ts
View File

@@ -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;