📡 MemeRadar - 热梗趋势雷达

---

📖 项目简介

MemeRadar 是一个现代化的热梗趋势分析平台，帮助内容创作者、营销人员和运营团队：

• 🔥 实时监控 多平台热梗趋势
• 🧠 AI 分析 传播路径和受众画像
• 💰 智能推荐 变现策略和执行方案
• 📊 数据可视化 热度趋势和平台分布

✨ 功能特性

🎯 核心功能

• 多平台聚合 - 支持抖音、小红书、B站、微博等主流平台
• 实时热榜 - 自动获取最新热搜数据
• AI 深度分析 - 传播路径、受众画像、情绪分析
• 变现策略 - 一键生成可落地的变现方案
• 数据可视化 - 趋势图表、平台分布、受众雷达

🎨 界面特色

• 🌈 赛博朋克风格 - 炫酷的霓虹配色和玻璃态设计
• 📱 响应式布局 - 完美适配桌面和移动设备
• ⚡ 流畅动画 - 精心设计的过渡和交互效果
• 🎭 打字机效果 - AI 分析内容逐字显示

🔧 技术亮点

• 🚀 零构建配置 - 基于 Vite 的极速开发体验
• 📦 轻量级 - 核心代码无框架依赖
• 🎨 Chart.js - 强大的数据可视化能力
• 🔄 灵活数据源 - 支持 Mock 数据和真实 API 切换

🚀 快速开始

环境要求

• Node.js >= 16.0.0
• npm >= 7.0.0 或 yarn >= 1.22.0

安装步骤

bash
1234567891011
# 克隆仓库git clone https://github.com/MindDock/meme-radar.git # 进入项目目录cd meme-radar # 安装依赖npm install # 启动开发服务器npm run dev

访问 http://localhost:5173 即可查看效果！

环境配置

复制环境变量示例文件：

bash
1
cp .env.example .env

编辑 .env 文件配置数据源：

bash
123
# API 配置VITE_API_BASE_URL=https://api.vvhan.com/apiVITE_USE_REAL_API=false  # true 使用真实 API，false 使用 Mock 数据

📦 项目结构

1234567891011121314151617
meme-radar/├── src/│   ├── components/        # UI 组件│   │   ├── aiAnalysis.js  # AI 分析面板│   │   ├── charts.js      # 图表组件│   │   └── trendCard.js   # 热梗卡片│   ├── data/              # 数据层│   │   ├── dataService.js # 统一数据服务│   │   └── mockData.js    # Mock 数据│   ├── services/          # 服务层│   │   └── apiService.js  # API 服务│   ├── index.css          # 全局样式│   └── main.js            # 应用入口├── index.html             # HTML 模板├── vite.config.js         # Vite 配置├── package.json           # 项目配置└── README.md              # 项目文档

🛠️ 技术栈

📊 数据源

Mock 数据模式（默认）

项目内置了丰富的 Mock 数据，包含 11 个精心设计的热梗案例，每个都包含：

• 详细的热度分析和趋势数据
• AI 生成的传播路径分析
• 受众画像和情绪分析
• 可落地的变现策略

真实 API 模式

支持接入真实的热搜 API，推荐以下数据源：

1. DailyHotApi ⭐ 推荐

   • 开源免费
   • 支持 40+ 平台
   • 可自部署到 Vercel

2. UAPI

   • 免费额度充足
   • 支持微博、抖音、B站等
   • 需注册获取 API Key

3. TianAPI

   • 每天 100 次免费调用
   • 数据质量高
   • 需注册账号

🎨 自定义配置

修改主题色

编辑 src/index.css 中的 CSS 变量：

css
1234567
:root {  --accent-1: #ff2d78;  /* 主色调 */  --accent-2: #7b2dff;  /* 次色调 */  --accent-3: #2dd4ff;  /* 强调色 */  --accent-4: #00ffa3;  /* 成功色 */  --accent-5: #ffaa00;  /* 警告色 */}

添加新平台

1. 在 src/data/mockData.js 中添加平台信息
2. 在 src/services/apiService.js 中配置 API 端点
3. 在 index.html 中添加筛选按钮

🤝 贡献指南

欢迎所有形式的贡献！

如何贡献

1. Fork 本仓库
2. 创建特性分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 提交 Pull Request

开发指南

• 遵循现有的代码风格
• 添加必要的注释
• 更新相关文档
• 确保代码可正常运行

📝 开发计划

• 支持更多平台（知乎、豆瓣等）
• 添加用户收藏和历史记录
• 实现数据导出功能
• 添加 PWA 支持
• 国际化支持
• 暗黑模式切换

🐛 问题反馈

如果您发现 Bug 或有功能建议，欢迎提交 Issue

提交 Issue 时请包含：

• 问题描述
• 复现步骤
• 预期行为
• 实际行为
• 截图（如适用）

📄 许可证

本项目采用 MIT 许可证开源

🙏 致谢

感谢以下开源项目：

• Vite - 极速的前端构建工具
• Chart.js - 强大的图表库
• DailyHotApi - 热榜 API 参考
• Google Fonts - 优质字体服务

📮 联系方式

• GitHub: @MindDock
• 项目主页: https://github.com/MindDock/meme-radar

---