@sigmaott/base-next 1.0.6

package/src/server/plugins/loading.css

@@ -0,0 +1,111 @@
+.app-loading {
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: -1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  background-color: #f5f7f9;
+}
+
+.app-loading_logo {
+  width: 128px;
+  height: 128px;
+}
+
+.app-loading__dot-wrapper {
+  width: 56px;
+  height: 56px;
+  margin: 36px 0;
+}
+
+.app-loading__dot {
+  position: relative;
+  height: 100%;
+  transform: rotate(45deg);
+  animation-name: loadingRotate;
+  animation-duration: 1.2s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+}
+
+@keyframes loadingRotate {
+  to {
+    -webkit-transform: rotate(405deg);
+    transform: rotate(405deg);
+  }
+}
+
+@-webkit-keyframes loadingRotate {
+  to {
+    -webkit-transform: rotate(405deg);
+    transform: rotate(405deg);
+  }
+}
+
+.app-loading__dot>i {
+  position: absolute;
+  display: block;
+  width: 18px;
+  height: 18px;
+  background: #D71921;
+  border-radius: 50%;
+  -webkit-transform: scale(0.75);
+  transform: scale(0.75);
+  transform-origin: 50% 50%;
+  opacity: 0.3;
+  animation: spinOpacity 1s infinite linear alternate;
+}
+
+@keyframes spinOpacity {
+  to {
+    opacity: 1;
+  }
+}
+
+@-webkit-keyframes spinOpacity {
+  to {
+    opacity: 1;
+  }
+}
+
+.delay-400 {
+  animation-delay: 0.4s !important;
+}
+
+.delay-800 {
+  animation-delay: 0.8s !important;
+}
+
+.delay-1200 {
+  animation-delay: 1.2s !important;
+}
+
+.left {
+  left: 0;
+}
+
+.right {
+  right: 0;
+}
+
+.top {
+  top: 0;
+}
+
+.bottom {
+  bottom: 0;
+}
+
+.app-loading_title {
+  font-size: 28px;
+  color: #646464;
+}
+
+.custom-el-loading {
+  --el-color-primary: #D71921;
+}

package/src/server/plugins/loading.html

@@ -0,0 +1,12 @@
+<div class="app-loading">
+  <img class="app-loading_logo" src="/logo.png" />
+  <div class="app-loading__dot-wrapper">
+    <div class="app-loading__dot">
+      <i class="top left"></i>
+      <i class="bottom left delay-400"></i>
+      <i class="top right delay-800"></i>
+      <i class="right bottom delay-1200"></i>
+    </div>
+  </div>
+  <h2 class="app-loading_title">Sigma Streaming</h2>
+</div>

package/src/server/plugins/loading.ts

@@ -0,0 +1,134 @@
+function loadingHtml(logo: string, title: string) {
+  return `<div class="app-loading">
+<img class="app-loading_logo" src="${logo ?? '/logo.png'}" />
+<div class="app-loading__dot-wrapper">
+  <div class="app-loading__dot">
+    <i class="top left"></i>
+    <i class="bottom left delay-400"></i>
+    <i class="top right delay-800"></i>
+    <i class="right bottom delay-1200"></i>
+  </div>
+</div>
+<h2 class="app-loading_title">${title ?? 'Sigma Streaming'}</h2>
+</div>
+`
+}
+
+export const loadingCss = `.app-loading {
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: -1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  background-color: #f5f7f9;
+}
+
+.app-loading_logo {
+  width: 128px;
+  height: 128px;
+}
+
+.app-loading__dot-wrapper {
+  width: 56px;
+  height: 56px;
+  margin: 36px 0;
+}
+
+.app-loading__dot {
+  position: relative;
+  height: 100%;
+  transform: rotate(45deg);
+  animation-name: loadingRotate;
+  animation-duration: 1.2s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+}
+
+@keyframes loadingRotate {
+  to {
+    -webkit-transform: rotate(405deg);
+    transform: rotate(405deg);
+  }
+}
+
+@-webkit-keyframes loadingRotate {
+  to {
+    -webkit-transform: rotate(405deg);
+    transform: rotate(405deg);
+  }
+}
+
+.app-loading__dot>i {
+  position: absolute;
+  display: block;
+  width: 18px;
+  height: 18px;
+  background: #606266;
+  border-radius: 50%;
+  -webkit-transform: scale(0.75);
+  transform: scale(0.75);
+  transform-origin: 50% 50%;
+  opacity: 0.3;
+  animation: spinOpacity 1s infinite linear alternate;
+}
+
+@keyframes spinOpacity {
+  to {
+    opacity: 1;
+  }
+}
+
+@-webkit-keyframes spinOpacity {
+  to {
+    opacity: 1;
+  }
+}
+
+.delay-400 {
+  animation-delay: 0.4s !important;
+}
+
+.delay-800 {
+  animation-delay: 0.8s !important;
+}
+
+.delay-1200 {
+  animation-delay: 1.2s !important;
+}
+
+.left {
+  left: 0;
+}
+
+.right {
+  right: 0;
+}
+
+.top {
+  top: 0;
+}
+
+.bottom {
+  bottom: 0;
+}
+
+.app-loading_title {
+  font-size: 28px;
+  color: #606266;
+  font-weight: 700;
+}
+`
+
+export default defineNitroPlugin((nitroApp) => {
+  const config = useRuntimeConfig()
+
+  nitroApp.hooks.hook('render:html', async (html, { event }) => {
+    html.head.push(`<style>${loadingCss}</style>`)
+    html.body = [`<div id="__nuxt">${loadingHtml(config.public.logo, config.public.title)}</div>`]
+  })
+})

