113 lines
3.0 KiB
Markdown
113 lines
3.0 KiB
Markdown
# 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
|