d8d-vite-starter/mobile-header-logo-implementation-plan.md

移动端一级页面HeaderLogo统一实施计划

项目概述

统一移动端所有一级页面顶部显示，采用HeaderLogo组件实现品牌一致性。

当前状态分析

已实现页面

• ✅ NewHomePage.tsx - 已正确使用HeaderLogo组件

  import HeaderLogo from '../components/HeaderLogo';
  // 使用位置：第334行
  <HeaderLogo className="flex-1" />
  

待更新页面

• ❌ SilverJobsPage.tsx - 使用自定义标题"银龄岗位"
• ❌ SilverTalentsPage.tsx - 使用自定义标题"银龄人才库"
• ❌ SilverWisdomPage.tsx - 需要检查
• ❌ TimeBankPage.tsx - 需要检查
• ❌ PolicyNewsPage.tsx - 需要检查
• ❌ ElderlyUniversityPage.tsx - 需要检查

HeaderLogo组件特性

组件属性

interface HeaderLogoProps {
  className?: string;
  logoSize?: 'sm' | 'md' | 'lg';  // 默认: 'md'
  showName?: boolean;             // 默认: true
}

样式规范

• 水墨风格配色方案
• 响应式设计
• 支持自定义样式扩展

更新规范

1. 导入语句

import HeaderLogo from '@/client/mobile/components/HeaderLogo';

2. 使用标准

• 一级页面：使用HeaderLogo作为顶部品牌标识
• 二级页面：可使用页面特定标题
• logoSize：一级页面使用md（默认）
• className：根据需要调整布局

3. 布局结构

<header className="sticky top-0 z-10 shadow-sm border-b px-4 py-4" 
        style={{ backgroundColor: 'rgba(255,255,255,0.8)', borderColor: INK_COLORS.ink.medium }}>
  <div className="flex items-center justify-between">
    <HeaderLogo />
    {/* 右侧操作按钮区域 */}
    <div className="flex items-center space-x-2">
      {/* 搜索、设置等按钮 */}
    </div>
  </div>
</header>

页面更新清单

优先级1：核心业务页面

1. SilverJobsPage.tsx - 银龄岗位页面
2. SilverTalentsPage.tsx - 银龄人才页面
3. SilverWisdomPage.tsx - 银龄知识页面

优先级2：服务页面

1. TimeBankPage.tsx - 时间银行页面
2. PolicyNewsPage.tsx - 政策资讯页面
3. ElderlyUniversityPage.tsx - 老年大学页面

优先级3：用户相关页面

1. ProfilePage/index.tsx - 用户资料页面
2. MemberPage.tsx - 会员中心页面

实施步骤

步骤1：更新SilverJobsPage.tsx

- import { INK_COLORS } from '@/client/mobile/styles/colors';
+ import HeaderLogo from '@/client/mobile/components/HeaderLogo';
+ import { INK_COLORS } from '@/client/mobile/styles/colors';

- <div>
-   <h1 className="font-serif text-xl font-bold" style={{ color: INK_COLORS.ink.deep }}>银龄岗位</h1>
-   <p className="text-xs mt-1" style={{ color: INK_COLORS.text.secondary }}>发现适合银龄人才的优质岗位</p>
- </div>
+ <HeaderLogo />

步骤2：更新SilverTalentsPage.tsx

- <h1 className="font-serif text-2xl font-bold tracking-wide"
-   style={{ color: COLORS.text.primary }}>
-   银龄人才库
- </h1>
+ <HeaderLogo />

步骤3：批量更新其他页面

统一使用HeaderLogo组件，移除自定义标题文本。

验证检查

1. 功能验证

• 所有一级页面正确显示HeaderLogo
• 品牌标识一致性
• 响应式布局正常
• 交互功能正常

2. 视觉验证

• 色彩方案统一
• 字体大小一致
• 间距布局合理
• 移动端适配良好

3. 用户体验

• 品牌认知度提升
• 页面导航清晰
• 操作按钮易于访问

技术实现

代码模式

// 标准头部组件
const PageHeader: React.FC<{ children?: React.ReactNode }> = ({ children }) => (
  <header className="sticky top-0 z-10 shadow-sm border-b px-4 py-4"
          style={{ backgroundColor: 'rgba(255,255,255,0.8)', borderColor: INK_COLORS.ink.medium }}>
    <div className="flex items-center justify-between">
      <HeaderLogo />
      {children}
    </div>
  </header>
);

// 使用方式
<PageHeader>
  <div className="flex items-center space-x-2">
    <SearchButton />
    <SettingsButton />
  </div>
</PageHeader>

注意事项

1. 向后兼容：确保不影响现有功能
2. 性能优化：HeaderLogo组件已优化，无需额外处理
3. 无障碍：保持可访问性标准
4. 测试覆盖：需要验证所有目标页面

完成标准

• 所有一级页面使用HeaderLogo组件
• 品牌视觉统一性达成
• 用户体验无明显下降
• 代码审查通过