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

refactor: favorites tab

Browse Source
This commit is contained in:
pa
2025-11-09 21:59:24 +09:00
committed by Natsumi
parent 9069d8cefe
commit bbd5fa2b21
17 changed files with 4987 additions and 1841 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/Favorites/components/FavoritesFriendItem.vue
+107 -58
View File
@@ -1,85 +1,134 @@
<template>
<div @click="$emit('click')">
<div class="x-friend-item">
<template v-if="favorite.ref">
<div class="avatar" :class="userStatusClass(favorite.ref)">
<div :class="cardClasses" @click="$emit('click')">
<template v-if="favorite.ref">
<div class="favorites-search-card__content">
<div class="favorites-search-card__avatar">
<img :src="userImage(favorite.ref, true)" loading="lazy" />
</div>
<div class="detail">
<span
class="name"
:style="{ color: favorite.ref.$userColour }"
v-text="favorite.ref.displayName"></span>
<Location
class="extra"
v-if="favorite.ref.location !== 'offline'"
:location="favorite.ref.location"
:traveling="favorite.ref.travelingToLocation"
:link="false" />
<span v-else v-text="favorite.ref.statusDescription"></span>
<div class="favorites-search-card__detail">
<div class="favorites-search-card__title">
<span class="name" :style="displayNameStyle">{{ favorite.ref.displayName }}</span>
</div>
<div v-if="favorite.ref.location !== 'offline'" class="favorites-search-card__location">
<Location
:location="favorite.ref.location"
:traveling="favorite.ref.travelingToLocation"
:link="false" />
</div>
<span v-else class="extra">{{ favorite.ref.statusDescription }}</span>
</div>
<div v-if="editFavoritesMode">
<FavoritesMoveDropdown
:favoriteGroup="favoriteFriendGroups"
:currentGroup="group"
:currentFavorite="favorite"
type="friend" />
<el-button type="text" size="small" style="margin-left: 5px" @click.stop>
<el-checkbox v-model="favorite.$selected"></el-checkbox>
</div>
<div class="favorites-search-card__actions">
<template v-if="editMode">
<div class="favorites-search-card__action favorites-search-card__action--checkbox" @click.stop>
<el-checkbox v-model="isSelected"></el-checkbox>
</div>
<div class="favorites-search-card__action-group">
<div class="favorites-search-card__action favorites-search-card__action--full" @click.stop>
<FavoritesMoveDropdown
:favoriteGroup="favoriteFriendGroups"
:currentGroup="group"
:currentFavorite="favorite"
class="favorites-search-card__dropdown"
type="friend" />
</div>
<div class="favorites-search-card__action">
<el-tooltip placement="left" :content="t('view.favorite.unfavorite_tooltip')">
<el-button
size="small"
circle
class="favorites-search-card__action-btn"
type="default"
@click.stop="handleDeleteFavorite">
<i class="ri-delete-bin-line"></i>
</el-button>
</el-tooltip>
</div>
</div>
</template>
<template v-else>
<div class="favorites-search-card__action">
<el-tooltip placement="right" :content="t('view.favorite.unfavorite_tooltip')">
<el-button
size="small"
:icon="Star"
circle
class="favorites-search-card__action-btn"
@click.stop="showFavoriteDialog('friend', favorite.id)" />
</el-tooltip>
</div>
</template>
</div>
</template>
<template v-else>
<div class="favorites-search-card__content">
<div class="favorites-search-card__avatar is-empty"></div>
<div class="favorites-search-card__detail">
<span class="name">{{ favorite.name || favorite.id }}</span>
</div>
</div>
<div class="favorites-search-card__actions">
<div class="favorites-search-card__action">
<el-button circle type="default" size="small" @click.stop="handleDeleteFavorite">
<i class="ri-delete-bin-line"></i>
</el-button>
</div>
<template v-else>
<el-tooltip placement="right" :content="t('view.favorite.unfavorite_tooltip')" :teleported="false">
<el-button
type="default"
:icon="Star"
size="small"
circle
style="margin-left: 5px"
@click.stop="showFavoriteDialog('friend', favorite.id)"></el-button>
</el-tooltip>
</template>
</template>
<template v-else>
<div class="avatar"></div>
<div class="detail">
<span v-text="favorite.name || favorite.id"></span>
</div>
<el-button
type="text"
:icon="Close"
size="small"
style="margin-left: 5px"
@click.stop="deleteFavorite(favorite.id)"></el-button>
</template>
</div>
</div>
</template>
</div>
</template>
<script setup>
import { Close, Star } from '@element-plus/icons-vue';
import { Star } from '@element-plus/icons-vue';
import { computed } from 'vue';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';
import { userImage, userStatusClass } from '../../../shared/utils';
import { favoriteRequest } from '../../../api';
import { useFavoriteStore } from '../../../stores';
import { userImage } from '../../../shared/utils';
import FavoritesMoveDropdown from './FavoritesMoveDropdown.vue';
defineProps({
const props = defineProps({
favorite: { type: Object, required: true },
group: { type: Object, required: true }
group: { type: Object, default: null },
editMode: { type: Boolean, default: false },
selected: { type: Boolean, default: false }
});
defineEmits(['click']);
const emit = defineEmits(['click', 'toggle-select']);
const { favoriteFriendGroups, editFavoritesMode } = storeToRefs(useFavoriteStore());
const { favoriteFriendGroups } = storeToRefs(useFavoriteStore());
const { showFavoriteDialog } = useFavoriteStore();
const { t } = useI18n();
function deleteFavorite(objectId) {
favoriteRequest.deleteFavorite({ objectId });
const isSelected = computed({
get: () => props.selected,
set: (value) => emit('toggle-select', value)
});
const cardClasses = computed(() => [
'favorites-search-card',
'favorites-search-card--friend',
{
'is-selected': props.selected,
'is-edit-mode': props.editMode
}
]);
const displayNameStyle = computed(() => {
if (props.favorite?.ref?.$userColour) {
return {
color: props.favorite.ref.$userColour
};
}
return {};
});
function handleDeleteFavorite() {
favoriteRequest.deleteFavorite({
objectId: props.favorite.id
});
}
</script>