style: 调整代码格式

- 根据ESLint文件规范格式化app文件夹中的代码
This commit is contained in:
2025-09-15 17:02:04 +08:00
parent 67794e9523
commit 92c5a3baab
31 changed files with 1542 additions and 1321 deletions

View File

@ -4,23 +4,51 @@
<!-- 面包屑导航 -->
<el-breadcrumb class="breadcrumb" separator="/">
<el-breadcrumb-item class="text-md opacity-50">
<NuxtLink :to="$localePath('/')">{{ $t('navigation.home') }}</NuxtLink>
<NuxtLink :to="$localePath('/')">{{
$t("navigation.home")
}}</NuxtLink>
</el-breadcrumb-item>
<el-breadcrumb-item class="text-md opacity-50">
<NuxtLink :to="$localePath('/productions')">{{ $t('navigation.productions') }}</NuxtLink>
<NuxtLink :to="$localePath('/productions')">{{
$t("navigation.productions")
}}</NuxtLink>
</el-breadcrumb-item>
<el-breadcrumb-item class="text-md opactiy-50">{{ production.title }}</el-breadcrumb-item>
<el-breadcrumb-item class="text-md opactiy-50">{{
production.title
}}</el-breadcrumb-item>
</el-breadcrumb>
<!-- 产品详情内容 -->
<div class="production-header">
<div class="production-image">
<el-image v-if="production.production_images.length <= 1" :src="useStrapiMedia(production?.cover?.url || '')" :alt="production.title" fit="contain" />
<el-carousel v-else class="production-carousel" height="500px" :autoplay="false" :loop="false" arrow="always">
<el-carousel-item v-for="(item, index) in production.production_images || []" :key="index">
<el-image
v-if="production.production_images.length <= 1"
:src="useStrapiMedia(production?.cover?.url || '')"
:alt="production.title"
fit="contain"
/>
<el-carousel
v-else
class="production-carousel"
height="500px"
:autoplay="false"
:loop="false"
arrow="always"
>
<el-carousel-item
v-for="(item, index) in production.production_images || []"
:key="index"
>
<div class="production-carousel-item">
<el-image :src="useStrapiMedia(item.url || '')" :alt="item.alternativeText || production.title" fit="contain" lazy />
<p v-if="item.caption" class="production-image-caption">{{ item.caption }}</p>
<el-image
:src="useStrapiMedia(item.url || '')"
:alt="item.alternativeText || production.title"
fit="contain"
lazy
/>
<p v-if="item.caption" class="production-image-caption">
{{ item.caption }}
</p>
</div>
</el-carousel-item>
</el-carousel>
@ -44,7 +72,12 @@
<question-list :questions="production.questions" />
</el-tab-pane>
<el-tab-pane label="相关文档" name="documents">
<document-list :documents="production.production_documents.map(item => item.document) || []" />
<document-list
:documents="
production.production_documents.map((item) => item.document) ||
[]
"
/>
</el-tab-pane>
</el-tabs>
</div>
@ -62,10 +95,14 @@
<!-- 未找到产品 -->
<div v-else class="not-found">
<el-result icon="warning" :title="$t('product-not-found')" :sub-title="$t('product-not-found-desc')">
<el-result
icon="warning"
:title="$t('product-not-found')"
:sub-title="$t('product-not-found-desc')"
>
<template #extra>
<el-button type="primary" @click="$router.push('/productions')">
{{ $t('back-to-productions') }}
{{ $t("back-to-productions") }}
</el-button>
</template>
</el-result>
@ -74,65 +111,69 @@
</template>
<script setup lang="ts">
const route = useRoute()
const { findOne } = useStrapi()
const { getStrapiLocale } = useLocalizations()
const strapiLocale = getStrapiLocale()
const route = useRoute();
const { findOne } = useStrapi();
const { getStrapiLocale } = useLocalizations();
const strapiLocale = getStrapiLocale();
const production = ref<Production | null>(null)
const pending = ref(true)
const production = ref<Production | null>(null);
const pending = ref(true);
const activeName = ref('details') // 默认选中概览标签
const activeName = ref("details"); // 默认选中概览标签
// 获取路由参数slug 或 id
const documentId = computed(() => route.params.slug as string)
const documentId = computed(() => route.params.slug as string);
onMounted(async () => {
try {
const response = await findOne<Production>('productions', documentId.value, {
populate: {
production_specs: {
populate: '*',
const response = await findOne<Production>(
"productions",
documentId.value,
{
populate: {
production_specs: {
populate: "*",
},
production_images: {
populate: "*",
},
cover: {
populate: "*",
},
questions: {
populate: "*",
},
production_documents: {
populate: "document",
},
},
production_images: {
populate: '*',
},
cover: {
populate: '*',
},
questions: {
populate: '*',
},
production_documents: {
populate: 'document',
},
},
locale: strapiLocale,
})
locale: strapiLocale,
}
);
if (response.data) {
const item = response.data
const item = response.data;
production.value = {
...item,
}
console.log('Fetched production:', production.value)
};
console.log("Fetched production:", production.value);
}
} catch (error) {
console.error('Failed to fetch production:', error)
console.error("Failed to fetch production:", error);
} finally {
pending.value = false
pending.value = false;
}
})
});
// SEO
useHead({
title: computed(() => production.value?.title || 'Product Detail'),
title: computed(() => production.value?.title || "Product Detail"),
meta: [
{
name: 'description',
content: computed(() => production.value?.summary || '')
}
]
})
name: "description",
content: computed(() => production.value?.summary || ""),
},
],
});
</script>
<style scoped>