package/src/templates/pwa.client.ts

@@ -0,0 +1,136 @@
+import { ref, reactive, nextTick, type UnwrapNestedRefs } from 'vue'
+import { useRegisterSW } from 'virtual:pwa-register/vue'
+import { defineNuxtPlugin } from '#imports'
+
+import { type PwaInjection } from '@vite-pwa/nuxt'
+
+const options: { periodicSyncForUpdates: number; installPrompt?: string } = <%= JSON.stringify(options) %>
+
+export default defineNuxtPlugin(() => {
+  const registrationError = ref(false)
+  const swActivated = ref(false)
+  const showInstallPrompt = ref(false)
+  const hideInstall = ref(!options.installPrompt ? true : localStorage.getItem(options.installPrompt) === 'true')
+
+  // https://thomashunter.name/posts/2021-12-11-detecting-if-pwa-twa-is-installed
+  const ua = navigator.userAgent
+  const ios = ua.match(/iPhone|iPad|iPod/)
+  const standalone = window.matchMedia('(display-mode: standalone)').matches
+  const isInstalled = !!(standalone || (ios && !ua.match(/Safari/)))
+
+  let swRegistration: ServiceWorkerRegistration | undefined
+
+  const getSWRegistration = () => swRegistration
+
+  const registerPeriodicSync = (swUrl: string, r: ServiceWorkerRegistration, timeout: number) => {
+    setInterval(async () => {
+      if (('connection' in navigator) && !navigator.onLine)
+        return
+
+      const resp = await fetch(swUrl, {
+        cache: 'no-store',
+        headers: {
+          'cache': 'no-store',
+          'cache-control': 'no-cache',
+        },
+      })
+
+      if (resp?.status === 200)
+        await r.update()
+    }, timeout)
+  }
+
+  const {
+    offlineReady, needRefresh, updateServiceWorker,
+  } = useRegisterSW({
+    immediate: true,
+    onRegisterError() {
+      registrationError.value = true
+    },
+    onRegisteredSW(swUrl, r) {
+      swRegistration = r
+      const timeout = options.periodicSyncForUpdates
+      if (timeout > 0) {
+        // should add support in pwa plugin
+        if (r?.active?.state === 'activated') {
+          swActivated.value = true
+          registerPeriodicSync(swUrl, r, timeout * 1000)
+        }
+        else if (r?.installing) {
+          r.installing.addEventListener('statechange', (e) => {
+            const sw = e.target as ServiceWorker
+            swActivated.value = sw.state === 'activated'
+            if (swActivated.value)
+              registerPeriodicSync(swUrl, r, timeout * 1000)
+          })
+        }
+      }
+    },
+  })
+
+  const cancelPrompt = async () => {
+    offlineReady.value = false
+    needRefresh.value = false
+  }
+
+  let install: () => Promise<void> = () => Promise.resolve()
+  let cancelInstall: () => void = () => {}
+
+  if (!hideInstall.value) {
+    type InstallPromptEvent = Event & {
+      prompt: () => void
+      userChoice: Promise<{ outcome: 'dismissed' | 'accepted' }>
+    }
+
+    let deferredPrompt: InstallPromptEvent | undefined
+
+    const beforeInstallPrompt = (e: Event) => {
+      e.preventDefault()
+      deferredPrompt = e as InstallPromptEvent
+      showInstallPrompt.value = true
+    }
+    window.addEventListener('beforeinstallprompt', beforeInstallPrompt)
+    window.addEventListener('appinstalled', () => {
+      deferredPrompt = undefined
+      showInstallPrompt.value = false
+    })
+
+    cancelInstall = () => {
+      deferredPrompt = undefined
+      showInstallPrompt.value = false
+      window.removeEventListener('beforeinstallprompt', beforeInstallPrompt)
+      hideInstall.value = true
+      localStorage.setItem(options.installPrompt!, 'true')
+    }
+
+    install = async () => {
+      if (!showInstallPrompt.value || !deferredPrompt) {
+        showInstallPrompt.value = false
+        return
+      }
+
+      showInstallPrompt.value = false
+      await nextTick()
+      deferredPrompt.prompt()
+      await deferredPrompt.userChoice
+    }
+  }
+
+  return {
+    provide: {
+      pwa: reactive({
+        isInstalled,
+        showInstallPrompt,
+        cancelInstall,
+        install,
+        swActivated,
+        registrationError,
+        offlineReady,
+        needRefresh,
+        updateServiceWorker,
+        cancelPrompt,
+        getSWRegistration,
+      }) satisfies UnwrapNestedRefs<PwaInjection>,
+    },
+  }
+})

