thainv-dev: tạo lại cấu trúc folder và làm UI

components/dynamic-page/page-component/templates/other/breadcrumb/Default.vue

@@ -1,38 +1,73 @@
 <script setup lang="ts">
 
 import { useDynamicPageStore } from "~/stores/dynamic-page"; 
+import { useCategoryStore } from "~/stores/category";
+import { useArticleStore } from "~/stores/articles";
+
+const store = reactive({
+  dynamicPage: useDynamicPageStore(),
+  article: useArticleStore(),
+  category: useCategoryStore()
+})
+
+const { currentArticle } = storeToRefs(store.article)
+const { categoryTree } = storeToRefs(store.category)
 if(!localStorage.getItem('step')) {
   localStorage.setItem('step', '0')
 }
-useDynamicPageStore().step = Number(localStorage.getItem('step')) ?? 0
 function increase() {
-  useDynamicPageStore().step = Number(useDynamicPageStore().step) + 2
-  localStorage.setItem('step', useDynamicPageStore().step.toString())
+  
+  const step = ref(Number(getComputedStyle(document.documentElement).getPropertyValue('--step').trim()))
+  step.value += 2
+  document.documentElement.style.setProperty('--step', step.value.toString());
+
 }
 
 function decrease() {
-  useDynamicPageStore().step = Number(useDynamicPageStore().step) - 2
-  localStorage.setItem('step', useDynamicPageStore().step.toString())
+  const step = ref(Number(getComputedStyle(document.documentElement).getPropertyValue('--step').trim()))
+  step.value -= 2
+  document.documentElement.style.setProperty('--step', step.value.toString());
 }
 
+function findElementPathById(categories: any[], targetId: number, path = []) {
+  for (const category of categories) {
+    const currentPath = [...path, { title: category.title, code: category.code }];
+    if (category.id === targetId) {
+      return currentPath;
+    }
+    if (category.children) {
+      const result: any = findElementPathById(category.children, targetId, currentPath);
+      if (result) {
+        return result;
+      }
+    }
+  }
+  return null;
+}
+
+await store.category.fetchBySiteId()
+console.log(store.category.categoryTree, 'tree')
+if(!categoryTree.value?.length) {
+}
+
+const currentCategoryTree = store.category.currentCategoryTree = findElementPathById(categoryTree.value, currentArticle.value.categoryId)
 onMounted(() => {
   let detailEmagazine = document.querySelector('div[layout="ARTICLE_DETAIL_EMAGAZINE"]')
   let breakcrumb = document.querySelector('div[layout="BREADCRUM_DEFAULT"]')
   if( detailEmagazine && breakcrumb) {
     breakcrumb.classList.add('lg:max-w-640px','mx-auto')
   }
-
-  console.log('b')
 })
 
 </script>
 <template>
-
   <div class="flex justify-between items-center my-3">
     <ul class="flex gap-6 items-center text-md">
-      <li class="first:text-primary-600 font-semibold">
-          <nuxt-link to="/">Trang chủ</nuxt-link>
-      </li>
+      <template v-for="(category, index) in currentCategoryTree" :key="index">
+        <li class="first:text-primary-600 hover:text-primary-600 font-semibold relative after:absolute after:content-['\003E'] last:after:content-[''] after:right--4 after:text-gray-3">
+            <nuxt-link :to="{ name: 'categories', params: { categories: category.code ?? '/' } }">{{ category.title }}</nuxt-link>
+        </li>
+      </template>
     </ul>
 
     <div class="flex gap-2">
@@ -47,12 +82,9 @@ onMounted(() => {
     </div>
   </div>
 </template>
-<style lang="scss" scoped>
-.empty {
-  border-radius: 6px;
-  background: #409eff;
-  width: 40px;
-  min-height: 20px;
+<style lang="scss">
+:root {
+  --step: 0;
 }