d8d-vite-starter/policy-news-implementation-plan.md

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

项目概述

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

实体分析结果

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组）

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设计

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

6. 路由配置

新增路由

{
  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. 用户测试：银龄用户群体可用性测试