3. 新闻资讯App（technical-architecture）

1. 架构设计

2. 技术描述

3. 路由定义

4. 核心组件结构

4.1 页面组件

src/
├── views/
│   ├── Home.vue          // 新闻首页
│   ├── Category.vue      // 分类新闻
│   ├── Hot.vue           // 热点新闻
│   ├── Video.vue         // 视频页面
│   ├── Profile.vue       // 个人中心
│   ├── NewsDetail.vue    // 新闻详情
│   ├── Comments.vue      // 评论页面
│   ├── Favorites.vue     // 收藏列表
│   └── Settings.vue      // 设置页面

4.2 公共组件

├── components/
│   ├── common/
│   │   ├── TabBar.vue        // 底部导航栏
│   │   ├── NewsCard.vue      // 新闻卡片
│   │   ├── Loading.vue       // 加载动画
│   │   └── PullRefresh.vue   // 下拉刷新组件
│   ├── home/
│   │   ├── Swiper.vue        // 轮播图组件
│   │   └── SearchBar.vue     // 搜索栏
│   └── comment/
│       ├── CommentItem.vue   // 评论项
│       └── CommentInput.vue  // 评论输入框

5. 状态管理设计

5.1 Pinia Store结构

// stores/user.js
export const useUserStore = defineStore('user', {
  state: () => ({
    userInfo: null,
    token: localStorage.getItem('token'),
    favorites: [],
    isLogin: false
  }),
  actions: {
    login(userData) { /* 登录逻辑 */ },
    logout() { /* 登出逻辑 */ },
    addFavorite(newsId) { /* 添加收藏 */ },
    removeFavorite(newsId) { /* 移除收藏 */ }
  }
})

// stores/news.js
export const useNewsStore = defineStore('news', {
  state: () => ({
    homeNews: [],
    categoryNews: {},
    hotNews: [],
    currentNews: null,
    comments: []
  }),
  actions: {
    async fetchHomeNews(page) { /* 获取首页新闻 */ },
    async fetchCategoryNews(categoryId, page) { /* 获取分类新闻 */ },
    async fetchHotNews() { /* 获取热点新闻 */ },
    async fetchNewsDetail(id) { /* 获取新闻详情 */ },
    async fetchComments(newsId) { /* 获取评论 */ }
  }
})

6. API接口设计

6.1 新闻相关接口

// 获取首页推荐新闻
GET /api/news/recommend?page={page}&size={size}
Response: {
  code: 200,
  data: {
    list: [...],
    hasMore: true,
    total: 100
  }
}

// 获取分类新闻
GET /api/news/category/{categoryId}?page={page}
Response: {
  code: 200,
  data: {
    list: [...],
    categoryName: "科技"
  }
}

// 获取热点新闻
GET /api/news/hot
Response: {
  code: 200,
  data: {
    list: [...],
    updateTime: "2024-01-01 12:00:00"
  }
}

// 获取新闻详情
GET /api/news/{id}
Response: {
  code: 200,
  data: {
    id: 1,
    title: "新闻标题",
    content: "新闻内容...",
    author: "作者",
    publishTime: "2024-01-01 10:00:00",
    viewCount: 1000
  }
}

6.2 用户相关接口

// 用户登录
POST /api/user/login
Request: {
  phone: "xxxx",
  password: "xxxx"
}
Response: {
  code: 200,
  data: {
    token: "eyJhbGc...",
    userInfo: {
      id: 1,
      nickname: "阿珊和她的猫",
      avatar: "头像URL"
    }
  }
}

// 获取收藏列表
GET /api/user/favorites
Headers: { Authorization: Bearer {token} }
Response: {
  code: 200,
  data: {
    list: [...],
    total: 10
  }
}

6.3 评论相关接口

// 获取评论列表
GET /api/comments/{newsId}?page={page}
Response: {
  code: 200,
  data: {
    list: [...],
    total: 50
  }
}

// 发表评论
POST /api/comments
Headers: { Authorization: Bearer {token} }
Request: {
  newsId: 1,
  content: "评论内容",
  parentId: 0 // 0表示一级评论
}
Response: {
  code: 200,
  data: {
    commentId: 123
  }
}

7. 移动端适配方案

7.1 响应式布局

• 使用Vant组件库内置的响应式组件
• 采用rem布局，根字体大小设置为37.5px（对应375px设计稿）
• 使用viewport meta标签控制缩放

7.2 触摸优化

// 下拉刷新实现
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
  <van-list
    v-model:loading="loading"
    :finished="finished"
    @load="onLoad"
  >
    <news-card v-for="item in list" :key="item.id" :news="item" />
  </van-list>
</van-pull-refresh>

7.3 性能优化

• 图片懒加载：使用Vant的Lazyload组件
• 虚拟滚动：长列表使用虚拟滚动优化
• 路由懒加载：按需加载页面组件
• 接口缓存：合理使用浏览器缓存策略