@sigmaott/base-next 1.0.6

package/nuxt-config.ts

@@ -0,0 +1,23 @@
+export const sharedModules = [
+  ['@nuxt/eslint', {
+    config: {
+      standalone: false,
+      stylistic: true,
+    },
+  }],
+  ['@nuxtjs/i18n', {
+    lazy: true,
+    strategy: 'no_prefix',
+    langDir: '../locales',
+    locales: [
+      { code: 'en', file: 'en.yaml' },
+      { code: 'vi', file: 'vi.yaml' },
+    ],
+  }],
+  ['@nuxt/devtools', {
+    enabled: true,
+    componentInspector: {
+      toggleComboKey: 'meta-shift',
+    },
+  }],
+]

package/nuxt.config.ts

@@ -0,0 +1,267 @@
+import { writeFileSync } from 'node:fs'
+import { resolve as resolveFs } from 'node:path'
+import type { NuxtPage } from 'nuxt/schema'
+import { createResolver } from '@nuxt/kit'
+import generateMenuRoutes from './src/utils/gen-routes'
+import { transformRouteToMenu } from './src/utils/utils'
+import { sharedModules } from './nuxt-config'
+
+const { resolve } = createResolver(import.meta.url)
+
+export default defineNuxtConfig({
+  srcDir: 'src/',
+  ssr: false,
+  modules: [
+    '@vueuse/nuxt',
+    '@pinia/nuxt',
+    '@element-plus/nuxt',
+    '@vue-macros/nuxt',
+    '@nuxtjs/i18n',
+    resolve('./src/modules/api-party/module.ts'),
+    '@unocss/nuxt',
+    // '@nuxt/fonts',
+    'v-lazy-show/nuxt',
+    'dayjs-nuxt',
+    ...sharedModules,
+  ],
+  i18n: {
+    lazy: true,
+    strategy: 'no_prefix',
+    langDir: '../../base/locales',
+    locales: [
+      { code: 'en', file: 'en.yaml' },
+      { code: 'vi', file: 'vi.yaml' },
+    ],
+    vueI18n: './i18n.config.ts',
+  },
+  experimental: {
+    // when using generate, payload js assets included in sw precache manifest
+    // but missing on offline, disabling extraction it until fixed
+    payloadExtraction: false,
+    renderJsonPayloads: true,
+    // typedPages: true,
+  },
+  features: {
+    // For UnoCSS
+    inlineStyles: false,
+  },
+
+  apiParty: {
+    allowClient: true,
+  },
+  optimizeDeps: { exclude: ['vue'] },
+
+  css: [
+    '@unocss/reset/tailwind-compat.css',
+    'vue-json-pretty/lib/styles.css',
+    resolve('./src/assets/scss/index.scss'),
+  ],
+
+  nitro: {
+    esbuild: {
+      options: {
+        target: 'esnext',
+      },
+    },
+  },
+
+  imports: {
+    dirs: [
+      './constants',
+      // all hooks, helper folders in components folder
+      'components/**/*/hooks/*.ts',
+      'components/**/*/helpers/*.ts',
+    ],
+    presets: [
+      {
+        from: '@tanstack/vue-query',
+        imports: [
+          'useInfiniteQuery',
+          'useIsFetching',
+          'useIsMutating',
+          'useMutation',
+          'useQueries',
+          'useQuery',
+          'useQueryClient',
+          'useQueryProvider',
+        ],
+      },
+      {
+        from: '@antfu/utils',
+        imports: [
+          'ensurePrefix',
+          'ensureSuffix',
+          'objectKeys',
+          'objectMap',
+          'sleep',
+        ],
+      },
+      {
+        from: 'ufo',
+        imports: [
+          'joinURL',
+          'resolveURL',
+          'withQuery',
+        ],
+      },
+      {
+        from: 'klona',
+        imports: [
+          'klona',
+        ],
+      },
+      {
+        from: 'defu',
+        imports: [
+          'defu',
+        ],
+      },
+      {
+        from: 'remeda',
+        imports: [
+          'equals',
+        ],
+      },
+      {
+        from: 'element-plus',
+        imports: [
+          'dayjs',
+        ],
+      },
+    ],
+  },
+  elementPlus: {
+    importStyle: false,
+  },
+  vite: {
+    css: {
+      preprocessorOptions: {
+        scss: {
+
+          additionalData: `@use "${resolve('./src/assets/scss/element/index.scss')}" as element;`,
+        },
+      },
+    },
+    optimizeDeps: {
+      needsInterop: ['mediainfo.js'],
+    },
+    server: {
+      cors: true,
+    },
+  },
+  vue: {
+    compilerOptions: {
+      isCustomElement: tag => tag.startsWith('micro-app'),
+    },
+  },
+  hooks: {
+    'pages:extend': function (pages) {
+      // remove routes
+      function removePagesMatching(pattern: RegExp, pages: NuxtPage[] = []) {
+        const pagesToRemove = []
+        for (const page of pages) {
+          if (pattern.test(page.file))
+            pagesToRemove.push(page)
+
+          else
+            removePagesMatching(pattern, page.children)
+        }
+        for (const page of pagesToRemove)
+          pages.splice(pages.indexOf(page), 1)
+      }
+      removePagesMatching(/.*\/components\/.*$/, pages)
+
+      // the problem is that we dont have page metadata
+      generateMenuRoutes({ routes: transformRouteToMenu(pages) })
+    },
+    'build:before': function () {
+      writeFileSync(resolveFs('./src/public/build-time.json'), JSON.stringify(Date.now(), null, 2))
+    },
+  },
+  components: [
+    {
+      path: resolve('./src/components'),
+      extensions: ['vue'],
+      prefix: 'SS',
+    },
+  ],
+  runtimeConfig: {
+    public: {
+      apiBase: process.env.NUXT_PUBLIC_API_BASE,
+    },
+    apiParty: {
+      endpoints: {
+        authServiceApi: {
+          schema: resolve('./src/schemas/authServiceApi.json'),
+        },
+        libraryApi: {
+          schema: resolve('./src/schemas/libraryApi.json'),
+        },
+        machineApi: {
+          schema: resolve('./src/schemas/machineApi.json'),
+        },
+        licenseApi: {
+          schema: resolve('./src/schemas/licenseApi.json'),
+        },
+        billingApi: {
+          schema: resolve('./src/schemas/billingApi.json'),
+        },
+        notificationApi: {
+          schema: resolve('./src/schemas/notificationApi.json'),
+        },
+        lrmApi: {
+          schema: resolve('./src/schemas/lrmApi.json'),
+        },
+        transcodeApi: {
+          schema: resolve('./src/schemas/transcodeApi.json'),
+        },
+        playoutApi: {
+          schema: resolve('./src/schemas/playoutApi.json'),
+        },
+        metricApi: {
+          schema: resolve('./src/schemas/metricApi.json'),
+        },
+        vodApi: {
+          schema: resolve('./src/schemas/vodApi.json'),
+        },
+        livestreamApi: {
+          schema: resolve('./src/schemas/livestreamApi.json'),
+        },
+        ssaiApi: {
+          schema: resolve('./src/schemas/ssaiApi.json'),
+        },
+        vastControlApi: {
+          schema: resolve('./src/schemas/vastControlApi.json'),
+        },
+        chatApi: {
+          schema: resolve('./src/schemas/chatApi.json'),
+        },
+      },
+    },
+  },
+  unocss: {
+    autoImport: false,
+  },
+  devtools: {
+    enabled: true,
+    componentInspector: {
+      toggleComboKey: 'meta-shift',
+      launchEditor: 'cursor',
+    },
+  },
+  routeRules: {
+    '/**': {
+      // enable CORS
+      cors: true, // if enabled, also needs cors-preflight-request.ts Nitro middleware to answer CORS preflight requests
+      headers: {
+        // CORS headers
+        'Access-Control-Allow-Origin': '*', // 'http://example:6006', has to be set to the requesting domain that you want to send the credentials back to
+        'Access-Control-Allow-Methods': '*', // 'GET,HEAD,PUT,PATCH,POST,DELETE,OPTIONS'
+        'Access-Control-Allow-Credentials': 'true',
+        'Access-Control-Allow-Headers': '*', // 'Origin, Content-Type, Accept, Authorization, X-Requested-With'
+        'Access-Control-Expose-Headers': '*',
+        'Access-Control-Max-Age': '0', // 7200 = caching 2 hours (Chromium default), https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Max-Age#directives
+      },
+    },
+  },
+})

