MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-05-03 21:36:06 +02:00
Code Issues Packages Projects Releases Wiki Activity

reduce favorite tab memory usage

Browse Source
This commit is contained in:
pa
2025-10-25 22:13:35 +09:00
committed by Natsumi
parent 9963275cd5
commit d4941de396
10 changed files with 232 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/Favorites/components/FavoritesAvatarItem.vue
+17 -7
View File
@@ -10,7 +10,7 @@
<span class="extra" v-text="localFavFakeRef.authorName"></span>
</div>
<div class="editing">
<el-dropdown trigger="hover" size="small" style="margin-left: 5px">
<el-dropdown trigger="hover" size="small" style="margin-left: 5px" :persistent="false">
<div>
<el-button type="default" :icon="Back" size="small" circle></el-button>
</div>
@@ -40,19 +40,22 @@
<el-tooltip
v-if="favorite.deleted"
placement="left"
:content="t('view.favorite.unavailable_tooltip')">
:content="t('view.favorite.unavailable_tooltip')"
:teleported="false">
<el-icon><Warning /></el-icon>
</el-tooltip>
<el-tooltip
v-if="favorite.ref.releaseStatus === 'private'"
placement="left"
:content="t('view.favorite.private')">
:content="t('view.favorite.private')"
:teleported="false">
<el-icon><Warning /></el-icon>
</el-tooltip>
<el-tooltip
v-if="favorite.ref.releaseStatus !== 'private' && !favorite.deleted"
placement="left"
:content="t('view.favorite.select_avatar_tooltip')">
:content="t('view.favorite.select_avatar_tooltip')"
:teleported="false">
<el-button
:disabled="currentUser.currentAvatar === favorite.id"
size="small"
@@ -61,7 +64,10 @@
style="margin-left: 5px"
@click.stop="selectAvatarWithConfirmation(favorite.id)"></el-button>
</el-tooltip>
<el-tooltip placement="right" :content="t('view.favorite.unfavorite_tooltip')">
<el-tooltip
placement="right"
:content="t('view.favorite.unfavorite_tooltip')"
:teleported="false">
<el-button
v-if="shiftHeld"
size="small"
@@ -80,7 +86,10 @@
</el-tooltip>
</template>
<template v-else>
<el-tooltip placement="left" :content="t('view.favorite.select_avatar_tooltip')">
<el-tooltip
placement="left"
:content="t('view.favorite.select_avatar_tooltip')"
:teleported="false">
<el-button
:disabled="currentUser.currentAvatar === favorite.id"
size="small"
@@ -93,7 +102,8 @@
<el-tooltip
v-if="isLocalFavorite"
placement="right"
:content="t('view.favorite.unfavorite_tooltip')">
:content="t('view.favorite.unfavorite_tooltip')"
:teleported="false">
<el-button
v-if="shiftHeld"
size="small"
src/views/Favorites/components/FavoritesAvatarLocalHistoryItem.vue
+3 -3
View File
@@ -8,7 +8,7 @@
<span class="name" v-text="favorite.name"></span>
<span class="extra" v-text="favorite.authorName"></span>
</div>
<el-tooltip placement="left" :content="t('view.favorite.select_avatar_tooltip')">
<el-tooltip placement="left" :content="t('view.favorite.select_avatar_tooltip')" :teleported="false">
<el-button
:disabled="currentUser.currentAvatar === favorite.id"
size="small"
@@ -18,7 +18,7 @@
@click.stop="selectAvatarWithConfirmation(favorite.id)"></el-button>
</el-tooltip>
<template v-if="cachedFavoritesByObjectId.has(favorite.id)">
<el-tooltip placement="right" content="Favorite">
<el-tooltip placement="right" content="Favorite" :teleported="false">
<el-button
type="default"
:icon="Star"
@@ -29,7 +29,7 @@
</el-tooltip>
</template>
<template v-else>
<el-tooltip placement="right" content="Favorite">
<el-tooltip placement="right" content="Favorite" :teleported="false">
<el-button
type="default"
:icon="StarFilled"
src/views/Favorites/components/FavoritesAvatarTab.vue
+88 -19
View File
@@ -65,7 +65,7 @@
<span style="color: #909399; font-size: 12px; margin-left: 10px">
{{ group.count }}/{{ group.capacity }}
</span>
<el-tooltip placement="top" :content="t('view.favorite.rename_tooltip')">
<el-tooltip placement="top" :content="t('view.favorite.rename_tooltip')" :teleported="false">
<el-button
size="small"
:icon="Edit"
@@ -73,7 +73,7 @@
style="margin-left: 10px"
@click.stop="changeFavoriteGroupName(group)" />
</el-tooltip>
<el-tooltip placement="right" :content="t('view.favorite.clear_tooltip')">
<el-tooltip placement="right" :content="t('view.favorite.clear_tooltip')" :teleported="false">
<el-button
size="small"
:icon="Delete"
@@ -115,7 +115,7 @@
<span style="color: #909399; font-size: 12px; margin-left: 10px"
>{{ avatarHistoryArray.length }}/100</span
>
<el-tooltip placement="right" content="Clear">
<el-tooltip placement="right" content="Clear" :teleported="false">
<el-button
size="small"
:icon="Delete"
@@ -157,7 +157,7 @@
@click="refreshLocalAvatarFavorites">
{{ t('view.favorite.avatars.refresh') }}
</el-button>
<el-button v-else size="small" style="margin-left: 5px" @click="refreshingLocalFavorites = false">
<el-button v-else size="small" style="margin-left: 5px" @click="cancelLocalAvatarRefresh">
<el-icon class="is-loading"><Loading /></el-icon>
<span>{{ t('view.favorite.avatars.cancel_refresh') }}</span>
</el-button>
@@ -167,7 +167,7 @@
<span :style="{ color: '#909399', fontSize: '12px', marginLeft: '10px' }">{{
getLocalAvatarFavoriteGroupLength(group)
}}</span>
<el-tooltip placement="top" :content="t('view.favorite.rename_tooltip')">
<el-tooltip placement="top" :content="t('view.favorite.rename_tooltip')" :teleported="false">
<el-button
size="small"
:icon="Edit"
@@ -175,7 +175,7 @@
:style="{ marginLeft: '5px' }"
@click.stop="promptLocalAvatarFavoriteGroupRename(group)"></el-button>
</el-tooltip>
<el-tooltip placement="right" :content="t('view.favorite.delete_tooltip')">
<el-tooltip placement="right" :content="t('view.favorite.delete_tooltip')" :teleported="false">
<el-button
size="small"
:icon="Delete"
@@ -219,26 +219,24 @@
<script setup>
import { Delete, Edit, Loading } from '@element-plus/icons-vue';
import { computed, ref } from 'vue';
import { computed, onBeforeUnmount, ref } from 'vue';
import { ElMessageBox } from 'element-plus';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';
import { useAppearanceSettingsStore, useAvatarStore, useFavoriteStore, useUserStore } from '../../../stores';
import { favoriteRequest } from '../../../api';
import { avatarRequest, favoriteRequest } from '../../../api';
import AvatarExportDialog from '../dialogs/AvatarExportDialog.vue';
import FavoritesAvatarItem from './FavoritesAvatarItem.vue';
import FavoritesAvatarLocalHistoryItem from './FavoritesAvatarLocalHistoryItem.vue';
import * as workerTimers from 'worker-timers';
defineProps({
editFavoritesMode: {
type: Boolean,
default: false
},
refreshingLocalFavorites: {
type: Boolean,
default: false
}
});
@@ -246,8 +244,13 @@
const { sortFavorites } = storeToRefs(useAppearanceSettingsStore());
const { setSortFavorites } = useAppearanceSettingsStore();
const { favoriteAvatars, favoriteAvatarGroups, localAvatarFavorites, localAvatarFavoriteGroups } =
storeToRefs(useFavoriteStore());
const {
favoriteAvatars,
favoriteAvatarGroups,
localAvatarFavorites,
localAvatarFavoriteGroups,
localAvatarFavoritesList
} = storeToRefs(useFavoriteStore());
const {
showAvatarImportDialog,
getLocalAvatarFavoriteGroupLength,
@@ -256,13 +259,16 @@
newLocalAvatarFavoriteGroup
} = useFavoriteStore();
const { avatarHistoryArray } = storeToRefs(useAvatarStore());
const { promptClearAvatarHistory, showAvatarDialog } = useAvatarStore();
const { promptClearAvatarHistory, showAvatarDialog, applyAvatar } = useAvatarStore();
const { isLocalUserVrcPlusSupporter } = storeToRefs(useUserStore());
const { t } = useI18n();
const avatarExportDialogVisible = ref(false);
const avatarFavoriteSearch = ref('');
const avatarFavoriteSearchResults = ref([]);
const refreshingLocalFavorites = ref(false);
const worker = ref(null);
const refreshCancelToken = ref(null);
const sortFav = computed({
get() {
@@ -384,10 +390,6 @@
.catch(() => {});
}
function refreshLocalAvatarFavorites() {
emit('refresh-local-avatar-favorites');
}
function promptLocalAvatarFavoriteGroupRename(group) {
ElMessageBox.prompt(
t('prompt.local_favorite_group_rename.description'),
@@ -422,6 +424,73 @@
})
.catch(() => {});
}
async function refreshLocalAvatarFavorites() {
if (refreshingLocalFavorites.value) {
return;
}
refreshingLocalFavorites.value = true;
const token = {
cancelled: false,
resolve: null
};
refreshCancelToken.value = token;
try {
for (const avatarId of localAvatarFavoritesList.value) {
if (token.cancelled) {
break;
}
try {
const args = await avatarRequest.getAvatar({
avatarId
});
applyAvatar(args.json);
} catch (err) {
console.error(err);
}
if (token.cancelled) {
break;
}
await new Promise((resolve) => {
token.resolve = resolve;
worker.value = workerTimers.setTimeout(() => {
worker.value = null;
resolve();
}, 1000);
});
}
} finally {
if (worker.value) {
workerTimers.clearTimeout(worker.value);
worker.value = null;
}
if (refreshCancelToken.value === token) {
refreshCancelToken.value = null;
}
refreshingLocalFavorites.value = false;
}
}
function cancelLocalAvatarRefresh() {
if (!refreshingLocalFavorites.value) {
return;
}
if (refreshCancelToken.value) {
refreshCancelToken.value.cancelled = true;
if (typeof refreshCancelToken.value.resolve === 'function') {
refreshCancelToken.value.resolve();
}
}
if (worker.value) {
workerTimers.clearTimeout(worker.value);
worker.value = null;
}
refreshingLocalFavorites.value = false;
}
onBeforeUnmount(() => {
cancelLocalAvatarRefresh();
});
</script>
<style scoped>
src/views/Favorites/components/FavoritesFriendItem.vue
+2 -2
View File
@@ -19,7 +19,7 @@
<span v-else v-text="favorite.ref.statusDescription"></span>
</div>
<div class="editing">
<el-dropdown trigger="hover" size="small" style="margin-left: 5px">
<el-dropdown trigger="hover" size="small" style="margin-left: 5px" :persistent="false">
<div>
<el-button type="default" :icon="Back" size="small" circle></el-button>
</div>
@@ -45,7 +45,7 @@
</el-button>
</div>
<div class="default">
<el-tooltip placement="right" :content="t('view.favorite.unfavorite_tooltip')">
<el-tooltip placement="right" :content="t('view.favorite.unfavorite_tooltip')" :teleported="false">
<el-button
v-if="shiftHeld"
size="small"
src/views/Favorites/components/FavoritesFriendTab.vue
+2 -2
View File
@@ -29,7 +29,7 @@
<span style="color: #909399; font-size: 12px; margin-left: 10px"
>{{ group.count }}/{{ group.capacity }}</span
>
<el-tooltip placement="top" :content="t('view.favorite.rename_tooltip')">
<el-tooltip placement="top" :content="t('view.favorite.rename_tooltip')" :teleported="false">
<el-button
size="small"
:icon="Edit"
@@ -37,7 +37,7 @@
style="margin-left: 10px"
@click.stop="changeFavoriteGroupName(group)"></el-button>
</el-tooltip>
<el-tooltip placement="right" :content="t('view.favorite.clear_tooltip')">
<el-tooltip placement="right" :content="t('view.favorite.clear_tooltip')" :teleported="false">
<el-button
size="small"
:icon="Delete"
src/views/Favorites/components/FavoritesWorldItem.vue
+9 -6
View File
@@ -13,7 +13,7 @@
<span v-else class="extra">{{ props.favorite.ref.authorName }}</span>
</div>
<div class="editing">
<el-dropdown trigger="hover" size="small" style="margin-left: 5px">
<el-dropdown trigger="hover" size="small" style="margin-left: 5px" :persistent="false">
<div>
<el-button type="default" :icon="Back" size="small" circle></el-button>
</div>
@@ -42,16 +42,18 @@
<el-tooltip
v-if="favorite.deleted"
placement="left"
:content="t('view.favorite.unavailable_tooltip')">
:content="t('view.favorite.unavailable_tooltip')"
:teleported="false">
<el-icon><Warning /></el-icon>
</el-tooltip>
<el-tooltip
v-if="favorite.ref.releaseStatus === 'private'"
placement="left"
:content="t('view.favorite.private')">
:content="t('view.favorite.private')"
:teleported="false">
<el-icon><Warning /></el-icon>
</el-tooltip>
<el-tooltip placement="left">
<el-tooltip placement="left" :teleported="false">
<template #content>
{{
canOpenInstanceInGame()
@@ -66,7 +68,7 @@
@click.stop="newInstanceSelfInvite(favorite.id)"
circle></el-button>
</el-tooltip>
<el-tooltip placement="right" :content="t('view.favorite.unfavorite_tooltip')">
<el-tooltip placement="right" :content="t('view.favorite.unfavorite_tooltip')" :teleported="false">
<el-button
v-if="shiftHeld"
size="small"
@@ -92,7 +94,8 @@
<el-tooltip
v-if="favorite.deleted"
placement="left"
:content="t('view.favorite.unavailable_tooltip')">
:content="t('view.favorite.unavailable_tooltip')"
:teleported="false">
<el-icon><Warning /></el-icon>
</el-tooltip>
<el-button
src/views/Favorites/components/FavoritesWorldLocalItem.vue
+2 -2
View File
@@ -13,7 +13,7 @@
<span v-else class="extra">{{ props.favorite.authorName }}</span>
</div>
<div class="editing">
<el-dropdown trigger="hover" size="small" style="margin-left: 5px">
<el-dropdown trigger="hover" size="small" style="margin-left: 5px" :persistent="false">
<div>
<el-button type="default" :icon="Back" size="small" circle></el-button>
</div>
@@ -51,7 +51,7 @@
circle></el-button>
</el-tooltip>
</div>
<el-tooltip placement="right" :content="t('view.favorite.unfavorite_tooltip')">
<el-tooltip placement="right" :content="t('view.favorite.unfavorite_tooltip')" :teleported="false">
<el-button
v-if="shiftHeld"
size="small"
src/views/Favorites/components/FavoritesWorldTab.vue
+89 -18
View File
@@ -71,8 +71,11 @@
>
<span style="color: #909399; font-size: 12px; margin-left: 10px"
>{{ group.count }}/{{ group.capacity }}</span
><el-tooltip placement="top" :content="t('view.favorite.visibility_tooltip')">
<el-dropdown trigger="click" size="small" style="margin-left: 10px">
><el-tooltip
placement="top"
:content="t('view.favorite.visibility_tooltip')"
:teleported="false">
<el-dropdown trigger="click" size="small" style="margin-left: 10px" :persistent="false">
<el-button type="default" :icon="View" size="small" circle @click.stop />
<template #dropdown>
<el-dropdown-menu>
@@ -90,7 +93,7 @@
</template>
</el-dropdown>
</el-tooltip>
<el-tooltip placement="top" :content="t('view.favorite.rename_tooltip')">
<el-tooltip placement="top" :content="t('view.favorite.rename_tooltip')" :teleported="false">
<el-button
size="small"
:icon="Edit"
@@ -98,7 +101,7 @@
style="margin-left: 5px"
@click.stop="changeFavoriteGroupName(group)" />
</el-tooltip>
<el-tooltip placement="right" :content="t('view.favorite.clear_tooltip')">
<el-tooltip placement="right" :content="t('view.favorite.clear_tooltip')" :teleported="false">
<el-button
size="small"
:icon="Delete"
@@ -146,10 +149,10 @@
v-if="!refreshingLocalFavorites"
size="small"
style="margin-left: 5px"
@click="refreshLocalWorldFavorite"
@click="refreshLocalWorldFavorites"
>{{ t('view.favorite.worlds.refresh') }}</el-button
>
<el-button v-else size="small" style="margin-left: 5px" @click="refreshingLocalFavorites = false">
<el-button v-else size="small" style="margin-left: 5px" @click="cancelLocalWorldRefresh">
<el-icon style="margin-right: 5px"><Loading /></el-icon>
<span>{{ t('view.favorite.worlds.cancel_refresh') }}</span>
</el-button>
@@ -160,7 +163,7 @@
<span style="color: #909399; font-size: 12px; margin-left: 10px">{{
getLocalWorldFavoriteGroupLength(group)
}}</span>
<el-tooltip placement="top" :content="t('view.favorite.rename_tooltip')">
<el-tooltip placement="top" :content="t('view.favorite.rename_tooltip')" :teleported="false">
<el-button
size="small"
:icon="Edit"
@@ -168,7 +171,7 @@
style="margin-left: 10px"
@click.stop="promptLocalWorldFavoriteGroupRename(group)" />
</el-tooltip>
<el-tooltip placement="right" :content="t('view.favorite.delete_tooltip')">
<el-tooltip placement="right" :content="t('view.favorite.delete_tooltip')" :teleported="false">
<el-button
size="small"
:icon="Delete"
@@ -212,26 +215,24 @@
<script setup>
import { Delete, Edit, Loading, View } from '@element-plus/icons-vue';
import { computed, onBeforeUnmount, ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { computed, ref } from 'vue';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';
import { useAppearanceSettingsStore, useFavoriteStore, useWorldStore } from '../../../stores';
import { favoriteRequest } from '../../../api';
import { favoriteRequest, worldRequest } from '../../../api';
import FavoritesWorldItem from './FavoritesWorldItem.vue';
import FavoritesWorldLocalItem from './FavoritesWorldLocalItem.vue';
import WorldExportDialog from '../dialogs/WorldExportDialog.vue';
import * as workerTimers from 'worker-timers';
defineProps({
editFavoritesMode: {
type: Boolean,
default: false
},
refreshingLocalFavorites: {
type: Boolean,
default: false
}
});
@@ -244,8 +245,13 @@
const { t } = useI18n();
const { sortFavorites } = storeToRefs(useAppearanceSettingsStore());
const { setSortFavorites } = useAppearanceSettingsStore();
const { favoriteWorlds, favoriteWorldGroups, localWorldFavorites, localWorldFavoriteGroups } =
storeToRefs(useFavoriteStore());
const {
favoriteWorlds,
favoriteWorldGroups,
localWorldFavorites,
localWorldFavoriteGroups,
localWorldFavoritesList
} = storeToRefs(useFavoriteStore());
const {
showWorldImportDialog,
getLocalWorldFavoriteGroupLength,
@@ -263,6 +269,9 @@
const worldFavoriteSearchResults = ref([]);
const sliceLocalWorldFavoritesLoadMoreNumber = ref(60);
const sliceWorldFavoritesLoadMoreNumber = ref(60);
const refreshingLocalFavorites = ref(false);
const worker = ref(null);
const refreshCancelToken = ref(null);
const groupedByGroupKeyFavoriteWorlds = computed(() => {
const groupedByGroupKeyFavoriteWorlds = {};
@@ -475,9 +484,71 @@
emit('change-favorite-group-name', group);
}
function refreshLocalWorldFavorite() {
emit('refresh-local-world-favorite');
async function refreshLocalWorldFavorites() {
if (refreshingLocalFavorites.value) {
return;
}
refreshingLocalFavorites.value = true;
const token = {
cancelled: false,
resolve: null
};
refreshCancelToken.value = token;
try {
for (const worldId of localWorldFavoritesList.value) {
if (token.cancelled) {
break;
}
try {
await worldRequest.getWorld({
worldId
});
} catch (err) {
console.error(err);
}
if (token.cancelled) {
break;
}
await new Promise((resolve) => {
token.resolve = resolve;
worker.value = workerTimers.setTimeout(() => {
worker.value = null;
resolve();
}, 1000);
});
}
} finally {
if (worker.value) {
workerTimers.clearTimeout(worker.value);
worker.value = null;
}
if (refreshCancelToken.value === token) {
refreshCancelToken.value = null;
}
refreshingLocalFavorites.value = false;
}
}
function cancelLocalWorldRefresh() {
if (!refreshingLocalFavorites.value) {
return;
}
if (refreshCancelToken.value) {
refreshCancelToken.value.cancelled = true;
if (typeof refreshCancelToken.value.resolve === 'function') {
refreshCancelToken.value.resolve();
}
}
if (worker.value) {
workerTimers.clearTimeout(worker.value);
worker.value = null;
}
refreshingLocalFavorites.value = false;
}
onBeforeUnmount(() => {
cancelLocalWorldRefresh();
});
</script>
<style scoped>