# 短链接分析系统 - Next.js 前端实现需求

## 项目概述

基于 Next.js 框架实现短链接分析系统的前端部分，提供丰富的数据可视化和分析功能。

## 技术栈要求
技术栈要求是最新的且是稳定版本

## 特别说明
- 增删改link都不是在这个项目做的
- 这个项目时负责展示link的统计与分析的而不是管理link的

## 实际需求



## 短链接概览

- 卡片式布局展示每个短链接的关键表现指标
- 显示每个短链接的基础信息（名称、原始URL、创建日期）
- 突出展示三个核心指标：总访问量、独立访问用户数、平均停留时间
- 每个指标旁边显示环比变化百分比和趋势箭头
- 颜色编码直观表示表现好坏（绿色增长，红色下降）
- 支持时间范围切换（7天/30天/90天）
- 可按表现指标排序以识别表现最佳/最差的短链接
- 帮助团队快速评估每个短链接的效果
- 点击卡片可展开查看该短链接的详细分析

## 访问转化漏斗

- 以漏斗图形式展示用户从点击短链接到最终目标完成的全过程
- 显示6个转化阶段：访问、停留、交互、注册、订阅、购买
- 每个阶段显示用户数量和占比
- 相邻阶段间显示转化率百分比
- 底部显示三个关键指标：平均转化率、最高转化阶段、最低转化阶段
- 根据所选项目和时间范围自动更新数据

## 访问趋势

- 柱状图形式展示一段时间内访问数量的变化
- 横轴显示日期，纵轴显示访问数量
- 每个柱体代表当天的访问总数
- 悬停时显示具体访问数量
- 自动计算最大值设置合适的比例尺
- 使用蓝色渐变效果提高视觉吸引力
- 帮助团队了解用户访问的时间规律
  
## 短链接表现

- 表格形式展示所有短链接数据
- 每行显示一个短链接的关键指标：名称、原URL、创建者、创建日期
- 包含流量指标：访问量、独立访问用户、跳出率、平均停留时间
- 显示转化率评分
- 支持按创建者和标签筛选
- 可排序功能便于查找表现最佳短链接

## 平台分布

- 横向条形图展示不同来源平台的访问分布
- 每个平台显示对应品牌颜色和图标
- 显示具体数量和所占百分比
- 条形长度直观反映各平台占比
- 帮助团队了解哪些平台引流效果更好

## 链接状态分布

- 环形图展示短链接状态的分布情况
- 包括三种状态：活跃、已过期、已禁用
- 每个状态使用不同颜色直观区分
- 显示各状态的数量和百分比
- 提供短链接管理流程的整体视图

## 设备分析详情

- 横向渐变条展示访问设备类型分析
- 从移动设备到桌面设备的直观展示
- 显示移动端、平板、桌面端访问的准确百分比
- 黑色指针标记在渐变条上的当前设备偏好位置
- 帮助评估用户设备使用习惯和优化方向

## 热门链接

- 列表形式展示最受欢迎的短链接
- 按访问量或转化率排序
- 显示链接名称和访问数据
- 标记高转化链接以引起注意
- 帮助识别最成功的短链接类型

## 热门引荐来源

- 词云形式展示访问来源中出现频率最高的网站
- 根据引荐量调整来源网站大小和颜色
- 使用不同颜色区分不同类别的来源
- 视觉化展现用户来源分布
- 帮助团队了解用户访问的主要渠道

## 用户访问时间分析

- 24小时热力图展示一天中用户访问的高峰时段
- 横轴显示24小时时间段，纵轴显示7天的日期
- 颜色深浅表示访问量的多少
- 自动标注访问高峰和低谷时段
- 悬停时显示具体时间点的访问数据
- 帮助优化短链接发布时间
- 可按平台筛选查看不同来源平台的用户活跃规律

## 链接表现分析

- 散点图形式展示所有短链接的表现分布
- 横轴表示访问量，纵轴表示转化率
- 点的大小代表链接的停留时间
- 点的颜色代表不同类型或标签
- 四象限划分帮助识别高价值短链接
- 鼠标悬停显示详细指标和链接信息
- 支持按时间段、链接类型和创建者筛选
- 帮助团队发现最有效的短链接模式

## QR码分析

- 展示与短链接关联的QR码使用情况
- 显示每个QR码的扫描量和转化率
- 支持按位置、活动或使用场景筛选
- 提供QR码与短链接效果的对比分析
- 帮助评估线上线下引流效果

## 概览卡片

- 展示三个核心指标的卡片式布局
- 每个卡片包含大数字显示当前值和环比增长
- 总访问量卡片：显示所有短链接访问总量及周环比变化
- 平均转化率卡片：显示转化目标完成率及周环比
- 活跃短链接卡片：显示有访问的短链接占比及周环比提升
- 每个卡片包含对应图标和趋势指示器
- 直观展示短链接系统的整体健康状况