MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-04-17 13:53:52 +02:00
Code Issues Packages Projects Releases Wiki Activity

Organize bootstrap.js

Browse Source
This commit is contained in:
pa
2025-09-14 16:36:02 +09:00
committed by Natsumi
parent 875459689f
commit b2b8e6ba3f
16 changed files with 221 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
src/App.vue
View File

@@ -84,10 +84,22 @@
</template>
<script setup>
import { onMounted, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { createGlobalStores } from './stores';
import { watchState } from './service/watchState';
import './app.scss';
import en from 'element-plus/es/locale/lang/en';
import es from 'element-plus/es/locale/lang/es';
import fr from 'element-plus/es/locale/lang/fr';
import hu from 'element-plus/es/locale/lang/hu';
import ja from 'element-plus/es/locale/lang/ja';
import ko from 'element-plus/es/locale/lang/ko';
import pl from 'element-plus/es/locale/lang/pl';
import pt from 'element-plus/es/locale/lang/pt';
import cs from 'element-plus/es/locale/lang/cs';
import ru from 'element-plus/es/locale/lang/ru';
import vi from 'element-plus/es/locale/lang/vi';
import zhCN from 'element-plus/es/locale/lang/zh-cn';
import zhTW from 'element-plus/es/locale/lang/zh-tw';
import th from 'element-plus/es/locale/lang/th';
import Login from './views/Login/Login.vue';
import NavMenu from './components/NavMenu.vue';
@@ -124,20 +136,17 @@
import VRChatConfigDialog from './views/Settings/dialogs/VRChatConfigDialog.vue';
import PrimaryPasswordDialog from './views/Settings/dialogs/PrimaryPasswordDialog.vue';
import en from 'element-plus/es/locale/lang/en';
import es from 'element-plus/es/locale/lang/es';
import fr from 'element-plus/es/locale/lang/fr';
import hu from 'element-plus/es/locale/lang/hu';
import ja from 'element-plus/es/locale/lang/ja';
import ko from 'element-plus/es/locale/lang/ko';
import pl from 'element-plus/es/locale/lang/pl';
import pt from 'element-plus/es/locale/lang/pt';
import cs from 'element-plus/es/locale/lang/cs';
import ru from 'element-plus/es/locale/lang/ru';
import vi from 'element-plus/es/locale/lang/vi';
import zhCN from 'element-plus/es/locale/lang/zh-cn';
import zhTW from 'element-plus/es/locale/lang/zh-tw';
import th from 'element-plus/es/locale/lang/th';
import { onMounted, computed, onBeforeMount } from 'vue';
import { createGlobalStores } from './stores';
import { watchState } from './service/watchState';
import { useI18n } from 'vue-i18n';
import { initNoty } from './plugin/noty';
console.log(`isLinux: ${LINUX}`);
const { locale } = useI18n();
initNoty();
const langMap = {
en: en,
@@ -160,15 +169,15 @@
return langMap[locale.value] || en;
});
const { locale } = useI18n();
const store = createGlobalStores();
if (typeof window !== 'undefined') {
window.$pinia = store;
}
store.updateLoop.updateLoop();
onBeforeMount(() => {
store.updateLoop.updateLoop();
});
onMounted(async () => {
store.gameLog.getGameLogTable();

28
src/app.js
View File

@@ -5,28 +5,24 @@
// For a copy, see <https://opensource.org/licenses/MIT>.
import { createApp } from 'vue';
import './bootstrap';
import { i18n } from './plugin/i18n';
import App from './App.vue';
import { pinia } from './stores';
import { initPlugins } from './plugin';
import { i18n } from './plugin/i18n';
import { initComponents } from './plugin/components';
import ElementPlus from 'element-plus';
import App from './App.vue';
import './app.scss';
import registerComponents from './plugin/components';
console.log(`isLinux: ${LINUX}`);
initPlugins();
// #region | Hey look it's most of VRCX!
// prompt: 'Please clean up and refactor the VRCX codebase.'
const $app = createApp(App);
$app.use(pinia);
$app.use(i18n);
$app.use(ElementPlus);
const app = createApp(App);
registerComponents($app);
app.use(pinia);
app.use(i18n);
app.use(ElementPlus);
initComponents(app);
$app.mount('#root');
app.mount('#root');
window.$app = $app;
export { $app };
window.$app = app;

17
src/app.scss
View File

@@ -12,10 +12,19 @@
@use './assets/scss/animated-emoji.scss';
@use 'element-plus/theme-chalk/src/index.scss' as *;
@import 'element-plus/theme-chalk/src/dark/css-vars.scss';
@import 'animate.css/animate.min.css';
@import 'noty/lib/noty.css';
@import 'remixicon/fonts/remixicon.css';
@use '@fontsource/noto-sans-kr/korean.css';
@use '@fontsource/noto-sans-jp/japanese.css';
@use '@fontsource/noto-sans-sc/chinese-simplified.css';
@use '@fontsource/noto-sans-tc/chinese-traditional.css';
@use '@fontsource/noto-sans-kr';
@use '@fontsource/noto-sans-jp';
@use '@fontsource/noto-sans-sc';
@use '@fontsource/noto-sans-tc';
@use 'element-plus/theme-chalk/src/dark/css-vars.scss';
@use 'animate.css/animate.min.css';
@use 'noty/lib/noty.css';
@use 'remixicon/fonts/remixicon.css';
.color-palettes {
background: #409eff;

96
src/bootstrap.js vendored
View File

@@ -1,96 +0,0 @@
import '@fontsource/noto-sans-kr/korean.css';
import '@fontsource/noto-sans-jp/japanese.css';
import '@fontsource/noto-sans-sc/chinese-simplified.css';
import '@fontsource/noto-sans-tc/chinese-traditional.css';
import '@fontsource/noto-sans-kr';
import '@fontsource/noto-sans-jp';
import '@fontsource/noto-sans-sc';
import '@fontsource/noto-sans-tc';
import configRepository from './service/config';
import vrcxJsonStorage from './service/jsonStorage';
import {
changeAppDarkStyle,
changeAppThemeStyle,
refreshCustomCss,
refreshCustomScript,
systemIsDarkMode
} from './shared/utils/base/ui';
import { i18n } from './plugin/i18n';
import { initNoty } from './plugin/noty';
import './plugin/ipc';
import './plugin/dayjs';
initNoty(false);
configRepository.init();
AppApi.SetUserAgent();
// prevent flicker on login page
function setLoginContainerStyle(isDarkMode) {
const loginContainerStyle = document.createElement('style');
loginContainerStyle.id = 'login-container-style';
loginContainerStyle.type = 'text/css';
const backgroundColor = isDarkMode ? '#101010' : '#ffffff';
const inputBackgroundColor = isDarkMode ? '#333333' : '#ffffff';
const inputBorder = isDarkMode ? '1px solid #3b3b3b' : '1px solid #DCDFE6';
loginContainerStyle.innerHTML = `
.x-login-container {
background-color: ${backgroundColor} !important;
transition: background-color 0.3s ease;
}
.x-login-container .el-input__inner {
background-color: ${inputBackgroundColor} !important;
border: ${inputBorder} !important;
transition: background-color 0.3s ease, border-color 0.3s ease;
}
`;
document.head.insertBefore(loginContainerStyle, document.head.firstChild);
}
async function getThemeMode() {
const initThemeMode = await configRepository.getString(
'VRCX_ThemeMode',
'system'
);
let isDarkMode;
if (initThemeMode === 'light') {
isDarkMode = false;
} else if (initThemeMode === 'system') {
isDarkMode = systemIsDarkMode();
} else {
isDarkMode = true;
}
return { initThemeMode, isDarkMode };
}
try {
// @ts-ignore
i18n.locale = await configRepository.getString('VRCX_appLanguage', 'en');
const { initThemeMode, isDarkMode } = await getThemeMode();
setLoginContainerStyle(isDarkMode);
changeAppDarkStyle(isDarkMode);
changeAppThemeStyle(initThemeMode);
} catch (error) {
console.error('Error initializing locale and theme:', error);
}
refreshCustomCss();
refreshCustomScript();
new vrcxJsonStorage(VRCXStorage);
// some workaround for failing to get voice list first run
speechSynthesis.getVoices();

2
src/plugin/components.js
View File

@@ -11,7 +11,7 @@ import SimpleSwitch from '../components/SimpleSwitch.vue';
import Timer from '../components/Timer.vue';
import DataTable from '../components/DataTable.vue';
export default function registerComponents(app) {
export function initComponents(app) {
app.component('SimpleSwitch', SimpleSwitch);
app.component('Location', Location);
app.component('Timer', Timer);

14
src/plugin/dayjs.js
View File

@@ -3,8 +3,14 @@ import duration from 'dayjs/plugin/duration';
import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
import timezone from 'dayjs/plugin/timezone';
import utc from 'dayjs/plugin/utc';
import localizedFormat from 'dayjs/plugin/localizedFormat';
import customParseFormat from 'dayjs/plugin/customParseFormat';
dayjs.extend(duration);
dayjs.extend(utc);
dayjs.extend(timezone);
dayjs.extend(isSameOrAfter);
export function initDayjs() {
dayjs.extend(duration);
dayjs.extend(utc);
dayjs.extend(timezone);
dayjs.extend(isSameOrAfter);
dayjs.extend(localizedFormat);
dayjs.extend(customParseFormat);
}

13
src/plugin/index.js Normal file
View File

@@ -0,0 +1,13 @@
import { initInteropApi } from './interopApi';
import { initDayjs } from './dayjs';
import { initNoty } from './noty';
import { initUi } from './ui';
export async function initPlugins(isVrOverlay = false) {
await initInteropApi(isVrOverlay);
if (!isVrOverlay) {
await initUi();
}
initDayjs();
initNoty(isVrOverlay);
}

42
src/plugin/interopApi.js Normal file
View File

@@ -0,0 +1,42 @@
// @ts-nocheck
import InteropApi from '../ipc-electron/interopApi.js';
import configRepository from '../service/config';
import vrcxJsonStorage from '../service/jsonStorage';
export async function initInteropApi(isVrOverlay = false) {
if (isVrOverlay) {
if (WINDOWS) {
await CefSharp.BindObjectAsync('AppApiVr');
} else {
// @ts-ignore
window.AppApiVr = InteropApi.AppApiVrElectron;
}
} else {
// #region | Init Cef C# bindings
if (WINDOWS) {
await CefSharp.BindObjectAsync(
'AppApi',
'WebApi',
'VRCXStorage',
'SQLite',
'LogWatcher',
'Discord',
'AssetBundleManager'
);
} else {
window.AppApi = InteropApi.AppApiElectron;
window.WebApi = InteropApi.WebApi;
window.VRCXStorage = InteropApi.VRCXStorage;
window.SQLite = InteropApi.SQLite;
window.LogWatcher = InteropApi.LogWatcher;
window.Discord = InteropApi.Discord;
window.AssetBundleManager = InteropApi.AssetBundleManager;
window.AppApiVrElectron = InteropApi.AppApiVrElectron;
}
configRepository.init();
new vrcxJsonStorage(VRCXStorage);
AppApi.SetUserAgent();
}
}

24
src/plugin/ipc.js
View File

@@ -1,24 +0,0 @@
// @ts-nocheck
import InteropApi from '../ipc-electron/interopApi.js';
// #region | Init Cef C# bindings
if (WINDOWS) {
await CefSharp.BindObjectAsync(
'AppApi',
'WebApi',
'VRCXStorage',
'SQLite',
'LogWatcher',
'Discord',
'AssetBundleManager'
);
} else {
window.AppApi = InteropApi.AppApiElectron;
window.WebApi = InteropApi.WebApi;
window.VRCXStorage = InteropApi.VRCXStorage;
window.SQLite = InteropApi.SQLite;
window.LogWatcher = InteropApi.LogWatcher;
window.Discord = InteropApi.Discord;
window.AssetBundleManager = InteropApi.AssetBundleManager;
window.AppApiVrElectron = InteropApi.AppApiVrElectron;
}

4
src/plugin/noty.js
View File

@@ -1,6 +1,6 @@
import Noty from 'noty';
function initNoty(isVrOverlay) {
export function initNoty(isVrOverlay = false) {
if (isVrOverlay) {
Noty.overrideDefaults({
animation: {
@@ -23,5 +23,3 @@ function initNoty(isVrOverlay) {
});
}
}
export { initNoty };

32
src/plugin/ui.js Normal file
View File

@@ -0,0 +1,32 @@
import configRepository from '../service/config';
import {
changeAppDarkStyle,
changeAppThemeStyle,
refreshCustomCss,
refreshCustomScript,
setLoginContainerStyle,
getThemeMode
} from '../shared/utils/base/ui';
import { i18n } from './i18n';
export async function initUi() {
try {
// @ts-ignore
i18n.locale = await configRepository.getString(
'VRCX_appLanguage',
'en'
);
const { initThemeMode, isDarkMode } =
await getThemeMode(configRepository);
setLoginContainerStyle(isDarkMode);
changeAppDarkStyle(isDarkMode);
changeAppThemeStyle(initThemeMode);
} catch (error) {
console.error('Error initializing locale and theme:', error);
}
refreshCustomCss();
refreshCustomScript();
}

5
src/shared/utils/base/date.js
View File

@@ -1,11 +1,6 @@
import dayjs from 'dayjs';
import localizedFormat from 'dayjs/plugin/localizedFormat';
import customParseFormat from 'dayjs/plugin/customParseFormat';
import { useAppearanceSettingsStore } from '../../../stores';
dayjs.extend(localizedFormat);
dayjs.extend(customParseFormat);
/**
* @param {string} dateStr
* @param {'long'|'short'} format

49
src/shared/utils/base/ui.js
View File

@@ -222,6 +222,51 @@ function changeHtmlLangAttribute(language) {
htmlElement.setAttribute('lang', language);
}
// prevent flicker on login page
function setLoginContainerStyle(isDarkMode) {
const loginContainerStyle = document.createElement('style');
loginContainerStyle.id = 'login-container-style';
loginContainerStyle.type = 'text/css';
const backgroundColor = isDarkMode ? '#101010' : '#ffffff';
const inputBackgroundColor = isDarkMode ? '#333333' : '#ffffff';
const inputBorder = isDarkMode ? '1px solid #3b3b3b' : '1px solid #DCDFE6';
loginContainerStyle.innerHTML = `
.x-login-container {
background-color: ${backgroundColor} !important;
transition: background-color 0.3s ease;
}
.x-login-container .el-input__inner {
background-color: ${inputBackgroundColor} !important;
border: ${inputBorder} !important;
transition: background-color 0.3s ease, border-color 0.3s ease;
}
`;
document.head.insertBefore(loginContainerStyle, document.head.firstChild);
}
async function getThemeMode(configRepository) {
const initThemeMode = await configRepository.getString(
'VRCX_ThemeMode',
'system'
);
let isDarkMode;
if (initThemeMode === 'light') {
isDarkMode = false;
} else if (initThemeMode === 'system') {
isDarkMode = systemIsDarkMode();
} else {
isDarkMode = true;
}
return { initThemeMode, isDarkMode };
}
export {
systemIsDarkMode,
changeAppDarkStyle,
@@ -232,5 +277,7 @@ export {
HueToHex,
HSVtoRGB,
getNextDialogIndex,
changeHtmlLangAttribute
changeHtmlLangAttribute,
setLoginContainerStyle,
getThemeMode
};

2
src/stores/settings/notifications.js
View File

@@ -185,6 +185,8 @@ export const useNotificationsSettingsStore = defineStore(
}, 5000);
}
}
// some workaround for failing to get voice list first run
speechSynthesis.getVoices();
initNotificationsSettings();

19
src/vr/vr.js
View File

@@ -5,22 +5,13 @@
// For a copy, see <https://opensource.org/licenses/MIT>.
import { createApp } from 'vue';
import { initNoty } from '../plugin/noty';
import { initPlugins } from '../plugin';
import { i18n } from '../plugin/i18n';
import InteropApi from '../ipc-electron/interopApi.js';
import Vr from './Vr.vue';
initNoty(true);
initPlugins(true);
if (WINDOWS) {
await CefSharp.BindObjectAsync('AppApiVr');
} else {
// @ts-ignore
window.AppApiVr = InteropApi.AppApiVrElectron;
}
const vr = createApp(Vr);
vr.use(i18n);
const $app = createApp(Vr);
$app.use(i18n);
$app.mount('#root');
vr.mount('#root');

15
src/vr/vr.scss
View File

@@ -10,9 +10,18 @@
@use '../assets/scss/flags.scss';
@import 'animate.css/animate.min.css';
@import 'noty/lib/noty.css';
@import 'remixicon/fonts/remixicon.css';
@use '@fontsource/noto-sans-kr/korean.css';
@use '@fontsource/noto-sans-jp/japanese.css';
@use '@fontsource/noto-sans-sc/chinese-simplified.css';
@use '@fontsource/noto-sans-tc/chinese-traditional.css';
@use '@fontsource/noto-sans-kr';
@use '@fontsource/noto-sans-jp';
@use '@fontsource/noto-sans-sc';
@use '@fontsource/noto-sans-tc';
@use 'animate.css/animate.min.css';
@use 'noty/lib/noty.css';
@use 'remixicon/fonts/remixicon.css';
/*
마지노선인듯