Projektüberblick

Quelldateien

Diese Seite wurde aus den folgenden Quelldateien erstellt:

• README.md
• README-EN.md
• main.go
• wails.json
• go.mod
• frontend/src/main.ts
• frontend/src/router/index.ts
• frontend/src/stores/index.ts
• frontend/package.json
• frontend/wailsjs/runtime/package.json

res-downloader ist ein plattformübergreifendes Werkzeug zur Ressourcen-Erfassung und -Verwaltung, das auf einer lokalen Proxy-Architektur basiert. Die Anwendung ermöglicht das Sniffing und Herunterladen verschiedener Medientypen (Video, Audio, Bilder, m3u8, Live-Streams) von Plattformen wie WeChat-Kanälen, Douyin, Kuaishou und Xiaohongshu. Die technische Umsetzung kombiniert ein Go-Backend mit dem Wails v2 Framework für die Desktop-Integration und ein Vue 3 Frontend mit Naive UI für die Benutzeroberfläche.

Projektdefinition und Kernfunktionen

Das Projekt positioniert sich als benutzerfreundlicher "Resource Downloader" mit Fokus auf einfache Bedienbarkeit bei gleichzeitig breiter Plattformabdeckung. Die Kernarchitektur basiert auf einem lokalen HTTP-Proxy, der den Netzwerkverkehr überwacht und Medienressourcen automatisch extrahiert.

Hauptmerkmale der Anwendung:

• Plattformübergreifende Verfügbarkeit: Windows, macOS und Linux werden vollständig unterstützt
• Multi-Ressourcentyp-Unterstützung: Video, Audio, Bilder, m3u8-Playlists und Live-Streams
• Breite Plattformkompatibilität: WeChat-Kanäle, Mini-Programme, Douyin, Kuaishou, Xiaohongshu, KuGou Music, QQ Music
• Proxy-basierte Erfassung: Eingebauter Proxy für ressourcenbeschränkte Netzwerke
• Intuitive Benutzeroberfläche: Klare, moderne UI mit Theme-Unterstützung

Die Projektbeschreibung in README.md:1-32 definiert den Anwendungszweck als "cross-platform resource downloader" mit Schwerpunkt auf Ressourcen-Sniffing und -Download. Die englische Dokumentation in README-EN.md:1-28 bestätigt die Proxy-Capture-Funktionalität als zentrales technisches Merkmal.

Arbeitsprinzip:

Das Tool erfasst Traffic über einen lokalen Proxy und filtert nützliche Ressourcen heraus. Das Arbeitsprinzip ähnelt Tools wie Fiddler, Charles oder Browser DevTools, bietet jedoch eine benutzerfreundlichere Anzeige und erweiterte Filterung für Endanwender ohne technische Vorkenntnisse.

Technologie-Stack und Architektur

Der Technologie-Stack folgt einem modernen Hybrid-Ansatz mit Go für die Backend-Logik und Vue.js für das Frontend. Die Integration erfolgt über das Wails Framework, das eine native Desktop-Erfahrung mit Web-Technologien ermöglicht.

Technologie-Übersicht

Die Go-Abhängigkeiten in go.mod:1-42 zeigen die Kernabhängigkeiten: Wails v2.10.1 für die Desktop-Integration, goproxy v1.7.2 für die Proxy-Funktionalität, zerolog für strukturiertes Logging und golang.org/x/net für erweiterte Netzwerkoperationen.

Architektur-Diagramm

正在加载图表渲染器...

Architektur-Erklärung:

1. Frontend Layer: Die Vue.js-Anwendung mit Pinia für State Management und vue-i18n für Internationalisierung. Die Kommunikation mit dem Backend erfolgt über die Wails JavaScript Runtime.

2. Wails Runtime Layer: Bildet die Brücke zwischen Go-Backend und JavaScript-Frontend. Der Asset Server stellt statische Dateien bereit, während die Bind-Schicht Go-Funktionen für JavaScript aufrufbar macht.

3. Backend Layer: Der goproxy-Server überwacht den Netzwerkverkehr, das Core-Modul filtert Ressourcen und das Bind-Layer exponiert Funktionen an das Frontend.

4. Externe Systeme: Die Zielplattformen (WeChat, Douyin, Musik-Apps) werden über den Proxy abgehört.

Der Haupteinstiegspunkt in main.go:28-67 zeigt die Wails-App-Konfiguration mit Fenstereinstellungen (1280x800, Min: 960x600), Asset-Server-Konfiguration und plattformspezifischem Menü-Handling für macOS.

Frontend-Struktur und Routing

