feat: 产品页的组合式API

- 为product和product-list添加组合式API

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[]>([]);