feat: solution页composable API

- 将/solutions与/solutions/[slug]页现在由Directus作为CMS
- 添加solution页的composable API

app/composables/directus/index.ts

@@ -2,3 +2,5 @@ export * from './useDirectusImage';
 export * from './useDirectusFiles';
 export * from './useProductList';
 export * from './useProduct';
+export * from './useSolutionList';
+export * from './useSolution';

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 },
+            },
+          },
+        },
+      })
+    );
+  });
+};

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 },
+            },
+          },
+        },
+      })
+    );
+  });
+};

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,
+  };
+}

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;
+}

app/models/views/SolutionView.ts

@@ -0,0 +1,20 @@
+/**
+ * 解决方案模型
+ * 用于解决方案页(/solutions/[slug])渲染的数据结构
+ */
+export interface SolutionView {
+  /** 唯一标识符 **/
+  id: number;
+
+  /** 标题 **/
+  title: string;
+
+  /** 摘要 **/
+  summary: string;
+
+  /** 内容 **/
+  content: string;
+
+  /** 创建时间 **/
+  createAt: string;
+}

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>
@@ -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(
+  const { data, pending, error } = await useSolution(id.value);
-    () => `solution-${documentId.value}`,
-    () =>
-      findOne<Solution>('solutions', documentId.value, {
-        populate: '*',
-        locale: strapiLocale,
-      })
-  );
 
-  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) {

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 || '')"
+              :cover-url="getImageUrl(solution.cover || '')"
-              :document-id="solution.documentId"
+              :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"
+              :key="solution.id"
-              :document-id="solution.documentId"
+              :document-id="solution.id.toString()"
-              :cover-url="useStrapiMedia(solution?.cover?.url || '')"
+              :cover-url="getImageUrl(solution.cover || '')"
               :title="solution.title"
               :summary="solution.summary || ''"
             />
@@ -55,31 +55,22 @@
 </template>
 
 <script setup lang="ts">
-  const { find } = useStrapi();
+  const { getImageUrl } = useDirectusImage();
-  const { getStrapiLocale } = useLocalizations();
-  const strapiLocale = getStrapiLocale();
 
-  const { data, pending, error } = useAsyncData('solutions', () =>
+  const { data, pending, error } = await useSolutionList();
-    find<Solution>('solutions', {
+
-      populate: {
+  const solutionsRaw = computed(() => data.value ?? []);
-        cover: {
+  const solutions = computed(() =>
-          populate: '*',
+    solutionsRaw.value.map((item) => toSolutionListView(item))
-        },
-        solution_type: {
-          populate: '*',
-        },
-      },
-      locale: strapiLocale,
-    })
   );
 
   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);

app/types/directus/my-schema.ts

@@ -235,6 +235,8 @@ export interface Solution {
   cover?: DirectusFile | string | null;
   homepage_recommend?: Homepage | string | null;
   recommend_sort?: number | null;
+  /** @description 条目创建时自动生成 */
+  create_at?: string | null;
   translations?: SolutionsTranslation[] | null;
 }
 
@@ -245,7 +247,7 @@ export interface SolutionsTranslation {
   languages_code?: Language | string | null;
   title?: string | null;
   summary?: string | null;
-  content?: 'json' | null;
+  content?: string | null;
 }
 
 export interface DirectusAccess {