perf(client): ウェルカムページを最適化 (#9960)
* perf(client): ウェルカムページの最適化 * remove max
This commit is contained in:
parent
dd52be3a01
commit
e8c5307f66
|
@ -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',
|
||||||
|
|
|
@ -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());
|
||||||
|
|
|
@ -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%);
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue