feat(projects): add version update notifications

mufeng889 · Sep 1, 2024 · 3f25b19 · 3f25b19
1 parent 04577cd
commit 3f25b19
Show file tree

Hide file tree

Showing 8 changed files with 100 additions and 7 deletions.
diff --git a/build/plugins/html.ts b/build/plugins/html.ts
@@ -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;
+}
diff --git a/build/plugins/index.ts b/build/plugins/index.ts
@@ -6,16 +6,18 @@ import { setupAutoImport } from './auto-import';
 import { setupUnocss } from './unocss';
 import { setupUnPluginIcon } from './unplugin-icon';
 import { setupElegantRouter } from './router';
+import { setupHtmlPlugin } from './html';
 
-export function setupVitePlugins(viteEnv: Env.ImportMeta) {
+export function setupVitePlugins(viteEnv: Env.ImportMeta, buildTime: string) {
   const plugins: PluginOption = [
     react(),
     setupAutoImport(viteEnv),
     setupUnocss(viteEnv),
     ...setupUnPluginIcon(viteEnv),
     setupElegantRouter(),
     Inspect(),
-    removeConsole()
+    removeConsole(),
+    setupHtmlPlugin(buildTime)
   ];
   return plugins;
 }
diff --git a/package.json b/package.json
@@ -39,7 +39,6 @@
     "cleanup": "sa cleanup",
     "commit": "sa git-commit",
     "commit:zh": "sa git-commit -l=zh-cn",
-    "czh": "sa git-commit -l=zh-cn",
     "dev": "vite --mode test",
     "dev:prod": "vite --mode prod",
     "gen-route": "sa gen-route",

diff --git a/packages/scripts/src/index.ts b/packages/scripts/src/index.ts
@@ -3,6 +3,7 @@ import { blue, lightGreen } from 'kolorist';
 import { version } from '../package.json';
 import { cleanup, genChangelog, generateRoute, gitCommit, gitCommitVerify, release, updatePkg } from './commands';
 import { loadCliOptions } from './config';
+import type { Lang } from './locales';
 
 type Command = 'cleanup' | 'update-pkg' | 'git-commit' | 'git-commit-verify' | 'changelog' | 'release' | 'gen-route';
 
@@ -25,6 +26,12 @@ interface CommandArg {
    * Multiple values use "," to separate them
    */
   cleanupDir?: string;
+  /**
+   * display lang of cli
+   *
+   * @default 'en-us'
+   */
+  lang?: Lang;
 }
 
 export async function setupCli() {
@@ -44,6 +51,7 @@ export async function setupCli() {
       '-c, --cleanupDir <dir>',
       'The glob pattern of dirs to cleanup, If not set, it will use the default value, Multiple values use "," to separate them'
     )
+    .option('-l, --lang <lang>', 'display lang of cli', { default: 'en-us', type: [String] })
     .help();
 
   const commands: CommandWithAction<CommandArg> = {
@@ -61,8 +69,8 @@ export async function setupCli() {
     },
     'git-commit': {
       desc: 'git commit, generate commit message which match Conventional Commits standard',
-      action: async () => {
-        await gitCommit(cliOptions.gitCommitTypes, cliOptions.gitCommitScopes);
+      action: async args => {
+        await gitCommit(args?.lang);
       }
     },
     'git-commit-verify': {

diff --git a/src/main.tsx b/src/main.tsx
@@ -6,7 +6,7 @@ import FallbackRender from '../ErrorBoundary.tsx';
 import App from './App.tsx';
 import './plugins/assets';
 import { setupI18n } from './locales';
-import { setupDayjs, setupIconifyOffline, setupLoading, setupNProgress } from './plugins';
+import { setupAppVersionNotification, setupDayjs, setupIconifyOffline, setupLoading, setupNProgress } from './plugins';
 
 function setupApp() {
   setupI18n();
@@ -19,6 +19,8 @@ function setupApp() {
 
   setupDayjs();
 
+  setupAppVersionNotification();
+
   const container = document.getElementById('root');
   if (!container) return;
   const root = createRoot(container);

diff --git a/src/plugins/app.ts b/src/plugins/app.ts
@@ -0,0 +1,68 @@
+import { createElement } from 'react';
+import { Button } from 'antd';
+import { $t } from '../locales';
+
+export function setupAppVersionNotification() {
+  let isShow = false;
+
+  document.addEventListener('visibilitychange', async () => {
+    const preConditions = [!isShow, document.visibilityState === 'visible', !import.meta.env.DEV];
+
+    if (!preConditions.every(Boolean)) return;
+
+    const buildTime = await getHtmlBuildTime();
+
+    if (buildTime === BUILD_TIME) {
+      return;
+    }
+
+    isShow = true;
+
+    window.$notification?.open({
+      message: $t('system.updateTitle'),
+      description: $t('system.updateContent'),
+      btn: (() => {
+        return createElement(
+          'div',
+          { style: { display: 'flex', justifyContent: 'end', gap: '12px', width: '325px' } },
+          [
+            createElement(
+              Button,
+              {
+                onClick() {
+                  window.$notification?.destroy();
+                }
+              },
+              $t('system.updateCancel')
+            ),
+            createElement(
+              Button,
+              {
+                type: 'primary',
+                onClick() {
+                  location.reload();
+                }
+              },
+              $t('system.updateConfirm')
+            )
+          ]
+        );
+      })(),
+      onClose() {
+        isShow = false;
+      }
+    });
+  });
+}
+
+async function getHtmlBuildTime() {
+  const res = await fetch(`/index.html?time=${Date.now()}`);
+
+  const html = await res.text();
+
+  const match = html.match(/<meta name="buildTime" content="(.*)">/);
+
+  const buildTime = match?.[1] || '';
+
+  return buildTime;
+}
diff --git a/src/plugins/index.ts b/src/plugins/index.ts
@@ -2,3 +2,4 @@ export * from './nprogress';
 export * from './loading';
 export * from './iconify';
 export * from './dayjs';
+export * from './app';
diff --git a/vite.config.ts b/vite.config.ts
@@ -25,7 +25,7 @@ export default defineConfig(configEnv => {
         }
       }
     },
-    plugins: setupVitePlugins(viteEnv),
+    plugins: setupVitePlugins(viteEnv, buildTime),
     define: {
       BUILD_TIME: JSON.stringify(buildTime)
     },