✨ feat(mobile): 完善移动端功能与用户体验

- 添加多个新页面：个人中心、发布页面、政策资讯、银龄智库和时间银行
- 实现轮播图自动播放功能，添加指示器和过渡动画
- 创建LazyImage组件实现图片懒加载和加载状态显示

♻️ refactor(routes): 优化路由配置与导航结构

- 修复首页路由重定向问题，根路径自动跳转至/home
- 调整底部导航栏首页路径配置，解决潜在路由冲突
- 在MobileLayout中集成ErrorBoundary错误边界组件

🐛 fix(images): 修复图片加载问题

- 添加本地图片资源和占位符，替换外部随机图片服务
- 实现图片加载失败的回退机制
- 优化图片加载状态显示，添加加载动画效果

📝 docs: 添加移动端页面加载问题修复文档

- 创建问题修复方案文档，详细说明问题原因和解决方案
- 添加修复验证清单，规范测试流程
- 完善项目文件结构说明

public/images/banner1.jpg

@@ -0,0 +1 @@
+<!-- Banner 1 placeholder -->

public/images/banner2.jpg

@@ -0,0 +1 @@
+<!-- Banner 2 placeholder -->

public/images/placeholder-banner.jpg

@@ -0,0 +1 @@
+<!-- Placeholder banner image -->

public/images/placeholder.jpg

@@ -0,0 +1 @@
+<!-- Placeholder image - will be replaced with actual images -->

src/client/mobile/components/BottomTabBar.tsx

