From 227b537a0f5389810e4b9ed9f2306ad41494cd5f Mon Sep 17 00:00:00 2001
From: R2m1liA <15258427350@163.com>
Date: Thu, 16 Oct 2025 16:02:20 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BA=A7=E5=93=81=E9=A1=B5=E7=9A=84?=
 =?UTF-8?q?=E7=BB=84=E5=90=88=E5=BC=8FAPI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 为product和product-list添加组合式API
---
 app/composables/directus/index.ts          |   2 +
 app/composables/directus/useProduct.ts     | 111 ++++++++++++++++++++
 app/composables/directus/useProductList.ts |  42 ++++++++
 app/pages/productions/[...slug].vue        | 116 +--------------------
 app/pages/productions/index.vue            |  45 +-------
 5 files changed, 159 insertions(+), 157 deletions(-)
 create mode 100644 app/composables/directus/useProduct.ts
 create mode 100644 app/composables/directus/useProductList.ts

diff --git a/app/composables/directus/index.ts b/app/composables/directus/index.ts
index dabc01e..93a664e 100644
--- a/app/composables/directus/index.ts
+++ b/app/composables/directus/index.ts
@@ -1,2 +1,4 @@
 export * from './useDirectusImage';
 export * from './useDirectusFiles';
+export * from './useProductList';
+export * from './useProduct';
diff --git a/app/composables/directus/useProduct.ts b/app/composables/directus/useProduct.ts
new file mode 100644
index 0000000..afe1d03
--- /dev/null
+++ b/app/composables/directus/useProduct.ts
@@ -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 },
+                },
+              },
+            },
+          },
+        },
+      })
+    );
+  });
+};
diff --git a/app/composables/directus/useProductList.ts b/app/composables/directus/useProductList.ts
new file mode 100644
index 0000000..273b5d6
--- /dev/null
+++ b/app/composables/directus/useProductList.ts
@@ -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 },
+              },
+            },
+          },
+        },
+      })
+    );
+  });
+};
diff --git a/app/pages/productions/[...slug].vue b/app/pages/productions/[...slug].vue
index 936fa4e..1bba2b6 100644
--- a/app/pages/productions/[...slug].vue
+++ b/app/pages/productions/[...slug].vue
@@ -106,124 +106,14 @@
 </template>
 
 <script setup lang="ts">
-  import { readItem } from '@directus/sdk';
   const route = useRoute();
-  const { getDirectusLocale } = useLocalizations();
-  const directusLocale = computed(() => getDirectusLocale());
 
-  const { $directus } = useNuxtApp();
   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(
-    () => `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],
-    }
-  );
+  const { data, pending, error } = await useProduct(id.value);
 
   console.log('Raw Data: ', data.value);
 
diff --git a/app/pages/productions/index.vue b/app/pages/productions/index.vue
index 1874e24..d07aa38 100644
--- a/app/pages/productions/index.vue
+++ b/app/pages/productions/index.vue
@@ -45,52 +45,9 @@
 </template>
 
 <script setup lang="ts">
-  import { readItems } from '@directus/sdk';
-  const { getDirectusLocale } = useLocalizations();
-  const directusLocale = computed(() => getDirectusLocale());
-
-  const { $directus } = useNuxtApp();
   const { getImageUrl } = useDirectusImage();
 
-  const { data, pending, error } = useAsyncData(
-    '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 { data, pending, error } = useProductList();
 
   const activeNames = ref<string[]>([]);