init

src/plugins/app.ts

@@ -0,0 +1,108 @@
+import { h } from 'vue';
+import type { App } from 'vue';
+import { NButton } from 'naive-ui';
+import { $t } from '@/locales';
+
+export function setupAppErrorHandle(app: App) {
+  app.config.errorHandler = (err, vm, info) => {
+    // eslint-disable-next-line no-console
+    console.error(err, vm, info);
+  };
+}
+
+export function setupAppVersionNotification() {
+  // Update check interval in milliseconds
+  const UPDATE_CHECK_INTERVAL = 3 * 60 * 1000;
+
+  const canAutoUpdateApp = import.meta.env.VITE_AUTOMATICALLY_DETECT_UPDATE === 'Y' && import.meta.env.PROD;
+  if (!canAutoUpdateApp) return;
+
+  let isShow = false;
+  let updateInterval: ReturnType<typeof setInterval> | undefined;
+
+  const checkForUpdates = async () => {
+    if (isShow) return;
+
+    const buildTime = await getHtmlBuildTime();
+
+    // If failed to get build time or build time hasn't changed, no update is needed.
+    if (!buildTime || buildTime === BUILD_TIME) {
+      return;
+    }
+
+    isShow = true;
+
+    // Show update notification
+    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();
+                isShow = false;
+              }
+            },
+            () => $t('system.updateCancel')
+          ),
+          h(
+            NButton,
+            {
+              type: 'primary',
+              onClick() {
+                location.reload();
+              }
+            },
+            () => $t('system.updateConfirm')
+          )
+        ]);
+      },
+      onClose() {
+        isShow = false;
+      }
+    });
+  };
+
+  const startUpdateInterval = () => {
+    if (updateInterval) {
+      clearInterval(updateInterval);
+    }
+    updateInterval = setInterval(checkForUpdates, UPDATE_CHECK_INTERVAL);
+  };
+
+  // If updates should be checked, set up the visibility change listener and start the update interval
+  if (!isShow && document.visibilityState === 'visible') {
+    // Check for updates when the document is visible
+    document.addEventListener('visibilitychange', () => {
+      if (document.visibilityState === 'visible') {
+        checkForUpdates();
+        startUpdateInterval();
+      }
+    });
+
+    // Start the update interval
+    startUpdateInterval();
+  }
+}
+
+async function getHtmlBuildTime(): Promise<string | null> {
+  const baseUrl = import.meta.env.VITE_BASE_URL || '/';
+
+  try {
+    const res = await fetch(`${baseUrl}index.html?time=${Date.now()}`);
+
+    if (!res.ok) {
+      return null;
+    }
+
+    const html = await res.text();
+    const match = html.match(/<meta name="buildTime" content="(.*)">/);
+    return match?.[1] || null;
+  } catch (error) {
+    window.console.error('getHtmlBuildTime error:', error);
+    return null;
+  }
+}

src/plugins/assets.ts

@@ -0,0 +1,3 @@
+import 'virtual:svg-icons-register';
+import 'uno.css';
+import '../styles/css/global.css';

src/plugins/dayjs.ts

@@ -0,0 +1,9 @@
+import { extend } from 'dayjs';
+import localeData from 'dayjs/plugin/localeData';
+import { setDayjsLocale } from '../locales/dayjs';
+
+export function setupDayjs() {
+  extend(localeData);
+
+  setDayjsLocale();
+}

src/plugins/iconify.ts

@@ -0,0 +1,10 @@
+import { addAPIProvider } from '@iconify/vue';
+
+/** Setup the iconify offline */
+export function setupIconifyOffline() {
+  const { VITE_ICONIFY_URL } = import.meta.env;
+
+  if (VITE_ICONIFY_URL) {
+    addAPIProvider('', { resources: [VITE_ICONIFY_URL] });
+  }
+}

src/plugins/index.ts

@@ -0,0 +1,5 @@
+export * from './loading';
+export * from './nprogress';
+export * from './iconify';
+export * from './dayjs';
+export * from './app';

src/plugins/loading.ts

@@ -0,0 +1,51 @@
+// @unocss-include
+import { getRgb } from '@sa/color';
+import { DARK_CLASS } from '@/constants/app';
+import { localStg } from '@/utils/storage';
+import { toggleHtmlClass } from '@/utils/common';
+import systemLogo from '@/assets/svg-icon/logo.svg?raw';
+import { $t } from '@/locales';
+
+export function setupLoading() {
+  const themeColor = localStg.get('themeColor') || '#646cff';
+  const darkMode = localStg.get('darkMode') || false;
+  const { r, g, b } = getRgb(themeColor);
+
+  const primaryColor = `--primary-color: ${r} ${g} ${b}`;
+
+  if (darkMode) {
+    toggleHtmlClass(DARK_CLASS).add();
+  }
+
+  const loadingClasses = [
+    'left-0 top-0',
+    'left-0 bottom-0 animate-delay-500',
+    'right-0 top-0 animate-delay-1000',
+    'right-0 bottom-0 animate-delay-1500'
+  ];
+
+  const logoWithClass = systemLogo.replace('<svg', `<svg class="size-128px text-primary"`);
+
+  const dot = loadingClasses
+    .map(item => {
+      return `<div class="absolute w-16px h-16px bg-primary rounded-8px animate-pulse ${item}"></div>`;
+    })
+    .join('\n');
+
+  const loading = `
+<div class="fixed-center flex-col bg-layout" style="${primaryColor}">
+  ${logoWithClass}
+  <div class="w-56px h-56px my-36px">
+    <div class="relative h-full animate-spin">
+      ${dot}
+    </div>
+  </div>
+  <h2 class="text-28px font-500 text-primary">${$t('system.title')}</h2>
+</div>`;
+
+  const app = document.getElementById('app');
+
+  if (app) {
+    app.innerHTML = loading;
+  }
+}

src/plugins/nprogress.ts

@@ -0,0 +1,9 @@
+import NProgress from 'nprogress';
+
+/** Setup plugin NProgress */
+export function setupNProgress() {
+  NProgress.configure({ easing: 'ease', speed: 500 });
+
+  // mount on window
+  window.NProgress = NProgress;
+}