feat: production页的CMS变更

2025-10-15 16:49:08 +08:00
parent 98f978484c
commit 1704a7b5c1
5 changed files with 202 additions and 94 deletions
--- 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: () => [],
    },
  });
--- 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<QuestionView[]>,
      default: () => [],
    },
  });
--- 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>
--- a/app/pages/productions/[...slug].vue
+++ b/app/pages/productions/[...slug].vue
@ -15,7 +15,7 @@
            }}</NuxtLink>
          </el-breadcrumb-item>
          <el-breadcrumb-item class="text-md opactiy-50">{{
-            production.title
+            production.name
          }}</el-breadcrumb-item>
        </el-breadcrumb>

@ -23,9 +23,9 @@
        <div class="production-header">
          <div class="production-image">
            <el-image
-              v-if="production.production_images.length <= 1"
-              :src="useStrapiMedia(production?.cover?.url || '')"
-              :alt="production.title"
+              v-if="production.images.length <= 1"
+              :src="getImageUrl(production.images[0].image)"
+              :alt="production.name"
              fit="contain"
            />
            <el-carousel
@ -37,13 +37,13 @@
              arrow="always"
            >
              <el-carousel-item
-                v-for="(item, index) in production.production_images || []"
+                v-for="(item, index) in production.images || []"
                :key="index"
              >
                <div class="production-carousel-item">
                  <el-image
-                    :src="useStrapiMedia(item.url || '')"
-                    :alt="item.alternativeText || production.title"
+                    :src="getImageUrl(item.image || '')"
+                    :alt="production.name"
                    fit="contain"
                    lazy
                  />
@ -56,7 +56,7 @@
          </div>

          <div class="production-info">
-            <h1>{{ production.title }}</h1>
+            <h1>{{ production.name }}</h1>
            <p class="summary">{{ production.summary }}</p>
          </div>
        </div>
@ -65,24 +65,16 @@
        <div class="production-content">
          <el-tabs v-model="activeName" class="production-tabs" stretch>
            <el-tab-pane label="产品详情" name="details">
-              <markdown-renderer
-                :content="production.production_details || ''"
-              />
+              <markdown-renderer :content="production.description || ''" />
            </el-tab-pane>
            <el-tab-pane label="技术规格" name="specs">
-              <spec-table :data="production.production_specs" />
+              <spec-table :data="production.specs" />
            </el-tab-pane>
            <el-tab-pane label="常见问题" name="faq">
-              <question-list :questions="production.questions" />
+              <question-list :questions="production.faqs" />
            </el-tab-pane>
            <el-tab-pane label="相关文档" name="documents">
-              <document-list
-                :documents="
-                  production.production_documents.map(
-                    (item) => item.document
-                  ) || []
-                "
-              />
+              <document-list :documents="production.documents" />
            </el-tab-pane>
          </el-tabs>
        </div>
@ -114,40 +106,130 @@
 </template>

 <script setup lang="ts">
+  import { readItem } from '@directus/sdk';
  const route = useRoute();
-  const { findOne } = useStrapi();
  const { getStrapiLocale } = useLocalizations();
  const strapiLocale = getStrapiLocale();

+  const { $directus } = useNuxtApp();
+  const { getImageUrl } = useDirectusImage();
+
  // 获取路由参数（slug 或 id）
  const documentId = computed(() => route.params.slug as string);

