perf(client): ウェルカムページを最適化 (#9960)

* perf(client): ウェルカムページの最適化

* remove max
This commit is contained in:
tamaina 2023-02-17 12:38:30 +09:00 committed by GitHub
parent dd52be3a01
commit e8c5307f66
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 60 additions and 81 deletions

View File

@ -10,6 +10,8 @@ export const meta = {
tags: ['federation'], tags: ['federation'],
requireCredential: false, requireCredential: false,
allowGet: true,
cacheSec: 3600,
res: { res: {
type: 'array', type: 'array',

View File

@ -9,6 +9,8 @@ export const meta = {
tags: ['notes'], tags: ['notes'],
requireCredential: false, requireCredential: false,
allowGet: true,
cacheSec: 3600,
res: { res: {
type: 'array', type: 'array',
@ -41,7 +43,6 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
private queryService: QueryService, private queryService: QueryService,
) { ) {
super(meta, paramDef, async (ps, me) => { super(meta, paramDef, async (ps, me) => {
const max = 30;
const day = 1000 * 60 * 60 * 24 * 3; // 3日前まで const day = 1000 * 60 * 60 * 24 * 3; // 3日前まで
const query = this.notesRepository.createQueryBuilder('note') const query = this.notesRepository.createQueryBuilder('note')
@ -67,7 +68,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
let notes = await query let notes = await query
.orderBy('note.score', 'DESC') .orderBy('note.score', 'DESC')
.take(max) .take(ps.limit)
.getMany(); .getMany();
notes.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()); notes.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());

View File

@ -32,7 +32,7 @@
</div> </div>
</div> </div>
</div> </div>
<div v-if="instances" class="federation"> <div v-if="instances && instances.length > 0" class="federation">
<MarqueeText :duration="40"> <MarqueeText :duration="40">
<MkA v-for="instance in instances" :key="instance.id" :class="$style.federationInstance" :to="`/instance-info/${instance.host}`" behavior="window"> <MkA v-for="instance in instances" :key="instance.id" :class="$style.federationInstance" :to="`/instance-info/${instance.host}`" behavior="window">
<!--<MkInstanceCardMini :instance="instance"/>--> <!--<MkInstanceCardMini :instance="instance"/>-->
@ -56,33 +56,16 @@ import MkFeaturedPhotos from '@/components/MkFeaturedPhotos.vue';
import { instanceName } from '@/config'; import { instanceName } from '@/config';
import * as os from '@/os'; import * as os from '@/os';
import { i18n } from '@/i18n'; import { i18n } from '@/i18n';
import { Instance } from 'misskey-js/built/entities';
let meta = $ref(); let meta = $ref<Instance>();
let stats = $ref(); let instances = $ref<any[]>();
let tags = $ref();
let onlineUsersCount = $ref();
let instances = $ref();
os.api('meta', { detail: true }).then(_meta => { os.api('meta', { detail: true }).then(_meta => {
meta = _meta; meta = _meta;
}); });
os.api('stats').then(_stats => { os.apiGet('federation/instances', {
stats = _stats;
});
os.api('get-online-users-count').then(res => {
onlineUsersCount = res.count;
});
os.api('hashtags/list', {
sort: '+mentionedLocalUsers',
limit: 8,
}).then(_tags => {
tags = _tags;
});
os.api('federation/instances', {
sort: '+pubSub', sort: '+pubSub',
limit: 20, limit: 20,
}).then(_instances => { }).then(_instances => {
@ -147,8 +130,9 @@ function showMenu(ev) {
bottom: 0; bottom: 0;
right: 64px; right: 64px;
margin: auto; margin: auto;
padding: 128px 0;
width: 500px; width: 500px;
height: calc(100% - 128px); height: calc(100% - 256px);
overflow: hidden; overflow: hidden;
-webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 128px, rgba(0,0,0,1) calc(100% - 128px), rgba(0,0,0,0) 100%); -webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 128px, rgba(0,0,0,1) calc(100% - 128px), rgba(0,0,0,0) 100%);
mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 128px, rgba(0,0,0,1) calc(100% - 128px), rgba(0,0,0,0) 100%); mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 128px, rgba(0,0,0,1) calc(100% - 128px), rgba(0,0,0,0) 100%);

View File

@ -1,14 +1,14 @@
<template> <template>
<div class="civpbkhh"> <div :class="$style.root">
<div ref="scroll" class="scrollbox" v-bind:class="{ scroll: isScrolling }"> <div ref="scrollEl" :class="[$style.scrollbox, { [$style.scroll]: isScrolling }]">
<div v-for="note in notes" class="note"> <div v-for="note in notes" :key="note.id" :class="$style.note">
<div class="content _panel"> <div class="_panel" :class="$style.content">
<div class="body"> <div :class="$style.body">
<MkA v-if="note.replyId" class="reply" :to="`/notes/${note.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA> <MkA v-if="note.replyId" class="reply" :to="`/notes/${note.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA>
<Mfm v-if="note.text" :text="note.text" :author="note.user" :i="$i" /> <Mfm v-if="note.text" :text="note.text" :author="note.user" :i="$i" />
<MkA v-if="note.renoteId" class="rp" :to="`/notes/${note.renoteId}`">RN: ...</MkA> <MkA v-if="note.renoteId" class="rp" :to="`/notes/${note.renoteId}`">RN: ...</MkA>
</div> </div>
<div v-if="note.files.length > 0" class="richcontent"> <div v-if="note.files.length > 0" :class="$style.richcontent">
<MkMediaList :media-list="note.files" /> <MkMediaList :media-list="note.files" />
</div> </div>
<div v-if="note.poll"> <div v-if="note.poll">
@ -21,42 +21,34 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue';
import MkReactionsViewer from '@/components/MkReactionsViewer.vue'; import MkReactionsViewer from '@/components/MkReactionsViewer.vue';
import MkMediaList from '@/components/MkMediaList.vue'; import MkMediaList from '@/components/MkMediaList.vue';
import MkPoll from '@/components/MkPoll.vue'; import MkPoll from '@/components/MkPoll.vue';
import * as os from '@/os'; import * as os from '@/os';
import { Note } from 'misskey-js/built/entities';
import { onUpdated } from 'vue';
import { getScrollContainer } from '@/scripts/scroll';
export default defineComponent({ let notes = $ref<Note[]>([]);
components: { let isScrolling = $ref(false);
MkReactionsViewer, let scrollEl = $ref<HTMLElement>();
MkMediaList,
MkPoll,
},
data() { os.apiGet('notes/featured').then(_notes => {
return { notes = _notes;
notes: [],
isScrolling: false,
};
},
created() {
os.api('notes/featured').then(notes => {
this.notes = notes;
}); });
},
updated() { onUpdated(() => {
if (this.$refs.scroll.clientHeight > window.innerHeight) { if (!scrollEl) return;
this.isScrolling = true; const container = getScrollContainer(scrollEl);
const containerHeight = container ? container.clientHeight : window.innerHeight;
if (scrollEl.offsetHeight > containerHeight) {
isScrolling = true;
} }
},
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" module>
@keyframes scroll { @keyframes scroll {
0% { 0% {
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
@ -72,28 +64,28 @@ export default defineComponent({
} }
} }
.civpbkhh { .root {
text-align: right; text-align: right;
}
> .scrollbox { .scrollbox {
&.scroll { &.scroll {
animation: scroll 45s linear infinite; animation: scroll 45s linear infinite;
} }
}
> .note { .note {
margin: 16px 0 16px auto; margin: 16px 0 16px auto;
}
> .content { .content {
padding: 16px; padding: 16px;
margin: 0 0 0 auto; margin: 0 0 0 auto;
max-width: max-content; max-width: max-content;
border-radius: 16px; border-radius: 16px;
}
> .richcontent { .richcontent {
min-width: 250px; min-width: 250px;
} }
}
}
}
}
</style> </style>