graph TB
    A[Pixuli 智能图片管理] --> B[图片管理]
    A --> C[图片处理]
    A --> D[云端存储]

    B --> B1[智能浏览]
    B --> B2[拖拽上传]
    B --> B3[标签系统]
    B --> B4[搜索功能]
    B --> B5[元数据编辑]

    C --> C1[WebP 压缩]
    C --> C2[格式转换]
    C --> C3[批量处理]
    C --> C4[尺寸调整]
    C --> C5[质量控制]

    D --> D1[GitHub 集成]
    D --> D2[版本控制]
    D --> D3[团队协作]

    style A fill:#e3f2fd
    style B fill:#e8f5e8
    style C fill:#fff3e0
    style D fill:#f3e5f5

graph TB
    subgraph "前端层 (React + TypeScript)"
        A[Electron 渲染进程]
        B[React 组件]
        C[状态管理 Zustand]
        D[UI 组件库]
    end

    subgraph "业务逻辑层"
        E[图片管理服务]
        F[图片处理服务]
        G[GitHub 存储服务]
    end

    subgraph "后端层 (Rust + NAPI)"
        H[pixuli-wasm]
        I[图片处理引擎]
        J[格式转换引擎]
    end

    subgraph "系统层"
        K[Electron 主进程]
        L[文件系统]
        M[GitHub API]
        N[本地存储]
    end

    A --> B
    B --> C
    B --> D
    B --> E
    B --> F
    B --> G

    E --> H
    F --> I
    G --> J

    H --> I
    H --> J

    K --> L
    K --> M
    K --> N
    K --> A

    style A fill:#e3f2fd
    style B fill:#e8f5e8
    style C fill:#fff3e0
    style D fill:#fce4ec
    style E fill:#f3e5f5
    style F fill:#e1f5fe
    style G fill:#e8f5e8
    style H fill:#fff3e0
    style I fill:#fce4ec
    style J fill:#f3e5f5
    style K fill:#e1f5fe
    style L fill:#e8f5e8
    style M fill:#fff3e0
    style N fill:#fce4ec