📁 项目结构

📂 根目录

GlassMusicPlayer/
├── src/                    # 📦 源代码目录
├── public/                 # 🌐 静态资源（不经过编译）
├── build/                  # 🔧 Vite 构建配置
├── dist/                   # 📤 构建输出目录
├── images/                 # 🖼️ README 截图
├── index.html              # 📄 HTML 入口
├── vite.config.ts          # ⚙️ Vite 配置
├── tsconfig.json           # 📘 TypeScript 配置
├── package.json            # 📋 项目依赖与脚本
├── postcss.config.mjs      # 🎨 PostCSS 配置
├── netlify.toml            # ☁️ Netlify 部署配置
└── .env                    # 🔐 环境变量（需自行创建）

📦 源码目录 src/

src/
├── main.ts                 # 🚀 应用入口
├── App.vue                 # 🏠 根组件
├── api/                    # 🔌 API 请求封装
│   ├── index.ts            # 📡 所有 API 函数
│   └── interface.ts        # 📝 数据类型定义
├── assets/                 # 🎨 静态资源
│   ├── svg/                # 🖼️ SVG 图标
│   ├── png/                # 🖼️ 图片资源
│   └── hanyi.ttf           # 🔤 字体文件
├── components/             # 🧩 通用组件
│   ├── Auth/               # 🔐 登录相关
│   ├── Background/         # 🌌 背景主题组件
│   ├── Comments/           # 💬 评论组件
│   ├── Mobile/             # 📱 移动端专用组件
│   ├── Search/             # 🔍 搜索结果组件
│   ├── Ui/                 # 🎯 通用 UI 组件
│   ├── PlayerDrawer.vue    # 🎵 播放器抽屉
│   ├── SongList.vue        # 📋 歌曲列表
│   └── Swiper.vue          # 🎠 轮播图
├── composables/            # 🪝 组合式函数
│   ├── useAudio.ts         # 🎧 音频播放控制
│   └── useLyrics.ts        # 📝 歌词解析与同步
├── config/                 # ⚙️ 配置文件
│   ├── nprogress.ts        # 📊 进度条配置
│   └── settingsOptions.ts  # 🎛️ 设置选项
├── languages/              # 🌍 国际化
│   ├── index.ts            # 🌐 i18n 入口
│   └── modules/            # 📦 语言包
│       ├── zh.ts           # 🇨🇳 中文
│       ├── en.ts           # 🇺🇸 英文
│       └── ja.ts           # 🇯🇵 日文
├── layout/                 # 📐 布局组件
│   ├── index.vue           # 🖥️ 桌面端布局
│   ├── aside.vue           # 📌 侧边栏
│   ├── header.vue          # 🔝 顶部栏
│   ├── footer.vue          # 🎵 底部播放栏
│   └── mobile/             # 📱 移动端布局
│       ├── index.vue
│       ├── Header.vue
│       └── TabBar.vue
├── pages/                  # 📄 页面组件
│   ├── index.vue           # 🏠 首页
│   ├── playlist.vue        # 📋 歌单详情
│   ├── song.vue            # 🎵 歌曲详情
│   ├── artist.vue          # 🎤 艺术家详情
│   ├── artists.vue         # 👥 艺术家列表
│   ├── album.vue           # 💿 专辑详情
│   ├── new-albums.vue      # 🆕 新碟上架
│   ├── charts.vue          # 📊 排行榜
│   ├── search.vue          # 🔍 搜索页
│   ├── mv-list.vue         # 🎬 MV 列表
│   ├── mv-player.vue       # ▶️ MV 播放
│   ├── likes.vue           # ❤️ 我喜欢
│   ├── recent.vue          # 🕐 最近播放
│   ├── my-music.vue        # 🎵 我的音乐
│   ├── settings.vue        # ⚙️ 设置页
│   └── mobile/             # 📱 移动端页面
├── routers/                # 🛤️ 路由配置
│   └── index.ts            # 🔀 响应式路由
├── stores/                 # 🗄️ 状态管理（Pinia）
│   ├── index.ts            # 📦 Store 入口
│   ├── interface.ts        # 📝 类型定义
│   ├── persist.ts          # 💾 持久化配置
│   └── modules/
│       ├── audio.ts        # 🎧 音频播放状态
│       ├── global.ts       # 🌐 全局状态（主题、语言）
│       ├── settings.ts     # ⚙️ 设置状态（背景、歌词）
│       └── user.ts         # 👤 用户登录状态
├── style/                  # 🎨 样式文件
│   ├── index.scss          # 📦 样式入口
│   ├── base.scss           # 🎯 基础样式
│   ├── theme.css           # 🌗 主题变量
│   ├── tailwind.css        # 🌬️ Tailwind 导入
│   └── components.css      # 🧩 组件样式
├── typings/                # 📘 全局类型
│   ├── index.ts
│   └── global.d.ts
└── utils/                  # 🛠️ 工具函数
    ├── index.ts            # 📦 通用工具
    ├── http.ts             # 🌐 Axios 封装
    ├── time.ts             # ⏰ 时间格式化
    └── audioUtils.ts       # 🎧 音频工具

🔀 响应式路由机制

项目使用自定义的 responsive() 工厂函数实现桌面端与移动端页面的自动切换：

// src/routers/index.ts
const responsive = (desktopLoader, mobileLoader) =>
  defineComponent({
    setup() {
      const isMobile = useMediaQuery('(max-width: 768px)')
      const Desktop = defineAsyncComponent(desktopLoader)
      const Mobile = defineAsyncComponent(mobileLoader)
      return () => h(isMobile.value ? Mobile : Desktop)
    },
  })

当窗口宽度 ≤ 768px 时自动加载移动端组件，否则加载桌面端组件。

🌌 背景主题组件

src/components/Background/ 目录包含三种可选背景：

组件	说明
🌌 Aurora.vue	极光效果，基于 WebGL/OGL
🌈 ColorBends.vue	渐变弯曲效果
✨ Ultimate.vue	终极渐变，支持鼠标交互

每种背景都有对应的设置面板（*SettingsPanel.vue），可在设置页调整颜色与参数。