维度分析策略

最晚 XXXX
最多 XXXX
最长 XXXX
最关注 XXXX
总计处理 XXXX
总计时长 XXXX
平均 xxxx
超过了 XXXX %的人

关键词

关联维度分析关键词进行比对

最晚对比其他人的最晚，计算比例，得出 "熬夜星人"
最关注的，得出 "XXX爱好者"

输入维度分析+关键词

不同的维度列举详情可以呈现多种效果

年度报告的结构

开启年报

目的，开始进行统计，并存储生成数据，点击查看是进行记录，方便以后点击使用

个人信息

不同维度的统计对比数据穿插出现

统计个人信息维度+对比

点赞互动维度统计

总结专属年报

开始制作自己的年度报告生成器

效果预览

页面结构

使用分页做切换

以下是分页数据

js 复制代码

 const pageList = [
    {
      key: 0,
      content: <div className='report-page start-bg'>
        <div className='animate__animated animate__backInDown'>
          <div className='big-title'>
            <div className='big-title-size'>我的</div>
            <div>
              <div>2024</div>
              <div>ANNUAL </div>
              <div>REPORT</div>
            </div>
          </div>
        </div>
        <div className='animate__animated animate__backInDown'>
          <div className='big-title-size'>年度报告</div>
        </div>
        <div className='animate__animated animate__backInLeft'>
          <div className='compony-text'>不积跬步，无以至千里</div>
        </div>
        <div className='animate__animated animate__backInRight'>
          <div className='thanks-text'> 这一年，你辛苦了<br />感谢你的付出</div>
        </div>
        <div className='animate__animated animate__backInUp'>
          <div className='start-btn'>
            <NextBtn btnText='开启年度之旅' btnFn={() => { setCurrentKey(1) }} />
          </div>
        </div>
      </div>
    },
    {
      key: 1,
      content: <div className='report-page bg1 page-line' >
        <div className='animate__animated animate__fadeInDown'>
          <h1 className='sumWord'>Hi，前端liao</h1>
        </div>
        <div className='animate__animated animate__fadeInTopLeft'>
          <div>今年，你在创建了 <span className='highlight'> N </span> 个内容</div>
        </div>
        <div className='animate__animated animate__fadeInTopRight'>
          <div>最快完成的是  <span className='highlight'>xxxx</span>，共计用时 <span className='highlight'>40</span> 天</div>
        </div>
        <div className='animate__animated animate__fadeInUp'>
          <div>今年，你在完成了<span className='highlight'>N</span>  个内容</div>
        </div>
        <div className='animate__animated animate__fadeInBottomLeft'>
          <div>已经上市的有 <span className='highlight'>N</span>内容</div>
        </div>
        <div className='animate__animated animate__fadeInBottomRight'>
          <div>平均完成流程时长位 <span className='highlight'>30</span> 天</div>
        </div>
        <div className='animate__animated animate__fadeInUp'>
          <div className='start-btn'>
            <NextBtn btnText='NEXT' btnFn={() => { setCurrentKey(2) }} />
          </div>
        </div>
      </div>
    },
    {
      key: 2,
      content: <div className='report-page bg1 page-line' >
        <div className='animate__animated animate__fadeInDown'>
          <h1 className='sumWord'>总计处理了</h1>
        </div>
        <div className='animate__animated animate__fadeInTopLeft'>
          <div> <span className='highlight'> 10000 </span>个消息 </div>
        </div>
        <div className='animate__animated animate__fadeInTopRight'>
          <div>最晚时间  <span className='highlight'> 2023-02-09 23:34:34</span> </div>
        </div>
        <div className='animate__animated animate__fadeInUp'>
          <div>一天最多处理了<span className='highlight'>N</span>  个消息</div>
        </div>
        <div className='animate__animated animate__fadeInBottomLeft'>
          <div> <span className='highlight'>Nxxx</span>是和你互动最多的人</div>
        </div>
        <div className='animate__animated animate__fadeInBottomRight'>
          <div>连续互动了 <span className='highlight'>30</span> 天</div>
        </div>
        <div className='animate__animated animate__fadeInUp'>
          <div className='start-btn'>
            <NextBtn btnText='从头开始' btnFn={() => { setCurrentKey(0) }} />
          </div>
        </div>
      </div>
    }
  ]

页面结构

js 复制代码

import 'animate.css/animate.min.css';

<div className='yearReport'>
    <div className='left-actions'>
      <div className='action-item' onClick={history.back}>
        <RollbackOutlined />
      </div>
      <div className='action-item' onClick={() => { setCurrentKey(0) }}>
        <HomeOutlined />
      </div>
      <div className='action-item' onClick={onPrev}>
        <ArrowUpOutlined />
      </div>
      <div className='action-item' onClick={onNext}>
        <ArrowDownOutlined />
      </div>
    </div>
    <div className='report-container'>
      {pageList.map(item => {
        return currentKey === item.key ? <div key={item.key}>{item.content}</div> : null
      })}
    </div>
  </div>

