li_chx/lichx-blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

✨ 完善筛选功能 新增一言 完成关于页面 🐛 解决归档页的ssg问题

Browse Source
This commit is contained in:
li-chx
2025-10-06 03:44:54 +08:00
parent 1cefa4c661
commit 6c963257cf
9 changed files with 207 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/ArticleDescriptionCards.vue
+102 -28
View File
@@ -9,15 +9,18 @@ const props = withDefaults(defineProps<{
const emits = defineEmits<{
(event: 'filterRuleChange', rule: (data: PostMetaData) => boolean): void;
}>();
const articleCount = computed(() => props.postsMetaData?.filter((post) => !post.draft && post.type === 'article').length || 0);
const announcementCount = computed(() => props.postsMetaData?.filter((post) => !post.draft && post.type === 'announcement').length || 0);
const ramblingCount = computed(() => props.postsMetaData?.filter((post) => !post.draft && post.type === 'rambling').length || 0);
const countGroup = [
{ name: '文章', count: articleCount, type: 'article' },
{ name: '絮语', count: ramblingCount, type: 'rambling' },
{ name: '公告', count: announcementCount, type: 'announcement' },
];
const categoryEnableStatus: Ref<boolean[]> = ref(Array(countGroup.length).fill(true));
const typeGroup = computed(() => {
const articleCount = computed(() => props.postsMetaData?.filter((post) => !post.draft && post.type === 'article').length || 0);
const announcementCount = computed(() => props.postsMetaData?.filter((post) => !post.draft && post.type === 'announcement').length || 0);
const ramblingCount = computed(() => props.postsMetaData?.filter((post) => !post.draft && post.type === 'rambling').length || 0);
return [
{ name: '文章', count: articleCount, type: 'article' },
{ name: '絮语', count: ramblingCount, type: 'rambling' },
{ name: '公告', count: announcementCount, type: 'announcement' },
];
});
const typeEnableStatus: Ref<boolean[]> = ref(Array(typeGroup.value.length).fill(true));
const categories = computed(() => {
const categoryMap = new Map<string, number>();
@@ -43,32 +46,97 @@ const tags = computed(() => {
return tagArray;
});
function updateCategoryEnableStatus(index: number) {
if (categoryEnableStatus.value.reduce((last, cur) => last && cur, true)) {
for (let i = 0; i < categoryEnableStatus.value.length; i++) {
const categoriesEnableStatus: Ref<boolean[]> = ref(new Array(categories.value.length).fill(true));
const tagsEnableStatus: Ref<boolean[]> = ref(new Array(tags.value.length).fill(true));
function updateTypeEnableStatus(index: number) {
if (typeEnableStatus.value.reduce((last, cur) => last && cur, true)) {
for (let i = 0; i < typeEnableStatus.value.length; i++) {
if (i !== index) {
categoryEnableStatus.value[i] = false;
typeEnableStatus.value[i] = false;
}
}
} else if (!categoryEnableStatus.value.reduce((last, cur, localIndex) => last || (localIndex === index ? false : cur), false)) {
for (let i = 0; i < categoryEnableStatus.value.length; i++) {
categoryEnableStatus.value[i] = true;
} else if (!typeEnableStatus.value.reduce((last, cur, localIndex) => last || (localIndex === index ? false : cur), false)) {
for (let i = 0; i < typeEnableStatus.value.length; i++) {
typeEnableStatus.value[i] = true;
}
} else
categoryEnableStatus.value[index] = !categoryEnableStatus.value[index];
typeEnableStatus.value[index] = !typeEnableStatus.value[index];
updateRule();
}
function updateCategoryEnableStatus(index: number) {
if (categoriesEnableStatus.value.reduce((last, cur) => last && cur, true)) {
for (let i = 0; i < categoriesEnableStatus.value.length; i++) {
if (i !== index) {
categoriesEnableStatus.value[i] = false;
}
}
} else if (categoriesEnableStatus.value[index] && !categoriesEnableStatus.value.reduce((last, cur, localIndex) => last || (localIndex === index ? false : cur), false)) {
for (let i = 0; i < categoriesEnableStatus.value.length; i++) {
categoriesEnableStatus.value[i] = true;
}
} else
categoriesEnableStatus.value[index] = !categoriesEnableStatus.value[index];
updateRule();
}
function updateTagEnableStatus(index: number) {
if (tagsEnableStatus.value.reduce((last, cur) => last && cur, true)) {
for (let i = 0; i < tagsEnableStatus.value.length; i++) {
if (i !== index) {
tagsEnableStatus.value[i] = false;
}
}
} else if (tagsEnableStatus.value[index] && !tagsEnableStatus.value.reduce((last, cur, localIndex) => last || (localIndex === index ? false : cur), false)) {
for (let i = 0; i < tagsEnableStatus.value.length; i++) {
tagsEnableStatus.value[i] = true;
}
} else
tagsEnableStatus.value[index] = !tagsEnableStatus.value[index];
updateRule();
}
function updateRule() {
const enabledCategories = categoriesEnableStatus.value.reduce((last, cur, localIndex) => {
if (cur) last.add(categories.value[localIndex]![0]);
return last;
}, new Set<string>());
const enabledTags = tagsEnableStatus.value.reduce((last, cur, localIndex) => {
if (cur) last.add(tags.value[localIndex]![0]);
return last;
}, new Set<string>());
// const enable
emits('filterRuleChange', (post) => {
for (let i = 0; i < categoryEnableStatus.value.length; i++) {
if (categoryEnableStatus.value[i] && post.type === countGroup[i]!.type) {
console.log('filter', post.title, 'true');
return true;
// type check
let tempAns = false;
for (let i = 0; i < typeEnableStatus.value.length; i++) {
if (typeEnableStatus.value[i] && post.type === typeGroup.value[i]!.type) {
tempAns = true;
}
}
console.log('filter', post.title, 'false');
return false;
// category check
if (tempAns)
tempAns = false;
else
return false;
if (post.category && enabledCategories.has(post.category))
tempAns = true;
else tempAns = !post.category && enabledCategories.size === categories.value.length;
// tag check
if (tempAns)
tempAns = false;
else
return false;
if (tagsEnableStatus.value.length === enabledTags.size)
tempAns = true;
else for (const tag of post.tags || []) {
if (enabledTags.has(tag)) {
tempAns = true;
break;
}
}
return tempAns;
});
}
</script>
@@ -83,11 +151,11 @@ function updateRule() {
<hr class="border-0 h-[1px] bg-old-neutral-600 mt-3 mb-1"/>
<div class="flex mt-4">
<div
v-for="(data, index) of countGroup"
v-for="(data, index) of typeGroup"
:key="data.name"
class="flex items-center flex-col flex-1 text-xl cursor-pointer hover:text-sky-400 dark:hover:text-[#cccaff] transition-colors duration-300"
:class="{'text-old-neutral-400': !categoryEnableStatus[index]}"
@click="updateCategoryEnableStatus(index)"
:class="{'text-old-neutral-400': !typeEnableStatus[index]}"
@click="updateTypeEnableStatus(index)"
>
<div>{{ data.name }}</div>
<div>{{ data.count }}</div>
@@ -102,7 +170,10 @@ function updateRule() {
<hr class="border-0 h-[1px] bg-old-neutral-600 mt-3 mb-1"/>
<div
v-for="([name,count],index) of categories" :key="index"
class="flex justify-between pl-4 pr-4 hover:text-sky-400 dark:hover:text-[#cccaff] transition-colors duration-300">
class="flex justify-between pl-4 pr-4 hover:text-sky-400 dark:hover:text-[#cccaff] transition-colors duration-300"
:class="{'text-old-neutral-400': !categoriesEnableStatus[index]}"
@click="updateCategoryEnableStatus(index)"
>
<div class="flex items-center">
<Icon
name="material-symbols:book-outline"
@@ -123,7 +194,10 @@ function updateRule() {
<div class="flex flex-wrap">
<div
v-for="([name,count],index) of tags" :key="index"
class="flex items-center justify-between text-[15px] pl-2 pr-2 m-1 rounded-2xl shadow-[0_0_0_1px_#888] hover:text-sky-400 dark:hover:text-[#cccaff] hover:shadow-[0_0_0_1px_#00bcff] dark:hover:shadow-[0_0_0_1px_#cccaff] transition-colors transition-shadow duration-300">
class="flex items-center justify-between text-[15px] pl-2 pr-2 m-1 rounded-2xl shadow-[0_0_0_1px_#888] hover:text-sky-400 dark:hover:text-[#cccaff] hover:shadow-[0_0_0_1px_#00bcff] dark:hover:shadow-[0_0_0_1px_#cccaff] transition-all duration-300"
:class="{'text-old-neutral-400': !tagsEnableStatus[index]}"
@click="updateTagEnableStatus(index)"
>
<Icon
name="clarity:hashtag-solid"
size="17"