package/src/utils/$apiOptions.ts

@@ -0,0 +1,79 @@
+import { showFullScreenLoading, tryHideFullScreenLoading } from '../api/service-loading'
+
+export const $apiOptions: any = {
+  baseURL: window.__NUXT__.config.public.apiBase,
+  onRequest: ({ options, request }) => {
+    const isGET = !options.method || options.method === 'GET'
+    options.headers = options.headers || {}
+    if (!isGET && !options.headers?.noLoading)
+      showFullScreenLoading()
+    options.headers = {
+      ...options.headers,
+      ...HEADER_TOKEN.value,
+    }
+  },
+  onResponse({ response, options }) {
+    tryHideFullScreenLoading()
+  },
+  onResponseError({ error, response, options, request }) {
+    console.log('[LOG] ~ file: index.vue:235 ~ error:', error)
+    if (!error.response) {
+      ElNotification({
+        title: `${error.message || 'Network Error'}`,
+        type: 'error',
+        dangerouslyUseHTMLString: true,
+        message: window.translate?.('global.went_wrong') || 'Something went wrong!',
+        duration: 5000,
+      })
+
+      return Promise.reject(error)
+    }
+
+    // Do something with request error
+    const { data } = error.response
+    const { statusCode } = data
+
+    // bring user to the 503 page if the server is down
+    if (statusCode === 503)
+      window.$router.push('/503')
+
+    tryHideFullScreenLoading()
+    if (TOKEN_STORAGE.value) {
+      if (statusCode === 401) {
+        // remove token
+        TOKEN_STORAGE.value = ''
+        // redirect to login page if not in subApp
+        showError(statusCode, error)
+        setTimeout(() => {
+          if (!isSubApp) {
+            window.location.reload()
+          }
+          else {
+            window.$wujie.bus.$emit('__RELOAD__')
+            window?.parent?.location?.reload()
+          }
+        }, 2000)
+      }
+
+      if (statusCode === 403) {
+        if (isSubApp) {
+          const mes = window.translate('403.messsage_mutation')
+          console.log('[LOG] ~ file: axios.ts:86 ~ mes:', mes)
+          error.response.data.errors = mes
+          if (error.config.method !== 'get')
+            showError(statusCode, error)
+          else
+            window.$wujie.bus.$emit('__403_MUTATION__')
+        }
+      }
+    }
+
+    const disabledNotify = !!error.config.headers?.noNotify
+
+    if (!disabledNotify)
+      showError(statusCode, error)
+
+    return Promise.reject(error)
+  },
+  client: true,
+}

