jinshen-website/app/pages/support/documents.vue

<template>
    <div class="page-container">
        <div v-if="pending">
            <el-skeleton :rows="5" animated />
        </div>
        <div v-else>
            <support-tabs model-value="documents" />
            <div class="page-header">
                <h1 class="page-title">{{ $t('navigation.documents') }}</h1>
                <el-breadcrumb class="breadcrumb" separator="/">
                    <el-breadcrumb-item class="text-md opacity-50">
                        <NuxtLink :to="$localePath('/')">{{ $t('navigation.home') }}</NuxtLink>
                    </el-breadcrumb-item>
                    <el-breadcrumb-item class="text-md opacity-50">
                        <NuxtLink :to="$localePath('/support')">{{ $t('navigation.support') }}</NuxtLink>
                    </el-breadcrumb-item>
                    <el-breadcrumb-item class="text-md opacity-50">
                        <NuxtLink :to="$localePath('/support/documents')">{{ $t('navigation.documents') }}</NuxtLink>
                    </el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div class="page-content">
                <document-list :documents="documents" />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
const { find } = useStrapi()
const { getStrapiLocale } = useLocalizations()
const strapiLocale = getStrapiLocale()

const pending = ref(true)

const documents = ref<StrapiMedia[]>([])

onMounted(async () => {
    try {
        const response = await find<ProductionDocument>('production-documents', {
            locale: strapiLocale,
            populate: 'document',
        })
        if(response.data) {
            documents.value = response.data.map(item => ({
                ...item.document,
            })) || []
        }
    } catch (error) {
        console.error('Error fetching documents:', error)
    } finally {
        pending.value = false
    }
})
</script>

<style scoped>
.page-header {
    display: flex;
    padding: 2rem 2rem 0rem;
}

.page-title {
    font-size: 2rem;
    font-weight: bold;
    color: var(--el-color-primary);
    margin-bottom: 1rem;
}

.breadcrumb {
    margin-left: auto;
}

.page-content {
    padding: 1rem 2rem 2rem;
}
</style>