From f2533767d29e3ef225c84e00fcede47ccfd7dd69 Mon Sep 17 00:00:00 2001
From: R2m1liA <15258427350@163.com>
Date: Fri, 19 Dec 2025 12:53:01 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=B0=83=E6=95=B4=E5=85=B3=E4=BA=8E?=
 =?UTF-8?q?=E6=88=91=E4=BB=AC=E9=A1=B5=E9=9D=A2=E6=B8=B2=E6=9F=93=E6=9C=BA?=
 =?UTF-8?q?=E5=88=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 骨架屏：骨架屏由el-skeleton模板控制
---
 app/pages/about/index.vue | 63 ++++++++++++++++++++-------------------
 1 file changed, 33 insertions(+), 30 deletions(-)

diff --git a/app/pages/about/index.vue b/app/pages/about/index.vue
index 7f995a2..1bcd3b3 100644
--- a/app/pages/about/index.vue
+++ b/app/pages/about/index.vue
@@ -1,36 +1,37 @@
 <template>
   <div class="page-container">
-    <div v-if="!pending">
-      <app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
+    <app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
 
-      <div class="content">
-        <!-- eslint-disable-next-line vue/no-v-html -->
-        <div class="html-typography" v-html="companyProfile.content || ''" />
-        <!-- <div v-if="!hydrated" v-html="companyProfile.content || ''" /> -->
-        <!-- <div v-else> -->
-        <!--   <html-renderer -->
-        <!--     class="html-typography" -->
-        <!--     :html="companyProfile.content || ''" -->
-        <!--   /> -->
-        <!-- </div> -->
-      </div>
+    <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 v-if="!hydrated" v-html="companyProfile.content || ''" /> -->
+          <!-- <div v-else> -->
+          <!--   <html-renderer -->
+          <!--     class="html-typography" -->
+          <!--     :html="companyProfile.content || ''" -->
+          <!--   /> -->
+          <!-- </div> -->
 
-      <el-divider content-position="left">{{ $t('learn-more') }}</el-divider>
-      <div class="button-group">
-        <learn-more-card
-          :title="$t('navigation.contact-info')"
-          :icon="ElIconService"
-          :to="$localePath('/support/contact-us')"
-        />
-        <learn-more-card
-          :title="$t('navigation.address')"
-          :icon="ElIconMapLocation"
-          @click="openMap"
-        />
-      </div>
-    </div>
-    <div v-else class="loading">
-      <el-skeleton :rows="5" animated />
+          <el-divider content-position="left">{{
+            $t('learn-more')
+          }}</el-divider>
+          <div class="button-group">
+            <learn-more-card
+              :title="$t('navigation.contact-info')"
+              :icon="ElIconService"
+              :to="$localePath('/support/contact-us')"
+            />
+            <learn-more-card
+              :title="$t('navigation.address')"
+              :icon="ElIconMapLocation"
+              @click="openMap"
+            />
+          </div>
+        </template>
+      </el-skeleton>
     </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'));