DevBox

面向开发者的轻量级一站式工作台桌面应用，基于 Tauri 2 构建，兼具原生性能与 Web 技术灵活性。

技术栈

层	技术
桌面框架	Tauri 2（Rust 后端 + Web 前端）
前端	Vue 3 + TypeScript + Vite
UI 组件	Naive UI
路由	Vue Router 5
数据库	MySQL，通过 SQLx 异步连接
系统信息	sysinfo
图标	Ionicons 5

功能

• 用户登录 — 支持 MySQL 验证的登录界面
• 仪表盘 — 项目概览、统计卡片、活跃度趋势图、仓库列表
• 系统信息 — 实时采集 CPU、内存等核心指标
• 侧边栏导航 — 仓库、成员、服务、插件、设置等模块入口

快速开始

环境要求

• Node.js 18+
• pnpm 8+
• Rust 最新稳定版
• MySQL 8.0+（运行中）

安装依赖

pnpm install

配置数据库

在 src-tauri/ 目录下创建 .env 文件：

DATABASE_URL=mysql://用户名:密码@127.0.0.1:3306/数据库名

然后导入初始表结构：

CREATE TABLE IF NOT EXISTS sys_user (
    id INT AUTO_INCREMENT PRIMARY KEY,
    nick_name VARCHAR(100) NOT NULL,
    avatar VARCHAR(255) DEFAULT '',
    user_name VARCHAR(100) NOT NULL UNIQUE,
    password VARCHAR(255) NOT NULL,
    email VARCHAR(200) DEFAULT '',
    phone VARCHAR(20) DEFAULT '',
    age INT DEFAULT 0,
    sex INT DEFAULT 0,
    creater INT DEFAULT 0,
    create_time VARCHAR(50) DEFAULT ''
);

启动开发服务器

pnpm tauri dev

构建桌面安装包

pnpm tauri build

项目结构

DevBox/
├── src/                     # Vue 前端
│   ├── api/system/          # 后端 API 调用
│   ├── views/
│   │   ├── home/Login.vue   # 登录页
│   │   └── dashboard/       # 仪表盘
│   ├── router/              # 路由配置
│   ├── types/               # TypeScript 类型
│   └── assets/              # 静态资源
├── src-tauri/               # Rust 后端
│   ├── src/
│   │   ├── lib.rs           # Tauri 入口 & 命令注册
│   │   ├── main.rs          # 主函数
│   │   ├── models.rs        # 数据结构
│   │   ├── services/db.rs   # 数据库连接池
│   │   └── commands/        # Tauri 命令
│   ├── Cargo.toml           # Rust 依赖
│   └── tauri.conf.json      # Tauri 配置
├── package.json
└── index.html

技术亮点

• 异步数据库访问 — SQLx 连接池自动注入 Tauri 命令，无阻塞 UI
• 泛型响应结构 — ApiResponse<T> 统一前后端数据契约
• 玻璃态 UI — 登录页采用 backdrop-filter 毛玻璃卡片设计
• 响应式骨架 — 仪表盘适配 375px ~ 1440px 全宽度区间
• 系统减动画偏好 — 完整支持 prefers-reduced-motion

许可

MIT