refactor: 将数据获取从app端移至server端

- 调整数据获取位置以提升安全性
- 对于后端状态为Archived的数据，通过server控制不进行获取

app/composables/directus/useCompanyProfile.ts

@@ -1,16 +1,17 @@
-import GetCompanyProfile from '@/graphql/companyProfile.graphql?raw';
-
 export const useCompanyProfile = () => {
-  const { $directus } = useNuxtApp();
   const { getDirectusLocale } = useLocalizations();
   const locale = getDirectusLocale();
 
   return useAsyncData(`company-profile-${locale}`, async () => {
-    return await $directus.query<{ company_profile: CompanyProfile }>(
-      GetCompanyProfile,
-      {
-        locale: locale,
-      }
-    );
+    try {
+      const data = await $fetch(`/api/cms/companyProfile`, {
+        headers: { 'x-locale': locale },
+      });
+
+      return data;
+    } catch (error) {
+      logger.error('Error fetching company profile: ', error);
+      throw error;
+    }
   });
 };

app/composables/directus/useContactInfo.ts

@@ -1,16 +1,17 @@
-import GetContactInfo from '@/graphql/contactInfo.graphql?raw';
-
 export const useContactInfo = () => {
-  const { $directus } = useNuxtApp();
   const { getDirectusLocale } = useLocalizations();
   const locale = getDirectusLocale();
 
   return useAsyncData(`contact-info-${locale}`, async () => {
-    return await $directus.query<{ contact_info: ContactInfo }>(
-      GetContactInfo,
-      {
-        locale: locale,
-      }
-    );
+    try {
+      const data = await $fetch('/api/cms/contactInfo', {
+        headers: { 'x-locale': locale },
+      });
+
+      return data;
+    } catch (error) {
+      logger.error('Error fetching contact info: ', error);
+      throw error;
+    }
   });
 };

app/composables/directus/useDocumentList.ts

@@ -1,16 +1,17 @@
-import GetDocumentList from '@/graphql/documentList.graphql?raw';
-
 export const useDocumentList = () => {
-  const { $directus } = useNuxtApp();
   const { getDirectusLocale } = useLocalizations();
   const locale = getDirectusLocale();
 
   return useAsyncData(`document-list-${locale}`, async () => {
-    return await $directus.query<{ product_documents: ProductDocument[] }>(
-      GetDocumentList,
-      {
-        locale: locale,
-      }
-    );
+    try {
+      const data = $fetch(`/api/cms/documentList`, {
+        headers: { 'x-locale': locale },
+      });
+
+      return data;
+    } catch (error) {
+      logger.error('Error fetching document list:', error);
+      throw error;
+    }
   });
 };

app/composables/directus/useHomepage.ts

@@ -1,13 +1,17 @@
-import GetHomepage from '@/graphql/homepage.graphql?raw';
-
 export const useHomepage = () => {
-  const { $directus } = useNuxtApp();
   const { getDirectusLocale } = useLocalizations();
   const locale = getDirectusLocale();
 
   return useAsyncData(`homepage-${locale}`, async () => {
-    return await $directus.query<{ homepage: Homepage }>(GetHomepage, {
-      locale: locale,
-    });
+    try {
+      const data = $fetch(`/api/cms/homepage`, {
+        headers: { 'x-locale': locale },
+      });
+
+      return data;
+    } catch (error) {
+      logger.error('Error fetching homepage:', error);
+      throw error;
+    }
   });
 };

app/composables/directus/useProduct.ts

@@ -1,15 +1,17 @@
-import GetProduct from '@/graphql/product.graphql?raw';
-
 export const useProduct = (id: string) => {
-  const { $directus } = useNuxtApp();
-
   const { getDirectusLocale } = useLocalizations();
   const locale = getDirectusLocale();
 
   return useAsyncData(`product-${id}-${locale}`, async () => {
-    return await $directus.query<{ products_by_id: Product }>(GetProduct, {
-      id: id,
-      locale: locale,
-    });
+    try {
+      const data = await $fetch(`/api/cms/product/${id}`, {
+        headers: { 'x-locale': locale },
+      });
+
+      return data;
+    } catch (error) {
+      logger.error('Error fetching product: ', error);
+      throw error;
+    }
   });
 };

app/composables/directus/useProductList.ts

