# 政策资讯移动前端页面实现计划

## 项目概述
基于现有银龄智慧移动端，为政策资讯实体创建符合水墨风格的展示页面。

## 实体分析结果

### PolicyNews实体字段
- **id**: 资讯ID
- **newsTitle**: 资讯标题
- **newsContent**: 资讯内容
- **publishTime**: 发布时间
- **viewCount**: 阅读量
- **images**: 图片URL（逗号分隔）
- **summary**: 资讯摘要
- **source**: 资讯来源
- **category**: 资讯分类
- **isFeatured**: 是否精选
- **isDeleted**: 删除状态

### 现有结构分析
- ✅ 实体已定义：src/server/modules/silver-users/policy-news.entity.ts
- ✅ 路由已配置：/policy-news
- ✅ 首页已链接：NewHomePage.tsx第87-91行
- ⚠️ 页面需增强：当前PolicyNewsPage.tsx过于简单
- ❌ 模拟数据未创建
- ❌ 详情页面未实现

## 开发计划

### 1. 文件结构
```
src/client/mobile/
├── data/mockPolicyNewsData.ts      # 模拟数据
├── hooks/usePolicyNewsData.ts      # 数据获取Hook
├── components/PolicyNewsCard.tsx   # 资讯卡片组件
├── pages/PolicyNewsPage.tsx        # 主列表页面
└── pages/PolicyNewsDetailPage.tsx  # 详情页面
```

### 2. 模拟数据设计（6组）

```typescript
const mockPolicyNews = [
  {
    id: 1,
    newsTitle: "2025年最新养老政策全面解读",
    newsContent: "国务院办公厅近日印发《关于积极应对人口老龄化的实施意见》，提出了一系列支持银龄群体的新政策...",
    publishTime: "2025-07-20T09:00:00Z",
    viewCount: 1258,
    images: "/images/policy1.jpg,/images/policy1-1.jpg",
    summary: "2025年养老政策重大调整，涉及养老金、医疗保障、社区服务等多个方面",
    source: "中国政府网",
    category: "政策法规",
    isFeatured: 1
  },
  {
    id: 2,
    newsTitle: "银龄就业促进法草案征求意见",
    newsContent: "为充分发挥银龄人才资源优势，国家拟制定《银龄就业促进法》...",
    publishTime: "2025-07-18T14:30:00Z",
    viewCount: 892,
    images: "/images/policy2.jpg",
    summary: "银龄就业促进法草案公开征求意见，重点关注反年龄歧视和就业保障",
    source: "人社部官网",
    category: "就业政策",
    isFeatured: 1
  },
  {
    id: 3,
    newsTitle: "社区养老服务设施新标准发布",
    newsContent: "住建部发布《社区养老服务设施规划建设标准》，对社区养老服务设施的规划...",
    publishTime: "2025-07-15T10:15:00Z",
    viewCount: 567,
    images: "/images/policy3.jpg,/images/policy3-1.jpg,/images/policy3-2.jpg",
    summary: "社区养老服务设施建设有了新标准，要求每万人不少于200平方米",
    source: "住建部官网",
    category: "社区建设",
    isFeatured: 0
  },
  {
    id: 4,
    newsTitle: "智慧养老产业发展三年行动计划",
    newsContent: "工信部联合多部门印发《智慧养老产业发展三年行动计划(2025-2027年)》...",
    publishTime: "2025-07-12T08:30:00Z",
    viewCount: 743,
    images: "/images/policy4.jpg",
    summary: "智慧养老产业迎来政策红利期，重点支持AI、物联网等技术在养老领域应用",
    source: "工信部官网",
    category: "产业发展",
    isFeatured: 1
  },
  {
    id: 5,
    newsTitle: "银龄健康管理体系建设指导意见",
    newsContent: "国家卫健委发布《银龄健康管理体系建设指导意见》，提出建立覆盖城乡的...",
    publishTime: "2025-07-10T15:45:00Z",
    viewCount: 456,
    images: "/images/policy5.jpg,/images/policy5-1.jpg",
    summary: "构建覆盖全国的银龄健康管理体系，实现健康档案、慢病管理、紧急救助一体化",
    source: "国家卫健委",
    category: "健康政策",
    isFeatured: 0
  },
  {
    id: 6,
    newsTitle: "老年教育促进条例正式施行",
    newsContent: "《老年教育促进条例》于2025年7月1日起正式施行，条例明确了老年教育的...",
    publishTime: "2025-07-01T09:00:00Z",
    viewCount: 1203,
    images: "/images/policy6.jpg",
    summary: "老年教育促进条例正式施行，保障老年人受教育权利，推动终身学习体系建设",
    source: "全国人大网",
    category: "教育政策",
    isFeatured: 1
  }
]
```

