# himate_music_player_react

**Repository Path**: zyz1720/himate_music_player_react

## Basic Information

- **Project Name**: himate_music_player_react
- **Description**: himate react h5音乐播放器
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-26
- **Last Updated**: 2026-02-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<a href="./README.EN.md" >English</a> | <a href="./README.md" >简体中文</a>

# Himate Music Player

一个基于 React 开发的现代化音乐播放器，具有完整的音乐播放、歌单、搜索和多语言支持功能。

![Himate Music Player](public/logo.png)

## ✨ 功能特性

### 🎵 音乐播放
- 播放列表管理
- 多种播放模式（顺序播放、随机播放等）
- 播放进度控制和歌词同步显示

### 🔍 搜索功能
- 音乐搜索

### 🌍 国际化支持
- 中文（简体）
- English (US)

### 📱 现代化界面
- 基于 Ant Design 的精美界面
- Tailwind CSS 响应式设计
- 移动端友好的布局
- 暗色/亮色主题支持

## 🛠️ 技术栈

### 前端框架
- **React 18** - 现代化的用户界面库
- **Vite** - 快速的构建工具和开发服务器

### UI 组件库
- **Ant Design 5** - 企业级UI设计语言
- **Tailwind CSS 4** - 实用优先的CSS框架

### 状态管理
- **Zustand** - 轻量级状态管理

### 路由管理
- **React Router 7** - 声明式路由

### HTTP 客户端
- **Axios** - 基于Promise的HTTP客户端

### 国际化
- **i18next** - 强大的国际化框架
- **react-i18next** - React的i18next集成


## 🚀 快速开始

### 环境要求
- Node.js >= 16.0.0
- npm >= 7.0.0 或 yarn >= 1.22.0

### 安装依赖
```bash
# 使用 npm
npm install

# 或使用 yarn
yarn
```

### 开发环境运行
```bash
# 使用 npm
npm run dev

# 或使用 yarn
yarn dev
```

开发服务器将在 `http://localhost:8081` 启动

### 构建生产版本
```bash
# 使用 npm
npm run build

# 或使用 yarn
yarn build
```

### 预览生产构建
```bash
# 使用 npm
npm run preview

# 或使用 yarn
yarn preview
```

## 📁 项目结构

```
src/
├── api/                    # API接口层
│   ├── login.js           # 登录相关接口
│   ├── music.js           # 音乐相关接口
│   └── user.js            # 用户相关接口
├── assets/                # 静态资源
├── components/            # 可复用组件
│   └── common/            # 通用组件
├── constants/             # 常量定义
│   └── locale.js          # 本地化常量
├── i18n/                  # 国际化配置
│   └── langs/             # 语言包
│       ├── en-US/         # 英文
│       └── zh-CN/         # 中文
├── pages/                 # 页面组件
│   ├── auth/              # 认证相关页面
│   ├── common/            # 通用页面
│   └── music/             # 音乐相关页面
├── router/                # 路由配置
├── stores/                # 状态管理
│   ├── musicStore.js      # 音乐状态
│   ├── settingStore.js    # 设置状态
│   └── userStore.js       # 用户状态
├── styles/                # 样式文件
├── utils/                 # 工具函数
│   ├── common/            # 通用工具
│   └── request/           # 请求工具
├── main.jsx               # 应用入口
└── App.jsx                # 根组件
```

## 🔧 配置说明

### 环境变量
项目支持以下环境变量配置：

- `VITE_ENV` - 运行环境（development/production）
- `VITE_OUTPUT_DIR` - 输出目录
- `VITE_BASE_URL` - API基础URL
- `VITE_THUMBNAIL_URL` - 缩略图URL
- `VITE_STATIC_URL` - 静态资源URL
- `VITE_API_PREFIX` - API前缀

## 🎨 主题定制

项目使用 Tailwind CSS 进行样式管理，支持自定义主题配置。主要颜色配置：

- 主色调：基于 Ant Design 的蓝色系
- 背景色：支持深色和浅色主题
- 响应式断点：移动端优先的设计

## 📄 许可证

本项目基于 [MIT 许可证](LICENSE) 开源。

### 关联项目
- **前端**: [Himate React Native App](https://gitee.com/zyz1720/himate_app_rn)
- **后端**: [Himate NestJS Server](https://gitee.com/zyz1720/himate_server_nest)