Fix: 修正部分加载Bug & 调整页面样式

app/pages/about/contact-us.vue

@@ -1,16 +1,21 @@
 <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('contact-info') }}
-            </el-breadcrumb-item>
-        </el-breadcrumb>
+    <div class="page-container">
+        <div v-if="content">
+            <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('navigation.contact-info') }}
+                </el-breadcrumb-item>
+            </el-breadcrumb>
 
-        <div class="content">
-            <markdown-renderer :content="content || ''" />
+            <div class="content">
+                <markdown-renderer :content="content || ''" />
+            </div>
+        </div>
+        <div v-else class="loading">
+            <el-skeleton :rows="5" animated />
         </div>
     </div>
 </template>
@@ -41,6 +46,10 @@ onMounted(async () => {
 </script>
 
 <style scoped>
+.page-container {
+    padding: 2rem 1rem;
+}
+
 .breadcrumb {
     padding: 1rem 1rem;
 }

app/pages/about/index.vue

@@ -1,27 +1,34 @@
 <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="page-container">
+        <div v-if="content">
+            <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('navigation.about-us') }}
+                </el-breadcrumb-item>
+            </el-breadcrumb>
 
-        <div class="content">
-            <markdown-renderer :content="content || ''" />
+            <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>
-
-        <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 v-else class="loading">
+            <el-skeleton :rows="5" animated />
         </div>
     </div>
 </template>
@@ -32,12 +39,11 @@ const { getStrapiLocale } = useLocalizations()
 
 const strapiLocale = getStrapiLocale()
 
-const content = ref<string>('')
+const content = ref<string | null>(null)
 
 onMounted(async () => {
     try {
         const response = await findOne<StrapiCompanyProfile>('company-profile', undefined, {
-            populate: '*',
             locale: strapiLocale,
         })
         if (response.data) {
@@ -52,6 +58,10 @@ onMounted(async () => {
 </script>
 
 <style scoped>
+.page-container {
+    padding: 2rem 1rem;
+}
+
 .breadcrumb {
     padding: 1rem 1rem;
 }
@@ -99,4 +109,11 @@ onMounted(async () => {
 .icon {
     padding: 10px;
 }
+
+.loading {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 1rem;
+}
 </style>

app/pages/index.vue

@@ -1,29 +1,6 @@
 <template>
   <div class="homepage">
-    <div class="hero-section">
-      <h1>{{ $t('company-name') }}</h1>
-      <p>{{ $t('company-description') }}</p>
-      <el-button type="primary" size="large">
-        {{ $t('learn-more') }}
-      </el-button>
-    </div>
-    
-    <div class="content-sections">
-      <div class="section">
-        <h2>{{ $t('productions') }}</h2>
-        <p>{{ $t('productions-desc') }}</p>
-      </div>
-      
-      <div class="section">
-        <h2>{{ $t('solutions') }}</h2>
-        <p>{{ $t('solutions-desc') }}</p>
-      </div>
-      
-      <div class="section">
-        <h2>{{ $t('support') }}</h2>
-        <p>{{ $t('support-desc') }}</p>
-      </div>
-    </div>
+    <p>主页还没做^^</p>
   </div>
 </template>
 
@@ -32,43 +9,6 @@
   padding: 2rem;
 }
 
-.hero-section {
-  text-align: center;
-  padding: 4rem 0;
-  background: linear-gradient(135deg, var(--el-color-primary-light-3), var(--el-color-primary));
-  border-radius: 8px;
-  margin-bottom: 3rem;
-  color: white;
-}
-
-.hero-section h1 {
-  font-size: 3rem;
-  margin-bottom: 1rem;
-}
-
-.hero-section p {
-  font-size: 1.2rem;
-  margin-bottom: 2rem;
-}
-
-.content-sections {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-  gap: 2rem;
-}
-
-.section {
-  padding: 2rem;
-  background: var(--el-bg-color);
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-
-.section h2 {
-  color: var(--el-color-primary);
-  margin-bottom: 1rem;
-}
-
 .section p {
   color: var(--el-text-color-regular);
   line-height: 1.6;

app/pages/productions/[...slug].vue

@@ -5,7 +5,7 @@
       <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" :to="{ path: $localePath('/productions') }">{{ $t('productions')
+        <el-breadcrumb-item class="text-sm opacity-50" :to="{ path: $localePath('/productions') }">{{ $t('navigation.productions')
           }}</el-breadcrumb-item>
         <el-breadcrumb-item class="text-sm opactiy-50">{{ production.title }}</el-breadcrumb-item>
       </el-breadcrumb>

app/pages/productions/index.vue

@@ -3,10 +3,10 @@
         <div class="page-header">
             <h1 class="page-title">{{ $t('our-productions') }}</h1>
             <el-breadcrumb class="breadcrumb">
-                <el-breadcrumb-item class="text-sm opacity-50">
+                <el-breadcrumb-item class="text-md opacity-50">
                     <NuxtLink :to="$localePath('/')">{{ $t('navigation.home') }}</NuxtLink>
                 </el-breadcrumb-item>
-                <el-breadcrumb-item class="text-sm opacity-50">
+                <el-breadcrumb-item class="text-md opacity-50">
                     <NuxtLink :to="$localePath('/productions')">{{ $t('navigation.productions') }}</NuxtLink>
                 </el-breadcrumb-item>
             </el-breadcrumb>
@@ -91,15 +91,19 @@ onMounted(async () => {
 </script>
 
 <style scoped>
+.page-container {
+    padding: 2rem 1rem;
+}
+
 .page-header {
     display: flex;
-    padding: 20px;
 }
 
 .page-title {
     font-size: 2rem;
     font-weight: bold;
     color: var(--el-color-primary);
+    margin-bottom: 20px;
 }
 
 .breadcrumb {
@@ -110,7 +114,6 @@ onMounted(async () => {
     display: flex;
     flex-direction: column;
     gap: 40px;
-    padding: 20px;
 }
 
 .production-group {

app/pages/solutions/index.vue

@@ -0,0 +1,35 @@
+<template>
+    <div class="page-container">
+        <div class="page-header">
+            <h1 class="page-title">{{ $t('get-our-solutions') }}</h1>
+            <el-breadcrumb class="breadcrumb">
+                <el-breadcrumb-item class="text-md opacity-50">
+                    <NuxtLink :to="$localePath('/')">{{ $t('navigation.home') }}</NuxtLink>
+                </el-breadcrumb-item>
+                <el-breadcrumb-item class="text-md opacity-50">
+                    <NuxtLink :to="$localePath('/solutions')">{{ $t('navigation.solutions') }}</NuxtLink>
+                </el-breadcrumb-item>
+            </el-breadcrumb>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.page-container {
+    padding: 2rem 1rem;
+}
+
+.page-header {
+    display: flex;
+}
+
+.page-title {
+    font-size: 2rem;
+    font-weight: bold;
+    color: var(--el-color-primary);
+}
+
+.breadcrumb {
+    margin-left: auto;
+}
+</style>