PixelPunk

A Modern Desktop Application Development Template based on Tauri 2.0 + Vue 3 + TypeScript

Ready to Use · Configuration Driven · Feature Complete

English | 简体中文

Features • Quick Start • Core Modules • Documentation

---

Preview

Configuration Driven · Four Core Modules Ready to Use

Features

🎯 Core Modules

This template includes enterprise-grade functional modules, all configuration-driven and ready to use:

Business Modules:

• 🔄 Auto Updater - Version checking, download progress, auto-installation
• 💾 Data Persistence - Local storage, nested access, Vue reactivity
• ⌨️ Shortcuts System - Global/local shortcuts, cross-platform support
• 🔔 System Notifications - Native notifications, permission management

Infrastructure:

• 🪟 Window State - Auto-save/restore window position and size
• 🔒 Single Instance - Prevent multiple app instances
• 🎨 Theme System - Dark/light mode, follow system preference
• 📝 Logger - Structured logging with persistence

✨ Complete Features

• 🎯 Floating Ball - File drag & drop upload, real-time progress, draggable, always on top
• 🎨 Custom Window - macOS-style title bar, transparent window support
• 🔔 System Tray - Multi-level menu groups, fully configurable
• 📦 Lightweight & Efficient - Rust-based, small size, excellent performance
• 🛠️ Configuration Driven - TypeScript config auto-synced to Rust
• 💅 Code Standards - ESLint + Prettier + Husky out of the box

Tech Stack

Frontend:  Vue 3.5 + TypeScript 5.8 + Vite 7.1 + Tailwind CSS 3.4
Backend:   Tauri 2.8 + Rust 1.70+
State:     Pinia 3.0

Quick Start

Prerequisites

• Node.js 20.19+ or 22.12+
• Rust 1.70+
• System dependencies: See Tauri Prerequisites

Installation

# Clone the project
git clone <your-repo-url>
cd pixelpunk

# Install dependencies
npm install

# Development mode
npm run tauri:dev

# Build application
npm run tauri:build

Core Modules

This template includes ready-to-use core modules. For detailed usage, see Development Guide.

Business Modules:

Module	Features	Config File
🔄 Auto Updater	Version check, download progress, auto-install	src/config/updater.config.ts
💾 Data Persistence	Local storage, nested access, Vue reactivity	src/config/storage.config.ts
⌨️ Shortcuts System	Global/local shortcuts, configuration-driven	src/config/shortcuts.config.ts
🔔 Notifications	Native notifications, permission management	src/utils/notification.ts

Infrastructure Modules:

Module	Features	Location
🪟 Window State	Auto-save/restore position and size	src/composables/useWindowState.ts
🔒 Single Instance	Prevent multiple app instances	src-tauri/src/single_instance.rs
🎨 Theme System	Dark/light mode, follow system preference	src/composables/useTheme.ts
📝 Logger	Structured logging with persistence	src/utils/logger.ts

Project Structure

pixelpunk/
├── src/                          # Vue frontend
│   ├── config/                   # Config files (main modification point)
│   ├── utils/                    # Utility modules
│   ├── composables/              # Vue Composables
│   ├── features/                 # Feature modules
│   └── views/                    # Page views
│
├── src-tauri/                    # Rust backend
│   ├── src/                      # Rust source code
│   ├── icons/                    # App icons
│   └── app.config.json          # Auto-generated (do not edit manually)
│
└── docs/                         # Documentation

Configuration

All configurations are centralized in src/config/app.config.ts and auto-synced to Rust:

export const appConfig = {
  name: "Your App Name",
  version: "1.0.0",
  author: "Your Name",
  description: "App description",
  // ... window, tray, float ball configs
};

Config Workflow: Modify TypeScript config → Run npm run tauri:dev → Auto-sync and apply

Documentation

📚 Complete Documentation

• Development Guide - Detailed usage guide, API reference, best practices
• Plugin Setup - Tauri plugin installation and configuration
• Icon Guide - Application icon configuration guide
• Tray Icon Guide - Tray icon design specifications
• Changelog - Version update records
• Contributing - How to contribute

🎯 Quick Links

• In-App Documentation - Launch the app and check the Home page for interactive docs
• Examples - Check the examples/ directory for code samples

Common Commands

# Development
npm run tauri:dev        # Development mode (recommended)
npm run dev              # Frontend dev server only

# Build
npm run tauri:build      # Build complete application
npm run build            # Build frontend only

# Configuration
npm run sync:config      # Sync configuration
npm run generate-icons   # Generate icons

# Code Quality
npm run lint             # Code linting
npm run format           # Code formatting
npm run type-check       # Type checking

FAQ

Configuration not working?

Run npm run sync:config and restart the app.

How to customize tray menu?

1. Add menu items in src/config/app.config.ts
2. Handle events in src-tauri/src/lib.rs on_menu_event

See Development Guide for details.

How to use core modules?

Check Development Guide for detailed usage and code examples for each module.

More questions?

Check Development Guide or submit an Issue.

Contributing

Issues and Pull Requests are welcome! See Contributing Guide.

License

MIT License - See LICENSE file for details

---

_{Built with Tauri 2.0 + Vue 3 · Ready-to-Use Desktop Application Development Template}