fix: 调整关于我们页面渲染机制

- 骨架屏：骨架屏由el-skeleton模板控制

app/pages/about/index.vue

@@ -1,11 +1,12 @@
 <template>
   <div class="page-container">
-    <div v-if="!pending">
     <app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
 
     <div class="content">
+      <el-skeleton :loading="pending" :rows="10" animated>
+        <template #default>
           <!-- eslint-disable-next-line vue/no-v-html -->
-        <div class="html-typography" v-html="companyProfile.content || ''" />
+          <div class="html-typography" v-html="companyProfile?.content || ''" />
           <!-- <div v-if="!hydrated" v-html="companyProfile.content || ''" /> -->
           <!-- <div v-else> -->
           <!--   <html-renderer -->
@@ -13,9 +14,10 @@
           <!--     :html="companyProfile.content || ''" -->
           <!--   /> -->
           <!-- </div> -->
-      </div>
 
-      <el-divider content-position="left">{{ $t('learn-more') }}</el-divider>
+          <el-divider content-position="left">{{
+            $t('learn-more')
+          }}</el-divider>
           <div class="button-group">
             <learn-more-card
               :title="$t('navigation.contact-info')"
@@ -28,9 +30,8 @@
               @click="openMap"
             />
           </div>
-    </div>
+        </template>
-    <div v-else class="loading">
+      </el-skeleton>
-      <el-skeleton :rows="5" animated />
     </div>
   </div>
 </template>
@@ -42,7 +43,9 @@
     { label: $t('navigation.home'), to: localePath('/') },
     { label: $t('navigation.about-us') },
   ];
-  const { data: companyProfile, pending, error } = await useCompanyProfile();
+  const { data, pending, error } = useCompanyProfile();
+
+  const companyProfile = computed(() => data.value ?? null);
 
   const openMap = () => {
     window.open(localePath('/locate'));