estel/estel_docs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

lint:fix all

Browse Source
This commit is contained in:
estel
2025-07-29 00:32:57 +08:00
parent 7d2f57df97
commit 1745a54eb6
34 changed files with 820 additions and 606 deletions
Download Patch File Download Diff File Expand all files Collapse all files

143
app/components/IndexCard.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="w-full bg-gray-50 dark:bg-gray-900 min-h-screen mt-4">
<!-- 响应式卡片网格 -->
<!--
<div class="w-full bg-gray-50 dark:bg-gray-900 min-h-screen mt-4">
<!-- 响应式卡片网格 -->
<!--
这个div使用了Tailwind CSS的类来实现响应式的卡片网格布局：
- grid：将容器设置为网格布局。
- grid-cols-1：在小屏幕下每行显示1列。
@@ -11,88 +11,103 @@
- max-w-8xl：设置最大宽度为8xl，防止内容过宽。
- mx-auto：左右自动外边距，使网格居中显示。
-->
<div class="grid grid-cols-1 xs:grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-4 gap-4 w-full mx-auto">
<div v-for="item in firstLevelItems" :key="item.path"
class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-5 sm:p-6 shadow-sm hover:shadow-md transition-all duration-200 cursor-pointer"
@click="navigateTo(item.path)">
<!-- 卡片头部 -->
<div class="flex items-center justify-between mb-1">
<h2 class="font-sans text-xl sm:text-xl lg:text-2xl font-bold text-gray-900 dark:text-white leading-tight">
{{ item.title }}
</h2>
<span class="text-sm sm:text-base lg:text-lg text-gray-600 dark:text-gray-400 font-normal">
<span class="text-primary mr-0.3">{{ getChildrenCount(item) }}</span>篇
</span>
</div>
<!-- 子页面列表 -->
<div v-if="getChildrenTitles(item).length > 0" class="">
<div v-for="(child, index) in getChildrenWithIcons(item).slice(0, 5)" :key="index"
class="flex items-center justify-between
text-sm sm:text-base lg:text-lg text-gray-700 dark:text-gray-300
hover:text-blue-600 dark:hover:text-blue-400
transition-colors duration-200 py-1
border-b border-gray-200 dark:border-gray-700 pt-2">
<div class="flex items-center flex-1 min-w-0 pl-1 ">
<UIcon :name="(typeof child.icon === 'string' ? child.icon : 'lucide-file-text')" class="mr-2 text-gray-400" size="14" />
<span class="text-base font-medium font-sans">{{ child.title }}</span>
</div>
<UIcon name="lucide-chevron-right" class="text-gray-400 flex-shrink-0 ml-2" size="16" />
</div>
</div>
</div>
<div class="grid grid-cols-1 xs:grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-4 gap-4 w-full mx-auto">
<div
v-for="item in firstLevelItems"
:key="item.path"
class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-5 sm:p-6 shadow-sm hover:shadow-md transition-all duration-200 cursor-pointer"
@click="navigateTo(item.path)"
>
<!-- 卡片头部 -->
<div class="flex items-center justify-between mb-1">
<h2 class="font-sans text-xl sm:text-xl lg:text-2xl font-bold text-gray-900 dark:text-white leading-tight">
{{ item.title }}
</h2>
<span class="text-sm sm:text-base lg:text-lg text-gray-600 dark:text-gray-400 font-normal">
<span class="text-primary mr-0.3">{{ getChildrenCount(item) }}</span>篇
</span>
</div>
<!-- 子页面列表 -->
<div
v-if="getChildrenTitles(item).length > 0"
class=""
>
<div
v-for="(child, index) in getChildrenWithIcons(item).slice(0, 5)"
:key="index"
class="flex items-center justify-between
text-sm sm:text-base lg:text-lg text-gray-700 dark:text-gray-300
hover:text-blue-600 dark:hover:text-blue-400
transition-colors duration-200 py-1
border-b border-gray-200 dark:border-gray-700 pt-2"
>
<div class="flex items-center flex-1 min-w-0 pl-1 ">
<UIcon
:name="(typeof child.icon === 'string' ? child.icon : 'lucide-file-text')"
class="mr-2 text-gray-400"
size="14"
/>
<span class="text-base font-medium font-sans">{{ child.title }}</span>
</div>
<UIcon
name="lucide-chevron-right"
class="text-gray-400 flex-shrink-0 ml-2"
size="16"
/>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import type { ContentNavigationItem } from "@nuxt/content";
import type { ContentNavigationItem } from '@nuxt/content'
const navigation = inject<Ref<ContentNavigationItem[]>>("navigation");
const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
// 计算属性：提取第一级数据
const firstLevelItems = computed(() => {
if (!navigation?.value) return [];
return navigation.value
.filter(item => item.title && item.path)
.map(item => ({
...item,
description: item.description,
icon: item.icon || 'lucide-book-open'
}));
});
if (!navigation?.value) return []
return navigation.value
.filter(item => item.title && item.path)
.map(item => ({
...item,
description: item.description,
icon: item.icon || 'lucide-book-open'
}))
})
// 获取子页面数量
const getChildrenCount = (item: ContentNavigationItem) => {
return item.children?.length || 0;
};
return item.children?.length || 0
}
// 获取子页面标题列表
const getChildrenTitles = (item: ContentNavigationItem) => {
if (!item.children) return [];
return item.children.map(child => child.title).filter(Boolean);
};
if (!item.children) return []
return item.children.map(child => child.title).filter(Boolean)
}
// 获取子页面数据（包含图标）
const getChildrenWithIcons = (item: ContentNavigationItem) => {
if (!item.children) return [];
return item.children.filter(child => child.title);
};
if (!item.children) return []
return item.children.filter(child => child.title)
}
// 获取描述信息
const getDescription = (item: ContentNavigationItem) => {
if (item.children && item.children.length > 0) {
return `${item.children.length} 个子页面`;
}
return "文档页面";
};
if (item.children && item.children.length > 0) {
return `${item.children.length} 个子页面`
}
return '文档页面'
}
// 导航方法
const navigateTo = (path: string) => {
if (path) {
window.location.href = path;
}
};
</script>
if (path) {
window.location.href = path
}
}
</script>