package/package.json

@@ -0,0 +1,119 @@
+{
+  "name": "@sigmaott/base-next",
+  "type": "module",
+  "version": "1.0.6",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./nuxt.config.ts",
+  "files": [
+    "locales",
+    "src",
+    "public",
+    "nuxt.config.ts",
+    "hyrd-ui.preset.ts",
+    "nuxt-config.ts",
+    "i18n.config.ts",
+    "uno.config.ts",
+    "tsconfig.json"
+  ],
+  "scripts": {
+    "build": "nuxi build",
+    "dev": "nuxi dev",
+    "dev:pwa": "VITE_PLUGIN_PWA=true nuxi dev",
+    "start": "node .output/server/index.mjs",
+    "typecheck": "vue-tsc --noEmit",
+    "generate": "nuxi generate",
+    "postinstall": "nuxi prepare",
+    "start:generate": "npx serve .output/public",
+    "openapi:auth-service": "pnpm tsx ../../s-openapi.ts https://dev-streaming.gviet.vn:8783/auth-service/v1/api-docs-json ./src/schemas/authServiceApi.json",
+    "openapi:library": "pnpm tsx ../../s-openapi.ts https://dev-streaming.gviet.vn:8783/api/library/api-docs-json ./src/schemas/libraryApi.json",
+    "openapi:machine": "pnpm tsx ../../s-openapi.ts https://dev-streaming.gviet.vn:8783/api/machine/api-docs-json ./src/schemas/machineApi.json",
+    "openapi:license": "pnpm tsx ../../s-openapi.ts https://dev-streaming.gviet.vn:8783/api/license/api-docs-json ./src/schemas/licenseApi.json",
+    "openapi:notification": "curl https://dev-streaming.gviet.vn:8783/api/notification/api-docs-json -o ./src/schemas/notificationApi.json",
+    "openapi:lrm": "pnpm tsx ../../s-openapi.ts https://dev-streaming.gviet.vn:8783/api/lrm/api-docs-json ./src/schemas/lrmApi.json",
+    "openapi:transcode": "pnpm tsx ../../s-openapi.ts https://dev-streaming.gviet.vn:8783/api/transcode/api-docs-json ./src/schemas/transcodeApi.json",
+    "openapi:billing": "pnpm tsx ../../s-openapi.ts https://dev-streaming.gviet.vn:8783/api/billing/api-docs-json ./src/schemas/billingApi.json --covert",
+    "openapi:metric": "pnpm tsx ../../s-openapi.ts https://dev-streaming.gviet.vn:8783/api/metric/api-docs-json ./src/schemas/metricApi.json",
+    "openapi:playout": "pnpm tsx ../../s-openapi.ts https://dev-streaming.gviet.vn:8783/api/playout/api-docs-json ./src/schemas/playoutApi.json",
+    "openapi:vod": "pnpm tsx ../../s-openapi.ts https://dev-streaming.gviet.vn:8783/api/vod/api-docs-json ./src/schemas/vodApi.json",
+    "openapi:livestream": "pnpm tsx ../../s-openapi.ts https://dev-streaming.gviet.vn:8783/api/livestream/api-docs-json ./src/schemas/livestreamApi.json",
+    "openapi:ssai": "pnpm tsx ../../s-openapi.ts https://dev-streaming.gviet.vn:8783/api/ssai/api-docs-json ./src/schemas/ssaiApi.json",
+    "openapi:chat": "pnpm tsx ../../s-openapi.ts https://dev-streaming.gviet.vn:8783/api/chat/api-docs-json ./src/schemas/chatApi.json"
+  },
+  "dependencies": {
+    "@ai-sdk/vue": "^1.2.12",
+    "@nuxt/fonts": "^0.8.0",
+    "lucide-vue-next": "^0.446.0",
+    "uuid": "^9.0.1",
+    "vue-json-pretty": "^2.2.4",
+    "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.1/xlsx-0.20.1.tgz",
+    "zod": "^3.24.1",
+    "@atlaskit/pragmatic-drag-and-drop": "^1.1.9",
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
+    "@element-plus/nuxt": "^1.0.7",
+    "@iconify-json/carbon": "^1.1.18",
+    "@iconify-json/ep": "^1.1.10",
+    "@iconify-json/lucide": "^1.1.188",
+    "@iconify-json/radix-icons": "^1.1.11",
+    "@iconify-json/ri": "^1.1.10",
+    "@iconify-json/twemoji": "^1.1.11",
+    "@nuxt/devtools": "^1.6.0",
+    "@nuxtjs/color-mode": "^3.3.0",
+    "@nuxtjs/i18n": "^8.3.1",
+    "@pinia/nuxt": "^0.4.11",
+    "@unocss/nuxt": "^0.59.4",
+    "@unocss/reset": "^0.59.4",
+    "@vite-pwa/nuxt": "^0.1.0",
+    "@vue-macros/nuxt": "^1.3.12",
+    "@vueuse/core": "^10.6.1",
+    "@vueuse/nuxt": "^10.6.1",
+    "axios": "^0.27.2",
+    "consola": "^3.1.0",
+    "dayjs-nuxt": "^2.1.9",
+    "defu": "^6.1.2",
+    "h3": "^1.8.1",
+    "hls.js": "^1.5.14",
+    "nuxt": "3.15.4",
+    "nuxt-api-party": "^0.20.1",
+    "openapi-typescript": "^6.6.1",
+    "pinia": "^2.1.4",
+    "plyr": "^3.7.8",
+    "radix-vue": "^1.9.6",
+    "sass": "^1.63.6",
+    "swagger-client": "^3.19.10",
+    "typescript": "^5.4.5",
+    "unocss": "^0.59.4",
+    "v-lazy-show": "^0.2.4",
+    "vue-tsc": "^1.8.1",
+    "@antfu/eslint-config": "^2.15.0",
+    "@antfu/utils": "^0.7.4",
+    "@changesets/cli": "^2.26.1",
+    "@nuxt/eslint": "^0.3.9",
+    "@openapitools/openapi-generator-cli": "^2.6.0",
+    "@tanstack/vue-query": "^4.29.13",
+    "@types/node": "18.16.16",
+    "@types/validator": "^13.7.17",
+    "@unocss/eslint-config": "^0.59.4",
+    "@videojs-player/vue": "^1.0.0",
+    "@vvo/tzdb": "^6.108.0",
+    "clipboard": "^2.0.11",
+    "cross-env": "^7.0.3",
+    "destr": "^1.2.2",
+    "element-plus": "2.5.5",
+    "eslint": "^9.1.1",
+    "eslint-plugin-format": "^0.1.1",
+    "klona": "^2.0.6",
+    "libphonenumber-js": "^1.10.34",
+    "mediainfo.js": "0.1.8",
+    "recaptcha-v3": "^1.10.0",
+    "remeda": "^1.19.0",
+    "tsx": "^4.7.1",
+    "validator": "^13.9.0",
+    "video.js": "^7.20.3",
+    "vue-echarts": "^6.6.0",
+    "worker-timers": "^7.0.71",
+     "@vueuse/router": "^10.9.0",
+    "jszip": "^3.10.1"
+  }
+}

package/public/routes.json

@@ -0,0 +1,34 @@
+[
+  {
+    "name": "all",
+    "path": "/:all(.*)*",
+    "meta": {
+      "__nuxt_dynamic_meta_key": {}
+    },
+    "children": []
+  },
+  {
+    "name": "403",
+    "path": "/403",
+    "meta": {
+      "__nuxt_dynamic_meta_key": {}
+    },
+    "children": []
+  },
+  {
+    "name": "500",
+    "path": "/500",
+    "meta": {
+      "__nuxt_dynamic_meta_key": {}
+    },
+    "children": []
+  },
+  {
+    "name": "login",
+    "path": "/login",
+    "meta": {
+      "__nuxt_dynamic_meta_key": {}
+    },
+    "children": []
+  }
+]

package/src/api/api.ts

@@ -0,0 +1,15 @@
+import { AppsApi } from '@/api-client-auth'
+import { InvoiceApi, PaymentMethodsApi, PaymentPlanApi } from '@/api-client-billing'
+import { BASE_PATH as paymentBaseUrl } from '@/api-client-billing/base'
+import { NotificationApi } from '@/api-client-noti'
+import axiosInstance from '@/api/axios'
+
+export { paymentBaseUrl }
+export const paymentMethodsApi = new PaymentMethodsApi(undefined, paymentBaseUrl, axiosInstance)
+export const invoiceApi = new InvoiceApi(undefined, paymentBaseUrl, axiosInstance)
+export const paymentPlanApi = new PaymentPlanApi(undefined, paymentBaseUrl, axiosInstance)
+
+export const notificationApi = new NotificationApi(undefined, '', axiosInstance)
+
+// Assets
+export const appsApi = new AppsApi(undefined, '', axiosInstance)

package/src/api/axios.ts

@@ -0,0 +1,125 @@
+// @unocss-include
+import type { AxiosInstance, AxiosRequestConfig } from 'axios'
+import axios from 'axios'
+import { ElNotification } from 'element-plus'
+import { showFullScreenLoading, tryHideFullScreenLoading } from './service-loading'
+
+interface CustomAxiosRequestConfig extends AxiosRequestConfig { }
+
+interface ResponseError {
+  statusCode: number
+  timestamp: Date
+  message: string | string[]
+  path: string
+  errors?: string[]
+}
+
+export const service = axios.create({
+  baseURL: window.__NUXT__.config.public.apiBase,
+})
+
+const showError = useThrottleFn((statusCode: any, error: any) => {
+  ElNotification({
+    title: `${[window.translate?.('global.error'), statusCode || ''].join(' ')}`,
+    type: 'error',
+    dangerouslyUseHTMLString: true,
+    message: getErrorMessage(error),
+    duration: 5000,
+    customClass: '!w-[650px] !z-69999',
+    modalClass: '!z-69999',
+  })
+}, 1500)
+
+export function addInterceptor(service: AxiosInstance, transformRes?: (res) => any) {
+  service.interceptors.request.use((config) => {
+    const isNotGet = config.method !== 'get'
+    // only add loading for mutation request
+    if (isNotGet && !config.headers!.noLoading)
+      showFullScreenLoading()
+
+    const customConfig = config as CustomAxiosRequestConfig
+    customConfig.headers = {
+      ...HEADER_TOKEN.value,
+      ...config.headers,
+    }
+    return customConfig
+  })
+
+  service.interceptors.response.use((response) => {
+    if (response.config.method !== 'get')
+      tryHideFullScreenLoading()
+    return transformRes ? transformRes(response) : response
+  }, (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 as ResponseError
+
+    // 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) {
+        const mes = window.translate('403.messsage_mutation')
+        if (error.response?.data) {
+          error.response.data.errors = mes
+        }
+        if (isSubApp) {
+          if (error.config.method !== 'get') {
+            showError(statusCode, error)
+          }
+          else {
+            window.$wujie.bus.$emit('__403_MUTATION__')
+          }
+        }
+        else {
+          const bypass403 = error.config?.headers['X-Bypass-403']?.toString() === 'true'
+          bypass403 ? showError(statusCode, error) : window.$router.push('/403')
+        }
+      }
+    }
+    // noNotify = false
+    let disabledNotify = !!error.config.headers?.noNotify
+    const statusCodeDisabledNotify = error.config.headers?.statusCodeDisabledNotify
+    if (statusCodeDisabledNotify)
+      disabledNotify = statusCodeDisabledNotify.includes(statusCode)
+
+    if (!disabledNotify)
+      showError(statusCode, error)
+
+    return Promise.reject(error)
+  })
+}
+
+addInterceptor(service)
+
+export default service

package/src/api/service-loading.ts

@@ -0,0 +1,50 @@
+import { ElLoading } from 'element-plus'
+
+let loadingInstance: ReturnType<typeof ElLoading.service>
+
+export function startLoading() {
+  loadingInstance = ElLoading.service({
+    fullscreen: true,
+    lock: true,
+    text: window.translate?.('global.loading') || 'Loading',
+    background: 'rgba(0, 0, 0, 0.7)',
+    // svgViewBox: '0 0 286.3 286.3',
+    customClass: 'custom-el-loading !z-690000000',
+    //     svg: `<svg version="1.1" id="Group_1_copy_11" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+    // y="0px" viewBox="0 0 286.3 286.3" style="enable-background:new 0 0 286.3 286.3;" xml:space="preserve">
+    // <style type="text/css">
+    // .st0{fill:#D71921;}
+    // </style>
+    // <g>
+    // <path class="st0" d="M171.6,139.6l-35.9-23.7c-5.2-3.4-12,0.3-12,6.5v47.4c0,6.2,6.9,9.9,12,6.5l35.9-23.7
+    //  C176.3,149.5,176.3,142.7,171.6,139.6z"/>
+    // <path class="st0" d="M282.5,126.4h-12.4h-32.4h-23C206,95,177.4,71.9,143.3,71.9S80.6,95,72.1,126.4H48.8c8-45,47.1-79.1,94.4-79.1
+    //  c35.6,0,66.7,19.4,83.3,48.3h48.8c-19.5-54-71.3-92.6-132-92.6C65.6,2.8,2.8,65.7,2.8,143.2c0,7,0.5,13.9,1.5,20.6h11.9h33.2h22.3
+    //  c8.1,32.1,37.1,56,71.6,56s63.6-23.9,71.6-56h21.9c-9.4,43.1-47.8,75.4-93.7,75.4c-34,0-63.9-17.7-81-44.5H12.6
+    //  c20.5,52,71.2,88.9,130.6,88.9c77.5,0,140.3-62.8,140.3-140.3C283.5,137.5,283.1,131.9,282.5,126.4z M143.3,197.4
+    //  c-28.4,0-51.6-23.1-51.6-51.6c0-28.4,23.1-51.6,51.6-51.6s51.6,23.1,51.6,51.6C194.9,174.2,171.8,197.4,143.3,197.4z"/>
+    // </g>
+    // </svg>
+    // `,
+    modalClass: '!z-690000000',
+  })
+}
+function endLoading() {
+  loadingInstance.close()
+}
+
+let needLoadingRequestCount = 0
+export function showFullScreenLoading() {
+  if (needLoadingRequestCount === 0)
+    startLoading()
+
+  needLoadingRequestCount++
+}
+
+export function tryHideFullScreenLoading() {
+  if (needLoadingRequestCount <= 0)
+    return
+  needLoadingRequestCount--
+  if (needLoadingRequestCount === 0)
+    endLoading()
+}