diff --git a/app/app.vue b/app/app.vue
index c6553da..ed96dfc 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -11,26 +11,7 @@
 <script setup lang="ts">
   import { ElConfigProvider } from 'element-plus';
 
-  const { login } = useStrapiAuth();
-
   const { getElementPlusLocale } = useLocalizations();
 
   const elementPlusLocale = getElementPlusLocale();
-
-  onMounted(() => {
-    // 检查用户是否已登录
-    const user = useStrapiUser();
-    if (!user.value) {
-      // 如果未登录，重定向到登录页面
-      login({ identifier: 'remilia', password: 'huanshuo51' })
-        .then(() => {
-          console.log('Login successful');
-        })
-        .catch((error) => {
-          console.error('Login failed:', error);
-        });
-    } else {
-      console.log('User is already logged in:', user.value);
-    }
-  });
 </script>
diff --git a/app/components/DocumentList.vue b/app/components/DocumentList.vue
index c30953a..0061070 100644
--- a/app/components/DocumentList.vue
+++ b/app/components/DocumentList.vue
@@ -6,18 +6,19 @@
       class="document-card"
     >
       <div class="document-info">
-        <h3>{{ doc.caption || doc.name }}</h3>
+        <h3>{{ doc.title }}</h3>
         <div class="document-content">
           <span v-if="doc.size" class="document-meta"
             >大小: {{ formatFileSize(doc.size) }}
           </span>
-          <span v-if="doc.ext" class="document-meta"
-            >格式: {{ formatFileExtension(doc.ext) }}</span
+          <span v-if="doc.filename" class="document-meta"
+            >格式:
+            {{ formatFileExtension(getFileExtension(doc.filename)) }}</span
           >
           <el-button
             class="download-button"
             type="primary"
-            @click="handleDownload(doc.name, doc.url)"
+            @click="handleDownload(doc.title, doc.url)"
           >
             下载
           </el-button>
@@ -30,7 +31,7 @@
 <script setup lang="ts">
   defineProps({
     documents: {
-      type: Array as () => Array<StrapiMedia>,
+      type: Array as () => Array<ProductDocumentView>,
       default: () => [],
     },
   });
diff --git a/app/components/JinshenFooter.vue b/app/components/JinshenFooter.vue
index fea2407..002e5e9 100644
--- a/app/components/JinshenFooter.vue
+++ b/app/components/JinshenFooter.vue
@@ -20,8 +20,8 @@
             <NuxtLinkLocale to="/">{{ $t('navigation.home') }}</NuxtLinkLocale>
           </li>
           <li>
