@sigmaott/base-next 1.4.0 → 1.4.2

package/src/components/AuthLayout/AuthLayoutSimple.vue

@@ -1,150 +1,150 @@
-<script lang="ts" setup>
-import '../../assets/global.css'
-import type { RouteRecordRaw } from 'vue-router'
-import viVN from 'element-plus/es/locale/lang/vi'
-import enEN from 'element-plus/es/locale/lang/en'
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-const props = withDefaults(defineProps<{
-  asideWidth?: number
-  routes: RouteRecordRaw[]
-  logoSrc?: string
-  reverse?: boolean
-}>(), { routes: () => [] })
-
-const { locale } = useI18n()
-
-const viVNCustom = { ...viVN }
-viVNCustom.el.datepicker.year = ''
-
-const localeConfig = computed(() => locale.value === 'vi' ? viVN : enEN)
-
-useProvideLayoutStore(props)
-
-syncRef(locale, __LANGUAGE__)
-
-function handleCommand(lang: string) {
-  locale.value = lang
-  window.location.reload()
-}
-
-const containerRef = ref()
-const route = useRoute()
-
-watch(() => route.path, () => {
-  containerRef.value.scrollTo(0, 0)
-})
-
-const { isDark } = useLayoutStore()
-</script>
-
-<template>
-  <el-config-provider :locale="localeConfig" :z-index="4000">
-    <div
-      class="[background-position:50%] relative h-full min-h-500px min-w-550px flex items-center justify-center bg-#eeeeee bg-cover"
-      dark="bg-$el-fill-color-extra-light"
-      :style="{
-        backgroundImage: `url('${(isDark ? '/login-bg-sigma-dark.png' : '/login-bg-sigma.png')}')`,
-      }"
-    >
-      <div
-        v-if="!reverse"
-        class="absolute left-100px left-100px top-56px flex items-center justify-center gap-16px"
-      >
-        <!-- <el-dropdown trigger="click" @command="handleCommand">
-          <el-button text>
-            <el-icon size="22px">
-              <div class="i-carbon:language" />
-            </el-icon>
-          </el-button>
-          <template #dropdown>
-            <el-dropdown-menu>
-              <el-dropdown-item command="en" :class="[locale === 'en' && '!text-primary']">
-                English
-              </el-dropdown-item>
-              <el-dropdown-item command="vi" :class="[locale === 'vi' && '!text-primary']">
-                Tiếng Việt
-              </el-dropdown-item>
-            </el-dropdown-menu>
-          </template>
-        </el-dropdown> -->
-        <SSSwitchDark />
-      </div>
-      <div
-        class="login-box box-border h-90% w-90% flex items-center justify-around rounded-10px bg-[hsla(0,0%,100%,0.6)] px-50px py-0"
-        dark="bg-$el-mask-color"
-        :class="[reverse ? 'flex-row-reverse' : '']"
-      >
-        <div class="login-left">
-          <div
-            class="flex items-end justify-center gap-x-2 pb-14 text-primary"
-            dark="text-primary"
-          >
-            <span>
-              <img src="/login-sigma-logo.png" alt="LS" class="h-52px w-52px">
-            </span>
-            <div>
-              <svg
-                class="w-120px text-#484848 dark:text-white" width="100" height="36" viewBox="0 0 88 19" fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M64.5247 0.948242C63.1337 0.948242 61.9113 1.45405 60.9419 2.33922C60.0146 1.4962 58.75 0.948242 57.359 0.948242C54.4085 0.948242 52.0059 3.35084 52.0059 6.30144V18.7359H55.5466V6.25924C55.5466 5.28974 56.3474 4.48894 57.3169 4.48894C58.2864 4.48894 59.0872 5.28974 59.0872 6.25924V15.7432C59.0872 15.9118 59.0872 16.0382 59.1294 16.1647V18.7359H62.6701V6.25924C62.6701 5.28974 63.4709 4.48894 64.4404 4.48894C65.4099 4.48894 66.2107 5.28974 66.2107 6.25924V18.6937H69.7514V6.25924C69.8779 3.30864 67.4753 0.948242 64.5247 0.948242Z"
-                  fill="currentColor"
-                />
-                <path
-                  d="M81.7644 0.948242H78.7296C75.779 0.948242 73.3764 3.35084 73.3764 6.30144V18.7359H76.9171V11.9917H83.5348V18.7359H87.0754V6.25924C87.1176 3.30864 84.715 0.948242 81.7644 0.948242ZM76.9592 8.24034V6.25924C76.9592 5.28974 77.7601 4.48894 78.7296 4.48894H81.7644C82.7339 4.48894 83.5348 5.28974 83.5348 6.25924V8.24034H76.9592Z"
-                  fill="currentColor"
-                />
-                <path
-                  d="M24.0601 0.948242C23.0063 0.948242 22.2054 1.79126 22.2054 2.84503V18.778H25.9569V2.80288C25.9147 1.79126 25.0717 0.948242 24.0601 0.948242Z"
-                  fill="currentColor"
-                />
-                <path
-                  d="M5.38718 4.57334H14.8712C16.8523 4.57334 18.4118 2.97154 18.4118 1.03262H5.38718C2.43662 1.03262 0.0761719 3.43524 0.0761719 6.38574C0.0761719 8.45114 1.25639 10.2215 2.94243 11.1066C3.40609 11.4017 3.95405 11.5703 4.50201 11.6125C4.79707 11.6546 5.09213 11.6968 5.38718 11.6968H13.5223C14.2811 11.9075 14.8712 12.5819 14.8712 13.4249C14.8712 14.3944 14.0703 15.1953 13.1008 15.1953H3.659C1.6779 15.1953 0.118322 16.797 0.118322 18.736H13.1008C16.0514 18.736 18.454 16.3334 18.454 13.3828C18.454 11.3174 17.2738 9.54714 15.5877 8.66194C15.1241 8.36684 14.5761 8.19824 14.0281 8.15614C13.7331 8.11394 13.438 8.07184 13.143 8.07184H4.96567C4.20696 7.86104 3.61685 7.18664 3.61685 6.34364C3.61685 5.37414 4.41771 4.57334 5.38718 4.57334Z"
-                  fill="currentColor"
-                />
-                <path
-                  d="M42.7329 8.11384H35.6516V11.6544H42.6908C43.6602 11.6544 44.4611 12.4553 44.4611 13.4248C44.4611 14.3943 43.6602 15.1951 42.6908 15.1951H34.7242C33.7548 15.1951 32.9117 14.3943 32.9117 13.4248V6.38564C32.9117 5.41614 33.7548 4.61524 34.7242 4.61524H44.2082C46.1893 4.61524 47.7489 3.01354 47.7489 1.07461H34.7242C31.7737 1.07461 29.3711 3.47724 29.3711 6.42774V13.5091C29.3711 16.291 31.5208 18.6093 34.2606 18.8201C34.2606 18.8201 34.2606 18.8201 34.2606 18.8622H42.6065C45.557 18.8622 47.9596 16.4596 47.9596 13.5091C47.9596 10.5585 45.6835 8.11384 42.7329 8.11384Z"
-                  fill="currentColor"
-                />
-              </svg>
-
-              <div class="flex items-center gap-0.75">
-                <span class="h-1.5 w-1.5 animate-ping rounded-full bg-#FD8421 dark:bg-#FFFFF" />
-                <span class="text-16px/20px text-#FD8421 font-600 tracking-widest dark:text-#FFFFFF">Streaming</span>
-              </div>
-            </div>
-          </div>
-          <img src="/login-img-sigma.png" alt="login" class="w-750px!">
-        </div>
-
-        <el-scrollbar
-          ref="containerRef"
-          v-bind="$attrs"
-          class="w-460px flex-shrink-0 [&_.el-scrollbar\_\_wrap]:(grid items-center)"
-        >
-          <div class="rounded-20px bg-$el-bg-color px-40px py-50px">
-            <slot />
-          </div>
-        </el-scrollbar>
-      </div>
-    </div>
-  </el-config-provider>
-</template>
-
-<i18n lang="yaml" global>
-en:
-  global:
-    loading: Loading...
-    went_wrong: Something went wrong, please try again later
-    error: Error
-vi:
-  global:
-    loading: Đang tải...
-    went_wrong: Có lỗi xảy ra, vui lòng thử lại sau
-    error: Lỗi
-</i18n>
+<script lang="ts" setup>
+import '../../assets/global.css'
+import type { RouteRecordRaw } from 'vue-router'
+import viVN from 'element-plus/es/locale/lang/vi'
+import enEN from 'element-plus/es/locale/lang/en'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<{
+  asideWidth?: number
+  routes: RouteRecordRaw[]
+  logoSrc?: string
+  reverse?: boolean
+}>(), { routes: () => [] })
+
+const { locale } = useI18n()
+
+const viVNCustom = { ...viVN }
+viVNCustom.el.datepicker.year = ''
+
+const localeConfig = computed(() => locale.value === 'vi' ? viVN : enEN)
+
+useProvideLayoutStore(props)
+
+syncRef(locale, __LANGUAGE__)
+
+function handleCommand(lang: string) {
+  locale.value = lang
+  window.location.reload()
+}
+
+const containerRef = ref()
+const route = useRoute()
+
+watch(() => route.path, () => {
+  containerRef.value.scrollTo(0, 0)
+})
+
+const { isDark } = useLayoutStore()
+</script>
+
+<template>
+  <el-config-provider :locale="localeConfig" :z-index="4000">
+    <div
+      class="[background-position:50%] relative h-full min-h-500px min-w-550px flex items-center justify-center bg-#eeeeee bg-cover"
+      dark="bg-$el-fill-color-extra-light"
+      :style="{
+        backgroundImage: `url('${(isDark ? '/login-bg-sigma-dark.png' : '/login-bg-sigma.png')}')`,
+      }"
+    >
+      <div
+        v-if="!reverse"
+        class="absolute left-100px left-100px top-56px flex items-center justify-center gap-16px"
+      >
+        <!-- <el-dropdown trigger="click" @command="handleCommand">
+          <el-button text>
+            <el-icon size="22px">
+              <div class="i-carbon:language" />
+            </el-icon>
+          </el-button>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item command="en" :class="[locale === 'en' && '!text-primary']">
+                English
+              </el-dropdown-item>
+              <el-dropdown-item command="vi" :class="[locale === 'vi' && '!text-primary']">
+                Tiếng Việt
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown> -->
+        <SSSwitchDark />
+      </div>
+      <div
+        class="login-box box-border h-90% w-90% flex items-center justify-around rounded-10px bg-[hsla(0,0%,100%,0.6)] px-50px py-0"
+        dark="bg-$el-mask-color"
+        :class="[reverse ? 'flex-row-reverse' : '']"
+      >
+        <div class="login-left">
+          <div
+            class="flex items-end justify-center gap-x-2 pb-14 text-primary"
+            dark="text-primary"
+          >
+            <span>
+              <img src="/login-sigma-logo.png" alt="LS" class="h-52px w-52px">
+            </span>
+            <div>
+              <svg
+                class="w-120px text-#484848 dark:text-white" width="100" height="36" viewBox="0 0 88 19" fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M64.5247 0.948242C63.1337 0.948242 61.9113 1.45405 60.9419 2.33922C60.0146 1.4962 58.75 0.948242 57.359 0.948242C54.4085 0.948242 52.0059 3.35084 52.0059 6.30144V18.7359H55.5466V6.25924C55.5466 5.28974 56.3474 4.48894 57.3169 4.48894C58.2864 4.48894 59.0872 5.28974 59.0872 6.25924V15.7432C59.0872 15.9118 59.0872 16.0382 59.1294 16.1647V18.7359H62.6701V6.25924C62.6701 5.28974 63.4709 4.48894 64.4404 4.48894C65.4099 4.48894 66.2107 5.28974 66.2107 6.25924V18.6937H69.7514V6.25924C69.8779 3.30864 67.4753 0.948242 64.5247 0.948242Z"
+                  fill="currentColor"
+                />
+                <path
+                  d="M81.7644 0.948242H78.7296C75.779 0.948242 73.3764 3.35084 73.3764 6.30144V18.7359H76.9171V11.9917H83.5348V18.7359H87.0754V6.25924C87.1176 3.30864 84.715 0.948242 81.7644 0.948242ZM76.9592 8.24034V6.25924C76.9592 5.28974 77.7601 4.48894 78.7296 4.48894H81.7644C82.7339 4.48894 83.5348 5.28974 83.5348 6.25924V8.24034H76.9592Z"
+                  fill="currentColor"
+                />
+                <path
+                  d="M24.0601 0.948242C23.0063 0.948242 22.2054 1.79126 22.2054 2.84503V18.778H25.9569V2.80288C25.9147 1.79126 25.0717 0.948242 24.0601 0.948242Z"
+                  fill="currentColor"
+                />
+                <path
+                  d="M5.38718 4.57334H14.8712C16.8523 4.57334 18.4118 2.97154 18.4118 1.03262H5.38718C2.43662 1.03262 0.0761719 3.43524 0.0761719 6.38574C0.0761719 8.45114 1.25639 10.2215 2.94243 11.1066C3.40609 11.4017 3.95405 11.5703 4.50201 11.6125C4.79707 11.6546 5.09213 11.6968 5.38718 11.6968H13.5223C14.2811 11.9075 14.8712 12.5819 14.8712 13.4249C14.8712 14.3944 14.0703 15.1953 13.1008 15.1953H3.659C1.6779 15.1953 0.118322 16.797 0.118322 18.736H13.1008C16.0514 18.736 18.454 16.3334 18.454 13.3828C18.454 11.3174 17.2738 9.54714 15.5877 8.66194C15.1241 8.36684 14.5761 8.19824 14.0281 8.15614C13.7331 8.11394 13.438 8.07184 13.143 8.07184H4.96567C4.20696 7.86104 3.61685 7.18664 3.61685 6.34364C3.61685 5.37414 4.41771 4.57334 5.38718 4.57334Z"
+                  fill="currentColor"
+                />
+                <path
+                  d="M42.7329 8.11384H35.6516V11.6544H42.6908C43.6602 11.6544 44.4611 12.4553 44.4611 13.4248C44.4611 14.3943 43.6602 15.1951 42.6908 15.1951H34.7242C33.7548 15.1951 32.9117 14.3943 32.9117 13.4248V6.38564C32.9117 5.41614 33.7548 4.61524 34.7242 4.61524H44.2082C46.1893 4.61524 47.7489 3.01354 47.7489 1.07461H34.7242C31.7737 1.07461 29.3711 3.47724 29.3711 6.42774V13.5091C29.3711 16.291 31.5208 18.6093 34.2606 18.8201C34.2606 18.8201 34.2606 18.8201 34.2606 18.8622H42.6065C45.557 18.8622 47.9596 16.4596 47.9596 13.5091C47.9596 10.5585 45.6835 8.11384 42.7329 8.11384Z"
+                  fill="currentColor"
+                />
+              </svg>
+
+              <div class="flex items-center gap-0.75">
+                <span class="h-1.5 w-1.5 animate-ping rounded-full bg-#FD8421 dark:bg-#FFFFF" />
+                <span class="text-16px/20px text-#FD8421 font-600 tracking-widest dark:text-#FFFFFF">Streaming</span>
+              </div>
+            </div>
+          </div>
+          <img src="/login-img-sigma.png" alt="login" class="w-750px!">
+        </div>
+
+        <el-scrollbar
+          ref="containerRef"
+          v-bind="$attrs"
+          class="w-460px flex-shrink-0 [&_.el-scrollbar\_\_wrap]:(grid items-center)"
+        >
+          <div class="rounded-20px bg-$el-bg-color px-40px py-50px">
+            <slot />
+          </div>
+        </el-scrollbar>
+      </div>
+    </div>
+  </el-config-provider>
+</template>
+
+<i18n lang="yaml" global>
+en:
+  global:
+    loading: Loading...
+    went_wrong: Something went wrong, please try again later
+    error: Error
+vi:
+  global:
+    loading: Đang tải...
+    went_wrong: Có lỗi xảy ra, vui lòng thử lại sau
+    error: Lỗi
+</i18n>

package/src/components/AuthLayout/index.vue

@@ -1,151 +1,151 @@
-<script lang="ts" setup>
-import '../../assets/global.css'
-import type { RouteRecordRaw } from 'vue-router'
-import viVN from 'element-plus/es/locale/lang/vi'
-import enEN from 'element-plus/es/locale/lang/en'
-
-const props = withDefaults(defineProps<{
-  asideWidth?: number
-  routes: RouteRecordRaw[]
-  logoSrc?: string
-  reverse?: boolean
-}>(), { routes: () => [] })
-
-const { locale } = useI18n()
-
-const viVNCustom = { ...viVN }
-viVNCustom.el.datepicker.year = ''
-
-const localeConfig = computed(() => locale.value === 'vi' ? viVN : enEN)
-
-useProvideLayoutStore(props)
-
-syncRef(locale, __LANGUAGE__)
-
-function handleCommand(lang: string) {
-  locale.value = lang
-  window.location.reload()
-}
-
-const containerRef = ref()
-const route = useRoute()
-
-watch(() => route.path, () => {
-  containerRef.value.scrollTo(0, 0)
-})
-
-const { isDark } = useLayoutStore()
-
-defineOptions({
-  inheritAttrs: false,
-})
-</script>
-
-<template>
-  <el-config-provider :locale="localeConfig" :z-index="4000">
-    <div
-      class="[background-position:50%] relative h-full min-h-500px min-w-550px flex items-center justify-center bg-#eeeeee bg-cover"
-      dark="bg-$el-fill-color-extra-light"
-      :style="{
-        backgroundImage: `url('${(isDark ? $config.public.loginBgDark : $config.public.loginBg) ?? '/login_bg.svg'}')`,
-      }"
-    >
-      <div
-        v-if="!reverse"
-        class="absolute left-100px left-100px top-56px flex items-center justify-center gap-16px"
-      >
-        <el-dropdown trigger="click" @command="handleCommand">
-          <el-button text>
-            <el-icon size="22px">
-              <div class="i-carbon:language" />
-            </el-icon>
-          </el-button>
-          <template #dropdown>
-            <el-dropdown-menu>
-              <el-dropdown-item command="en" :class="[locale === 'en' && '!text-primary']">
-                English
-              </el-dropdown-item>
-              <el-dropdown-item command="vi" :class="[locale === 'vi' && '!text-primary']">
-                Tiếng Việt
-              </el-dropdown-item>
-            </el-dropdown-menu>
-          </template>
-        </el-dropdown>
-        <SSSwitchDark />
-      </div>
-      <div
-        class="login-box box-border h-90% w-90% flex items-center justify-around rounded-10px bg-[hsla(0,0%,100%,0.6)] px-50px py-0"
-        dark="bg-$el-mask-color"
-        :class="[reverse ? 'flex-row-reverse' : '']"
-      >
-        <div class="login-left">
-          <div
-            v-if="$config.public.logoSigmaText && !$config.public.modeVtvHub"
-            class="flex items-end justify-center gap-x-2 pb-14 text-primary"
-            dark="text-primary"
-          >
-            <span>
-              <img :src="$config.public.logo" alt="LS" class="h-52px w-52px">
-            </span>
-            <div>
-              <svg
-                class="w-120px text-#484848 dark:text-white" width="100" height="36" viewBox="0 0 88 19" fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M64.5247 0.948242C63.1337 0.948242 61.9113 1.45405 60.9419 2.33922C60.0146 1.4962 58.75 0.948242 57.359 0.948242C54.4085 0.948242 52.0059 3.35084 52.0059 6.30144V18.7359H55.5466V6.25924C55.5466 5.28974 56.3474 4.48894 57.3169 4.48894C58.2864 4.48894 59.0872 5.28974 59.0872 6.25924V15.7432C59.0872 15.9118 59.0872 16.0382 59.1294 16.1647V18.7359H62.6701V6.25924C62.6701 5.28974 63.4709 4.48894 64.4404 4.48894C65.4099 4.48894 66.2107 5.28974 66.2107 6.25924V18.6937H69.7514V6.25924C69.8779 3.30864 67.4753 0.948242 64.5247 0.948242Z"
-                  fill="currentColor"
-                />
-                <path
-                  d="M81.7644 0.948242H78.7296C75.779 0.948242 73.3764 3.35084 73.3764 6.30144V18.7359H76.9171V11.9917H83.5348V18.7359H87.0754V6.25924C87.1176 3.30864 84.715 0.948242 81.7644 0.948242ZM76.9592 8.24034V6.25924C76.9592 5.28974 77.7601 4.48894 78.7296 4.48894H81.7644C82.7339 4.48894 83.5348 5.28974 83.5348 6.25924V8.24034H76.9592Z"
-                  fill="currentColor"
-                />
-                <path
-                  d="M24.0601 0.948242C23.0063 0.948242 22.2054 1.79126 22.2054 2.84503V18.778H25.9569V2.80288C25.9147 1.79126 25.0717 0.948242 24.0601 0.948242Z"
-                  fill="currentColor"
-                />
-                <path
-                  d="M5.38718 4.57334H14.8712C16.8523 4.57334 18.4118 2.97154 18.4118 1.03262H5.38718C2.43662 1.03262 0.0761719 3.43524 0.0761719 6.38574C0.0761719 8.45114 1.25639 10.2215 2.94243 11.1066C3.40609 11.4017 3.95405 11.5703 4.50201 11.6125C4.79707 11.6546 5.09213 11.6968 5.38718 11.6968H13.5223C14.2811 11.9075 14.8712 12.5819 14.8712 13.4249C14.8712 14.3944 14.0703 15.1953 13.1008 15.1953H3.659C1.6779 15.1953 0.118322 16.797 0.118322 18.736H13.1008C16.0514 18.736 18.454 16.3334 18.454 13.3828C18.454 11.3174 17.2738 9.54714 15.5877 8.66194C15.1241 8.36684 14.5761 8.19824 14.0281 8.15614C13.7331 8.11394 13.438 8.07184 13.143 8.07184H4.96567C4.20696 7.86104 3.61685 7.18664 3.61685 6.34364C3.61685 5.37414 4.41771 4.57334 5.38718 4.57334Z"
-                  fill="currentColor"
-                />
-                <path
-                  d="M42.7329 8.11384H35.6516V11.6544H42.6908C43.6602 11.6544 44.4611 12.4553 44.4611 13.4248C44.4611 14.3943 43.6602 15.1951 42.6908 15.1951H34.7242C33.7548 15.1951 32.9117 14.3943 32.9117 13.4248V6.38564C32.9117 5.41614 33.7548 4.61524 34.7242 4.61524H44.2082C46.1893 4.61524 47.7489 3.01354 47.7489 1.07461H34.7242C31.7737 1.07461 29.3711 3.47724 29.3711 6.42774V13.5091C29.3711 16.291 31.5208 18.6093 34.2606 18.8201C34.2606 18.8201 34.2606 18.8201 34.2606 18.8622H42.6065C45.557 18.8622 47.9596 16.4596 47.9596 13.5091C47.9596 10.5585 45.6835 8.11384 42.7329 8.11384Z"
-                  fill="currentColor"
-                />
-              </svg>
-
-              <div class="flex items-center gap-0.75">
-                <span class="h-1.5 w-1.5 animate-ping rounded-full bg-#FD8421 dark:bg-#FFFFF" />
-                <span class="text-16px/20px text-#FD8421 font-600 tracking-widest dark:text-#FFFFFF">Streaming</span>
-              </div>
-            </div>
-          </div>
-          <img :src="$config.public.loginImg ?? '/login_left0.png'" alt="login" :class="!$config.public.modeVtvHub ? 'w-750px!' : 'w-750px!'">
-        </div>
-
-        <el-scrollbar
-          ref="containerRef"
-          v-bind="$attrs"
-          class="w-460px flex-shrink-0 [&_.el-scrollbar\_\_wrap]:(grid items-center)"
-        >
-          <div class="rounded-20px bg-$el-bg-color px-40px py-50px">
-            <slot />
-          </div>
-        </el-scrollbar>
-      </div>
-    </div>
-  </el-config-provider>
-</template>
-
-<i18n lang="yaml" global>
-en:
-  global:
-    loading: Loading...
-    went_wrong: Something went wrong, please try again later
-    error: Error
-vi:
-  global:
-    loading: Đang tải...
-    went_wrong: Có lỗi xảy ra, vui lòng thử lại sau
-    error: Lỗi
-</i18n>
+<script lang="ts" setup>
+import '../../assets/global.css'
+import type { RouteRecordRaw } from 'vue-router'
+import viVN from 'element-plus/es/locale/lang/vi'
+import enEN from 'element-plus/es/locale/lang/en'
+
+const props = withDefaults(defineProps<{
+  asideWidth?: number
+  routes: RouteRecordRaw[]
+  logoSrc?: string
+  reverse?: boolean
+}>(), { routes: () => [] })
+
+const { locale } = useI18n()
+
+const viVNCustom = { ...viVN }
+viVNCustom.el.datepicker.year = ''
+
+const localeConfig = computed(() => locale.value === 'vi' ? viVN : enEN)
+
+useProvideLayoutStore(props)
+
+syncRef(locale, __LANGUAGE__)
+
+function handleCommand(lang: string) {
+  locale.value = lang
+  window.location.reload()
+}
+
+const containerRef = ref()
+const route = useRoute()
+
+watch(() => route.path, () => {
+  containerRef.value.scrollTo(0, 0)
+})
+
+const { isDark } = useLayoutStore()
+
+defineOptions({
+  inheritAttrs: false,
+})
+</script>
+
+<template>
+  <el-config-provider :locale="localeConfig" :z-index="4000">
+    <div
+      class="[background-position:50%] relative h-full min-h-500px min-w-550px flex items-center justify-center bg-#eeeeee bg-cover"
+      dark="bg-$el-fill-color-extra-light"
+      :style="{
+        backgroundImage: `url('${(isDark ? $config.public.loginBgDark : $config.public.loginBg) ?? '/login_bg.svg'}')`,
+      }"
+    >
+      <div
+        v-if="!reverse"
+        class="absolute left-100px left-100px top-56px flex items-center justify-center gap-16px"
+      >
+        <el-dropdown trigger="click" @command="handleCommand">
+          <el-button text>
+            <el-icon size="22px">
+              <div class="i-carbon:language" />
+            </el-icon>
+          </el-button>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item command="en" :class="[locale === 'en' && '!text-primary']">
+                English
+              </el-dropdown-item>
+              <el-dropdown-item command="vi" :class="[locale === 'vi' && '!text-primary']">
+                Tiếng Việt
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+        <SSSwitchDark />
+      </div>
+      <div
+        class="login-box box-border h-90% w-90% flex items-center justify-around rounded-10px bg-[hsla(0,0%,100%,0.6)] px-50px py-0"
+        dark="bg-$el-mask-color"
+        :class="[reverse ? 'flex-row-reverse' : '']"
+      >
+        <div class="login-left">
+          <div
+            v-if="$config.public.logoSigmaText && !$config.public.modeVtvHub"
+            class="flex items-end justify-center gap-x-2 pb-14 text-primary"
+            dark="text-primary"
+          >
+            <span>
+              <img :src="$config.public.logo" alt="LS" class="h-52px w-52px">
+            </span>
+            <div>
+              <svg
+                class="w-120px text-#484848 dark:text-white" width="100" height="36" viewBox="0 0 88 19" fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M64.5247 0.948242C63.1337 0.948242 61.9113 1.45405 60.9419 2.33922C60.0146 1.4962 58.75 0.948242 57.359 0.948242C54.4085 0.948242 52.0059 3.35084 52.0059 6.30144V18.7359H55.5466V6.25924C55.5466 5.28974 56.3474 4.48894 57.3169 4.48894C58.2864 4.48894 59.0872 5.28974 59.0872 6.25924V15.7432C59.0872 15.9118 59.0872 16.0382 59.1294 16.1647V18.7359H62.6701V6.25924C62.6701 5.28974 63.4709 4.48894 64.4404 4.48894C65.4099 4.48894 66.2107 5.28974 66.2107 6.25924V18.6937H69.7514V6.25924C69.8779 3.30864 67.4753 0.948242 64.5247 0.948242Z"
+                  fill="currentColor"
+                />
+                <path
+                  d="M81.7644 0.948242H78.7296C75.779 0.948242 73.3764 3.35084 73.3764 6.30144V18.7359H76.9171V11.9917H83.5348V18.7359H87.0754V6.25924C87.1176 3.30864 84.715 0.948242 81.7644 0.948242ZM76.9592 8.24034V6.25924C76.9592 5.28974 77.7601 4.48894 78.7296 4.48894H81.7644C82.7339 4.48894 83.5348 5.28974 83.5348 6.25924V8.24034H76.9592Z"
+                  fill="currentColor"
+                />
+                <path
+                  d="M24.0601 0.948242C23.0063 0.948242 22.2054 1.79126 22.2054 2.84503V18.778H25.9569V2.80288C25.9147 1.79126 25.0717 0.948242 24.0601 0.948242Z"
+                  fill="currentColor"
+                />
+                <path
+                  d="M5.38718 4.57334H14.8712C16.8523 4.57334 18.4118 2.97154 18.4118 1.03262H5.38718C2.43662 1.03262 0.0761719 3.43524 0.0761719 6.38574C0.0761719 8.45114 1.25639 10.2215 2.94243 11.1066C3.40609 11.4017 3.95405 11.5703 4.50201 11.6125C4.79707 11.6546 5.09213 11.6968 5.38718 11.6968H13.5223C14.2811 11.9075 14.8712 12.5819 14.8712 13.4249C14.8712 14.3944 14.0703 15.1953 13.1008 15.1953H3.659C1.6779 15.1953 0.118322 16.797 0.118322 18.736H13.1008C16.0514 18.736 18.454 16.3334 18.454 13.3828C18.454 11.3174 17.2738 9.54714 15.5877 8.66194C15.1241 8.36684 14.5761 8.19824 14.0281 8.15614C13.7331 8.11394 13.438 8.07184 13.143 8.07184H4.96567C4.20696 7.86104 3.61685 7.18664 3.61685 6.34364C3.61685 5.37414 4.41771 4.57334 5.38718 4.57334Z"
+                  fill="currentColor"
+                />
+                <path
+                  d="M42.7329 8.11384H35.6516V11.6544H42.6908C43.6602 11.6544 44.4611 12.4553 44.4611 13.4248C44.4611 14.3943 43.6602 15.1951 42.6908 15.1951H34.7242C33.7548 15.1951 32.9117 14.3943 32.9117 13.4248V6.38564C32.9117 5.41614 33.7548 4.61524 34.7242 4.61524H44.2082C46.1893 4.61524 47.7489 3.01354 47.7489 1.07461H34.7242C31.7737 1.07461 29.3711 3.47724 29.3711 6.42774V13.5091C29.3711 16.291 31.5208 18.6093 34.2606 18.8201C34.2606 18.8201 34.2606 18.8201 34.2606 18.8622H42.6065C45.557 18.8622 47.9596 16.4596 47.9596 13.5091C47.9596 10.5585 45.6835 8.11384 42.7329 8.11384Z"
+                  fill="currentColor"
+                />
+              </svg>
+
+              <div class="flex items-center gap-0.75">
+                <span class="h-1.5 w-1.5 animate-ping rounded-full bg-#FD8421 dark:bg-#FFFFF" />
+                <span class="text-16px/20px text-#FD8421 font-600 tracking-widest dark:text-#FFFFFF">Streaming</span>
+              </div>
+            </div>
+          </div>
+          <img :src="$config.public.loginImg ?? '/login_left0.png'" alt="login" :class="!$config.public.modeVtvHub ? 'w-750px!' : 'w-750px!'">
+        </div>
+
+        <el-scrollbar
+          ref="containerRef"
+          v-bind="$attrs"
+          class="w-460px flex-shrink-0 [&_.el-scrollbar\_\_wrap]:(grid items-center)"
+        >
+          <div class="rounded-20px bg-$el-bg-color px-40px py-50px">
+            <slot />
+          </div>
+        </el-scrollbar>
+      </div>
+    </div>
+  </el-config-provider>
+</template>
+
+<i18n lang="yaml" global>
+en:
+  global:
+    loading: Loading...
+    went_wrong: Something went wrong, please try again later
+    error: Error
+vi:
+  global:
+    loading: Đang tải...
+    went_wrong: Có lỗi xảy ra, vui lòng thử lại sau
+    error: Lỗi
+</i18n>