COCO音乐下载站 是一个基于 Next.js 16 构建的现代化音乐搜索与下载平台。界面设计简约纯净，支持多渠道音乐搜索、在线试听、批量下载，并配备了丝滑的暗黑模式（涟漪过渡动画）。

本项目致力于提供无广告、极速、纯净的音乐获取体验。

• 🎵 多源聚合搜索：支持全网聚合搜索，内置多种音乐源渠道，一键切换。
• 🎧 在线试听：内置精美悬浮播放器，支持播放/暂停、进度拖拽、音量调节、上下曲切换。
• 🖱️ 便捷交互：支持列表双击播放，鼠标悬停/选中效果优化，操作流畅。
• ⬇️ 批量下载：支持多选歌曲，一键批量打包下载选中的音乐。
• 🌓 极致主题体验：
  • 完美适配深色/浅色模式。
  • 独家定制的涟漪扩散切换动画（基于 View Transitions API），视觉效果惊艳。
• ⚡ 现代化技术栈：基于 React 19、Next.js 16 App Router、Tailwind CSS v4 构建。

• 核心框架: Next.js 16.1.2 (App Router)
• 编程语言: TypeScript
• 样式方案: Tailwind CSS v4
• 动画库: Framer Motion
• 图标库: Lucide React
• 主题管理: next-themes + View Transitions API
• 后端处理: Next.js API Routes + Axios + Cheerio

• Node.js >= 18.17.0
• npm / pnpm / yarn

git clone https://github.com/markcxx/coco-downloader.git
cd coco-downloader

npm install
# 或者
yarn install
# 或者
pnpm install

npm run dev

打开浏览器访问 http://localhost:3000 即可开始使用。

npm run build
npm start

coco-downloader/
├── src/
│   ├── app/                 # Next.js App Router 核心目录
│   │   ├── api/             # 后端 API 路由 (search, url, download)
│   │   ├── globals.css      # 全局样式 (含 Tailwind v4 配置)
│   │   ├── layout.tsx       # 根布局 (集成 ThemeProvider)
│   │   └── page.tsx         # 首页主要逻辑 (搜索、列表、交互)
│   ├── components/          # UI 组件
│   │   ├── Navbar.tsx       # 顶部导航栏 (含涟漪主题切换逻辑)
│   │   ├── PlayerBar.tsx    # 底部悬浮播放器
│   │   └── ThemeProvider.tsx# 主题上下文提供者
│   ├── lib/                 # 工具库
│   │   └── providers/       # 音乐源策略模式实现 (impl/gequbao.ts, impl/qqmp3.ts)
│   └── types/               # TypeScript 类型定义
├── public/                  # 静态资源文件
└── ...

在 src/components/Navbar.tsx 中，我们利用了浏览器原生的 document.startViewTransition API 配合 CSS clip-path 属性。 当用户点击主题切换按钮时，计算点击坐标，以该坐标为圆心，计算覆盖全屏所需的最大半径，然后执行圆形扩散遮罩动画。这比传统的 CSS transition 全局淡入淡出更具动感和现代感。

项目后端采用策略模式设计。在 src/lib/providers 下定义了统一的接口。若需添加新的音乐网站源，只需新建一个实现类并在工厂方法中注册即可，无需大幅修改前端逻辑。

npm run build
npm start

docker build -t coco-downloader -f Dockerfile .
docker run -p 3000:3000 coco-downloader

如果您发现任何问题或有新功能建议，欢迎提交 Issue 或 Pull Request。

仓库地址：https://github.com/markcxx/coco-downloader

MIT License