minhnt/NSG_PORTAL_V2
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
nguyen van thai
2024-06-12 17:17:49 +07:00
parent c217ed82c9
commit 5b1e0af397
44 changed files with 2674 additions and 228 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/dynamic-page/page-component/templates/other/breadcrumb/Default.vue
+49 -17
View File
@@ -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;
}
components/dynamic-page/page-component/templates/other/copyLinks/ArticleButton.vue
+8 -1
View File
@@ -1,4 +1,10 @@
<script setup lang="ts">
import { useCategoryStore } from '@/stores/category';
const store = {
category: useCategoryStore()
}
const { currentCategoryTree } = storeToRefs(store.category)
const isBookmark = ref(false)
const onClickBookmark = () => {
isBookmark.value = !isBookmark.value
@@ -14,11 +20,12 @@ async function copyLink() {
}
}
</script>
<template>
<div class="py-5 flex flex-wrap justify-between items-center">
<div class="flex gap-4 items-center">
<nuxt-link to="/" title="Quay trở lại" class="w-12 h-3rem rounded-full flex items-center justify-center bg-white border-1px shadow hover:bg-primary-100 hover:text-primary-600 cursor-pointer">
<nuxt-link :to="{ name: 'categories', params: { categories: `${currentCategoryTree[currentCategoryTree.length - 1]?.code}` } }" title="Quay trở lại" class="w-12 h-3rem rounded-full flex items-center justify-center bg-white border-1px shadow hover:bg-primary-100 hover:text-primary-600 cursor-pointer">
<Icon name="fa6-solid:arrow-left" />
</nuxt-link>
<button @click="onClickBookmark()" class="w-8 h-8 rounded-full bg-white hover:bg-primary-100 hover:text-primary-600">
components/dynamic-page/page-component/templates/other/details/default.vue
+61 -12
View File
@@ -11,17 +11,57 @@ import Document from '~/components/article/immerse/Document.vue'
import Attachment from '@/components/article/immerse/Attachment.vue'
import Tag from '@/components/article/immerse/Tag.vue'
import Articlerelation from '~/components/article/immerse/ArticleRelation.vue'
const { currentArticle } = storeToRefs(useArticleStore());
const { step } = storeToRefs(useDynamicPageStore());
import * as cherrio from 'cheerio'
const $ = cherrio.load(currentArticle.value.detail)
// console.log($, 'cherrip')
const router = useRouter()
// import * as cherrio from 'cheerio'
// const $ = cherrio.load(currentArticle.value.detail)
// for(let index = 0; index < $('articlerelation').length, index++) {
// $('articlerelation')[index]
// }
// console.log($('articlerelation').length, 'cherrip')
// onBeforeMount(async () => {
// await useArticleStore().getArticleCondition({ids: [1, 2, 3]})
// })
// console.log(router,'route')
onMounted(() => {
// const elements = document.querySelectorAll('custom-figure')
// elements.forEach((element) => {
// element.addEventListener('click', (event) => {
// event.preventDefault();
// console.log(element, 'element')
// const url = `figure/${element.getAttribute('data-code')}`;
// const a = document.createElement('a')
// a.href = url;
// document.body.appendChild(a)
// a.click();
// document.body.removeChild(a);
// })
// })
clickElement('figure', 'custom-figure', 'data-code')
clickElement('author', 'author', 'data-code')
})
function clickElement(type: string, selector: string, attribute: string) {
const elements = document.querySelectorAll(selector)
elements.forEach((element) => {
element.addEventListener('click', (event) => {
event.preventDefault();
const url = `${window.location.protocol}//${window.location.host}/${type}/${element.getAttribute(attribute)}`;
const a = document.createElement('a')
a.href = url;
document.body.appendChild(a)
a.click();
document.body.removeChild(a);
})
})
}
// const fileName = ref('')
// onMounted(() => {
// const documentElements = document.querySelectorAll('document, attachment')
@@ -50,15 +90,24 @@ const $ = cherrio.load(currentArticle.value.detail)
</script>
<template>
<div class="content" v-if="currentArticle">
<h1 id="sub" v-html="currentArticle?.sub" class=" font-bold opacity-60 pb-1" :style="{ 'font-size': `${16 + Number(step)}px`}"></h1>
<h3 id="title" :style="{ 'font-size': width > breakpoint.lg ? `${32 + Number(step)}px` : `${20 + Number(step)}px`}" class="font-bold pb-1" v-html="currentArticle?.title"></h3>
<p id="published-on" class="text-gray-600 mb-3" :style="{ 'font-size': `${14 + Number(step)}px` }">{{ utils.dateFormat(currentArticle?.publishedOn, "dddd, DD/MM/YYYY - HH:mm") }}</p>
<div id="intro" v-if="currentArticle?.intro" v-html="currentArticle?.intro" class="font-semibold tracking-widest pb-1 mb-3" :style="{'font-size': `${16 + Number(step)}px`}"></div>
<!-- <div id="article-detail" :class="'tracking-wider'" v-html="currentArticle.detail" class="[&_img]:mx-auto" :style="{ 'font-size': `${16 + Number(step)}px`}"> </div> -->
<component :is="{template: currentArticle.detail, components: { Poll, Document, Attachment, Tag} }" />
<!-- <component :is="{template: currentArticle.detail, components: { Poll, Quiz, Survey, Document, Attachment, Tag} }" /> -->
<h1 id="sub" v-html="currentArticle?.sub" class=" font-bold opacity-60 pb-1"></h1>
<h3 id="title" class="font-bold pb-1" v-html="currentArticle?.title"></h3>
<p id="published-on" class="text-gray-600 mb-3">{{ utils.dateFormat(currentArticle?.publishedOn, "dddd, DD/MM/YYYY - HH:mm") }}</p>
<div id="intro" v-if="currentArticle?.intro" v-html="currentArticle?.intro" class="font-semibold tracking-widest pb-1 mb-3"></div>
<component :is="{template: currentArticle.detail, components: { Poll, Quiz, Survey, Document, Attachment, Tag} }" />
</div>
</template>
<style lang="scss">
<style lang="scss" scoped>
#sub, #intro, #intro + div {
font-size: calc(16px + var(--step) * 1px);
}
#title {
font-size: calc(28px + var(--step) * 1px);
}
#published-on {
font-size: calc(14px + var(--step) * 1px);
}
</style>
components/dynamic-page/page-component/templates/other/index.vue
+1 -1
View File
@@ -15,7 +15,7 @@ const definedDynamicComponent: Record<string, any> = {
'ARTICLE_DETAIL_EMAGAZINE': Article_Detail_Emagazine,
'ADS_DEFAULT': ADS_Default,
'ARTICLE_BUTTON': Article_Button,
COMMENT: Comment,
'COMMENT_DEFAULT': Comment,
PODCAST: Article_Detail_Podcast,
VIDEO: Article_Detail_Video
};