-            <NuxtLink :to="$localePath('/productions')">{{
-              $t('navigation.productions')
+            <NuxtLink :to="$localePath('/products')">{{
+              $t('navigation.products')
             }}</NuxtLink>
           </li>
           <li>
diff --git a/app/components/JinshenHeader.vue b/app/components/JinshenHeader.vue
index 78b2f16..0fd55ca 100644
--- a/app/components/JinshenHeader.vue
+++ b/app/components/JinshenHeader.vue
@@ -21,8 +21,8 @@
         :persistent="false"
         router
       >
-        <el-menu-item index="productions" :route="$localePath('/productions')">
-          <span class="title">{{ $t('navigation.productions') }}</span>
+        <el-menu-item index="products" :route="$localePath('/products')">
+          <span class="title">{{ $t('navigation.products') }}</span>
         </el-menu-item>
         <el-menu-item index="solutions" :route="$localePath('/solutions')">
           <span class="title">{{ $t('navigation.solutions') }}</span>
@@ -81,8 +81,8 @@
 
   const refreshMenu = () => {
     const path = router.currentRoute.value.path;
-    if (path.startsWith('/productions')) {
-      activeName.value = 'productions';
+    if (path.startsWith('/products')) {
+      activeName.value = 'products';
     } else if (path.startsWith('/solutions')) {
       activeName.value = 'solutions';
     } else if (path.startsWith('/support')) {
diff --git a/app/components/ProductionCard.vue b/app/components/ProductCard.vue
similarity index 77%
rename from app/components/ProductionCard.vue
rename to app/components/ProductCard.vue
index bdfa568..397a0a4 100644
--- a/app/components/ProductionCard.vue
+++ b/app/components/ProductCard.vue
@@ -1,14 +1,14 @@
 <template>
-  <el-card class="production-card" @click="handleClick">
+  <el-card class="product-card" @click="handleClick">
     <template #header>
       <!-- Image -->
-      <el-image class="production-image" :src="imageUrl" fit="contain" />
+      <el-image class="product-image" :src="imageUrl" fit="contain" />
     </template>
 
     <div class="card-body">
       <!-- Name -->
       <div class="text-center">
-        <span class="production-name">{{ name }}</span>
+        <span class="product-name">{{ name }}</span>
       </div>
       <!-- Description -->
       <div class="card-description text-left opacity-25">{{ description }}</div>
@@ -32,25 +32,25 @@
     // 优先使用 slug，如果没有则使用 id
     const routeParam = props.slug || props.id;
     if (routeParam) {
-      navigateTo(localePath(`/productions/${routeParam}`));
+      navigateTo(localePath(`/products/${routeParam}`));
     }
   };
 </script>
 
 <style scoped>
-  .production-card {
+  .product-card {
     width: 30%;
     cursor: pointer;
     transition: all 0.3s ease;
     text-align: center;
   }
 
-  .production-card:hover {
+  .product-card:hover {
     transform: translateY(-4px);
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
   }
 
-  .production-name {
+  .product-name {
     font-size: 1rem;
     font-weight: 600;
   }
@@ -60,7 +60,7 @@
     margin-top: 5px;
   }
 
-  .production-card .el-image {
+  .product-card .el-image {
     height: 150px;
     border-radius: 4px;
   }
@@ -73,13 +73,13 @@
 
   /* 响应式设计 */
   @media (max-width: 1200px) {
-    .production-card {
+    .product-card {
       width: 45%;
     }
   }
 
   @media (max-width: 768px) {
-    .production-card {
+    .product-card {
       width: 90%;
     }
   }
diff --git a/app/components/QuestionList.vue b/app/components/QuestionList.vue
index e4d6fc2..58f8ef0 100644
--- a/app/components/QuestionList.vue
+++ b/app/components/QuestionList.vue
@@ -3,9 +3,9 @@
     <el-collapse class="question-collapse" accordion>
       <el-collapse-item
         v-for="question in questions"
-        :key="question.documentId"
+        :key="question.id"
         :title="question.title"
-        :name="question.documentId"
+        :name="question.id"
       >
         <markdown-renderer :content="question.content || ''" />
       </el-collapse-item>
@@ -16,11 +16,7 @@
 <script setup lang="ts">
   defineProps({
     questions: {
-      type: Array as () => Array<{
-        title: string;
-        content: string;
-        documentId: string;
-      }>,
+      type: Array as PropType<ProductQuestionView[]>,
       default: () => [],
     },
   });
diff --git a/app/components/SearchResults.vue b/app/components/SearchResults.vue
index 70cd6cf..3bd57e3 100644
--- a/app/components/SearchResults.vue
+++ b/app/components/SearchResults.vue
@@ -2,14 +2,14 @@
   <div v-if="hasResults">
     <div class="search-results">
       <NuxtLink
-        v-for="(hit, hitIndex) in paginatedHits"
-        :key="`${getHitIdentifier(hit.content, hitIndex)}`"
-        :to="localePath(resolveHitLink(hit.content))"
+        v-for="hit in paginatedHits"
+        :key="`${hit.type}-${hit.id}`"
+        :to="localePath(resolveHitLink(hit))"
       >
         <el-card class="result-card">
-          <h3 class="result-title">{{ getHitTitle(hit.content) }}</h3>
-          <p v-if="getHitSummary(hit.content)" class="result-summary">
-            {{ getHitSummary(hit.content) }}
+          <h3 class="result-title">{{ hit.title }}</h3>
+          <p v-if="hit.summary" class="result-summary">
+            {{ hit.summary }}
           </p>
           <p v-if="hit.type" class="result-type">
             <span>内容类型: </span>
@@ -44,13 +44,8 @@
 </template>
 
 <script setup lang="ts">
-  interface HitItem {
-    content: SearchHit;
-    type: string;
-  }
-
   const props = defineProps<{
-    hitItems: HitItem[];
+    searchItems: SearchItemView[];
     currentPage: number;
     category?: string;
   }>();
@@ -74,12 +69,12 @@
   const pageSize = ref(5);
 
   // 搜索相关
-  const hits = props.hitItems;
+  const items = props.searchItems;
   const filteredHits = computed(() => {
     if (props.category) {
-      return hits.filter((hit) => hit.type === props.category);
+      return items.filter((item) => item.type === props.category);
     } else {
-      return hits;
+      return items;
     }
   });
   const paginatedHits = computed(() => {
@@ -89,7 +84,7 @@
   });
 
   const indexLabels = computed<Record<string, string>>(() => ({
-    production: t('search.sections.production'),
+    product: t('search.sections.product'),
     solution: t('search.sections.solution'),
     support: t('search.sections.support'),
     default: t('search.sections.default'),
@@ -106,64 +101,13 @@
     return filteredHits.value.length > 0;
   });
 
-  /**
-   * 获取搜索条目的唯一标识符
-   * 尝试根据搜索条目的相关词条获取唯一标识符
-   * 若未找到，则fallback至给定的index
-   * @param hit 搜索条目
-   * @param index 条目索引
-   */
-  const getHitIdentifier = (hit: SearchHit, index: number) => {
-    const candidate = [hit.objectID, hit.documentId, hit.id, hit.slug].find(
-      (value) =>
-        ['string', 'number'].includes(typeof value) && String(value).length > 0
-    );
-    return candidate != null ? String(candidate) : String(index);
-  };
-
-  /**
-   * 获取搜索条目的标题
-   * @param hit 搜索条目
-   */
-  const getHitTitle = (hit: SearchHit) => {
-    const candidate = [
-      hit.title,
-      hit.name,
-      hit.heading,
-      hit.documentTitle,
-    ].find((value) => typeof value === 'string' && value.trim().length > 0);
-    return candidate ? String(candidate) : t('search.untitled');
-  };
-
-  /**
-   * 获取搜索条目的摘要
-   * @param hit 搜索条目
-   */
-  const getHitSummary = (hit: SearchHit) => {
-    const candidate = [
-      hit.summary,
-      hit.description,
-      hit.snippet,
-      hit.content,
-      hit.text,
-    ].find((value) => typeof value === 'string' && value.trim().length > 0);
-    return candidate ? String(candidate) : '';
-  };
-
   /**
    * 解析条目链接
    * 根据条目类型返回正确的跳转链接
-   * @param hit 搜索条目
+   * @param item 搜索条目
    */
-  const resolveHitLink = (hit: SearchHit) => {
-    if (typeof hit.route === 'string' && hit.route.trim().length > 0) {
-      return localePath(hit.route);
-    }
-
-    const slugCandidate = [hit.slug, hit.documentId, hit.id, hit.objectID].find(
-      (value) =>
-        ['string', 'number'].includes(typeof value) && String(value).length > 0
-    );
+  const resolveHitLink = (item: SearchItemView) => {
+    const slugCandidate = item.id;
 
     if (!slugCandidate) {
       return null;
@@ -171,11 +115,11 @@
 
     const slug = String(slugCandidate);
 
-    if (hit.indexUid === 'production') {
-      return localePath({ path: `/productions/${slug}` });
+    if (item.type === 'product') {
+      return localePath({ path: `/products/${slug}` });
     }
 
-    if (hit.indexUid === 'solution') {
+    if (item.type === 'solution') {
       return localePath({ path: `/solutions/${slug}` });
     }
 
diff --git a/app/components/SpecTable.vue b/app/components/SpecTable.vue
index 1f392c9..c08c2a0 100644
--- a/app/components/SpecTable.vue
+++ b/app/components/SpecTable.vue
@@ -3,15 +3,15 @@
     <el-collapse v-model="activeName">
       <el-collapse-item
         v-for="item in data"
-        :key="item.title"
-        :title="item.title"
-        :name="item.title"
+        :key="item.name"
+        :title="item.name"
+        :name="item.name"
       >
         <el-descriptions :column="1" border>
           <el-descriptions-item
-            v-for="subItem in item.items"
-            :key="subItem.label"
-            :label="subItem.label"
+            v-for="subItem in item.specs"
+            :key="subItem.key"
+            :label="subItem.value"
           >
             {{ subItem.value }}
           </el-descriptions-item>
@@ -24,15 +24,15 @@
 <script lang="ts" setup>
   const props = defineProps({
     data: {
-      type: Object as () => ProductionSpecGroup[],
+      type: Object as () => ProductSpecGroupView[],
       required: true,
     },
   });
 
   // 默认全部展开
   const activeName = ref<string[]>(
-    props.data.map((item: ProductionSpecGroup) => {
-      return item.title;
+    props.data.map((item: ProductSpecGroupView) => {
+      return item.name;
     }) || []
   );
 </script>
diff --git a/app/composables/directus/index.ts b/app/composables/directus/index.ts
new file mode 100644
index 0000000..8593c2e
--- /dev/null
+++ b/app/composables/directus/index.ts
@@ -0,0 +1,11 @@
+export * from './useDirectusImage';
+export * from './useDirectusFiles';
+export * from './useProductList';
+export * from './useProduct';
+export * from './useSolutionList';
+export * from './useSolution';
+export * from './useQuestionList';
+export * from './useDocumentList';
+export * from './useContactInfo';
+export * from './useCompanyProfile';
+export * from './useHomepage';
diff --git a/app/composables/directus/useCompanyProfile.ts b/app/composables/directus/useCompanyProfile.ts
new file mode 100644
index 0000000..0b26039
--- /dev/null
+++ b/app/composables/directus/useCompanyProfile.ts
@@ -0,0 +1,29 @@
+import { readSingleton } from '@directus/sdk';
+
+export const useCompanyProfile = () => {
+  const { $directus } = useNuxtApp();
+  const { getDirectusLocale } = useLocalizations();
+  const locale = getDirectusLocale();
+
+  return useAsyncData(`company-profile-${locale}`, async () => {
+    return await $directus.request(
+      readSingleton('company_profile', {
+        fields: [
+          'id',
+          {
+            translations: ['id', 'content'],
+          },
+        ],
+        deep: {
+          translations: {
+            _filter: {
+              languages_code: {
+                _eq: locale,
+              },
+            },
+          },
+        },
+      })
+    );
+  });
+};
diff --git a/app/composables/directus/useContactInfo.ts b/app/composables/directus/useContactInfo.ts
new file mode 100644
index 0000000..8f0e7a4
--- /dev/null
+++ b/app/composables/directus/useContactInfo.ts
@@ -0,0 +1,29 @@
+import { readSingleton } from '@directus/sdk';
+
+export const useContactInfo = () => {
+  const { $directus } = useNuxtApp();
+  const { getDirectusLocale } = useLocalizations();
+  const locale = getDirectusLocale();
+
+  return useAsyncData(`contact-info-${locale}`, async () => {
+    return await $directus.request(
+      readSingleton('contact_info', {
+        fields: [
+          'id',
+          {
+            translations: ['id', 'content'],
+          },
+        ],
+        deep: {
+          translations: {
+            _filter: {
+              languages_code: {
+                _eq: locale,
+              },
+            },
+          },
+        },
+      })
+    );
+  });
+};
diff --git a/app/composables/directus/useDirectusFiles.ts b/app/composables/directus/useDirectusFiles.ts
new file mode 100644
index 0000000..38af82b
--- /dev/null
+++ b/app/composables/directus/useDirectusFiles.ts
@@ -0,0 +1,22 @@
+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}`;
+  };
+
+  return {
+    getFileUrl,
+  };
+};
diff --git a/app/composables/directus/useDirectusImage.ts b/app/composables/directus/useDirectusImage.ts
new file mode 100644
index 0000000..08215d6
--- /dev/null
+++ b/app/composables/directus/useDirectusImage.ts
@@ -0,0 +1,32 @@
+export const useDirectusImage = () => {
+  const config = useRuntimeConfig();
+  const baseUrl = config.public.directus.url;
+  const token = config.public.directus.token;
+
+  type DirectusAssetParams = {
+    width?: number;
+    height?: number;
+    fit?: 'cover' | 'contain' | 'inside' | 'outside';
+    quality?: number;
+    format?: 'webp' | 'jpg' | 'png' | 'auto';
+  } & Record<string, string | number | boolean>;
+
+  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}`;
+  };
+
+  return { getImageUrl };
+};
diff --git a/app/composables/directus/useDocumentList.ts b/app/composables/directus/useDocumentList.ts
new file mode 100644
index 0000000..fc21823
--- /dev/null
+++ b/app/composables/directus/useDocumentList.ts
@@ -0,0 +1,67 @@
+import { readItems } from '@directus/sdk';
+
+export const useDocumentList = () => {
+  const { $directus } = useNuxtApp();
+  const { getDirectusLocale } = useLocalizations();
+  const locale = getDirectusLocale();
+
+  return useAsyncData(`document-list-${locale}`, async () => {
+    return await $directus.request(
+      readItems('product_documents', {
+        fields: [
+          'id',
+          {
+            file: ['id', 'filesize', 'filename_download'],
+          },
+          {
+            translations: ['id', 'title'],
+          },
+          {
+            products: [
+              'id',
+              {
+                products_id: [
+                  'id',
+                  {
+                    translations: ['id', 'name'],
+                  },
+                  {
+                    product_type: [
+                      'id',
+                      {
+                        translations: ['id', 'name'],
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+        deep: {
+          translations: {
+            _filter: {
+              languages_code: { _eq: locale },
+            },
+          },
+          products: {
+            products_id: {
+              translations: {
+                _filter: {
+                  languages_code: { _eq: locale },
+                },
+              },
+              product_type: {
+                translations: {
+                  _filter: {
+                    languages_code: { _eq: locale },
+                  },
+                },
+              },
+            },
+          },
+        },
+      })
+    );
+  });
+};
diff --git a/app/composables/directus/useHomepage.ts b/app/composables/directus/useHomepage.ts
new file mode 100644
index 0000000..01da60c
--- /dev/null
+++ b/app/composables/directus/useHomepage.ts
@@ -0,0 +1,54 @@
+import { readSingleton } from '@directus/sdk';
+
+export const useHomepage = () => {
+  const { $directus } = useNuxtApp();
+  const { getDirectusLocale } = useLocalizations();
+  const locale = getDirectusLocale();
+
+  return useAsyncData(`homepage-${locale}`, async () => {
+    return await $directus.request(
+      readSingleton('homepage', {
+        fields: [
+          'id',
+          {
+            carousel: ['id', 'directus_files_id'],
+          },
+          {
+            recommend_products: [
+              'id',
+              {
+                translations: ['id', 'name', 'summary'],
+              },
+              'cover',
+            ],
+          },
+          {
+            recommend_solutions: [
+              'id',
+              {
+                translations: ['id', 'title', 'summary'],
+              },
+              'cover',
+            ],
+          },
+        ],
+        deep: {
+          recommend_products: {
+            translations: {
+              _filter: {
+                languages_code: { _eq: locale },
+              },
+            },
+          },
+          recommend_solutions: {
+            translations: {
+              _filter: {
+                languages_code: { _eq: locale },
+              },
+            },
+          },
+        },
+      })
+    );
+  });
+};
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/composables/directus/useQuestionList.ts b/app/composables/directus/useQuestionList.ts
new file mode 100644
index 0000000..76e1350
--- /dev/null
+++ b/app/composables/directus/useQuestionList.ts
@@ -0,0 +1,63 @@
+import { readItems } from '@directus/sdk';
+
+export const useQuestionList = () => {
+  const { $directus } = useNuxtApp();
+
+  const { getDirectusLocale } = useLocalizations();
+  const locale = getDirectusLocale();
+
+  return useAsyncData(`question-list-${locale}`, async () => {
+    return await $directus.request(
+      readItems('questions', {
+        fields: [
+          'id',
+          {
+            translations: ['*'],
+          },
+          {
+            products: [
+              'id',
+              {
+                products_id: [
+                  'id',
+                  {
+                    product_type: [
+                      'id',
+                      {
+                        translations: ['id', 'name'],
+                      },
+                    ],
+                  },
+                  { translations: ['id', 'name'] },
+                ],
+              },
+            ],
+          },
+        ],
+        deep: {
+          translations: {
+            _filter: {
+              languages_code: { _eq: locale },
+            },
+          },
+          products: {
+            products_id: {
+              product_type: {
+                translations: {
+                  _filter: {
+                    languages_code: { _eq: locale },
+                  },
+                },
+              },
+              translations: {
+                _filter: {
+                  languages_code: { _eq: locale },
+                },
+              },
+            },
+          },
+        },
+      })
+    );
+  });
+};
diff --git a/app/composables/directus/useSolution.ts b/app/composables/directus/useSolution.ts
new file mode 100644
index 0000000..78b77de
--- /dev/null
+++ b/app/composables/directus/useSolution.ts
@@ -0,0 +1,28 @@
+import { readItem } from '@directus/sdk';
+
+export const useSolution = (id: string) => {
+  const { $directus } = useNuxtApp();
+  const { getDirectusLocale } = useLocalizations();
+  const locale = getDirectusLocale();
+
+  return useAsyncData(`solution-${id}-${locale}`, async () => {
+    return await $directus.request(
+      readItem('solutions', id, {
+        fields: [
+          'id',
+          {
+            translations: ['*'],
+          },
+          'create_at',
+        ],
+        deep: {
+          translations: {
+            _filter: {
+              languages_code: { _eq: locale },
+            },
+          },
+        },
+      })
+    );
+  });
+};
diff --git a/app/composables/directus/useSolutionList.ts b/app/composables/directus/useSolutionList.ts
new file mode 100644
index 0000000..030e272
--- /dev/null
+++ b/app/composables/directus/useSolutionList.ts
@@ -0,0 +1,38 @@
+import { readItems } from '@directus/sdk';
+
+export const useSolutionList = () => {
+  const { $directus } = useNuxtApp();
+  const { getDirectusLocale } = useLocalizations();
+  const locale = getDirectusLocale();
+
+  return useAsyncData(`solution-list-${locale}`, async () => {
+    return await $directus.request(
+      readItems('solutions', {
+        fields: [
+          'id',
+          'cover',
+          {
+            type: ['id', { translations: ['id', 'name'] }],
+          },
+          {
+            translations: ['id', 'title', 'summary'],
+          },
+        ],
+        deep: {
+          type: {
+            translations: {
+              _filter: {
+                languages_code: { _eq: locale },
+              },
+            },
+          },
+          translations: {
+            _filter: {
+              languages_code: { _eq: locale },
+            },
+          },
+        },
+      })
+    );
+  });
+};
diff --git a/app/composables/index.ts b/app/composables/index.ts
new file mode 100644
index 0000000..07928bd
--- /dev/null
+++ b/app/composables/index.ts
@@ -0,0 +1,3 @@
+export * from './directus';
+export * from './useLocalizations';
+export * from './useMeilisearch';
diff --git a/app/composables/useLocalizations.ts b/app/composables/useLocalizations.ts
index 35debd2..c850fd4 100644
--- a/app/composables/useLocalizations.ts
+++ b/app/composables/useLocalizations.ts
@@ -3,38 +3,94 @@ import type { Language as ElementLanguage } from 'element-plus/es/locale';
 import zhCn from 'element-plus/es/locale/lang/zh-cn';
 import en from 'element-plus/es/locale/lang/en';
 
-// Strapi本地化映射
-export const strapiLocales: Record<string, StrapiLocale> = {
-  zh: 'zh-CN',
-  en: 'en',
-};
+/**
+ * 应用语言映射结构
+ * 用于统一 Strapi / Directus / Element Plus 的多语言配置
+ */
+export interface LocaleMapping {
+  /** 用于StrapiLocale **/
+  strapi: StrapiLocale;
+  /** 用于Directus translations.languages_code **/
+  directus: string;
+  /** Element Plus语言对象 **/
+  element: ElementLanguage;
+}
 
-// Element Plus本地化映射
-export const elementPlusLocales: Record<string, ElementLanguage> = {
-  zh: zhCn,
-  en: en,
-};
+/**
+ * 应用支持的语言映射表。
+ *
+ * 每个键（如 "zh"、"en"）对应一套统一的本地化配置，
+ * 方便在 Strapi / Directus / Element Plus 三方系统间保持一致。
+ */
+export const localeMap = {
+  zh: {
+    strapi: 'zh-CN',
+    directus: 'zh-CN',
+    element: zhCn,
+  },
+  en: {
+    strapi: 'en',
+    directus: 'en-US',
+    element: en,
+  },
+} satisfies Record<string, LocaleMapping>;
 
+/** 应用支持的语言键类型 **/
+export type AppLocale = keyof typeof localeMap;
+
+/** 默认语言， 当找不到匹配语言时回退到默认语言 **/
+const defaultLocale: AppLocale = 'zh';
+
+/**
+ * 提供 Strapi、 Directus 与 Element Plus的国际化映射工具
+ *
+ * ---
+ *  @example
+ *  ``` ts
+ * const { locale, getStrapiLocale, getElementPlusLocale } = useLocalizations()
+ *
+ * const strapiLang = getStrapiLocale()          // 当前 Strapi 语言码
+ * const elLocale = getElementPlusLocale('en')   // 获取 Element Plus 英文对象
+ * const all = getLocaleMapping('zh')            // 获取完整映射结构
+ *  ```
+ *  ---
+ *
+ *  @returns 返回当前语言及各系统的本地化获取方法
+ */
 export const useLocalizations = () => {
-  const { locale } = useI18n();
+  const { locale } = useI18n<{ locale: Ref<AppLocale> }>();
 
-  // 获取Strapi本地化代码
-  const getStrapiLocale = (nuxtLocale?: string): StrapiLocale => {
-    const currentLocale = nuxtLocale || locale.value;
-    return strapiLocales[currentLocale] || 'zh-Hans';
-  };
-
-  // 获取Element Plus本地化
-  const getElementPlusLocale = (nuxtLocale?: string) => {
-    const currentLocale = nuxtLocale || locale.value;
-    const elementPlusLocale =
-      elementPlusLocales[currentLocale] || elementPlusLocales['zh'];
-    return elementPlusLocale;
+  /**
+   * 获取对应语言的完整映射结构
+   *
+   * @param nuxtLocale - 可选的语言码参数，若提供则使用该语言码，否则使用当前应用语言
+   * @returns 返回当前语言的完整映射对象
+   */
+  const getMapping = (nuxtLocale?: AppLocale): LocaleMapping => {
+    const current = nuxtLocale || locale.value;
+    return localeMap[current] || localeMap[defaultLocale];
   };
 
   return {
+    /** 当前Nuxt I18n语言(只读) **/
     locale: readonly(locale),
-    getStrapiLocale,
-    getElementPlusLocale,
+    /** 获取Strapi的本地化代码 **/
+    getStrapiLocale: (l?: AppLocale) => getMapping(l).strapi,
+    /** 获取Directus的本地化代码 **/
+    getDirectusLocale: (l?: AppLocale) => getMapping(l).directus,
+    /** 获取Element Plus语言对象 **/
+    getElementPlusLocale: (l?: AppLocale) => getMapping(l).element,
+    /**
+     * 获取完整的语言映射结构(Strapi / Directus / Element Plus)
+     *
+     * @param l: 指定语言，默认为当前locale
+     * @returns 语言映射对象
+     */
+    getLocaleMapping: getMapping,
+
+    /** 所有可用的Directus语言代码列表(只读) **/
+    availableDirectusLocales: readonly(
+      Object.values(localeMap).map((item) => item.directus)
+    ),
   };
 };
diff --git a/app/composables/useMeilisearch.ts b/app/composables/useMeilisearch.ts
index 1667e5d..b729909 100644
--- a/app/composables/useMeilisearch.ts
+++ b/app/composables/useMeilisearch.ts
@@ -1,33 +1,25 @@
 import { MeiliSearch } from 'meilisearch';
-import type { SearchParams, SearchResponse } from 'meilisearch';
+import type { SearchParams } from 'meilisearch';
 
-interface RawSearchSection {
-  indexUid: string;
-  response: SearchResponse<Record<string, unknown>>;
-}
-
-export interface SearchHit extends Record<string, unknown> {
-  indexUid: string;
-  objectID?: string | number;
-}
-
-export interface SearchSection {
-  indexUid: string;
-  hits: SearchHit[];
-  estimatedTotalHits: number;
-  processingTimeMs: number;
-}
-
-const parseIndexes = (indexes: string | string[] | undefined): string[] => {
+const parseIndexes = (
+  indexes: string | string[] | undefined,
+  locale?: string
+): string[] => {
   if (!indexes) {
     return [];
   }
+
+  let suffix = '';
+  if (locale) {
+    suffix = `_${locale}`;
+  }
+
   if (Array.isArray(indexes)) {
-    return indexes.map((item) => item.trim()).filter(Boolean);
+    return indexes.map((item) => `${item.trim()}${suffix}`).filter(Boolean);
   }
   return indexes
     .split(',')
-    .map((item) => item.trim())
+    .map((item) => `${item.trim()}${suffix}`)
     .filter(Boolean);
 };
 
@@ -56,10 +48,22 @@ export const useMeilisearch = () => {
     return meiliClient;
   };
 
-  const search = async (
+  /**
+   * 泛型搜索函数
+   * @template T 文档类型, 如 MeiliProductIndex
+   * ---
+   *  @param query 搜索关键词
+   *  @param params 其他搜索参数
+   *  @returns 搜索结果数组
+   */
+  async function search<
+    K extends MeiliSearchItemType = MeiliSearchItemType,
+    T extends MeiliIndexMap[K] = MeiliIndexMap[K],
+  >(
     query: string,
-    params: SearchParams = {}
-  ): Promise<SearchSection[]> => {
+    params: SearchParams = {},
+    searchLocale?: string
+  ): Promise<SearchSection<T>[]> {
     const trimmedQuery = query.trim();
     if (!trimmedQuery) {
       return [];
@@ -70,34 +74,35 @@ export const useMeilisearch = () => {
       return [];
     }
 
-    const activeIndexes = indexes.value;
+    const activeIndexes = indexes.value as K[];
     if (!activeIndexes.length) {
       console.warn('No Meilisearch indexes configured.');
       return [];
     }
+    const rawIndexMap = Object.fromEntries(
+      activeIndexes.map((index) => [`${index}_${searchLocale}`, index])
+    );
+    const indexesWithLocale = activeIndexes.map(
+      (index) => index + (searchLocale ? `_${searchLocale}` : '')
+    );
 
-    const requests = activeIndexes.map(async (indexUid) => {
-      const response = await client.index(indexUid).search(trimmedQuery, {
+    console.log(indexesWithLocale);
+
+    const requests = indexesWithLocale.map(async (indexUid) => {
+      const response = await client.index(indexUid).search<T>(trimmedQuery, {
         limit: params.limit ?? 10,
         ...params,
       });
-      const safeResponse = JSON.parse(JSON.stringify(response));
       return {
         indexUid,
-        response: {
-          hits: safeResponse.hits,
-          estimatedTotalHits:
-            safeResponse.estimatedTotalHits ?? safeResponse.hits.length,
-          processingTimeMs: safeResponse.processingTimeMs ?? 0,
-          query: safeResponse.query,
-        },
-      } satisfies RawSearchSection;
+        response,
+      } satisfies RawSearchSection<T>;
     });
 
-    console.log((await requests[0])?.response.hits[0]?.locale);
-
     const settled = await Promise.allSettled(requests);
 
+    console.log('Meilisearch settled results:', settled);
+
     settled
       .filter(
         (result): result is PromiseRejectedResult =>
@@ -108,22 +113,22 @@ export const useMeilisearch = () => {
       });
 
     return settled
-      .filter((result) => result.status === 'fulfilled')
+      .filter(
+        (result): result is PromiseFulfilledResult<RawSearchSection<T>> =>
+          result.status === 'fulfilled'
+      )
       .map((result) => {
-        const fulfilled = result as PromiseFulfilledResult<RawSearchSection>;
+        const { indexUid, response } = result.value;
         return {
-          indexUid: fulfilled.value.indexUid,
-          hits: fulfilled.value.response.hits.map((hit) => ({
-            ...hit,
-            indexUid: fulfilled.value.indexUid,
-          })),
+          indexUid: indexUid,
+          rawIndex: rawIndexMap[indexUid],
+          hits: response.hits,
           estimatedTotalHits:
-            fulfilled.value.response.estimatedTotalHits ??
-            fulfilled.value.response.hits.length,
-          processingTimeMs: fulfilled.value.response.processingTimeMs ?? 0,
+            response.estimatedTotalHits ?? response.hits.length,
+          processingTimeMs: response.processingTimeMs ?? 0,
         };
       });
-  };
+  }
 
   return {
     search,
diff --git a/app/models/mappers/companyProfileMapper.ts b/app/models/mappers/companyProfileMapper.ts
new file mode 100644
index 0000000..34eda30
--- /dev/null
+++ b/app/models/mappers/companyProfileMapper.ts
@@ -0,0 +1,17 @@
+/**
+ * 将 Directus 返回的 CompanyProfile 数据转换为 CompanyProfileView 视图模型
+ *
+ * @param raw: 原始的 CompanyProfile 数据
+ * @returns 转换后的 CompanyProfileView 对象
+ *
+ * @example
+ * const view = toCompanyProfileView(rawCompanyProfile);
+ */
+export function toCompanyProfileView(raw: CompanyProfile): CompanyProfileView {
+  const trans = raw.translations?.[0] ?? { content: '' };
+
+  return {
+    id: raw.id,
+    content: trans.content,
+  };
+}
diff --git a/app/models/mappers/contactInfoMapper.ts b/app/models/mappers/contactInfoMapper.ts
new file mode 100644
index 0000000..efda729
--- /dev/null
+++ b/app/models/mappers/contactInfoMapper.ts
@@ -0,0 +1,17 @@
+/**
+ * 将 Directus 返回的 ContactInfo 数据转换为 ContactInfoView 视图模型
+ *
+ * @param raw: 原始的 ContactInfo 数据
+ * @returns 转换后的 ContactInfoView 对象
+ *
+ * @example
+ * const view = toContactInfoView(rawContactInfo);
+ */
+export function toContactInfoView(raw: ContactInfo): ContactInfoView {
+  const trans = raw.translations?.[0] ?? { content: '' };
+
+  return {
+    id: raw.id,
+    content: trans.content,
+  };
+}
diff --git a/app/models/mappers/documentMapper.ts b/app/models/mappers/documentMapper.ts
new file mode 100644
index 0000000..cf9dec4
--- /dev/null
+++ b/app/models/mappers/documentMapper.ts
@@ -0,0 +1,77 @@
+/**
+ * 将 Directus 返回的 Document 数据转换为 ProductDocumentView 视图模型
+ *
+ * @param raw: 原始的 Document 数据
+ * @returns 转换后的 ProductDocumentView 对象
+ *
+ * @example
+ * const view = toProductDocumentView(rawDocument);
+ */
+export function toProductDocumentView(
+  raw: ProductDocument
+): ProductDocumentView {
+  const trans = raw.translations?.[0] ?? {
+    title: '',
+  };
+
+  const fileId = typeof raw.file === 'string' ? raw.file : raw.file?.id;
+  const file = raw.file as DirectusFile;
+
+  const { getFileUrl } = useDirectusFiles();
+
+  const url = getFileUrl(fileId);
+
+  return {
+    id: raw.id,
+    filename: file.filename_download,
+    title: trans.title,
+    url: url,
+    size: file.filesize,
+  };
+}
+
+/**
+ * 将 Directus 返回的 Document 数据转换为 DocumentListView 视图模型
+ *
+ * @param raw: 原始的 Document 数据
+ * @returns 转换后的 DocumentListView 对象
+ *
+ * @example
+ * const view = toDocumentListView(rawDocument);
+ */
+export function toDocumentListView(raw: ProductDocument): DocumentListView {
+  const trans = raw.translations?.[0] ?? { title: '' };
+
+  const fileId = typeof raw.file === 'string' ? raw.file : raw.file?.id;
+  const file = raw.file as DirectusFile;
+
+  const { getFileUrl } = useDirectusFiles();
+  const url = getFileUrl(fileId);
+
+  const related_products: DocumentListProduct[] = raw.products
+    ?.filter(isObject<ProductsProductDocument>)
+    .map((item) => item.products_id)
+    .filter(isObject<Product>)
+    .map((item) => {
+      const productType =
+        isObject<ProductType>(item.product_type) &&
+        ({
+          id: item.product_type.id,
+          name: item.product_type.translations?.[0]?.name,
+        } satisfies DocumentListProductType);
+      return {
+        id: item.id,
+        name: item.translations?.[0]?.name,
+        type: productType,
+      };
+    });
+
+  return {
+    id: raw.id,
+    filename: file.filename_download,
+    title: trans.title,
+    url: url,
+    size: file.filesize,
+    products: related_products,
+  };
+}
diff --git a/app/models/mappers/homepageMapper.ts b/app/models/mappers/homepageMapper.ts
new file mode 100644
index 0000000..428f526
--- /dev/null
+++ b/app/models/mappers/homepageMapper.ts
@@ -0,0 +1,51 @@
+/**
+ * 将 Directus 返回的 Homepage 数据转换为 HomepageView 视图模型
+ *
+ * @param raw: 原始的 Homepage 数据
+ * @returns 转换后的 HomepageView 对象
+ *
+ * @example
+ * const view = toHomepageView(rawHomepage);
+ */
+export function toHomepageView(raw: Homepage): HomepageView {
+  const carousel = (raw.carousel ?? [])
+    .filter(isObject<HomepageFile>)
+    .map((item) => item.directus_files_id)
+    .filter((item) => typeof item === 'string');
+
+  const products = (raw.recommend_products ?? [])
+    .filter(isObject<Product>)
+    .map((item) => {
+      const cover = isObject<DirectusFile>(item.cover)
+        ? item.cover.id
+        : item.cover;
+      return {
+        id: item.id,
+        name: item.translations?.[0].name,
+        summary: item.translations?.[0].summary,
+        cover: cover,
+      } satisfies HomepageProductView;
+    });
+
+  const solutions = (raw.recommend_solutions ?? [])
+    .filter(isObject<Solution>)
+    .map((item) => {
+      const cover = isObject<DirectusFile>(item.cover)
+        ? item.cover.id
+        : item.cover;
+
+      return {
+        id: item.id,
+        title: item.translations?.[0].title,
+        summary: item.translations?.[0].summary,
+        cover: cover,
+      } satisfies HomepageSolutionView;
+    });
+
+  return {
+    id: raw.id,
+    carousel: carousel ?? [],
+    recommendProducts: products ?? [],
+    recommendSolutions: solutions ?? [],
+  };
+}
diff --git a/app/models/mappers/productMapper.ts b/app/models/mappers/productMapper.ts
new file mode 100644
index 0000000..a40e284
--- /dev/null
+++ b/app/models/mappers/productMapper.ts
@@ -0,0 +1,134 @@
+/**
+ * 将 Directus返回的 Product 数据转换为 ProductListView 视图模型
+ *
+ * @param raw: 原始的 Product 数据
+ * @returns 转换后的 ProductListView 对象
+ *
+ * @example
+ * const view = toProductListView(rawProduct);
+ */
+export function toProductListView(raw: Product): ProductListView {
+  const trans = raw.translations?.[0] ?? { name: '', summary: '' };
+
+  return {
+    id: raw.id,
+    product_type:
+      typeof raw.product_type === 'string'
+        ? raw.product_type
+        : typeof raw.product_type === 'object' && raw.product_type
+          ? raw.product_type.translations[0].name || ''
+          : '',
+    name: trans.name,
+    summary: trans.summary,
+    cover: raw.cover.toString(),
+  };
+}
+
+/**
+ * 将 Directus 返回的 ProductSpecGroup 数据转换为 ProductSpecGroupView 视图模型
+ *
+ * @param raw: 原始的 ProductSpecGroup 数据
+ * @returns 转换后的 ProductSpecGroupView 对象
+ *
+ * @example
+ * const view = toProductSpecGroupView(rawSpecGroup);
+ */
+export function toProductSpecGroupView(
+  raw: ProductSpecGroup
+): ProductSpecGroupView {
+  const trans = raw.translations?.[0] ?? {
+    name: '',
+  };
+
+  return {
+    id: raw.id,
+    name: trans.name,
+    specs: raw.specs
+      .filter(isObject<ProductSpec>)
+      .map((item) => toProductSpecView(item)),
+  };
+}
+
+/**
+ * 将 Directus 返回的 ProductSpec 数据转换为 ProductSpecView 视图模型
+ *
+ * @param raw: 原始的 ProductSpec 数据
+ * @returns 转换后的 ProductSpecView 对象
+ *
+ * @example
+ * const view = toProductSpecView(rawSpecGroup);
+ */
+export function toProductSpecView(raw: ProductSpec): ProductSpecView {
+  const trans = raw.translations?.[0] ?? {
+    key: '',
+  };
+
+  return {
+    id: raw.id,
+    key: trans.key,
+    value: raw.value,
+  };
+}
+
+/**
+ * 将 Directus 返回的 Product 数据转换为 ProductView 视图模型
+ *
+ * @param raw: 原始的 Product 数据
+ * @returns 转换后的 ProductView 对象
+ *
+ * @example
+ * const view = toProductView(rawProduct);
+ */
+export function toProductView(raw: Product): ProductView {
+  const trans = raw.translations?.[0] ?? {
+    name: '',
+    summary: '',
+    description: '',
+  };
+
+  const images = (raw.images ?? [])
+    .filter(isObject<ProductsProductImage>)
+    .map((item) => item.product_images_id)
+    .filter(isObject<ProductImage>)
+    .map((item) => {
+      return {
+        id: item.id,
+        image: item.image.toString(),
+        caption: item.translations?.[0]?.caption || '',
+      };
+    });
+
+  const specs = (raw.specs ?? [])
+    .filter(isObject<ProductSpecGroup>)
+    .map((item) => toProductSpecGroupView(item));
+
+  const faqs = (raw.faqs ?? [])
+    .filter(isObject<ProductsQuestion>)
+    .map((item) => item.questions_id)
+    .filter(isObject<Question>)
+    .map((item) => toProductQuestionView(item));
+
+  const documents = (raw.documents ?? [])
+    .filter(isObject<ProductsProductDocument>)
+    .map((item) => item.product_documents_id)
+    .filter(isObject<ProductDocument>)
+    .map((item) => toProductDocumentView(item));
+
+  return {
+    id: raw.id,
+
+    product_type:
+      typeof raw.product_type === 'string'
+        ? raw.product_type
+        : typeof raw.product_type === 'object' && raw.product_type
+          ? raw.product_type.translations[0].name || ''
+          : '',
+    name: trans.name,
+    summary: trans.summary,
+    images: images,
+    description: trans.description,
+    specs: specs,
+    faqs: faqs,
+    documents: documents,
+  };
+}
diff --git a/app/models/mappers/questionMapper.ts b/app/models/mappers/questionMapper.ts
new file mode 100644
index 0000000..f84ac6e
--- /dev/null
+++ b/app/models/mappers/questionMapper.ts
@@ -0,0 +1,59 @@
+/**
+ * 将 Directus 返回的 Question 数据转换为 ProductQuestionView 视图模型
+ *
+ * @param raw: 原始的 Question 数据
+ * @returns 转换后的 ProductQuestionView 对象
+ *
+ * @example
+ * const view = toProductQuestionView(rawQuestion);
+ */
+export function toProductQuestionView(raw: Question): ProductQuestionView {
+  const trans = raw.translations?.[0] ?? { title: '', content: '' };
+
+  return {
+    id: raw.id,
+    title: trans.title,
+    content: trans.content,
+  };
+}
+
+/**
+ * 将 Directus 返回的 Question 数据转换为 QuestionListView 视图模型
+ *
+ * @param raw: 原始的 Question 数据
+ * @returns 转换后的 QuestionListView 对象
+ * ---
+ *  @example
+ *  const view = toQuestionListView(rawQuestion);
+ */
+export function toQuestionListView(raw: Question): QuestionListView {
+  const trans = raw.translations?.[0] ?? { title: '', content: '' };
+
+  const related_products: QuestionListProduct[] = (raw.products ?? [])
+    .filter(isObject<ProductsQuestion>)
+    .map((item) => item.products_id)
+    .filter(isObject<Product>)
+    .map((item) => {
+      const translations = item.translations[0] ?? { name: '' };
+
+      const product_type =
+        isObject<ProductType>(item.product_type) &&
+        ({
+          id: item.product_type.id,
+          name: item.product_type.translations[0]?.name,
+        } satisfies QuestionListProductType);
+
+      return {
+        id: item.id,
+        name: translations.name,
+        type: product_type,
+      };
+    });
+
+  return {
+    id: raw.id,
+    title: trans.title,
+    content: trans.content,
+    products: related_products,
+  };
+}
diff --git a/app/models/mappers/searchItemMapper.ts b/app/models/mappers/searchItemMapper.ts
new file mode 100644
index 0000000..f48368e
--- /dev/null
+++ b/app/models/mappers/searchItemMapper.ts
@@ -0,0 +1,16 @@
+/**
+ * 搜索索引转换器
+ * @param hit 搜索条目
+ * @returns 转换后的搜索条目视图模型
+ *
+ * ---
+ *  @example
+ *  const view = toSearchItemView(item, 'products');
+ */
+export function toSearchItemView<T extends MeiliSearchItemType>(
+  item: MeiliIndexMap[T],
+  type: T
+): SearchItemView {
+  const converter = converters[type];
+  return converter ? converter(item) : null;
+}
diff --git a/app/models/mappers/solutionMapper.ts b/app/models/mappers/solutionMapper.ts
new file mode 100644
index 0000000..4fd05b1
--- /dev/null
+++ b/app/models/mappers/solutionMapper.ts
@@ -0,0 +1,54 @@
+/**
+ * 将 Directus 返回的 Solution 数据转换为 SolutionListView 视图模型
+ *
+ * @param raw: 原始的 Solution 数据
+ * @returns 转换后的 SolutionListView 对象
+ *
+ * ---
+ *
+ * @example
+ * const view = toSolutionListView(rawSolution);
+ */
+export function toSolutionListView(raw: Solution): SolutionListView {
+  const trans = raw.translations?.[0] ?? {
+    title: '',
+    summary: '',
+  };
+
+  return {
+    id: raw.id,
+    title: trans.title,
+    summary: trans.summary,
+    solution_type: isObject<SolutionType>(raw.type)
+      ? raw.type.translations[0].name
+      : '',
+    cover: isObject<DirectusFile>(raw.cover) ? raw.cover.id : raw.cover,
+  };
+}
+
+/**
+ * 将 Directus 返回的 Solution 数据转换为 SolutionView 视图模型
+ *
+ * @param raw: 原始的 Solution 数据
+ * @returns 转换后的 SolutionView 对象
+ *
+ * ---
+ *
+ * @example
+ * const view = toSolutionView(rawSolution);
+ */
+export function toSolutionView(raw: Solution): SolutionView {
+  const trans = raw.translations?.[0] ?? {
+    title: '',
+    summary: '',
+    content: '',
+  };
+
+  return {
+    id: raw.id,
+    title: trans.title,
+    summary: trans.summary,
+    content: trans.content,
+    createAt: raw.create_at,
+  };
+}
diff --git a/app/models/utils/object.ts b/app/models/utils/object.ts
new file mode 100644
index 0000000..37ef512
--- /dev/null
+++ b/app/models/utils/object.ts
@@ -0,0 +1,30 @@
+/**
+ * 判断某一值是否为非null对象
+ *
+ * @template T 泛型类型，用于推断目标对象的类型
+ * @param value: 需要判断的值
+ * @returns 如果值是非null对象则返回true，否则返回false
+ *
+ * @example
+ * if (isObject<Product>(value)) value.id
+ */
+export const isObject = <T extends object>(value: unknown): value is T =>
+  typeof value === 'object' && value !== null;
+
+/**
+ * 判断某一值是否为非null对象组成的数组
+ *
+ * @template T 泛型类型，用于推断目标对象的类型
+ * @param value: 需要判断的值
+ * @returns 如果值是非null对象组成的数组则返回true，否则返回false
+ *
+ * @example
+ * const data: unknown = [{ id: 1 }, { id: 2 }];
+ * if (isArrayOfObject)<{ id: number }>(data) {
+ * // TypeScript 知道 data 是 { id: number }[] 类型
+ *   console.log(data[0].id);
+ * }
+ */
+export const isArrayOfObject = <T extends object>(arr: unknown): arr is T[] => {
+  return Array.isArray(arr) && arr.every(isObject<T>);
+};
diff --git a/app/models/utils/search-converters.ts b/app/models/utils/search-converters.ts
new file mode 100644
index 0000000..c230e5f
--- /dev/null
+++ b/app/models/utils/search-converters.ts
@@ -0,0 +1,35 @@
+/**
+ * 各索引对应的转换函数表
+ */
+export const converters: {
+  [K in keyof MeiliIndexMap]: (item: MeiliIndexMap[K]) => SearchItemView;
+} = {
+  products: (item: MeiliIndexMap['products']): SearchItemView => ({
+    id: item.id,
+    type: 'product',
+    title: item.name,
+    summary: item.summary,
+  }),
+
+  solutions: (item: MeiliIndexMap['solutions']): SearchItemView => ({
+    id: item.id,
+    type: 'solution',
+    title: item.title,
+    summary: item.summary,
+  }),
+
+  questions: (item: MeiliIndexMap['questions']): SearchItemView => ({
+    id: item.id,
+    type: 'question',
+    title: item.title,
+    summary: item.content.slice(0, 100) + '...',
+  }),
+
+  product_documents: (
+    item: MeiliIndexMap['product_documents']
+  ): SearchItemView => ({
+    id: item.id,
+    type: 'document',
+    title: item.title,
+  }),
+};
diff --git a/app/models/views/CompanyProfileView.ts b/app/models/views/CompanyProfileView.ts
new file mode 100644
index 0000000..cba398c
--- /dev/null
+++ b/app/models/views/CompanyProfileView.ts
@@ -0,0 +1,10 @@
+/**
+ * 公司简介视图模型
+ */
+export interface CompanyProfileView {
+  /** 唯一标识符 **/
+  id: number;
+
+  /** 内容 **/
+  content: string;
+}
diff --git a/app/models/views/ContactInfoView.ts b/app/models/views/ContactInfoView.ts
new file mode 100644
index 0000000..a083c13
--- /dev/null
+++ b/app/models/views/ContactInfoView.ts
@@ -0,0 +1,10 @@
+/**
+ * 联系信息视图模型
+ */
+export interface ContactInfoView {
+  /** 唯一标识符 **/
+  id: number;
+
+  /** 内容 **/
+  content: string;
+}
diff --git a/app/models/views/DocumentListView.ts b/app/models/views/DocumentListView.ts
new file mode 100644
index 0000000..4fd3bae
--- /dev/null
+++ b/app/models/views/DocumentListView.ts
@@ -0,0 +1,42 @@
+/**
+ * 文档关联产品类型模型
+ * 用于在文档库中提供产品筛选功能
+ */
+export interface DocumentListProductType {
+  id: number;
+  name: string;
+}
+
+/**
+ * 文档关联产品模型
+ * 用于在文档库中提供产品筛选功能
+ */
+export interface DocumentListProduct {
+  id: number;
+  name: string;
+  type: DocumentListProductType;
+}
+
+/**
+ * 文档列表模型
+ * 用于文档库(/support/documents)页面渲染的数据结构
+ */
+export interface DocumentListView {
+  /** 唯一标识符 **/
+  id: number;
+
+  /** 文件名 **/
+  filename: string;
+
+  /** 文档标题 **/
+  title: string;
+
+  /** 文档大小 **/
+  size: number;
+
+  /** 文档链接 **/
+  url: string;
+
+  /** 相关产品 **/
+  products: DocumentListProduct[];
+}
diff --git a/app/models/views/HomepageView.ts b/app/models/views/HomepageView.ts
new file mode 100644
index 0000000..fb7558c
--- /dev/null
+++ b/app/models/views/HomepageView.ts
@@ -0,0 +1,50 @@
+/**
+ * 主页推荐产品视图模型
+ */
+export interface HomepageProductView {
+  /** 唯一标识符 **/
+  id: number;
+
+  /** 产品名称 **/
+  name: string;
+
+  /** 产品简介 **/
+  summary: string;
+
+  /** 产品封面 **/
+  cover: string;
+}
+
+/**
+ * 主页推荐解决方案视图模型
+ */
+export interface HomepageSolutionView {
+  /** 唯一标识符 **/
+  id: number;
+
+  /** 解决方案标题 **/
+  title: string;
+
+  /** 解决方案摘要 **/
+  summary: string;
+
+  /** 解决方案封面 **/
+  cover: string;
+}
+
+/**
+ * 主页视图模型
+ */
+export interface HomepageView {
+  /** 唯一标识符 **/
+  id: number;
+
+  /** 首页图片 **/
+  carousel: string[];
+
+  /** 首页推荐产品 **/
+  recommendProducts: HomepageProductView[];
+
+  /** 首页推荐解决方案 **/
+  recommendSolutions: HomepageSolutionView[];
+}
diff --git a/app/models/views/ProductDocumentView.ts b/app/models/views/ProductDocumentView.ts
new file mode 100644
index 0000000..dae8aa3
--- /dev/null
+++ b/app/models/views/ProductDocumentView.ts
@@ -0,0 +1,20 @@
+/**
+ * 文档视图模型
+ * 用于文档列表渲染的数据结构
+ */
+export interface ProductDocumentView {
+  /** 唯一标识符 **/
+  id: number;
+
+  /** 文件名 **/
+  filename: string;
+
+  /** 文档标题 **/
+  title: string;
+
+  /** 文档大小 **/
+  size: number;
+
+  /** 文档链接 **/
+  url: string;
+}
diff --git a/app/models/views/ProductListView.ts b/app/models/views/ProductListView.ts
new file mode 100644
index 0000000..14912fe
--- /dev/null
+++ b/app/models/views/ProductListView.ts
@@ -0,0 +1,20 @@
+/**
+ * 产品列表视图模型
+ * 用于产品列表(/products)渲染的数据结构
+ */
+export interface ProductListView {
+  /** 唯一标识符 **/
+  id: number;
+
+  /** 产品名称 **/
+  name: string;
+
+  /** 产品简介 **/
+  summary: string;
+
+  /** 产品类型 **/
+  product_type: string;
+
+  /** 产品封面(图片的id) **/
+  cover: string;
+}
diff --git a/app/models/views/ProductQuestionView.ts b/app/models/views/ProductQuestionView.ts
new file mode 100644
index 0000000..c8a85de
--- /dev/null
+++ b/app/models/views/ProductQuestionView.ts
@@ -0,0 +1,14 @@
+/**
+ * 常见问题视图模型
+ * 用于产品页常见问题渲染的数据结构
+ */
+export interface ProductQuestionView {
+  /** 唯一标识符 **/
+  id: number;
+
+  /** 问题标题 **/
+  title: string;
+
+  /** 问题内容 **/
+  content: string;
+}
diff --git a/app/models/views/ProductSpecGroupView.ts b/app/models/views/ProductSpecGroupView.ts
new file mode 100644
index 0000000..361fa71
--- /dev/null
+++ b/app/models/views/ProductSpecGroupView.ts
@@ -0,0 +1,29 @@
+/**
+ * 产品规格模型
+ * 用于产品规格渲染的数据结构
+ */
+export interface ProductSpecView {
+  /** 唯一标识符 **/
+  id: number;
+
+  /** 规格名称 **/
+  key: string;
+
+  /** 规格值 **/
+  value: string;
+}
+
+/**
+ * 产品规格表模型
+ * 用于产品规格表渲染的数据结构
+ */
+export interface ProductSpecGroupView {
+  /** 唯一标识符 **/
+  id: number;
+
+  /** 规格组名称 **/
+  name: string;
+
+  /** 规格组 **/
+  specs: ProductSpecView[];
+}
diff --git a/app/models/views/ProductView.ts b/app/models/views/ProductView.ts
new file mode 100644
index 0000000..f91e061
--- /dev/null
+++ b/app/models/views/ProductView.ts
@@ -0,0 +1,38 @@
+interface ImageView {
+  id: number;
+  image: string;
+  caption: string;
+}
+
+/**
+ * 产品视图模型
+ * 用于产品详情页(/products/[slug])渲染的数据结构
+ */
+export interface ProductView {
+  /** 唯一标识符 **/
+  id: number;
+
+  /** 产品名称 **/
+  name: string;
+
+  /** 产品简介 **/
+  summary: string;
+
+  /** 产品类型 **/
+  product_type: string;
+
+  /** 产品图片 **/
+  images: ImageView[];
+
+  /** 产品详情 **/
+  description: string;
+
+  /** 产品规格 **/
+  specs: ProductSpecGroupView[];
+
+  /** 产品常见问题 **/
+  faqs: QuestionView[];
+
+  /** 产品文档 **/
+  documents: ProductDocumentView[];
+}
diff --git a/app/models/views/QuestionListVuew.ts b/app/models/views/QuestionListVuew.ts
new file mode 100644
index 0000000..b839bd2
--- /dev/null
+++ b/app/models/views/QuestionListVuew.ts
@@ -0,0 +1,36 @@
+/**
+ * 问题关联产品类型模型
+ * 用于在常见问题列表中提供产品筛选功能
+ */
+export interface QuestionListProductType {
+  id: number;
+  name: string;
+}
+
+/**
+ * 问题关联产品模型
+ * 用于在常见问题列表中提供产品筛选功能
+ */
+export interface QuestionListProduct {
+  id: number;
+  name: string;
+  type: QuestionListProductType;
+}
+
+/**
+ * 常见问题列表视图模型
+ * 用于常见问题列表(/support/faq)页面渲染的数据结构
+ */
+export interface QuestionListView {
+  /** 唯一标识符 **/
+  id: number;
+
+  /** 问题标题 **/
+  title: string;
+
+  /** 问题内容 **/
+  content: string;
+
+  /** 关联产品 **/
+  products: QuestionListProduct[];
+}
diff --git a/app/models/views/SearchItemView.ts b/app/models/views/SearchItemView.ts
new file mode 100644
index 0000000..28b7822
--- /dev/null
+++ b/app/models/views/SearchItemView.ts
@@ -0,0 +1,13 @@
+export interface SearchItemView {
+  /** 唯一标识符 **/
+  id: number;
+
+  /** 条目类型 **/
+  type: 'product' | 'solution' | 'question' | 'document';
+
+  /** 条目标题 **/
+  title: string;
+
+  /** 条目摘要 **/
+  summary?: string;
+}
diff --git a/app/models/views/SolutionListView.ts b/app/models/views/SolutionListView.ts
new file mode 100644
index 0000000..fa41cfe
--- /dev/null
+++ b/app/models/views/SolutionListView.ts
@@ -0,0 +1,20 @@
+/**
+ * 解决方案列表模型
+ * 用于解决方案列表(/solutions)渲染的数据结构
+ */
+export interface SolutionListView {
+  /** 唯一标识符 **/
+  id: number;
+
+  /** 标题 **/
+  title: string;
+
+  /** 摘要 **/
+  summary: string;
+
+  /** 解决方案类型 **/
+  solution_type: string;
+
+  /** 解决方案封面(图片id) **/
+  cover: string;
+}
diff --git a/app/models/views/SolutionView.ts b/app/models/views/SolutionView.ts
new file mode 100644
index 0000000..f5bda88
--- /dev/null
+++ b/app/models/views/SolutionView.ts
@@ -0,0 +1,20 @@
+/**
+ * 解决方案模型
+ * 用于解决方案页(/solutions/[slug])渲染的数据结构
+ */
+export interface SolutionView {
+  /** 唯一标识符 **/
+  id: number;
+
+  /** 标题 **/
+  title: string;
+
+  /** 摘要 **/
+  summary: string;
+
+  /** 内容 **/
+  content: string;
+
+  /** 创建时间 **/
+  createAt: string;
+}
diff --git a/app/pages/about/index.vue b/app/pages/about/index.vue
index 7545652..70c2b39 100644
--- a/app/pages/about/index.vue
+++ b/app/pages/about/index.vue
@@ -15,7 +15,7 @@
       </el-breadcrumb>
 
       <div class="content">
-        <markdown-renderer :content="content || ''" />
+        <markdown-renderer :content="content.content || ''" />
       </div>
 
       <el-divider content-position="left">更多信息</el-divider>
@@ -38,17 +38,9 @@
 </template>
 
 <script setup lang="ts">
-  const { findOne } = useStrapi();
-  const { getStrapiLocale } = useLocalizations();
-  const strapiLocale = getStrapiLocale();
+  const { data, pending, error } = await useCompanyProfile();
 
-  const { data, pending, error } = useAsyncData('company-profile', () =>
-    findOne<StrapiCompanyProfile>('company-profile', undefined, {
-      locale: strapiLocale,
-    })
-  );
-
-  const content = computed(() => data.value?.data.content);
+  const content = computed(() => toCompanyProfileView(data.value));
 
   watch(error, (value) => {
     if (value) {
diff --git a/app/pages/index.vue b/app/pages/index.vue
index bb355b7..ae16d45 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -12,14 +12,11 @@
           <div class="carousel-item">
             <el-image
               class="carousel-image"
-              :src="useStrapiMedia(item.url || '')"
-              :alt="item.alternativeText || `Carousel Image ${index + 1}`"
+              :src="getImageUrl(item)"
+              :alt="`Carousel Image ${index + 1}`"
               fit="contain"
               lazy
             />
-            <p v-if="item.caption" class="carousel-image-caption">
-              {{ item.caption }}
-            </p>
           </div>
         </el-carousel-item>
       </el-carousel>
@@ -42,24 +39,24 @@
           :autoplay="false"
         >
           <el-carousel-item
-            v-for="n in Math.floor(recommend_productions.length / 3) + 1"
+            v-for="n in Math.floor(recommend_products.length / 3) + 1"
             :key="n"
             class="recommend-list"
           >
             <div class="recommend-card-group">
               <el-card
-                v-for="(item, index) in recommend_productions.slice(
+                v-for="(item, index) in recommend_products.slice(
                   (n - 1) * 3,
                   n * 3
                 )"
                 :key="index"
                 class="recommend-card"
-                @click="handleProductionCardClick(item.documentId || '')"
+                @click="handleProductCardClick(item.id.toString() || '')"
               >
                 <template #header>
                   <el-image
-                    :src="useStrapiMedia(item.cover?.url || '')"
-                    :alt="item.cover?.alternativeText || item.title"
+                    :src="getImageUrl(item.cover)"
+                    :alt="item.name"
                     fit="cover"
                     lazy
                   />
@@ -67,7 +64,7 @@
                 <div class="recommend-card-body">
                   <!-- Title -->
                   <div class="text-center">
-                    <span class="recommend-card-title">{{ item.title }}</span>
+                    <span class="recommend-card-title">{{ item.name }}</span>
                   </div>
                   <!-- Description -->
                   <div class="recommend-card-description text-left opacity-25">
@@ -107,12 +104,12 @@
                 )"
                 :key="index"
                 class="recommend-card"
-                @click="handleSolutionCardClick(item.documentId || '')"
+                @click="handleSolutionCardClick(item.id.toString() || '')"
               >
                 <template #header>
                   <el-image
-                    :src="useStrapiMedia(item.cover?.url || '')"
-                    :alt="item.cover?.alternativeText || item.title"
+                    :src="getImageUrl(item.cover)"
+                    :alt="item.title"
                     fit="cover"
                     lazy
                   />
@@ -140,55 +137,39 @@
 </template>
 
 <script setup lang="ts">
-  const { findOne } = useStrapi();
-  const { getStrapiLocale } = useLocalizations();
-  const strapiLocale = getStrapiLocale();
+  const { getImageUrl } = useDirectusImage();
 
-  const { data, pending, error } = useAsyncData('homepage', () =>
-    findOne<StrapiHomepage>('homepage', undefined, {
-      populate: {
-        carousel: {
-          populate: '*',
-        },
-        recommend_productions: {
-          populate: {
-            cover: {
-              populate: '*',
-            },
-          },
-        },
-        recommend_solutions: {
-          populate: {
-            cover: {
-              populate: '*',
-            },
-          },
-        },
-      },
-      locale: strapiLocale,
-    })
-  );
+  const { data, pending, error } = await useHomepage();
 
-  const carousel = computed(() => data.value?.data.carousel || []);
-  const recommend_productions = computed(
-    () => data.value?.data.recommend_productions || []
+  const homepageData = computed(() => {
+    return toHomepageView(data.value);
+  });
+
+  const carousel = computed(() => homepageData.value?.carousel);
+
+  const recommend_products = computed(
+    () => homepageData.value?.recommendProducts
   );
   const recommend_solutions = computed(
-    () => data.value?.data.recommend_solutions || []
+    () => homepageData.value?.recommendSolutions
   );
 
+  watch(pending, () => {
+    console.log(data.value);
+  });
+
   watch(error, (value) => {
     if (value) {
       console.error('数据获取失败: ', value);
     }
   });
 
-  const handleProductionCardClick = (documentId: string) => {
+  const handleProductCardClick = (documentId: string) => {
     // 使用路由导航到产品详情页
     if (documentId) {
       const localePath = useLocalePath();
       const router = useRouter();
-      router.push(localePath(`/productions/${documentId}`));
+      router.push(localePath(`/products/${documentId}`));
     }
   };
 
diff --git a/app/pages/productions/[...slug].vue b/app/pages/products/[...slug].vue
similarity index 58%
rename from app/pages/productions/[...slug].vue
rename to app/pages/products/[...slug].vue
index 21e95fc..e0f186a 100644
--- a/app/pages/productions/[...slug].vue
+++ b/app/pages/products/[...slug].vue
@@ -1,7 +1,7 @@
 <template>
   <div class="page-container">
     <div v-if="!pending">
-      <div v-if="production">
+      <div v-if="product">
         <!-- 面包屑导航 -->
         <el-breadcrumb class="breadcrumb" separator="/">
           <el-breadcrumb-item class="text-md opacity-50">
@@ -10,44 +10,44 @@
             }}</NuxtLink>
           </el-breadcrumb-item>
           <el-breadcrumb-item class="text-md opacity-50">
-            <NuxtLink :to="$localePath('/productions')">{{
-              $t('navigation.productions')
+            <NuxtLink :to="$localePath('/products')">{{
+              $t('navigation.products')
             }}</NuxtLink>
           </el-breadcrumb-item>
           <el-breadcrumb-item class="text-md opactiy-50">{{
-            production.title
+            product.name
           }}</el-breadcrumb-item>
         </el-breadcrumb>
 
         <!-- 产品详情内容 -->
-        <div class="production-header">
-          <div class="production-image">
+        <div class="product-header">
+          <div class="product-image">
             <el-image
-              v-if="production.production_images.length <= 1"
-              :src="useStrapiMedia(production?.cover?.url || '')"
-              :alt="production.title"
+              v-if="product.images.length <= 1"
+              :src="getImageUrl(product.images[0].image)"
+              :alt="product.name"
               fit="contain"
             />
             <el-carousel
               v-else
-              class="production-carousel"
+              class="product-carousel"
               height="500px"
               :autoplay="false"
               :loop="false"
               arrow="always"
             >
               <el-carousel-item
-                v-for="(item, index) in production.production_images || []"
+                v-for="(item, index) in product.images || []"
                 :key="index"
               >
-                <div class="production-carousel-item">
+                <div class="product-carousel-item">
                   <el-image
-                    :src="useStrapiMedia(item.url || '')"
-                    :alt="item.alternativeText || production.title"
+                    :src="getImageUrl(item.image || '')"
+                    :alt="product.name"
                     fit="contain"
                     lazy
                   />
-                  <p v-if="item.caption" class="production-image-caption">
+                  <p v-if="item.caption" class="product-image-caption">
                     {{ item.caption }}
                   </p>
                 </div>
@@ -55,34 +55,26 @@
             </el-carousel>
           </div>
 
-          <div class="production-info">
-            <h1>{{ production.title }}</h1>
-            <p class="summary">{{ production.summary }}</p>
+          <div class="product-info">
+            <h1>{{ product.name }}</h1>
+            <p class="summary">{{ product.summary }}</p>
           </div>
         </div>
 
         <!-- 产品详细描述 -->
-        <div class="production-content">
-          <el-tabs v-model="activeName" class="production-tabs" stretch>
+        <div class="product-content">
+          <el-tabs v-model="activeName" class="product-tabs" stretch>
             <el-tab-pane label="产品详情" name="details">
-              <markdown-renderer
-                :content="production.production_details || ''"
-              />
+              <markdown-renderer :content="product.description || ''" />
             </el-tab-pane>
             <el-tab-pane label="技术规格" name="specs">
-              <spec-table :data="production.production_specs" />
+              <spec-table :data="product.specs" />
             </el-tab-pane>
             <el-tab-pane label="常见问题" name="faq">
-              <question-list :questions="production.questions" />
+              <question-list :questions="product.faqs" />
             </el-tab-pane>
             <el-tab-pane label="相关文档" name="documents">
-              <document-list
-                :documents="
-                  production.production_documents.map(
-                    (item) => item.document
-                  ) || []
-                "
-              />
+              <document-list :documents="product.documents" />
             </el-tab-pane>
           </el-tabs>
         </div>
@@ -95,8 +87,8 @@
           :sub-title="$t('product-not-found-desc')"
         >
           <template #extra>
-            <el-button type="primary" @click="$router.push('/productions')">
-              {{ $t('back-to-productions') }}
+            <el-button type="primary" @click="$router.push('/products')">
+              {{ $t('back-to-products') }}
             </el-button>
           </template>
         </el-result>
@@ -115,39 +107,22 @@
 
 <script setup lang="ts">
   const route = useRoute();
-  const { findOne } = useStrapi();
-  const { getStrapiLocale } = useLocalizations();
-  const strapiLocale = getStrapiLocale();
 
-  // 获取路由参数（slug 或 id）
-  const documentId = computed(() => route.params.slug as string);
+  const { getImageUrl } = useDirectusImage();
 
-  const { data, pending, error } = useAsyncData(
-    () => `production-${documentId.value}`,
-    () =>
-      findOne<Production>('productions', documentId.value, {
-        populate: {
-          production_specs: {
-            populate: '*',
-          },
-          production_images: {
-            populate: '*',
-          },
-          cover: {
-            populate: '*',
-          },
-          questions: {
-            populate: '*',
-          },
-          production_documents: {
-            populate: 'document',
-          },
-        },
-        locale: strapiLocale,
-      })
-  );
+  // 获取路由参数
+  const id = computed(() => route.params.slug as string);
 
-  const production = computed(() => data.value?.data ?? null);
+  const { data, pending, error } = await useProduct(id.value);
+
+  console.log('Raw Data: ', data.value);
+
+  const rawProduct = computed(() => data.value ?? null);
+  const product = computed(() => {
+    return toProductView(rawProduct.value);
+  });
+
+  console.log('View Data: ', product.value);
 
   const activeName = ref('details'); // 默认选中概览标签
 
@@ -159,11 +134,11 @@
 
   // SEO
   useHead({
-    title: computed(() => production.value?.title || 'Product Detail'),
+    title: computed(() => product.value?.name || 'Product Detail'),
     meta: [
       {
         name: 'description',
-        content: computed(() => production.value?.summary || ''),
+        content: computed(() => product.value?.summary || ''),
       },
     ],
   });
@@ -180,20 +155,20 @@
     padding: 2rem;
   }
 
-  .production-header {
+  .product-header {
     display: grid;
     grid-template-columns: 2fr 1fr;
     gap: 3rem;
   }
 
-  .production-image .el-image {
+  .product-image .el-image {
     position: relative;
     width: 100%;
     height: 500px;
     border-radius: 8px;
   }
 
-  .production-image-caption {
+  .product-image-caption {
     position: absolute;
     bottom: 10px;
     /* left: 10%; */
@@ -205,7 +180,7 @@
     font-size: 0.8rem;
   }
 
-  .production-carousel :deep(.el-carousel__button) {
+  .product-carousel :deep(.el-carousel__button) {
     /* 指示器按钮样式 */
     width: 8px;
     height: 8px;
@@ -214,7 +189,7 @@
     transition: all 0.3s ease;
   }
 
-  .production-info h1 {
+  .product-info h1 {
     margin-top: 2rem;
     margin-bottom: 1rem;
     font-size: 2rem;
@@ -227,16 +202,16 @@
     margin-bottom: 2rem;
   }
 
-  .production-tabs ::v-deep(.el-tabs__nav) {
+  .product-tabs ::v-deep(.el-tabs__nav) {
     min-width: 30%;
     float: right;
   }
 
-  .production-tabs ::v-deep(.el-tabs__content) {
+  .product-tabs ::v-deep(.el-tabs__content) {
     padding: 10px;
   }
 
-  .production-content h2 {
+  .product-content h2 {
     color: var(--el-text-color-primary);
     margin: 0;
   }
@@ -257,12 +232,12 @@
 
   /* 响应式设计 */
   @media (max-width: 768px) {
-    .production-header {
+    .product-header {
       grid-template-columns: 1fr;
       gap: 2rem;
     }
 
-    .production-info h1 {
+    .product-info h1 {
       font-size: 2rem;
     }
   }
diff --git a/app/pages/productions/index.vue b/app/pages/products/index.vue
similarity index 51%
rename from app/pages/productions/index.vue
rename to app/pages/products/index.vue
index ad105ed..3ce7d23 100644
--- a/app/pages/productions/index.vue
+++ b/app/pages/products/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="page-container">
     <div class="page-header">
-      <h1 class="page-title">{{ $t('our-productions') }}</h1>
+      <h1 class="page-title">{{ $t('our-products') }}</h1>
       <el-breadcrumb class="breadcrumb">
         <el-breadcrumb-item class="text-md opacity-50">
           <NuxtLink :to="$localePath('/')">{{
@@ -9,29 +9,29 @@
           }}</NuxtLink>
         </el-breadcrumb-item>
         <el-breadcrumb-item class="text-md opacity-50">
-          <NuxtLink :to="$localePath('/productions')">{{
-            $t('navigation.productions')
+          <NuxtLink :to="$localePath('/products')">{{
+            $t('navigation.products')
           }}</NuxtLink>
         </el-breadcrumb-item>
       </el-breadcrumb>
     </div>
     <div v-if="!pending" class="page-content">
-      <div class="productions-container">
-        <el-collapse v-model="activeNames" class="production-collapse">
+      <div class="products-container">
+        <el-collapse v-model="activeNames" class="product-collapse">
           <el-collapse-item
-            v-for="(group, type) in groupedProductions"
+            v-for="(group, type) in groupedProducts"
             :key="type"
             :title="type || '未分类'"
             :name="type || 'no-category'"
           >
             <div class="group-list">
-              <production-card
-                v-for="production in group"
-                :key="production.documentId || production.id"
-                :slug="production.documentId"
-                :image-url="useStrapiMedia(production?.cover?.url || '')"
-                :name="production.title"
-                :description="production.summary || ''"
+              <product-card
+                v-for="product in group"
+                :key="product.id"
+                :slug="product.id.toString()"
+                :image-url="getImageUrl(product.cover.toString())"
+                :name="product.name"
+                :description="product.summary || ''"
               />
             </div>
           </el-collapse-item>
@@ -45,63 +45,43 @@
 </template>
 
 <script setup lang="ts">
-  const { find } = useStrapi();
-  const { getStrapiLocale } = useLocalizations();
-  const strapiLocale = getStrapiLocale();
+  const { getImageUrl } = useDirectusImage();
 
-  const { data, pending, error } = useAsyncData(
-    'productions',
-    () =>
-      find<Production>('productions', {
-        populate: {
-          cover: {
-            populate: '*',
-          },
-          production_type: {
-            populate: '*',
-          },
-        },
-        filters: {
-          show_in_production_list: {
-            $eq: true,
-          },
-        },
-        locale: strapiLocale,
-      }),
-    {
-      lazy: true,
-    }
-  );
+  const { data, pending, error } = useProductList();
 
   const activeNames = ref<string[]>([]);
 
-  const productions = computed(() => data.value?.data ?? []);
+  const productsRaw = computed(() => data.value ?? []);
+  const products = computed(() =>
+    productsRaw.value.map((item) => toProductListView(item))
+  );
 
   // 按类型分组
-  // 兼容 production_type 既可能为对象也可能为字符串
-  const groupedProductions = computed(() => {
-    const groups: Record<string, Production[]> = {};
-    for (const prod of productions.value) {
+  // 兼容 product_type 既可能为对象也可能为字符串
+  const groupedProducts = computed(() => {
+    const groups: Record<string, ProductListView[]> = {};
+    for (const prod of products.value) {
       let typeKey = '';
-      if (typeof prod.production_type === 'string') {
-        typeKey = prod.production_type;
+      if (typeof prod.product_type === 'string') {
+        typeKey = prod.product_type;
       } else if (
-        prod.production_type &&
-        typeof prod.production_type === 'object' &&
-        'type' in prod.production_type
+        prod.product_type &&
+        typeof prod.product_type === 'object' &&
+        'name' in prod.product_type
       ) {
-        typeKey = prod.production_type.type || '';
+        typeKey = prod.product_type || '';
       }
       if (!groups[typeKey]) groups[typeKey] = [];
       groups[typeKey]?.push(prod);
     }
+    console.log(groups);
     return groups;
   });
 
-  watch(groupedProductions, () => {
-    if (groupedProductions.value) {
+  watch(groupedProducts, () => {
+    if (groupedProducts.value) {
       activeNames.value = [
-        ...Object.keys(groupedProductions.value),
+        ...Object.keys(groupedProducts.value),
         'no-category',
       ];
     }
@@ -113,10 +93,16 @@
     }
   });
 
-  onMounted(() => {
-    if (groupedProductions.value) {
+  watch(pending, (value) => {
+    if (!value) {
+      console.log('AsyncData: ', data.value);
+    }
+  });
+
+  onMounted(async () => {
+    if (groupedProducts.value) {
       activeNames.value = [
-        ...Object.keys(groupedProductions.value),
+        ...Object.keys(groupedProducts.value),
         'no-category',
       ];
     }
@@ -145,13 +131,13 @@
     margin-left: auto;
   }
 
-  .productions-container {
+  .products-container {
     display: flex;
     flex-direction: column;
     gap: 40px;
   }
 
-  .production-group {
+  .product-group {
     margin-bottom: 32px;
   }
 
diff --git a/app/pages/search.vue b/app/pages/search.vue
index 959394e..f1390b4 100644
--- a/app/pages/search.vue
+++ b/app/pages/search.vue
@@ -30,17 +30,17 @@
         <el-tab-pane :label="`全部(${resultCount['all']})`" name="all">
           <search-results
             v-model:current-page="currentPage"
-            :hit-items="hits"
+            :search-items="searchItems"
           />
         </el-tab-pane>
         <el-tab-pane
-          :label="`产品(${resultCount['production'] || 0})`"
-          name="production"
+          :label="`产品(${resultCount['product'] || 0})`"
+          name="product"
         >
           <search-results
             v-model:current-page="currentPage"
-            :hit-items="hits"
-            category="production"
+            :search-items="searchItems"
+            category="product"
           />
         </el-tab-pane>
         <el-tab-pane
@@ -49,7 +49,7 @@
         >
           <search-results
             v-model:current-page="currentPage"
-            :hit-items="hits"
+            :search-items="searchItems"
             category="solution"
           />
         </el-tab-pane>
@@ -59,7 +59,7 @@
         >
           <search-results
             v-model:current-page="currentPage"
-            :hit-items="hits"
+            :search-items="searchItems"
             category="question"
           />
         </el-tab-pane>
@@ -69,7 +69,7 @@
         >
           <search-results
             v-model:current-page="currentPage"
-            :hit-items="hits"
+            :search-items="searchItems"
             category="document"
           />
         </el-tab-pane>
@@ -92,8 +92,8 @@
 
   // i18n相关
   const { t } = useI18n();
-  const { getStrapiLocale } = useLocalizations();
-  const strapiLocale = getStrapiLocale();
+  const { getDirectusLocale } = useLocalizations();
+  const directusLocale = getDirectusLocale();
 
   // 路由相关
   const route = useRoute();
@@ -110,40 +110,48 @@
     pending: loading,
     error,
   } = await useAsyncData(
-    () => `search-${route.query.query ?? ''}`,
+    () => `search-${directusLocale}-${route.query.query ?? ''}`,
     async () => {
       const q = String(route.query.query ?? '').trim();
       if (!q) return [];
-      return await search(q, { limit: 12 });
+      return await search(q, { limit: 12 }, directusLocale);
     }
   );
 
-  // 本地化+空Section过滤
+  // 空Section过滤
   const filteredSections = computed(() =>
-    sections.value
-      .map((section) => ({
-        ...section,
-        hits: section.hits.filter(
-          (hit) =>
-            !hit.locale ||
-            String(hit.locale).toLowerCase() === strapiLocale.toLowerCase()
-        ),
-      }))
-      .filter((section) => section.hits.length > 0)
+    sections.value.filter((section) => section.hits.length > 0)
   );
+
+  const typeMap = {
+    products: 'products',
+    solutions: 'solutions',
+    questions: 'questions',
+    product_documents: 'product_documents',
+  } as const;
   // 展平hits
   const hits = computed(() =>
-    filteredSections.value.flatMap((item) =>
-      item.hits.map((content) => ({ content, type: item.indexUid }))
-    )
+    filteredSections.value.flatMap((section) => {
+      const type = typeMap[section.rawIndex as keyof typeof typeMap];
+      if (!type) return [];
+      return section.hits.map((hit) => ({ type, content: hit }));
+    })
   );
 
+  const searchItems = computed(() =>
+    hits.value.map((hit) => {
+      return toSearchItemView(hit.content, hit.type);
+    })
+  );
+
+  console.log(searchItems.value);
+
   // 分类控制
   const activeTab = ref('all');
   const resultCount = computed(() => {
-    const map: Record<string, number> = { all: hits.value.length };
-    for (const hit of hits.value) {
-      map[hit.type] = (map[hit.type] ?? 0) + 1;
+    const map: Record<string, number> = { all: searchItems.value.length };
+    for (const item of searchItems.value) {
+      map[item.type] = (map[item.type] ?? 0) + 1;
     }
     return map;
   });
@@ -177,7 +185,7 @@
     }
 
     try {
-      const results = await search(trimmed, { limit: 12 });
+      const results = await search(trimmed, { limit: 12 }, directusLocale);
       if (requestId === activeRequestId.value) {
         sections.value = results;
       }
@@ -197,12 +205,16 @@
     router.replace(localePath({ path: '/search' }));
   };
 
+  watch(activeTab, () => {
+    currentPage.value = 1; // 重置页码
+  });
+
   watch(
     () => route.query.query,
-    (newQuery) => {
+    async (newQuery) => {
       if (typeof newQuery === 'string' && newQuery.trim()) {
         keyword.value = newQuery;
-        performSearch(newQuery);
+        await performSearch(newQuery);
       } else {
         loading.value = false;
       }
diff --git a/app/pages/solutions/[...slug].vue b/app/pages/solutions/[...slug].vue
index 79ac81a..8b6cb87 100644
--- a/app/pages/solutions/[...slug].vue
+++ b/app/pages/solutions/[...slug].vue
@@ -25,7 +25,7 @@
             <div class="solution-meta">
               <span class="solution-date">
                 CreatedAt:
-                {{ new Date(solution.createdAt).toLocaleDateString() }}
+                {{ new Date(solution.createAt).toLocaleDateString() }}
               </span>
             </div>
           </div>
@@ -42,7 +42,7 @@
           :sub-title="$t('solution-not-found-desc')"
         >
           <template #extra>
-            <el-button type="primary" @click="$router.push('/productions')">
+            <el-button type="primary" @click="$router.push('/solutions')">
               {{ $t('back-to-solutions') }}
             </el-button>
           </template>
@@ -57,23 +57,17 @@
 
 <script setup lang="ts">
   const route = useRoute();
-  const { findOne } = useStrapi();
-  const { getStrapiLocale } = useLocalizations();
-  const strapiLocale = getStrapiLocale();
 
   // 获取路由参数(documentId)
-  const documentId = computed(() => route.params.slug as string);
+  const id = computed(() => route.params.slug as string);
 
-  const { data, pending, error } = useAsyncData(
-    () => `solution-${documentId.value}`,
-    () =>
-      findOne<Solution>('solutions', documentId.value, {
-        populate: '*',
-        locale: strapiLocale,
-      })
-  );
+  const { data, pending, error } = await useSolution(id.value);
 
-  const solution = computed(() => data.value?.data ?? null);
+  console.log('RawData: ', data.value);
+  const process = toSolutionView(data.value);
+  console.log('Processed Solution: ', process);
+
+  const solution = computed(() => toSolutionView(data.value));
 
   watch(error, (value) => {
     if (value) {
diff --git a/app/pages/solutions/index.vue b/app/pages/solutions/index.vue
index 328fe25..341b682 100644
--- a/app/pages/solutions/index.vue
+++ b/app/pages/solutions/index.vue
@@ -21,11 +21,11 @@
           <div class="solution-list">
             <solution-card
               v-for="solution in solutions"
-              :key="solution.documentId"
+              :key="solution.id"
               :title="solution.title"
               :summary="solution.summary || ''"
-              :cover-url="useStrapiMedia(solution?.cover?.url || '')"
-              :document-id="solution.documentId"
+              :cover-url="getImageUrl(solution.cover || '')"
+              :document-id="solution.id.toString()"
             />
           </div>
         </el-tab-pane>
@@ -38,9 +38,9 @@
           <div class="solution-list">
             <solution-card
               v-for="solution in group"
-              :key="solution.documentId"
-              :document-id="solution.documentId"
-              :cover-url="useStrapiMedia(solution?.cover?.url || '')"
+              :key="solution.id"
+              :document-id="solution.id.toString()"
+              :cover-url="getImageUrl(solution.cover || '')"
               :title="solution.title"
               :summary="solution.summary || ''"
             />
@@ -55,31 +55,22 @@
 </template>
 
 <script setup lang="ts">
-  const { find } = useStrapi();
-  const { getStrapiLocale } = useLocalizations();
-  const strapiLocale = getStrapiLocale();
+  const { getImageUrl } = useDirectusImage();
 
-  const { data, pending, error } = useAsyncData('solutions', () =>
-    find<Solution>('solutions', {
-      populate: {
-        cover: {
-          populate: '*',
-        },
-        solution_type: {
-          populate: '*',
-        },
-      },
-      locale: strapiLocale,
-    })
+  const { data, pending, error } = await useSolutionList();
+
+  const solutionsRaw = computed(() => data.value ?? []);
+  const solutions = computed(() =>
+    solutionsRaw.value.map((item) => toSolutionListView(item))
   );
 
   const activeName = ref<string>('all');
 
-  const solutions = computed(() => data.value?.data ?? []);
+  console.log('Processed Data', solutions.value);
 
   // 按类型分组
   const groupedSolutions = computed(() => {
-    const gourps: Record<string, Solution[]> = {};
+    const gourps: Record<string, SolutionListView[]> = {};
     for (const sol of solutions.value) {
       let typeKey = '';
       if (typeof sol.solution_type === 'string') {
@@ -89,7 +80,7 @@
         typeof sol.solution_type === 'object' &&
         'type' in sol.solution_type
       ) {
-        typeKey = sol.solution_type.type || '';
+        typeKey = sol.solution_type || '';
       }
       if (!gourps[typeKey]) gourps[typeKey] = [];
       gourps[typeKey]?.push(sol);
diff --git a/app/pages/support/contact-us.vue b/app/pages/support/contact-us.vue
index 44ad63d..8140b52 100644
--- a/app/pages/support/contact-us.vue
+++ b/app/pages/support/contact-us.vue
@@ -23,7 +23,7 @@
     </div>
 
     <div v-if="!pending" class="page-content">
-      <markdown-renderer :content="content || ''" />
+      <markdown-renderer :content="content.content || ''" />
     </div>
     <div v-else class="loading">
       <el-skeleton :rows="5" animated />
@@ -32,18 +32,9 @@
 </template>
 
 <script setup lang="ts">
-  const { findOne } = useStrapi();
-  const { getStrapiLocale } = useLocalizations();
-  const strapiLocale = getStrapiLocale();
+  const { data, pending, error } = await useContactInfo();
 
-  const { data, pending, error } = useAsyncData('contact-info', () =>
-    findOne<StrapiContactInfo>('contact-info', undefined, {
-      populate: '*',
-      locale: strapiLocale,
-    })
-  );
-
-  const content = computed(() => data.value?.data.content ?? '');
+  const content = computed(() => toContactInfoView(data.value));
 
   watch(error, (value) => {
     if (value) {
diff --git a/app/pages/support/documents.vue b/app/pages/support/documents.vue
index 9a1de99..8d857fa 100644
--- a/app/pages/support/documents.vue
+++ b/app/pages/support/documents.vue
@@ -35,25 +35,25 @@
               clearable
             >
               <el-option
-                v-for="type in productionTypeOptions"
-                :key="type.documentId"
-                :label="type.type"
-                :value="type.documentId"
+                v-for="type in productTypeOptions"
+                :key="type.id"
+                :label="type.name"
+                :value="type.id"
               />
             </el-select>
           </el-col>
           <el-col :span="8">
             <span class="select-label">产品系列</span>
             <el-select
-              v-model="selectedProduction"
+              v-model="selectedProduct"
               placeholder="选择系列产品"
               clearable
             >
               <el-option
-                v-for="production in productionOptions"
-                :key="production.documentId"
-                :label="production.title"
-                :value="production.documentId"
+                v-for="product in productOptions"
+                :key="product.id"
+                :label="product.name"
+                :value="product.id"
               />
             </el-select>
           </el-col>
@@ -78,37 +78,24 @@
 <script setup lang="ts">
   import { Search } from '@element-plus/icons-vue';
 
-  const { find } = useStrapi();
-  const { getStrapiLocale } = useLocalizations();
-  const strapiLocale = getStrapiLocale();
+  const { data, pending, error } = await useDocumentList();
 
-  const { data, pending, error } = useAsyncData('documents', () =>
-    find<ProductionDocument>('production-documents', {
-      populate: ['document', 'related_productions.production_type'],
-      locale: strapiLocale,
-    })
+  const documents = computed(
+    () => data?.value.map((item) => toDocumentListView(item)) ?? []
   );
 
-  // const documents = computed(
-  //   () =>
-  //     data.value?.data.map((item) => ({
-  //       ...item.document,
-  //     })) || []
-  // );
-  const documents = computed(() => data.value?.data ?? []);
-
   const keyword = ref('');
 
-  const selectedType = ref<string | null>(null);
-  const selectedProduction = ref<string | null>(null);
+  const selectedType = ref<number | null>(null);
+  const selectedProduct = ref<number | null>(null);
 
-  const productionTypeOptions = computed(() => {
-    const types: ProductionType[] = [];
-    documents.value.forEach((document: ProductionDocument) => {
-      document.related_productions?.forEach((production: Production) => {
-        const productionType = production?.production_type;
-        if (!types.some((p) => p.documentId === productionType.documentId)) {
-          types.push(productionType);
+  const productTypeOptions = computed(() => {
+    const types: DocumentListProductType[] = [];
+    documents.value.forEach((doc: DocumentListView) => {
+      doc.products?.forEach((product: DocumentListProduct) => {
+        const productType = product.type;
+        if (!types.some((item) => item.id === productType.id)) {
+          types.push(productType);
         }
       });
     });
@@ -116,51 +103,48 @@
     return types;
   });
 
-  const productionOptions = computed(() => {
+  const productOptions = computed(() => {
     if (!selectedType.value) return [];
-    const productions: Production[] = [];
-    documents.value.forEach((document: ProductionDocument) => {
-      document.related_productions.forEach((production: Production) => {
+    const products: DocumentListProduct[] = [];
+
+    documents.value.forEach((doc: DocumentListView) => {
+      doc.products?.forEach((product: DocumentListProduct) => {
         if (
-          production.production_type?.documentId === selectedType.value &&
-          !productions.some((p) => p.documentId === production.documentId)
+          product.type.id === selectedType.value &&
+          !products.some((item) => item.id === product.id)
         ) {
-          productions.push(production);
+          products.push(product);
         }
       });
     });
-    return productions;
+
+    return products;
   });
 
   const filteredDocuments = computed(() =>
-    documents.value
-      .filter((document: ProductionDocument) => {
-        const matchProduction = selectedProduction.value
-          ? document.related_productions?.some(
-              (production: Production) =>
-                production.documentId === selectedProduction.value
+    documents.value.filter((doc: DocumentListView) => {
+      const matchProduct = selectedProduct.value
+        ? doc.products?.some(
+            (product: DocumentListProduct) =>
+              product.id === selectedProduct.value
+          )
+        : selectedType.value
+          ? doc.products?.some(
+              (product: DocumentListProduct) =>
+                product.type?.id === selectedType.value
             )
-          : selectedType.value
-            ? document.related_productions?.some(
-                (production: Production) =>
-                  production.production_type?.documentId === selectedType.value
-              )
-            : true;
-
-        const matchKeyword = keyword.value
-          ? document.document.caption &&
-            document.document.caption.includes(keyword.value)
           : true;
 
-        return matchProduction && matchKeyword;
-      })
-      .map((item) => ({
-        ...item.document,
-      }))
+      const matchKeyword = keyword.value
+        ? doc.title && doc.title.includes(keyword.value)
+        : true;
+
+      return matchProduct && matchKeyword;
+    })
   );
 
   watch(selectedType, () => {
-    selectedProduction.value = null;
+    selectedProduct.value = null;
   });
 
   watch(documents, (value) => {
diff --git a/app/pages/support/faq.vue b/app/pages/support/faq.vue
index bcf33e3..f41226e 100644
--- a/app/pages/support/faq.vue
+++ b/app/pages/support/faq.vue
@@ -36,25 +36,25 @@
               clearable
             >
               <el-option
-                v-for="type in productionTypeOptions"
-                :key="type.documentId"
-                :label="type.type"
-                :value="type.documentId"
+                v-for="type in productTypeOptions"
+                :key="type.id"
+                :label="type.name"
+                :value="type.id"
               />
             </el-select>
           </el-col>
           <el-col :span="8">
             <span class="select-label">产品系列</span>
             <el-select
-              v-model="selectedProduction"
+              v-model="selectedProduct"
               placeholder="选择系列产品"
               clearable
             >
               <el-option
-                v-for="production in productionOptions"
-                :key="production.documentId"
-                :label="production.title"
-                :value="production.documentId"
+                v-for="product in productOptions"
+                :key="product.id"
+                :label="product.name"
+                :value="product.id"
               />
             </el-select>
           </el-col>
@@ -78,68 +78,58 @@
 
 <script setup lang="ts">
   import { Search } from '@element-plus/icons-vue';
-  const { find } = useStrapi();
-  const { getStrapiLocale } = useLocalizations();
-  const strapiLocale = getStrapiLocale();
 
-  const { data, pending, error } = useAsyncData('questions', () =>
-    find<Question>('questions', {
-      populate: {
-        related_productions: {
-          populate: ['production_type'],
-        },
-      },
-      locale: strapiLocale,
-    })
+  const { data, pending, error } = await useQuestionList();
+
+  const questions = computed(
+    () => data.value.map((item) => toQuestionListView(item)) ?? null
   );
 
-  const questions = computed(() => data.value?.data ?? null);
-
   const keyword = ref('');
 
-  const selectedType = ref<string | null>(null);
-  const selectedProduction = ref<string | null>(null);
+  const selectedType = ref<number | null>(null);
+  const selectedProduct = ref<number | null>(null);
 
-  const productionTypeOptions = computed(() => {
-    const types: ProductionType[] = [];
-    questions.value.forEach((q: Question) => {
-      q.related_productions?.forEach((production: Production) => {
-        const productionType = production?.production_type;
-        if (!types.some((p) => p.documentId === productionType.documentId)) {
-          types.push(productionType);
+  const productTypeOptions = computed(() => {
+    const types: QuestionListProductType[] = [];
+    questions.value.forEach((q: QuestionListView) => {
+      q.products.forEach((product: QuestionListProduct) => {
+        const productType = product.type;
+        if (!types.some((p) => p.id === productType.id)) {
+          types.push(productType);
         }
       });
     });
     return types;
   });
 
-  const productionOptions = computed(() => {
+  const productOptions = computed(() => {
     if (!selectedType.value) return [];
-    const productions: Production[] = [];
-    questions.value.forEach((question: Question) => {
-      question.related_productions.forEach((production: Production) => {
+    const products: QuestionListProduct[] = [];
+    questions.value.forEach((q: QuestionListView) => {
+      q.products.forEach((product: QuestionListProduct) => {
         if (
-          production.production_type?.documentId === selectedType.value &&
-          !productions.some((p) => p.documentId === production.documentId)
+          product.type.id === selectedType.value &&
+          !products.some((p) => p.id === product.id)
         ) {
-          productions.push(production);
+          products.push(product);
         }
       });
     });
-    return productions;
+    return products;
   });
 
   const filteredQuestions = computed(() => {
-    return questions.value.filter((question: Question) => {
-      const matchProduction = selectedProduction.value
-        ? question.related_productions?.some(
-            (production: Production) =>
-              production.documentId === selectedProduction.value
+    return questions.value.filter((question: QuestionListView) => {
+      const matchProduct = selectedProduct.value
+        ? question.products?.some(
+            (product: QuestionListProduct) =>
+              product.id === selectedProduct.value
           )
         : selectedType.value
-          ? question.related_productions?.some(
-              (production: Production) =>
-                production.production_type?.documentId === selectedType.value
+          ? question.products?.some(
+              (product: QuestionListProduct) =>
+                product.type.id === selectedType.value
             )
           : true;
 
@@ -148,12 +138,12 @@
           (question.content && question.content.includes(keyword.value))
         : true;
 
-      return matchProduction && matchKeyword;
+      return matchProduct && matchKeyword;
     });
   });
 
   watch(selectedType, () => {
-    selectedProduction.value = null;
+    selectedProduct.value = null;
   });
 
   watch(data, (newVal) => {
diff --git a/app/plugins/directus.ts b/app/plugins/directus.ts
new file mode 100644
index 0000000..a68bc1b
--- /dev/null
+++ b/app/plugins/directus.ts
@@ -0,0 +1,12 @@
+import { createDirectus, rest, staticToken } from '@directus/sdk';
+
+export default defineNuxtPlugin(() => {
+  const config = useRuntimeConfig();
+
+  const directus = createDirectus<Schema>(config.public.directus.url)
+    .with(rest())
+    .with(staticToken(config.public.directus.token || ''));
+  return {
+    provide: { directus },
+  };
+});
diff --git a/app/types/common.ts b/app/types/common.ts
new file mode 100644
index 0000000..3d4e2ce
--- /dev/null
+++ b/app/types/common.ts
@@ -0,0 +1,7 @@
+export type JsonPrimitive = string | number | boolean | null;
+
+export type JsonArray = JsonValue[];
+
+export type JsonObject = { [key: string]: JsonValue };
+
+export type JsonValue = JsonPrimitive | JsonArray | JsonObject;
diff --git a/app/types/directus/index.ts b/app/types/directus/index.ts
new file mode 100644
index 0000000..eb148e7
--- /dev/null
+++ b/app/types/directus/index.ts
@@ -0,0 +1 @@
+export * from './my-schema';
diff --git a/app/types/directus/my-schema.ts b/app/types/directus/my-schema.ts
new file mode 100644
index 0000000..de139c3
--- /dev/null
+++ b/app/types/directus/my-schema.ts
@@ -0,0 +1,842 @@
+export interface CompanyProfile {
+  /** @primaryKey */
+  id: number;
+  translations?: CompanyProfileTranslation[] | null;
+}
+
+export interface CompanyProfileTranslation {
+  /** @primaryKey */
+  id: number;
+  company_profile_id?: CompanyProfile | string | null;
+  languages_code?: Language | string | null;
+  content?: string | null;
+}
+
+export interface ContactInfo {
+  /** @primaryKey */
+  id: number;
+  translations?: ContactInfoTranslation[] | null;
+}
+
+export interface ContactInfoTranslation {
+  /** @primaryKey */
+  id: number;
+  contact_info_id?: ContactInfo | string | null;
+  languages_code?: Language | string | null;
+  content?: string | null;
+}
+
+export interface DocumentsTranslation {
+  /** @primaryKey */
+  id: number;
+  languages_code?: Language | string | null;
+  title?: string | null;
+}
+
+export interface Homepage {
+  /** @primaryKey */
+  id: number;
+  carousel?: HomepageFile[] | string[];
+  recommend_products?: Product[] | string[];
+  recommend_solutions?: Solution[] | string[];
+}
+
+export interface HomepageFile {
+  /** @primaryKey */
+  id: number;
+  homepage_id?: Homepage | string | null;
+  directus_files_id?: DirectusFile | string | null;
+}
+
+export interface Language {
+  /** @primaryKey */
+  code: string;
+  name?: string | null;
+  direction?: 'ltr' | 'rtl' | null;
+}
+
+export interface ProductDocument {
+  /** @primaryKey */
+  id: number;
+  status?: 'published' | 'draft' | 'archived';
+  file?: DirectusFile | string | null;
+  products?: ProductsProductDocument[] | string[];
+  translations?: ProductDocumentsTranslation[] | null;
+}
+
+export interface ProductDocumentsTranslation {
+  /** @primaryKey */
+  id: number;
+  product_documents_id?: ProductDocument | string | null;
+  languages_code?: Language | string | null;
+  title?: string | null;
+}
+
+export interface ProductImage {
+  /** @primaryKey */
+  id: number;
+  image?: DirectusFile | string | null;
+  translations?: ProductImagesTranslation[] | null;
+  products?: ProductsProductImage[] | string[];
+}
+
+export interface ProductImagesTranslation {
+  /** @primaryKey */
+  id: number;
+  product_images_id?: ProductImage | string | null;
+  languages_code?: Language | string | null;
+  caption?: string | null;
+}
+
+export interface ProductSpecGroup {
+  /** @primaryKey */
+  id: number;
+  product?: Product | string | null;
+  sort?: number | null;
+  translations?: ProductSpecGroupsTranslation[] | null;
+  specs?: ProductSpec[] | string[];
+}
+
+export interface ProductSpecGroupsTranslation {
+  /** @primaryKey */
+  id: number;
+  product_spec_groups_id?: ProductSpecGroup | string | null;
+  languages_code?: Language | string | null;
+  name?: string | null;
+}
+
+export interface ProductSpec {
+  /** @primaryKey */
+  id: number;
+  group?: ProductSpecGroup | string | null;
+  sort?: number | null;
+  value?: string | null;
+  translations?: ProductSpecsTranslation[] | null;
+}
+
+export interface ProductSpecsTranslation {
+  /** @primaryKey */
+  id: number;
+  product_specs_id?: ProductSpec | string | null;
+  languages_code?: Language | string | null;
+  key?: string | null;
+}
+
+export interface ProductType {
+  /** @primaryKey */
+  id: number;
+  /** @description 当前产品条目的状态 */
+  status?: 'published' | 'draft' | 'archived';
+  /** @description i18n文本 */
+  translations?: ProductTypesTranslation[] | null;
+}
+
+export interface ProductTypesTranslation {
+  /** @primaryKey */
+  id: number;
+  product_types_id?: ProductType | string | null;
+  languages_code?: Language | string | null;
+  /** @required */
+  name: string;
+}
+
+export interface Product {
+  /** @primaryKey */
+  id: number;
+  /** @description 当前产品条目的状态 */
+  status?: 'published' | 'draft' | 'archived';
+  product_type?: ProductType | string | null;
+  /** @description 在产品列表中显示 */
+  cover?: DirectusFile | string | null;
+  homepage_recommend?: Homepage | string | null;
+  recommend_sort?: number | null;
+  /** @description i18n字段 */
+  translations?: ProductsTranslation[] | null;
+  faqs?: ProductsQuestion[] | string[];
+  documents?: ProductsProductDocument[] | string[];
+  /** @description 在产品详情页中展示 */
+  images?: ProductsProductImage[] | string[];
+  specs?: ProductSpecGroup[] | string[];
+}
+
+export interface ProductsProductDocument {
+  /** @primaryKey */
+  id: number;
+  products_id?: Product | string | null;
+  product_documents_id?: ProductDocument | string | null;
+}
+
+export interface ProductsProductImage {
+  /** @primaryKey */
+  id: number;
+  products_id?: Product | string | null;
+  product_images_id?: ProductImage | string | null;
+  sort?: number | null;
+}
+
+export interface ProductsQuestion {
+  /** @primaryKey */
+  id: number;
+  products_id?: Product | string | null;
+  questions_id?: Question | string | null;
+  sort?: number | null;
+}
+
+export interface ProductsTranslation {
+  /** @primaryKey */
+  id: number;
+  products_id?: Product | string | null;
+  languages_code?: Language | string | null;
+  /** @required */
+  name: string;
+  summary?: string | null;
+  description?: string | null;
+}
+
+export interface Question {
+  /** @primaryKey */
+  id: number;
+  status?: 'published' | 'draft' | 'archived';
+  /** @description i18n字段 */
+  translations?: QuestionsTranslation[] | null;
+  products?: ProductsQuestion[] | string[];
+}
+
+export interface QuestionsTranslation {
+  /** @primaryKey */
+  id: number;
+  questions_id?: Question | string | null;
+  languages_code?: Language | string | null;
+  /** @required */
+  title: string;
+  content?: string | null;
+}
+
+export interface SolutionType {
+  /** @primaryKey */
+  id: number;
+  status?: 'published' | 'draft' | 'archived';
+  /** @description i18n字段 */
+  translations?: SolutionTypesTranslation[] | null;
+}
+
+export interface SolutionTypesTranslation {
+  /** @primaryKey */
+  id: number;
+  solution_types_id?: SolutionType | string | null;
+  languages_code?: Language | string | null;
+  name?: string | null;
+}
+
+export interface Solution {
+  /** @primaryKey */
+  id: number;
+  status?: 'published' | 'draft' | 'archived';
+  type?: SolutionType | string | null;
+  cover?: DirectusFile | string | null;
+  homepage_recommend?: Homepage | string | null;
+  recommend_sort?: number | null;
+  /** @description 条目创建时自动生成 */
+  create_at?: string | null;
+  translations?: SolutionsTranslation[] | null;
+}
+
+export interface SolutionsTranslation {
+  /** @primaryKey */
+  id: number;
+  solutions_id?: Solution | string | null;
+  languages_code?: Language | string | null;
+  title?: string | null;
+  summary?: string | null;
+  content?: string | null;
+}
+
+export interface DirectusAccess {
+  /** @primaryKey */
+  id: string;
+  role?: DirectusRole | string | null;
+  user?: DirectusUser | string | null;
+  policy?: DirectusPolicy | string;
+  sort?: number | null;
+}
+
+export interface DirectusActivity {
+  /** @primaryKey */
+  id: number;
+  action?: string;
+  user?: DirectusUser | string | null;
+  timestamp?: string;
+  ip?: string | null;
+  user_agent?: string | null;
+  collection?: string;
+  item?: string;
+  origin?: string | null;
+  revisions?: DirectusRevision[] | string[];
+}
+
+export interface DirectusCollection {
+  /** @primaryKey */
+  collection: string;
+  icon?: string | null;
+  note?: string | null;
+  display_template?: string | null;
+  hidden?: boolean;
+  singleton?: boolean;
+  translations?: Array<{
+    language: string;
+    translation: string;
+    singular: string;
+    plural: string;
+  }> | null;
+  archive_field?: string | null;
+  archive_app_filter?: boolean;
+  archive_value?: string | null;
+  unarchive_value?: string | null;
+  sort_field?: string | null;
+  accountability?: 'all' | 'activity' | null | null;
+  color?: string | null;
+  item_duplication_fields?: 'json' | null;
+  sort?: number | null;
+  group?: DirectusCollection | string | null;
+  collapse?: string;
+  preview_url?: string | null;
+  versioning?: boolean;
+}
+
+export interface DirectusComment {
+  /** @primaryKey */
+  id: string;
+  collection?: DirectusCollection | string;
+  item?: string;
+  comment?: string;
+  date_created?: string | null;
+  date_updated?: string | null;
+  user_created?: DirectusUser | string | null;
+  user_updated?: DirectusUser | string | null;
+}
+
+export interface DirectusField {
+  /** @primaryKey */
+  id: number;
+  collection?: DirectusCollection | string;
+  field?: string;
+  special?: string[] | null;
+  interface?: string | null;
+  options?: 'json' | null;
+  display?: string | null;
+  display_options?: 'json' | null;
+  readonly?: boolean;
+  hidden?: boolean;
+  sort?: number | null;
+  width?: string | null;
+  translations?: 'json' | null;
+  note?: string | null;
+  conditions?: 'json' | null;
+  required?: boolean | null;
+  group?: DirectusField | string | null;
+  validation?: 'json' | null;
+  validation_message?: string | null;
+}
+
+export interface DirectusFile {
+  /** @primaryKey */
+  id: string;
+  storage?: string;
+  filename_disk?: string | null;
+  filename_download?: string;
+  title?: string | null;
+  type?: string | null;
+  folder?: DirectusFolder | string | null;
+  uploaded_by?: DirectusUser | string | null;
+  created_on?: string;
+  modified_by?: DirectusUser | string | null;
+  modified_on?: string;
+  charset?: string | null;
+  filesize?: number | null;
+  width?: number | null;
+  height?: number | null;
+  duration?: number | null;
+  embed?: string | null;
+  description?: string | null;
+  location?: string | null;
+  tags?: string[] | null;
+  metadata?: 'json' | null;
+  focal_point_x?: number | null;
+  focal_point_y?: number | null;
+  tus_id?: string | null;
+  tus_data?: 'json' | null;
+  uploaded_on?: string | null;
+}
+
+export interface DirectusFolder {
+  /** @primaryKey */
+  id: string;
+  name?: string;
+  parent?: DirectusFolder | string | null;
+}
+
+export interface DirectusMigration {
+  /** @primaryKey */
+  version: string;
+  name?: string;
+  timestamp?: string | null;
+}
+
+export interface DirectusPermission {
+  /** @primaryKey */
+  id: number;
+  collection?: string;
+  action?: string;
+  permissions?: 'json' | null;
+  validation?: 'json' | null;
+  presets?: 'json' | null;
+  fields?: string[] | null;
+  policy?: DirectusPolicy | string;
+}
+
+export interface DirectusPolicy {
+  /** @primaryKey */
+  id: string;
+  /** @required */
+  name: string;
+  icon?: string;
+  description?: string | null;
+  ip_access?: string[] | null;
+  enforce_tfa?: boolean;
+  admin_access?: boolean;
+  app_access?: boolean;
+  permissions?: DirectusPermission[] | string[];
+  users?: DirectusAccess[] | string[];
+  roles?: DirectusAccess[] | string[];
+}
+
+export interface DirectusPreset {
+  /** @primaryKey */
+  id: number;
+  bookmark?: string | null;
+  user?: DirectusUser | string | null;
+  role?: DirectusRole | string | null;
+  collection?: string | null;
+  search?: string | null;
+  layout?: string | null;
+  layout_query?: 'json' | null;
+  layout_options?: 'json' | null;
+  refresh_interval?: number | null;
+  filter?: 'json' | null;
+  icon?: string | null;
+  color?: string | null;
+}
+
+export interface DirectusRelation {
+  /** @primaryKey */
+  id: number;
+  many_collection?: string;
+  many_field?: string;
+  one_collection?: string | null;
+  one_field?: string | null;
+  one_collection_field?: string | null;
+  one_allowed_collections?: string[] | null;
+  junction_field?: string | null;
+  sort_field?: string | null;
+  one_deselect_action?: string;
+}
+
+export interface DirectusRevision {
+  /** @primaryKey */
+  id: number;
+  activity?: DirectusActivity | string;
+  collection?: string;
+  item?: string;
+  data?: 'json' | null;
+  delta?: 'json' | null;
+  parent?: DirectusRevision | string | null;
+  version?: DirectusVersion | string | null;
+}
+
+export interface DirectusRole {
+  /** @primaryKey */
+  id: string;
+  /** @required */
+  name: string;
+  icon?: string;
+  description?: string | null;
+  parent?: DirectusRole | string | null;
+  children?: DirectusRole[] | string[];
+  policies?: DirectusAccess[] | string[];
+  users?: DirectusUser[] | string[];
+}
+
+export interface DirectusSession {
+  /** @primaryKey */
+  token: string;
+  user?: DirectusUser | string | null;
+  expires?: string;
+  ip?: string | null;
+  user_agent?: string | null;
+  share?: DirectusShare | string | null;
+  origin?: string | null;
+  next_token?: string | null;
+}
+
+export interface DirectusSettings {
+  /** @primaryKey */
+  id: number;
+  project_name?: string;
+  project_url?: string | null;
+  project_color?: string;
+  project_logo?: DirectusFile | string | null;
+  public_foreground?: DirectusFile | string | null;
+  public_background?: DirectusFile | string | null;
+  public_note?: string | null;
+  auth_login_attempts?: number | null;
+  auth_password_policy?:
+    | null
+    | `/^.{8,}$/`
+    | `/(?=^.{8,}$)(?=.*\\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*()_+}{';'?>.<,])(?!.*\\s).*$/`
+    | null;
+  storage_asset_transform?: 'all' | 'none' | 'presets' | null;
+  storage_asset_presets?: Array<{
+    key: string;
+    fit: 'contain' | 'cover' | 'inside' | 'outside';
+    width: number;
+    height: number;
+    quality: number;
+    withoutEnlargement: boolean;
+    format: 'auto' | 'jpeg' | 'png' | 'webp' | 'tiff' | 'avif';
+    transforms: 'json';
+  }> | null;
+  custom_css?: string | null;
+  storage_default_folder?: DirectusFolder | string | null;
+  basemaps?: Array<{
+    name: string;
+    type: 'raster' | 'tile' | 'style';
+    url: string;
+    tileSize: number;
+    attribution: string;
+  }> | null;
+  mapbox_key?: string | null;
+  module_bar?: 'json' | null;
+  project_descriptor?: string | null;
+  default_language?: string;
+  custom_aspect_ratios?: Array<{ text: string; value: number }> | null;
+  public_favicon?: DirectusFile | string | null;
+  default_appearance?: 'auto' | 'light' | 'dark';
+  default_theme_light?: string | null;
+  theme_light_overrides?: 'json' | null;
+  default_theme_dark?: string | null;
+  theme_dark_overrides?: 'json' | null;
+  report_error_url?: string | null;
+  report_bug_url?: string | null;
+  report_feature_url?: string | null;
+  public_registration?: boolean;
+  public_registration_verify_email?: boolean;
+  public_registration_role?: DirectusRole | string | null;
+  public_registration_email_filter?: 'json' | null;
+  visual_editor_urls?: Array<{ url: string }> | null;
+  accepted_terms?: boolean | null;
+  project_id?: string | null;
+  mcp_enabled?: boolean;
+  mcp_allow_deletes?: boolean;
+  mcp_prompts_collection?: string | null;
+  mcp_system_prompt_enabled?: boolean;
+  mcp_system_prompt?: string | null;
+}
+
+export interface DirectusUser {
+  /** @primaryKey */
+  id: string;
+  first_name?: string | null;
+  last_name?: string | null;
+  email?: string | null;
+  password?: string | null;
+  location?: string | null;
+  title?: string | null;
+  description?: string | null;
+  tags?: string[] | null;
+  avatar?: DirectusFile | string | null;
+  language?: string | null;
+  tfa_secret?: string | null;
+  status?:
+    | 'draft'
+    | 'invited'
+    | 'unverified'
+    | 'active'
+    | 'suspended'
+    | 'archived';
+  role?: DirectusRole | string | null;
+  token?: string | null;
+  last_access?: string | null;
+  last_page?: string | null;
+  provider?: string;
+  external_identifier?: string | null;
+  auth_data?: 'json' | null;
+  email_notifications?: boolean | null;
+  appearance?: null | 'auto' | 'light' | 'dark' | null;
+  theme_dark?: string | null;
+  theme_light?: string | null;
+  theme_light_overrides?: 'json' | null;
+  theme_dark_overrides?: 'json' | null;
+  text_direction?: 'auto' | 'ltr' | 'rtl';
+  policies?: DirectusAccess[] | string[];
+}
+
+export interface DirectusWebhook {
+  /** @primaryKey */
+  id: number;
+  name?: string;
+  method?: null;
+  url?: string;
+  status?: 'active' | 'inactive';
+  data?: boolean;
+  actions?: 'create' | 'update' | 'delete';
+  collections?: string[];
+  headers?: Array<{ header: string; value: string }> | null;
+  was_active_before_deprecation?: boolean;
+  migrated_flow?: DirectusFlow | string | null;
+}
+
+export interface DirectusDashboard {
+  /** @primaryKey */
+  id: string;
+  name?: string;
+  icon?: string;
+  note?: string | null;
+  date_created?: string | null;
+  user_created?: DirectusUser | string | null;
+  color?: string | null;
+  panels?: DirectusPanel[] | string[];
+}
+
+export interface DirectusPanel {
+  /** @primaryKey */
+  id: string;
+  dashboard?: DirectusDashboard | string;
+  name?: string | null;
+  icon?: string | null;
+  color?: string | null;
+  show_header?: boolean;
+  note?: string | null;
+  type?: string;
+  position_x?: number;
+  position_y?: number;
+  width?: number;
+  height?: number;
+  options?: 'json' | null;
+  date_created?: string | null;
+  user_created?: DirectusUser | string | null;
+}
+
+export interface DirectusNotification {
+  /** @primaryKey */
+  id: number;
+  timestamp?: string | null;
+  status?: string | null;
+  recipient?: DirectusUser | string;
+  sender?: DirectusUser | string | null;
+  subject?: string;
+  message?: string | null;
+  collection?: string | null;
+  item?: string | null;
+}
+
+export interface DirectusShare {
+  /** @primaryKey */
+  id: string;
+  name?: string | null;
+  collection?: DirectusCollection | string;
+  item?: string;
+  role?: DirectusRole | string | null;
+  password?: string | null;
+  user_created?: DirectusUser | string | null;
+  date_created?: string | null;
+  date_start?: string | null;
+  date_end?: string | null;
+  times_used?: number | null;
+  max_uses?: number | null;
+}
+
+export interface DirectusFlow {
+  /** @primaryKey */
+  id: string;
+  name?: string;
+  icon?: string | null;
+  color?: string | null;
+  description?: string | null;
+  status?: string;
+  trigger?: string | null;
+  accountability?: string | null;
+  options?: 'json' | null;
+  operation?: DirectusOperation | string | null;
+  date_created?: string | null;
+  user_created?: DirectusUser | string | null;
+  operations?: DirectusOperation[] | string[];
+}
+
+export interface DirectusOperation {
+  /** @primaryKey */
+  id: string;
+  name?: string | null;
+  key?: string;
+  type?: string;
+  position_x?: number;
+  position_y?: number;
+  options?: 'json' | null;
+  resolve?: DirectusOperation | string | null;
+  reject?: DirectusOperation | string | null;
+  flow?: DirectusFlow | string;
+  date_created?: string | null;
+  user_created?: DirectusUser | string | null;
+}
+
+export interface DirectusTranslation {
+  /** @primaryKey */
+  id: string;
+  /** @required */
+  language: string;
+  /** @required */
+  key: string;
+  /** @required */
+  value: string;
+}
+
+export interface DirectusVersion {
+  /** @primaryKey */
+  id: string;
+  key?: string;
+  name?: string | null;
+  collection?: DirectusCollection | string;
+  item?: string;
+  hash?: string | null;
+  date_created?: string | null;
+  date_updated?: string | null;
+  user_created?: DirectusUser | string | null;
+  user_updated?: DirectusUser | string | null;
+  delta?: 'json' | null;
+}
+
+export interface DirectusExtension {
+  enabled?: boolean;
+  /** @primaryKey */
+  id: string;
+  folder?: string;
+  source?: string;
+  bundle?: string | null;
+}
+
+export interface Schema {
+  company_profile: CompanyProfile;
+  company_profile_translations: CompanyProfileTranslation[];
+  contact_info: ContactInfo;
+  contact_info_translations: ContactInfoTranslation[];
+  documents_translations: DocumentsTranslation[];
+  homepage: Homepage;
+  homepage_files: HomepageFile[];
+  languages: Language[];
+  product_documents: ProductDocument[];
+  product_documents_translations: ProductDocumentsTranslation[];
+  product_images: ProductImage[];
+  product_images_translations: ProductImagesTranslation[];
+  product_spec_groups: ProductSpecGroup[];
+  product_spec_groups_translations: ProductSpecGroupsTranslation[];
+  product_specs: ProductSpec[];
+  product_specs_translations: ProductSpecsTranslation[];
+  product_types: ProductType[];
+  product_types_translations: ProductTypesTranslation[];
+  products: Product[];
+  products_product_documents: ProductsProductDocument[];
+  products_product_images: ProductsProductImage[];
+  products_questions: ProductsQuestion[];
+  products_translations: ProductsTranslation[];
+  questions: Question[];
+  questions_translations: QuestionsTranslation[];
+  solution_types: SolutionType[];
+  solution_types_translations: SolutionTypesTranslation[];
+  solutions: Solution[];
+  solutions_translations: SolutionsTranslation[];
+  directus_access: DirectusAccess[];
+  directus_activity: DirectusActivity[];
+  directus_collections: DirectusCollection[];
+  directus_comments: DirectusComment[];
+  directus_fields: DirectusField[];
+  directus_files: DirectusFile[];
+  directus_folders: DirectusFolder[];
+  directus_migrations: DirectusMigration[];
+  directus_permissions: DirectusPermission[];
+  directus_policies: DirectusPolicy[];
+  directus_presets: DirectusPreset[];
+  directus_relations: DirectusRelation[];
+  directus_revisions: DirectusRevision[];
+  directus_roles: DirectusRole[];
+  directus_sessions: DirectusSession[];
+  directus_settings: DirectusSettings;
+  directus_users: DirectusUser[];
+  directus_webhooks: DirectusWebhook[];
+  directus_dashboards: DirectusDashboard[];
+  directus_panels: DirectusPanel[];
+  directus_notifications: DirectusNotification[];
+  directus_shares: DirectusShare[];
+  directus_flows: DirectusFlow[];
+  directus_operations: DirectusOperation[];
+  directus_translations: DirectusTranslation[];
+  directus_versions: DirectusVersion[];
+  directus_extensions: DirectusExtension[];
+}
+
+export enum CollectionNames {
+  company_profile = 'company_profile',
+  company_profile_translations = 'company_profile_translations',
+  contact_info = 'contact_info',
+  contact_info_translations = 'contact_info_translations',
+  documents_translations = 'documents_translations',
+  homepage = 'homepage',
+  homepage_files = 'homepage_files',
+  languages = 'languages',
+  product_documents = 'product_documents',
+  product_documents_translations = 'product_documents_translations',
+  product_images = 'product_images',
+  product_images_translations = 'product_images_translations',
+  product_spec_groups = 'product_spec_groups',
+  product_spec_groups_translations = 'product_spec_groups_translations',
+  product_specs = 'product_specs',
+  product_specs_translations = 'product_specs_translations',
+  product_types = 'product_types',
+  product_types_translations = 'product_types_translations',
+  products = 'products',
+  products_product_documents = 'products_product_documents',
+  products_product_images = 'products_product_images',
+  products_questions = 'products_questions',
+  products_translations = 'products_translations',
+  questions = 'questions',
+  questions_translations = 'questions_translations',
+  solution_types = 'solution_types',
+  solution_types_translations = 'solution_types_translations',
+  solutions = 'solutions',
+  solutions_translations = 'solutions_translations',
+  directus_access = 'directus_access',
+  directus_activity = 'directus_activity',
+  directus_collections = 'directus_collections',
+  directus_comments = 'directus_comments',
+  directus_fields = 'directus_fields',
+  directus_files = 'directus_files',
+  directus_folders = 'directus_folders',
+  directus_migrations = 'directus_migrations',
+  directus_permissions = 'directus_permissions',
+  directus_policies = 'directus_policies',
+  directus_presets = 'directus_presets',
+  directus_relations = 'directus_relations',
+  directus_revisions = 'directus_revisions',
+  directus_roles = 'directus_roles',
+  directus_sessions = 'directus_sessions',
+  directus_settings = 'directus_settings',
+  directus_users = 'directus_users',
+  directus_webhooks = 'directus_webhooks',
+  directus_dashboards = 'directus_dashboards',
+  directus_panels = 'directus_panels',
+  directus_notifications = 'directus_notifications',
+  directus_shares = 'directus_shares',
+  directus_flows = 'directus_flows',
+  directus_operations = 'directus_operations',
+  directus_translations = 'directus_translations',
+  directus_versions = 'directus_versions',
+  directus_extensions = 'directus_extensions',
+}
diff --git a/app/types/meilisearch/index.ts b/app/types/meilisearch/index.ts
new file mode 100644
index 0000000..c48e4bc
--- /dev/null
+++ b/app/types/meilisearch/index.ts
@@ -0,0 +1,2 @@
+export * from './meili-index';
+export * from './search-result';
diff --git a/app/types/meilisearch/meili-index.ts b/app/types/meilisearch/meili-index.ts
new file mode 100644
index 0000000..61f7b94
--- /dev/null
+++ b/app/types/meilisearch/meili-index.ts
@@ -0,0 +1,88 @@
+/**
+ * 产品索引文档结构
+ */
+export interface MeiliProductIndex {
+  /** 唯一标识符 **/
+  id: number;
+
+  /** 产品名称 **/
+  name: string;
+
+  /** 产品简介 **/
+  summary: string;
+
+  /** 产品详情 **/
+  description: string;
+
+  /** 产品类型 **/
+  type: string;
+}
+
+/**
+ * 解决方案索引文档结构
+ */
+export interface MeiliSolutionIndex {
+  /** 唯一标识符 **/
+  id: number;
+
+  /** 解决方案标题 **/
+  title: string;
+
+  /** 解决方案摘要 **/
+  summary: string;
+
+  /** 解决方案内容 **/
+  content: string;
+
+  /** 解决方案类型 **/
+  type: string;
+}
+
+/**
+ * 相关问题索引文档结构
+ */
+export interface MeiliQuestionIndex {
+  /** 唯一标识符 **/
+  id: number;
+
+  /** 问题标题 **/
+  title: string;
+
+  /** 问题内容 **/
+  content: string;
+
+  /** 相关产品 **/
+  products: string[];
+
+  /** 相关产品类型 **/
+  product_types: string[];
+}
+
+/**
+ * 相关文档索引文档结构
+ */
+export interface MeiliProductDocumentIndex {
+  /** 唯一标识符 **/
+  id: number;
+
+  /** 文档标题 **/
+  title: string;
+
+  /** 相关产品 **/
+  products: string[];
+
+  /** 相关产品类型 **/
+  product_types: string[];
+}
+
+/**
+ * 索引名与类型映射
+ */
+export interface MeiliIndexMap {
+  products: MeiliProductIndex;
+  solutions: MeiliSolutionIndex;
+  questions: MeiliQuestionIndex;
+  product_documents: MeiliProductDocumentIndex;
+}
+
+export type MeiliSearchItemType = keyof MeiliIndexMap;
diff --git a/app/types/meilisearch/search-result.ts b/app/types/meilisearch/search-result.ts
new file mode 100644
index 0000000..a5da52d
--- /dev/null
+++ b/app/types/meilisearch/search-result.ts
@@ -0,0 +1,42 @@
+import type { SearchResponse } from 'meilisearch';
+
+/**
+ * 原始搜索分段结果
+ * @template T 索引类型
+ */
+export interface RawSearchSection<T> {
+  /** 索引名 **/
+  indexUid: string;
+
+  /** 响应数据 **/
+  response: SearchResponse<T>;
+}
+
+/**
+ * 搜索结果
+ */
+export interface SearchHit extends Record<string, unknown> {
+  objectID?: string | number;
+}
+
+/**
+ * 搜索分段结果
+ * @template T 索引类型
+ */
+export interface SearchSection<T> {
+  /** 索引名 **/
+  indexUid: string;
+
+  /** 原始索引名 **/
+  rawIndex: MeiliSearchItemType;
+
+  /** 命中条目 **/
+  hits: T[];
+  // hits: SearchHit[];
+
+  /** 条目总数 **/
+  estimatedTotalHits: number;
+
+  /** 处理时间 **/
+  processingTimeMs: number;
+}
diff --git a/app/types/strapi/common.ts b/app/types/strapi/common.ts
deleted file mode 100644
index 78f30c0..0000000
--- a/app/types/strapi/common.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-export interface StrapiEntity {
-  id: number;
-  documentId: string;
-  createdAt: string;
-  updatedAt: string;
-  publishedAt: string;
-  locale: string;
-}
-
-export interface StrapiMedia {
-  id: number;
-  url: string;
-  ext: string;
-  name: string;
-  size: number;
-  alternativeText: string;
-  caption: string;
-}
-
-export interface StrapiImageFormat {
-  url: string;
-  width: number;
-  height: number;
-  size: number;
-}
-
-export interface StrapiImage extends StrapiMedia {
-  width: number;
-  height: number;
-  formats: {
-    small: StrapiImageFormat;
-    medium: StrapiImageFormat;
-    thumbnail: StrapiImageFormat;
-  };
-}
-
-export interface StrapiResponse<T> {
-  data: T;
-  meta: {
-    pagination: {
-      page: number;
-      pageSize: number;
-      pageCount: number;
-      total: number;
-    };
-  };
-}
-
-export type StrapiRelation<T, K extends keyof T = never> = Omit<
-  T,
-  K | keyof StrapiEntity
-> &
-  StrapiEntity;
diff --git a/app/types/strapi/index.ts b/app/types/strapi/index.ts
deleted file mode 100644
index cbbf316..0000000
--- a/app/types/strapi/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export * from './common';
-export * from './production';
-export * from './singleTypes';
-export * from './solution';
-export * from './question';
diff --git a/app/types/strapi/production.ts b/app/types/strapi/production.ts
deleted file mode 100644
index b14afb3..0000000
--- a/app/types/strapi/production.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import type {
-  StrapiEntity,
-  StrapiImage,
-  StrapiMedia,
-  StrapiRelation,
-} from './common';
-
-export interface ProductionType extends StrapiEntity {
-  type: string;
-}
-
-export interface ProductionSpecItem {
-  label: string;
-  value: string;
-}
-
-export interface ProductionSpecGroup {
-  title: string;
-  items: ProductionSpecItem[];
-}
-
-export interface Production extends StrapiEntity {
-  title: string;
-  summary: string;
-  production_type: ProductionType;
-  cover: StrapiImage;
-  production_images: StrapiImage[];
-  production_details: string;
-  production_specs: ProductionSpecGroup[];
-  production_documents: StrapiRelation<
-    ProductionDocument,
-    'related_productions'
-  >[];
-  questions: StrapiRelation<Question, 'related_productions'>[];
-  show_in_production_list: boolean;
-}
-
-export interface ProductionDocument extends StrapiEntity {
-  document: StrapiMedia;
-  related_productions: StrapiRelation<Production, 'production_documents'>[];
-}
diff --git a/app/types/strapi/question.ts b/app/types/strapi/question.ts
deleted file mode 100644
index 1014eeb..0000000
--- a/app/types/strapi/question.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export interface Question extends StrapiEntity {
-  title: string;
-  content: string;
-  related_productions: StrapiRelation<Production, 'questions'>[];
-}
diff --git a/app/types/strapi/singleTypes.ts b/app/types/strapi/singleTypes.ts
deleted file mode 100644
index a7441be..0000000
--- a/app/types/strapi/singleTypes.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-export interface StrapiCompanyProfile extends StrapiEntity {
-  content: string;
-}
-
-export interface StrapiContactInfo extends StrapiEntity {
-  content: string;
-}
-
-export interface StrapiHomepage extends StrapiEntity {
-  carousel: StrapiImage[];
-  recommend_productions: StrapiRelation<Production>[];
-  recommend_solutions: StrapiRelation<Solution>[];
-}
diff --git a/app/types/strapi/solution.ts b/app/types/strapi/solution.ts
deleted file mode 100644
index b03f10a..0000000
--- a/app/types/strapi/solution.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import type { StrapiEntity, StrapiImage } from './common';
-
-export interface SolutionType extends StrapiEntity {
-  type: string;
-}
-
-export interface Solution extends StrapiEntity {
-  title: string;
-  summary: string;
-  cover: StrapiImage;
-  solution_type: SolutionType;
-  content: string;
-}
diff --git a/app/utils/file.ts b/app/utils/file.ts
index a79aad5..f21e33a 100644
--- a/app/utils/file.ts
+++ b/app/utils/file.ts
@@ -1,12 +1,19 @@
-export function formatFileSize(sizeInKB: number): string {
-  if (sizeInKB < 1024) {
+export function formatFileSize(sizeInBytes: number): string {
+  if (sizeInBytes < 1024) {
+    return `${sizeInBytes.toFixed(2)} B`;
+  } else if (sizeInBytes < 1024 * 1024) {
+    const sizeInKB = sizeInBytes / 1024;
     return `${sizeInKB.toFixed(2)} KB`;
   } else {
-    const sizeInMB = sizeInKB / 1024;
+    const sizeInMB = sizeInBytes / 1024 / 1024;
     return `${sizeInMB.toFixed(2)} MB`;
   }
 }
 
+export function getFileExtension(filename: string): string {
+  return filename.split('.').pop() || '';
+}
+
 export function formatFileExtension(ext: string): string {
   return ext.startsWith('.') ? ext.slice(1).toUpperCase() : ext.toUpperCase();
 }
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index cfd549c..0aa249b 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -12,7 +12,7 @@
     "no-query": "Enter a keyword to start searching.",
     "untitled": "Untitled",
     "sections": {
-      "production": "Products",
+      "product": "Products",
       "solution": "Solutions",
       "support": "Support",
       "default": "Other"
@@ -21,14 +21,14 @@
   "company-name": "Jinshen Machinary Manufacturing Co., Ltd.",
   "company-description": "We specialize in manufacturing a range of paper tube and can equipment, integrating design, manufacturing, sales, and service.",
   "learn-more": "Learn More",
-  "productions-desc": "We provide high-quality product solutions to meet various business needs.",
+  "products-desc": "We provide high-quality product solutions to meet various business needs.",
   "solutions-desc": "Providing customized technology solutions for enterprises to accelerate digital transformation.",
   "support-desc": "24/7 professional technical support to ensure stable operation of your business.",
   "quick-links": "Quick Links",
   "utilities": "Utilities",
   "navigation": {
     "home": "Home",
-    "productions": "Productions",
+    "products": "Products",
     "solutions": "Solutions",
     "support": "Support",
     "about-us": "About Us",
@@ -50,13 +50,13 @@
   "product-details": "Product Details",
   "product-not-found": "Product Not Found",
   "product-not-found-desc": "Sorry, the product you are looking for does not exist or has been removed.",
-  "back-to-productions": "Back to Products",
+  "back-to-products": "Back to Products",
   "solution-not-found": "Solution Not Found",
   "solution-not-found-desc": "Sorry, the solution you are lokking for does not exist or has been removed.",
   "back-to-solutions": "Back to Solutions",
   "no-content-available": "No detailed information available",
   "loading": "Loading...",
-  "our-productions": "Our Productions",
+  "our-products": "Our Products",
   "learn-our-solutions": "Learn Our Solutions",
   "all": "All"
 }
diff --git a/i18n/locales/zh.json b/i18n/locales/zh.json
index cd59a96..4ab70e0 100644
--- a/i18n/locales/zh.json
+++ b/i18n/locales/zh.json
@@ -12,7 +12,7 @@
     "no-query": "请输入关键字开始搜索。",
     "untitled": "未命名条目",
     "sections": {
-      "production": "产品",
+      "product": "产品",
       "solution": "解决方案",
       "support": "服务支持",
       "default": "其他内容"
@@ -21,14 +21,14 @@
   "company-name": "金申机械制造有限公司",
   "company-description": "专业生产一系列纸管、纸罐设备，集设计、制造、销售、服务于一体。",
   "learn-more": "了解更多",
-  "productions-desc": "我们提供高质量的产品解决方案，满足各种业务需求。",
+  "products-desc": "我们提供高质量的产品解决方案，满足各种业务需求。",
   "solutions-desc": "为企业提供定制化的技术解决方案，助力数字化转型。",
   "support-desc": "7x24小时专业技术支持，确保您的业务稳定运行。",
   "quick-links": "快速链接",
   "utilities": "实用工具",
   "navigation": {
     "home": "主页",
-    "productions": "产品中心",
+    "products": "产品中心",
     "solutions": "解决方案",
     "support": "服务支持",
     "about-us": "关于我们",
@@ -50,13 +50,13 @@
   "product-details": "产品详情",
   "product-not-found": "产品未找到",
   "product-not-found-desc": "抱歉，您访问的产品不存在或已被删除。",
-  "back-to-productions": "返回产品列表",
+  "back-to-products": "返回产品列表",
   "solution-not-found": "解决方案未找到",
   "solution-not-found-desc": "抱歉，您访问的解决方案不存在或已被删除",
   "back-to-solutions": "返回解决方案列表",
   "no-content-available": "暂无详细信息",
   "loading": "加载中...",
-  "our-productions": "我们的产品",
+  "our-products": "我们的产品",
   "learn-our-solutions": "了解我们的解决方案",
   "all": "全部"
 }
diff --git a/nuxt.config.ts b/nuxt.config.ts
index f11a1bc..680ffcb 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -27,16 +27,11 @@ export default defineNuxtConfig({
           ? typeof process.env.MEILI_SEARCH_INDEXES === 'string'
             ? process.env.MEILI_SEARCH_INDEXES.split(',').map((i) => i.trim())
             : process.env.MEILI_SEARCH_INDEXES
-          : ['production', 'solution'],
+          : ['products', 'solutions', 'questions', 'product_documents'],
       },
-      strapi: {
-        url: process.env.STRAPI_URL || 'http://localhost:1337',
-        token: process.env.STRAPI_TOKEN || undefined,
-        prefix: '/api',
-        admin: '/admin',
-        version: 'v5',
-        cookie: {},
-        cookieName: 'strapi_jwt',
+      directus: {
+        url: process.env.DIRECTUS_URL || 'http://localhost:8055',
+        token: process.env.DIRECTUS_TOKEN || undefined,
       },
     },
   },
@@ -48,8 +43,8 @@ export default defineNuxtConfig({
   typescript: {
     tsConfig: {
       compilerOptions: {
-        noUnUsedLocals: false,
-        noUnUsedParameters: false,
+        noUnusedLocals: false,
+        noUnusedParameters: false,
         strict: false,
       },
     },
@@ -114,7 +109,7 @@ export default defineNuxtConfig({
   },
 
   imports: {
-    dirs: ['types/**'],
+    dirs: ['types/**', 'models/**'],
   },
 
   modules: [
@@ -128,6 +123,5 @@ export default defineNuxtConfig({
     '@unocss/nuxt',
     '@element-plus/nuxt',
     '@nuxtjs/i18n',
-    '@nuxtjs/strapi',
   ],
 });
diff --git a/package.json b/package.json
index 12d5ce2..e1a3fed 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "prepare": "husky"
   },
   "dependencies": {
+    "@directus/sdk": "^20.1.0",
     "@mdi/font": "^7.4.47",
     "@nuxt/eslint": "1.8.0",
     "@nuxt/fonts": "0.11.4",
@@ -18,7 +19,6 @@
     "@nuxt/image": "1.11.0",
     "@nuxt/test-utils": "3.19.2",
     "@nuxtjs/i18n": "10.0.5",
-    "@nuxtjs/strapi": "2.1.1",
     "@pinia/nuxt": "^0.11.2",
     "@types/markdown-it": "^14.1.2",
     "@unocss/nuxt": "^66.4.2",
@@ -28,6 +28,7 @@
     "markdown-it": "^14.1.0",
     "meilisearch": "^0.53.0",
     "nuxt": "^4.0.3",
+    "nuxt-directus": "5.7.0",
     "sass": "^1.90.0",
     "sharp": "^0.34.3",
     "vue": "^3.5.18",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index aefb60f..650e497 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      '@directus/sdk':
+        specifier: ^20.1.0
+        version: 20.1.0
       '@mdi/font':
         specifier: ^7.4.47
         version: 7.4.47
@@ -29,9 +32,6 @@ importers:
       '@nuxtjs/i18n':
         specifier: 10.0.5
         version: 10.0.5(@vue/compiler-dom@3.5.21)(db0@0.3.2)(eslint@9.35.0(jiti@2.5.1))(ioredis@5.7.0)(magicast@0.3.5)(rollup@4.50.2)(vue@3.5.21(typescript@5.9.2))
-      '@nuxtjs/strapi':
-        specifier: 2.1.1
-        version: 2.1.1(magicast@0.3.5)
       '@pinia/nuxt':
         specifier: ^0.11.2
         version: 0.11.2(magicast@0.3.5)(pinia@3.0.3(typescript@5.9.2)(vue@3.5.21(typescript@5.9.2)))
@@ -59,6 +59,9 @@ importers:
       nuxt:
         specifier: ^4.0.3
         version: 4.1.2(@parcel/watcher@2.5.1)(@types/node@24.4.0)(@vue/compiler-sfc@3.5.21)(db0@0.3.2)(eslint@9.35.0(jiti@2.5.1))(ioredis@5.7.0)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.50.2)(sass@1.92.1)(terser@5.44.0)(typescript@5.9.2)(vite@7.1.5(@types/node@24.4.0)(jiti@2.5.1)(sass@1.92.1)(terser@5.44.0)(yaml@2.8.1))(yaml@2.8.1)
+      nuxt-directus:
+        specifier: 5.7.0
+        version: 5.7.0(magicast@0.3.5)
       sass:
         specifier: ^1.90.0
         version: 1.92.1
@@ -323,6 +326,10 @@ packages:
     resolution: {integrity: sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==}
     engines: {node: '>=10'}
 
+  '@directus/sdk@20.1.0':
+    resolution: {integrity: sha512-EV2bwfiOXc1QFYAIqfGgyZ7JcKgHF43UVEYivUpMjOLiihI9tpmNfcz/qmOXju7LCZrBmSwTOHMRtOXPdZWiLQ==}
+    engines: {node: '>=22'}
+
   '@element-plus/icons-vue@2.3.2':
     resolution: {integrity: sha512-OzIuTaIfC8QXEPmJvB4Y4kw34rSXdCJzxcD1kFStBvr8bK6X1zQAYDo0CNMjojnfTqRQCJ0I7prlErcoRiET2A==}
     peerDependencies:
@@ -997,9 +1004,6 @@ packages:
     resolution: {integrity: sha512-rLQc/nEVWL0xMJf1a6+ndUpdQtxPBFzm4jeqG4o7HuXtDLn4HOe1dPdu7AsaIqq7EcsEjZ5T4mX4X8XnB8cT0Q==}
     engines: {node: '>=20.11.1'}
 
-  '@nuxtjs/strapi@2.1.1':
-    resolution: {integrity: sha512-CNcsEqkhto4P5SEA4ZuRrGdfOT7swsZp/hvR7SNG3OW3J8eHJythE68P1LaszCq5uvYlg7j90Iue534sEdedtQ==}
-
   '@oxc-minify/binding-android-arm64@0.87.0':
     resolution: {integrity: sha512-ZbJmAfXvNAamOSnXId3BiM3DiuzlD1isqKjtmRFb/hpvChHHA23FSPrFcO16w+ugZKg33sZ93FinFkKtlC4hww==}
     engines: {node: '>=14.0.0'}
@@ -2538,14 +2542,6 @@ packages:
     resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==}
     engines: {node: '>=8'}
 
-  call-bind-apply-helpers@1.0.2:
-    resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==}
-    engines: {node: '>= 0.4'}
-
-  call-bound@1.0.4:
-    resolution: {integrity: sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==}
-    engines: {node: '>= 0.4'}
-
   callsites@3.1.0:
     resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
     engines: {node: '>=6'}
@@ -2958,10 +2954,6 @@ packages:
     resolution: {integrity: sha512-Sf2LSQP+bOlhKWWyhFsn0UsfdK/kCWRv1iuA2gXAwt3dyNabr6QSj00I2V10pidqz69soatm9ZwZvpQMTIOd5Q==}
     engines: {node: '>=12'}
 
-  dunder-proto@1.0.1:
-    resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
-    engines: {node: '>= 0.4'}
-
   duplexer@0.1.2:
     resolution: {integrity: sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==}
 
@@ -3020,21 +3012,9 @@ packages:
   errx@0.1.0:
     resolution: {integrity: sha512-fZmsRiDNv07K6s2KkKFTiD2aIvECa7++PKyD5NC32tpRw46qZA3sOz+aM+/V9V0GDHxVTKLziveV4JhzBHDp9Q==}
 
-  es-define-property@1.0.1:
-    resolution: {integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==}
-    engines: {node: '>= 0.4'}
-
-  es-errors@1.3.0:
-    resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
-    engines: {node: '>= 0.4'}
-
   es-module-lexer@1.7.0:
     resolution: {integrity: sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==}
 
-  es-object-atoms@1.1.1:
-    resolution: {integrity: sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==}
-    engines: {node: '>= 0.4'}
-
   esbuild@0.25.9:
     resolution: {integrity: sha512-CRbODhYyQx3qp7ZEwzxOk4JBqmD/seJrzPa/cGjY1VtIn5E09Oi9/dB4JwctnfZ8Q8iT7rioVv5k/FNT/uf54g==}
     engines: {node: '>=18'}
@@ -3352,17 +3332,9 @@ packages:
     resolution: {integrity: sha512-QZjmEOC+IT1uk6Rx0sX22V6uHWVwbdbxf1faPqJ1QhLdGgsRGCZoyaQBm/piRdJy/D2um6hM1UP7ZEeQ4EkP+Q==}
     engines: {node: '>=18'}
 
-  get-intrinsic@1.3.0:
-    resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
-    engines: {node: '>= 0.4'}
-
   get-port-please@3.2.0:
     resolution: {integrity: sha512-I9QVvBw5U/hw3RmWpYKRumUeaDgxTPd401x364rLmWBJcOQ753eov1eTgzDqRG9bqFIfDc7gfzcQEWrUri3o1A==}
 
-  get-proto@1.0.1:
-    resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==}
-    engines: {node: '>= 0.4'}
-
   get-stream@8.0.1:
     resolution: {integrity: sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==}
     engines: {node: '>=16'}
@@ -3427,20 +3399,12 @@ packages:
     resolution: {integrity: sha512-0Ia46fDOaT7k4og1PDW4YbodWWr3scS2vAr2lTbsplOt2WkKp0vQbkI9wKis/T5LV/dqPjO3bpS/z6GTJB82LA==}
     engines: {node: '>=18'}
 
-  gopd@1.2.0:
-    resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
-    engines: {node: '>= 0.4'}
-
   graceful-fs@4.2.11:
     resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
 
   graphemer@1.4.0:
     resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
 
-  graphql@16.11.0:
-    resolution: {integrity: sha512-mS1lbMsxgQj6hge1XZ6p7GPhbrtFwUFYi3wRzXAC/FmYnyXMTvvI3td3rjmQ2u8ewXueaSvRPWaEcgVVOT9Jnw==}
-    engines: {node: ^12.22.0 || ^14.16.0 || ^16.0.0 || >=17.0.0}
-
   gzip-size@6.0.0:
     resolution: {integrity: sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==}
     engines: {node: '>=10'}
@@ -3456,10 +3420,6 @@ packages:
     resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
     engines: {node: '>=8'}
 
-  has-symbols@1.1.0:
-    resolution: {integrity: sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==}
-    engines: {node: '>= 0.4'}
-
   hasown@2.0.2:
     resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
     engines: {node: '>= 0.4'}
@@ -3888,10 +3848,6 @@ packages:
     resolution: {integrity: sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==}
     hasBin: true
 
-  math-intrinsics@1.1.0:
-    resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
-    engines: {node: '>= 0.4'}
-
   mdn-data@2.0.28:
     resolution: {integrity: sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==}
 
@@ -4123,6 +4079,9 @@ packages:
   nuxt-define@1.0.0:
     resolution: {integrity: sha512-CYZ2WjU+KCyCDVzjYUM4eEpMF0rkPmkpiFrybTqqQCRpUbPt2h3snswWIpFPXTi+osRCY6Og0W/XLAQgDL4FfQ==}
 
+  nuxt-directus@5.7.0:
+    resolution: {integrity: sha512-hoNXbhQ8UgDrCXqzqxC0wngi64AVqYYGGU/bwylgZWbKyU0m6kyNQVLGuQuXmFbogr2WMaw+FtXSgLz+DS32hA==}
+
   nuxt@4.1.2:
     resolution: {integrity: sha512-g5mwszCZT4ZeGJm83nxoZvtvZoAEaY65VDdn7p7UgznePbRaEJJ1KS1OIld4FPVkoDZ8TEVuDNqI9gUn12Exvg==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -4141,10 +4100,6 @@ packages:
     engines: {node: ^14.16.0 || >=16.10.0}
     hasBin: true
 
-  object-inspect@1.13.4:
-    resolution: {integrity: sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==}
-    engines: {node: '>= 0.4'}
-
   ofetch@1.4.1:
     resolution: {integrity: sha512-QZj2DfGplQAr2oj9KzceK9Hwz6Whxazmn85yYeVuS3u9XTMOGMRx0kO95MQ+vLsj/S/NwBDMMLU5hpxvI6Tklw==}
 
@@ -4559,10 +4514,6 @@ packages:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
 
-  qs@6.14.0:
-    resolution: {integrity: sha512-YWWTjgABSKcvs/nWBi9PycY/JiPJqOD4JA6o9Sej2AtvSGarXxKC3OQSk4pAarbdQlKAh5D4FCQkJNkW+GAn3w==}
-    engines: {node: '>=0.6'}
-
   quansync@0.2.11:
     resolution: {integrity: sha512-AifT7QEbW9Nri4tAwR5M/uzpBuqfZf+zwaEM/QkzEjj7NBuFD2rBuy0K3dE+8wltbezDV7JMA0WfnCPYRSYbXA==}
 
@@ -4766,22 +4717,6 @@ packages:
     resolution: {integrity: sha512-ObmnIF4hXNg1BqhnHmgbDETF8dLPCggZWBjkQfhZpbszZnYur5DUljTcCHii5LC3J5E0yeO/1LIMyH+UvHQgyw==}
     engines: {node: '>= 0.4'}
 
-  side-channel-list@1.0.0:
-    resolution: {integrity: sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==}
-    engines: {node: '>= 0.4'}
-
-  side-channel-map@1.0.1:
-    resolution: {integrity: sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==}
-    engines: {node: '>= 0.4'}
-
-  side-channel-weakmap@1.0.2:
-    resolution: {integrity: sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==}
-    engines: {node: '>= 0.4'}
-
-  side-channel@1.1.0:
-    resolution: {integrity: sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==}
-    engines: {node: '>= 0.4'}
-
   signal-exit@4.1.0:
     resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
     engines: {node: '>=14'}
@@ -5879,6 +5814,8 @@ snapshots:
 
   '@ctrl/tinycolor@3.6.1': {}
 
+  '@directus/sdk@20.1.0': {}
+
   '@element-plus/icons-vue@2.3.2(vue@3.5.21(typescript@5.9.2))':
     dependencies:
       vue: 3.5.21(typescript@5.9.2)
@@ -6881,16 +6818,6 @@ snapshots:
       - uploadthing
       - vue
 
-  '@nuxtjs/strapi@2.1.1(magicast@0.3.5)':
-    dependencies:
-      '@nuxt/kit': 3.19.2(magicast@0.3.5)
-      defu: 6.1.4
-      graphql: 16.11.0
-      qs: 6.14.0
-      ufo: 1.6.1
-    transitivePeerDependencies:
-      - magicast
-
   '@oxc-minify/binding-android-arm64@0.87.0':
     optional: true
 
@@ -8364,16 +8291,6 @@ snapshots:
 
   cac@6.7.14: {}
 
-  call-bind-apply-helpers@1.0.2:
-    dependencies:
-      es-errors: 1.3.0
-      function-bind: 1.1.2
-
-  call-bound@1.0.4:
-    dependencies:
-      call-bind-apply-helpers: 1.0.2
-      get-intrinsic: 1.3.0
-
   callsites@3.1.0: {}
 
   caniuse-api@3.0.0:
@@ -8754,12 +8671,6 @@ snapshots:
 
   dotenv@17.2.2: {}
 
-  dunder-proto@1.0.1:
-    dependencies:
-      call-bind-apply-helpers: 1.0.2
-      es-errors: 1.3.0
-      gopd: 1.2.0
-
   duplexer@0.1.2: {}
 
   eastasianwidth@0.2.0: {}
@@ -8821,16 +8732,8 @@ snapshots:
 
   errx@0.1.0: {}
 
-  es-define-property@1.0.1: {}
-
-  es-errors@1.3.0: {}
-
   es-module-lexer@1.7.0: {}
 
-  es-object-atoms@1.1.1:
-    dependencies:
-      es-errors: 1.3.0
-
   esbuild@0.25.9:
     optionalDependencies:
       '@esbuild/aix-ppc64': 0.25.9
@@ -9221,26 +9124,8 @@ snapshots:
 
   get-east-asian-width@1.4.0: {}
 
-  get-intrinsic@1.3.0:
-    dependencies:
-      call-bind-apply-helpers: 1.0.2
-      es-define-property: 1.0.1
-      es-errors: 1.3.0
-      es-object-atoms: 1.1.1
-      function-bind: 1.1.2
-      get-proto: 1.0.1
-      gopd: 1.2.0
-      has-symbols: 1.1.0
-      hasown: 2.0.2
-      math-intrinsics: 1.1.0
-
   get-port-please@3.2.0: {}
 
-  get-proto@1.0.1:
-    dependencies:
-      dunder-proto: 1.0.1
-      es-object-atoms: 1.1.1
-
   get-stream@8.0.1: {}
 
   get-tsconfig@4.10.1:
@@ -9314,14 +9199,10 @@ snapshots:
       slash: 5.1.0
       unicorn-magic: 0.3.0
 
-  gopd@1.2.0: {}
-
   graceful-fs@4.2.11: {}
 
   graphemer@1.4.0: {}
 
-  graphql@16.11.0: {}
-
   gzip-size@6.0.0:
     dependencies:
       duplexer: 0.1.2
@@ -9344,8 +9225,6 @@ snapshots:
 
   has-flag@4.0.0: {}
 
-  has-symbols@1.1.0: {}
-
   hasown@2.0.2:
     dependencies:
       function-bind: 1.1.2
@@ -9796,8 +9675,6 @@ snapshots:
       punycode.js: 2.3.1
       uc.micro: 2.1.0
 
-  math-intrinsics@1.1.0: {}
-
   mdn-data@2.0.28: {}
 
   mdn-data@2.0.30:
@@ -10058,6 +9935,12 @@ snapshots:
 
   nuxt-define@1.0.0: {}
 
+  nuxt-directus@5.7.0(magicast@0.3.5):
+    dependencies:
+      '@nuxt/kit': 3.19.2(magicast@0.3.5)
+    transitivePeerDependencies:
+      - magicast
+
   nuxt@4.1.2(@parcel/watcher@2.5.1)(@types/node@24.4.0)(@vue/compiler-sfc@3.5.21)(db0@0.3.2)(eslint@9.35.0(jiti@2.5.1))(ioredis@5.7.0)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.50.2)(sass@1.92.1)(terser@5.44.0)(typescript@5.9.2)(vite@7.1.5(@types/node@24.4.0)(jiti@2.5.1)(sass@1.92.1)(terser@5.44.0)(yaml@2.8.1))(yaml@2.8.1):
     dependencies:
       '@nuxt/cli': 3.28.0(magicast@0.3.5)
@@ -10190,8 +10073,6 @@ snapshots:
       pkg-types: 2.3.0
       tinyexec: 1.0.1
 
-  object-inspect@1.13.4: {}
-
   ofetch@1.4.1:
     dependencies:
       destr: 2.0.5
@@ -10662,10 +10543,6 @@ snapshots:
 
   punycode@2.3.1: {}
 
-  qs@6.14.0:
-    dependencies:
-      side-channel: 1.1.0
-
   quansync@0.2.11: {}
 
   queue-microtask@1.2.3: {}
@@ -10936,34 +10813,6 @@ snapshots:
 
   shell-quote@1.8.3: {}
 
-  side-channel-list@1.0.0:
-    dependencies:
-      es-errors: 1.3.0
-      object-inspect: 1.13.4
-
-  side-channel-map@1.0.1:
-    dependencies:
-      call-bound: 1.0.4
-      es-errors: 1.3.0
-      get-intrinsic: 1.3.0
-      object-inspect: 1.13.4
-
-  side-channel-weakmap@1.0.2:
-    dependencies:
-      call-bound: 1.0.4
-      es-errors: 1.3.0
-      get-intrinsic: 1.3.0
-      object-inspect: 1.13.4
-      side-channel-map: 1.0.1
-
-  side-channel@1.1.0:
-    dependencies:
-      es-errors: 1.3.0
-      object-inspect: 1.13.4
-      side-channel-list: 1.0.0
-      side-channel-map: 1.0.1
-      side-channel-weakmap: 1.0.2
-
   signal-exit@4.1.0: {}
 
   simple-concat@1.0.1: