MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-04-19 14:53:50 +02:00
Code Issues Packages Projects Releases Wiki Activity

Optimize userDialog rendering performance (#1108)

Browse Source 
* Optimize userDialog render performance

* rm unnecessary v-lazy
This commit is contained in:
pa
2025-02-03 19:57:09 +09:00
committed by GitHub
parent 5f525c9e0b
commit bbbef2aece
2 changed files with 202 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files

320
src/app.js
View File

@@ -10039,7 +10039,7 @@ console.log(`isLinux: ${LINUX}`);
return; return;
} }
this.$nextTick(() => $app.adjustDialogZ(this.$refs.userDialog.$el)); this.$nextTick(() => $app.adjustDialogZ(this.$refs.userDialog.$el));
var D = this.userDialog; const D = this.userDialog;
D.id = userId; D.id = userId;
D.treeData = []; D.treeData = [];
D.memo = ''; D.memo = '';
@@ -10048,12 +10048,11 @@ console.log(`isLinux: ${LINUX}`);
this.getUserMemo(userId).then((memo) => { this.getUserMemo(userId).then((memo) => {
if (memo.userId === userId) { if (memo.userId === userId) {
D.memo = memo.memo; D.memo = memo.memo;
var ref = this.friends.get(userId); const ref = this.friends.get(userId);
if (ref) { if (ref) {
ref.memo = String(memo.memo || ''); ref.memo = String(memo.memo || '');
if (memo.memo) { if (memo.memo) {
var array = memo.memo.split('\n'); ref.$nickName = memo.memo.split('\n')[0];
ref.$nickName = array[0];
} else { } else {
ref.$nickName = ''; ref.$nickName = '';
} }
@@ -10120,172 +10119,187 @@ console.log(`isLinux: ${LINUX}`);
}) })
.then((args) => { .then((args) => {
if (args.ref.id === D.id) { if (args.ref.id === D.id) {
D.loading = false; requestAnimationFrame(() => {
D.ref = args.ref; D.ref = args.ref;
D.friend = this.friends.get(D.id); D.friend = this.friends.get(D.id);
D.isFriend = Boolean(D.friend); D.isFriend = Boolean(D.friend);
D.note = String(D.ref.note || ''); D.note = String(D.ref.note || '');
D.incomingRequest = false; D.incomingRequest = false;
D.outgoingRequest = false; D.outgoingRequest = false;
D.isBlock = false; D.isBlock = false;
D.isMute = false; D.isMute = false;
D.isInteractOff = false; D.isInteractOff = false;
D.isMuteChat = false; D.isMuteChat = false;
for (var ref of API.cachedPlayerModerations.values()) { for (const ref of API.cachedPlayerModerations.values()) {
if ( if (
ref.targetUserId === D.id && ref.targetUserId === D.id &&
ref.sourceUserId === API.currentUser.id ref.sourceUserId === API.currentUser.id
) { ) {
if (ref.type === 'block') { if (ref.type === 'block') {
D.isBlock = true; D.isBlock = true;
} else if (ref.type === 'mute') { } else if (ref.type === 'mute') {
D.isMute = true; D.isMute = true;
} else if (ref.type === 'hideAvatar') { } else if (ref.type === 'hideAvatar') {
D.isHideAvatar = true; D.isHideAvatar = true;
} else if (ref.type === 'interactOff') { } else if (ref.type === 'interactOff') {
D.isInteractOff = true; D.isInteractOff = true;
} else if (ref.type === 'muteChat') { } else if (ref.type === 'muteChat') {
D.isMuteChat = true; D.isMuteChat = true;
}
} }
} }
} D.isFavorite = API.cachedFavoritesByObjectId.has(D.id);
D.isFavorite = API.cachedFavoritesByObjectId.has(D.id); if (D.ref.friendRequestStatus === 'incoming') {
if (D.ref.friendRequestStatus === 'incoming') { D.incomingRequest = true;
D.incomingRequest = true; } else if (D.ref.friendRequestStatus === 'outgoing') {
} else if (D.ref.friendRequestStatus === 'outgoing') { D.outgoingRequest = true;
D.outgoingRequest = true;
}
this.applyUserDialogLocation(true);
if (this.$refs.userDialogTabs.currentName === '0') {
this.userDialogLastActiveTab = $t(
'dialog.user.info.header'
);
} else if (this.$refs.userDialogTabs.currentName === '1') {
this.userDialogLastActiveTab = $t(
'dialog.user.groups.header'
);
if (this.userDialogLastGroup !== userId) {
this.userDialogLastGroup = userId;
this.getUserGroups(userId);
} }
} else if (this.$refs.userDialogTabs.currentName === '2') { this.applyUserDialogLocation(true);
this.userDialogLastActiveTab = $t(
'dialog.user.worlds.header' // init last acitve tab data
); if (this.$refs.userDialogTabs.currentName === '0') {
this.setUserDialogWorlds(userId); this.userDialogLastActiveTab = $t(
if (this.userDialogLastWorld !== userId) { 'dialog.user.info.header'
this.userDialogLastWorld = userId; );
this.refreshUserDialogWorlds(); } else if (
this.$refs.userDialogTabs.currentName === '1'
) {
this.userDialogLastActiveTab = $t(
'dialog.user.groups.header'
);
if (this.userDialogLastGroup !== userId) {
this.userDialogLastGroup = userId;
this.getUserGroups(userId);
}
} else if (
this.$refs.userDialogTabs.currentName === '2'
) {
this.userDialogLastActiveTab = $t(
'dialog.user.worlds.header'
);
this.setUserDialogWorlds(userId);
if (this.userDialogLastWorld !== userId) {
this.userDialogLastWorld = userId;
this.refreshUserDialogWorlds();
}
} else if (
this.$refs.userDialogTabs.currentName === '3'
) {
this.userDialogLastActiveTab = $t(
'dialog.user.favorite_worlds.header'
);
if (this.userDialogLastFavoriteWorld !== userId) {
this.userDialogLastFavoriteWorld = userId;
this.getUserFavoriteWorlds(userId);
}
} else if (
this.$refs.userDialogTabs.currentName === '4'
) {
this.userDialogLastActiveTab = $t(
'dialog.user.avatars.header'
);
this.setUserDialogAvatars(userId);
this.userDialogLastAvatar = userId;
if (userId === API.currentUser.id) {
this.refreshUserDialogAvatars();
}
this.setUserDialogAvatarsRemote(userId);
} else if (
this.$refs.userDialogTabs.currentName === '5'
) {
this.userDialogLastActiveTab = $t(
'dialog.user.json.header'
);
this.refreshUserDialogTreeData();
} }
} else if (this.$refs.userDialogTabs.currentName === '3') { // init last acitve tab data - end
this.userDialogLastActiveTab = $t(
'dialog.user.favorite_worlds.header' if (args.cache) {
); API.getUser(args.params);
if (this.userDialogLastFavoriteWorld !== userId) {
this.userDialogLastFavoriteWorld = userId;
this.getUserFavoriteWorlds(userId);
} }
} else if (this.$refs.userDialogTabs.currentName === '4') { let inCurrentWorld = false;
this.userDialogLastActiveTab = $t( if (this.lastLocation.playerList.has(D.ref.id)) {
'dialog.user.avatars.header' inCurrentWorld = true;
);
this.setUserDialogAvatars(userId);
this.userDialogLastAvatar = userId;
if (userId === API.currentUser.id) {
this.refreshUserDialogAvatars();
} }
this.setUserDialogAvatarsRemote(userId); if (userId !== API.currentUser.id) {
} else if (this.$refs.userDialogTabs.currentName === '5') { database
this.userDialogLastActiveTab = $t( .getUserStats(D.ref, inCurrentWorld)
'dialog.user.json.header' .then((ref1) => {
); if (ref1.userId === D.id) {
this.refreshUserDialogTreeData(); D.lastSeen = ref1.lastSeen;
} D.joinCount = ref1.joinCount;
if (args.cache) { D.timeSpent = ref1.timeSpent;
API.getUser(args.params); }
} let displayNameMap =
var inCurrentWorld = false; ref1.previousDisplayNames;
if (this.lastLocation.playerList.has(D.ref.id)) { this.friendLogTable.data.forEach((ref2) => {
inCurrentWorld = true; if (ref2.userId === D.id) {
} if (ref2.type === 'DisplayName') {
if (userId !== API.currentUser.id) { displayNameMap.set(
database ref2.previousDisplayName,
.getUserStats(D.ref, inCurrentWorld) ref2.created_at
.then((ref1) => { );
if (ref1.userId === D.id) { }
D.lastSeen = ref1.lastSeen; if (!D.dateFriended) {
D.joinCount = ref1.joinCount; if (ref2.type === 'Unfriend') {
D.timeSpent = ref1.timeSpent; D.unFriended = true;
} if (!this.hideUnfriends) {
var displayNameMap = ref1.previousDisplayNames; D.dateFriended =
this.friendLogTable.data.forEach((ref2) => { ref2.created_at;
if (ref2.userId === D.id) { }
if (ref2.type === 'DisplayName') { }
displayNameMap.set( if (ref2.type === 'Friend') {
ref2.previousDisplayName, D.unFriended = false;
ref2.created_at
);
}
if (!D.dateFriended) {
if (ref2.type === 'Unfriend') {
D.unFriended = true;
if (!this.hideUnfriends) {
D.dateFriended = D.dateFriended =
ref2.created_at; ref2.created_at;
} }
} }
if (ref2.type === 'Friend') { if (
D.unFriended = false; ref2.type === 'Friend' ||
D.dateFriended = (ref2.type === 'Unfriend' &&
ref2.created_at; !this.hideUnfriends)
) {
D.dateFriendedInfo.push(ref2);
} }
} }
if ( });
ref2.type === 'Friend' || const displayNameMapSorted = new Map(
(ref2.type === 'Unfriend' && [...displayNameMap.entries()].sort(
!this.hideUnfriends) (a, b) => b[1] - a[1]
) { )
D.dateFriendedInfo.push(ref2); );
} D.previousDisplayNames = Array.from(
} displayNameMapSorted.keys()
);
}); });
var displayNameMapSorted = new Map( AppApi.GetVRChatUserModeration(
[...displayNameMap.entries()].sort( API.currentUser.id,
(a, b) => b[1] - a[1] userId
) ).then((result) => {
); D.avatarModeration = result;
D.previousDisplayNames = Array.from( if (result === 4) {
displayNameMapSorted.keys() D.isHideAvatar = true;
); } else if (result === 5) {
}); D.isShowAvatar = true;
AppApi.GetVRChatUserModeration(
API.currentUser.id,
userId
).then((result) => {
D.avatarModeration = result;
if (result === 4) {
D.isHideAvatar = true;
} else if (result === 5) {
D.isShowAvatar = true;
}
});
} else {
database
.getUserStats(D.ref, inCurrentWorld)
.then((ref1) => {
if (ref1.userId === D.id) {
D.lastSeen = ref1.lastSeen;
D.joinCount = ref1.joinCount;
D.timeSpent = ref1.timeSpent;
} }
}); });
} } else {
API.getRepresentedGroup({ userId }).then((args1) => { database
D.representedGroup = args1.json; .getUserStats(D.ref, inCurrentWorld)
return args1; .then((ref1) => {
if (ref1.userId === D.id) {
D.lastSeen = ref1.lastSeen;
D.joinCount = ref1.joinCount;
D.timeSpent = ref1.timeSpent;
}
});
}
API.getRepresentedGroup({ userId }).then((args1) => {
D.representedGroup = args1.json;
});
D.loading = false;
}); });
} }
return args;
}); });
this.showUserDialogHistory.delete(userId); this.showUserDialogHistory.delete(userId);
this.showUserDialogHistory.add(userId); this.showUserDialogHistory.add(userId);

71
src/mixins/dialogs/userDialog.pug
View File

@@ -15,17 +15,12 @@ mixin userDialog
placement='right' placement='right'
width='500px' width='500px'
trigger='click') trigger='click')
template(slot='reference')
img.x-link(
v-if='userDialog.ref.profilePicOverrideThumbnail'
v-lazy='userDialog.ref.profilePicOverrideThumbnail'
style='flex: none; height: 120px; width: 213.33px; border-radius: 12px; object-fit: cover')
img.x-link(
v-else
v-lazy='userDialog.ref.profilePicOverride'
style='flex: none; height: 120px; width: 213.33px; border-radius: 12px; object-fit: cover')
img.x-link( img.x-link(
v-lazy='userDialog.ref.profilePicOverride' slot='reference'
v-lazy='userDialog.ref.profilePicOverrideThumbnail || userDialog.ref.profilePicOverride'
style='flex: none; height: 120px; width: 213.33px; border-radius: 12px; object-fit: cover')
img.x-link(
:src='userDialog.ref.profilePicOverride'
style='height: 400px' style='height: 400px'
@click='showFullscreenImageDialog(userDialog.ref.profilePicOverride)') @click='showFullscreenImageDialog(userDialog.ref.profilePicOverride)')
el-popover(v-else placement='right' width='500px' trigger='click') el-popover(v-else placement='right' width='500px' trigger='click')
@@ -34,7 +29,7 @@ mixin userDialog
v-lazy='userDialog.ref.currentAvatarThumbnailImageUrl' v-lazy='userDialog.ref.currentAvatarThumbnailImageUrl'
style='flex: none; height: 120px; width: 160px; border-radius: 12px; object-fit: cover') style='flex: none; height: 120px; width: 160px; border-radius: 12px; object-fit: cover')
img.x-link( img.x-link(
v-lazy='userDialog.ref.currentAvatarImageUrl' :src='userDialog.ref.currentAvatarImageUrl'
style='height: 500px' style='height: 500px'
@click='showFullscreenImageDialog(userDialog.ref.currentAvatarImageUrl)') @click='showFullscreenImageDialog(userDialog.ref.currentAvatarImageUrl)')
div(style='flex: 1; display: flex; align-items: center; margin-left: 15px') div(style='flex: 1; display: flex; align-items: center; margin-left: 15px')
@@ -54,7 +49,10 @@ mixin userDialog
el-tooltip(placement='bottom') el-tooltip(placement='bottom')
template(#content) template(#content)
span {{ $t('dialog.user.previous_display_names') }} span {{ $t('dialog.user.previous_display_names') }}
div(v-for='displayName in userDialog.previousDisplayNames' placement='top') div(
v-for='displayName in userDialog.previousDisplayNames'
:key='displayName'
placement='top')
span(v-text='displayName') span(v-text='displayName')
i.el-icon-caret-bottom i.el-icon-caret-bottom
el-popover(placement='top' trigger='click') el-popover(placement='top' trigger='click')
@@ -156,7 +154,7 @@ mixin userDialog
:style='{ color: userDialog.ref.$customTagColour, "border-color": userDialog.ref.$customTagColour }' :style='{ color: userDialog.ref.$customTagColour, "border-color": userDialog.ref.$customTagColour }'
style='margin-right: 5px; margin-top: 5px') style='margin-right: 5px; margin-top: 5px')
br br
template(v-for='badge in userDialog.ref.badges') template(v-for='badge in userDialog.ref.badges' :key='badge.badgeId')
el-tooltip(placement='top') el-tooltip(placement='top')
template(#content) template(#content)
span {{ badge.badgeName }} span {{ badge.badgeName }}
@@ -164,11 +162,11 @@ mixin userDialog
el-popover(placement='right' width='300px' trigger='click') el-popover(placement='right' width='300px' trigger='click')
img.x-link.x-user-badge( img.x-link.x-user-badge(
slot='reference' slot='reference'
v-lazy='badge.badgeImageUrl' :src='badge.badgeImageUrl'
style='flex: none; height: 32px; width: 32px; border-radius: 3px; object-fit: cover; margin-top: 5px; margin-right: 5px' style='flex: none; height: 32px; width: 32px; border-radius: 3px; object-fit: cover; margin-top: 5px; margin-right: 5px'
:class='{ "x-user-badge-hidden": badge.hidden }') :class='{ "x-user-badge-hidden": badge.hidden }')
img.x-link( img.x-link(
v-lazy='badge.badgeImageUrl' :src='badge.badgeImageUrl'
style='width: 300px' style='width: 300px'
@click='showFullscreenImageDialog(badge.badgeImageUrl)') @click='showFullscreenImageDialog(badge.badgeImageUrl)')
br br
@@ -197,10 +195,10 @@ mixin userDialog
el-popover(placement='right' width='500px' trigger='click') el-popover(placement='right' width='500px' trigger='click')
img.x-link( img.x-link(
slot='reference' slot='reference'
v-lazy='userDialog.ref.userIcon' :src='userDialog.ref.userIcon'
style='flex: none; width: 120px; height: 120px; border-radius: 12px; object-fit: cover') style='flex: none; width: 120px; height: 120px; border-radius: 12px; object-fit: cover')
img.x-link( img.x-link(
v-lazy='userDialog.ref.userIcon' :src='userDialog.ref.userIcon'
style='height: 500px' style='height: 500px'
@click='showFullscreenImageDialog(userDialog.ref.userIcon)') @click='showFullscreenImageDialog(userDialog.ref.userIcon)')
div(style='flex: none') div(style='flex: none')
@@ -326,7 +324,7 @@ mixin userDialog
divided divided
style='color: #f56c6c') {{ $t('dialog.user.actions.unfriend') }} style='color: #f56c6c') {{ $t('dialog.user.actions.unfriend') }}
el-tabs(ref='userDialogTabs' @tab-click='userDialogTabClick') el-tabs(ref='userDialogTabs' @tab-click='userDialogTabClick')
el-tab-pane(:label='$t("dialog.user.info.header")') el-tab-pane(:label='$t("dialog.user.info.header")' lazy)
template(v-if='isFriendOnline(userDialog.friend) || API.currentUser.id === userDialog.id') template(v-if='isFriendOnline(userDialog.friend) || API.currentUser.id === userDialog.id')
div( div(
v-if='userDialog.ref.location' v-if='userDialog.ref.location'
@@ -374,7 +372,7 @@ mixin userDialog
@click='showUserDialog(userDialog.$location.userId)') @click='showUserDialog(userDialog.$location.userId)')
template(v-if='userDialog.$location.user') template(v-if='userDialog.$location.user')
.avatar(:class='userStatusClass(userDialog.$location.user)') .avatar(:class='userStatusClass(userDialog.$location.user)')
img(v-lazy='userImage(userDialog.$location.user)') img(:src='userImage(userDialog.$location.user)')
.detail .detail
span.name( span.name(
v-text='userDialog.$location.user.displayName' v-text='userDialog.$location.user.displayName'
@@ -386,7 +384,7 @@ mixin userDialog
:key='user.id' :key='user.id'
@click='showUserDialog(user.id)') @click='showUserDialog(user.id)')
.avatar(:class='userStatusClass(user)') .avatar(:class='userStatusClass(user)')
img(v-lazy='userImage(user)') img(:src='userImage(user)')
.detail .detail
span.name(v-text='user.displayName' :style='{ color: user.$userColour }') span.name(v-text='user.displayName' :style='{ color: user.$userColour }')
span.extra(v-if='user.location === "traveling"') span.extra(v-if='user.location === "traveling"')
@@ -452,10 +450,10 @@ mixin userDialog
el-popover(placement='right' width='500px' trigger='click') el-popover(placement='right' width='500px' trigger='click')
img.x-link( img.x-link(
slot='reference' slot='reference'
v-lazy='userDialog.representedGroup.iconUrl' :src='userDialog.representedGroup.iconUrl'
style='flex: none; width: 60px; height: 60px; border-radius: 4px; object-fit: cover') style='flex: none; width: 60px; height: 60px; border-radius: 4px; object-fit: cover')
img.x-link( img.x-link(
v-lazy='userDialog.representedGroup.iconUrl' :src='userDialog.representedGroup.iconUrl'
style='height: 500px' style='height: 500px'
@click='showFullscreenImageDialog(userDialog.representedGroup.iconUrl)') @click='showFullscreenImageDialog(userDialog.representedGroup.iconUrl)')
span( span(
@@ -480,10 +478,7 @@ mixin userDialog
@click='showBioDialog' @click='showBioDialog'
style='margin-left: 5px') style='margin-left: 5px')
div(style='margin-top: 5px') div(style='margin-top: 5px')
el-tooltip( el-tooltip(v-for='(link, index) in userDialog.ref.bioLinks' :key='index')
v-if='link'
v-for='(link, index) in userDialog.ref.bioLinks'
:key='index')
template(#content) template(#content)
span(v-text='link') span(v-text='link')
img( img(
@@ -641,7 +636,7 @@ mixin userDialog
el-dropdown-item(@click.native='copyUserURL(userDialog.id)') {{ $t('dialog.user.info.copy_url') }} el-dropdown-item(@click.native='copyUserURL(userDialog.id)') {{ $t('dialog.user.info.copy_url') }}
el-dropdown-item( el-dropdown-item(
@click.native='copyUserDisplayName(userDialog.ref.displayName)') {{ $t('dialog.user.info.copy_display_name') }} @click.native='copyUserDisplayName(userDialog.ref.displayName)') {{ $t('dialog.user.info.copy_display_name') }}
el-tab-pane(:label='$t("dialog.user.groups.header")') el-tab-pane(:label='$t("dialog.user.groups.header")' lazy)
div(style='display: flex; align-items: center; justify-content: space-between') div(style='display: flex; align-items: center; justify-content: space-between')
div(style='display: flex; align-items: center') div(style='display: flex; align-items: center')
el-button( el-button(
@@ -668,7 +663,8 @@ mixin userDialog
el-dropdown-menu(#default='dropdown') el-dropdown-menu(#default='dropdown')
el-dropdown-item( el-dropdown-item(
:disabled='item === userDialogGroupSortingOptions.inGame && userDialog.id !== API.currentUser.id' :disabled='item === userDialogGroupSortingOptions.inGame && userDialog.id !== API.currentUser.id'
v-for='item in userDialogGroupSortingOptions' v-for='(item, key) in userDialogGroupSortingOptions'
:key='key'
v-text='item.name' v-text='item.name'
@click.native='setUserDialogGroupSorting(item)') @click.native='setUserDialogGroupSorting(item)')
el-button( el-button(
@@ -850,7 +846,7 @@ mixin userDialog
span {{ $t('dialog.group.members.visibility') }} {{ group.memberVisibility }} span {{ $t('dialog.group.members.visibility') }} {{ group.memberVisibility }}
i.el-icon-view(style='margin-right: 5px') i.el-icon-view(style='margin-right: 5px')
span ({{ group.memberCount }}) span ({{ group.memberCount }})
el-tab-pane(:label='$t("dialog.user.worlds.header")') el-tab-pane(:label='$t("dialog.user.worlds.header")' lazy)
div(style='display: flex; align-items: center; justify-content: space-between') div(style='display: flex; align-items: center; justify-content: space-between')
div(style='display: flex; align-items: center') div(style='display: flex; align-items: center')
el-button( el-button(
@@ -873,7 +869,8 @@ mixin userDialog
span {{ userDialog.worldSorting.name }} #[i.el-icon-arrow-down.el-icon--right] span {{ userDialog.worldSorting.name }} #[i.el-icon-arrow-down.el-icon--right]
el-dropdown-menu(#default='dropdown') el-dropdown-menu(#default='dropdown')
el-dropdown-item( el-dropdown-item(
v-for='item in userDialogWorldSortingOptions' v-for='(item, key) in userDialogWorldSortingOptions'
:key='key'
v-text='item.name' v-text='item.name'
@click.native='setUserDialogWorldSorting(item)') @click.native='setUserDialogWorldSorting(item)')
span(style='margin: 0 5px') {{ $t('dialog.user.worlds.order_by') }} span(style='margin: 0 5px') {{ $t('dialog.user.worlds.order_by') }}
@@ -887,7 +884,8 @@ mixin userDialog
span {{ userDialog.worldOrder.name }} #[i.el-icon-arrow-down.el-icon--right] span {{ userDialog.worldOrder.name }} #[i.el-icon-arrow-down.el-icon--right]
el-dropdown-menu(#default='dropdown') el-dropdown-menu(#default='dropdown')
el-dropdown-item( el-dropdown-item(
v-for='item in userDialogWorldOrderOptions' v-for='(item, key) in userDialogWorldOrderOptions'
:key='key'
v-text='item.name' v-text='item.name'
@click.native='setUserDialogWorldOrder(item)') @click.native='setUserDialogWorldOrder(item)')
.x-friend-list(v-loading='userDialog.isWorldsLoading' style='margin-top: 10px; min-height: 60px') .x-friend-list(v-loading='userDialog.isWorldsLoading' style='margin-top: 10px; min-height: 60px')
@@ -900,7 +898,7 @@ mixin userDialog
.detail .detail
span.name(v-text='world.name') span.name(v-text='world.name')
span.extra(v-if='world.occupants') ({{ world.occupants }}) span.extra(v-if='world.occupants') ({{ world.occupants }})
el-tab-pane(:label='$t("dialog.user.favorite_worlds.header")') el-tab-pane(:label='$t("dialog.user.favorite_worlds.header")' lazy)
el-button( el-button(
type='default' type='default'
:loading='userDialog.isFavoriteWorldsLoading' :loading='userDialog.isFavoriteWorldsLoading'
@@ -913,8 +911,8 @@ mixin userDialog
ref='favoriteWorlds' ref='favoriteWorlds'
v-loading='userDialog.isFavoriteWorldsLoading' v-loading='userDialog.isFavoriteWorldsLoading'
style='margin-top: 10px') style='margin-top: 10px')
template(v-for='(list, index) in userFavoriteWorlds' v-if='list') template(v-for='(list, index) in userFavoriteWorlds' :key='index')
el-tab-pane el-tab-pane(lazy)
span(slot='label') span(slot='label')
span(v-text='list[0]' style='font-weight: bold; font-size: 16px') span(v-text='list[0]' style='font-weight: bold; font-size: 16px')
i.x-status-icon( i.x-status-icon(
@@ -931,7 +929,7 @@ mixin userDialog
.detail .detail
span.name(v-text='world.name') span.name(v-text='world.name')
span.extra(v-if='world.occupants') ({{ world.occupants }}) span.extra(v-if='world.occupants') ({{ world.occupants }})
el-tab-pane(:label='$t("dialog.user.avatars.header")') el-tab-pane(:label='$t("dialog.user.avatars.header")' lazy)
div(style='display: flex; align-items: center; justify-content: space-between') div(style='display: flex; align-items: center; justify-content: space-between')
div(style='display: flex; align-items: center') div(style='display: flex; align-items: center')
el-button( el-button(
@@ -970,6 +968,7 @@ mixin userDialog
.x-friend-list(style='margin-top: 10px; min-height: 60px') .x-friend-list(style='margin-top: 10px; min-height: 60px')
.x-friend-item.x-friend-item-border( .x-friend-item.x-friend-item-border(
v-for='avatar in userDialogAvatars' v-for='avatar in userDialogAvatars'
:key='avatar.id'
@click='showAvatarDialog(avatar.id)') @click='showAvatarDialog(avatar.id)')
.avatar .avatar
img(v-if='avatar.thumbnailImageUrl' v-lazy='avatar.thumbnailImageUrl') img(v-if='avatar.thumbnailImageUrl' v-lazy='avatar.thumbnailImageUrl')
@@ -984,7 +983,7 @@ mixin userDialog
v-else-if='avatar.releaseStatus === "private"' v-else-if='avatar.releaseStatus === "private"'
style='color: #f56c6c') style='color: #f56c6c')
span.extra(v-text='avatar.releaseStatus' v-else) span.extra(v-text='avatar.releaseStatus' v-else)
el-tab-pane(:label='$t("dialog.user.json.header")') el-tab-pane(:label='$t("dialog.user.json.header")' lazy)
el-button( el-button(
type='default' type='default'
@click='refreshUserDialogTreeData()' @click='refreshUserDialogTreeData()'