package/src/utils/app.ts

@@ -0,0 +1,23 @@
+export function useAppStatus(_data: MaybeRefOrGetter<any>) {
+  const data = toRef(_data)
+
+  const isTrial = computed(() => data.value?.status === 'trial')
+  const isActive = computed(() => data.value?.status === 'active')
+  const isInactive = computed(() => data.value?.status === 'inactive')
+  const isTrialExpired = computed(() => data.value?.status === 'trial_expired')
+  const isInitialized = computed(() => data.value?.status === 'initialized')
+  const isOverdue = computed(() => data.value?.status === 'overdue')
+  const isFree = computed(() => (data.value?.status === 'active' && data.value?.edition === 'free'))
+  const isPro = computed(() => (data.value?.status === 'active' && data.value?.edition === 'professional'))
+
+  return {
+    isInitialized,
+    isTrial,
+    isActive,
+    isInactive,
+    isOverdue,
+    isFree,
+    isPro,
+    isTrialExpired,
+  }
+}

package/src/utils/cn.ts

@@ -0,0 +1,3 @@
+export function cn(...inputs: any) {
+  return [...inputs]
+}

package/src/utils/format.ts

@@ -0,0 +1,88 @@
+import { dayjs } from 'element-plus'
+
+export function formatDate(date?: Date | string, format?: string): string {
+  return date ? dayjs(date).format(format || 'YYYY-MM-DD') : 'N/A'
+}
+
+export function formatDateTime(date?: Date | string): string {
+  return date ? dayjs(date).format('YYYY/MM/DD HH:mm:ss') : 'N/A'
+}
+
+export function formatDateTimeWithTz(date?: Date | string, timezone?: string): string {
+  return date ? dayjs(date).tz(timezone).format('YYYY/MM/DD HH:mm:ss') : 'N/A'
+}
+
+function modifyNumber(inputNumber: number): string {
+  if (inputNumber < 10)
+    return `0${inputNumber}`
+
+  else
+    return inputNumber.toString()
+}
+
+export function formatDateTimeUTC(date: Date | string): string {
+  const date1 = new Date(date)
+  const year = date1.getUTCFullYear()
+  const month = date1.getUTCMonth()
+  const day = date1.getUTCDate()
+  const hour = date1.getUTCHours()
+  const minutes = date1.getUTCMinutes()
+  const seconds = date1.getUTCSeconds()
+  return `${year}/${modifyNumber(month + 1)}/${modifyNumber(day)} ${modifyNumber(hour)}:${modifyNumber(minutes)}:${modifyNumber(seconds)}`
+}
+
+export function formatGetTime(date: Date | string): string {
+  return dayjs(date).format('HH:mm:ss')
+}
+
+export function formatGetTimeWithTz(date: Date | string, timezone: string): string {
+  return dayjs(date).tz(timezone).format('HH:mm:ss')
+}
+
+export function formatWithTz(time: string, timezone: string) {
+  const timezoneOffset = dayjs().tz(dayjs.tz.guess()).utcOffset()
+  const tzOffset = dayjs().tz(timezone).utcOffset()
+  const offset = timezoneOffset - tzOffset
+  return dayjs(time).subtract(offset, 'minute').toISOString()
+}
+
+export function formatSecondsToHm(seconds: number) {
+  const d = Number(seconds)
+  const h = Math.floor(d / 3600)
+  const m = Math.floor((d % 3600) / 60)
+  const s = Math.floor((d % 3600) % 60)
+
+  const hDisplay = h > 0 ? (h < 10 ? '0' : '') + h + (h === 1 ? ':' : ':') : '00:'
+  const mDisplay = m > 0 ? (m < 10 ? '0' : '') + m + (m === 1 ? ':' : ':') : '00' + (`${s >= 0 ? ':' : ''}`)
+  const sDisplay = s > 0 ? (s < 10 ? '0' : '') + s + (s === 1 ? '' : '') : '00'
+  return hDisplay + mDisplay + sDisplay
+}
+
+export function toUpperCaseFirstLetter(text?: string) {
+  if (!text)
+    return ''
+  return text.charAt(0).toUpperCase() + text.slice(1)
+}
+
+export function formatNumberPercent(number: string | number) {
+  return number === 'NaN' || !number ? 0 : `${Number.parseFloat(number as string).toFixed(2)} %`
+}
+
+export function formatNumber(number: string | number) {
+  return new Intl.NumberFormat('vi-VN').format(number as number)
+}
+
+export function formatFileSize(size: number) {
+  const units = ['B', 'KB', 'MB', 'GB', 'TB']
+  const factor = 1024
+  let unitIndex = 0
+  while (size >= factor && unitIndex < units.length - 1) {
+    size /= factor
+    unitIndex++
+  }
+  return `${size.toFixed(2)} ${units[unitIndex]}`
+}
+
+export function getBooleanConfig(config: string | boolean) {
+  return typeof config === 'boolean' ? config : config === 'true'
+}

