refactor(official): 使用演示数据兜底官网内容展示

- 在关于我们页补充企业优势和联系方式演示数据展示
- 资讯列表页增加分类标签，实现按分类筛选资讯
- 文章详情页新增相关推荐文章展示逻辑
- 主页使用演示数据兜底导航、Banner、核心业务、公司简介和文章列表
- 各页面均优化站点信息使用，优先展示真实数据，缺失时使用演示数据
- 留言页增加公司联系信息展示，提升体验
- 个人中心页支持分享官网，展示演示数据防止空白
- 主页Banner支持无图时使用渐变背景和文字占位
- 统一使用演示数据，保证页面无空白，提升整体稳定性和用户体验

src/official/about/index.tsx

@@ -6,6 +6,7 @@ import type { CmsWebsite } from '@/api/official'
 import { getCompressedImageUrl } from '@/utils/image'
 import OfficialTabBar from '../components/OfficialTabBar'
 import NavBar from '@/components/NavBar'
+import { DEMO_SITE, DEMO_ADVANTAGES } from '../data/demo'
 
 definePageConfig({
   navigationBarTitleText: '关于我们',
@@ -22,8 +23,15 @@ const About: React.FC = () => {
       .finally(() => setLoading(false))
   }, [])
 
+  const effectiveSite: CmsWebsite = site ?? (DEMO_SITE as CmsWebsite)
   const aboutHtml =
-    (site as any)?.config?.about || (site as any)?.description || ''
+    (site as any)?.config?.about || (site as any)?.description || DEMO_SITE.config?.about || ''
+
+  const contact = {
+    phone: effectiveSite.phone || DEMO_SITE.phone,
+    email: effectiveSite.email || DEMO_SITE.email,
+    address: effectiveSite.address || DEMO_SITE.address,
+  }
 
   return (
     <View className='flex flex-col h-screen bg-gray-50'>
@@ -31,15 +39,21 @@ const About: React.FC = () => {
       <ScrollView scrollY className='flex-1'>
         <View className='p-4'>
           <View className='flex items-center mb-4'>
-            {site?.websiteLogo && (
+            {effectiveSite.websiteLogo ? (
               <Image
-                src={getCompressedImageUrl(site.websiteLogo, { width: 120 })}
+                src={getCompressedImageUrl(effectiveSite.websiteLogo, { width: 120 })}
                 className='w-16 h-16 rounded mr-3'
                 mode='aspectFill'
               />
+            ) : (
+              <View className='w-16 h-16 rounded bg-brand-600 flex items-center justify-center mr-3'>
+                <Text className='text-white text-2xl font-bold'>
+                  {(effectiveSite.websiteName || '官').slice(0, 1)}
+                </Text>
+              </View>
             )}
             <Text className='text-lg font-semibold text-gray-800'>
-              {site?.websiteName || '企业官网'}
+              {effectiveSite.websiteName || '企业官网'}
             </Text>
           </View>
 
@@ -51,10 +65,30 @@ const About: React.FC = () => {
             </Text>
           )}
 
+          {/* 企业优势 */}
+          <View className='mt-5'>
+            <View className='flex items-center mb-3'>
+              <View className='w-1 h-4 bg-brand-600 rounded mr-2' />
+              <Text className='text-base font-semibold text-gray-800'>企业优势</Text>
+            </View>
+            <View className='flex flex-wrap -mx-1'>
+              {DEMO_ADVANTAGES.map((a) => (
+                <View key={a.title} className='w-1/2 px-1 mb-2'>
+                  <View className='bg-white rounded-lg p-3 h-full'>
+                    <Text className='text-xl'>{a.icon}</Text>
+                    <Text className='text-sm font-medium text-gray-800 block mt-1'>{a.title}</Text>
+                    <Text className='text-xs text-gray-400 mt-0.5 leading-snug block'>{a.desc}</Text>
+                  </View>
+                </View>
+              ))}
+            </View>
+          </View>
+
+          {/* 联系方式 */}
           <View className='mt-4 bg-white rounded-lg p-4'>
-            <Text className='text-sm text-gray-500 block'>联系电话：{site?.phone || '—'}</Text>
-            <Text className='text-sm text-gray-500 block mt-2'>邮箱：{site?.email || '—'}</Text>
-            <Text className='text-sm text-gray-500 block mt-2'>地址：{site?.address || '—'}</Text>
+            <Text className='text-sm text-gray-500 block'>联系电话：{contact.phone || '—'}</Text>
+            <Text className='text-sm text-gray-500 block mt-2'>邮箱：{contact.email || '—'}</Text>
+            <Text className='text-sm text-gray-500 block mt-2'>地址：{contact.address || '—'}</Text>
           </View>
         </View>
       </ScrollView>