Project Overview

Source Files

This page is generated from the following source files:

• 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 is a cross-platform resource downloading tool built with Go and the Wails v2 framework. The application functions as a local proxy-based network sniffer, capturing and filtering multimedia resources from various platforms including WeChat Channels, Mini Programs, Douyin, Kuaishou, Xiaohongshu, KuGou Music, and QQ Music. Unlike traditional packet capture tools such as Fiddler or Charles, res-downloader provides a user-friendly interface with enhanced resource filtering and display capabilities, making it accessible to non-technical users (README-EN.md:1-29).

The project implements a desktop application architecture combining a Go backend with a Vue 3 frontend. The backend handles proxy server operations, certificate management, and resource interception, while the frontend provides an intuitive graphical interface for managing captured resources. The application supports multiple resource types including video, audio, images, m3u8 playlists, and live streams (README.md:1-28).

Technical Architecture

The application follows a hybrid desktop architecture pattern using Wails v2 as the bridging framework between Go and web technologies. This approach enables native performance for proxy operations while leveraging modern frontend frameworks for the user interface.

Backend Core Components

The Go backend serves as the application's foundation, handling system-level operations including proxy server management, network traffic interception, and resource filtering. The main entry point initializes the Wails runtime with specific window configurations and asset server settings (main.go:28-57).

go
1// Application initialization structure
2err := wails.Run(&options.App{
3    Title:                    app.AppName,
4    Width:                    1280,
5    MinWidth:                 960,
6    Height:                   800,
7    MinHeight:                600,
8    Frameless:                !isMac,
9    Menu:                     appMenu,
10    EnableDefaultContextMenu: true,
11    AssetServer: &assetserver.Options{
12        Assets:     assets,
13        Middleware: core.Middleware,
14    },
15    BackgroundColour: &options.RGBA{R: 27, G: 38, B: 54, A: 1},
16    OnStartup: func(ctx context.Context) {
17        app.Startup(ctx)
18    },
19})

The backend dependencies include github.com/elazarl/goproxy for HTTP proxy functionality, github.com/rs/zerolog for structured logging, and github.com/matoous/go-nanoid/v2 for unique identifier generation (go.mod:1-15). The Wails framework version 2.10.1 provides the core desktop application infrastructure with cross-platform support for Windows, macOS, and Linux.

Frontend Architecture

The frontend implements a modern Vue 3 application with TypeScript, utilizing Pinia for state management and vue-router for client-side routing. The application entry point bootstraps Vue with the router, i18n for internationalization, and Pinia store (frontend/src/main.ts:1-14).

The UI framework is Naive UI version 2.38.2, providing a comprehensive set of Vue 3 components. Additional dependencies include axios for HTTP requests, video.js for video playback, and flv.js for FLV stream handling (frontend/package.json:1-21).

System Architecture Diagram

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

Architecture Explanation:

1. Frontend Layer: The Vue 3 application manages all user interface concerns, with Pinia handling application state including proxy configuration, captured resources, and user preferences. The router provides navigation between the main resource list view and settings panel.

2. Wails Bridge: This layer enables bidirectional communication between Go and JavaScript. The @wailsapp/runtime package provides JavaScript APIs for calling Go functions and handling events, while core.Bind exposes Go methods to the frontend (frontend/wailsjs/runtime/package.json:1-24).

3. Backend Layer: The Go backend implements the core proxy functionality using the goproxy library. Traffic flows through the proxy server, where the capture engine intercepts requests and responses, and the filter classifies resources by type (video, audio, image, etc.).

4. External Systems: Network traffic from target platforms passes through the local proxy, enabling the application to capture and analyze resource requests without requiring platform-specific APIs.

Application Configuration

The application configuration spans multiple layers, from build-time settings in wails.json to runtime state management in the Pinia store. This multi-layer approach separates concerns between build configuration, application metadata, and user preferences.

Build Configuration

The wails.json file defines project metadata and build parameters. The current version is 3.1.3, with the project name and output filename both set to "res-downloader" (wails.json:1-20).

Runtime State Management

The Pinia store manages application state with a comprehensive configuration object. The default configuration initializes with a light theme, Chinese locale, and proxy settings bound to 0.0.0.0:8899 (frontend/src/stores/index.ts:1-36).

typescript
1const globalConfig = ref<appType.Config>({
2    Theme: "lightTheme",
3    Locale: "zh",
4    Host: "0.0.0.0",
5    Port: "8899",
6    Quality: 0,
7    SaveDirectory: "",
8    UpstreamProxy: "",
9    FilenameLen: 0,
10    FilenameTime: false,
11    OpenProxy: false,
12    DownloadProxy: false,
13    AutoProxy: false,
14    WxAction: false,
15    TaskNumber: 8,
16    DownNumber: 3,
17    UserAgent: "",
18    UseHeaders: "",
19    InsertTail: true,
20    MimeMap: {},
21})

Configuration Parameters:

• Network Settings: Host and Port define the proxy server binding address. The default port 8899 must be available and is referenced in troubleshooting documentation (README-EN.md:78-82).
• Proxy Behavior: OpenProxy controls the proxy server state, DownloadProxy determines whether downloads use the proxy, and AutoProxy enables automatic proxy configuration.
• Download Management: TaskNumber (default: 8) and DownNumber (default: 3) control concurrent download operations.
• Resource Handling: MimeMap provides MIME type filtering configuration for resource classification.

