Feature: 联系我们界面 & 产品列表增添CMS筛选功能

app/pages/about/contact-us.vue

@@ -1,3 +1,60 @@
 <template>
-    <p>还没做</p>
+    <div>
+        <el-breadcrumb class="breadcrumb" separator="/">
+            <el-breadcrumb-item class="text-sm opacity-50" :to="{ path: $localePath('/') }">
+                {{ $t('navigation.home') }}
+            </el-breadcrumb-item>
+            <el-breadcrumb-item class="text-sm opacity-50">
+                {{ $t('contact-info') }}
+            </el-breadcrumb-item>
+        </el-breadcrumb>
+
+        <div class="content">
+            <markdown-renderer :content="content || ''" />
+        </div>
+    </div>
 </template>
+
+<script setup lang="ts">
+const { findOne } = useStrapi()
+const { getStrapiLocale } = useLocalizations()
+
+const strapiLocale = getStrapiLocale()
+
+const content = ref<string>('')
+
+onMounted(async () => {
+    try {
+        const response = await findOne<StrapiContactInfo>('contact-info', undefined, {
+            populate: '*',
+            locale: strapiLocale,
+        })
+        if (response.data) {
+            content.value = response.data.content || ''
+        } else {
+            console.warn('No contact info data found')
+        }
+    } catch (error) {
+        console.error('Failed to fetch contact info:', error)
+    }
+})
+</script>
+
+<style scoped>
+.breadcrumb {
+    padding: 1rem 1rem;
+}
+
+.content {
+    padding: 1rem;
+    margin-bottom: 2rem;
+}
+
+:deep(.markdown-body p) {
+    margin-bottom: 1rem;
+}
+
+:deep(.markdown-body h2) {
+    text-align: center;
+}
+</style>

app/pages/productions/index.vue

@@ -1,14 +1,9 @@
 <template>
     <div class="productions-container">
         <production-card
-            v-for="production in productions" 
+v-for="production in productions" :id="production.id" :key="production.id"
-            :id="production.id"
+            :slug="production.documentId" :image-url="useStrapiMedia(production?.production_image?.url || '')"
-            :key="production.id" 
+            :name="production.title" :description="production.summary || ''" />
-            :slug="production.documentId"
-            :image-url="useStrapiMedia(production?.production_image?.url || '')"
-            :name="production.title" 
-            :description="production.summary || ''" 
-        />
     </div>
 </template>
 
@@ -26,7 +21,12 @@ onMounted(async () => {
     try {
         const response = await find<Production>('productions', {
             populate: '*',
-            locale: strapiLocale, // 使用简体中文
+            filters: {
+                show_in_production_list: {
+                    $eq: true, // 只获取在产品列表中显示的产品
+                },
+            },
+            locale: strapiLocale,
         })
         productions.value = response.data.map((item: Production) => ({
             title: item.title,
@@ -35,7 +35,8 @@ onMounted(async () => {
             production_image: item.production_image,
             production_details: item.production_details,
             production_specs: item.production_specs,
-            documentId: item.documentId
+            documentId: item.documentId,
+            show_in_production_list: item.show_in_production_list,
         }))
     } catch (error) {
         console.error('Failed to fetch productions:', error)

app/types/strapi/production.ts

@@ -12,4 +12,5 @@ export interface Production extends StrapiEntity {
     production_details?: string;
     production_specs?: string | object;
     documents?: StrapiMedia[];
+    show_in_production_list?: boolean;
 }

app/types/strapi/singleTypes.ts

@@ -1,3 +1,7 @@
 export interface StrapiCompanyProfile extends StrapiEntity {
     content: string;
 }
+
+export interface StrapiContactInfo extends StrapiEntity {
+    content: string;
+}