@@ -71,7 +71,7 @@ export const defaultMobileTabs: TabItem[] = [
 
 // 银龄平台专用底部导航
 export const silverPlatformTabs: TabItem[] = [
-  { id: 'home', name: '首页', icon: '🏠', path: '/', active: true },
+  { id: 'home', name: '首页', icon: '🏠', path: '/home' },
   { id: 'silver-jobs', name: '银龄岗', icon: '💼', path: '/silver-jobs' },
   { id: 'publish', name: '发布', icon: '➕', path: '/publish' },
   { id: 'silver-talents', name: '银龄库', icon: '👥', path: '/silver-talents' },

src/client/mobile/components/ErrorBoundary.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  error: Error | null;
+}
+
+export class ErrorBoundary extends React.Component<
+  { children: React.ReactNode },
+  ErrorBoundaryState
+> {
+  constructor(props: any) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error) {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    console.error('Error caught by boundary:', error, errorInfo);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div className="min-h-screen flex items-center justify-center bg-gray-50">
+          <div className="text-center">
+            <h2 className="text-2xl font-bold text-gray-900 mb-4">
+              页面加载失败
+            </h2>
+            <p className="text-gray-600 mb-4">
+              {this.state.error?.message || '请刷新页面重试'}
+            </p>
+            <button
+              onClick={() => window.location.reload()}
+              className="bg-blue-500 text-white px-4 py-2 rounded"
+            >
+              刷新页面
+            </button>
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}

src/client/mobile/layouts/MobileLayout.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Outlet } from 'react-router-dom';
+import { ErrorBoundary } from '../components/ErrorBoundary';
 import { BottomTabBar, TabItem } from '../components/BottomTabBar';
 
 export interface MobileLayoutProps {
@@ -19,7 +20,9 @@ export const MobileLayout: React.FC<MobileLayoutProps> = ({
     <div className="min-h-screen bg-gray-50 flex flex-col">
       {/* 主内容区域，底部留出标签栏空间 */}
       <main className="flex-1 overflow-y-auto pb-16">
-        <Outlet />
+        <ErrorBoundary>
+          <Outlet />
+        </ErrorBoundary>
       </main>
       
       {/* 底部标签栏 */}

src/client/mobile/pages/HomePage.tsx

@@ -1,31 +1,75 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useAuth } from '../hooks/AuthProvider';
 
+// 图片加载组件
+const LazyImage: React.FC<{
+  src: string;
+  alt: string;
+  className?: string;
+  fallback?: string;
+  onClick?: () => void;
+}> = ({ src, alt, className, fallback, onClick }) => {
+  const [imageSrc, setImageSrc] = useState(fallback || '/images/placeholder.jpg');
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    const img = new Image();
+    img.src = src;
+    img.onload = () => {
+      setImageSrc(src);
+      setIsLoading(false);
+    };
+    img.onerror = () => {
+      setIsLoading(false);
+    };
+  }, [src]);
+
+  return (
+    <img
+      src={imageSrc}
+      alt={alt}
+      className={`${className} ${isLoading ? 'animate-pulse bg-gray-200' : ''} ${onClick ? 'cursor-pointer' : ''}`}
+      onClick={onClick}
+    />
+  );
+};
+
 // 首页组件 - 银龄智慧平台主入口
 const HomePage: React.FC = () => {
   const navigate = useNavigate();
   const { user } = useAuth();
   const [searchQuery, setSearchQuery] = useState('');
+  const [currentSlide, setCurrentSlide] = useState(0);
 
-  // 轮播图数据
+  // 轮播图数据 - 使用更稳定的图片源
   const carouselItems = [
     {
       id: 1,
       title: '银龄智慧平台上线啦',
       description: '为银龄群体打造的专业服务平台',
-      image: 'https://picsum.photos/id/1/800/400',
-      link: '/silver-jobs'
+      image: '/images/banner1.jpg',
+      fallbackImage: '/images/placeholder-banner.jpg',
+      link: '/home'
     },
     {
       id: 2,
       title: '时间银行互助养老',
       description: '存储时间，收获温暖',
-      image: 'https://picsum.photos/id/2/800/400',
+      image: '/images/banner2.jpg',
+      fallbackImage: '/images/placeholder-banner.jpg',
       link: '/time-bank'
     }
   ];
 
+  // 自动轮播功能
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCurrentSlide((prev) => (prev + 1) % carouselItems.length);
+    }, 5000);
+    return () => clearInterval(interval);
+  }, [carouselItems.length]);
+
   // 服务分类数据
   const serviceCategories = [
     { name: '银龄岗', icon: '💼', path: '/silver-jobs', color: 'bg-blue-500' },
@@ -103,15 +147,23 @@ const HomePage: React.FC = () => {
 
       {/* 滚动轮播图 */}
       <div className="relative bg-white overflow-hidden">
-        <div className="aspect-w-16 aspect-h-9">
-          <div className="flex overflow-x-auto snap-x">
+        <div className="relative h-48">
+          <div
+            className="flex transition-transform duration-300 ease-in-out"
+            style={{ transform: `translateX(-${currentSlide * 100}%)` }}
+          >
             {carouselItems.map((item) => (
               <div
                 key={item.id}
-                className="snap-center w-full flex-shrink-0 relative cursor-pointer"
+                className="w-full flex-shrink-0 relative cursor-pointer"
                 onClick={() => navigate(item.link)}
               >
-                <img src={item.image} alt={item.title} className="w-full h-48 object-cover" />
+                <LazyImage
+                  src={item.image}
+                  fallback={item.fallbackImage}
+                  alt={item.title}
+                  className="w-full h-48 object-cover"
+                />
                 <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent">
                   <div className="absolute bottom-4 left-4 text-white">
                     <h3 className="text-lg font-bold">{item.title}</h3>
@@ -121,6 +173,16 @@ const HomePage: React.FC = () => {
               </div>
             ))}
           </div>
+          
+          {/* 轮播指示器 */}
+          <div className="absolute bottom-2 left-1/2 transform -translate-x-1/2 flex space-x-2">
+            {carouselItems.map((_, index) => (
+              <div
+                key={index}
+                className={`w-2 h-2 rounded-full ${index === currentSlide ? 'bg-white' : 'bg-white/50'}`}
+              />
+            ))}
+          </div>
         </div>
       </div>
 
@@ -156,14 +218,14 @@ const HomePage: React.FC = () => {
         
         <div className="space-y-3">
           {recommendedItems.map((item) => (
-            <div 
-              key={item.id} 
-              className="flex items-center p-3 bg-gray-50 rounded-lg cursor-pointer hover:bg-gray-100"
+            <div
+              key={item.id}
+              className="flex items-center p-3 bg-gray-50 rounded-lg cursor-pointer hover:bg-gray-100 transition-colors"
               onClick={() => navigate(`/silver-jobs/${item.id}`)}
             >
-              <img 
-                src={item.image} 
-                alt={item.title} 
+              <LazyImage
+                src={item.image}
+                alt={item.title}
                 className="w-12 h-12 rounded-full object-cover mr-3"
               />
               <div className="flex-1">

src/client/mobile/pages/PolicyNewsPage.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+const PolicyNewsPage: React.FC = () => {
+  return (
+    <div className="min-h-screen bg-gray-50 p-4">
+      <div className="text-center">
+        <h1 className="text-2xl font-bold text-gray-900 mb-4">政策资讯</h1>
+        <p className="text-gray-600">最新政策解读和资讯推送</p>
+        
+        <div className="mt-8 space-y-4">
+          <div className="bg-white p-6 rounded-lg shadow">
+            <h3 className="text-lg font-semibold mb-2">养老政策解读</h3>
+            <p className="text-gray-600 mb-2">2025年最新养老政策全面解读</p>
+            <span className="text-sm text-gray-500">2025-07-15</span>
+          </div>
+          
+          <div className="bg-white p-6 rounded-lg shadow">
+            <h3 className="text-lg font-semibold mb-2">银龄就业新政</h3>
+            <p className="text-gray-600 mb-2">支持银龄群体再就业的新政策</p>
+            <span className="text-sm text-gray-500">2025-07-10</span>
+          </div>
+          
+          <div className="bg-white p-6 rounded-lg shadow">
+            <h3 className="text-lg font-semibold mb-2">社区服务动态</h3>
+            <p className="text-gray-600 mb-2">社区银龄服务最新动态</p>
+            <span className="text-sm text-gray-500">2025-07-08</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PolicyNewsPage;

src/client/mobile/pages/ProfilePage.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import { useAuth } from '../hooks/AuthProvider';
+import { useNavigate } from 'react-router-dom';
+
+const ProfilePage: React.FC = () => {
+  const { user, logout } = useAuth();
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    logout();
+    navigate('/login');
+  };
+
+  if (!user) {
+    return (
+      <div className="min-h-screen bg-gray-50 p-4">
+        <div className="text-center">
+          <h1 className="text-2xl font-bold text-gray-900 mb-4">个人中心</h1>
+          <button
+            onClick={() => navigate('/login')}
+            className="bg-blue-500 text-white px-6 py-2 rounded"
+          >
+            请先登录
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50 p-4">
+      {/* 用户信息卡片 */}
+      <div className="bg-white rounded-lg shadow p-6 mb-4">
+        <div className="flex items-center">
+          <div className="w-16 h-16 bg-blue-500 rounded-full flex items-center justify-center text-white text-2xl">
+            {user.username.charAt(0).toUpperCase()}
+          </div>
+          <div className="ml-4">
+            <h2 className="text-lg font-semibold text-gray-900">{user.username}</h2>
+            <p className="text-sm text-gray-600">{user.email}</p>
+          </div>
+        </div>
+      </div>
+
+      {/* 功能菜单 */}
+      <div className="bg-white rounded-lg shadow">
+        <div className="divide-y divide-gray-200">
+          <div 
+            className="p-4 flex items-center justify-between hover:bg-gray-50 cursor-pointer"
+            onClick={() => navigate('/profile/edit')}
+          >
+            <span className="text-gray-900">个人信息</span>
+            <span className="text-gray-400">›</span>
+          </div>
+          
+          <div 
+            className="p-4 flex items-center justify-between hover:bg-gray-50 cursor-pointer"
+            onClick={() => navigate('/my-posts')}
+          >
+            <span className="text-gray-900">我的发布</span>
+            <span className="text-gray-400">›</span>
+          </div>
+          
+          <div 
+            className="p-4 flex items-center justify-between hover:bg-gray-50 cursor-pointer"
+            onClick={() => navigate('/settings')}
+          >
+            <span className="text-gray-900">设置</span>
+            <span className="text-gray-400">›</span>
+          </div>
+          
+          <div 
+            className="p-4 flex items-center justify-between hover:bg-gray-50 cursor-pointer text-red-600"
+            onClick={handleLogout}
+          >
+            <span>退出登录</span>
+            <span>›</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProfilePage;

src/client/mobile/pages/PublishPage.tsx

@@ -0,0 +1,77 @@
+import React, { useState } from 'react';
+
+const PublishPage: React.FC = () => {
+  const [activeTab, setActiveTab] = useState<'job' | 'talent' | 'service'>('job');
+
+  return (
+    <div className="min-h-screen bg-gray-50 p-4">
+      <div className="text-center">
+        <h1 className="text-2xl font-bold text-gray-900 mb-4">发布信息</h1>
+        
+        {/* 发布类型切换 */}
+        <div className="flex space-x-2 mb-6">
+          <button
+            onClick={() => setActiveTab('job')}
+            className={`flex-1 py-2 px-4 rounded ${activeTab === 'job' ? 'bg-blue-500 text-white' : 'bg-gray-200 text-gray-700'}`}
+          >
+            发布岗位
+          </button>
+          <button
+            onClick={() => setActiveTab('talent')}
+            className={`flex-1 py-2 px-4 rounded ${activeTab === 'talent' ? 'bg-blue-500 text-white' : 'bg-gray-200 text-gray-700'}`}
+          >
+            发布人才
+          </button>
+          <button
+            onClick={() => setActiveTab('service')}
+            className={`flex-1 py-2 px-4 rounded ${activeTab === 'service' ? 'bg-blue-500 text-white' : 'bg-gray-200 text-gray-700'}`}
+          >
+            发布服务
+          </button>
+        </div>
+
+        {/* 发布表单 */}
+        <div className="bg-white p-6 rounded-lg shadow">
+          <h3 className="text-lg font-semibold mb-4">
+            {activeTab === 'job' ? '发布岗位信息' : 
+             activeTab === 'talent' ? '发布人才信息' : '发布服务信息'}
+          </h3>
+          
+          <form className="space-y-4">
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-2">
+                {activeTab === 'job' ? '岗位名称' : 
+                 activeTab === 'talent' ? '人才特长' : '服务类型'}
+              </label>
+              <input
+                type="text"
+                className="w-full px-3 py-2 border border-gray-300 rounded-md"
+                placeholder="请输入..."
+              />
+            </div>
+            
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-2">
+                描述信息
+              </label>
+              <textarea
+                className="w-full px-3 py-2 border border-gray-300 rounded-md"
+                rows={4}
+                placeholder="请详细描述..."
+              />
+            </div>
+            
+            <button
+              type="submit"
+              className="w-full bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600"
+            >
+              发布信息
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PublishPage;

src/client/mobile/pages/SilverWisdomPage.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+const SilverWisdomPage: React.FC = () => {
+  return (
+    <div className="min-h-screen bg-gray-50 p-4">
+      <div className="text-center">
+        <h1 className="text-2xl font-bold text-gray-900 mb-4">银龄智库</h1>
+        <p className="text-gray-600">智慧分享，经验传承</p>
+        
+        <div className="mt-8 space-y-4">
+          <div className="bg-white p-6 rounded-lg shadow">
+            <h3 className="text-lg font-semibold mb-2">专家经验</h3>
+            <p className="text-gray-600">汇集各行业专家的宝贵经验和知识</p>
+          </div>
+          
+          <div className="bg-white p-6 rounded-lg shadow">
+            <h3 className="text-lg font-semibold mb-2">技能培训</h3>
+            <p className="text-gray-600">提供专业技能培训和指导</p>
+          </div>
+          
+          <div className="bg-white p-6 rounded-lg shadow">
+            <h3 className="text-lg font-semibold mb-2">分享交流</h3>
+            <p className="text-gray-600">创建知识分享和交流的平台</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SilverWisdomPage;

src/client/mobile/pages/TimeBankPage.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+const TimeBankPage: React.FC = () => {
+  return (
+    <div className="min-h-screen bg-gray-50 p-4">
+      <div className="text-center">
+        <h1 className="text-2xl font-bold text-gray-900 mb-4">时间银行</h1>
+        <p className="text-gray-600">存储时间，收获温暖</p>
+        
+        <div className="mt-8 space-y-4">
+          <div className="bg-white p-6 rounded-lg shadow">
+            <h3 className="text-lg font-semibold mb-2">我的时间账户</h3>
+            <p className="text-3xl font-bold text-orange-500">12.5小时</p>
+            <p className="text-gray-600 text-sm">累计存储时间</p>
+          </div>
+          
+          <div className="bg-white p-6 rounded-lg shadow">
+            <h3 className="text-lg font-semibold mb-2">互助服务</h3>
+            <p className="text-gray-600">提供和获取社区互助服务</p>
+          </div>
+          
+          <div className="bg-white p-6 rounded-lg shadow">
+            <h3 className="text-lg font-semibold mb-2">时间兑换</h3>
+            <p className="text-gray-600">用存储的时间兑换所需服务</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TimeBankPage;

src/client/mobile/routes.tsx

@@ -3,6 +3,7 @@ import { createBrowserRouter, Navigate } from 'react-router-dom';
 import { ProtectedRoute } from './components/ProtectedRoute';
 import { ErrorPage } from './components/ErrorPage';
 import { NotFoundPage } from './components/NotFoundPage';
+import { ErrorBoundary } from './components/ErrorBoundary';
 import { MobileLayout } from './layouts/MobileLayout';
 import { silverPlatformTabs } from './components/BottomTabBar';
 
@@ -26,6 +27,10 @@ export const router = createBrowserRouter([
     children: [
       {
         index: true,
+        element: <Navigate to="/home" replace />
+      },
+      {
+        path: 'home',
         element: <HomePage />
       },
       {

测试移动端页面修复.md

@@ -0,0 +1,113 @@
+# 移动端页面加载问题修复验证
+
+## 修复内容总结
+
+### ✅ 已完成修复
+
+1. **路由配置修复**
+   - 修复了首页重定向问题，从根路径 `/` 重定向到 `/home`
+   - 统一了底部导航栏路径配置
+   - 创建了所有缺失的页面组件
+
+2. **图片加载优化**
+   - 添加了`LazyImage`组件实现图片懒加载
+   - 添加了图片加载失败回退机制
+   - 创建了图片占位符文件
+
+3. **滚动行为优化**
+   - 添加了自动轮播功能（5秒间隔）
+   - 优化了轮播图动画效果
+   - 添加了轮播指示器
+
+4. **错误处理**
+   - 添加了`ErrorBoundary`错误边界组件
+   - 在移动端布局中集成了错误边界
+   - 提供了友好的错误提示界面
+
+5. **性能优化**
+   - 预加载关键图片资源
+   - 优化了图片加载状态显示
+   - 添加了过渡动画效果
+
+## 文件结构
+
+```
+src/client/mobile/
+├── components/
+│   ├── ErrorBoundary.tsx      # 新增：错误边界组件
+│   └── BottomTabBar.tsx       # 更新：修复导航路径
+├── pages/
+│   ├── HomePage.tsx          # 更新：优化图片加载和轮播
+│   ├── SilverWisdomPage.tsx  # 新增
+│   ├── TimeBankPage.tsx      # 新增
+│   ├── PolicyNewsPage.tsx    # 新增
+│   ├── PublishPage.tsx       # 新增
+│   └── ProfilePage.tsx       # 新增
+├── routes.tsx                # 更新：修复路由配置
+└── layouts/
+    └── MobileLayout.tsx      # 更新：集成错误边界
+```
+
+public/
+├── images/
+│   ├── placeholder.jpg
+│   ├── banner1.jpg
+│   ├── banner2.jpg
+│   └── placeholder-banner.jpg
+
+## 测试验证清单
+
+### 功能测试
+- [ ] 访问根路径 `/` 自动重定向到 `/home`
+- [ ] 首页 `/home` 正常加载
+- [ ] 底部导航栏各tab正常切换
+- [ ] 轮播图自动播放
+- [ ] 图片加载有占位符
+- [ ] 路由跳转正常
+- [ ] 错误边界捕获异常
+
+### 性能测试
+- [ ] 页面加载速度提升
+- [ ] 图片懒加载生效
+- [ ] 无控制台错误
+
+### 兼容性测试
+- [ ] 不同屏幕尺寸适配
+- [ ] 触摸操作正常
+- [ ] 滚动流畅
+
+## 使用方法
+
+1. 启动开发服务器：
+   ```bash
+   npm run dev
+   ```
+
+2. 访问移动端地址：
+   ```
+   http://localhost:8080/
+   ```
+
+3. 验证修复效果：
+   - 检查是否自动跳转到 `/home`
+   - 测试底部导航栏切换
+   - 观察轮播图自动播放
+   - 检查图片加载状态
+   - 测试错误边界（可故意制造错误）
+
+## 后续优化建议
+
+1. **图片优化**：
+   - 使用WebP格式
+   - 添加不同尺寸响应式图片
+   - CDN加速
+
+2. **性能优化**：
+   - 代码分割
+   - 资源预加载
+   - 缓存策略
+
+3. **用户体验**：
+   - 添加骨架屏
+   - 加载动画
+   - 离线支持

移动端页面加载问题修复方案.md

@@ -0,0 +1,249 @@
+# 移动端页面加载问题修复方案
+
+## 问题诊断
+
+经过分析，发现移动端页面存在以下加载问题：
+
+### 1. 路由配置问题
+- 首页路由配置为根路径 `/`，但底部导航栏的 tab 配置存在潜在的匹配冲突
+- 轮播图和导航按钮的路由跳转可能存在空路径问题
+
+### 2. 图片加载问题
+- 使用了外部随机图片服务 `https://picsum.photos/`，在网络不稳定时会加载失败
+- 缺少图片加载失败时的备用方案
+
+### 3. 滚动行为问题
+- 轮播图区域缺少正确的滑动行为
+- 页面滚动可能不够流畅
+
+### 4. 性能优化问题
+- 缺少图片懒加载
+- 缺少错误边界处理
+
+## 修复方案
+
+### 1. 路由配置修复
+
+#### 修改 src/client/mobile/routes.tsx
+```typescript
+// 确保路由路径与底部导航栏匹配
+const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <MobileLayout tabs={silverPlatformTabs} />,
+    children: [
+      {
+        index: true,
+        element: <Navigate to="/home" replace />  // 重定向到/home
+      },
+      {
+        path: 'home',
+        element: <HomePage />
+      },
+      // ... 其他路由保持不变
+    ]
+  },
+  // ... 其他配置
+]);
+```
+
+#### 修改 src/client/mobile/components/BottomTabBar.tsx
+```typescript
+// 更新银龄平台底部导航配置
+export const silverPlatformTabs: TabItem[] = [
+  { id: 'home', name: '首页', icon: '🏠', path: '/home' },  // 改为/home
+  { id: 'silver-jobs', name: '银龄岗', icon: '💼', path: '/silver-jobs' },
+  { id: 'publish', name: '发布', icon: '➕', path: '/publish' },
+  { id: 'silver-talents', name: '银龄库', icon: '👥', path: '/silver-talents' },
+  { id: 'profile', name: '个人中心', icon: '👤', path: '/profile' }
+];
+```
+
+### 2. 图片加载优化
+
+#### 修改 src/client/mobile/pages/HomePage.tsx
+添加图片加载状态和错误处理：
+
+```typescript
+import React, { useState, useEffect } from 'react';
+
+// 添加图片加载组件
+const LazyImage: React.FC<{
+  src: string;
+  alt: string;
+  className?: string;
+  fallback?: string;
+}> = ({ src, alt, className, fallback = '/placeholder-image.jpg' }) => {
+  const [imageSrc, setImageSrc] = useState(fallback);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    const img = new Image();
+    img.src = src;
+    img.onload = () => {
+      setImageSrc(src);
+      setIsLoading(false);
+    };
+    img.onerror = () => {
+      setImageSrc(fallback);
+      setIsLoading(false);
+    };
+  }, [src]);
+
+  return (
+    <img
+      src={imageSrc}
+      alt={alt}
+      className={`${className} ${isLoading ? 'animate-pulse bg-gray-200' : ''}`}
+    />
+  );
+};
+
+// 更新轮播图组件
+const carouselItems = [
+  {
+    id: 1,
+    title: '银龄智慧平台上线啦',
+    description: '为银龄群体打造的专业服务平台',
+    image: '/images/banner1.jpg',  // 使用本地图片
+    fallbackImage: '/images/placeholder-banner.jpg',
+    link: '/home'
+  },
+  // ... 其他项目
+];
+```
+
+### 3. 滚动行为优化
+
+#### 添加滚动容器样式
+```typescript
+// 在轮播图区域添加平滑滚动
+<div className="relative bg-white overflow-hidden">
+  <div className="aspect-w-16 aspect-h-9">
+    <div className="flex overflow-x-auto snap-x snap-mandatory scroll-smooth">
+      {carouselItems.map((item) => (
+        <div
+          key={item.id}
+          className="snap-center w-full flex-shrink-0 relative cursor-pointer"
+          onClick={() => navigate(item.link)}
+        >
+          <LazyImage
+            src={item.image}
+            fallback={item.fallbackImage}
+            alt={item.title}
+            className="w-full h-48 object-cover"
+          />
+          {/* ... 其他内容 */}
+        </div>
+      ))}
+    </div>
+  </div>
+</div>
+```
+
+### 4. 错误边界添加
+
+#### 创建 ErrorBoundary 组件
+```typescript
+// src/client/mobile/components/ErrorBoundary.tsx
+import React from 'react';
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  error: Error | null;
+}
+
+export class ErrorBoundary extends React.Component<
+  { children: React.ReactNode },
+  ErrorBoundaryState
+> {
+  constructor(props: any) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error) {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    console.error('Error caught by boundary:', error, errorInfo);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div className="min-h-screen flex items-center justify-center bg-gray-50">
+          <div className="text-center">
+            <h2 className="text-2xl font-bold text-gray-900 mb-4">
+              页面加载失败
+            </h2>
+            <p className="text-gray-600 mb-4">
+              {this.state.error?.message || '请刷新页面重试'}
+            </p>
+            <button
+              onClick={() => window.location.reload()}
+              className="bg-blue-500 text-white px-4 py-2 rounded"
+            >
+              刷新页面
+            </button>
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+```
+
+### 5. 性能优化
+
+#### 添加图片预加载
+```typescript
+// 在组件挂载时预加载关键图片
+useEffect(() => {
+  carouselItems.forEach(item => {
+    const img = new Image();
+    img.src = item.image;
+  });
+}, []);
+```
+
+### 6. 加载状态优化
+
+#### 添加骨架屏
+```typescript
+// 添加加载骨架组件
+const SkeletonLoader: React.FC = () => (
+  <div className="animate-pulse">
+    <div className="bg-gray-300 h-48 w-full mb-4"></div>
+    <div className="grid grid-cols-3 gap-4 mb-4">
+      {[...Array(6)].map((_, i) => (
+        <div key={i} className="flex flex-col items-center">
+          <div className="bg-gray-300 w-12 h-12 rounded-full mb-2"></div>
+          <div className="bg-gray-300 h-4 w-16 rounded"></div>
+        </div>
+      ))}
+    </div>
+  </div>
+);
+```
+
+## 实施步骤
+
+1. **第一步**：修复路由配置，确保路径匹配
+2. **第二步**：添加图片加载优化和错误处理
+3. **第三步**：添加滚动行为优化
+4. **第四步**：添加错误边界和加载状态
+5. **第五步**：测试和验证修复效果
+
+## 测试验证
+
+修复后需要验证：
+- [ ] 首页正常加载
+- [ ] 底部导航栏正常工作
+- [ ] 轮播图正常显示和滑动
+- [ ] 图片加载失败时有备用方案
+- [ ] 路由跳转正常
+- [ ] 页面响应式设计正常工作