### 3. 页面组件设计

#### PolicyNewsPage - 主列表页面
- **布局**：顶部标题栏 + 资讯列表
- **功能**：下拉刷新、上拉加载更多、搜索过滤
- **样式**：水墨风格卡片，圆角设计
- **交互**：点击进入详情

#### PolicyNewsCard - 资讯卡片
- **展示内容**：
  - 资讯图片（首张或默认占位图）
  - 标题
  - 摘要（前50字）
  - 发布时间
  - 阅读量
  - 分类标签
  - 来源
- **特色标识**：精选内容特殊标记

#### PolicyNewsDetailPage - 详情页面
- **布局**：顶部返回栏 + 内容区域
- **功能**：分享、收藏、返回
- **内容**：
  - 标题
  - 发布时间
  - 阅读量
  - 来源
  - 完整内容
  - 相关图片（轮播展示）

### 4. 水墨风格实现要点

#### 色彩应用
- 背景：宣纸色 #f5f3f0
- 卡片：半透明白色 rgba(255,255,255,0.8)
- 文字：墨色 #2f1f0f
- 强调：朱砂红 #a85c5c 或 花青蓝 #4a6b7c

#### 字体层级
- 标题：font-serif 24px bold
- 内容：font-sans 16px normal
- 辅助：font-sans 14px/12px secondary

#### 交互动效
- 卡片悬停：hover:shadow-lg 300ms ease-in-out
- 图片加载：淡入动画
- 下拉刷新：旋转图标

### 5. 数据获取策略

#### Hook设计
```typescript
const usePolicyNewsData = () => {
  // 优先获取真实数据
  const { data: realData, isLoading, error } = useQuery(...)
  
  // 真实数据为空时使用模拟数据
  const displayData = realData?.length > 0 ? realData : mockPolicyNews
  
  return { data: displayData, isLoading, error }
}
```

### 6. 路由配置

#### 新增路由
```typescript
{
  path: 'policy-news/:id',
  element: <PolicyNewsDetailPage />
}
```

### 7. 实现顺序

1. 创建模拟数据文件
2. 创建PolicyNewsCard组件
3. 重构PolicyNewsPage页面
4. 创建PolicyNewsDetailPage
5. 创建usePolicyNewsData Hook
6. 更新路由配置
7. 测试首页跳转功能
8. 样式优化和验证

### 8. 验证检查清单

- [ ] 首页点击"政策资讯"正确跳转
- [ ] 6组模拟数据完整展示
- [ ] 水墨风格样式正确应用
- [ ] 真实数据优先，模拟数据兜底
- [ ] 响应式布局适配移动端
- [ ] 交互动效流畅自然
- [ ] 页面加载性能良好

## 注意事项

1. **兼容性**：确保iOS 14+、Android 8+兼容
2. **性能**：图片懒加载、虚拟滚动优化
3. **可访问性**：支持系统字体缩放
4. **网络**：弱网环境下的优雅降级
5. **安全**：XSS防护、内容安全策略

## 测试要点

1. **功能测试**：数据加载、页面跳转、搜索过滤
2. **样式测试**：不同屏幕尺寸适配
3. **性能测试**：页面加载时间、滚动流畅度
4. **兼容性测试**：主流浏览器、微信浏览器
5. **用户测试**：银龄用户群体可用性测试