feat: add vue-router

src/views/Charts/Charts.vue

@@ -1,10 +1,10 @@
 <template>
-    <div id="chart" class="x-container" v-show="menuActiveIndex === 'charts'">
+    <div id="chart" class="x-container">
         <div class="options-container" style="margin-top: 0">
             <span class="header">{{ t('view.charts.header') }}</span>
         </div>
         <keep-alive>
-            <InstanceActivity v-if="menuActiveIndex === 'charts'" />
+            <InstanceActivity />
         </keep-alive>
         <el-backtop target="#chart" :right="30" :bottom="30"></el-backtop>
     </div>
@@ -12,15 +12,9 @@
 
 <script setup>
     import { defineAsyncComponent } from 'vue';
-    import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 
-    import { useUiStore } from '../../stores';
-
     const InstanceActivity = defineAsyncComponent(() => import('./components/InstanceActivity.vue'));
 
     const { t } = useI18n();
-
-    const uiStore = useUiStore();
-    const { menuActiveIndex } = storeToRefs(uiStore);
 </script>

src/views/Favorites/Favorites.vue

@@ -1,5 +1,5 @@
 <template>
-    <div v-show="menuActiveIndex === 'favorite'" class="x-container">
+    <div class="x-container">
         <div
             style="
                 font-size: 13px;
@@ -98,7 +98,6 @@
         showWorldImportDialog,
         showAvatarImportDialog
     } = useFavoriteStore();
-    const { menuActiveIndex } = storeToRefs(useUiStore());
     const { applyAvatar } = useAvatarStore();
 
     const editFavoritesMode = ref(false);

src/views/Feed/Feed.vue

@@ -1,5 +1,5 @@
 <template>
-    <div v-show="menuActiveIndex === 'feed'" class="x-container feed">
+    <div class="x-container feed">
         <div style="margin: 0 0 10px; display: flex; align-items: center">
             <div style="flex: none; margin-right: 10px; display: flex; align-items: center">
                 <el-tooltip placement="bottom" :content="t('view.feed.favorites_only_tooltip')">
@@ -319,7 +319,6 @@
     const { showUserDialog } = useUserStore();
     const { feedTable } = storeToRefs(useFeedStore());
     const { feedTableLookup } = useFeedStore();
-    const { menuActiveIndex } = storeToRefs(useUiStore());
     const { showFullscreenImageDialog } = useGalleryStore();
 
     const { t } = useI18n();

src/views/FriendList/FriendList.vue

@@ -1,5 +1,5 @@
 <template>
-    <div v-show="menuActiveIndex === 'friendList'" class="x-container">
+    <div class="x-container">
         <div style="padding: 0 10px 0 10px">
             <div style="display: flex; align-items: center; justify-content: space-between">
                 <span class="header">{{ t('view.friend_list.header') }}</span>
@@ -256,11 +256,12 @@
 </template>
 
 <script setup>
-    import { nextTick, onMounted, reactive, ref, watch } from 'vue';
     import { Close, Loading, Refresh, RefreshLeft } from '@element-plus/icons-vue';
+    import { nextTick, reactive, ref, watch } from 'vue';
     import { ElMessageBox } from 'element-plus';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
+    import { useRoute } from 'vue-router';
 
     import {
         formatDateFilter,
@@ -279,7 +280,6 @@
         useFriendStore,
         useGalleryStore,
         useSearchStore,
-        useUiStore,
         useUserStore
     } from '../../stores';
     import { friendRequest, userRequest } from '../../api';
@@ -293,7 +293,6 @@
     const { getAllUserStats, confirmDeleteFriend, handleFriendDelete } = useFriendStore();
     const { randomUserColours } = storeToRefs(useAppearanceSettingsStore());
     const { showUserDialog } = useUserStore();
-    const { menuActiveIndex } = storeToRefs(useUiStore());
     const { stringComparer, friendsListSearch } = storeToRefs(useSearchStore());
     const { showFullscreenImageDialog } = useGalleryStore();
 
@@ -310,15 +309,19 @@
     const friendsListSearchFilterVIP = ref(false);
     const friendsListBulkUnfriendForceUpdate = ref(0);
 
-    watch(menuActiveIndex, (val) => {
-        if (val === 'friendList') nextTick(friendsListSearchChange);
-    });
+    const route = useRoute();
 
