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

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

## 当前状态分析

### 已实现页面
- ✅ **NewHomePage.tsx** - 已正确使用HeaderLogo组件
  ```tsx
  import HeaderLogo from '../components/HeaderLogo';
  // 使用位置：第334行
  <HeaderLogo className="flex-1" />
  ```

### 待更新页面
- ❌ **SilverJobsPage.tsx** - 使用自定义标题"银龄岗位"
- ❌ **SilverTalentsPage.tsx** - 使用自定义标题"银龄人才库"
- ❌ **SilverWisdomPage.tsx** - 需要检查
- ❌ **TimeBankPage.tsx** - 需要检查
- ❌ **PolicyNewsPage.tsx** - 需要检查
- ❌ **ElderlyUniversityPage.tsx** - 需要检查

## HeaderLogo组件特性

### 组件属性
```typescript
interface HeaderLogoProps {
  className?: string;
  logoSize?: 'sm' | 'md' | 'lg';  // 默认: 'md'
  showName?: boolean;             // 默认: true
}
```

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

## 更新规范

### 1. 导入语句
```typescript
import HeaderLogo from '@/client/mobile/components/HeaderLogo';
```

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

### 3. 布局结构
```tsx
<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：服务页面
4. **TimeBankPage.tsx** - 时间银行页面
5. **PolicyNewsPage.tsx** - 政策资讯页面
6. **ElderlyUniversityPage.tsx** - 老年大学页面

### 优先级3：用户相关页面
7. **ProfilePage/index.tsx** - 用户资料页面
8. **MemberPage.tsx** - 会员中心页面

## 实施步骤

### 步骤1：更新SilverJobsPage.tsx
```diff
- 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
```diff
- <h1 className="font-serif text-2xl font-bold tracking-wide"
-   style={{ color: COLORS.text.primary }}>
-   银龄人才库
- </h1>
+ <HeaderLogo />
```

### 步骤3：批量更新其他页面
统一使用HeaderLogo组件，移除自定义标题文本。

## 验证检查

### 1. 功能验证
- [ ] 所有一级页面正确显示HeaderLogo
- [ ] 品牌标识一致性
- [ ] 响应式布局正常
- [ ] 交互功能正常

### 2. 视觉验证
- [ ] 色彩方案统一
- [ ] 字体大小一致
- [ ] 间距布局合理
- [ ] 移动端适配良好

### 3. 用户体验
- [ ] 品牌认知度提升
- [ ] 页面导航清晰
- [ ] 操作按钮易于访问

## 技术实现

### 代码模式
```tsx
// 标准头部组件
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组件
- [ ] 品牌视觉统一性达成
- [ ] 用户体验无明显下降
- [ ] 代码审查通过