app/components/shared/FilePreviewer.vue

@@ -122,6 +122,8 @@
   const errorText = computed(() => error.value?.message ?? null);
   const fileMeta = computed(() => props.file ?? data.value ?? null);
 
+  logger.debug('FilePreviewer - fileMeta:', fileMeta.value);
+
   /** 预览源地址：支持在 file.url 上追加额外 query（如临时 token、inline） */
   const src = computed<string>(() => {
     if (!fileMeta.value) return '';

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/useDirectusFiles.ts

@@ -1,19 +1,14 @@
 export const useDirectusFiles = () => {
-  const config = useRuntimeConfig();
-  const baseUrl = config.public.directus.url;
-
   const getFileUrl = (
     id?: string | null,
     options?: Record<string, string | number | boolean>
   ): string => {
     if (!id) return '';
-    const query = options
-      ? '?' +
-        new URLSearchParams(
-          Object.entries(options).map(([key, value]) => [key, String(value)])
-        ).toString()
-      : '';
-    return `${baseUrl}/assets/${id}${query}`;
+
+    const params = new URLSearchParams(
+      options as Record<string, string>
+    ).toString();
+    return `/api/assets/${id}${params ? `?${params}` : ''}`;
   };
 
   return {

app/composables/directus/useDirectusImage.ts

@@ -1,8 +1,4 @@
 export const useDirectusImage = () => {
-  const config = useRuntimeConfig();
-  const baseUrl = config.public.directus.url;
-  const token = config.public.directus.token;
-
   type DirectusAssetParams = {
     width?: number;
     height?: number;
@@ -13,19 +9,11 @@ export const useDirectusImage = () => {
 
   const getImageUrl = (id?: string | null, options?: DirectusAssetParams) => {
     if (!id) return '';
-    const queryToken = token ? 'access_token=' + token : '';
-    const queryOptions = options
-      ? new URLSearchParams(
-          Object.fromEntries(
-            Object.entries(options).map(([key, value]) => [key, String(value)])
-          )
-        ).toString
-      : '';
-    const query =
-      queryToken || queryOptions
-        ? `?${[queryToken, queryOptions].filter(Boolean).join('&')}`
-        : '';
-    return `${baseUrl}/assets/${id}${query}`;
+
+    const params = new URLSearchParams(
+      options as Record<string, string>
+    ).toString();
+    return `/api/assets/${id}${params ? `?${params}` : ''}`;
   };
 
   return { getImageUrl };

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/assets/[id].ts

@@ -0,0 +1,36 @@
+export default defineEventHandler(async (event) => {
+  const id = getRouterParam(event, 'id');
+  if (!id)
+    throw createError({
+      statusCode: 400,
+      statusMessage: 'ID parameter is required',
+    });
+
+  const url = new URL(`${useRuntimeConfig().public.directus.url}/assets/${id}`);
+
+  const query = getQuery(event);
+  Object.entries(query).forEach(([key, value]) => {
+    url.searchParams.set(key, String(value));
+  });
+
+  const token = useRuntimeConfig().public.directus.token || '';
+  const res = await fetch(url.toString(), {
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
+  });
+
+  if (!res.ok) {
+    throw createError({
+      statusCode: res.status,
+      statusMessage: `Failed to fetch asset: ${res.statusText}`,
+    });
+  }
+
+  const contentType =
+    res.headers.get('Content-Type') || 'application/octet-stream';
+  setHeader(event, 'Content-Type', contentType);
+  setHeader(event, 'Cache-Control', 'public, max-age=86400, immutable');
+
+  return res.body;
+});

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 || ''));

server/utils/file.ts

@@ -41,7 +41,7 @@ export async function getFileMeta(id: string): Promise<FileMeta | null> {
       width: file.width ?? undefined,
       height: file.height ?? undefined,
       uploaded_on: file.uploaded_on ?? undefined,
-      url: `${baseUrl}/assets/${file.id}`,
+      url: `/api/assets/${file.id}`,
       previewable: isPreviewable(file.type),
     };
   } catch (error) {