optimize favorite worlds tab loading speed

This commit is contained in:
pa
2025-10-21 23:13:04 +09:00
committed by Natsumi
parent c4500e5cc1
commit 4dc8141d83
3 changed files with 211 additions and 52 deletions
@@ -1,16 +1,16 @@
<template>
<div class="fav-world-item" @click="$emit('click')">
<div class="x-friend-item">
<template v-if="isLocalFavorite ? favorite.name : favorite.ref">
<template v-if="favorite.ref">
<div class="avatar" v-once>
<img :src="smallThumbnail" loading="lazy" decoding="async" fetchpriority="low" />
</div>
<div class="detail" v-once>
<span class="name">{{ localFavFakeRef.name }}</span>
<span v-if="localFavFakeRef.occupants" class="extra">
{{ localFavFakeRef.authorName }} ({{ localFavFakeRef.occupants }})
<span class="name">{{ props.favorite.ref.name }}</span>
<span v-if="props.favorite.ref.occupants" class="extra">
{{ props.favorite.ref.authorName }} ({{ props.favorite.ref.occupants }})
</span>
<span v-else class="extra">{{ localFavFakeRef.authorName }}</span>
<span v-else class="extra">{{ props.favorite.ref.authorName }}</span>
</div>
<div class="editing">
<el-dropdown trigger="hover" size="small" style="margin-left: 5px">
@@ -24,7 +24,7 @@
<el-dropdown-menu>
<template v-for="groupAPI in favoriteWorldGroups" :key="groupAPI.name">
<el-dropdown-item
v-if="isLocalFavorite || groupAPI.name !== group.name"
v-if="groupAPI.name !== group.name"
style="display: block; margin: 10px 0"
:disabled="groupAPI.count >= groupAPI.capacity"
@click="handleDropdownItemClick(groupAPI)">
@@ -34,19 +34,19 @@
</el-dropdown-menu>
</template>
</el-dropdown>
<el-button v-if="!isLocalFavorite" type="text" size="small" @click.stop style="margin-left: 5px">
<el-button type="text" size="small" @click.stop style="margin-left: 5px">
<el-checkbox v-model="isSelected"></el-checkbox>
</el-button>
</div>
<div class="default">
<el-tooltip
v-if="!isLocalFavorite && favorite.deleted"
v-if="favorite.deleted"
placement="left"
:content="t('view.favorite.unavailable_tooltip')">
<el-icon><Warning /></el-icon>
</el-tooltip>
<el-tooltip
v-if="!isLocalFavorite && favorite.ref.releaseStatus === 'private'"
v-if="favorite.ref.releaseStatus === 'private'"
placement="left"
:content="t('view.favorite.private')">
<el-icon><Warning /></el-icon>
@@ -66,10 +66,7 @@
@click.stop="newInstanceSelfInvite(favorite.id)"
circle></el-button>
</el-tooltip>
<el-tooltip
v-if="!isLocalFavorite"
placement="right"
:content="t('view.favorite.unfavorite_tooltip')">
<el-tooltip placement="right" :content="t('view.favorite.unfavorite_tooltip')">
<el-button
v-if="shiftHeld"
size="small"
@@ -87,30 +84,13 @@
@click.stop="showFavoriteDialog('world', favorite.id)"></el-button>
</el-tooltip>
</div>
<el-tooltip v-if="isLocalFavorite" placement="right" :content="t('view.favorite.unfavorite_tooltip')">
<el-button
v-if="shiftHeld"
size="small"
:icon="Close"
circle
style="color: #f56c6c; margin-left: 5px"
@click.stop="$emit('remove-local-world-favorite', favorite.id, group)"></el-button>
<el-button
v-else
:icon="Star"
size="small"
circle
style="margin-left: 5px"
type="default"
@click.stop="showFavoriteDialog('world', favorite.id)"></el-button>
</el-tooltip>
</template>
<template v-else>
<div class="avatar"></div>
<div class="detail" v-once>
<span>{{ favorite.name || favorite.id }}</span>
<el-tooltip
v-if="!isLocalFavorite && favorite.deleted"
v-if="favorite.deleted"
placement="left"
:content="t('view.favorite.unavailable_tooltip')">
<el-icon><Warning /></el-icon>
@@ -156,21 +136,20 @@
set: (value) => emit('handle-select', value)
});
const localFavFakeRef = computed(() => (props.isLocalFavorite ? props.favorite : props.favorite.ref));
const tooltipContent = computed(() =>
t(props.isLocalFavorite ? 'view.favorite.copy_tooltip' : 'view.favorite.move_tooltip')
);
const smallThumbnail = computed(() => {
const url = localFavFakeRef.value.thumbnailImageUrl?.replace('256', '128');
return url || localFavFakeRef.value.thumbnailImageUrl;
const url = props.favorite.ref.thumbnailImageUrl?.replace('256', '128');
return url || props.favorite.ref.thumbnailImageUrl;
});
function handleDropdownItemClick(groupAPI) {
if (props.isLocalFavorite) {
addFavoriteWorld(localFavFakeRef.value, groupAPI, true);
addFavoriteWorld(props.favorite.ref, groupAPI, true);
} else {
moveFavorite(localFavFakeRef.value, groupAPI, 'world');
moveFavorite(props.favorite.ref, groupAPI, 'world');
}
}
@@ -217,5 +196,6 @@
display: inline-block;
width: 300px;
margin-right: 15px;
height: 53px;
}
</style>