# HiFiNi

**Repository Path**: zuoann/hifini

## Basic Information

- **Project Name**: HiFiNi
- **Description**: HiFiNi 音乐磁场
HiFiNi 音乐磁场是一个专注于无损音乐分享的社区。我们致力于为音乐爱好者提供高质量的 FLAC、APE、MP3 等格式的音乐资源，涵盖华语、欧美、日系、古典等多种音乐类型。
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-08-25
- **Last Updated**: 2026-08-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

![首页](.trae/%E9%A6%96%E9%A1%B51.png)
![会员体系](.trae/%E4%BC%9A%E5%91%98%E4%BD%93%E7%B3%BB.png)

## 1. 产品概述

HiFiNi 音乐磁场是一个无损音乐分享社区平台，用户可以浏览、搜索、试听和下载高品质音乐资源。
- 主要功能：音乐帖子浏览、分类筛选、排行榜、搜索、用户系统、音乐播放器、帖子详情与评论
- 目标用户：HiFi 音乐爱好者，追求高品质音乐体验的用户群体

## 2. 核心功能

### 2.1 用户角色
| 角色 | 注册方式 | 核心权限 |
|------|----------|----------|
| 游客 | 无需注册 | 浏览帖子列表、查看排行榜 |
| 普通用户 | 邮箱注册 | 浏览、搜索、试听、下载、评论、发帖 |
| VIP用户 | 付费升级 | 所有普通权限 + 特供专区访问 |

### 2.2 功能模块
1. **首页**: 顶部导航栏、分类标签页(最新/热门/月榜/周榜/日榜)、置顶帖子、音乐帖子列表、侧边栏(网站统计/热门音乐排行)、分页器
2. **帖子详情页**: 帖子内容、音乐播放器、下载链接、评论区
3. **分类页**: 按音乐分类(华语/欧美/日韩/纯音乐/DJ音乐/视频/特供/茶馆)筛选帖子
4. **搜索结果页**: 关键词搜索音乐帖子
5. **登录页**: 用户名/密码登录表单，含"注册账号"和"忘记密码"跳转链接
6. **注册页**: 邮箱注册表单（用户名、邮箱、密码、确认密码、验证码），含"已有账号？去登录"跳转链接
7. **忘记密码页**: 邮箱验证+重置密码表单，含"返回登录"跳转链接
8. **用户中心页**: 个人资料、我的帖子、收藏列表
9. **热门歌手页**: 歌手标签云、按歌手筛选

### 2.3 页面详情
| 页面名称 | 模块名称 | 功能描述 |
|----------|----------|----------|
| 首页 | 顶部导航栏 | Logo、搜索框、用户登录/头像、导航链接 |
| 首页 | 分类标签页 | 最新/热门/月榜/周榜/日榜 切换 |
| 首页 | 置顶帖子区 | 带火焰图标的置顶公告帖子(带特殊样式) |
| 首页 | 音乐帖子列表 | 封面缩略图、标题(含格式标签如FLAC/MP3)、分类标签、作者、发布时间、回复数、网盘标签 |
| 首页 | 侧边栏-网站统计 | 主题数、帖子数、用户数、在线人数 |
| 首页 | 侧边栏-热门音乐 | 热门音乐排行榜(1-8名)，带热度值 |
| 首页 | 分页器 | 页码导航，支持跳转 |
| 帖子详情页 | 帖子头部 | 标题、分类、作者信息、发布时间 |
| 帖子详情页 | 帖子内容 | 音乐封面大图、音乐信息描述、内嵌音乐播放器 |
| 帖子详情页 | 下载区域 | 百度网盘/夸客网盘下载链接按钮 |
| 帖子详情页 | 评论区 | 评论列表、评论输入框、楼层号 |
| 分类页 | 分类帖子列表 | 与首页列表样式一致，按分类筛选 |
| 搜索结果页 | 搜索结果列表 | 匹配关键词高亮的帖子列表 |
| 用户中心页 | 登录/注册 | 弹窗表单：用户名、密码、验证码 |
| 用户中心页 | 个人资料 | 头像、昵称、积分、VIP状态 |
| 登录页 | 登录表单 | 用户名输入框、密码输入框、记住我复选框、登录按钮 |
| 登录页 | 跳转链接 | "注册账号"链接跳转注册页、"忘记密码"链接跳转忘记密码页 |
| 注册页 | 注册表单 | 用户名、邮箱、密码、确认密码、验证码输入框、注册按钮 |
| 注册页 | 跳转链接 | "已有账号？去登录"链接跳转登录页 |
| 忘记密码页 | 重置表单 | 邮箱输入框、验证码、新密码、确认新密码、提交按钮 |
| 忘记密码页 | 跳转链接 | "返回登录"链接跳转登录页 |
| 热门歌手页 | 歌手标签 | 按热度排列的歌手标签，可点击筛选 |

## 3. 核心流程

用户访问首页 → 浏览音乐帖子列表 → 点击帖子进入详情页 → 试听音乐 → 登录后下载或评论

```mermaid
flowchart TD
    A["访问首页"] --> B["浏览帖子列表"]
    B --> C{"选择操作"}
    C --> D["切换分类标签"]
    C --> E["搜索音乐"]
    C --> F["点击帖子"]
    D --> B
    E --> G["搜索结果页"]
    G --> F
    F --> H["帖子详情页"]
    H --> I["试听音乐"]
    H --> J{"是否登录"}
    J -->|"未登录"| K["弹出登录窗口"]
    K --> L["登录/注册"]
    L --> H
    J -->|"已登录"| M["下载/评论"]
```

## 4. 用户界面设计

### 4.1 设计风格
- **主色调**: 深蓝色 (#1a1c2e) 作为顶部导航背景，白色 (#ffffff) 作为主体内容背景
- **辅助色**: 橙红色 (#ff6b35) 用于火焰图标和重要标记，蓝色 (#4a90d9) 用于链接和分类标签
- **按钮风格**: 圆角按钮，主操作使用蓝色填充，次要操作使用边框样式
- **字体**: 系统默认中文字体栈 "Microsoft YaHei", "PingFang SC", "Helvetica Neue", sans-serif
- **标题字号**: 16px，正文 14px，辅助信息 12px
- **布局风格**: 经典论坛两栏布局，左侧主内容区(约70%)，右侧信息栏(约30%)，卡片式设计
- **图标/标签风格**: 火焰emoji标识置顶帖子等级(🔥必火/🔥🔥火火/🔥小火)，彩色小标签标识分类和网盘来源

### 4.2 页面设计概览
| 页面名称 | 模块名称 | UI元素 |
|----------|----------|--------|
| 首页 | 导航栏 | 深色背景横向导航，Logo居左，搜索框居中，用户区居右 |
| 首页 | 帖子列表 | 白色卡片列表，每项包含左侧缩略图(60x60)、中间标题+元信息、右侧回复计数 |
| 首页 | 侧边栏 | 白色卡片，内含数据统计网格和排行列表 |
| 帖子详情页 | 内容区 | 宽幅白色卡片，音乐封面居中，播放器控件，markdown风格内容 |
| 帖子详情页 | 评论区 | 扁平化评论列表，头像+用户名+楼层+内容 |

### 4.3 响应式设计
- 桌面端优先设计（主设计宽度 1200px）
- 平板端：侧边栏收起为底部区域
- 移动端：单栏布局，导航折叠为汉堡菜单，帖子列表简化显示