135 lines
4.8 KiB
Markdown
135 lines
4.8 KiB
Markdown
# 短链接分析系统 - Next.js 前端实现需求
|
||
|
||
## 项目概述
|
||
|
||
基于 Next.js 框架实现短链接分析系统的前端部分，提供丰富的数据可视化和分析功能。
|
||
|
||
## 技术栈要求
|
||
技术栈要求是最新的且是稳定版本
|
||
|
||
## 特别说明
|
||
- 增删改link都不是在这个项目做的
|
||
- 这个项目时负责展示link的统计与分析的而不是管理link的
|
||
|
||
## 实际需求
|
||
|
||
|
||
|
||
## 短链接概览
|
||
|
||
- 卡片式布局展示每个短链接的关键表现指标
|
||
- 显示每个短链接的基础信息（名称、原始URL、创建日期）
|
||
- 突出展示三个核心指标：总访问量、独立访问用户数、平均停留时间
|
||
- 每个指标旁边显示环比变化百分比和趋势箭头
|
||
- 颜色编码直观表示表现好坏（绿色增长，红色下降）
|
||
- 支持时间范围切换（7天/30天/90天）
|
||
- 可按表现指标排序以识别表现最佳/最差的短链接
|
||
- 帮助团队快速评估每个短链接的效果
|
||
- 点击卡片可展开查看该短链接的详细分析
|
||
|
||
## 访问转化漏斗
|
||
|
||
- 以漏斗图形式展示用户从点击短链接到最终目标完成的全过程
|
||
- 显示6个转化阶段：访问、停留、交互、注册、订阅、购买
|
||
- 每个阶段显示用户数量和占比
|
||
- 相邻阶段间显示转化率百分比
|
||
- 底部显示三个关键指标：平均转化率、最高转化阶段、最低转化阶段
|
||
- 根据所选项目和时间范围自动更新数据
|
||
|
||
## 访问趋势
|
||
|
||
- 柱状图形式展示一段时间内访问数量的变化
|
||
- 横轴显示日期，纵轴显示访问数量
|
||
- 每个柱体代表当天的访问总数
|
||
- 悬停时显示具体访问数量
|
||
- 自动计算最大值设置合适的比例尺
|
||
- 使用蓝色渐变效果提高视觉吸引力
|
||
- 帮助团队了解用户访问的时间规律
|
||
|
||
## 短链接表现
|
||
|
||
- 表格形式展示所有短链接数据
|
||
- 每行显示一个短链接的关键指标：名称、原URL、创建者、创建日期
|
||
- 包含流量指标：访问量、独立访问用户、跳出率、平均停留时间
|
||
- 显示转化率评分
|
||
- 支持按创建者和标签筛选
|
||
- 可排序功能便于查找表现最佳短链接
|
||
|
||
## 平台分布
|
||
|
||
- 横向条形图展示不同来源平台的访问分布
|
||
- 每个平台显示对应品牌颜色和图标
|
||
- 显示具体数量和所占百分比
|
||
- 条形长度直观反映各平台占比
|
||
- 帮助团队了解哪些平台引流效果更好
|
||
|
||
## 链接状态分布
|
||
|
||
- 环形图展示短链接状态的分布情况
|
||
- 包括三种状态：活跃、已过期、已禁用
|
||
- 每个状态使用不同颜色直观区分
|
||
- 显示各状态的数量和百分比
|
||
- 提供短链接管理流程的整体视图
|
||
|
||
## 设备分析详情
|
||
|
||
- 横向渐变条展示访问设备类型分析
|
||
- 从移动设备到桌面设备的直观展示
|
||
- 显示移动端、平板、桌面端访问的准确百分比
|
||
- 黑色指针标记在渐变条上的当前设备偏好位置
|
||
- 帮助评估用户设备使用习惯和优化方向
|
||
|
||
## 热门链接
|
||
|
||
- 列表形式展示最受欢迎的短链接
|
||
- 按访问量或转化率排序
|
||
- 显示链接名称和访问数据
|
||
- 标记高转化链接以引起注意
|
||
- 帮助识别最成功的短链接类型
|
||
|
||
## 热门引荐来源
|
||
|
||
- 词云形式展示访问来源中出现频率最高的网站
|
||
- 根据引荐量调整来源网站大小和颜色
|
||
- 使用不同颜色区分不同类别的来源
|
||
- 视觉化展现用户来源分布
|
||
- 帮助团队了解用户访问的主要渠道
|
||
|
||
## 用户访问时间分析
|
||
|
||
- 24小时热力图展示一天中用户访问的高峰时段
|
||
- 横轴显示24小时时间段，纵轴显示7天的日期
|
||
- 颜色深浅表示访问量的多少
|
||
- 自动标注访问高峰和低谷时段
|
||
- 悬停时显示具体时间点的访问数据
|
||
- 帮助优化短链接发布时间
|
||
- 可按平台筛选查看不同来源平台的用户活跃规律
|
||
|
||
## 链接表现分析
|
||
|
||
- 散点图形式展示所有短链接的表现分布
|
||
- 横轴表示访问量，纵轴表示转化率
|
||
- 点的大小代表链接的停留时间
|
||
- 点的颜色代表不同类型或标签
|
||
- 四象限划分帮助识别高价值短链接
|
||
- 鼠标悬停显示详细指标和链接信息
|
||
- 支持按时间段、链接类型和创建者筛选
|
||
- 帮助团队发现最有效的短链接模式
|
||
|
||
## QR码分析
|
||
|
||
- 展示与短链接关联的QR码使用情况
|
||
- 显示每个QR码的扫描量和转化率
|
||
- 支持按位置、活动或使用场景筛选
|
||
- 提供QR码与短链接效果的对比分析
|
||
- 帮助评估线上线下引流效果
|
||
|
||
## 概览卡片
|
||
|
||
- 展示三个核心指标的卡片式布局
|
||
- 每个卡片包含大数字显示当前值和环比增长
|
||
- 总访问量卡片：显示所有短链接访问总量及周环比变化
|
||
- 平均转化率卡片：显示转化目标完成率及周环比
|
||
- 活跃短链接卡片：显示有访问的短链接占比及周环比提升
|
||
- 每个卡片包含对应图标和趋势指示器
|
||
- 直观展示短链接系统的整体健康状况 |