Das Frontend basiert auf einer modularen Vue 3-Architektur mit klarer Trennung zwischen Routing, State Management und Komponenten. Die Anwendung verwendet Hash-basiertes Routing für zuverlässige Navigation in der Desktop-Umgebung.

Frontend-Initialisierung

Die Anwendung initialisiert in frontend/src/main.ts:1-14 mit drei Hauptkomponenten: Vue Router für Navigation, vue-i18n für Internationalisierung und Pinia für State Management. Die Wails-Runtime wird importiert, aber nicht explizit registriert – sie wird automatisch durch den Build-Prozess injiziert.

Routing-Konfiguration

typescript
1// Vereinfachte Darstellung der Routenstruktur
2const routes = [
3  {
4    path: "/",
5    name: "layout",
6    redirect: "/index",
7    children: [
8      { path: "/index", name: "index", meta: { keepAlive: true } },
9      { path: "/setting", name: "setting", meta: { keepAlive: false } }
10    ]
11  }
12]

Die Routing-Definition in frontend/src/router/index.ts:1-31 zeigt eine verschachtelte Struktur mit Layout-Wrapper und zwei Hauptansichten: Index (Hauptseite mit Keep-Alive) und Setting (Einstellungen ohne Caching).

Store-Struktur und Konfiguration

Der Pinia-Store in frontend/src/stores/index.ts:1-36 verwaltet zwei Hauptzustände:

App-Informationen:

• AppName, Version, Description, Copyright

Globale Konfiguration:

• Theme: "lightTheme" (Standard)
• Locale: "zh" (Standard)
• Host: "0.0.0.0", Port: "8899" (Proxy-Server)
• SaveDirectory: Speicherpfad für Downloads
• UpstreamProxy: Upstream-Proxy-Konfiguration
• TaskNumber: 8 (parallele Aufgaben)
• DownNumber: 3 (parallele Downloads)
• OpenProxy, DownloadProxy, AutoProxy: Proxy-Flags
• MimeMap: MIME-Type-Zuordnungen für Ressourcenfilterung

Die Frontend-Abhängigkeiten in frontend/package.json:1-38 umfassen Naive UI als Hauptkomponentenbibliothek, video.js und flv.js für Medienwiedergabe, sowie axios für HTTP-Anfragen.

Backend-Module und Proxy-Implementierung

Das Backend ist in Go implementiert und nutzt das Wails-Framework für die Desktop-Integration. Die Kernfunktionalität basiert auf einem HTTP-Proxy, der Netzwerkverkehr abfängt und Medienressourcen identifiziert.

Modul-Struktur

Anwendungsstart-Sequenz

正在加载图表渲染器...

Sequenz-Erklärung:

1. Initialisierung: main.go ruft core.GetApp() auf, um die App-Konfiguration zu laden
2. Bind-Layer: NewBind() erstellt die Go-JS Bridge für Frontend-Backend-Kommunikation
3. Wails-Start: wails.Run() startet die Desktop-Anwendung mit konfigurierten Optionen
4. Startup-Callback: OnStartup wird aufgerufen, Logo wird ausgegeben, app.Startup(ctx) initialisiert den Kontext
5. Frontend-Ready: AssetServer stellt Frontend-Dateien bereit, Bind-Aufrufe werden ermöglicht
6. Proxy-Aktivierung: Proxy-Server startet auf Port 8899 und sendet Ressourcen-Events an Frontend

Die main-Funktion in main.go:28-67 zeigt die vollständige Startsequenz mit plattformspezifischer Menü-Erstellung für macOS (AppMenu, EditMenu, WindowMenu).

Proxy-Konfiguration

Der Proxy-Server läuft standardmäßig auf Host "0.0.0.0" und Port "8899" (definiert in frontend/src/stores/index.ts:17-21). Die goproxy-Bibliothek in go.mod:8 bietet die HTTP-Proxy-Implementierung mit Unterstützung für HTTPS-Interception.

Proxy-Einstellungen in der Store-Konfiguration:

• OpenProxy: Proxy aktivieren/deaktivieren
• DownloadProxy: Proxy für Downloads verwenden
• AutoProxy: Automatische Proxy-Erkennung
• UpstreamProxy: Upstream-Proxy für verkettete Proxies

Versionsinformationen und Projekt-Metadaten

Die aktuelle Version 3.1.3 ist in wails.json:16 definiert. Die Projekt-Metadaten umfassen:

Die wails.json-Konfiguration in wails.json:1-20 definiert auch die Build-Befehle für das Frontend (npm install, npm run build) und die Development-Server-URL (auto).

Projekt-Prinzipien und Disclaimer