-    onMounted(() => {
-        friendsListSearchChange();
-    });
+    watch(
+        () => route.path,
+        (newPath, oldPath) => {
+            console.log('Route changed - FriendsList', newPath, oldPath);
+            nextTick(() => friendsListSearchChange());
+        },
+        { immediate: true }
+    );
 
     function friendsListSearchChange() {
+        console.log('Friends List Search Change');
         friendsListLoading.value = true;
         let query = '';
         let cleanedQuery = '';

src/views/FriendLog/FriendLog.vue

@@ -1,5 +1,5 @@
 <template>
-    <div v-show="menuActiveIndex === 'friendLog'" class="x-container">
+    <div class="x-container">
         <!-- 工具栏 -->
         <div style="margin: 0 0 10px; display: flex; align-items: center">
             <el-select
@@ -105,7 +105,6 @@
     const { showUserDialog } = useUserStore();
     const { friendLogTable } = storeToRefs(useFriendStore());
     const { shiftHeld } = storeToRefs(useUiStore());
-    const { menuActiveIndex } = storeToRefs(useUiStore());
 
     watch(
         () => hideUnfriends.value,

src/views/GameLog/GameLog.vue

@@ -1,5 +1,5 @@
 <template>
-    <div v-show="menuActiveIndex === 'gameLog'" class="x-container">
+    <div class="x-container">
         <div style="margin: 0 0 10px; display: flex; align-items: center">
             <div style="flex: none; margin-right: 10px; display: flex; align-items: center">
                 <el-tooltip placement="bottom" :content="t('view.feed.favorites_only_tooltip')">
@@ -204,7 +204,7 @@
     const { showWorldDialog } = useWorldStore();
     const { lookupUser } = useUserStore();
     const { showPreviousInstancesInfoDialog } = useInstanceStore();
-    const { menuActiveIndex, shiftHeld } = storeToRefs(useUiStore());
+    const { shiftHeld } = storeToRefs(useUiStore());
     const { gameLogIsFriend, gameLogIsFavorite, gameLogTableLookup } = useGameLogStore();
     const { gameLogTable } = storeToRefs(useGameLogStore());
     const { updateSharedFeed } = useSharedFeedStore();

src/views/Moderation/Moderation.vue

@@ -1,5 +1,5 @@
 <template>
-    <div v-show="menuActiveIndex === 'moderation'" class="x-container">
+    <div class="x-container">
         <!-- 工具栏 -->
         <div class="tool-slot">
             <el-select
@@ -108,7 +108,7 @@
     const { showUserDialog } = useUserStore();
     const { isPlayerModerationsLoading, playerModerationTable } = storeToRefs(useModerationStore());
     const { refreshPlayerModerations, handlePlayerModerationDelete } = useModerationStore();
-    const { menuActiveIndex, shiftHeld } = storeToRefs(useUiStore());
+    const { shiftHeld } = storeToRefs(useUiStore());
     const { currentUser } = storeToRefs(useUserStore());
 
     const filters = ref([

src/views/Notifications/Notification.vue

@@ -1,5 +1,5 @@
 <template>
-    <div v-show="menuActiveIndex === 'notification'" v-loading="isNotificationsLoading" class="x-container">
+    <div v-loading="isNotificationsLoading" class="x-container">
         <div style="margin: 0 0 10px; display: flex; align-items: center">
             <el-select
                 v-model="notificationTable.filters[0].value"
@@ -400,7 +400,6 @@
         useInviteStore,
         useLocationStore,
         useNotificationStore,
-        useUiStore,
         useUserStore,
         useWorldStore
     } from '../../stores';
@@ -427,7 +426,6 @@
     const { clearInviteImageUpload } = useGalleryStore();
     const { notificationTable, isNotificationsLoading } = storeToRefs(useNotificationStore());
     const { refreshNotifications, handleNotificationHide } = useNotificationStore();
-    const { menuActiveIndex, shiftHeld } = storeToRefs(useUiStore());
     const { isGameRunning } = storeToRefs(useGameStore());
     const { showFullscreenImageDialog } = useGalleryStore();
     const { currentUser } = storeToRefs(useUserStore());

src/views/PlayerList/PlayerList.vue

@@ -1,5 +1,5 @@
 <template>
-    <div v-show="menuActiveIndex === 'playerList'" class="x-container" style="padding-top: 5px">
+    <div class="x-container" style="padding-top: 5px">
         <div style="display: flex; flex-direction: column; height: 100%">
             <div v-if="currentInstanceWorld.ref.id" style="display: flex">
                 <img
@@ -441,7 +441,6 @@
     const { currentInstanceLocation, currentInstanceWorld } = storeToRefs(useInstanceStore());
     const { getCurrentInstanceUserList } = useInstanceStore();
     const { currentInstanceUsersTable } = storeToRefs(useInstanceStore());
-    const { menuActiveIndex } = storeToRefs(useUiStore());
     const { showFullscreenImageDialog } = useGalleryStore();
     const { currentUser } = storeToRefs(useUserStore());
 

src/views/Profile/Profile.vue

@@ -1,5 +1,5 @@
 <template>
-    <div v-show="menuActiveIndex === 'profile'" class="x-container">
+    <div class="x-container">
         <div class="options-container" style="margin-top: 0">
             <span class="header">{{ t('view.profile.profile.header') }}</span>
             <div class="x-friend-list" style="margin-top: 10px">
@@ -514,7 +514,6 @@
         inviteRequestMessageTable,
         inviteRequestResponseMessageTable
     } = storeToRefs(useInviteStore());
-    const { menuActiveIndex } = storeToRefs(useUiStore());
     const { directAccessWorld } = useSearchStore();
     const { logout } = useAuthStore();
     const { cachedConfig } = storeToRefs(useAuthStore());

src/views/Search/Search.vue

@@ -1,5 +1,5 @@
 <template>
-    <div v-show="menuActiveIndex === 'search'" class="x-container">
+    <div class="x-container">
         <div style="margin: 0 0 10px; display: flex; align-items: center">
             <el-input
                 :model-value="searchText"
@@ -320,7 +320,6 @@
         useAvatarStore,
         useGroupStore,
         useSearchStore,
-        useUiStore,
         useUserStore,
         useWorldStore
     } from '../../stores';
@@ -343,7 +342,6 @@
     const { showAvatarDialog, lookupAvatars, cachedAvatars } = useAvatarStore();
     const { cachedWorlds, showWorldDialog } = useWorldStore();
     const { showGroupDialog, applyGroup } = useGroupStore();
-    const { menuActiveIndex } = storeToRefs(useUiStore());
     const { searchText, searchUserResults } = storeToRefs(useSearchStore());
     const { clearSearch, moreSearchUser } = useSearchStore();
     const { cachedConfig } = storeToRefs(useAuthStore());

src/views/Settings/Settings.vue

@@ -1,5 +1,5 @@
 <template>
-    <div v-show="menuActiveIndex === 'settings'" class="x-container">
+    <div class="x-container">
         <div class="options-container" style="margin-top: 0; padding: 5px">
             <span class="header">{{ t('view.settings.header') }}</span>
         </div>
@@ -1413,7 +1413,6 @@
         useAvatarProviderStore,
         useAvatarStore,
         useFavoriteStore,
-        useFriendStore,
         useGameLogStore,
         useGeneralSettingsStore,
         useGroupStore,
@@ -1469,7 +1468,6 @@
     const { cachedWorlds } = useWorldStore();
     const { cachedInstances } = useInstanceStore();
     const { showLaunchOptions } = useLaunchStore();
-    const { menuActiveIndex } = storeToRefs(useUiStore());
     const { enablePrimaryPasswordChange } = useAuthStore();
     const { saveOpenVROption, updateVRLastLocation, updateOpenVR, updateVRConfigVars } = useVrStore();
     const { clearVRCXCache, showRegistryBackupDialog } = useVrcxStore();
@@ -1519,7 +1517,6 @@
         isAgeGatedInstancesVisible,
         sortFavorites,
         instanceUsersSortAlphabetical,
-        tablePageSize,
         dtHour12,
         dtIsoFormat,
         sidebarSortMethod1,

src/views/Tools/Tools.vue

@@ -1,5 +1,5 @@
 <template>
-    <div id="chart" class="x-container" v-show="isShowToolsTab">
+    <div id="chart" class="x-container">
         <div class="options-container" style="margin-top: 0">
             <span class="header">{{ t('view.tools.header') }}</span>
 
@@ -157,7 +157,7 @@
                 </div>
             </div>
         </div>
-        <template v-if="isShowToolsTab">
+        <template v-if="isToolsTabVisible">
             <GroupCalendarDialog
                 :visible="isGroupCalendarDialogVisible"
                 @close="isGroupCalendarDialogVisible = false" />
@@ -180,13 +180,14 @@
 </template>
 
 <script setup>
-    import { computed, defineAsyncComponent, ref } from 'vue';
+    import { computed, defineAsyncComponent, ref, watch } from 'vue';
     import { ArrowRight } from '@element-plus/icons-vue';
     import { ElMessage } from 'element-plus';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
+    import { useRoute } from 'vue-router';
 
-    import { useFriendStore, useGalleryStore, useUiStore } from '../../stores';
+    import { useFriendStore, useGalleryStore } from '../../stores';
 
     const GroupCalendarDialog = defineAsyncComponent(() => import('./dialogs/GroupCalendarDialog.vue'));
     const ScreenshotMetadataDialog = defineAsyncComponent(() => import('./dialogs/ScreenshotMetadataDialog.vue'));
@@ -199,9 +200,7 @@
 
     const { t } = useI18n();
 
-    const uiStore = useUiStore();
     const { showGalleryDialog } = useGalleryStore();
-    const { menuActiveIndex } = storeToRefs(uiStore);
     const { friends } = storeToRefs(useFriendStore());
 
     const categoryCollapsed = ref({
@@ -216,8 +215,9 @@
     const isExportDiscordNamesDialogVisible = ref(false);
     const isExportFriendsListDialogVisible = ref(false);
     const isExportAvatarsListDialogVisible = ref(false);
-
-    const isShowToolsTab = computed(() => menuActiveIndex.value === 'tools');
+    const isToolsTabVisible = computed(() => {
+        return useRoute().name === 'tools';
+    });
 
     const showGroupCalendarDialog = () => {
         isGroupCalendarDialogVisible.value = true;