Feature: 新增界面-公司简介

app/pages/about/contact-us.vue

@@ -0,0 +1,3 @@
+<template>
+    <p>还没做</p>
+</template>

app/pages/about/index.vue

@@ -0,0 +1,102 @@
+<template>
+    <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('about-us') }}
+            </el-breadcrumb-item>
+        </el-breadcrumb>
+
+        <div class="content">
+            <markdown-renderer :content="content || ''" />
+        </div>
+
+        <el-divider content-position="left">更多信息</el-divider>
+        <div class="button-group">
+            <NuxtLink :to="$localePath('/about/contact-us')">
+                <el-card class="card-button">
+                    <el-icon class="icon" size="80"><ElIconService /></el-icon>
+                    <br>
+                    联系信息
+                </el-card>
+            </NuxtLink>
+        </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<StrapiCompanyProfile>('company-profile', undefined, {
+            populate: '*',
+            locale: strapiLocale,
+        })
+        if (response.data) {
+            content.value = response.data.content || ''
+        } else {
+            console.warn('No company profile data found')
+        }
+    } catch (error) {
+        console.error('Failed to fetch company profile:', error)
+    }
+})
+</script>
+
+<style scoped>
+.breadcrumb {
+    padding: 1rem 1rem;
+}
+
+.content {
+    padding: 1rem;
+    margin-bottom: 2rem;
+}
+
+:deep(.markdown-body p) {
+    text-indent: 2em;
+}
+
+:deep(.markdown-body h2) {
+    text-align: center;
+}
+
+:deep(.el-divider__text) {
+    color: var(--el-color-info);
+    font-size: 1em;
+}
+
+.button-group {
+    display: flex;
+    justify-content: left;
+    margin-top: 2rem;
+    margin-left: 2rem;
+}
+
+.card-button {
+    width: 20%;
+    min-width: 200px;
+    padding: 20px;
+    margin: 0 auto;
+    cursor: pointer;
+    text-align: center;
+    font-size: 1.5em;
+}
+
+.card-button:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+}
+
+.icon {
+    padding: 10px;
+}
+</style>

app/pages/productions/example.vue

@@ -1,95 +0,0 @@
-<template>
-    <div class="production-detail">
-        <div>
-            <el-breadcrumb class="breadcrumb" separator="/">
-                <el-breadcrumb-item class="text-sm" :to="{ path: '/' }">
-                    {{ $t('navigation.home') }}
-                </el-breadcrumb-item>
-                <el-breadcrumb-item class="text-sm" :to="{ path: '/' }">
-                    {{ $t('productions') }}
-                </el-breadcrumb-item>
-                <el-breadcrumb-item class="text-sm" :to="{ path: '/' }">
-                    示例
-                </el-breadcrumb-item>
-            </el-breadcrumb>
-
-
-            <div class="production-header">
-                <div class="production-image">
-                    <el-empty description="产品图片" class="border" />
-                </div>
-                <div class="production-info">
-                    <h1>产品名称</h1>
-                    <p class="summary">产品描述...</p>
-                </div>
-            </div>
-
-            <div class="production-content">
-                <el-tabs v-model="activeName" class="production-tabs">
-                    <el-tab-pane label="产品详情" name="details">
-                        <p>这里是产品的详细描述内容...</p>
-                    </el-tab-pane>
-                    <el-tab-pane label="技术规格" name="specs">
-                        <p>这里是产品的技术规格内容...</p>
-                    </el-tab-pane>
-                    <el-tab-pane label="常见问题" name="faq">
-                        <p>这里是产品的常见问题内容...</p>
-                    </el-tab-pane>
-                    <el-tab-pane label="相关资料" name="resources">
-                        <p>这里是产品的相关资料内容...</p>
-                    </el-tab-pane>
-                </el-tabs>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup lang="ts">
-const activeName = ref('details')
-</script>
-
-<style scoped lang="scss">
-.production-detail {
-    min-height: 60vh;
-}
-
-.breadcrumb {
-    padding: 0rem 1rem;
-    margin-bottom: 2rem;
-}
-
-.breadcrumb-item {
-    color: var(--el-color-info);
-}
-
-.production-header {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 3rem;
-    margin-bottom: 3rem;
-}
-
-.production-image .el-empty {
-    width: 100%;
-    height: 400px;
-    border-radius: 8px;
-}
-
-.production-info h1 {
-    color: var(--el-color-text);
-    margin-top: 2rem;
-    margin-bottom: 1rem;
-    font-size: 2rem;
-}
-
-.production-info p {
-    color: var(--el-color-info);
-    font-size: 1rem;
-    line-height: 1.6;
-    margin-bottom: 2rem;
-}
-
-.el-tab-pane {
-    margin-top: 1rem;
-}
-</style>

app/types/strapi/index.ts

@@ -1,2 +1,3 @@
 export * from './common';
-export * from './production';
+export * from './production';
+export * from './singleTypes';

app/types/strapi/singleTypes.ts

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

app/utils/markdown.ts

@@ -1,5 +1,4 @@
 import MarkdownIt from 'markdown-it';
-import DOMPurify from 'dompurify';
 
 const md = new MarkdownIt({
     html: true,
@@ -10,6 +9,13 @@ const md = new MarkdownIt({
 
 export function renderMarkdown(content: string): string {
     const dirtyHtml = md.render(content);
-    return DOMPurify.sanitize(dirtyHtml)
+
+    if (typeof window !== 'undefined') {
+        import('dompurify').then((DOMPurify => {
+            return DOMPurify.default.sanitize(dirtyHtml)
+        }))
+    }
+
+    return dirtyHtml
 }