样式文件

less 复制代码

.yearReport {
  display: flex;
  justify-content: center;
  padding-top: 60px;

  .left-actions {
    font-size: 30px;
    width: 70px;
    height: 667px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    justify-content: end;

    .action-item {
      cursor: pointer;
      width: 60px;
      height: 60px;

      display: flex;
      margin-top: 20px;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
    }



    .action-item {
      --color: #ff135a;
      font-family: inherit;
      display: inline-block;
      width: 60px;
      height: 60px;
      border-radius: 60px;
      line-height: 60px;
      position: relative;
      overflow: hidden;
      border: 2px solid var(--color);
      transition: color .5s;
      z-index: 1;
      text-align: center;
      font-size: 30px;
      font-weight: 500;
      color: var(--color);
    }

    .action-item:before {
      content: "";
      position: absolute;
      z-index: -1;
      background: var(--color);
      height: 150px;
      width: 200px;
      border-radius: 50%;
    }

    .action-item:hover {
      color: #fff;
    }

    .action-item:before {
      top: 100%;
      left: 100%;
      transition: all .7s;
    }

    .action-item:hover:before {
      top: -30px;
      left: -30px;
    }

    .action-item:active:before {
      background: var(--color);
      transition: background 0s;
    }
  }

  .report-container {
    width: 375px;
    height: 667px;
    overflow-y: hidden;
    background-color: antiquewhite;

    .highlight {
      color: #06d9cb;
      font-size: 20px;
    }

    .sumWord {
      font-size: 40px;
    }

    .page-line {
      padding-top: 80px;
      line-height: 30px;
    }
  }

  .bg {
    background-size: cover;
    background-repeat: no-repeat;
    color: #b3374e;
  }

  .start-bg {
    .bg;
    background-image: url('https://img0.baidu.com/it/u=3904336276,3758354744&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1000');
  }

  .bg1 {
    .bg;
    color: #efeae0;
    background-image: url('https://img0.baidu.com/it/u=3904336276,3758354744&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1000');
  }

  .report-page {
    width: 375px;
    height: 667px;
    padding: 60px 40px;

    .big-title-size {
      font-size: 72px;
      font-weight: 800;
      display: flex;
    }

    .big-title {
      font-size: 22px;
      display: flex;
      font-family: Georgia,
        Cochin,
        Times,
        Times,
        'Times New Roman',
        Times;
    }

    .compony-text {
      margin-top: 30px;
      font-size: 20px;
    }

    .thanks-text {
      margin-top: 20px;
    }

    .start-btn {
      margin-top: 240px;
    }


  }
}

左侧操作区域

js 复制代码

 function onNext() {
    // 设置最大不超过pagelist的长度-1，如果大了是长度-1
    setCurrentKey(Math.min(currentKey + 1, pageList.length - 1))
  }
  function onPrev() {
    setCurrentKey(Math.max(currentKey - 1, 0))
  }

开启按钮

开始按钮 DOM

js 复制代码