Frontend Structure

The frontend implements a single-page application architecture with lazy-loaded routes and centralized state management. The structure follows Vue 3 best practices with TypeScript for type safety.

Application Bootstrap

The entry point file orchestrates application initialization by creating the Vue app instance and registering plugins in a specific order: router first for navigation guards, then i18n for internationalization, and finally Pinia for state management (frontend/src/main.ts:1-14).

Routing Configuration

The router configuration defines a nested route structure with a layout component as the parent. The main layout redirects to an index route by default, with two child routes: the index view (resource list) with keep-alive enabled, and the settings view without caching (frontend/src/router/index.ts:1-31).

typescript
1const routes = [
2  {
3    path: "/",
4    name: "layout",
5    component: () => import("@/components/layout/Index.vue"),
6    redirect: "/index",
7    children: [
8      {
9        path: "/index",
10        name: "index",
11        meta: {keepAlive: true},
12        component: () => import("@/views/index.vue"),
13      },
14      {
15        path: "/setting",
16        name: "setting",
17        meta: {keepAlive: false},
18        component: () => import("@/views/setting.vue"),
19      },
20    ]
21  },
22]

The hash-based history mode (createWebHashHistory) is used for compatibility with the Wails file:// protocol, ensuring routes work correctly when the application is loaded from local files.

Data Flow Sequence

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

Sequence Flow Explanation:

1. Proxy Initialization: When the user starts the proxy, the UI updates the Pinia store state, which triggers a Go method call through the Wails runtime bindings. The Go backend initializes the goproxy server on port 8899 (main.go:52-55).

2. Traffic Interception Loop: All HTTP/HTTPS traffic flows through the proxy server. The Go backend intercepts each request, analyzes the content type, and filters resources based on the MimeMap configuration. Matching resources emit events back to the frontend.

3. Resource Download: When the user initiates a download, the request flows from the UI through the store and runtime to the Go backend, which fetches the resource and saves it to the configured directory.

Core Features and Capabilities

The application provides a comprehensive set of features designed for resource capture and management across multiple platforms.

Resource Type Support

Platform Compatibility

The application supports resource capture from numerous Chinese and international platforms (README.md:24-27):

• Social Media: WeChat Channels (视频号), WeChat Mini Programs, Douyin (抖音), Kuaishou (快手), Xiaohongshu (小红书)
• Music Platforms: KuGou Music (酷狗音乐), QQ Music
• General Web: Any website with accessible media resources

Proxy-Based Capture Mechanism

The core technical approach uses a local HTTP/HTTPS proxy to intercept network traffic. This method is similar to tools like Fiddler and Charles but with specialized filtering for media resources (README-EN.md:93-96). The proxy requires certificate installation for HTTPS interception, which is handled during the application setup process.

Technology Stack Summary

Project Directory Structure

res-downloader/
├── main.go                 # Application entry point
├── go.mod                  # Go module definition
├── wails.json              # Wails project configuration
├── frontend/               # Vue 3 frontend application
│   ├── src/
│   │   ├── main.ts         # Frontend entry point
│   │   ├── App.vue         # Root Vue component
│   │   ├── router/         # vue-router configuration
│   │   │   └── index.ts
│   │   ├── stores/         # Pinia state management
│   │   │   └── index.ts
│   │   ├── api/            # API client modules
│   │   ├── components/     # Reusable Vue components
│   │   ├── views/          # Page-level components
│   │   └── assets/         # Static assets
│   ├── package.json        # NPM dependencies
│   └── wailsjs/            # Wails-generated bindings
│       └── runtime/        # JavaScript runtime
├── build/                  # Build assets and icons
└── docs/                   # Documentation files

Usage Scenarios

Primary Use Cases

1. Content Creator Resource Collection: Download reference materials, background music, and stock footage from various platforms for content creation workflows.

2. Media Archiving: Preserve online media content before it becomes unavailable, creating local archives of important video and audio resources.

3. Educational Resource Gathering: Collect educational videos and materials from multiple sources for offline study and reference.

4. Development and Testing: Analyze network requests and resource loading patterns for web development and debugging purposes.

Operational Workflow

The typical usage flow involves five steps (README-EN.md:50-56):

1. Install the application with certificate and network permissions
2. Launch and click "Start Proxy" in the top-left corner
3. Select resource types to capture (default: all types)
4. Open target content in external applications (WeChat, browser, etc.)
5. Return to the application to view captured resources

Report Reading Roadmap

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

Reading Path Explanation:

• Start Here: This overview document provides the foundation for understanding the project's purpose, architecture, and capabilities.
• Architecture Deep Dive: Explores the Go backend modules, proxy implementation details, and frontend component structure.
• Data Flow Analysis: Examines how network traffic is captured, filtered, and presented to users.
• Configuration Guide: Details all configurable parameters and their effects on application behavior.
• Deployment & Build: Covers building from source, distribution packaging, and platform-specific considerations.

Quantified Capabilities

The application architecture supports extensibility through the MimeMap configuration, allowing users to add custom MIME type filters for additional resource types without code changes. The modular frontend structure with lazy-loaded routes enables future feature additions without impacting initial load performance.