app/composables/directus/index.ts

@@ -7,3 +7,4 @@ export * from './useSolution';
 export * from './useQuestionList';
 export * from './useDocumentList';
 export * from './useContactInfo';
+export * from './useCompanyProfile';

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

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

app/models/views/CompanyProfileView.ts

@@ -0,0 +1,10 @@
+/**
+ * 公司简介视图模型
+ */
+export interface CompanyProfileView {
+  /** 唯一标识符 **/
+  id: number;
+
+  /** 内容 **/
+  content: string;
+}

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) {