# ltaoo/wx_channels_download architecture

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

- Interactive diagram: https://gitdiagram.com/ltaoo/wx_channels_download
- Repository: https://github.com/ltaoo/wx_channels_download

## Overview

This repository is a desktop-oriented media downloader and content-management service. Its documented primary workflow is to start the local service, open a video in WeChat PC, use an injected download button, and save the selected video quality. The tree also shows broader scraping, download-task, preview, and management capabilities. The README establishes the user workflow; source excerpts establish only a few frontend imports and HTTP route registrations, so uncertain backend handoffs are omitted.

Main entry points: [`frontend/src/index.js`](https://github.com/ltaoo/wx_channels_download/blob/main/frontend/src/index.js) (Management UI), [`frontend/src/components.js`](https://github.com/ltaoo/wx_channels_download/blob/main/frontend/src/components.js) (UI components), [`frontend/src/store.js`](https://github.com/ltaoo/wx_channels_download/blob/main/frontend/src/store.js) (Routes and state), [`frontend/src/dmui.js`](https://github.com/ltaoo/wx_channels_download/blob/main/frontend/src/dmui.js) (UI primitives)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["User experience"]
  node_wechat["WeChat PC"]
  node_inject["Download controls<br/>[components.js]"]
  node_webapp["Management UI<br/>[index.js]"]
  node_ui_components["UI components<br/>[components.js]"]
  node_design_system["UI primitives<br/>[dmui.js]"]
  node_app_state["Routes and state<br/>[store.js]"]
  node_preview_view["Download preview<br/>[preview.js]"]
  node_preview_model["Preview behavior<br/>[preview.model.js]"]
end

subgraph group_backend["Service API"]
  node_api_routes["HTTP routes<br/>[routes.go]"]
  node_task_api["Download tasks"]
  node_data_store[("Persistent data<br/>[store.go]")]
end

subgraph group_media["Media acquisition"]
  node_wxchannels_adapter["Channels adapter<br/>[adapter.go]"]
  node_scrapers["Platform scrapers"]
end

subgraph group_platform["Platform integrations"]
  node_interceptor["Traffic interception<br/>[server.go]"]
  node_sph_worker["Sph worker<br/>[worker.js]"]
end

node_user(("WeChat user"))

node_user -->|"opens video"| node_wechat
node_wechat -->|"shows download"| node_inject
node_webapp -->|"uses"| node_ui_components
node_webapp -->|"uses"| node_design_system
node_webapp -->|"uses"| node_app_state
node_ui_components -->|"uses"| node_design_system
node_app_state -->|"renders shell"| node_webapp
node_preview_view -->|"uses"| node_preview_model
node_api_routes -->|"registers handlers"| node_task_api

click node_inject "https://github.com/ltaoo/wx_channels_download/blob/main/frontend/inject/components.js"
click node_webapp "https://github.com/ltaoo/wx_channels_download/blob/main/frontend/src/index.js"
click node_ui_components "https://github.com/ltaoo/wx_channels_download/blob/main/frontend/src/components.js"
click node_design_system "https://github.com/ltaoo/wx_channels_download/blob/main/frontend/src/dmui.js"
click node_app_state "https://github.com/ltaoo/wx_channels_download/blob/main/frontend/src/store.js"
click node_preview_view "https://github.com/ltaoo/wx_channels_download/blob/main/frontend/src/pages/preview.js"
click node_preview_model "https://github.com/ltaoo/wx_channels_download/blob/main/frontend/src/pages/preview.model.js"
click node_api_routes "https://github.com/ltaoo/wx_channels_download/blob/main/internal/api/routes.go"
click node_task_api "https://github.com/ltaoo/wx_channels_download/blob/main/internal/api/handler_download_task.go"
click node_data_store "https://github.com/ltaoo/wx_channels_download/blob/main/internal/database/store.go"
click node_interceptor "https://github.com/ltaoo/wx_channels_download/blob/main/internal/interceptor/server.go"
click node_wxchannels_adapter "https://github.com/ltaoo/wx_channels_download/blob/main/internal/adapter/wxchannels/adapter.go"
click node_scrapers "https://github.com/ltaoo/wx_channels_download/tree/main/pkg/scraper"
click node_sph_worker "https://github.com/ltaoo/wx_channels_download/blob/main/internal/workers/sph/worker.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_wechat,node_inject,node_webapp,node_ui_components,node_design_system,node_app_state,node_preview_view,node_preview_model,node_user toneBlue
class node_api_routes,node_task_api,node_data_store toneAmber
class node_wxchannels_adapter,node_scrapers toneMint
class node_interceptor,node_sph_worker toneRose
```

## Components

### User experience

- **WeChat PC**
- [Download controls](https://github.com/ltaoo/wx_channels_download/blob/main/frontend/inject/components.js): `frontend/inject/components.js`
- [Management UI](https://github.com/ltaoo/wx_channels_download/blob/main/frontend/src/index.js): `frontend/src/index.js`
- [UI components](https://github.com/ltaoo/wx_channels_download/blob/main/frontend/src/components.js): `frontend/src/components.js`
- [UI primitives](https://github.com/ltaoo/wx_channels_download/blob/main/frontend/src/dmui.js): `frontend/src/dmui.js`
- [Routes and state](https://github.com/ltaoo/wx_channels_download/blob/main/frontend/src/store.js): `frontend/src/store.js`
- [Download preview](https://github.com/ltaoo/wx_channels_download/blob/main/frontend/src/pages/preview.js): `frontend/src/pages/preview.js`
- [Preview behavior](https://github.com/ltaoo/wx_channels_download/blob/main/frontend/src/pages/preview.model.js): `frontend/src/pages/preview.model.js`

### Service API

- [HTTP routes](https://github.com/ltaoo/wx_channels_download/blob/main/internal/api/routes.go): `internal/api/routes.go`
- [Download tasks](https://github.com/ltaoo/wx_channels_download/blob/main/internal/api/handler_download_task.go): `internal/api/handler_download_task.go`
- [Persistent data](https://github.com/ltaoo/wx_channels_download/blob/main/internal/database/store.go): `internal/database/store.go`

### Media acquisition

- [Channels adapter](https://github.com/ltaoo/wx_channels_download/blob/main/internal/adapter/wxchannels/adapter.go): `internal/adapter/wxchannels/adapter.go`
- [Platform scrapers](https://github.com/ltaoo/wx_channels_download/tree/main/pkg/scraper): `pkg/scraper`

### Platform integrations

- [Traffic interception](https://github.com/ltaoo/wx_channels_download/blob/main/internal/interceptor/server.go): `internal/interceptor/server.go`
- [Sph worker](https://github.com/ltaoo/wx_channels_download/blob/main/internal/workers/sph/worker.js): `internal/workers/sph/worker.js`

### Other components

- **WeChat user**

## Connections

- WeChat user → WeChat PC: opens video
- WeChat PC → Download controls: shows download
- Management UI → UI components: uses (evidence: `frontend/src/index.js`)
- Management UI → UI primitives: uses (evidence: `frontend/src/index.js`)
- Management UI → Routes and state: uses (evidence: `frontend/src/index.js`)
- UI components → UI primitives: uses (evidence: `frontend/src/components.js`)
- Routes and state → Management UI: renders shell (evidence: `frontend/src/store.js`)
- Download preview → Preview behavior: uses (evidence: `frontend/src/pages/preview.js`)
- HTTP routes → Download tasks: registers handlers (evidence: `internal/api/routes.go`)