一个基于 Next.js 的互联网活动数据追踪和分析系统,支持多平台数据记录、搜索、统计和可视化。
- 📱 多平台支持 - 抖音、小红书、微博、B 站、YouTube、Twitter
- 🎯 动作类型 - 浏览、点赞、发帖、评论、回复、分享、收藏、聊天
- 📊 数据统计 - 平台分布、动作类型统计、热门标签
- 🔍 全文搜索 - 跨平台搜索,支持高级筛选
- 📅 日历视图 - 按日期查看活动记录
- 🎨 现代设计 - 2026 设计语言,响应式布局
- ⚡ 高性能 - Next.js 16 Cache Components,静态生成
- Node.js 18+
- Bun (推荐) 或 npm/yarn
# 克隆项目
git clone https://github.com/your-username/internet-data-tracker.git
cd internet-data-tracker
# 安装依赖
bun install
# 启动开发服务器
bun dev访问 http://localhost:3000 查看应用。
# 生产构建
bun run build
# 启动生产服务器
bun startdata/
├── douyin/ # 抖音数据
│ ├── 2025-11-10/ # 日期目录
│ │ ├── like_001.md # 点赞记录
│ │ ├── browse_001.md # 浏览记录
│ │ └── post_001.md # 发帖记录
│ └── 2025-11-11/
├── xiaohongshu/ # 小红书数据
├── weibo/ # 微博数据
├── bilibili/ # B 站数据
├── youtube/ # YouTube 数据
└── twitter/ # Twitter 数据
采用 YAML Front Matter + Markdown 格式:
---
id: "douyin_20251110_like_001"
platform: "douyin"
action: "like"
date: "2025-11-10"
time: "14:32:05"
created_at: "2025-11-10T14:32:05+08:00"
author: "@科技观察者"
author_id: "123456789"
title: "深度解析:AI 如何改变未来教育"
url: "https://www.douyin.com/video/7234567890123456789"
tags:
- AI
- 教育
- 未来科技
stats:
likes: 12500
comments: 856
shares: 342
---
## 内容摘要
这条视频探讨了人工智能在教育领域的应用前景...
## 喜欢理由
1. 观点独到,数据详实
2. 对未来教育趋势的预测很有启发
⚠️ 注意: YAML 中所有字符串字段必须用引号包裹,避免解析错误。
- 进入对应平台目录,如
data/douyin/ - 创建日期目录(如不存在):
2025-11-10/ - 创建记录文件:
like_001.md(使用下一个序号) - 填写 YAML front matter 和 Markdown 内容
如果有旧格式数据,可以使用迁移工具:
# 迁移数据
bun run migrate
# 验证后清理备份
bun run migrate:cleanup
# 如需回滚
bun run migrate:restorebun dev # 启动开发服务器
bun run build # 生产构建
bun start # 启动生产服务器
bun run lint # 代码检查
bun run migrate # 数据迁移| 页面 | 路径 | 说明 |
|---|---|---|
| 首页 | / |
平台概览、最近活动、统计摘要 |
| 平台详情 | /{platform} |
平台数据、动作类型筛选 |
| 搜索 | /search |
全文搜索、高级筛选 |
| 统计 | /stats |
数据可视化、图表分析 |
| 日历 | /calendar |
日历视图、日期筛选 |
| 类型 | 说明 |
|---|---|
| browse | 浏览 |
| like | 点赞/喜欢 |
| post | 发帖/投稿 |
| comment | 评论 |
| reply | 回复 |
| share | 分享 |
| collect | 收藏 |
| chat | 聊天/私信 |
- 框架: Next.js 16.1.6 (App Router)
- UI: React 19.2.3
- 样式: Tailwind CSS 4.x
- 组件: shadcn/ui
- 语言: TypeScript 5.x
- 图表: Recharts
- 搜索: Fuse.js
- 动画: Framer Motion
- 日期: date-fns
- 解析: gray-matter
internet-data-tracker/
├── app/ # Next.js 页面
│ ├── (platform)/ # 平台路由组
│ ├── search/ # 搜索页面
│ ├── stats/ # 统计页面
│ └── calendar/ # 日历页面
├── components/ # React 组件
│ ├── ui/ # 基础 UI 组件
│ ├── platform/ # 平台组件
│ ├── data/ # 数据展示组件
│ └── layout/ # 布局组件
├── lib/ # 核心逻辑
│ ├── data/ # 数据解析/读取/搜索
│ └── platforms/ # 平台配置
├── types/ # TypeScript 类型
├── scripts/ # 工具脚本
└── data/ # 数据存储
- 在
types/record.ts添加平台类型 - 在
lib/platforms/index.ts添加平台配置 - 在
data/创建对应目录
- 在
types/record.ts的ActionType中添加 - 在各组件的
actionLabels中添加中文映射 - 在
lib/data/reader.ts的byAction初始化中添加
MIT License
用技术洞察世界,用内容记录真相 🪶