diff --git a/apps/antd-view/.env b/apps/antd-view/.env index 2155556e..2a44fff9 100644 --- a/apps/antd-view/.env +++ b/apps/antd-view/.env @@ -1,2 +1,4 @@ # spa-title VITE_GLOB_APP_TITLE = Vben Admin Pro + +VITE_APP_NAMESPACE = antd-view diff --git a/apps/antd-view/src/bootstrap.ts b/apps/antd-view/src/bootstrap.ts index 88cdfe2b..8917f6b7 100644 --- a/apps/antd-view/src/bootstrap.ts +++ b/apps/antd-view/src/bootstrap.ts @@ -8,14 +8,14 @@ import { createApp } from 'vue'; import App from './app.vue'; import { router } from './router'; -async function bootstrap(namespace: string, env: string) { +async function bootstrap(namespace: string) { const app = createApp(App); // 国际化 i18n 配置 await setupI18n(app, { defaultLocale: preference.locale }); // 配置 pinia-store - await setupStore(app, { env, namespace }); + await setupStore(app, { namespace }); // 配置路由及路由守卫 app.use(router); diff --git a/apps/antd-view/src/main.ts b/apps/antd-view/src/main.ts index d0960dff..cd1e3b20 100644 --- a/apps/antd-view/src/main.ts +++ b/apps/antd-view/src/main.ts @@ -6,17 +6,16 @@ import { overridesPreference } from './preference'; * 应用初始化完成之后再进行页面加载渲染 */ async function initApplication() { - const namespace = 'antd-view'; const env = import.meta.env.PROD ? 'prod' : 'dev'; + const namespace = `${import.meta.env.VITE_APP_NAMESPACE}-${env}`; // app偏好设置初始化 await setupPreference({ - env, namespace, overrides: overridesPreference, }); - import('./bootstrap').then((m) => m.bootstrap(namespace, env)); + import('./bootstrap').then((m) => m.bootstrap(namespace)); } initApplication(); diff --git a/internal/vite-config/src/config/application.ts b/internal/vite-config/src/config/application.ts index 80246ec8..e015b03b 100644 --- a/internal/vite-config/src/config/application.ts +++ b/internal/vite-config/src/config/application.ts @@ -2,7 +2,7 @@ import type { UserConfig } from 'vite'; import { resolve } from 'node:path'; -import { defineConfig, mergeConfig } from 'vite'; +import { defineConfig, loadEnv, mergeConfig } from 'vite'; import { getApplicationConditionPlugins } from '../plugins'; import { getCommonConfig } from './common'; @@ -14,12 +14,13 @@ function defineApplicationConfig(options: DefineAppcationOptions = {}) { const { appcation = {}, vite = {} } = options; const root = process.cwd(); const isBuild = command === 'build'; - // const env = loadEnv(mode, root); + const env = loadEnv(mode, root); const plugins = await getApplicationConditionPlugins({ compress: false, compressTypes: ['brotli', 'gzip'], devtools: true, + env, extraAppConfig: true, html: true, i18n: true, diff --git a/internal/vite-config/src/plugins/index.ts b/internal/vite-config/src/plugins/index.ts index 76e37a49..f6908623 100644 --- a/internal/vite-config/src/plugins/index.ts +++ b/internal/vite-config/src/plugins/index.ts @@ -86,6 +86,7 @@ async function getApplicationConditionPlugins( ): Promise { // 单独取,否则commonOptions拿不到 const isBuild = options.isBuild; + const env = options.env; const { compress, @@ -123,7 +124,7 @@ async function getApplicationConditionPlugins( }, { condition: injectAppLoading, - plugins: async () => [await viteInjectAppLoadingPlugin()], + plugins: async () => [await viteInjectAppLoadingPlugin(isBuild, env)], }, { condition: isBuild && !!compress, diff --git a/internal/vite-config/src/plugins/inject-app-loading/index.ts b/internal/vite-config/src/plugins/inject-app-loading/index.ts index 2a584280..47672853 100644 --- a/internal/vite-config/src/plugins/inject-app-loading/index.ts +++ b/internal/vite-config/src/plugins/inject-app-loading/index.ts @@ -8,8 +8,22 @@ import { type PluginOption } from 'vite'; * 用于生成将loading样式注入到项目中 * 为多app提供loading样式,无需在每个 app -> index.html单独引入 */ -async function viteInjectAppLoadingPlugin(): Promise { +async function viteInjectAppLoadingPlugin( + isBuild: string, + env: Record, +): Promise { const loadingHtml = await getLoadingRawByHtmlTemplate(); + const envRaw = isBuild ? 'prod' : 'dev'; + const cacheName = `'__${env.VITE_APP_NAMESPACE}-${envRaw}-theme__'`; + + // 获取缓存的主题 + // 保证黑暗主题下,刷新页面时,loading也是黑暗主题 + const injectScript = ` + +`; if (!loadingHtml) { return; @@ -21,7 +35,10 @@ async function viteInjectAppLoadingPlugin(): Promise { transformIndexHtml: { handler(html) { const re = /(\s*)<\/div>/; - html = html.replace(re, `
${loadingHtml}
`); + html = html.replace( + re, + `
${injectScript}${loadingHtml}
`, + ); return html; }, order: 'pre', diff --git a/internal/vite-config/src/plugins/inject-app-loading/loading-antd.html b/internal/vite-config/src/plugins/inject-app-loading/loading-antd.html index cdd234dc..e660765f 100644 --- a/internal/vite-config/src/plugins/inject-app-loading/loading-antd.html +++ b/internal/vite-config/src/plugins/inject-app-loading/loading-antd.html @@ -5,7 +5,7 @@ } .dark .loading { - background-color: #2c344a; + background-color: #0d0d10; } .dark .loading .title { diff --git a/internal/vite-config/src/plugins/inject-app-loading/loading.html b/internal/vite-config/src/plugins/inject-app-loading/loading.html index 0ced077d..faaa9f7a 100644 --- a/internal/vite-config/src/plugins/inject-app-loading/loading.html +++ b/internal/vite-config/src/plugins/inject-app-loading/loading.html @@ -18,7 +18,7 @@ } .dark .loading { - background: #101827; + background: #0d0d10; } .title { diff --git a/internal/vite-config/src/typing.ts b/internal/vite-config/src/typing.ts index 1ee9643d..42b05316 100644 --- a/internal/vite-config/src/typing.ts +++ b/internal/vite-config/src/typing.ts @@ -39,6 +39,8 @@ interface ConditionPlugin { interface CommonPluginOptions { /** 是否开启devtools */ devtools?: boolean; + /** 环境变量 */ + env: Record; /** 是否构建模式 */ isBuild?: boolean; /** 构建模式 */ diff --git a/packages/preference/src/setup.ts b/packages/preference/src/setup.ts index 91544fe9..88770a2f 100644 --- a/packages/preference/src/setup.ts +++ b/packages/preference/src/setup.ts @@ -4,10 +4,6 @@ import { PreferenceCache } from './cache'; import { overridesPreference } from './preference'; interface SetupPreferenceOptions { - /** - * @zh_CN 环境 - */ - env: string; /** * @zh_CN 应用名,由于 @vben/preference 是公用的,后续可能有多个app,为了防止多个app缓存冲突,可在这里配置应用名 * 应用名将被用于持久化的前缀 @@ -20,8 +16,8 @@ interface SetupPreferenceOptions { } async function setupPreference(options: SetupPreferenceOptions) { - const { env, namespace, overrides = {} } = options; - const cache = new PreferenceCache(`${namespace}-${env}`); + const { namespace, overrides = {} } = options; + const cache = new PreferenceCache(namespace); overridesPreference(overrides, cache); } diff --git a/packages/stores/src/setup.ts b/packages/stores/src/setup.ts index 38b9a5f8..fe233cbf 100644 --- a/packages/stores/src/setup.ts +++ b/packages/stores/src/setup.ts @@ -3,10 +3,6 @@ import type { App } from 'vue'; import { createPinia } from 'pinia'; interface SetupStoreOptions { - /** - * @zh_CN 环境 - */ - env: string; /** * @zh_CN 应用名,由于 @vben/stores 是公用的,后续可能有多个app,为了防止多个app缓存冲突,可在这里配置应用名 * 应用名将被用于持久化的前缀 @@ -21,11 +17,11 @@ interface SetupStoreOptions { async function setupStore(app: App, options: SetupStoreOptions) { const { createPersistedState } = await import('pinia-plugin-persistedstate'); const pinia = createPinia(); - const { env, namespace } = options; + const { namespace } = options; pinia.use( createPersistedState({ // key $appName-$store.id - key: (storeKey) => `__${namespace}-${env}-${storeKey}__`, + key: (storeKey) => `__${namespace}-${storeKey}__`, storage: localStorage, }), );