# qier222/yesplaymusic architecture

> Architecture diagram of the GitHub repository qier222/yesplaymusic, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/qier222/yesplaymusic
- Repository: https://github.com/qier222/yesplaymusic

## Overview

YesPlayMusic is a Vue-based third-party NetEase Music client, with browser/PWA and Electron modes. Users sign in or browse music, discover tracks and other catalog content, then play music with lyrics and manage a library; account features include daily recommendations and private FM. The sampled search view shows search requests and track-detail lookup, while the README documents additional playback sources, Last.fm scrobbling, and cloud music. Several features are documented but their implementation was not sampled, so those subsystem links are intentionally limited.

Main entry points: [`src/App.vue`](https://github.com/qier222/yesplaymusic/blob/master/src/App.vue) (App shell), [`src/utils/request.js`](https://github.com/qier222/yesplaymusic/blob/master/src/utils/request.js) (HTTP requests), [`src/api`](https://github.com/qier222/yesplaymusic/tree/master/src/api) (Music API modules), [`src/store/index.js`](https://github.com/qier222/yesplaymusic/blob/master/src/store/index.js) (Application state)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_interface["Application interface"]
  node_app["App shell<br/>[App.vue]"]
  node_router["Route access<br/>[index.js]"]
  node_views["Music views"]
  node_authviews["Login views<br/>[login.vue]"]
  node_playerui["Player controls<br/>[Player.vue]"]
end

subgraph group_catalog["Music catalog"]
  node_search["Catalog search<br/>[search.vue]"]
  node_apis["Music API modules"]
  node_authapi["Authentication API<br/>[auth.js]"]
  node_request["HTTP requests<br/>[request.js]"]
end

subgraph group_playback["Playback and state"]
  node_store["Application state<br/>[index.js]"]
  node_actions["State actions<br/>[actions.js]"]
  node_player["Playback engine<br/>[Player.js]"]
  node_storage[("Local persistence<br/>[localStorage.js]")]
end

subgraph group_platform["Platform integrations"]
  node_electron["Electron runtime<br/>[background.js]"]
  node_ipc["IPC bridge<br/>[ipcRenderer.js]"]
  node_electronfeatures["Desktop controls"]
  node_lastfm["Last.fm scrobbling<br/>[lastfm.js]"]
  node_unblock["Alternate audio sources<br/>[ncmModDef.js]"]
end

node_user(("Listener"))
node_netease{{"NetEase Music API"}}

node_user -->|"uses"| node_app
node_app -->|"renders routes"| node_router
node_router -->|"selects view"| node_views
node_views -->|"dispatches actions"| node_store
node_search -->|"searches catalog"| node_apis
node_search -->|"loads track details"| node_apis
node_apis -->|"sends requests"| node_request
node_request -->|"calls API"| node_netease
node_authviews -->|"requests login"| node_authapi
node_authapi -->|"sends requests"| node_request
node_request -.->|"persists settings"| node_store
node_app -->|"loads library"| node_actions
node_actions -->|"fetches music data"| node_apis
node_playerui -->|"controls playback"| node_player
node_player -->|"updates player state"| node_store
node_store -->|"saves settings"| node_storage
node_electron -->|"exposes IPC"| node_ipc
node_app -->|"initializes bridge"| node_ipc
node_ipc -->|"dispatches controls"| node_electronfeatures
node_player -.->|"scrobbles tracks"| node_lastfm
node_electron -.->|"configures audio sources"| node_unblock

click node_app "https://github.com/qier222/yesplaymusic/blob/master/src/App.vue"
click node_router "https://github.com/qier222/yesplaymusic/blob/master/src/router/index.js"
click node_views "https://github.com/qier222/yesplaymusic/tree/master/src/views"
click node_search "https://github.com/qier222/yesplaymusic/blob/master/src/views/search.vue"
click node_authviews "https://github.com/qier222/yesplaymusic/blob/master/src/views/login.vue"
click node_apis "https://github.com/qier222/yesplaymusic/tree/master/src/api"
click node_authapi "https://github.com/qier222/yesplaymusic/blob/master/src/api/auth.js"
click node_request "https://github.com/qier222/yesplaymusic/blob/master/src/utils/request.js"
click node_store "https://github.com/qier222/yesplaymusic/blob/master/src/store/index.js"
click node_actions "https://github.com/qier222/yesplaymusic/blob/master/src/store/actions.js"
click node_player "https://github.com/qier222/yesplaymusic/blob/master/src/utils/Player.js"
click node_playerui "https://github.com/qier222/yesplaymusic/blob/master/src/components/Player.vue"
click node_storage "https://github.com/qier222/yesplaymusic/blob/master/src/store/plugins/localStorage.js"
click node_electron "https://github.com/qier222/yesplaymusic/blob/master/src/background.js"
click node_ipc "https://github.com/qier222/yesplaymusic/blob/master/src/electron/ipcRenderer.js"
click node_electronfeatures "https://github.com/qier222/yesplaymusic/tree/master/src/electron"
click node_lastfm "https://github.com/qier222/yesplaymusic/blob/master/src/api/lastfm.js"
click node_unblock "https://github.com/qier222/yesplaymusic/blob/master/src/ncmModDef.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app,node_router,node_views,node_authviews,node_playerui toneBlue
class node_search,node_apis,node_authapi,node_request toneAmber
class node_store,node_actions,node_player,node_storage,node_netease toneMint
class node_electron,node_ipc,node_electronfeatures,node_lastfm,node_unblock toneRose
class node_user toneIndigo
```

## Components

### Application interface

- [App shell](https://github.com/qier222/yesplaymusic/blob/master/src/App.vue): `src/App.vue`
- [Route access](https://github.com/qier222/yesplaymusic/blob/master/src/router/index.js): `src/router/index.js`
- [Music views](https://github.com/qier222/yesplaymusic/tree/master/src/views): `src/views`
- [Login views](https://github.com/qier222/yesplaymusic/blob/master/src/views/login.vue): `src/views/login.vue`
- [Player controls](https://github.com/qier222/yesplaymusic/blob/master/src/components/Player.vue): `src/components/Player.vue`

### Music catalog

- [Catalog search](https://github.com/qier222/yesplaymusic/blob/master/src/views/search.vue): `src/views/search.vue`
- [Music API modules](https://github.com/qier222/yesplaymusic/tree/master/src/api): `src/api`
- [Authentication API](https://github.com/qier222/yesplaymusic/blob/master/src/api/auth.js): `src/api/auth.js`
- [HTTP requests](https://github.com/qier222/yesplaymusic/blob/master/src/utils/request.js): `src/utils/request.js`

### Playback and state

- [Application state](https://github.com/qier222/yesplaymusic/blob/master/src/store/index.js): `src/store/index.js`
- [State actions](https://github.com/qier222/yesplaymusic/blob/master/src/store/actions.js): `src/store/actions.js`
- [Playback engine](https://github.com/qier222/yesplaymusic/blob/master/src/utils/Player.js): `src/utils/Player.js`
- [Local persistence](https://github.com/qier222/yesplaymusic/blob/master/src/store/plugins/localStorage.js): `src/store/plugins/localStorage.js`

### Platform integrations

- [Electron runtime](https://github.com/qier222/yesplaymusic/blob/master/src/background.js): `src/background.js`
- [IPC bridge](https://github.com/qier222/yesplaymusic/blob/master/src/electron/ipcRenderer.js): `src/electron/ipcRenderer.js`
- [Desktop controls](https://github.com/qier222/yesplaymusic/tree/master/src/electron): `src/electron`
- [Last.fm scrobbling](https://github.com/qier222/yesplaymusic/blob/master/src/api/lastfm.js): `src/api/lastfm.js`
- [Alternate audio sources](https://github.com/qier222/yesplaymusic/blob/master/src/ncmModDef.js): `src/ncmModDef.js`

### Other components

- **Listener**
- **NetEase Music API**

## Connections

- Listener → App shell: uses
- App shell → Route access: renders routes
- Route access → Music views: selects view
- Music views → Application state: dispatches actions
- Catalog search → Music API modules: searches catalog
- Catalog search → Music API modules: loads track details
- Music API modules → HTTP requests: sends requests
- HTTP requests → NetEase Music API: calls API
- Login views → Authentication API: requests login
- Authentication API → HTTP requests: sends requests
- HTTP requests → Application state: persists settings
- App shell → State actions: loads library
- State actions → Music API modules: fetches music data
- Player controls → Playback engine: controls playback
- Playback engine → Application state: updates player state
- Application state → Local persistence: saves settings
- Electron runtime → IPC bridge: exposes IPC
- App shell → IPC bridge: initializes bridge
- IPC bridge → Desktop controls: dispatches controls
- Playback engine → Last.fm scrobbling: scrobbles tracks
- Electron runtime → Alternate audio sources: configures audio sources