@@ -1,14 +1,17 @@
-import GetProductList from '@/graphql/productList.graphql?raw';
-
 export const useProductList = () => {
-  const { $directus } = useNuxtApp();
-
   const { getDirectusLocale } = useLocalizations();
   const locale = getDirectusLocale();
 
   return useAsyncData(`product-list-${locale}`, async () => {
-    return await $directus.query<{ products: Product[] }>(GetProductList, {
-      locale: locale,
-    });
+    try {
+      const data = await $fetch(`/api/cms/productList`, {
+        headers: { 'x-locale': locale },
+      });
+
+      return data;
+    } catch (error) {
+      logger.error('Error fetching product list: ', error);
+      throw error;
+    }
   });
 };

app/composables/directus/useQuestionList.ts

@@ -1,14 +1,17 @@
-import GetQuestionList from '@/graphql/questionList.graphql?raw';
-
 export const useQuestionList = () => {
-  const { $directus } = useNuxtApp();
-
   const { getDirectusLocale } = useLocalizations();
   const locale = getDirectusLocale();
 
   return useAsyncData(`question-list-${locale}`, async () => {
-    return await $directus.query<{ questions: Question[] }>(GetQuestionList, {
-      locale: locale,
-    });
+    try {
+      const data = $fetch(`/api/cms/questionList`, {
+        headers: { 'x-locale': locale },
+      });
+
+      return data;
+    } catch (error) {
+      logger.error('Error fetching question list:', error);
+      throw error;
+    }
   });
 };

app/composables/directus/useSolution.ts

@@ -1,14 +1,17 @@
-import GetSolution from '@/graphql/solution.graphql?raw';
-
 export const useSolution = (id: string) => {
-  const { $directus } = useNuxtApp();
   const { getDirectusLocale } = useLocalizations();
   const locale = getDirectusLocale();
 
   return useAsyncData(`solution-${id}-${locale}`, async () => {
-    return await $directus.query<{ solutions_by_id: Solution }>(GetSolution, {
-      id: id,
-      locale: locale,
-    });
+    try {
+      const data = await $fetch(`/api/cms/solution/${id}`, {
+        headers: { 'x-locale': locale },
+      });
+
+      return data;
+    } catch (error) {
+      logger.error('Error fetching solution: ', error);
+      throw error;
+    }
   });
 };

app/composables/directus/useSolutionList.ts

@@ -1,13 +1,17 @@
-import GetSolutionList from '@/graphql/solutionList.graphql?raw';
-
 export const useSolutionList = () => {
-  const { $directus } = useNuxtApp();
   const { getDirectusLocale } = useLocalizations();
   const locale = getDirectusLocale();
 
   return useAsyncData(`solution-list-${locale}`, async () => {
-    return await $directus.query<{ solutions: Solution[] }>(GetSolutionList, {
-      locale: locale,
-    });
+    try {
+      const data = $fetch(`/api/cms/solutionList`, {
+        headers: { 'x-locale': locale },
+      });
+
+      return data;
+    } catch (error) {
+      logger.error('Error fetching solution list:', error);
+      throw error;
+    }
   });
 };

app/pages/about/index.vue

@@ -34,9 +34,7 @@
   ];
   const { data, pending, error } = await useCompanyProfile();
 
-  const content = computed(() =>
-    toCompanyProfileView(data.value.company_profile)
-  );
+  const content = computed(() => toCompanyProfileView(data.value));
 
   watch(error, (value) => {
     if (value) {

app/pages/index.vue

@@ -16,7 +16,7 @@
   const { data, pending, error } = await useHomepage();
 
   const homepageData = computed(() => {
-    return toHomepageView(data.value.homepage);
+    return toHomepageView(data.value);
   });
 
   const pageTilte = $t('page-title.homepage');

app/pages/products/[slug].vue

@@ -39,7 +39,7 @@
 
   const { data, pending, error } = await useProduct(id);
 
-  const rawProduct = computed(() => data.value.products_by_id ?? null);
+  const rawProduct = computed(() => data.value ?? null);
 
   const product = computed(() => {
     if (rawProduct.value === null) {
@@ -61,10 +61,10 @@
   });
 
   // SEO
-  // usePageSeo({
-  //   title: product.value.name || $t('page-title.products'),
-  //   description: product.value.summary || '',
-  // });
+  usePageSeo({
+    title: product.value.name || $t('page-title.products'),
+    description: product.value.summary || '',
+  });
 </script>
 
 <style scoped>

app/pages/products/index.vue

@@ -46,7 +46,7 @@
     { label: $t('navigation.products') },
   ];
 
-  const productsRaw = computed(() => data.value.products ?? []);
+  const productsRaw = computed(() => data.value ?? []);
 
   const products = computed(() =>
     productsRaw.value.map((item) => toProductListView(item))

app/pages/solutions/[slug].vue

@@ -35,7 +35,7 @@
     if (!data.value) {
       return null;
     }
-    return toSolutionView(data.value.solutions_by_id);
+    return toSolutionView(data.value);
   });
 
   const breadcrumbItems = computed(() => [

app/pages/solutions/index.vue

@@ -54,7 +54,7 @@
 
   const { data, pending, error } = await useSolutionList();
 
-  const solutionsRaw = computed(() => data.value.solutions ?? []);
+  const solutionsRaw = computed(() => data.value ?? []);
   const solutions = computed(() =>
     solutionsRaw.value.map((item) => toSolutionListView(item))
   );

app/pages/support/contact-us.vue

@@ -24,7 +24,7 @@
   ];
   const { data, pending, error } = await useContactInfo();
 
-  const content = computed(() => toContactInfoView(data.value.contact_info));
+  const content = computed(() => toContactInfoView(data.value));
 
   watch(error, (value) => {
     if (value) {

app/pages/support/documents.vue

@@ -38,9 +38,7 @@
   const { data, pending, error } = await useDocumentList();
 
   const documents = computed(
-    () =>
-      data?.value.product_documents.map((item) => toDocumentListView(item)) ??
-      []
+    () => data?.value.map((item) => toDocumentListView(item)) ?? []
   );
 
   const productTypeOptions = computed(() => {

app/pages/support/faq.vue

@@ -41,7 +41,7 @@
   const { data, pending, error } = await useQuestionList();
 
   const questions = computed(
-    () => data.value.questions.map((item) => toQuestionListView(item)) ?? null
+    () => data.value.map((item) => toQuestionListView(item)) ?? null
   );
 
   const productTypeOptions = computed(() => {

server/api/cms/companyProfile.ts

@@ -0,0 +1,22 @@
+import { directus } from '~~/server/utils/directus';
+import { readFileSync } from 'node:fs';
+import path from 'node:path';
+
+export default defineEventHandler(async (event) => {
+  const query = readFileSync(
+    path.resolve('graphql/companyProfile.graphql'),
+    'utf-8'
+  );
+  const locale = getHeader(event, 'x-locale') || 'zh-CN';
+
+  const data = await directus.query<{ company_profile: CompanyProfile }>(
+    query,
+    {
+      locale: locale,
+    }
+  );
+
+  const companyProfile = data?.company_profile;
+
+  return companyProfile;
+});

server/api/cms/contactInfo.ts

@@ -0,0 +1,19 @@
+import { directus } from '~~/server/utils/directus';
+import { readFileSync } from 'node:fs';
+import path from 'node:path';
+
+export default defineEventHandler(async (event) => {
+  const query = readFileSync(
+    path.resolve('graphql/contactInfo.graphql'),
+    'utf-8'
+  );
+  const locale = getHeader(event, 'x-locale') || 'zh-CN';
+
+  const data = await directus.query<{ contact_info: ContactInfo }>(query, {
+    locale: locale,
+  });
+
+  const contactInfo = data?.contact_info;
+
+  return contactInfo;
+});

server/api/cms/documentList.ts

@@ -0,0 +1,22 @@
+import { directus } from '~~/server/utils/directus';
+import { readFileSync } from 'node:fs';
+import path from 'node:path';
+
+export default defineEventHandler(async (event) => {
+  const query = readFileSync(
+    path.resolve('graphql/documentList.graphql'),
+    'utf-8'
+  );
+  const locale = getHeader(event, 'x-locale') || 'zh-CN';
+
+  const data = await directus.query<{ product_documents: ProductDocument[] }>(
+    query,
+    {
+      locale: locale,
+    }
+  );
+
+  const documents = data?.product_documents;
+
+  return documents;
+});

server/api/cms/homepage.ts

@@ -0,0 +1,16 @@
+import { directus } from '~~/server/utils/directus';
+import { readFileSync } from 'node:fs';
+import path from 'node:path';
+
+export default defineEventHandler(async (event) => {
+  const query = readFileSync(path.resolve('graphql/homepage.graphql'), 'utf-8');
+  const locale = getHeader(event, 'x-locale') || 'zh-CN';
+
+  const data = await directus.query<{ homepage: Homepage }>(query, {
+    locale: locale,
+  });
+
+  const homepage = data?.homepage;
+
+  return homepage;
+});

server/api/cms/product/[id].ts

@@ -0,0 +1,28 @@
+import { directus } from '~~/server/utils/directus';
+import { readFileSync } from 'node:fs';
+import path from 'node:path';
+
+export default defineEventHandler(async (event) => {
+  const id = getRouterParam(event, 'id');
+  if (!id)
+    throw createError({
+      statusCode: 400,
+      statusMessage: 'Product ID is required',
+    });
+
+  const query = readFileSync(path.resolve('graphql/product.graphql'), 'utf-8');
+  const locale = getHeader(event, 'x-locale') || 'zh-CN';
+
+  const data = await directus.query<{ products_by_id: Product }>(query, {
+    id: id,
+    locale: locale,
+  });
+
+  const product = data?.products_by_id;
+
+  if (!product || product.status === 'archived') {
+    throw createError({ statusCode: 404, statusMessage: 'Product not found' });
+  }
+
+  return product;
+});

server/api/cms/productList.ts

@@ -0,0 +1,19 @@
+import { directus } from '~~/server/utils/directus';
+import { readFileSync } from 'node:fs';
+import path from 'node:path';
+
+export default defineEventHandler(async (event) => {
+  const query = readFileSync(
+    path.resolve('graphql/productList.graphql'),
+    'utf-8'
+  );
+  const locale = getHeader(event, 'x-locale') || 'zh-CN';
+
+  const data = await directus.query<{ products: Product[] }>(query, {
+    locale: locale,
+  });
+
+  const products = data?.products || [];
+
+  return products;
+});

server/api/cms/questionList.ts

@@ -0,0 +1,19 @@
+import { directus } from '~~/server/utils/directus';
+import { readFileSync } from 'node:fs';
+import path from 'node:path';
+
+export default defineEventHandler(async (event) => {
+  const query = readFileSync(
+    path.resolve('graphql/questionList.graphql'),
+    'utf-8'
+  );
+  const locale = getHeader(event, 'x-locale') || 'zh-CN';
+
+  const data = await directus.query<{ questions: Question[] }>(query, {
+    locale: locale,
+  });
+
+  const questions = data?.questions || [];
+
+  return questions;
+});

server/api/cms/solution/[id].ts

@@ -0,0 +1,28 @@
+import { directus } from '~~/server/utils/directus';
+import { readFileSync } from 'node:fs';
+import path from 'node:path';
+
+export default defineEventHandler(async (event) => {
+  const id = getRouterParam(event, 'id');
+  if (!id)
+    throw createError({
+      statusCode: 400,
+      statusMessage: 'Solution ID is required',
+    });
+
+  const query = readFileSync(path.resolve('graphql/solution.graphql'), 'utf-8');
+  const locale = getHeader(event, 'x-locale') || 'zh-CN';
+
+  const data = await directus.query<{ solutions_by_id: Solution }>(query, {
+    id: id,
+    locale: locale,
+  });
+
+  const solution = data?.solutions_by_id;
+
+  if (!solution || solution.status === 'archived') {
+    throw createError({ statusCode: 404, statusMessage: 'Solution not found' });
+  }
+
+  return solution;
+});

server/api/cms/solutionList.ts

@@ -0,0 +1,19 @@
+import { directus } from '~~/server/utils/directus';
+import { readFileSync } from 'node:fs';
+import path from 'node:path';
+
+export default defineEventHandler(async (event) => {
+  const query = readFileSync(
+    path.resolve('graphql/solutionList.graphql'),
+    'utf-8'
+  );
+  const locale = getHeader(event, 'x-locale') || 'zh-CN';
+
+  const data = await directus.query<{ solutions: Solution[] }>(query, {
+    locale: locale,
+  });
+
+  const solutions = data?.solutions || [];
+
+  return solutions;
+});

server/utils/directus.ts

@@ -0,0 +1,7 @@
+import { createDirectus, rest, staticToken, graphql } from '@directus/sdk';
+
+const config = useRuntimeConfig();
+export const directus = createDirectus<Schema>(config.public.directus.url)
+  .with(rest())
+  .with(graphql())
+  .with(staticToken(config.public.directus.token || ''));