Skip to content

Repository files navigation

🌐 互联网数据追踪器

一个基于 Next.js 的互联网活动数据追踪和分析系统,支持多平台数据记录、搜索、统计和可视化。

Next.js React Tailwind CSS TypeScript Bun

✨ 特性

  • 📱 多平台支持 - 抖音、小红书、微博、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 start

📁 数据结构

目录结构

data/
├── 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 中所有字符串字段必须用引号包裹,避免解析错误。

📝 添加记录

方式一:手动创建

  1. 进入对应平台目录,如 data/douyin/
  2. 创建日期目录(如不存在):2025-11-10/
  3. 创建记录文件:like_001.md(使用下一个序号)
  4. 填写 YAML front matter 和 Markdown 内容

方式二:使用迁移工具

如果有旧格式数据,可以使用迁移工具:

# 迁移数据
bun run migrate

# 验证后清理备份
bun run migrate:cleanup

# 如需回滚
bun run migrate:restore

🛠️ 开发命令

bun 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/                  # 数据存储

🔧 配置

添加新平台

  1. types/record.ts 添加平台类型
  2. lib/platforms/index.ts 添加平台配置
  3. data/ 创建对应目录

添加新动作类型

  1. types/record.tsActionType 中添加
  2. 在各组件的 actionLabels 中添加中文映射
  3. lib/data/reader.tsbyAction 初始化中添加

📄 许可证

MIT License

🙏 致谢


用技术洞察世界,用内容记录真相 🪶

About

记录互联网数据 - 各平台有趣的视频、点赞、评论等内容

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages