perf(client): ウェルカムページを最適化 (#9960)
* perf(client): ウェルカムページの最適化 * remove max
This commit is contained in:
tamaina
GitHub
parent
dd52be3a01
commit
e8c5307f66
4 changed files with 60 additions and 81 deletions
|
|
@ -10,6 +10,8 @@ export const meta = {
|
|||
tags: ['federation'],
|
||||
|
||||
requireCredential: false,
|
||||
allowGet: true,
|
||||
cacheSec: 3600,
|
||||
|
||||
res: {
|
||||
type: 'array',
|
||||
|
|
|
|||
|
|
@ -9,6 +9,8 @@ export const meta = {
|
|||
tags: ['notes'],
|
||||
|
||||
requireCredential: false,
|
||||
allowGet: true,
|
||||
cacheSec: 3600,
|
||||
|
||||
res: {
|
||||
type: 'array',
|
||||
|
|
@ -41,7 +43,6 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
|
|||
private queryService: QueryService,
|
||||
) {
|
||||
super(meta, paramDef, async (ps, me) => {
|
||||
const max = 30;
|
||||
const day = 1000 * 60 * 60 * 24 * 3; // 3日前まで
|
||||
|
||||
const query = this.notesRepository.createQueryBuilder('note')
|
||||
|
|
@ -67,7 +68,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
|
|||
|
||||
let notes = await query
|
||||
.orderBy('note.score', 'DESC')
|
||||
.take(max)
|
||||
.take(ps.limit)
|
||||
.getMany();
|
||||
|
||||
notes.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="instances" class="federation">
|
||||
<div v-if="instances && instances.length > 0" class="federation">
|
||||
<MarqueeText :duration="40">
|
||||
<MkA v-for="instance in instances" :key="instance.id" :class="$style.federationInstance" :to="`/instance-info/${instance.host}`" behavior="window">
|
||||
<!--<MkInstanceCardMini :instance="instance"/>-->
|
||||
|
|
@ -56,33 +56,16 @@ import MkFeaturedPhotos from '@/components/MkFeaturedPhotos.vue';
|
|||
import { instanceName } from '@/config';
|
||||
import * as os from '@/os';
|
||||
import { i18n } from '@/i18n';
|
||||
import { Instance } from 'misskey-js/built/entities';
|
||||
|
||||
let meta = $ref();
|
||||
let stats = $ref();
|
||||
let tags = $ref();
|
||||
let onlineUsersCount = $ref();
|
||||
let instances = $ref();
|
||||
let meta = $ref<Instance>();
|
||||
let instances = $ref<any[]>();
|
||||
|
||||
os.api('meta', { detail: true }).then(_meta => {
|
||||
meta = _meta;
|
||||
});
|
||||
|
||||
os.api('stats').then(_stats => {
|
||||
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', {
|
||||
os.apiGet('federation/instances', {
|
||||
sort: '+pubSub',
|
||||
limit: 20,
|
||||
}).then(_instances => {
|
||||
|
|
@ -147,8 +130,9 @@ function showMenu(ev) {
|
|||
bottom: 0;
|
||||
right: 64px;
|
||||
margin: auto;
|
||||
padding: 128px 0;
|
||||
width: 500px;
|
||||
height: calc(100% - 128px);
|
||||
height: calc(100% - 256px);
|
||||
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%);
|
||||
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,62 +1,54 @@
|
|||
<template>
|
||||
<div class="civpbkhh">
|
||||
<div ref="scroll" class="scrollbox" v-bind:class="{ scroll: isScrolling }">
|
||||
<div v-for="note in notes" class="note">
|
||||
<div class="content _panel">
|
||||
<div class="body">
|
||||
<div :class="$style.root">
|
||||
<div ref="scrollEl" :class="[$style.scrollbox, { [$style.scroll]: isScrolling }]">
|
||||
<div v-for="note in notes" :key="note.id" :class="$style.note">
|
||||
<div class="_panel" :class="$style.content">
|
||||
<div :class="$style.body">
|
||||
<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>
|
||||
</div>
|
||||
<div v-if="note.files.length > 0" class="richcontent">
|
||||
<MkMediaList :media-list="note.files"/>
|
||||
<div v-if="note.files.length > 0" :class="$style.richcontent">
|
||||
<MkMediaList :media-list="note.files" />
|
||||
</div>
|
||||
<div v-if="note.poll">
|
||||
<MkPoll :note="note" :readOnly="true"/>
|
||||
<MkPoll :note="note" :readOnly="true" />
|
||||
</div>
|
||||
</div>
|
||||
<MkReactionsViewer ref="reactionsViewer" :note="note"/>
|
||||
<MkReactionsViewer ref="reactionsViewer" :note="note" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
<script lang="ts" setup>
|
||||
import MkReactionsViewer from '@/components/MkReactionsViewer.vue';
|
||||
import MkMediaList from '@/components/MkMediaList.vue';
|
||||
import MkPoll from '@/components/MkPoll.vue';
|
||||
import * as os from '@/os';
|
||||
import { Note } from 'misskey-js/built/entities';
|
||||
import { onUpdated } from 'vue';
|
||||
import { getScrollContainer } from '@/scripts/scroll';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
MkReactionsViewer,
|
||||
MkMediaList,
|
||||
MkPoll,
|
||||
},
|
||||
let notes = $ref<Note[]>([]);
|
||||
let isScrolling = $ref(false);
|
||||
let scrollEl = $ref<HTMLElement>();
|
||||
|
||||
data() {
|
||||
return {
|
||||
notes: [],
|
||||
isScrolling: false,
|
||||
};
|
||||
},
|
||||
os.apiGet('notes/featured').then(_notes => {
|
||||
notes = _notes;
|
||||
});
|
||||
|
||||
created() {
|
||||
os.api('notes/featured').then(notes => {
|
||||
this.notes = notes;
|
||||
});
|
||||
},
|
||||
|
||||
updated() {
|
||||
if (this.$refs.scroll.clientHeight > window.innerHeight) {
|
||||
this.isScrolling = true;
|
||||
}
|
||||
},
|
||||
onUpdated(() => {
|
||||
if (!scrollEl) return;
|
||||
const container = getScrollContainer(scrollEl);
|
||||
const containerHeight = container ? container.clientHeight : window.innerHeight;
|
||||
if (scrollEl.offsetHeight > containerHeight) {
|
||||
isScrolling = true;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
<style lang="scss" module>
|
||||
@keyframes scroll {
|
||||
0% {
|
||||
transform: translate3d(0, 0, 0);
|
||||
|
|
@ -72,28 +64,28 @@ export default defineComponent({
|
|||
}
|
||||
}
|
||||
|
||||
.civpbkhh {
|
||||
.root {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
> .scrollbox {
|
||||
&.scroll {
|
||||
animation: scroll 45s linear infinite;
|
||||
}
|
||||
|
||||
> .note {
|
||||
margin: 16px 0 16px auto;
|
||||
|
||||
> .content {
|
||||
padding: 16px;
|
||||
margin: 0 0 0 auto;
|
||||
max-width: max-content;
|
||||
border-radius: 16px;
|
||||
|
||||
> .richcontent {
|
||||
min-width: 250px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.scrollbox {
|
||||
&.scroll {
|
||||
animation: scroll 45s linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
.note {
|
||||
margin: 16px 0 16px auto;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 16px;
|
||||
margin: 0 0 0 auto;
|
||||
max-width: max-content;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.richcontent {
|
||||
min-width: 250px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue