nuxt-layer-core 2.0.1

package/app/layers/solution/app/pages/quen-mat-khau/index.vue

@@ -0,0 +1,136 @@
+<template>
+  <div>
+    <TheHeader />
+    <div class="min-h-[calc(50vh-4rem)] flex items-start justify-center pt-20 pb-16 px-6">
+      <div class="w-full max-w-md">
+        <!-- Header -->
+        <div class="mb-8 text-center">
+          <h1 class="font-['Montserrat'] font-extrabold text-2xl text-slate-900 mb-2">Quên mật khẩu</h1>
+          <p class="text-slate-500 text-sm">Nhập SĐT hoặc tên tài khoản để nhận mã xác thực đặt lại mật khẩu.</p>
+        </div>
+
+        <!-- Card -->
+        <div class="bg-white rounded-2xl shadow-sm border border-slate-200/80 p-8">
+          <form @submit.prevent="onSubmit" class="space-y-5">
+            <div>
+              <label for="userLoginId" class="block text-sm font-semibold text-slate-700 mb-1.5">
+                Tên tài khoản / SĐT
+              </label>
+              <div class="relative">
+                <span class="absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-400">
+                  <Icon name="lucide:user" class="text-[17px]" />
+                </span>
+                <input
+                  id="userLoginId"
+                  v-model="userLoginId"
+                  type="text"
+                  autocomplete="username"
+                  placeholder="Nhập SĐT hoặc tên tài khoản"
+                  :class="[
+                    'w-full pl-10 pr-4 py-3 rounded-[10px] border text-sm outline-none transition-all',
+                    error
+                      ? 'border-red-400 bg-red-50 focus:border-red-500 focus:ring-2 focus:ring-red-100'
+                      : 'border-slate-200 bg-slate-50 focus:border-[#004AC6] focus:ring-2 focus:ring-blue-100 focus:bg-white'
+                  ]"
+                />
+              </div>
+              <p v-if="error" class="mt-1 text-xs text-red-500 flex items-center gap-1">
+                <Icon name="lucide:alert-circle" class="text-[13px]" /> {{ error }}
+              </p>
+            </div>
+
+            <div v-if="apiError" class="flex items-start gap-2 bg-red-50 border border-red-200 rounded-[10px] px-4 py-3 text-sm text-red-700">
+              <Icon name="lucide:alert-triangle" class="text-[16px] mt-0.5 shrink-0" />
+              <span>{{ apiError }}</span>
+            </div>
+
+            <button
+              type="submit"
+              :disabled="loading"
+              class="w-full flex items-center justify-center gap-2 bg-[#004AC6] hover:bg-[#1D4ED8] active:scale-[.98] text-white font-bold py-3.5 rounded-[10px] transition-all shadow-sm disabled:opacity-60 disabled:cursor-not-allowed"
+            >
+              <span v-if="!loading">Tiếp theo</span>
+              <span v-else class="flex items-center gap-2">
+                <svg class="animate-spin w-4 h-4" viewBox="0 0 24 24" fill="none">
+                  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+                  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z" />
+                </svg>
+                Đang kiểm tra...
+              </span>
+            </button>
+          </form>
+        </div>
+
+        <div class="text-center text-sm text-slate-500 mt-6">
+          <NuxtLink :to="{ path: '/dang-nhap', query: { redirectUrl } }" class="inline-flex items-center gap-1.5 text-sm text-slate-500 hover:text-[#004AC6] transition-colors">
+            <Icon name="lucide:arrow-left" class="text-[15px]" />
+            Quay lại đăng nhập
+          </NuxtLink>
+        </div>
+      </div>
+    </div>
+    <TheFooter/>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({ layout: 'default' })
+
+useHead({ title: 'Quên mật khẩu — Long Vân' })
+
+const { getUserLoginByUserLoginId, getPhoneByPartyId, createResetKey } = useAuthApi()
+const route = useRoute()
+const router = useRouter()
+
+const redirectUrl = computed(() => route.query.redirectUrl as string || '/')
+const userLoginId = ref('')
+const error = ref('')
+const apiError = ref('')
+const loading = ref(false)
+
+async function onSubmit() {
+  error.value = ''
+  apiError.value = ''
+
+  if (!userLoginId.value.trim()) {
+    error.value = 'Vui lòng nhập tên tài khoản hoặc SĐT'
+    return
+  }
+
+  loading.value = true
+
+  try {
+    const userRes = await getUserLoginByUserLoginId(userLoginId.value.trim())
+    if (!userRes?.userLoginId) {
+      apiError.value = 'Tài khoản không tồn tại trong hệ thống.'
+      return
+    }
+
+    const loginId = userRes.userLoginId
+    const partyId = userRes.partyId
+
+    // Get phone number for OTP
+    let phone = loginId
+    if (partyId) {
+      try {
+        const phoneRes = await getPhoneByPartyId(partyId)
+        if (phoneRes) {
+          phone = phoneRes
+        }
+      } catch {
+        // Use loginId as fallback
+      }
+    }
+
+    // Create reset key
+    await createResetKey(loginId)
+
+    // Redirect to OTP verification with userLoginId to indicate forgot password flow
+    router.push({ path: '/xac-thuc', query: { userId: phone, userLoginId: loginId, redirectUrl: redirectUrl.value } })
+  } catch (err: any) {
+    apiError.value = err?.message || 'Đã có lỗi xảy ra. Vui lòng thử lại.'
+  } finally {
+    loading.value = false
+  }
+}
+</script>

package/app/layers/solution/app/pages/xac-thuc/index.vue

@@ -0,0 +1,320 @@
+<template>
+  <div>
+    <TheHeader />
+    <div class="min-h-[calc(50vh-4rem)] flex items-start justify-center pt-20 pb-16 px-6">
+      <div class="w-full max-w-md">
+      <!-- Header -->
+      <div class="mb-8 text-center">
+        <h1 class="font-['Montserrat'] font-extrabold text-2xl text-slate-900 mb-2">Xác thực OTP</h1>
+        <p v-if="otpSent" class="text-slate-500 text-sm">
+          Nhập mã 6 chữ số đã gửi qua
+          <strong class="text-[#004AC6]">{{ selectedMethod === 'zalo' ? 'Zalo' : 'SMS' }}</strong>
+          đến <strong class="text-slate-700">{{ phone }}</strong>
+        </p>
+        <p v-else class="text-slate-500 text-sm">
+          Chọn phương thức nhận mã xác thực đến <strong class="text-slate-700">{{ phone }}</strong>
+        </p>
+      </div>
+
+      <!-- Card -->
+      <div class="bg-white rounded-2xl shadow-sm border border-slate-200/80 p-8">
+        <div class="space-y-6">
+          <!-- Icon -->
+          <div class="text-center">
+            <div class="w-14 h-14 rounded-[10px] bg-blue-50 flex items-center justify-center mx-auto mb-3">
+              <Icon name="lucide:message-square" class="text-[#004AC6] text-[24px]" />
+            </div>
+          </div>
+
+          <!-- OTP inputs -->
+          <div class="flex gap-3 justify-center">
+            <input
+              v-for="(_, i) in otpDigits"
+              :key="i"
+              :ref="(el) => setOtpRef(el, i)"
+              v-model="otpDigits[i]"
+              type="text"
+              inputmode="numeric"
+              maxlength="1"
+              @input="onOtpInput(i)"
+              @keydown="onOtpKeydown($event, i)"
+              @paste.prevent="onOtpPaste($event)"
+              :class="[
+                'w-12 h-14 text-center text-xl font-bold rounded-xl border-2 outline-none transition-all',
+                otpDigits[i]
+                  ? 'border-[#004AC6] bg-blue-50 text-[#004AC6]'
+                  : 'border-slate-200 bg-slate-50 text-slate-900 focus:border-[#004AC6] focus:bg-white focus:ring-2 focus:ring-blue-100'
+              ]"
+            />
+          </div>
+
+          <!-- Countdown / Resend -->
+          <div class="text-center text-sm space-y-2">
+            <span v-if="countdown > 0" class="text-slate-400">
+              Gửi lại sau <strong class="text-slate-700">{{ countdown }}s</strong>
+            </span>
+            <div v-else class="flex flex-col items-center gap-2">
+              <button
+                @click="resendOtp"
+                :disabled="loading"
+                class="text-[#004AC6] font-semibold hover:underline disabled:opacity-50"
+              >
+                Gửi lại mã OTP
+              </button>
+              <button
+                @click="showMethodDialog = true"
+                class="text-slate-500 hover:text-[#004AC6] transition-colors"
+              >
+                Chọn phương thức xác thực khác
+              </button>
+            </div>
+          </div>
+
+          <div v-if="apiError" class="flex items-start gap-2 bg-red-50 border border-red-200 rounded-[10px] px-4 py-3 text-sm text-red-700">
+            <Icon name="lucide:alert-triangle" class="text-[16px] mt-0.5 shrink-0" />
+            <span>{{ apiError }}</span>
+          </div>
+
+          <button
+            @click="onVerify"
+            :disabled="loading || otpCode.length < 6"
+            class="w-full flex items-center justify-center gap-2 bg-[#004AC6] hover:bg-[#1D4ED8] active:scale-[.98] text-white font-bold py-3.5 rounded-[10px] transition-all shadow-sm disabled:opacity-60 disabled:cursor-not-allowed"
+          >
+            <span v-if="!loading">Xác nhận</span>
+            <span v-else class="flex items-center gap-2">
+              <svg class="animate-spin w-4 h-4" viewBox="0 0 24 24" fill="none">
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z" />
+              </svg>
+              Đang xác thực...
+            </span>
+          </button>
+
+          <NuxtLink to="/quen-mat-khau" class="block text-center text-sm text-slate-500 hover:text-[#004AC6]">
+            ← Quay lại
+          </NuxtLink>
+        </div>
+      </div>
+      </div>
+
+      <!-- Method selection dialog -->
+      <Teleport to="body">
+        <Transition
+          enter-active-class="transition ease-out duration-200"
+          enter-from-class="opacity-0"
+          enter-to-class="opacity-100"
+          leave-active-class="transition ease-in duration-150"
+          leave-from-class="opacity-100"
+          leave-to-class="opacity-0"
+        >
+          <div v-if="showMethodDialog" class="fixed inset-0 z-[100] flex items-center justify-center p-4">
+            <div class="absolute inset-0 bg-black/40" @click="showMethodDialog = false" />
+            <div class="relative bg-white rounded-2xl shadow-xl w-full max-w-sm p-6 space-y-5">
+              <h3 class="font-['Montserrat'] font-bold text-lg text-slate-900 text-center">Chọn phương thức nhận OTP</h3>
+
+              <div class="space-y-3">
+                <button
+                  @click="pendingMethod = 'zalo'"
+                  :class="[
+                    'w-full flex items-center gap-3 p-4 rounded-xl border-2 transition-all',
+                    pendingMethod === 'zalo'
+                      ? 'border-[#004AC6] bg-blue-50'
+                      : 'border-slate-200 hover:border-slate-300'
+                  ]"
+                >
+                  <span class="w-10 h-10 rounded-[10px] bg-blue-100 flex items-center justify-center">
+                    <Icon name="lucide:message-circle" class="text-[#004AC6] text-[20px]" />
+                  </span>
+                  <div class="text-left">
+                    <p class="font-semibold text-sm text-slate-900">Tin nhắn Zalo</p>
+                    <p class="text-xs text-slate-500">Nhận mã qua Zalo</p>
+                  </div>
+                  <Icon
+                    v-if="pendingMethod === 'zalo'"
+                    name="lucide:check-circle"
+                    class="text-[#004AC6] text-[20px] ml-auto"
+                  />
+                </button>
+
+                <button
+                  @click="pendingMethod = 'sms'"
+                  :class="[
+                    'w-full flex items-center gap-3 p-4 rounded-xl border-2 transition-all',
+                    pendingMethod === 'sms'
+                      ? 'border-[#004AC6] bg-blue-50'
+                      : 'border-slate-200 hover:border-slate-300'
+                  ]"
+                >
+                  <span class="w-10 h-10 rounded-[10px] bg-emerald-100 flex items-center justify-center">
+                    <Icon name="lucide:message-square" class="text-emerald-600 text-[20px]" />
+                  </span>
+                  <div class="text-left">
+                    <p class="font-semibold text-sm text-slate-900">Tin nhắn SMS</p>
+                    <p class="text-xs text-slate-500">Nhận mã qua SMS</p>
+                  </div>
+                  <Icon
+                    v-if="pendingMethod === 'sms'"
+                    name="lucide:check-circle"
+                    class="text-[#004AC6] text-[20px] ml-auto"
+                  />
+                </button>
+              </div>
+
+              <div class="flex gap-3">
+                <button
+                  @click="showMethodDialog = false"
+                  class="flex-1 py-3 rounded-[10px] border border-slate-200 text-slate-600 font-semibold text-sm hover:bg-slate-50 transition-colors"
+                >
+                  Hủy
+                </button>
+                <button
+                  @click="confirmMethodSelection"
+                  :disabled="loading"
+                  class="flex-1 py-3 rounded-[10px] bg-[#004AC6] text-white font-bold text-sm hover:bg-[#1D4ED8] transition-colors disabled:opacity-60"
+                >
+                  Xác nhận
+                </button>
+              </div>
+            </div>
+          </div>
+        </Transition>
+      </Teleport>
+    </div>
+    <TheFooter/>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({ layout: 'default' })
+
+useHead({ title: 'Xác thực OTP — Long Vân' })
+
+const { sendOTP, validateOTP, getAccessTokenByOTP } = useAuthApi()
+const route = useRoute()
+const router = useRouter()
+
+const phone = computed(() => route.query.userId as string || '')
+const userLoginId = computed(() => route.query.userLoginId as string || '')
+const redirectUrl = computed(() => route.query.redirectUrl as string || '/')
+
+// Method selection
+const selectedMethod = ref<'sms' | 'zalo'>('zalo')
+const pendingMethod = ref<'sms' | 'zalo'>('zalo')
+const showMethodDialog = ref(false)
+
+const otpDigits = ref(['', '', '', '', '', ''])
+const otpRefs: (HTMLInputElement | null)[] = []
+const otpCode = computed(() => otpDigits.value.join(''))
+
+const loading = ref(false)
+const apiError = ref('')
+const countdown = ref(0)
+const otpSent = ref(false)
+
+let countdownTimer: ReturnType<typeof setInterval> | null = null
+
+function setOtpRef(el: any, i: number) {
+  otpRefs[i] = el as HTMLInputElement
+}
+
+function onOtpInput(i: number) {
+  const val = otpDigits.value[i]
+  if (val && i < 5) nextTick(() => otpRefs[i + 1]?.focus())
+}
+
+function onOtpKeydown(e: KeyboardEvent, i: number) {
+  if (e.key === 'Backspace' && !otpDigits.value[i] && i > 0) {
+    otpRefs[i - 1]?.focus()
+  }
+}
+
+function onOtpPaste(e: ClipboardEvent) {
+  const text = e.clipboardData?.getData('text') || ''
+  const digits = text.replace(/\D/g, '').slice(0, 6)
+  digits.split('').forEach((d, i) => { otpDigits.value[i] = d })
+  nextTick(() => otpRefs[Math.min(digits.length, 5)]?.focus())
+}
+
+function startCountdown(seconds = 60) {
+  countdown.value = seconds
+  if (countdownTimer) clearInterval(countdownTimer)
+  countdownTimer = setInterval(() => {
+    countdown.value--
+    if (countdown.value <= 0 && countdownTimer) clearInterval(countdownTimer)
+  }, 1000)
+}
+
+async function sendOtpCode(method: 'sms' | 'zalo') {
+  if (!phone.value) return
+  loading.value = true
+  apiError.value = ''
+
+  try {
+    await sendOTP(phone.value, method)
+    selectedMethod.value = method
+    otpSent.value = true
+    startCountdown(60)
+    nextTick(() => otpRefs[0]?.focus())
+  } catch (err: any) {
+    if (method === 'zalo') {
+      apiError.value = 'Gửi qua Zalo thất bại. Bạn có thể thử gửi qua SMS.'
+      pendingMethod.value = 'sms'
+      showMethodDialog.value = true
+    } else {
+      apiError.value = err?.message || 'Không thể gửi OTP.'
+    }
+  } finally {
+    loading.value = false
+  }
+}
+
+async function confirmMethodSelection() {
+  showMethodDialog.value = false
+  await sendOtpCode(pendingMethod.value)
+}
+
+async function resendOtp() {
+  // Show method selection dialog again
+  pendingMethod.value = selectedMethod.value
+  showMethodDialog.value = true
+}
+
+async function onVerify() {
+  if (otpCode.value.length < 6) return
+  loading.value = true
+  apiError.value = ''
+
+  try {
+    const res = await validateOTP(otpCode.value, phone.value, selectedMethod.value)
+    if (!res) {
+      apiError.value = 'Mã OTP không đúng hoặc đã hết hạn.'
+      return
+    }
+
+    // Get access token for password reset
+    const tokenRes = await getAccessTokenByOTP(otpCode.value, phone.value, selectedMethod.value)
+
+    // Redirect to doi-mat-khau with token
+    router.push({
+      path: '/doi-mat-khau',
+      query: { phone: phone.value, token: tokenRes, redirectUrl: redirectUrl.value }
+    })
+  } catch (err: any) {
+    apiError.value = err?.message || 'Xác thực thất bại. Vui lòng thử lại.'
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(() => {
+  if (phone.value) {
+    // Show method selection dialog first
+    pendingMethod.value = 'zalo'
+    showMethodDialog.value = true
+  }
+})
+
+onUnmounted(() => {
+  if (countdownTimer) clearInterval(countdownTimer)
+})
+</script>

package/app/layers/solution/app/plugins/reveal.ts

@@ -0,0 +1,56 @@
+// Registers `v-reveal` — a lightweight scroll-reveal directive.
+//
+// Usage:
+//   <div v-reveal>...</div>                    fade + slide up
+//   <div v-reveal="'left'">...</div>            fade + slide from left
+//   <div v-reveal="{ type: 'scale', delay: 120 }">...</div>  with stagger delay (ms)
+
+import { defineNuxtPlugin } from '#app'
+
+type RevealBinding =
+  | string
+  | {
+      type?: 'up' | 'left' | 'right' | 'scale' | 'fade'
+      delay?: number
+    }
+
+// IntersectionObserver only exists on the client
+let revealObserver: IntersectionObserver | null = null
+
+if (typeof window !== 'undefined') {
+  revealObserver = new IntersectionObserver(
+    (entries) => {
+      for (const entry of entries) {
+        if (entry.isIntersecting) {
+          entry.target.classList.add('reveal-visible')
+          revealObserver?.unobserve(entry.target)
+        }
+      }
+    },
+    { threshold: 0.15, rootMargin: '0px 0px -8% 0px' }
+  )
+}
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.directive<HTMLElement, RevealBinding>('reveal', {
+    // SSR-safe: return empty props so Vue doesn't crash during server render
+    getSSRProps() {
+      return {}
+    },
+    mounted(el, binding) {
+      const value = binding.value
+      const type = typeof value === 'string' ? value : value?.type ?? 'up'
+      const delay = typeof value === 'object' ? value?.delay ?? 0 : 0
+
+      el.setAttribute('data-reveal', type)
+      if (delay) {
+        el.style.transitionDelay = `${delay}ms`
+      }
+
+      revealObserver?.observe(el)
+    },
+    unmounted(el) {
+      revealObserver?.unobserve(el)
+    },
+  })
+})

package/app/layouts/auth.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="min-h-screen flex">
+    <!-- Left: Branding Panel (hidden on mobile) -->
+    <div
+      class="hidden lg:flex lg:w-[45%] xl:w-[40%] bg-gradient-to-br from-[#004AC6] to-[#1D4ED8] flex-col justify-between p-12 relative overflow-hidden"
+    >
+      <!-- Background decorations -->
+      <div class="absolute -top-20 -left-20 w-72 h-72 bg-blue-400/20 blur-3xl rounded-[10px] pointer-events-none" />
+      <div class="absolute -bottom-20 -right-10 w-80 h-80 bg-blue-900/30 blur-3xl rounded-[10px] pointer-events-none" />
+
+      <!-- Logo -->
+      <NuxtLink to="/" class="flex items-center gap-3 relative z-10">
+        <span
+          class="w-11 h-11 rounded-xl bg-white/20 backdrop-blur-sm flex items-center justify-center shadow-lg border border-white/30"
+        >
+          <Icon name="lucide:network" class="text-white text-[22px]" />
+        </span>
+        <span class="font-['Montserrat'] font-extrabold text-xl text-white tracking-tight">HyperCore</span>
+      </NuxtLink>
+
+      <!-- Center content -->
+      <div class="relative z-10 space-y-8">
+        <div>
+          <h2 class="font-['Montserrat'] font-extrabold text-3xl xl:text-4xl text-white leading-tight mb-4">
+            Nền tảng đào tạo<br />hạ tầng doanh nghiệp
+          </h2>
+          <p class="text-blue-100/80 text-base leading-relaxed max-w-sm">
+            Học Proxmox, Ceph, DevOps cùng đội ngũ kỹ sư hàng đầu. Lộ trình rõ ràng, thực hành thực chiến.
+          </p>
+        </div>
+
+        <!-- Stats -->
+        <div class="grid grid-cols-2 gap-4">
+          <div class="bg-white/10 backdrop-blur-sm rounded-xl p-4 border border-white/20">
+            <div class="font-['Montserrat'] font-extrabold text-2xl text-white">1.200+</div>
+            <div class="text-blue-100/70 text-sm mt-0.5">Học viên</div>
+          </div>
+          <div class="bg-white/10 backdrop-blur-sm rounded-xl p-4 border border-white/20">
+            <div class="font-['Montserrat'] font-extrabold text-2xl text-white">96%</div>
+            <div class="text-blue-100/70 text-sm mt-0.5">Hài lòng</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Footer text -->
+      <p class="text-blue-200/50 text-xs relative z-10">
+        © 2024 HyperCore. Tất cả quyền được bảo lưu.
+      </p>
+    </div>
+
+    <!-- Right: Content (form area) -->
+    <div class="flex-1 flex flex-col min-h-screen bg-[#F7F9FB]">
+      <!-- Mobile logo -->
+      <div class="lg:hidden px-6 pt-6 pb-2">
+        <NuxtLink to="/" class="flex items-center gap-2.5">
+          <span class="w-9 h-9 rounded-lg bg-gradient-to-br from-[#2563EB] to-[#1D4ED8] flex items-center justify-center shadow-sm">
+            <Icon name="lucide:network" class="text-white text-[18px]" />
+          </span>
+          <span class="font-['Montserrat'] font-extrabold text-lg text-slate-900">HyperCore</span>
+        </NuxtLink>
+      </div>
+
+      <!-- Page content -->
+      <div class="flex-1 flex items-center justify-center px-6 py-8 sm:py-12">
+        <div class="w-full max-w-md">
+          <slot />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/app/lib/utils.ts

@@ -0,0 +1,7 @@
+import type { ClassValue } from "clsx"
+import { clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/app/modules/layer-route-priority.ts

@@ -0,0 +1,60 @@
+import { defineNuxtModule } from "@nuxt/kit"
+
+export default defineNuxtModule({
+  meta: {
+    name: "layer-route-priority",
+  },
+
+  setup(_, nuxt) {
+
+    nuxt.hook("pages:extend", (pages) => {
+
+      const layerRoutes = pages.filter(page =>
+        page.file?.includes("/layers/")
+      )
+
+      const sourceRoutes = pages.filter(page =>
+        !page.file?.includes("/layers/")
+      )
+
+
+      for (const layerRoute of layerRoutes) {
+
+        for (const sourceRoute of sourceRoutes) {
+
+
+          // layer:
+          // /giai-phap/:slug
+          //
+          // source:
+          // /:slug/:slug2
+
+
+          const layerPath = layerRoute.path
+          const sourcePath = sourceRoute.path
+
+
+          if (
+            layerPath.split("/").length === sourcePath.split("/").length &&
+            sourcePath.includes(":")
+          ) {
+
+            const index = pages.indexOf(sourceRoute)
+
+
+            if(index !== -1){
+
+              pages.splice(index, 1)
+
+            }
+
+          }
+
+        }
+
+      }
+
+    })
+
+  },
+})

package/app/pages/index.vue

@@ -0,0 +1,9 @@
+<script setup>
+// import GiaiPhapPage from '../layers/solution/app/pages/giai-phap-proxmox/[slug]/index.vue'
+import GiaiPhapPage from '../layers/solution/app/pages/giai-phap-proxmox/[slug]/proxmox-hci/index.vue'
+</script>
+
+<template>
+  <GiaiPhapPage />
+  <!-- <div>d2</div> -->
+</template>

package/app/pages/san-pham-proxmox.vue

@@ -0,0 +1,8 @@
+<script setup>
+// import SanPhamProxmoxPage from '../layers/solution/app/pages/giai-phap-proxmox/[slug]/proxmox-hci/index.vue'
+</script>
+
+<template>
+  <!-- <SanPhamProxmoxPage /> -->
+  <div>d</div>
+</template>