Das Tool dient Bildungs- und Forschungszwecken. Kommerzielle oder illegale Nutzung ist strikt untersagt. Der Autor übernimmt keine Haftung für Konsequenzen durch Missbrauch. Die Arbeitsweise basiert auf Traffic-Erfassung ähnlich Fiddler oder Charles, mit verbesserter Benutzerfreundlichkeit für nicht-technische Anwender.

Die Prinzipien in README-EN.md:93-104 erklären die Funktionsweise als lokaler Proxy mit Ressourcen-Filterung und heben die Eignung für Endanwender ohne technischen Hintergrund hervor.

Verzeichnisstruktur

res-downloader/
├── main.go                    # Haupteinstiegspunkt, Wails-Konfiguration
├── go.mod                     # Go-Abhängigkeiten
├── wails.json                 # Wails-Projektkonfiguration
├── frontend/
│   ├── src/
│   │   ├── main.ts           # Vue-App-Initialisierung
│   │   ├── router/
│   │   │   └── index.ts      # Routing-Definition
│   │   ├── stores/
│   │   │   └── index.ts      # Pinia Store
│   │   ├── components/       # Vue-Komponenten
│   │   ├── views/            # Seiten-Komponenten
│   │   └── assets/           # Statische Assets
│   ├── package.json          # NPM-Abhängigkeiten
│   └── wailsjs/              # Wails-generierte Bindings
│       └── runtime/          # Wails Runtime
└── build/                    # Build-Artefakte
    └── appicon.png           # Anwendungssymbol

Kernkomponenten im Detail

Wails-Integration

Die Wails-Integration erfolgt über mehrere Ebenen:

1. Go-Seite: core.GetApp() und core.NewBind() in main.go:31-32 initialisieren die App-Struktur und Bindings
2. Asset Server: Middleware in main.go:54 für statische Dateien
3. JavaScript-Seite: @wailsapp/runtime in frontend/wailsjs/runtime/package.json:1-24 für Runtime-Zugriff

Fenstereinstellungen

Die Fensterkonfiguration in main.go:45-49 definiert:

• Breite: 1280px (Minimum: 960px)
• Höhe: 800px (Minimum: 600px)
• Frameless: true (außer macOS)
• Hintergrundfarbe: RGB(27, 38, 54)

Store-Datenmodell

Der Store in frontend/src/stores/index.ts:9-36 definiert zwei Haupttypen:

AppType.App:

typescript
1{
2  AppName: string,
3  Version: string,
4  Description: string,
5  Copyright: string
6}

AppType.Config:

typescript
1{
2  Theme: string,           // "lightTheme"
3  Locale: string,          // "zh"
4  Host: string,            // "0.0.0.0"
5  Port: string,            // "8899"
6  Quality: number,         // 0
7  SaveDirectory: string,
8  UpstreamProxy: string,
9  FilenameLen: number,
10  FilenameTime: boolean,
11  OpenProxy: boolean,
12  DownloadProxy: boolean,
13  AutoProxy: boolean,
14  WxAction: boolean,
15  TaskNumber: number,      // 8
16  DownNumber: number,      // 3
17  UserAgent: string,
18  UseHeaders: string,
19  InsertTail: boolean,     // true
20  MimeMap: object
21}

Bericht-Leseroute

正在加载图表渲染器...

Empfohlene Lesereihenfolge:

1. Projektüberblick (aktuell): Grundlegendes Verständnis von Technologie-Stack und Architektur
2. Funktionen: Detaillierte Feature-Beschreibungen und Anwendungsfälle
3. Architektur: Tiefere Einblicke in Modul-Struktur und Abhängigkeiten
4. Datenfluss: Proxy-Logik und Ressourcen-Erfassung
5. API-Design: Go-JS Bindings und Schnittstellen
6. Konfiguration: Einstellungsmöglichkeiten und Parameter

Quantifizierte Projektkennzahlen

Anwendungsbereiche

Das Tool eignet sich für folgende Szenarien:

• Medienarchivierung: Herunterladen von Videos und Audios aus sozialen Medien
• Content-Analyse: Erfassung von Ressourcen für Forschungszwecke
• Offline-Nutzung: Lokale Speicherung von Streaming-Inhalten
• Netzwerk-Analyse: Überwachung von HTTP-Traffic für Debugging
• Plattform-übergreifender Zugriff: Einheitliches Interface für verschiedene Quellen

Die Proxy-basierte Architektur ermöglicht den Zugriff auf ressourcenbeschränkte Netzwerke und bietet eine Alternative zu browserbasierten DevTools für nicht-technische Anwender.