# 从0实现一个年度报告

每到年底各大应用都会推出自己的年终总结报告，统计出用户一年来在应用内的行为展示给用户，供用户记录、分享。

今年掘金社区推出了自己的[2022掘友年度报告](https://zjsms.com/hbdA5jR)，这次我们仿照这个报告，从0开始自己实现一个年终总结报告页面

## 实现难点

### 1. 数据模拟

一般情况下是根据用户UID，到后端去请求相关接口获得统计数据。

例如掘金的接口为`https://api.juejin.cn/event_api/v1/annual/annual_summary?aid=xxxxxx`

本次后端使用`NodeJS`实现了一个爬虫，可以将用户数据统计完成后导出JSON格式的数据，将此数据粘贴到前端页面的输入框即可生成自己的报告

### 2. 屏幕适配

可以观察到，在PC端和在手机端访问年度报告展示的效果是不一样的。

本次考虑使用媒体查询来实现这个功能：

- 宽屏则展示背景，页面切换也使用背景中的上下切换按钮
- 小屏则隐藏背景，让内容填满屏幕，页面切换通过滑动事件监听

### 3. 动画效果

动画分为文本与背景元素的动画

- 背景元素的动画使用了SVG动画
    - 动画中不动的部分直接使用`.png`图片
    - 运动的部分使用SVG动画绘制，如克里克的眼睛、尾巴
- 文本的动画使用了`CSS Animation`渐显的效果
    - 不同段落之间通过`animation-delay`属性，彼此相差`1000ms`

背景动画容器的四个位置：`左上角` `右下角` `中间部分` `中间（悬浮气泡）`。不同位置的动画容器都采用绝对定位`position: absolute;`，辅以`z-index`实现层叠

囿于工期，本次的背景动画直接采用静态图片+`CSS Animation`实现上下浮动的效果

### 4. 音乐播放

通过`Audio`接口访问网络音乐链接，控制音乐相关功能

- 进入页面开始播放
- 离开页面暂停播放
- 支持点击按钮切换播放状态

## 用户数据

### 用户数据内容

```
- 用户名
- 注册时间 距今天数
- 创作相关
    - 发布文章数
    - 总阅读数 总赞数 总评论数
    - 掘力值增长 超过人数百分比
    - 最受欢迎的文章标题
- 社交相关
    - 多少位掘友看过你的文章
    - 点赞最多的掘友 评论最多的掘友
- 学习相关
    - 阅读文章数 点赞数 评论数
    - 总阅读字数
    - 最关注的技术领域TOP3
- 沸点相关
    - 发布沸点数 互动掘友数 点赞数 收赞数
    - 互动最频繁的掘友
- 深夜阅读
    - 最晚一次阅读时间
    - 阅读的文章标题
- 早起阅读
    - 最晚一次阅读时间
    - 阅读的文章标题
- 最终总结
    - 用户名
    - 获得成就 饼图
```

### 数据模拟

根据不同页面分配不同的字段与数据，我根据自己的报告模拟了以下JSON数据

```json
{"pages":[{"id":0,"data":{"userName":"Ziu","enterDay":1647619200000,"tillNow":291}},{"id":1,"data":{"publishArticle":187,"getReader":78959,"getLike":393,"getComment":13,"increment":3693,"rate":0.9773,"mostPopularArticle":"深入理解浏览器缓存原理"}},{"id":2,"data":{"growFriends":2861,"mostLike":"老边","mostComment":"重载新生"}},{"id":3,"data":{"mostGoodAt":["JavaScript","Vue3","TypeScript"]}},{"id":4,"data":{"readed":1397,"like":1347,"comment":1345,"words":"244万","mostFocus":["前端","JavaScript","Vue.js"]}},{"id":5,"data":{"oftenRead":[{"name":"seloven","followed":0},{"name":"掘金酱","followed":1},{"name":"CLICK克里克","followed":1},{"name":"稀土君","followed":1},{"name":"cc123nice","followed":0}]}},{"id":6,"data":{"publishPin":395,"interact":1283,"like":705,"getLike":374,"mostInteractWith":"狗哥哥"}},{"id":7,"data":{"mostLateTime":1665768240000,"publishArticle":"深入理解浏览器缓存原理"}},{"id":8,"data":{"mostEarlyTime":1661208660000,"publishArticle":"深入理解Proxy与Reflect"}},{"id":9,"data":{"nickName":"Ziu","ability":"学习力","analysis":"滴水石穿，读百篇尽显敏而好学","medal":["与你同行","笔耕不辍","博览群文","高才掘学","前排围观"]}}]}
```

## 编码中遇到的问题

### 音乐自动播放的问题

之前我希望不操作DOM，而是通过`new Audio()`更优雅的实现音频播放。实际情况是：浏览器禁用了无用户操作的音频自动播放，要想实现自动播放有两种解决方法：

- HTML标签`<audio>`添加`autoplay`属性 后续播放/暂停都需要操作DOM
- 为界面添加监听器，监听到用户操作后手动触发`audio.play()`

为了保证功能实现的稳定性，我选择了前者。

```js
// useAudio.js
import { ref } from 'vue'

const defaultURL = 'https://xxxxxxxxxxxxxxxxxxxxxxxx.mp3'

export default function useAudio(url = defaultURL) {
  const audio = new Audio(url)
  audio.loop = true

  const playStatus = ref(false)

  const play = () => {
    audio.play()
    playStatus.value = true
  }

  const pause = () => {
    audio.pause()
    playStatus.value = false
  }

  return {
    audio, play, pause, playStatus
  }
}
```

### VNode调整样式的问题

项目使用的框架是Vue3，部分页面使用到了JSX语法，众所周知JSX语法定义的组件返回的是一个VNode树，要想统一为树上元素添加渐变的样式则需要遍历他们。

需要遍历树上所有元素，并分别为他们添加不同值的`animation-delay`属性：

```js
  const children = DOM.children
  for (let i = 1; i < children.length; i++) {
    const child = children[i]
    child.props
      ? (child.props.style = { animationDelay: `${i * 1000}ms` })
      : Object.assign(child, {
          props: { style: { animationDelay: `${i * 1000}ms` } }
        })
  }
```

`style`属性并不是VNode的直接属性，而放在`props`上的

### 监听`Animation`结束事件并更新响应式变量

如果当前页所有的动画都播放完毕，则需要将播放完的事件通知给JavaScript并将状态更新到响应式的变量中

在前文遍历DOM树时，为树中最后一个动画节点添加`animationend`监听回调，回调函数中执行`document.dispatchEvent(e)`，其中`e`是通过`const e = new CustomEvent('custom-animationend')`创建的自定义事件

回调触发时，在别处的`onMounted`回调内监听该自定义事件的触发，并更新响应式变量

### 切换页面支持触控滑动滚轮键盘

由于年终总结报告需要考虑到多种终端用户的体验，所以需要对翻页操作进行更多的优化

监听页面的触控滑动事件、滚轮滚动事件，并且匹配上翻页操作

```js
  // 监听移动端滑动事件
  let startY = 0
  let endY = 0
  document.addEventListener('touchstart', (e) => {
    startY = e.touches[0].clientY
  })
  document.addEventListener('touchend', (e) => {
    endY = e.changedTouches[0].clientY
    if (endY - startY > 50) {
      prevPage()
    } else if (endY - startY < -50) {
      nextPage()
    }
  })
  
  // 监听鼠标滚轮事件
  document.addEventListener('wheel', (e) => {
    if (e.deltaY > 0) {
      nextPage()
    } else if (e.deltaY < 0) {
      prevPage()
    }
  })

  // 监听键盘事件
  document.addEventListener('keydown', (e) => {
    if (e.key === 'ArrowUp') {
      prevPage()
    } else if (e.key === 'ArrowDown') {
      nextPage()
    }
  })
```

### 代码打包

由于最后需要将项目放到码上掘金平台运行，所以需要考虑静态资源的加载问题

这里我使用到了Vite提供的类似`file-loader`的功能，可以将大小在指定阈值下的图片资源直接转为行内的DataURL，配置选项是`config.build.assetsInlineLimit`，这样所有的图片资源都不必考虑外部引入的问题，直接内嵌进代码。

## 技术介绍

主界面使用的是Vue3的`SFC`，主要逻辑都在单文件组件中完成。通过`JSX`语法编写不同页面的内容，这样更方便我们为每个节点添加不同的动画。

`JSX`编写的组件通过全局注册后，在`SFC`中通过`<Component>`动态加载。

图片资源方面，使用到了雪碧图，部署后可以降低客户端发起HTTP请求频次，提高性能

代码复用方面，样式代码都抽离为单个的`xxxx.less`文件，哪里用到了直接导入即可

使用到了`Pinia`状态管理库，将`switching` `pageId` `audioStatus`等全局状态放到其中管理非常方便，避免了`provide`和`inject`的繁琐

## 功能介绍

- 支持PC端/移动端展示不同样式
    - PC端左侧有控制栏 支持控制音乐播放 切换页面
    - 移动端右上角控制音乐 滑动切换页面
- 页面之间切换有动态效果 文字逐行展示
- 左上角、右下角会出现矢量动图

## Demo展示

[Demo(Vercel)](https://juejin-annual-report.vercel.app/)

[jcode](https://code.juejin.cn/pen/7184691373911015459)