-  const { data, pending, error } = useAsyncData(
+  const { data, pending, error } = await useAsyncData(
    () => `production-${documentId.value}`,
    () =>
-      findOne<Production>('productions', documentId.value, {
-        populate: {
-          production_specs: {
-            populate: '*',
+      $directus.request(
+        readItem('products', documentId.value, {
+          fields: [
+            'id',
+            { translations: ['id', 'name', 'summary', 'description'] },
+            {
+              images: [
+                'id',
+                {
+                  product_images_id: [
+                    'id',
+                    'image',
+                    { translations: ['id', 'caption'] },
+                  ],
+                },
+              ],
+            },
+            {
+              specs: [
+                'id',
+                {
+                  translations: ['*'],
+                },
+                {
+                  specs: [
+                    'id',
+                    {
+                      translations: ['id', 'key'],
+                    },
+                    'value',
+                  ],
+                },
+              ],
+            },
+            {
+              faqs: [
+                'id',
+                {
+                  questions_id: [
+                    'id',
+                    {
+                      translations: ['id', 'title', 'content'],
+                    },
+                  ],
+                },
+              ],
+            },
+            {
+              documents: [
+                'id',
+                {
+                  product_documents_id: [
+                    'id',
+                    {
+                      file: ['id', 'filesize', 'filename_download'],
+                    },
+                    {
+                      translations: ['id', 'title'],
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+          deep: {
+            translations: {
+              _filter: {
+                languages_code: { _eq: strapiLocale },
+              },
+            },
+            images: {
+              product_images_id: {
+                translations: {
+                  _filter: {
+                    languages_code: { _eq: strapiLocale },
+                  },
+                },
+              },
+            },
+            faqs: {
+              questions_id: {
+                translations: {
+                  _filter: {
+                    languages_code: { _eq: strapiLocale },
+                  },
+                },
+              },
+            },
+            documents: {
+              documents_id: {
+                translations: {
+                  _filter: {
+                    languages_code: { _eq: strapiLocale },
+                  },
+                },
+              },
+            },
          },
-          production_images: {
-            populate: '*',
-          },
-          cover: {
-            populate: '*',
-          },
-          questions: {
-            populate: '*',
-          },
-          production_documents: {
-            populate: 'document',
-          },
-        },
-        locale: strapiLocale,
-      })
+        })
+      )
  );

-  const production = computed(() => data.value?.data ?? null);
+  console.log('Raw Data: ', data.value);
+
+  const rawProduction = computed(() => data.value ?? null);
+  const production = computed(() => {
+    return toProductView(rawProduction.value);
+  });
+
+  console.log('View Data: ', production.value);

  const activeName = ref('details'); // 默认选中概览标签

@ -159,7 +241,7 @@

  // SEO
  useHead({
-    title: computed(() => production.value?.title || 'Product Detail'),
+    title: computed(() => production.value?.name || 'Product Detail'),
    meta: [
      {
        name: 'description',
--- a/app/pages/productions/index.vue
+++ b/app/pages/productions/index.vue
@ -27,10 +27,10 @@
            <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"
+                :key="production.id"
+                :slug="production.id.toString()"
+                :image-url="getImageUrl(production.cover.toString())"
+                :name="production.name"
                :description="production.summary || ''"
              />
            </div>
@ -45,29 +45,47 @@
 </template>

 <script setup lang="ts">
-  const { find } = useStrapi();
+  import { readItems } from '@directus/sdk';
  const { getStrapiLocale } = useLocalizations();
  const strapiLocale = getStrapiLocale();

+  const { $directus } = useNuxtApp();
+  const { getImageUrl } = useDirectusImage();
+
  const { data, pending, error } = useAsyncData(
-    'productions',
+    'products',
    () =>
-      find<Production>('productions', {
-        populate: {
-          cover: {
-            populate: '*',
+      $directus.request(
+        readItems('products', {
+          fields: [
+            'id',
+            { translations: ['id', 'name', 'summary'] },
+            'cover',
+            {
+              product_type: [
+                'id',
+                {
+                  translations: ['id', 'name'],
+                },
+              ],
+            },
+          ],
+          deep: {
+            translations: {
+              _filter: {
+                languages_code: { _eq: strapiLocale },
+              },
+            },
+            product_type: {
+              translations: {
+                _filter: {
+                  languages_code: { _eq: strapiLocale },
+                },
+              },
+            },
          },
-          production_type: {
-            populate: '*',
-          },
-        },
-        filters: {
-          show_in_production_list: {
-            $eq: true,
-          },
-        },
-        locale: strapiLocale,
-      }),
+        })
+      ),
    {
      lazy: true,
    }
@ -75,26 +93,31 @@

  const activeNames = ref<string[]>([]);

-  const productions = computed(() => data.value?.data ?? []);
+  // const productions = computed(() => data.value?.data ?? []);
+  const productionsRaw = computed(() => data.value ?? []);
+  const productions = computed(() =>
+    productionsRaw.value.map((item) => toProductListView(item))
+  );

  // 按类型分组
  // 兼容 production_type 既可能为对象也可能为字符串
  const groupedProductions = computed(() => {
-    const groups: Record<string, Production[]> = {};
+    const groups: Record<string, ProductListView[]> = {};
    for (const prod of productions.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;
  });

@ -113,7 +136,13 @@
    }
  });

-  onMounted(() => {
+  watch(pending, (value) => {
+    if (!value) {
+      console.log('AsyncData: ', data.value);
+    }
+  });
+
+  onMounted(async () => {
    if (groupedProductions.value) {
      activeNames.value = [
        ...Object.keys(groupedProductions.value),