diff --git a/app/composables/directus/index.ts b/app/composables/directus/index.ts
index d4a918b..d480dd2 100644
--- a/app/composables/directus/index.ts
+++ b/app/composables/directus/index.ts
@@ -6,3 +6,4 @@ export * from './useSolutionList';
 export * from './useSolution';
 export * from './useQuestionList';
 export * from './useDocumentList';
+export * from './useContactInfo';
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/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/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/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) {