mirror of
				https://github.com/soybeanjs/soybean-admin.git
				synced 2025-11-04 15:53:43 +08:00 
			
		
		
		
	feat(projects): support system new version update notification. close #420
This commit is contained in:
		
							
								
								
									
										13
									
								
								build/plugins/html.ts
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										13
									
								
								build/plugins/html.ts
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,13 @@
 | 
			
		||||
import type { Plugin } from 'vite';
 | 
			
		||||
 | 
			
		||||
export function setupHtmlPlugin(buildTime: string) {
 | 
			
		||||
  const plugin: Plugin = {
 | 
			
		||||
    name: 'html-plugin',
 | 
			
		||||
    apply: 'build',
 | 
			
		||||
    transformIndexHtml(html) {
 | 
			
		||||
      return html.replace('<head>', `<head>\n    <meta name="buildTime" content="${buildTime}">`);
 | 
			
		||||
    }
 | 
			
		||||
  };
 | 
			
		||||
 | 
			
		||||
  return plugin;
 | 
			
		||||
}
 | 
			
		||||
@@ -6,8 +6,9 @@ import progress from 'vite-plugin-progress';
 | 
			
		||||
import { setupElegantRouter } from './router';
 | 
			
		||||
import { setupUnocss } from './unocss';
 | 
			
		||||
import { setupUnplugin } from './unplugin';
 | 
			
		||||
import { setupHtmlPlugin } from './html';
 | 
			
		||||
 | 
			
		||||
export function setupVitePlugins(viteEnv: Env.ImportMeta) {
 | 
			
		||||
export function setupVitePlugins(viteEnv: Env.ImportMeta, buildTime: string) {
 | 
			
		||||
  const plugins: PluginOption = [
 | 
			
		||||
    vue({
 | 
			
		||||
      script: {
 | 
			
		||||
@@ -19,7 +20,8 @@ export function setupVitePlugins(viteEnv: Env.ImportMeta) {
 | 
			
		||||
    setupElegantRouter(),
 | 
			
		||||
    setupUnocss(viteEnv),
 | 
			
		||||
    ...setupUnplugin(viteEnv),
 | 
			
		||||
    progress()
 | 
			
		||||
    progress(),
 | 
			
		||||
    setupHtmlPlugin(buildTime)
 | 
			
		||||
  ];
 | 
			
		||||
 | 
			
		||||
  return plugins;
 | 
			
		||||
 
 | 
			
		||||
@@ -1,6 +1,10 @@
 | 
			
		||||
const local: App.I18n.Schema = {
 | 
			
		||||
  system: {
 | 
			
		||||
    title: 'SoybeanAdmin'
 | 
			
		||||
    title: 'SoybeanAdmin',
 | 
			
		||||
    updateTitle: 'System Version Update Notification',
 | 
			
		||||
    updateContent: 'A new version of the system has been detected. Do you want to refresh the page immediately?',
 | 
			
		||||
    updateConfirm: 'Refresh immediately',
 | 
			
		||||
    updateCancel: 'Later'
 | 
			
		||||
  },
 | 
			
		||||
  common: {
 | 
			
		||||
    action: 'Action',
 | 
			
		||||
 
 | 
			
		||||
@@ -1,6 +1,10 @@
 | 
			
		||||
const local: App.I18n.Schema = {
 | 
			
		||||
  system: {
 | 
			
		||||
    title: 'Soybean 管理系统'
 | 
			
		||||
    title: 'Soybean 管理系统',
 | 
			
		||||
    updateTitle: '系统版本更新通知',
 | 
			
		||||
    updateContent: '检测到系统有新版本发布,是否立即刷新页面?',
 | 
			
		||||
    updateConfirm: '立即刷新',
 | 
			
		||||
    updateCancel: '稍后再说'
 | 
			
		||||
  },
 | 
			
		||||
  common: {
 | 
			
		||||
    action: '操作',
 | 
			
		||||
 
 | 
			
		||||
@@ -1,6 +1,6 @@
 | 
			
		||||
import { createApp } from 'vue';
 | 
			
		||||
import './plugins/assets';
 | 
			
		||||
import { setupDayjs, setupIconifyOffline, setupLoading, setupNProgress } from './plugins';
 | 
			
		||||
import { setupAppVersionNotification, setupDayjs, setupIconifyOffline, setupLoading, setupNProgress } from './plugins';
 | 
			
		||||
import { setupStore } from './store';
 | 
			
		||||
import { setupRouter } from './router';
 | 
			
		||||
import { setupI18n } from './locales';
 | 
			
		||||
@@ -23,6 +23,8 @@ async function setupApp() {
 | 
			
		||||
 | 
			
		||||
  setupI18n(app);
 | 
			
		||||
 | 
			
		||||
  setupAppVersionNotification();
 | 
			
		||||
 | 
			
		||||
  app.mount('#app');
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
 
 | 
			
		||||
							
								
								
									
										53
									
								
								src/plugins/app.ts
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										53
									
								
								src/plugins/app.ts
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,53 @@
 | 
			
		||||
import { h } from 'vue';
 | 
			
		||||
import { NButton } from 'naive-ui';
 | 
			
		||||
import { $t } from '../locales';
 | 
			
		||||
 | 
			
		||||
export function setupAppVersionNotification() {
 | 
			
		||||
  document.addEventListener('visibilitychange', async () => {
 | 
			
		||||
    const buildTime = await getHtmlBuildTime();
 | 
			
		||||
 | 
			
		||||
    if (buildTime !== BUILD_TIME && document.visibilityState === 'visible') {
 | 
			
		||||
      const n = window.$notification?.create({
 | 
			
		||||
        title: $t('system.updateTitle'),
 | 
			
		||||
        content: $t('system.updateContent'),
 | 
			
		||||
        action() {
 | 
			
		||||
          return h('div', { style: { display: 'flex', justifyContent: 'end', gap: '12px', width: '325px' } }, [
 | 
			
		||||
            h(
 | 
			
		||||
              NButton,
 | 
			
		||||
              {
 | 
			
		||||
                onClick() {
 | 
			
		||||
                  n?.destroy();
 | 
			
		||||
                }
 | 
			
		||||
              },
 | 
			
		||||
              $t('system.updateCancel')
 | 
			
		||||
            ),
 | 
			
		||||
            h(
 | 
			
		||||
              NButton,
 | 
			
		||||
              {
 | 
			
		||||
                type: 'primary',
 | 
			
		||||
                onClick() {
 | 
			
		||||
                  location.reload();
 | 
			
		||||
                }
 | 
			
		||||
              },
 | 
			
		||||
              $t('system.updateConfirm')
 | 
			
		||||
            )
 | 
			
		||||
          ]);
 | 
			
		||||
        }
 | 
			
		||||
      });
 | 
			
		||||
    }
 | 
			
		||||
  });
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
async function getHtmlBuildTime() {
 | 
			
		||||
  const baseURL = import.meta.env.VITE_BASE_URL;
 | 
			
		||||
 | 
			
		||||
  const res = await fetch(`${baseURL}index.html`);
 | 
			
		||||
 | 
			
		||||
  const html = await res.text();
 | 
			
		||||
 | 
			
		||||
  const match = html.match(/<meta name="buildTime" content="(.*)">/);
 | 
			
		||||
 | 
			
		||||
  const buildTime = match?.[1] || '';
 | 
			
		||||
 | 
			
		||||
  return buildTime;
 | 
			
		||||
}
 | 
			
		||||
@@ -2,3 +2,4 @@ export * from './loading';
 | 
			
		||||
export * from './nprogress';
 | 
			
		||||
export * from './iconify';
 | 
			
		||||
export * from './dayjs';
 | 
			
		||||
export * from './app';
 | 
			
		||||
 
 | 
			
		||||
							
								
								
									
										4
									
								
								src/typings/app.d.ts
									
									
									
									
										vendored
									
									
								
							
							
						
						
									
										4
									
								
								src/typings/app.d.ts
									
									
									
									
										vendored
									
									
								
							@@ -251,6 +251,10 @@ declare namespace App {
 | 
			
		||||
    type Schema = {
 | 
			
		||||
      system: {
 | 
			
		||||
        title: string;
 | 
			
		||||
        updateTitle: string;
 | 
			
		||||
        updateContent: string;
 | 
			
		||||
        updateConfirm: string;
 | 
			
		||||
        updateCancel: string;
 | 
			
		||||
      };
 | 
			
		||||
      common: {
 | 
			
		||||
        action: string;
 | 
			
		||||
 
 | 
			
		||||
@@ -25,7 +25,7 @@ export default defineConfig(configEnv => {
 | 
			
		||||
        }
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    plugins: setupVitePlugins(viteEnv),
 | 
			
		||||
    plugins: setupVitePlugins(viteEnv, buildTime),
 | 
			
		||||
    define: {
 | 
			
		||||
      BUILD_TIME: JSON.stringify(buildTime)
 | 
			
		||||
    },
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user