package/src/utils/gen-routes.ts

@@ -0,0 +1,100 @@
+// Fork https://github.com/jbaubree/vite-plugin-pages-sitemap
+import { existsSync, mkdirSync, writeFileSync } from 'fs'
+import { resolve } from 'path'
+import { ensurePrefix, ensureSuffix } from '@antfu/utils'
+
+const dynamicRouteRE = /\[.+\]/
+const nuxtDynamicRouteRE = /_[\s\S]*/
+
+function isDynamicRoute(routePath: string, nuxtStyle: boolean) {
+  if (!routePath)
+    return false
+  return nuxtStyle
+    ? nuxtDynamicRouteRE.test(routePath)
+    : dynamicRouteRE.test(routePath)
+}
+
+function removeMaybeSuffix(suffix: string, str: string) {
+  if (!str.endsWith(suffix))
+    return str
+  return str.slice(0, -suffix.length)
+}
+
+/**
+ * Plugin options.
+ */
+interface Options {
+  /**
+   * Base URI
+   * @default 'http://localhost/'
+   */
+  hostname: string
+  /**
+   * Generated routes from vite-plugin-pages
+   * @default []
+   */
+  routes: any[]
+  /**
+   * File name
+   * @default 'routes'
+   */
+  filename: string
+  /**
+   * Destination path
+   * @default 'public'
+   */
+  dest: string
+  /**
+   * Is Nuxt.js style route naming
+   * @default false
+   */
+  nuxtStyle: boolean
+}
+
+type UserOptions = Partial<Options>
+
+interface ResolvedOptions extends Options { }
+
+
+function resolveOptions(userOptions: UserOptions): ResolvedOptions {
+  return Object.assign(
+    {
+      hostname: 'http://localhost/',
+      routes: [],
+      filename: 'routes',
+      dest: 'public',
+      nuxtStyle: false,
+    },
+    userOptions,
+  )
+}
+
+
+export default function generateMenuRoutes(options: UserOptions) {
+  const resolvedOptions: ResolvedOptions = resolveOptions(options)
+  const RESOLVED_PATH = getResolvedPath(resolvedOptions.filename, '.json', resolvedOptions.dest)
+  if (!resolvedOptions.routes.length)
+    return
+  if (!existsSync(getDestPath(resolvedOptions.dest)))
+    mkdirSync(getDestPath(resolvedOptions.dest))
+
+  writeFileSync(RESOLVED_PATH, JSON.stringify(getMenuRoutes(resolvedOptions), null, 2))
+}
+
+export function getMenuRoutes(options: ResolvedOptions) {
+  const routes = options.routes
+  return routes
+  // .filter(pageRoute => !isDynamicRoute(pageRoute.component as string, options.nuxtStyle) || typeof pageRoute === 'string')
+  // .map(pageRoute => ({
+  //   url: `${removeMaybeSuffix('/', hostname)}${typeof pageRoute === 'string' ? pageRoute : pageRoute.path}`,
+  // }))
+}
+
+function getDestPath(dest: string) {
+  return ensurePrefix('./', dest)
+}
+
+function getResolvedPath(filename: string, extension: string, dest: string) {
+  const filenameWithExtension = ensureSuffix(extension, filename)
+  return resolve(`${getDestPath(dest)}/${filenameWithExtension}`)
+}