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

Upgrade to Vue3 and Element Plus (#1374)

Browse Source 
* Update Vue devtools

* upgrade vue pinia element-plus vue-i18n, add vite

* fix: i18n

* global components

* change v-deep

* upgrade vue-lazyload

* data table

* update enlint and safe-dialog

* package.json and vite.config.js

* el-icon

* el-message

* vue 2 -> vue3 migration changes

* $pinia

* dialog

* el-popover slot

* lint

* chore

* slot

* scss

* remote state access

* misc

* jsconfig

* el-button size mini -> small

* :model-value

* ElMessageBox

* datatable

* remove v-lazyload

* template #dropdown

* mini -> small

* css

* byebye hideTooltips

* use sass-embedded

* Update SQLite, remove unneeded libraries

* Fix shift remove local avatar favorites

* Electron arm64

* arm64 support

* bye pug

* f-word vite hah

* misc

* remove safe dialog component

* Add self invite to launch dialog

* Fix errors

* Icons 1

* improve localfavorite loading performance

* improve favorites world item performance

* dialog visibility changes for Element Plus

* clear element plus error

* import performance

* revert App.vue hah

* hah

* Revert "Add self invite to launch dialog"

This reverts commit 4801cfad58.

* Toggle self invite/open in-game

* Self invite on launch dialog

* el-button icon

* el-icon

* fix user dialog tab switching logic

* fix PlayerList

* Formatting changes

* More icons

* Fix friend log table

* loading margin

* fix markdown

* fix world dialog tab switching issue

* Fixes and formatting

* fix: global i18n.t export

* fix favorites world tab not working

* Create instance, displayName

* Remove group members sort by userId

* Fix loading dialog tabs on swtich

* Star

* charts console.warn

* wip: fix charts

* wip: fix charts

* wip: charts composables

* fix favorite item tooltip warning

* Fixes and formatting

* Clean up image dialogs

* Remove unused method

* Fix platform/size border

* Fix platform/size border

* $vr

* fix friendExportDialogVisible binding

* ElMessageBox and Settings

* Login formatting

* Rename VR overlay query

* Fix image popover and userdialog badges

* Formatting

* Big buttons

* Fixes, update Cef

* Fix gameLog table nav buttons jumping around while using nav buttons

* Fix z-index

* vr overlay

* vite input add theme

* defineAsyncComponent

* ISO 639-1

* fix i18n

* clean t

* Formatting, fix calendar, rotate arrows

* Show user status when user is offline

* Fix VR overlay

* fix theme and clean up

* split InstanceActivity

* tweak

* Fix VR overlay formatting

* fix scss var

* AppDebug hahahaha

* Years

* remove reactive

* improve perf

* state hah…

* fix user rendering poblems when user object is not yet loaded

* improve perf

* Update avatar/world image uploader, licenses, remove previous images dialog (old images are now deleted)

* improve perf 1

* Suppress stray errors

* fix traveling location display issue

* Fix empty instance creator

* improve friend list refresh performance

* fix main charts

* fix chart

* Fix darkmode

* Fix avatar dialog tags

---------

Co-authored-by: pa <maplenagisa@gmail.com>
This commit is contained in:
Natsumi
2025-09-12 10:45:24 +12:00
committed by GitHub
parent b233bbc299
commit 3324d0d279
249 changed files with 12948 additions and 19815 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/stores/settings/advanced.js
+30 -31
View File
@@ -1,19 +1,21 @@
import { defineStore } from 'pinia';
import { computed, reactive, watch } from 'vue';
import { $app } from '../../app';
import { t } from '../../plugin';
import { ElMessageBox, ElMessage } from 'element-plus';
import { useI18n } from 'vue-i18n';
import configRepository from '../../service/config';
import { database } from '../../service/database';
import webApiService from '../../service/webapi';
import { watchState } from '../../service/watchState';
import { useGameStore } from '../game';
import { useVrcxStore } from '../vrcx';
import { AppGlobal } from '../../service/appConfig';
import { AppDebug } from '../../service/appConfig';
export const useAdvancedSettingsStore = defineStore('AdvancedSettings', () => {
const gameStore = useGameStore();
const vrcxStore = useVrcxStore();
const { t } = useI18n();
const state = reactive({
enablePrimaryPassword: false,
relaunchVRChatAfterCrash: false,
@@ -500,7 +502,7 @@ export const useAdvancedSettingsStore = defineStore('AdvancedSettings', () => {
}
});
const json = JSON.parse(response.data);
if (AppGlobal.debugWebRequests) {
if (AppDebug.debugWebRequests) {
console.log(json, response);
}
if (response.status === 200) {
@@ -516,7 +518,7 @@ export const useAdvancedSettingsStore = defineStore('AdvancedSettings', () => {
function cropPrintsChanged() {
if (!state.cropInstancePrints) return;
$app.$confirm(
ElMessageBox.confirm(
t(
'view.settings.advanced.advanced.save_instance_prints_to_file.crop_convert_old'
),
@@ -531,20 +533,20 @@ export const useAdvancedSettingsStore = defineStore('AdvancedSettings', () => {
showInput: false,
callback: async (action) => {
if (action === 'confirm') {
const msgBox = $app.$message({
const msgBox = ElMessage({
message: 'Batch print cropping in progress...',
type: 'warning',
duration: 0
});
try {
await AppApi.CropAllPrints(state.ugcFolderPath);
$app.$message({
ElMessage({
message: 'Batch print cropping complete',
type: 'success'
});
} catch (err) {
console.error(err);
$app.$message({
ElMessage({
message: `Batch print cropping failed: ${err}`,
type: 'error'
});
@@ -558,7 +560,7 @@ export const useAdvancedSettingsStore = defineStore('AdvancedSettings', () => {
}
function askDeleteAllScreenshotMetadata() {
$app.$confirm(
ElMessageBox.confirm(
t(
'view.settings.advanced.advanced.delete_all_screenshot_metadata.ask'
),
@@ -581,7 +583,7 @@ export const useAdvancedSettingsStore = defineStore('AdvancedSettings', () => {
}
function deleteAllScreenshotMetadata() {
$app.$confirm(
ElMessageBox.confirm(
t(
'view.settings.advanced.advanced.delete_all_screenshot_metadata.confirm'
),
@@ -596,20 +598,20 @@ export const useAdvancedSettingsStore = defineStore('AdvancedSettings', () => {
showInput: false,
callback: async (action) => {
if (action === 'confirm') {
const msgBox = $app.$message({
const msgBox = ElMessage({
message: 'Batch metadata removal in progress...',
type: 'warning',
duration: 0
});
try {
await AppApi.DeleteAllScreenshotMetadata();
$app.$message({
ElMessage({
message: 'Batch metadata removal complete',
type: 'success'
});
} catch (err) {
console.error(err);
$app.$message({
ElMessage({
message: `Batch metadata removal failed: ${err}`,
type: 'error'
});
@@ -664,7 +666,7 @@ export const useAdvancedSettingsStore = defineStore('AdvancedSettings', () => {
}
function promptAutoClearVRCXCacheFrequency() {
$app.$prompt(
ElMessageBox.prompt(
t('prompt.auto_clear_cache.description'),
t('prompt.auto_clear_cache.header'),
{
@@ -677,24 +679,21 @@ export const useAdvancedSettingsStore = defineStore('AdvancedSettings', () => {
2
).toString(),
inputPattern: /\d+$/,
inputErrorMessage: t('prompt.auto_clear_cache.input_error'),
callback: async (action, instance) => {
if (
action === 'confirm' &&
instance.inputValue &&
!isNaN(parseInt(instance.inputValue, 10))
) {
vrcxStore.clearVRCXCacheFrequency = Math.trunc(
parseInt(instance.inputValue, 10) * 3600 * 2
);
await configRepository.setString(
'VRCX_clearVRCXCacheFrequency',
vrcxStore.clearVRCXCacheFrequency.toString()
);
}
}
inputErrorMessage: t('prompt.auto_clear_cache.input_error')
}
);
)
.then(async ({ value }) => {
if (value && !isNaN(parseInt(value, 10))) {
vrcxStore.clearVRCXCacheFrequency = Math.trunc(
parseInt(value, 10) * 3600 * 2
);
await configRepository.setString(
'VRCX_clearVRCXCacheFrequency',
vrcxStore.clearVRCXCacheFrequency.toString()
);
}
})
.catch(() => {});
}
return {
src/stores/settings/appearance.js
+34 -42
View File
@@ -1,14 +1,14 @@
import { defineStore } from 'pinia';
import { computed, reactive, watch } from 'vue';
import { $app } from '../../app';
import { i18n, t } from '../../plugin';
import { useI18n } from 'vue-i18n';
import { ElMessageBox } from 'element-plus';
import configRepository from '../../service/config';
import { database } from '../../service/database';
import { watchState } from '../../service/watchState';
import {
changeAppDarkStyle,
changeAppThemeStyle,
changeCJKFontsOrder,
getNameColour,
HueToHex,
systemIsDarkMode,
@@ -36,13 +36,14 @@ export const useAppearanceSettingsStore = defineStore(
const vrcxStore = useVrcxStore();
const userStore = useUserStore();
const { t, availableLocales, locale } = useI18n();
const state = reactive({
appLanguage: 'en',
themeMode: '',
isDarkMode: false,
displayVRCPlusIconsAsAvatar: false,
hideNicknames: false,
hideTooltips: false,
isAgeGatedInstancesVisible: false,
sortFavorites: true,
instanceUsersSortAlphabetical: false,
@@ -83,7 +84,6 @@ export const useAppearanceSettingsStore = defineStore(
themeMode,
displayVRCPlusIconsAsAvatar,
hideNicknames,
hideTooltips,
isAgeGatedInstancesVisible,
sortFavorites,
instanceUsersSortAlphabetical,
@@ -105,7 +105,6 @@ export const useAppearanceSettingsStore = defineStore(
configRepository.getString('VRCX_ThemeMode', 'system'),
configRepository.getBool('displayVRCPlusIconsAsAvatar', true),
configRepository.getBool('VRCX_hideNicknames', false),
configRepository.getBool('VRCX_hideTooltips', false),
configRepository.getBool(
'VRCX_isAgeGatedInstancesVisible',
true
@@ -158,23 +157,21 @@ export const useAppearanceSettingsStore = defineStore(
const result = await AppApi.CurrentLanguage();
const lang = result.split('-')[0];
i18n.availableLocales.forEach((ref) => {
availableLocales.forEach((ref) => {
const refLang = ref.split('_')[0];
if (refLang === lang) {
changeAppLanguage(ref);
}
});
} else {
state.appLanguage = appLanguage;
changeAppLanguage(appLanguage);
}
changeCJKFontsOrder(state.appLanguage);
state.themeMode = themeMode;
applyThemeMode(themeMode);
applyThemeMode();
state.displayVRCPlusIconsAsAvatar = displayVRCPlusIconsAsAvatar;
state.hideNicknames = hideNicknames;
state.hideTooltips = hideTooltips;
state.isAgeGatedInstancesVisible = isAgeGatedInstancesVisible;
state.sortFavorites = sortFavorites;
state.instanceUsersSortAlphabetical = instanceUsersSortAlphabetical;
@@ -222,7 +219,6 @@ export const useAppearanceSettingsStore = defineStore(
() => state.displayVRCPlusIconsAsAvatar
);
const hideNicknames = computed(() => state.hideNicknames);
const hideTooltips = computed(() => state.hideTooltips);
const isAgeGatedInstancesVisible = computed(
() => state.isAgeGatedInstancesVisible
);
@@ -280,8 +276,9 @@ export const useAppearanceSettingsStore = defineStore(
console.log('Language changed:', language);
state.appLanguage = language;
configRepository.setString('VRCX_appLanguage', language);
changeCJKFontsOrder(state.appLanguage);
i18n.locale = state.appLanguage;
locale.value = state.appLanguage;
const htmlElement = document.documentElement;
htmlElement.setAttribute('lang', state.appLanguage);
}
/**
@@ -296,7 +293,7 @@ export const useAppearanceSettingsStore = defineStore(
async function changeThemeMode() {
await changeAppThemeStyle(state.themeMode);
vrStore.updateVRConfigVars();
await updateTrustColor();
await updateTrustColor(undefined, undefined);
}
/**
@@ -337,6 +334,7 @@ export const useAppearanceSettingsStore = defineStore(
Array.from(userStore.cachedUsers.keys())
);
if (LINUX) {
// @ts-ignore
dictObject = Object.fromEntries(dictObject);
}
for (const [userId, hue] of Object.entries(dictObject)) {
@@ -456,10 +454,6 @@ export const useAppearanceSettingsStore = defineStore(
state.hideNicknames = !state.hideNicknames;
configRepository.setBool('VRCX_hideNicknames', state.hideNicknames);
}
function setHideTooltips() {
state.hideTooltips = !state.hideTooltips;
configRepository.setBool('VRCX_hideTooltips', state.hideTooltips);
}
function setIsAgeGatedInstancesVisible() {
state.isAgeGatedInstancesVisible =
!state.isAgeGatedInstancesVisible;
@@ -673,35 +667,35 @@ export const useAppearanceSettingsStore = defineStore(
}
function promptMaxTableSizeDialog() {
$app.$prompt(
ElMessageBox.prompt(
t('prompt.change_table_size.description'),
t('prompt.change_table_size.header'),
{
distinguishCancelAndClose: true,
confirmButtonText: t('prompt.change_table_size.save'),
cancelButtonText: t('prompt.change_table_size.cancel'),
inputValue: vrcxStore.maxTableSize,
inputValue: vrcxStore.maxTableSize.toString(),
inputPattern: /\d+$/,
inputErrorMessage: t(
'prompt.change_table_size.input_error'
),
callback: async (action, instance) => {
if (action === 'confirm' && instance.inputValue) {
if (instance.inputValue > 10000) {
instance.inputValue = 10000;
}
vrcxStore.maxTableSize = instance.inputValue;
await configRepository.setString(
'VRCX_maxTableSize',
vrcxStore.maxTableSize
);
database.setMaxTableSize(vrcxStore.maxTableSize);
feedStore.feedTableLookup();
gameLogStore.gameLogTableLookup();
}
}
inputErrorMessage: t('prompt.change_table_size.input_error')
}
);
)
.then(async ({ value }) => {
if (value) {
let processedValue = Number(value);
if (processedValue > 10000) {
processedValue = 10000;
}
vrcxStore.maxTableSize = processedValue;
await configRepository.setString(
'VRCX_maxTableSize',
vrcxStore.maxTableSize.toString()
);
database.setMaxTableSize(vrcxStore.maxTableSize);
feedStore.feedTableLookup();
gameLogStore.gameLogTableLookup();
}
})
.catch(() => {});
}
async function tryInitUserColours() {
@@ -721,7 +715,6 @@ export const useAppearanceSettingsStore = defineStore(
isDarkMode,
displayVRCPlusIconsAsAvatar,
hideNicknames,
hideTooltips,
isAgeGatedInstancesVisible,
sortFavorites,
instanceUsersSortAlphabetical,
@@ -746,7 +739,6 @@ export const useAppearanceSettingsStore = defineStore(
setAppLanguage,
setDisplayVRCPlusIconsAsAvatar,
setHideNicknames,
setHideTooltips,
setIsAgeGatedInstancesVisible,
setSortFavorites,
setInstanceUsersSortAlphabetical,
src/stores/settings/discordPresence.js
+1 -1
View File
@@ -18,7 +18,7 @@ import {
ActivityType,
StatusDisplayType
} from '../../shared/constants/discord';
import { useI18n } from 'vue-i18n-bridge';
import { useI18n } from 'vue-i18n';
export const useDiscordPresenceSettingsStore = defineStore(
'DiscordPresenceSettings',
src/stores/settings/general.js
+27 -13
View File
@@ -1,8 +1,9 @@
import { defineStore } from 'pinia';
import { computed, reactive } from 'vue';
import * as workerTimers from 'worker-timers';
import { $app } from '../../app';
import { t } from '../../plugin';
import { ElMessageBox } from 'element-plus';
import { useI18n } from 'vue-i18n';
import configRepository from '../../service/config';
import { useVrcxStore } from '../vrcx';
import { useVRCXUpdaterStore } from '../vrcxUpdater';
@@ -12,6 +13,8 @@ export const useGeneralSettingsStore = defineStore('GeneralSettings', () => {
const vrcxStore = useVrcxStore();
const VRCXUpdaterStore = useVRCXUpdaterStore();
const friendStore = useFriendStore();
const { t } = useI18n();
const state = reactive({
isStartAtWindowsStartup: false,
isStartAsMinimizedState: false,
@@ -259,7 +262,7 @@ export const useGeneralSettingsStore = defineStore('GeneralSettings', () => {
}
function promptProxySettings() {
$app.$prompt(
ElMessageBox.prompt(
t('prompt.proxy_settings.description'),
t('prompt.proxy_settings.header'),
{
@@ -267,9 +270,26 @@ export const useGeneralSettingsStore = defineStore('GeneralSettings', () => {
confirmButtonText: t('prompt.proxy_settings.restart'),
cancelButtonText: t('prompt.proxy_settings.close'),
inputValue: vrcxStore.proxyServer,
inputPlaceholder: t('prompt.proxy_settings.placeholder'),
callback: async (action, instance) => {
vrcxStore.proxyServer = instance.inputValue;
inputPlaceholder: t('prompt.proxy_settings.placeholder')
}
)
.then(async ({ value }) => {
vrcxStore.proxyServer = value;
await VRCXStorage.Set(
'VRCX_ProxyServer',
vrcxStore.proxyServer
);
await VRCXStorage.Flush();
await new Promise((resolve) => {
workerTimers.setTimeout(resolve, 100);
});
const { restartVRCX } = VRCXUpdaterStore;
const isUpgrade = false;
restartVRCX(isUpgrade);
})
.catch(async () => {
// User clicked close/cancel, still save the value but don't restart
if (vrcxStore.proxyServer !== undefined) {
await VRCXStorage.Set(
'VRCX_ProxyServer',
vrcxStore.proxyServer
@@ -278,14 +298,8 @@ export const useGeneralSettingsStore = defineStore('GeneralSettings', () => {
await new Promise((resolve) => {
workerTimers.setTimeout(resolve, 100);
});
if (action === 'confirm') {
const { restartVRCX } = VRCXUpdaterStore;
const isUpgrade = false;
restartVRCX(isUpgrade);
}
}
}
);
});
}
return {
src/stores/settings/notifications.js
+21 -21
View File
@@ -1,7 +1,8 @@
import { defineStore } from 'pinia';
import { computed, reactive } from 'vue';
import { $app } from '../../app';
import { t } from '../../plugin';
import { ElMessageBox } from 'element-plus';
import { useI18n } from 'vue-i18n';
import configRepository from '../../service/config';
import { sharedFeedFiltersDefaults } from '../../shared/constants';
import { useVrStore } from '../vr';
@@ -10,6 +11,8 @@ export const useNotificationsSettingsStore = defineStore(
'NotificationsSettings',
() => {
const vrStore = useVrStore();
const { t } = useI18n();
const state = reactive({
overlayToast: true,
openVR: false,
@@ -441,7 +444,7 @@ export const useNotificationsSettingsStore = defineStore(
}
function promptNotificationTimeout() {
$app.$prompt(
ElMessageBox.prompt(
t('prompt.notification_timeout.description'),
t('prompt.notification_timeout.header'),
{
@@ -452,25 +455,22 @@ export const useNotificationsSettingsStore = defineStore(
inputPattern: /\d+$/,
inputErrorMessage: t(
'prompt.notification_timeout.input_error'
),
callback: async (action, instance) => {
if (
action === 'confirm' &&
instance.inputValue &&
!isNaN(instance.inputValue)
) {
state.notificationTimeout = Math.trunc(
Number(instance.inputValue) * 1000
);
await configRepository.setString(
'VRCX_notificationTimeout',
state.notificationTimeout
);
vrStore.updateVRConfigVars();
}
}
)
}
);
)
.then(async ({ value }) => {
if (value && !isNaN(value)) {
state.notificationTimeout = Math.trunc(
Number(value) * 1000
);
await configRepository.setString(
'VRCX_notificationTimeout',
state.notificationTimeout
);
vrStore.updateVRConfigVars();
}
})
.catch(() => {});
}
return {
src/stores/settings/wristOverlay.js
+9 -8
View File
@@ -10,9 +10,9 @@ export const useWristOverlaySettingsStore = defineStore(
hidePrivateFromFeed: false,
openVRAlways: false,
overlaybutton: false,
overlayHand: 0,
overlayHand: '0',
vrBackgroundEnabled: false,
minimalFeed: false,
minimalFeed: true,
hideDevicesFromFeed: false,
vrOverlayCpuUsage: false,
hideUptimeFromFeed: false,
@@ -39,7 +39,7 @@ export const useWristOverlaySettingsStore = defineStore(
configRepository.getBool('VRCX_overlaybutton', false),
configRepository.getInt('VRCX_overlayHand', 0),
configRepository.getBool('VRCX_vrBackgroundEnabled', false),
configRepository.getBool('VRCX_minimalFeed', false),
configRepository.getBool('VRCX_minimalFeed', true),
configRepository.getBool('VRCX_hideDevicesFromFeed', false),
configRepository.getBool('VRCX_vrOverlayCpuUsage', false),
configRepository.getBool('VRCX_hideUptimeFromFeed', false),
@@ -50,7 +50,7 @@ export const useWristOverlaySettingsStore = defineStore(
state.hidePrivateFromFeed = hidePrivateFromFeed;
state.openVRAlways = openVRAlways;
state.overlaybutton = overlaybutton;
state.overlayHand = overlayHand;
state.overlayHand = String(overlayHand);
state.vrBackgroundEnabled = vrBackgroundEnabled;
state.minimalFeed = minimalFeed;
state.hideDevicesFromFeed = hideDevicesFromFeed;
@@ -94,11 +94,12 @@ export const useWristOverlaySettingsStore = defineStore(
* @param {string} value
*/
function setOverlayHand(value) {
state.overlayHand = parseInt(value, 10);
if (isNaN(state.overlayHand)) {
state.overlayHand = 0;
state.overlayHand = value;
let overlayHandInt = parseInt(value, 10);
if (isNaN(overlayHandInt)) {
overlayHandInt = 0;
}
configRepository.setInt('VRCX_overlayHand', value);
configRepository.setInt('VRCX_overlayHand', overlayHandInt);
}
function setVrBackgroundEnabled() {
state.vrBackgroundEnabled = !state.vrBackgroundEnabled;