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

improve user dialog activity style

Browse Source
This commit is contained in:
pa
2026-03-18 20:54:26 +09:00
parent 92afc31ea5
commit 475ed452d2
1 changed files with 14 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/dialogs/UserDialog/UserDialogActivityTab.vue
+14 -10
View File
@@ -1,5 +1,5 @@
<template> <template>
<div class="flex flex-col px-2" style="min-height: 200px"> <div class="flex flex-col" style="min-height: 200px">
<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">
<Button <Button
@@ -11,14 +11,14 @@
<Spinner v-if="isLoading" /> <Spinner v-if="isLoading" />
<RefreshCw v-else /> <RefreshCw v-else />
</Button> </Button>
<span v-if="totalOnlineEvents > 0" style="margin-left: 6px" class="text-muted-foreground text-xs"> <span v-if="filteredEventCount > 0" class="text-accent-foreground ml-1">
{{ t('dialog.user.activity.total_events', { count: totalOnlineEvents }) }} {{ t('dialog.user.activity.total_events', { count: filteredEventCount }) }}
</span> </span>
</div> </div>
<div v-if="totalOnlineEvents > 0" style="display: flex; align-items: center"> <div v-if="hasAnyData" class="flex items-center gap-2">
<span style="margin-right: 6px" class="text-muted-foreground text-xs">{{ t('dialog.user.activity.period') }}</span> <span class="text-muted-foreground text-sm">{{ t('dialog.user.activity.period') }}</span>
<Select v-model="selectedPeriod" :disabled="isLoading"> <Select v-model="selectedPeriod" :disabled="isLoading">
<SelectTrigger size="sm" class="w-[130px]" @click.stop> <SelectTrigger size="sm" class="w-40" @click.stop>
<SelectValue /> <SelectValue />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
@@ -41,10 +41,10 @@
<span class="font-medium ml-1">{{ peakTimeText }}</span> <span class="font-medium ml-1">{{ peakTimeText }}</span>
</div> </div>
</div> </div>
<div v-if="!isLoading && totalOnlineEvents === 0" class="flex items-center justify-center flex-1 mt-8"> <div v-if="!isLoading && !hasAnyData" class="flex items-center justify-center flex-1 mt-8">
<DataTableEmpty type="nodata" /> <DataTableEmpty type="nodata" />
</div> </div>
<div v-if="!isLoading && totalOnlineEvents > 0 && filteredEventCount === 0" class="flex items-center justify-center flex-1 mt-8"> <div v-if="!isLoading && hasAnyData && filteredEventCount === 0" class="flex items-center justify-center flex-1 mt-8">
<span class="text-muted-foreground text-sm">{{ t('dialog.user.activity.no_data_in_period') }}</span> <span class="text-muted-foreground text-sm">{{ t('dialog.user.activity.no_data_in_period') }}</span>
</div> </div>
<div <div
@@ -80,6 +80,7 @@
const chartRef = ref(null); const chartRef = ref(null);
const isLoading = ref(false); const isLoading = ref(false);
const totalOnlineEvents = ref(0); const totalOnlineEvents = ref(0);
const hasAnyData = ref(false);
const peakDayText = ref(''); const peakDayText = ref('');
const peakTimeText = ref(''); const peakTimeText = ref('');
const selectedPeriod = ref('all'); const selectedPeriod = ref('all');
@@ -116,7 +117,7 @@
if (echartsInstance) { if (echartsInstance) {
echartsInstance.dispose(); echartsInstance.dispose();
echartsInstance = null; echartsInstance = null;
if (totalOnlineEvents.value > 0 && chartRef.value) { if (hasAnyData.value && chartRef.value) {
nextTick(() => { nextTick(() => {
echartsInstance = echarts.init( echartsInstance = echarts.init(
chartRef.value, chartRef.value,
@@ -246,6 +247,7 @@
const filtered = getFilteredTimestamps(); const filtered = getFilteredTimestamps();
filteredEventCount.value = filtered.length; filteredEventCount.value = filtered.length;
totalOnlineEvents.value = filtered.length;
if (filtered.length === 0) { if (filtered.length === 0) {
peakDayText.value = ''; peakDayText.value = '';
@@ -354,6 +356,7 @@
if (requestId !== activeRequestId) return; if (requestId !== activeRequestId) return;
if (userDialog.value.id !== userId) return; if (userDialog.value.id !== userId) return;
cachedTimestamps = timestamps; cachedTimestamps = timestamps;
hasAnyData.value = timestamps.length > 0;
totalOnlineEvents.value = timestamps.length; totalOnlineEvents.value = timestamps.length;
lastLoadedUserId = userId; lastLoadedUserId = userId;
@@ -386,6 +389,7 @@
} else { } else {
peakDayText.value = ''; peakDayText.value = '';
peakTimeText.value = ''; peakTimeText.value = '';
hasAnyData.value = false;
filteredEventCount.value = 0; filteredEventCount.value = 0;
} }
} catch (error) { } catch (error) {
@@ -401,7 +405,7 @@
* @param {string} userId * @param {string} userId
*/ */
function loadOnlineFrequency(userId) { function loadOnlineFrequency(userId) {
if (lastLoadedUserId === userId && totalOnlineEvents.value > 0) { if (lastLoadedUserId === userId && hasAnyData.value) {
return; return;
} }
loadData(); loadData();