mirror of
https://github.com/MHSanaei/3x-ui.git
synced 2026-05-13 17:46:02 +00:00
138696cf36
Bumps Vite to 8.0.11 (npm install picked up 6.4.2 from the stale
lockfile; clean install resolves the new constraint). Bumps vue-i18n
to 11.1.4 since v10 was just EOL'd.
Migrates aThemeSwitch.html — the two-flavor theme picker + global
themeSwitcher object — into:
- composables/useTheme.js: single reactive `theme` state with
toggleTheme / toggleUltra. Boot side-effect applies the stored theme
to <body>/<html> before Vue renders; watchEffect persists changes
back to localStorage.
- components/ThemeSwitch.vue: full menu version for the main panel.
- components/ThemeSwitchLogin.vue: login-popover version.
AD-Vue 1 → 4 changes hit on this component:
- <a-icon type="bulb" :theme="filled|outlined"> dropped — replaced by
explicit BulbFilled / BulbOutlined imports from
@ant-design/icons-vue, swapped via <component :is="BulbIcon">
- Vue.component('a-theme-switch', { ... }) global registration → SFC
+ per-page import
- this.$message.config(...) (Vue 2 instance method) → message.config(...)
imported from ant-design-vue, called once in login.js at boot
Login page now surfaces a settings button → popover → theme picker.
Known gap: web/assets/css/custom.min.css isn't yet imported into the
new bundle, so toggling dark mode currently only re-themes AD-Vue's
own components, not the panel chrome. The body class is still toggled
so behavior is correct; visual fidelity returns when custom.css is
ported or directly imported.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
20 lines
721 B
JavaScript
20 lines
721 B
JavaScript
import { createApp } from 'vue';
|
|
import Antd, { message } from 'ant-design-vue';
|
|
import 'ant-design-vue/dist/reset.css';
|
|
|
|
import { setupAxios } from '@/api/axios-init.js';
|
|
// Importing this module triggers the boot side-effect that applies the
|
|
// stored theme to <body>/<html> before Vue renders anything.
|
|
import '@/composables/useTheme.js';
|
|
import LoginPage from '@/pages/login/LoginPage.vue';
|
|
|
|
setupAxios();
|
|
|
|
// Toasts attach to a #message div the page provides — keeps theme
|
|
// styling in sync with the rest of the panel.
|
|
const messageContainer = document.getElementById('message');
|
|
if (messageContainer) {
|
|
message.config({ getContainer: () => messageContainer });
|
|
}
|
|
|
|
createApp(LoginPage).use(Antd).mount('#app');
|