# QZMusic Web

QZMusic 网页版，基于 Vue 3 + TypeScript + Vite 构建的音乐播放器。

## 功能特性

- 🎵 音乐播放控制（播放/暂停、上一首、下一首）
- 📜 播放列表管理
- 🎨 深色/浅色主题切换
- 🎚️ 音量控制
- 📊 音频可视化（基于 Web Audio API）
- 🔍 搜索功能
- 🌐 默认端口：10096

## 快速开始

### 一键部署（推荐）

```bash
# 使用一键部署脚本
npm run deploy
# 或者直接运行
./deploy.sh
```

### 一键启动

```bash
# 使用启动脚本
npm run start
# 或者直接运行
./start.sh
```

## 开发

### 安装依赖

```bash
npm install
```

### 启动开发服务器

```bash
npm run dev
```

服务器将在 http://localhost:10096 启动

### 构建生产版本

```bash
npm run build
```

### 预览生产构建

```bash
npm run preview
```

## 脚本说明

| 命令 | 说明 |
|------|------|
| `npm run dev` | 启动开发服务器（端口 10096） |
| `npm run build` | 构建生产版本 |
| `npm run preview` | 预览生产构建（端口 10096） |
| `npm run deploy` | 一键部署（安装依赖 + 构建） |
| `npm run start` | 一键启动（自动安装依赖 + 启动开发服务器） |

## 项目结构

```
├── src/
│   ├── assets/         # 静态资源
│   ├── components/     # 组件
│   ├── layout/         # 布局组件
│   ├── stores/         # Pinia 状态管理
│   ├── styles/         # 样式文件
│   ├── types/          # TypeScript 类型定义
│   ├── utils/          # 工具函数
│   ├── views/          # 页面组件
│   ├── App.vue         # 根组件
│   └── main.ts         # 入口文件
├── public/             # 公开资源
├── index.html          # HTML 模板
├── vite.config.ts      # Vite 配置
└── tsconfig.json       # TypeScript 配置
```

## 注意事项

- 网页版移除了原 Electron 项目的本地文件系统访问和原生插件功能
- 音乐播放使用 HTML5 Audio API
- 音频可视化使用 Web Audio API