mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-05-03 21:36:06 +02:00
feat: Add my avatars tab
This commit is contained in:
pa
@@ -0,0 +1,147 @@
|
||||
<template>
|
||||
<Dialog v-model:open="dialogOpen">
|
||||
<DialogContent class="x-dialog sm:max-w-110">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{{ t('dialog.avatar.actions.manage_tags') }}</DialogTitle>
|
||||
<DialogDescription>{{ avatarName }}</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<p class="text-xs text-muted-foreground">{{ t('dialog.avatar.actions.manage_tags_hint') }}</p>
|
||||
<TagsInput v-model="tagNames" :delimiter="','" add-on-blur class="mt-1">
|
||||
<template v-for="entry in tagEntries" :key="entry.tag">
|
||||
<Popover>
|
||||
<PopoverTrigger as-child>
|
||||
<TagsInputItem
|
||||
:value="entry.tag"
|
||||
class="cursor-pointer"
|
||||
:style="{
|
||||
backgroundColor: resolveColor(entry).bg,
|
||||
color: resolveColor(entry).text
|
||||
}">
|
||||
<TagsInputItemText />
|
||||
<TagsInputItemDelete />
|
||||
</TagsInputItem>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent class="w-auto p-2" side="top" :side-offset="8">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<button
|
||||
v-for="color in TAG_COLORS"
|
||||
:key="color.name"
|
||||
type="button"
|
||||
class="h-4 w-4 shrink-0 rounded-sm transition-transform hover:scale-125"
|
||||
:class="
|
||||
isColorSelected(entry, color)
|
||||
? 'ring-1 ring-ring ring-offset-1 ring-offset-background'
|
||||
: ''
|
||||
"
|
||||
:style="{ backgroundColor: color.bg.replace('/ 0.2)', '/ 1)') }"
|
||||
:title="color.label"
|
||||
@click="setEntryColor(entry, color)" />
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</template>
|
||||
|
||||
<TagsInputInput :placeholder="t('dialog.avatar.actions.manage_tags_placeholder')" />
|
||||
</TagsInput>
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="secondary" class="mr-2" @click="dialogOpen = false">
|
||||
{{ t('prompt.rename_avatar.cancel') }}
|
||||
</Button>
|
||||
<Button @click="save">
|
||||
{{ t('prompt.rename_avatar.ok') }}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle
|
||||
} from '@/components/ui/dialog';
|
||||
import {
|
||||
TagsInput,
|
||||
TagsInputInput,
|
||||
TagsInputItem,
|
||||
TagsInputItemDelete,
|
||||
TagsInputItemText
|
||||
} from '@/components/ui/tags-input';
|
||||
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import { TAG_COLORS, getTagColor } from '@/shared/constants';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
const props = defineProps({
|
||||
open: { type: Boolean, default: false },
|
||||
avatarName: { type: String, default: '' },
|
||||
avatarId: { type: String, default: '' },
|
||||
initialTags: { type: Array, default: () => [] }
|
||||
});
|
||||
|
||||
const emit = defineEmits(['update:open', 'save']);
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const dialogOpen = computed({
|
||||
get: () => props.open,
|
||||
set: (val) => emit('update:open', val)
|
||||
});
|
||||
|
||||
const tagEntries = ref([]);
|
||||
|
||||
const tagNames = computed({
|
||||
get: () => tagEntries.value.map((e) => e.tag),
|
||||
set: (names) => {
|
||||
const existingMap = Object.fromEntries(tagEntries.value.map((e) => [e.tag, e]));
|
||||
tagEntries.value = names.map((name) => existingMap[name] || { tag: name, color: null });
|
||||
}
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.open,
|
||||
(isOpen) => {
|
||||
if (isOpen) {
|
||||
tagEntries.value = props.initialTags.map((entry) => ({ ...entry }));
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
function resolveColor(entry) {
|
||||
if (entry.color) {
|
||||
return {
|
||||
bg: entry.color,
|
||||
text: typeof entry.color === 'string' ? entry.color.replace(/\/ [\d.]+\)$/, ')') : entry.color
|
||||
};
|
||||
}
|
||||
return getTagColor(entry.tag);
|
||||
}
|
||||
|
||||
function isColorSelected(entry, color) {
|
||||
if (entry.color) {
|
||||
return entry.color === color.bg;
|
||||
}
|
||||
const hashColor = getTagColor(entry.tag);
|
||||
return hashColor.name === color.name;
|
||||
}
|
||||
|
||||
function setEntryColor(entry, color) {
|
||||
const hashColor = getTagColor(entry.tag);
|
||||
entry.color = hashColor.name === color.name ? null : color.bg;
|
||||
}
|
||||
|
||||
function save() {
|
||||
emit('save', {
|
||||
avatarId: props.avatarId,
|
||||
tags: tagEntries.value.map((e) => ({ tag: e.tag, color: e.color }))
|
||||
});
|
||||
dialogOpen.value = false;
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,615 @@
|
||||
<template>
|
||||
<div class="x-container" ref="containerRef">
|
||||
<DataTableLayout
|
||||
:table="table"
|
||||
:table-style="tableHeightStyle"
|
||||
:page-sizes="pageSizes"
|
||||
:total-items="filteredAvatars.length"
|
||||
:on-page-size-change="handlePageSizeChange"
|
||||
:on-row-click="handleRowClick"
|
||||
:row-class="getRowClass"
|
||||
class="cursor-pointer">
|
||||
<template #toolbar>
|
||||
<div class="mb-2.5 flex items-center gap-2">
|
||||
<Popover>
|
||||
<PopoverTrigger as-child>
|
||||
<Button variant="outline" size="sm" class="h-8 gap-1.5">
|
||||
<ListFilter class="size-4" />
|
||||
{{ t('view.my_avatars.filter') }}
|
||||
<Badge
|
||||
v-if="activeFilterCount"
|
||||
variant="secondary"
|
||||
class="ml-0.5 h-4.5 min-w-4.5 rounded-full px-1 text-xs">
|
||||
{{ activeFilterCount }}
|
||||
</Badge>
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent class="w-auto p-3" align="start">
|
||||
<div class="flex flex-col gap-3">
|
||||
<Field>
|
||||
<FieldLabel>{{ t('dialog.avatar.tags.public') }}</FieldLabel>
|
||||
<FieldContent>
|
||||
<ToggleGroup
|
||||
type="single"
|
||||
:model-value="releaseStatusFilter"
|
||||
variant="outline"
|
||||
@update:model-value="releaseStatusFilter = $event">
|
||||
<ToggleGroupItem
|
||||
v-for="opt in releaseStatusOptions"
|
||||
:key="opt.value"
|
||||
:value="opt.value"
|
||||
class="px-2.5">
|
||||
{{ opt.label }}
|
||||
</ToggleGroupItem>
|
||||
</ToggleGroup>
|
||||
</FieldContent>
|
||||
</Field>
|
||||
|
||||
<Field>
|
||||
<FieldLabel>{{ t('dialog.avatar.info.platform') }}</FieldLabel>
|
||||
<FieldContent>
|
||||
<ToggleGroup
|
||||
type="single"
|
||||
:model-value="platformFilter"
|
||||
variant="outline"
|
||||
@update:model-value="platformFilter = $event">
|
||||
<ToggleGroupItem value="all" class="px-2.5">
|
||||
{{ t('view.search.avatar.all') }}
|
||||
</ToggleGroupItem>
|
||||
<ToggleGroupItem
|
||||
v-for="plat in platformOptions"
|
||||
:key="plat.value"
|
||||
:value="plat.value"
|
||||
class="px-2.5">
|
||||
{{ plat.label }}
|
||||
</ToggleGroupItem>
|
||||
</ToggleGroup>
|
||||
</FieldContent>
|
||||
</Field>
|
||||
|
||||
<Field v-if="allTags.length">
|
||||
<FieldLabel>{{ t('dialog.avatar.info.tags') }}</FieldLabel>
|
||||
<FieldContent>
|
||||
<div class="flex flex-wrap gap-1">
|
||||
<Badge
|
||||
v-for="tag in allTags"
|
||||
:key="tag"
|
||||
:variant="tagFilters.has(tag) ? 'default' : 'outline'"
|
||||
class="cursor-pointer select-none"
|
||||
:style="
|
||||
tagFilters.has(tag)
|
||||
? {
|
||||
backgroundColor: getTagColor(tag).bg,
|
||||
color: getTagColor(tag).text
|
||||
}
|
||||
: {
|
||||
borderColor: getTagColor(tag).bg,
|
||||
color: getTagColor(tag).text
|
||||
}
|
||||
"
|
||||
@click="toggleTagFilter(tag)">
|
||||
{{ tag }}
|
||||
</Badge>
|
||||
</div>
|
||||
</FieldContent>
|
||||
</Field>
|
||||
|
||||
<Button
|
||||
v-if="activeFilterCount"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
class="w-full"
|
||||
@click="clearFilters">
|
||||
{{ t('view.my_avatars.clear_filters') }}
|
||||
</Button>
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
|
||||
<div class="flex-1" />
|
||||
|
||||
<span v-if="isLoading" class="text-muted-foreground text-sm">
|
||||
{{ t('view.friends_locations.loading_more') }}
|
||||
</span>
|
||||
<Input v-model="searchText" :placeholder="t('view.search.search_placeholder')" class="h-8 w-80" />
|
||||
<Button size="icon-sm" variant="ghost" :disabled="isLoading" @click="refreshAvatars">
|
||||
<RefreshCw :class="{ 'animate-spin': isLoading }" />
|
||||
</Button>
|
||||
</div>
|
||||
</template>
|
||||
<template #row-context-menu="{ row }">
|
||||
<ContextMenuContent>
|
||||
<ContextMenuItem @click="handleContextMenuAction('manageTags', row.original)">
|
||||
<Tag class="size-4" />
|
||||
{{ t('dialog.avatar.actions.manage_tags') }}
|
||||
</ContextMenuItem>
|
||||
<ContextMenuSeparator />
|
||||
<ContextMenuItem
|
||||
@click="
|
||||
handleContextMenuAction(
|
||||
row.original.releaseStatus === 'public' ? 'makePrivate' : 'makePublic',
|
||||
row.original
|
||||
)
|
||||
">
|
||||
<User class="size-4" />
|
||||
{{
|
||||
row.original.releaseStatus === 'public'
|
||||
? t('dialog.avatar.actions.make_private')
|
||||
: t('dialog.avatar.actions.make_public')
|
||||
}}
|
||||
</ContextMenuItem>
|
||||
<ContextMenuItem @click="handleContextMenuAction('rename', row.original)">
|
||||
<Pencil class="size-4" />
|
||||
{{ t('dialog.avatar.actions.rename') }}
|
||||
</ContextMenuItem>
|
||||
<ContextMenuItem @click="handleContextMenuAction('changeDescription', row.original)">
|
||||
<Pencil class="size-4" />
|
||||
{{ t('dialog.avatar.actions.change_description') }}
|
||||
</ContextMenuItem>
|
||||
<ContextMenuItem @click="handleContextMenuAction('changeTags', row.original)">
|
||||
<Pencil class="size-4" />
|
||||
{{ t('dialog.avatar.actions.change_content_tags') }}
|
||||
</ContextMenuItem>
|
||||
<ContextMenuItem @click="handleContextMenuAction('changeStyles', row.original)">
|
||||
<Pencil class="size-4" />
|
||||
{{ t('dialog.avatar.actions.change_styles_author_tags') }}
|
||||
</ContextMenuItem>
|
||||
<ContextMenuItem @click="handleContextMenuAction('changeImage', row.original)">
|
||||
<ImageIcon class="size-4" />
|
||||
{{ t('dialog.avatar.actions.change_image') }}
|
||||
</ContextMenuItem>
|
||||
<ContextMenuItem @click="handleContextMenuAction('createImpostor', row.original)">
|
||||
<RefreshCw class="size-4" />
|
||||
{{ t('dialog.avatar.actions.create_impostor') }}
|
||||
</ContextMenuItem>
|
||||
</ContextMenuContent>
|
||||
</template>
|
||||
</DataTableLayout>
|
||||
<input
|
||||
ref="imageUploadInput"
|
||||
type="file"
|
||||
accept="image/*"
|
||||
style="display: none"
|
||||
@change="onFileChangeAvatarImage" />
|
||||
<ImageCropDialog
|
||||
:open="cropDialogOpen"
|
||||
:title="t('dialog.change_content_image.avatar')"
|
||||
:aspect-ratio="4 / 3"
|
||||
:file="cropDialogFile"
|
||||
@update:open="cropDialogOpen = $event"
|
||||
@confirm="onCropConfirmAvatar" />
|
||||
<ManageTagsDialog
|
||||
v-model:open="manageTagsOpen"
|
||||
:avatar-name="manageTagsAvatar?.name || ''"
|
||||
:avatar-id="manageTagsAvatar?.id || ''"
|
||||
:initial-tags="manageTagsAvatar?.$tags || []"
|
||||
@save="onSaveTags" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Image as ImageIcon, ListFilter, Pencil, RefreshCw, Tag, User } from 'lucide-vue-next';
|
||||
import { computed, onMounted, ref, watch } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { toast } from 'vue-sonner';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import {
|
||||
handleImageUploadInput,
|
||||
readFileAsBase64,
|
||||
resizeImageToFitLimits,
|
||||
uploadImageLegacy,
|
||||
withUploadTimeout
|
||||
} from '../../shared/utils/imageUpload';
|
||||
import { useAppearanceSettingsStore, useAvatarStore, useModalStore, useUserStore } from '../../stores';
|
||||
import { ContextMenuContent, ContextMenuItem, ContextMenuSeparator } from '../../components/ui/context-menu';
|
||||
import { Field, FieldContent, FieldLabel } from '../../components/ui/field';
|
||||
import { Popover, PopoverContent, PopoverTrigger } from '../../components/ui/popover';
|
||||
import { ToggleGroup, ToggleGroupItem } from '../../components/ui/toggle-group';
|
||||
import { Badge } from '../../components/ui/badge';
|
||||
import { Button } from '../../components/ui/button';
|
||||
import { DataTableLayout } from '../../components/ui/data-table';
|
||||
import { Input } from '../../components/ui/input';
|
||||
import { avatarRequest } from '../../api';
|
||||
import { database } from '../../service/database';
|
||||
import { getColumns } from './columns';
|
||||
import { getPlatformInfo } from '../../shared/utils/avatar';
|
||||
import { getTagColor } from '../../shared/constants';
|
||||
import { processBulk } from '../../service/request';
|
||||
import { useDataTableScrollHeight } from '../../composables/useDataTableScrollHeight';
|
||||
import { useVrcxVueTable } from '../../lib/table/useVrcxVueTable';
|
||||
|
||||
import ImageCropDialog from '../../components/dialogs/ImageCropDialog.vue';
|
||||
import ManageTagsDialog from './ManageTagsDialog.vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
const appearanceSettingsStore = useAppearanceSettingsStore();
|
||||
const avatarStore = useAvatarStore();
|
||||
const modalStore = useModalStore();
|
||||
const { showAvatarDialog, selectAvatarWithoutConfirmation, applyAvatar } = avatarStore;
|
||||
const { currentUser } = storeToRefs(useUserStore());
|
||||
|
||||
const pageSizes = computed(() => appearanceSettingsStore.tablePageSizes);
|
||||
const pageSize = computed(() => appearanceSettingsStore.tablePageSize);
|
||||
|
||||
const containerRef = ref(null);
|
||||
const searchText = ref('');
|
||||
const releaseStatusFilter = ref('all');
|
||||
const tagFilters = ref(new Set());
|
||||
const platformFilter = ref('all');
|
||||
const isLoading = ref(false);
|
||||
const avatars = ref([]);
|
||||
const avatarTagsMap = ref(new Map());
|
||||
const imageUploadInput = ref(null);
|
||||
const cropDialogOpen = ref(false);
|
||||
const cropDialogFile = ref(null);
|
||||
const changeImageAvatarRef = ref(null);
|
||||
const manageTagsOpen = ref(false);
|
||||
const manageTagsAvatar = ref(null);
|
||||
|
||||
const { tableStyle: tableHeightStyle } = useDataTableScrollHeight(containerRef, {
|
||||
offset: 30,
|
||||
toolbarHeight: 54,
|
||||
paginationHeight: 52
|
||||
});
|
||||
|
||||
const allTags = computed(() => {
|
||||
const tagSet = new Set();
|
||||
for (const tags of avatarTagsMap.value.values()) {
|
||||
for (const entry of tags) {
|
||||
tagSet.add(entry.tag);
|
||||
}
|
||||
}
|
||||
return Array.from(tagSet).sort();
|
||||
});
|
||||
|
||||
const releaseStatusOptions = [
|
||||
{ value: 'all', label: t('view.search.avatar.all') },
|
||||
{ value: 'public', label: t('view.search.avatar.public') },
|
||||
{ value: 'private', label: t('view.search.avatar.private') }
|
||||
];
|
||||
|
||||
const platformOptions = [
|
||||
{ value: 'pc', label: 'PC' },
|
||||
{ value: 'android', label: 'Android' },
|
||||
{ value: 'ios', label: 'iOS' }
|
||||
];
|
||||
|
||||
const activeFilterCount = computed(() => {
|
||||
let count = 0;
|
||||
if (releaseStatusFilter.value !== 'all') count++;
|
||||
count += tagFilters.value.size;
|
||||
if (platformFilter.value !== 'all') count++;
|
||||
return count;
|
||||
});
|
||||
|
||||
function toggleTagFilter(tag) {
|
||||
const next = new Set(tagFilters.value);
|
||||
if (next.has(tag)) next.delete(tag);
|
||||
else next.add(tag);
|
||||
tagFilters.value = next;
|
||||
}
|
||||
|
||||
function clearFilters() {
|
||||
releaseStatusFilter.value = 'all';
|
||||
tagFilters.value = new Set();
|
||||
platformFilter.value = 'all';
|
||||
}
|
||||
|
||||
const filteredAvatars = computed(() => {
|
||||
let list = avatars.value;
|
||||
|
||||
if (releaseStatusFilter.value === 'public') {
|
||||
list = list.filter((a) => a.releaseStatus === 'public');
|
||||
} else if (releaseStatusFilter.value === 'private') {
|
||||
list = list.filter((a) => a.releaseStatus === 'private');
|
||||
}
|
||||
|
||||
if (tagFilters.value.size) {
|
||||
list = list.filter((a) => a.$tags?.some((t) => tagFilters.value.has(t.tag)));
|
||||
}
|
||||
|
||||
if (platformFilter.value !== 'all') {
|
||||
list = list.filter((a) => {
|
||||
const info = getPlatformInfo(a.unityPackages);
|
||||
return !!info[platformFilter.value]?.performanceRating;
|
||||
});
|
||||
}
|
||||
|
||||
// search filter
|
||||
if (searchText.value) {
|
||||
const query = searchText.value.toLowerCase();
|
||||
list = list.filter((a) => a.name?.toLowerCase().includes(query));
|
||||
}
|
||||
|
||||
return list;
|
||||
});
|
||||
|
||||
function handleShowAvatarDialog(avatarId) {
|
||||
showAvatarDialog(avatarId);
|
||||
}
|
||||
|
||||
function handleWearAvatar(avatarId) {
|
||||
if (currentUser.value.currentAvatar === avatarId) {
|
||||
return;
|
||||
}
|
||||
selectAvatarWithoutConfirmation(avatarId);
|
||||
}
|
||||
|
||||
function confirmAndRun(command, labelKey, fn) {
|
||||
modalStore
|
||||
.confirm({
|
||||
title: t('confirm.title'),
|
||||
description: t('confirm.command_question', {
|
||||
command: t(labelKey)
|
||||
})
|
||||
})
|
||||
.then(({ ok }) => {
|
||||
if (ok) fn();
|
||||
});
|
||||
}
|
||||
|
||||
function handleContextMenuAction(action, avatarRef) {
|
||||
switch (action) {
|
||||
case 'details':
|
||||
showAvatarDialog(avatarRef.id);
|
||||
break;
|
||||
case 'wear':
|
||||
handleWearAvatar(avatarRef.id);
|
||||
break;
|
||||
case 'makePrivate':
|
||||
confirmAndRun(action, 'dialog.avatar.actions.make_private', () => {
|
||||
avatarRequest.saveAvatar({ id: avatarRef.id, releaseStatus: 'private' }).then((args) => {
|
||||
applyAvatar(args.json);
|
||||
toast.success(t('message.avatar.updated_private'));
|
||||
refreshAvatars();
|
||||
});
|
||||
});
|
||||
break;
|
||||
case 'makePublic':
|
||||
confirmAndRun(action, 'dialog.avatar.actions.make_public', () => {
|
||||
avatarRequest.saveAvatar({ id: avatarRef.id, releaseStatus: 'public' }).then((args) => {
|
||||
applyAvatar(args.json);
|
||||
toast.success(t('message.avatar.updated_public'));
|
||||
refreshAvatars();
|
||||
});
|
||||
});
|
||||
break;
|
||||
case 'rename':
|
||||
modalStore
|
||||
.prompt({
|
||||
title: t('prompt.rename_avatar.header'),
|
||||
description: t('prompt.rename_avatar.description'),
|
||||
confirmText: t('prompt.rename_avatar.ok'),
|
||||
cancelText: t('prompt.rename_avatar.cancel'),
|
||||
inputValue: avatarRef.name,
|
||||
errorMessage: t('prompt.rename_avatar.input_error')
|
||||
})
|
||||
.then(({ ok, value }) => {
|
||||
if (!ok) return;
|
||||
if (value && value !== avatarRef.name) {
|
||||
avatarRequest.saveAvatar({ id: avatarRef.id, name: value }).then((args) => {
|
||||
applyAvatar(args.json);
|
||||
toast.success(t('prompt.rename_avatar.message.success'));
|
||||
refreshAvatars();
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(() => {});
|
||||
break;
|
||||
case 'changeDescription':
|
||||
modalStore
|
||||
.prompt({
|
||||
title: t('prompt.change_avatar_description.header'),
|
||||
description: t('prompt.change_avatar_description.description'),
|
||||
confirmText: t('prompt.change_avatar_description.ok'),
|
||||
cancelText: t('prompt.change_avatar_description.cancel'),
|
||||
inputValue: avatarRef.description,
|
||||
errorMessage: t('prompt.change_avatar_description.input_error')
|
||||
})
|
||||
.then(({ ok, value }) => {
|
||||
if (!ok) return;
|
||||
if (value && value !== avatarRef.description) {
|
||||
avatarRequest.saveAvatar({ id: avatarRef.id, description: value }).then((args) => {
|
||||
applyAvatar(args.json);
|
||||
toast.success(t('prompt.change_avatar_description.message.success'));
|
||||
refreshAvatars();
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(() => {});
|
||||
break;
|
||||
case 'createImpostor':
|
||||
confirmAndRun(action, 'dialog.avatar.actions.create_impostor', () => {
|
||||
avatarRequest.createImposter({ avatarId: avatarRef.id }).then(() => {
|
||||
toast.success(t('message.avatar.impostor_queued'));
|
||||
});
|
||||
});
|
||||
break;
|
||||
case 'changeImage':
|
||||
changeImageAvatarRef.value = avatarRef;
|
||||
imageUploadInput.value?.click();
|
||||
break;
|
||||
case 'manageTags':
|
||||
manageTagsAvatar.value = avatarRef;
|
||||
manageTagsOpen.value = true;
|
||||
break;
|
||||
case 'changeTags':
|
||||
case 'changeStyles':
|
||||
showAvatarDialog(avatarRef.id);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
async function onSaveTags({ avatarId, tags: newEntries }) {
|
||||
const avatar = avatars.value.find((a) => a.id === avatarId);
|
||||
const oldEntries = avatar?.$tags || [];
|
||||
const oldMap = new Map(oldEntries.map((e) => [e.tag, e]));
|
||||
const newMap = new Map(newEntries.map((e) => [e.tag, e]));
|
||||
|
||||
for (const [name] of oldMap) {
|
||||
if (!newMap.has(name)) {
|
||||
await database.removeAvatarTag(avatarId, name);
|
||||
}
|
||||
}
|
||||
|
||||
for (const [name, entry] of newMap) {
|
||||
const old = oldMap.get(name);
|
||||
if (!old) {
|
||||
await database.addAvatarTag(avatarId, name, entry.color);
|
||||
} else if (old.color !== entry.color) {
|
||||
await database.updateAvatarTagColor(avatarId, name, entry.color);
|
||||
}
|
||||
}
|
||||
|
||||
if (avatar) {
|
||||
avatar.$tags = newEntries;
|
||||
}
|
||||
avatarTagsMap.value.set(avatarId, newEntries);
|
||||
avatarTagsMap.value = new Map(avatarTagsMap.value);
|
||||
}
|
||||
|
||||
function onFileChangeAvatarImage(e) {
|
||||
const { file, clearInput } = handleImageUploadInput(e, {
|
||||
inputSelector: imageUploadInput.value,
|
||||
tooLargeMessage: () => t('message.file.too_large'),
|
||||
invalidTypeMessage: () => t('message.file.not_image')
|
||||
});
|
||||
if (!file) {
|
||||
return;
|
||||
}
|
||||
clearInput();
|
||||
cropDialogFile.value = file;
|
||||
cropDialogOpen.value = true;
|
||||
}
|
||||
|
||||
async function onCropConfirmAvatar(blob) {
|
||||
const avatarRef = changeImageAvatarRef.value;
|
||||
if (!avatarRef) return;
|
||||
try {
|
||||
await withUploadTimeout(
|
||||
(async () => {
|
||||
const base64Body = await readFileAsBase64(blob);
|
||||
const base64File = await resizeImageToFitLimits(base64Body);
|
||||
if (typeof LINUX !== 'undefined' && LINUX) {
|
||||
const args = await avatarRequest.uploadAvatarImage(base64File);
|
||||
const fileUrl = args.json.versions[args.json.versions.length - 1].file.url;
|
||||
await avatarRequest.saveAvatar({
|
||||
id: avatarRef.id,
|
||||
imageUrl: fileUrl
|
||||
});
|
||||
} else {
|
||||
await uploadImageLegacy('avatar', {
|
||||
entityId: avatarRef.id,
|
||||
imageUrl: avatarRef.imageUrl,
|
||||
base64File,
|
||||
blob
|
||||
});
|
||||
}
|
||||
})()
|
||||
);
|
||||
toast.success(t('message.upload.success'));
|
||||
refreshAvatars();
|
||||
} catch (error) {
|
||||
console.error('avatar image upload process failed:', error);
|
||||
toast.error(t('message.upload.error'));
|
||||
} finally {
|
||||
cropDialogOpen.value = false;
|
||||
changeImageAvatarRef.value = null;
|
||||
}
|
||||
}
|
||||
|
||||
const currentAvatarId = computed(() => currentUser.value?.currentAvatar);
|
||||
|
||||
const columns = getColumns({
|
||||
onShowAvatarDialog: handleShowAvatarDialog,
|
||||
onContextMenuAction: handleContextMenuAction,
|
||||
currentAvatarId
|
||||
});
|
||||
|
||||
function handleRowClick(row) {
|
||||
handleWearAvatar(row.original.id);
|
||||
}
|
||||
|
||||
function getRowClass(row) {
|
||||
if (row.original.id === currentAvatarId.value) {
|
||||
return 'bg-primary/10 hover:bg-primary/15';
|
||||
}
|
||||
return '';
|
||||
}
|
||||
|
||||
const { table, pagination } = useVrcxVueTable({
|
||||
get data() {
|
||||
return filteredAvatars.value;
|
||||
},
|
||||
persistKey: 'my-avatars',
|
||||
columns,
|
||||
initialSorting: [{ id: 'updated_at', desc: true }],
|
||||
initialPagination: {
|
||||
pageIndex: 0,
|
||||
pageSize: pageSize.value
|
||||
}
|
||||
});
|
||||
|
||||
const handlePageSizeChange = (size) => {
|
||||
appearanceSettingsStore.setTablePageSize(size);
|
||||
};
|
||||
|
||||
watch(pageSize, (size) => {
|
||||
if (pagination.value.pageSize === size) return;
|
||||
pagination.value = { ...pagination.value, pageIndex: 0, pageSize: size };
|
||||
table.setPageSize(size);
|
||||
});
|
||||
|
||||
async function refreshAvatars() {
|
||||
if (isLoading.value) {
|
||||
return;
|
||||
}
|
||||
isLoading.value = true;
|
||||
|
||||
const map = new Map();
|
||||
const params = {
|
||||
n: 50,
|
||||
offset: 0,
|
||||
sort: 'updated',
|
||||
order: 'descending',
|
||||
releaseStatus: 'all',
|
||||
user: 'me'
|
||||
};
|
||||
|
||||
await processBulk({
|
||||
fn: avatarRequest.getAvatars,
|
||||
N: -1,
|
||||
params,
|
||||
handle: (args) => {
|
||||
for (const json of args.json) {
|
||||
const ref = applyAvatar(json);
|
||||
map.set(ref.id, ref);
|
||||
}
|
||||
},
|
||||
done: async () => {
|
||||
const list = Array.from(map.values());
|
||||
const currentAvatarId = currentUser.value.currentAvatar;
|
||||
const swapTime = currentUser.value.$previousAvatarSwapTime;
|
||||
const tagsMap = await database.getAllAvatarTags();
|
||||
avatarTagsMap.value = tagsMap;
|
||||
await Promise.all(
|
||||
list.map(async (ref) => {
|
||||
const aviTime = await database.getAvatarTimeSpent(ref.id);
|
||||
ref.$timeSpent = aviTime.timeSpent;
|
||||
if (ref.id === currentAvatarId && swapTime) {
|
||||
ref.$timeSpent += Date.now() - swapTime;
|
||||
}
|
||||
ref.$tags = tagsMap.get(ref.id) || [];
|
||||
})
|
||||
);
|
||||
avatars.value = list;
|
||||
isLoading.value = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
refreshAvatars();
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,491 @@
|
||||
import { getTagColor } from '../../shared/constants';
|
||||
import { Badge } from '../../components/ui/badge';
|
||||
import { Button } from '../../components/ui/button';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger
|
||||
} from '../../components/ui/dropdown-menu';
|
||||
import {
|
||||
Apple,
|
||||
ArrowUpDown,
|
||||
Check,
|
||||
Ellipsis,
|
||||
Image,
|
||||
Monitor,
|
||||
Pencil,
|
||||
RefreshCw,
|
||||
Smartphone,
|
||||
Tag,
|
||||
User
|
||||
} from 'lucide-vue-next';
|
||||
import {
|
||||
formatDateFilter,
|
||||
getAvailablePlatforms,
|
||||
getPlatformInfo,
|
||||
timeToText
|
||||
} from '../../shared/utils';
|
||||
import { i18n } from '../../plugin';
|
||||
|
||||
const { t } = i18n.global;
|
||||
|
||||
const sortButton = ({ column, label, descFirst = false }) => (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
class="-ml-2 h-8 px-2"
|
||||
onClick={() => {
|
||||
const sorted = column.getIsSorted();
|
||||
if (!sorted && descFirst) {
|
||||
column.toggleSorting(true);
|
||||
return;
|
||||
}
|
||||
column.toggleSorting(sorted === 'asc');
|
||||
}}
|
||||
>
|
||||
{label}
|
||||
<ArrowUpDown class="ml-1 h-4 w-4" />
|
||||
</Button>
|
||||
);
|
||||
|
||||
export function getColumns({
|
||||
onShowAvatarDialog,
|
||||
onContextMenuAction,
|
||||
currentAvatarId
|
||||
}) {
|
||||
return [
|
||||
{
|
||||
id: 'active',
|
||||
header: () => null,
|
||||
size: 40,
|
||||
enableSorting: false,
|
||||
enableResizing: false,
|
||||
cell: ({ row }) => {
|
||||
const ref = row.original;
|
||||
const isActive = ref.id === currentAvatarId.value;
|
||||
return (
|
||||
<div class="flex items-center justify-center">
|
||||
<Check
|
||||
class={[
|
||||
'h-4 w-4',
|
||||
isActive
|
||||
? 'text-primary'
|
||||
: 'text-muted-foreground/0 group-hover/row:text-muted-foreground/40'
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'index',
|
||||
accessorFn: (_row, index) => index + 1,
|
||||
header: ({ column }) =>
|
||||
sortButton({ column, label: 'No.', descFirst: true }),
|
||||
size: 60,
|
||||
enableResizing: false,
|
||||
meta: {
|
||||
class: 'text-right'
|
||||
},
|
||||
cell: ({ row }) => (
|
||||
<span class="text-muted-foreground">{row.index + 1}</span>
|
||||
)
|
||||
},
|
||||
{
|
||||
id: 'thumbnail',
|
||||
header: () => null,
|
||||
size: 64,
|
||||
enableSorting: false,
|
||||
enableResizing: false,
|
||||
cell: ({ row }) => {
|
||||
const ref = row.original;
|
||||
return (
|
||||
<img
|
||||
src={ref.thumbnailImageUrl}
|
||||
class="cursor-pointer rounded-sm object-cover"
|
||||
style="width: 36px; height: 24px;"
|
||||
loading="lazy"
|
||||
onClick={() => onShowAvatarDialog(ref.id)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'name',
|
||||
accessorKey: 'name',
|
||||
header: ({ column }) => sortButton({ column, label: 'Name' }),
|
||||
size: 200,
|
||||
cell: ({ row }) => {
|
||||
const ref = row.original;
|
||||
return (
|
||||
<span
|
||||
class="cursor-pointer font-medium"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onShowAvatarDialog(ref.id);
|
||||
}}
|
||||
>
|
||||
{ref.name}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'platforms',
|
||||
header: () => 'Platforms',
|
||||
size: 120,
|
||||
enableSorting: false,
|
||||
cell: ({ row }) => {
|
||||
const ref = row.original;
|
||||
const platforms = getAvailablePlatforms(ref.unityPackages);
|
||||
return (
|
||||
<div class="flex items-center gap-1">
|
||||
{platforms.isPC && (
|
||||
<Badge class="x-tag-platform-pc" variant="outline">
|
||||
<Monitor class="h-3.5 w-3.5" />
|
||||
</Badge>
|
||||
)}
|
||||
{platforms.isQuest && (
|
||||
<Badge
|
||||
class="x-tag-platform-quest"
|
||||
variant="outline"
|
||||
>
|
||||
<Smartphone class="h-3.5 w-3.5" />
|
||||
</Badge>
|
||||
)}
|
||||
{platforms.isIos && (
|
||||
<Badge
|
||||
class="text-[#8e8e93] border-[#8e8e93]"
|
||||
variant="outline"
|
||||
>
|
||||
<Apple class="h-3.5 w-3.5" />
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'customTags',
|
||||
accessorFn: (row) => (row.$tags || []).map((t) => t.tag).join(', '),
|
||||
header: () => t('dialog.avatar.info.tags'),
|
||||
size: 150,
|
||||
enableSorting: false,
|
||||
cell: ({ row }) => {
|
||||
const tags = row.original.$tags || [];
|
||||
if (!tags.length) return null;
|
||||
return (
|
||||
<div class="flex flex-wrap gap-1">
|
||||
{tags.map((entry) => {
|
||||
const hashColor = getTagColor(entry.tag);
|
||||
const storedColor =
|
||||
typeof entry.color === 'string'
|
||||
? entry.color
|
||||
: null;
|
||||
const bg = storedColor || hashColor.bg;
|
||||
const text = storedColor
|
||||
? storedColor.replace(/\/ [\d.]+\)$/, ')')
|
||||
: hashColor.text;
|
||||
return (
|
||||
<Badge
|
||||
key={entry.tag}
|
||||
variant="secondary"
|
||||
class="text-xs"
|
||||
style={{
|
||||
backgroundColor: bg,
|
||||
color: text
|
||||
}}
|
||||
>
|
||||
{entry.tag}
|
||||
</Badge>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'releaseStatus',
|
||||
accessorKey: 'releaseStatus',
|
||||
header: () => t('dialog.avatar.tags.public'),
|
||||
size: 120,
|
||||
cell: ({ row }) => {
|
||||
const ref = row.original;
|
||||
return (
|
||||
<Badge variant="outline">
|
||||
{ref.releaseStatus === 'public'
|
||||
? t('dialog.avatar.tags.public')
|
||||
: t('dialog.avatar.tags.private')}
|
||||
</Badge>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'timeSpent',
|
||||
accessorFn: (row) => row?.$timeSpent ?? 0,
|
||||
header: ({ column }) =>
|
||||
sortButton({
|
||||
column,
|
||||
label: t('dialog.avatar.info.time_spent'),
|
||||
descFirst: true
|
||||
}),
|
||||
size: 140,
|
||||
meta: {
|
||||
class: 'text-right'
|
||||
},
|
||||
cell: ({ row }) => {
|
||||
const time = row.original?.$timeSpent;
|
||||
return time ? (
|
||||
<span class=" text-sm">{timeToText(time)}</span>
|
||||
) : (
|
||||
<span class=" text-sm">-</span>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'version',
|
||||
accessorKey: 'version',
|
||||
header: ({ column }) =>
|
||||
sortButton({
|
||||
column,
|
||||
label: t('dialog.avatar.info.version'),
|
||||
descFirst: true
|
||||
}),
|
||||
size: 90,
|
||||
meta: {
|
||||
class: 'text-right'
|
||||
},
|
||||
cell: ({ row }) => (
|
||||
<span class=" text-sm">{row.original.version ?? '-'}</span>
|
||||
)
|
||||
},
|
||||
{
|
||||
id: 'pcPerf',
|
||||
accessorFn: (row) =>
|
||||
getPlatformInfo(row.unityPackages)?.pc?.performanceRating ?? '',
|
||||
header: ({ column }) =>
|
||||
sortButton({
|
||||
column,
|
||||
label: t('dialog.avatar.info.pc_performance')
|
||||
}),
|
||||
size: 140,
|
||||
cell: ({ row }) => {
|
||||
const perf = getPlatformInfo(row.original.unityPackages)?.pc
|
||||
?.performanceRating;
|
||||
return perf ? (
|
||||
<span class="text-sm">{perf}</span>
|
||||
) : (
|
||||
<span class="text-muted-foreground">-</span>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'androidPerf',
|
||||
accessorFn: (row) =>
|
||||
getPlatformInfo(row.unityPackages)?.android
|
||||
?.performanceRating ?? '',
|
||||
header: ({ column }) =>
|
||||
sortButton({
|
||||
column,
|
||||
label: t('dialog.avatar.info.android_performance')
|
||||
}),
|
||||
size: 140,
|
||||
cell: ({ row }) => {
|
||||
const perf = getPlatformInfo(row.original.unityPackages)
|
||||
?.android?.performanceRating;
|
||||
return perf ? (
|
||||
<span class="text-sm">{perf}</span>
|
||||
) : (
|
||||
<span class="text-muted-foreground">-</span>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'iosPerf',
|
||||
accessorFn: (row) =>
|
||||
getPlatformInfo(row.unityPackages)?.ios?.performanceRating ??
|
||||
'',
|
||||
header: ({ column }) =>
|
||||
sortButton({
|
||||
column,
|
||||
label: t('dialog.avatar.info.ios_performance')
|
||||
}),
|
||||
size: 140,
|
||||
cell: ({ row }) => {
|
||||
const perf = getPlatformInfo(row.original.unityPackages)?.ios
|
||||
?.performanceRating;
|
||||
return perf ? (
|
||||
<span class="text-sm">{perf}</span>
|
||||
) : (
|
||||
<span class="text-muted-foreground">-</span>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'updated_at',
|
||||
accessorKey: 'updated_at',
|
||||
header: ({ column }) =>
|
||||
sortButton({
|
||||
column,
|
||||
label: t('dialog.avatar.info.last_updated'),
|
||||
descFirst: true
|
||||
}),
|
||||
size: 160,
|
||||
cell: ({ row }) => {
|
||||
const ref = row.original;
|
||||
return (
|
||||
<span class=" text-sm">
|
||||
{formatDateFilter(ref.updated_at, 'long')}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'created_at',
|
||||
accessorKey: 'created_at',
|
||||
header: ({ column }) =>
|
||||
sortButton({
|
||||
column,
|
||||
label: t('dialog.avatar.info.created_at'),
|
||||
descFirst: true
|
||||
}),
|
||||
size: 160,
|
||||
cell: ({ row }) => {
|
||||
const ref = row.original;
|
||||
return (
|
||||
<span class=" text-sm">
|
||||
{formatDateFilter(ref.created_at, 'long')}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'actions',
|
||||
header: () => null,
|
||||
size: 100,
|
||||
enableSorting: false,
|
||||
enableResizing: false,
|
||||
cell: ({ row }) => {
|
||||
const ref = row.original;
|
||||
return (
|
||||
<div
|
||||
class="flex items-center gap-1"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
class="rounded-full"
|
||||
size="icon-sm"
|
||||
variant="ghost"
|
||||
>
|
||||
<Ellipsis class="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
<DropdownMenuItem
|
||||
onClick={() =>
|
||||
onContextMenuAction('manageTags', ref)
|
||||
}
|
||||
>
|
||||
<Tag class="size-4" />
|
||||
{t('dialog.avatar.actions.manage_tags')}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
{ref.releaseStatus === 'public' ? (
|
||||
<DropdownMenuItem
|
||||
onClick={() =>
|
||||
onContextMenuAction(
|
||||
'makePrivate',
|
||||
ref
|
||||
)
|
||||
}
|
||||
>
|
||||
<User class="size-4" />
|
||||
{t(
|
||||
'dialog.avatar.actions.make_private'
|
||||
)}
|
||||
</DropdownMenuItem>
|
||||
) : (
|
||||
<DropdownMenuItem
|
||||
onClick={() =>
|
||||
onContextMenuAction(
|
||||
'makePublic',
|
||||
ref
|
||||
)
|
||||
}
|
||||
>
|
||||
<User class="size-4" />
|
||||
{t('dialog.avatar.actions.make_public')}
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
<DropdownMenuItem
|
||||
onClick={() =>
|
||||
onContextMenuAction('rename', ref)
|
||||
}
|
||||
>
|
||||
<Pencil class="size-4" />
|
||||
{t('dialog.avatar.actions.rename')}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
onClick={() =>
|
||||
onContextMenuAction(
|
||||
'changeDescription',
|
||||
ref
|
||||
)
|
||||
}
|
||||
>
|
||||
<Pencil class="size-4" />
|
||||
{t(
|
||||
'dialog.avatar.actions.change_description'
|
||||
)}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
onClick={() =>
|
||||
onContextMenuAction('changeTags', ref)
|
||||
}
|
||||
>
|
||||
<Pencil class="size-4" />
|
||||
{t(
|
||||
'dialog.avatar.actions.change_content_tags'
|
||||
)}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
onClick={() =>
|
||||
onContextMenuAction('changeStyles', ref)
|
||||
}
|
||||
>
|
||||
<Pencil class="size-4" />
|
||||
{t(
|
||||
'dialog.avatar.actions.change_styles_author_tags'
|
||||
)}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
onClick={() =>
|
||||
onContextMenuAction('changeImage', ref)
|
||||
}
|
||||
>
|
||||
<Image class="size-4" />
|
||||
{t('dialog.avatar.actions.change_image')}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
onClick={() =>
|
||||
onContextMenuAction(
|
||||
'createImpostor',
|
||||
ref
|
||||
)
|
||||
}
|
||||
>
|
||||
<RefreshCw class="size-4" />
|
||||
{t('dialog.avatar.actions.create_impostor')}
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
];
|
||||
}
|
||||
Reference in New Issue
Block a user