# DevBox

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

## 技术栈

| 层 | 技术 |
|------|------|
| 桌面框架 | [Tauri 2](https://tauri.app/)（Rust 后端 + Web 前端） |
| 前端 | Vue 3 + TypeScript + Vite |
| UI 组件 | [Naive UI](https://www.naiveui.com/) |
| 路由 | Vue Router 5 |
| 数据库 | MySQL，通过 [SQLx](https://github.com/launchbadge/sqlx) 异步连接 |
| 系统信息 | [sysinfo](https://github.com/GuillaumeGomez/sysinfo) |
| 图标 | [Ionicons 5](https://ionic.io/ionicons) |

## 功能

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

## 快速开始

### 环境要求

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

### 安装依赖

```bash
pnpm install
```

### 配置数据库

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

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

然后导入初始表结构：

```sql
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 ''
);
```

### 启动开发服务器

```bash
pnpm tauri dev
```

### 构建桌面安装包

```bash
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