remilia/jinshen-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 产品页的组合式API
All checks were successful
deploy to server / build-and-deploy (push) Successful in 5m11s
Details

Browse Source 
- 为product和product-list添加组合式API
This commit is contained in:
R2m1liA
2025-10-16 16:02:20 +08:00
parent 6c76d81a40
commit 227b537a0f
5 changed files with 159 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/composables/directus/index.ts
View File

@ -1,2 +1,4 @@
export * from './useDirectusImage'; export * from './useDirectusImage';
export * from './useDirectusFiles'; export * from './useDirectusFiles';
export * from './useProductList';
export * from './useProduct';

111
app/composables/directus/useProduct.ts Normal file
View File

@ -0,0 +1,111 @@
import { readItem } from '@directus/sdk';
export const useProduct = (id: string) => {
const { $directus } = useNuxtApp();
const { getDirectusLocale } = useLocalizations();
const locale = getDirectusLocale();
return useAsyncData(`product-${id}-${locale}`, async () => {
return await $directus.request(
readItem('products', id, {
fields: [
'id',
{ translations: ['id', 'name', 'summary', 'description'] },
{
images: [
'id',
{
product_images_id: [
'id',
'image',
{ translations: ['id', 'caption'] },
],
},
],
},
{
specs: [
'id',
{
translations: ['*'],
},
{
specs: [
'id',
{
translations: ['id', 'key'],
},
'value',
],
},
],
},
{
faqs: [
'id',
{
questions_id: [
'id',
{
translations: ['id', 'title', 'content'],
},
],
},
],
},
{
documents: [
'id',
{
product_documents_id: [
'id',
{
file: ['id', 'filesize', 'filename_download'],
},
{
translations: ['id', 'title'],
},
],
},
],
},
],
deep: {
translations: {
_filter: {
languages_code: { _eq: locale },
},
},
images: {
product_images_id: {
translations: {
_filter: {
languages_code: { _eq: locale },
},
},
},
},
faqs: {
questions_id: {
translations: {
_filter: {
languages_code: { _eq: locale },
},
},
},
},
documents: {
documents_id: {
translations: {
_filter: {
languages_code: { _eq: locale },
},
},
},
},
},
})
);
});
};

42
app/composables/directus/useProductList.ts Normal file
View File

@ -0,0 +1,42 @@
import { readItems } from '@directus/sdk';
export const useProductList = () => {
const { $directus } = useNuxtApp();
const { getDirectusLocale } = useLocalizations();
const locale = getDirectusLocale();
return useAsyncData(`product-list-${locale}`, async () => {
return await $directus.request(
readItems('products', {
fields: [
'id',
{ translations: ['id', 'name', 'summary'] },
'cover',
{
product_type: [
'id',
{
translations: ['id', 'name'],
},
],
},
],
deep: {
translations: {
_filter: {
languages_code: { _eq: locale },
},
},
product_type: {
translations: {
_filter: {
languages_code: { _eq: locale },
},
},
},
},
})
);
});
};

116
app/pages/productions/[...slug].vue
View File

@ -106,124 +106,14 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { readItem } from '@directus/sdk';
const route = useRoute(); const route = useRoute();
const { getDirectusLocale } = useLocalizations();
const directusLocale = computed(() => getDirectusLocale());
const { $directus } = useNuxtApp();
const { getImageUrl } = useDirectusImage(); const { getImageUrl } = useDirectusImage();
// 获取路由参数（slug 或 id） // 获取路由参数
const documentId = computed(() => route.params.slug as string); const id = computed(() => route.params.slug as string);
const { data, pending, error } = await useAsyncData( const { data, pending, error } = await useProduct(id.value);
() => `production-${documentId.value}`,
() =>
$directus.request(
readItem('products', documentId.value, {
fields: [
'id',
{ translations: ['id', 'name', 'summary', 'description'] },
{
images: [
'id',
{
product_images_id: [
'id',
'image',
{ translations: ['id', 'caption'] },
],
},
],
},
{
specs: [
'id',
{
translations: ['*'],
},
{
specs: [
'id',
{
translations: ['id', 'key'],
},
'value',
],
},
],
},
{
faqs: [
'id',
{
questions_id: [
'id',
{
translations: ['id', 'title', 'content'],
},
],
},
],
},
{
documents: [
'id',
{
product_documents_id: [
'id',
{
file: ['id', 'filesize', 'filename_download'],
},
{
translations: ['id', 'title'],
},
],
},
],
},
],
deep: {
translations: {
_filter: {
languages_code: { _eq: directusLocale.value },
},
},
images: {
product_images_id: {
translations: {
_filter: {
languages_code: { _eq: directusLocale.value },
},
},
},
},
faqs: {
questions_id: {
translations: {
_filter: {
languages_code: { _eq: directusLocale.value },
},
},
},
},
documents: {
documents_id: {
translations: {
_filter: {
languages_code: { _eq: directusLocale.value },
},
},
},
},
},
})
),
{
watch: [documentId, directusLocale],
}
);
console.log('Raw Data: ', data.value); console.log('Raw Data: ', data.value);

45
app/pages/productions/index.vue
View File

@ -45,52 +45,9 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { readItems } from '@directus/sdk';
const { getDirectusLocale } = useLocalizations();
const directusLocale = computed(() => getDirectusLocale());
const { $directus } = useNuxtApp();
const { getImageUrl } = useDirectusImage(); const { getImageUrl } = useDirectusImage();
const { data, pending, error } = useAsyncData( const { data, pending, error } = useProductList();
'products',
() =>
$directus.request(
readItems('products', {
fields: [
'id',
{ translations: ['id', 'name', 'summary'] },
'cover',
{
product_type: [
'id',
{
translations: ['id', 'name'],
},
],
},
],
deep: {
translations: {
_filter: {
languages_code: { _eq: directusLocale.value },
},
},
product_type: {
translations: {
_filter: {
languages_code: { _eq: directusLocale.value },
},
},
},
},
})
),
{
watch: [directusLocale],
lazy: true,
}
);
const activeNames = ref<string[]>([]); const activeNames = ref<string[]>([]);