import React from 'react'
import './NextBth.less'
function NextBtn(props: { btnText: React.ReactNode, btnFn: any }) {
  return (
    <div className="btn-conteiner" onClick={props?.btnFn}>
      <a className="btn-content" href="#">
        <span className="btn-title">{props?.btnText}</span>
        <span className="icon-arrow">
          <svg width="66px" height="43px" viewBox="0 0 66 43" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
            <g id="arrow" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
              <path id="arrow-icon-one" d="M40.1543933,3.89485454 L43.9763149,0.139296592 C44.1708311,-0.0518420739 44.4826329,-0.0518571125 44.6771675,0.139262789 L65.6916134,20.7848311 C66.0855801,21.1718824 66.0911863,21.8050225 65.704135,22.1989893 C65.7000188,22.2031791 65.6958657,22.2073326 65.6916762,22.2114492 L44.677098,42.8607841 C44.4825957,43.0519059 44.1708242,43.0519358 43.9762853,42.8608513 L40.1545186,39.1069479 C39.9575152,38.9134427 39.9546793,38.5968729 40.1481845,38.3998695 C40.1502893,38.3977268 40.1524132,38.395603 40.1545562,38.3934985 L56.9937789,21.8567812 C57.1908028,21.6632968 57.193672,21.3467273 57.0001876,21.1497035 C56.9980647,21.1475418 56.9959223,21.1453995 56.9937605,21.1432767 L40.1545208,4.60825197 C39.9574869,4.41477773 39.9546013,4.09820839 40.1480756,3.90117456 C40.1501626,3.89904911 40.1522686,3.89694235 40.1543933,3.89485454 Z" fill="#FFFFFF"></path>
              <path id="arrow-icon-two" d="M20.1543933,3.89485454 L23.9763149,0.139296592 C24.1708311,-0.0518420739 24.4826329,-0.0518571125 24.6771675,0.139262789 L45.6916134,20.7848311 C46.0855801,21.1718824 46.0911863,21.8050225 45.704135,22.1989893 C45.7000188,22.2031791 45.6958657,22.2073326 45.6916762,22.2114492 L24.677098,42.8607841 C24.4825957,43.0519059 24.1708242,43.0519358 23.9762853,42.8608513 L20.1545186,39.1069479 C19.9575152,38.9134427 19.9546793,38.5968729 20.1481845,38.3998695 C20.1502893,38.3977268 20.1524132,38.395603 20.1545562,38.3934985 L36.9937789,21.8567812 C37.1908028,21.6632968 37.193672,21.3467273 37.0001876,21.1497035 C36.9980647,21.1475418 36.9959223,21.1453995 36.9937605,21.1432767 L20.1545208,4.60825197 C19.9574869,4.41477773 19.9546013,4.09820839 20.1480756,3.90117456 C20.1501626,3.89904911 20.1522686,3.89694235 20.1543933,3.89485454 Z" fill="#FFFFFF"></path>
              <path id="arrow-icon-three" d="M0.154393339,3.89485454 L3.97631488,0.139296592 C4.17083111,-0.0518420739 4.48263286,-0.0518571125 4.67716753,0.139262789 L25.6916134,20.7848311 C26.0855801,21.1718824 26.0911863,21.8050225 25.704135,22.1989893 C25.7000188,22.2031791 25.6958657,22.2073326 25.6916762,22.2114492 L4.67709797,42.8607841 C4.48259567,43.0519059 4.17082418,43.0519358 3.97628526,42.8608513 L0.154518591,39.1069479 C-0.0424848215,38.9134427 -0.0453206733,38.5968729 0.148184538,38.3998695 C0.150289256,38.3977268 0.152413239,38.395603 0.154556228,38.3934985 L16.9937789,21.8567812 C17.1908028,21.6632968 17.193672,21.3467273 17.0001876,21.1497035 C16.9980647,21.1475418 16.9959223,21.1453995 16.9937605,21.1432767 L0.15452076,4.60825197 C-0.0425130651,4.41477773 -0.0453986756,4.09820839 0.148075568,3.90117456 C0.150162624,3.89904911 0.152268631,3.89694235 0.154393339,3.89485454 Z" fill="#FFFFFF"></path>
            </g>
          </svg>
        </span>
      </a>
    </div>
  )
}

export default NextBtn

开始按钮样式

less 复制代码

.btn-conteiner {
  display: flex;
  justify-content: center;
  --color-text: #fff;
  --color-background: #ff135a;
  --color-outline: #ff145b80;
  --color-shadow: #00000080;
}

.btn-content {
  display: flex;
  align-items: center;
  padding: 5px 30px;
  text-decoration: none;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 26px;
  color: var(--color-text);
  background: var(--color-background);
  transition: 1s;
  border-radius: 100px;
  box-shadow: 0 0 0.2em 0 var(--color-background);
}

.btn-content:hover,
.btn-content:focus {
  transition: 0.5s;
  -webkit-animation: btn-content 1s;
  animation: btn-content 1s;
  outline: 0.1em solid transparent;
  outline-offset: 0.2em;
  box-shadow: 0 0 0.4em 0 var(--color-background);
}

.btn-content .icon-arrow {
  transition: 0.5s;
  margin-right: 0px;
  transform: scale(0.6);
}

.btn-content:hover .icon-arrow {
  transition: 0.5s;
  margin-right: 25px;
}

.icon-arrow {
  width: 20px;
  margin-left: 15px;
  position: relative;
  top: 6%;
}

/* SVG */
#arrow-icon-one {
  transition: 0.4s;
  transform: translateX(-60%);
}

#arrow-icon-two {
  transition: 0.5s;
  transform: translateX(-30%);
}

.btn-content:hover #arrow-icon-three {
  animation: color_anim 1s infinite 0.2s;
}

.btn-content:hover #arrow-icon-one {
  transform: translateX(0%);
  animation: color_anim 1s infinite 0.6s;
}

.btn-content:hover #arrow-icon-two {
  transform: translateX(0%);
  animation: color_anim 1s infinite 0.4s;
}

/* SVG animations */
@keyframes color_anim {
  0% {
    fill: white;
  }

  50% {
    fill: var(--color-background);
  }

  100% {
    fill: white;
  }
}

/* Button animations */
@-webkit-keyframes btn-content {
  0% {
    outline: 0.2em solid var(--color-background);
    outline-offset: 0;
  }
}

@keyframes btn-content {
  0% {
    outline: 0.2em solid var(--color-background);
    outline-offset: 0;
  }
}

怎么制作一个年度报告生成器

维度分析策略

关键词

输入维度分析+关键词

年度报告的结构

开启年报

个人信息

不同维度的统计对比数据穿插出现

统计个人信息维度+对比

点赞互动维度统计

总结专属年报

开始制作自己的年度报告生成器

效果预览

页面结构

使用分页做切换

页面结构

样式文件

左侧操作区域

开启按钮

开始按钮 DOM

开始按钮样式