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

split charts into separate routes (#1605)

Browse Source
This commit is contained in:
pa
2026-02-03 00:07:09 +09:00
parent 1cbafbeaeb
commit bbbb79eaca
9 changed files with 290 additions and 265 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/NavMenu.vue
+44 -4
View File
@@ -374,7 +374,14 @@
items: ['friend-log', 'friend-list', 'moderation']
},
{ type: 'item', key: 'notification' },
{ type: 'item', key: 'charts' },
{
type: 'folder',
id: 'default-folder-charts',
nameKey: 'nav_tooltip.charts',
name: t('nav_tooltip.charts'),
icon: 'ri-pie-chart-line',
items: ['charts-instance', 'charts-mutual']
},
{ type: 'item', key: 'tools' },
{ type: 'item', key: 'direct-access' }
];
@@ -504,6 +511,7 @@
const sanitizeLayout = (layout) => {
const usedKeys = new Set();
const normalized = [];
const chartsKeys = ['charts-instance', 'charts-mutual'];
const appendItemEntry = (key, target = normalized) => {
if (!key || usedKeys.has(key) || !navDefinitionMap.has(key)) {
@@ -513,9 +521,31 @@
usedKeys.add(key);
};
const appendChartsFolder = (target = normalized) => {
if (chartsKeys.some((key) => usedKeys.has(key))) {
return;
}
if (!chartsKeys.every((key) => navDefinitionMap.has(key))) {
return;
}
chartsKeys.forEach((key) => usedKeys.add(key));
target.push({
type: 'folder',
id: 'default-folder-charts',
nameKey: 'nav_tooltip.charts',
name: t('nav_tooltip.charts'),
icon: 'ri-pie-chart-line',
items: [...chartsKeys]
});
};
if (Array.isArray(layout)) {
layout.forEach((entry) => {
if (entry?.type === 'item') {
if (entry.key === 'charts') {
appendChartsFolder();
return;
}
appendItemEntry(entry.key);
return;
}
@@ -550,11 +580,17 @@
navDefinitions.forEach((item) => {
if (!usedKeys.has(item.key)) {
normalized.push({ type: 'item', key: item.key });
usedKeys.add(item.key);
if (chartsKeys.includes(item.key)) {
return;
}
appendItemEntry(item.key);
}
});
if (!chartsKeys.some((key) => usedKeys.has(key))) {
appendChartsFolder();
}
return normalized;
};
@@ -670,7 +706,11 @@
console.error('Failed to load custom nav', error);
} finally {
const fallbackLayout = layoutData?.length ? layoutData : createDefaultNavLayout();
navLayout.value = sanitizeLayout(fallbackLayout);
const sanitized = sanitizeLayout(fallbackLayout);
navLayout.value = sanitized;
if (layoutData?.length && JSON.stringify(sanitized) !== JSON.stringify(fallbackLayout)) {
await saveNavLayout(sanitized);
}
navLayoutReady.value = true;
navigateToFirstNavEntry();
}
src/plugin/router.js
+16 -5
View File
@@ -2,8 +2,6 @@ import { createRouter, createWebHashHistory } from 'vue-router';
import { watchState } from './../service/watchState';
import MainLayout from '../views/Layout/MainLayout.vue';
import Charts from './../views/Charts/Charts.vue';
import FavoritesAvatar from './../views/Favorites/FavoritesAvatar.vue';
import FavoritesFriend from './../views/Favorites/FavoritesFriend.vue';
import FavoritesWorld from './../views/Favorites/FavoritesWorld.vue';
@@ -11,16 +9,17 @@ import Feed from './../views/Feed/Feed.vue';
import FriendList from './../views/FriendList/FriendList.vue';
import FriendLog from './../views/FriendLog/FriendLog.vue';
import FriendsLocations from './../views/FriendsLocations/FriendsLocations.vue';
import Gallery from './../views/Tools/Gallery.vue';
import GameLog from './../views/GameLog/GameLog.vue';
import Login from './../views/Login/Login.vue';
import MainLayout from '../views/Layout/MainLayout.vue';
import Moderation from './../views/Moderation/Moderation.vue';
import Notification from './../views/Notifications/Notification.vue';
import PlayerList from './../views/PlayerList/PlayerList.vue';
import ScreenshotMetadata from './../views/Tools/ScreenshotMetadata.vue';
import Search from './../views/Search/Search.vue';
import Settings from './../views/Settings/Settings.vue';
import Tools from './../views/Tools/Tools.vue';
import Gallery from './../views/Tools/Gallery.vue';
import ScreenshotMetadata from './../views/Tools/ScreenshotMetadata.vue';
const routes = [
{
@@ -82,7 +81,19 @@ const routes = [
{
path: 'charts',
name: 'charts',
component: Charts
redirect: { name: 'charts-instance' }
},
{
path: 'charts/instance',
name: 'charts-instance',
component: () =>
import('./../views/Charts/components/InstanceActivity.vue')
},
{
path: 'charts/mutual',
name: 'charts-mutual',
component: () =>
import('./../views/Charts/components/MutualFriends.vue')
},
{ path: 'tools', name: 'tools', component: Tools },
{
src/shared/constants/ui.js
+12 -5
View File
@@ -84,11 +84,18 @@ const navDefinitions = [
routeName: 'notification'
},
{
key: 'charts',
icon: 'ri-bar-chart-line',
tooltip: 'nav_tooltip.charts',
labelKey: 'nav_tooltip.charts',
routeName: 'charts'
key: 'charts-instance',
icon: 'ri-bar-chart-horizontal-line',
tooltip: 'view.charts.instance_activity.header',
labelKey: 'view.charts.instance_activity.header',
routeName: 'charts-instance'
},
{
key: 'charts-mutual',
icon: 'ri-group-2-line',
tooltip: 'view.charts.mutual_friend.tab_label',
labelKey: 'view.charts.mutual_friend.tab_label',
routeName: 'charts-mutual'
},
{
key: 'tools',
src/stores/charts.js
+1 -3
View File
@@ -1,4 +1,4 @@
import { computed, reactive, ref, watch } from 'vue';
import { computed, reactive, watch } from 'vue';
import { defineStore } from 'pinia';
import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n';
@@ -16,7 +16,6 @@ export const useChartsStore = defineStore('Charts', () => {
const { t } = useI18n();
const activeTab = ref('instance');
const mutualGraphFetchState = reactive(createDefaultFetchState());
const mutualGraphStatus = reactive({
isFetching: false,
@@ -94,7 +93,6 @@ export const useChartsStore = defineStore('Charts', () => {
}
return {
activeTab,
mutualGraphFetchState,
mutualGraphStatus,
resetMutualGraphState
src/stores/settings/appearance.js
+7 -5
View File
@@ -97,11 +97,13 @@ export const useAppearanceSettingsStore = defineStore(
const isNavCollapsed = ref(true);
const isSideBarTabShow = computed(() => {
const currentRouteName = router.currentRoute.value?.name;
return !(
currentRouteName === 'friends-locations' ||
currentRouteName === 'friend-list' ||
currentRouteName === 'charts'
);
return ![
'friends-locations',
'friend-list',
'charts',
'charts-instance',
'charts-mutual'
].includes(currentRouteName);
});
const isDataTableStriped = ref(false);
src/views/Charts/Charts.vue
-41
View File
@@ -1,41 +0,0 @@
<template>
<div id="chart" class="x-container">
<TabsUnderline v-model="activeTab" :items="chartTabs" :unmount-on-hide="false" class="charts-tabs">
<template #instance>
<InstanceActivity />
</template>
<template #mutual>
<MutualFriends />
</template>
</TabsUnderline>
<BackToTop target="#chart" :right="30" :bottom="30" />
</div>
</template>
<script setup>
import { computed, defineAsyncComponent } from 'vue';
import { TabsUnderline } from '@/components/ui/tabs';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';
import BackToTop from '@/components/BackToTop.vue';
import { useChartsStore } from '../../stores';
const InstanceActivity = defineAsyncComponent(() => import('./components/InstanceActivity.vue'));
const MutualFriends = defineAsyncComponent(() => import('./components/MutualFriends.vue'));
const { t } = useI18n();
const chartsStore = useChartsStore();
const { activeTab } = storeToRefs(chartsStore);
const chartTabs = computed(() => [
{ value: 'instance', label: t('view.charts.instance_activity.header') },
{ value: 'mutual', label: t('view.charts.mutual_friend.tab_label') }
]);
</script>
<style scoped>
:deep(.charts-tabs [data-slot='tabs-list']) {
margin: 0;
}
</style>
src/views/Charts/components/InstanceActivity.vue
+14 -4
View File
@@ -1,4 +1,5 @@
<template>
<div id="chart" class="x-container">
<div ref="instanceActivityRef" class="pt-12">
<BackToTop :target="instanceActivityRef" :right="30" :bottom="30" :teleport="false" />
<div class="options-container instance-activity" style="margin-top: 0">
@@ -33,7 +34,9 @@
<Popover>
<PopoverTrigger asChild>
<div>
<TooltipWrapper :content="t('view.charts.instance_activity.settings.header')" side="top">
<TooltipWrapper
:content="t('view.charts.instance_activity.settings.header')"
side="top">
<Button class="rounded-full" size="icon" variant="ghost" style="margin-right: 5px">
<Settings />
</Button>
@@ -57,7 +60,8 @@
<Switch
v-model="isDetailVisible"
@update:modelValue="
(value) => changeIsDetailInstanceVisible(value, () => handleSettingsChange())
(value) =>
changeIsDetailInstanceVisible(value, () => handleSettingsChange())
" />
</div>
<div v-if="isDetailVisible">
@@ -69,11 +73,14 @@
" />
</div>
<div v-if="isDetailVisible">
<span>{{ t('view.charts.instance_activity.settings.show_no_friend_instance') }}</span>
<span>{{
t('view.charts.instance_activity.settings.show_no_friend_instance')
}}</span>
<Switch
v-model="isNoFriendInstanceVisible"
@update:modelValue="
(value) => changeIsNoFriendInstanceVisible(value, () => handleSettingsChange())
(value) =>
changeIsNoFriendInstanceVisible(value, () => handleSettingsChange())
" />
</div>
</div>
@@ -157,9 +164,12 @@
:bar-width="barWidth" />
</template>
</div>
</div>
</template>
<script setup>
defineOptions({ name: 'ChartsInstance' });
import { computed, nextTick, onBeforeMount, onBeforeUnmount, onMounted, ref, watch } from 'vue';
import { ArrowLeft, ArrowRight, Calendar as CalendarIcon, Info, RefreshCcw, Settings } from 'lucide-vue-next';
import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card';
src/views/Charts/components/MutualFriends.vue
+12 -14
View File
@@ -1,5 +1,8 @@
<template>
<div class="mt-0 flex min-h-[calc(100vh-140px)] flex-col items-center justify-betweenpt-12" ref="mutualGraphRef">
<div id="chart" class="x-container">
<div
class="mt-0 flex min-h-[calc(100vh-140px)] flex-col items-center justify-betweenpt-12"
ref="mutualGraphRef">
<div class="flex items-center w-full">
<div
class="options-container mt-2 mb-0 flex flex-wrap items-center gap-3 bg-transparent px-0 pb-2 shadow-none">
@@ -46,9 +49,13 @@
</EmptyHeader>
</Empty>
</div>
<BackToTop target="#chart" :right="30" :bottom="30" />
</div>
</template>
<script setup>
defineOptions({ name: 'ChartsMutual' });
import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
import { Empty, EmptyDescription, EmptyHeader } from '@/components/ui/empty';
import { Button } from '@/components/ui/button';
@@ -60,6 +67,7 @@
import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n';
import BackToTop from '@/components/BackToTop.vue';
import Graph from 'graphology';
import Sigma from 'sigma';
import forceAtlas2 from 'graphology-layout-forceatlas2';
@@ -86,7 +94,6 @@
const appearanceStore = useAppearanceSettingsStore();
const { friends } = storeToRefs(friendStore);
const { currentUser } = storeToRefs(userStore);
const { activeTab } = storeToRefs(chartsStore);
const { isDarkMode } = storeToRefs(appearanceStore);
const cachedUsers = userStore.cachedUsers;
const showUserDialog = (userId) => userStore.showUserDialog(userId);
@@ -201,21 +208,12 @@
if (mutualGraphResizeObserver) mutualGraphResizeObserver.disconnect();
});
watch(
activeTab,
(tab) => {
if (tab === 'mutual') loadGraphFromDatabase();
},
{ immediate: true }
);
watch(
() => watchState.isFriendsLoaded,
(isFriendsLoaded) => {
if (isFriendsLoaded && activeTab.value === 'mutual') {
loadGraphFromDatabase();
}
}
if (isFriendsLoaded) loadGraphFromDatabase();
},
{ immediate: true }
);
function showStatusMessage(message, type = 'info') {
src/views/Layout/MainLayout.vue
+1 -1
View File
@@ -23,7 +23,7 @@
<template #default="{ layout }">
<ResizablePanel :default-size="mainDefaultSize" :order="1">
<RouterView v-slot="{ Component }">
<KeepAlive exclude="Charts">
<KeepAlive exclude="ChartsInstance, ChartsMutual">
<component :is="Component" />
</KeepAlive>
</RouterView>