# tauri-vuetom-box

**Repository Path**: lauset/vuetom-box

## Basic Information

- **Project Name**: tauri-vuetom-box
- **Description**: 采用 Rust 编程的 Tauri 框架搭配 Vue3 Vite 完成的跨平台桌面应用
- **Primary Language**: Rust
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 9
- **Forks**: 7
- **Created**: 2022-08-27
- **Last Updated**: 2025-03-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Rust, tauri, vue3, tsx, Tailwind

## README

# Tauri - Vuetom Box

Rust + Vue3 + Vite4 + Ts5 + Tailwind

App volume after packaging: 11911299 bytes (**11.9 MB**)

App directory after packaging: `src-tauri/target/release/bundle`

## 项目

tauri:

- src:
  - main.rs
  - lang.rs
  - menu.rs
  - tray.rs
  - winv.rs
  - events
    - mod.rs
    - system.rs

### 多语言

可从托盘或页面设置中切换语言 en, zh, zhHK

### 主题

三种主题与主题亮暗模式适配 (normal, naruto, wind)

### 暗黑模式

tailwind: `dark: 'class'`

```scss
button {
  @apply hover:bg-opacity-50 active:bg-opacity-100 ...;
  // light
  @apply bg-green-400 bg-opacity-30;
  // dark
  @apply dark:bg-blue-800 dark:bg-opacity-60;
}
```

scss var

```scss
// light
:root {
  --vt-c-bg: #fff;
}
// dark
.dark {
  --vt-c-bg: #000;
}
// use
.root {
  background-color: var(--vt-c-bg);
}
// Deprecated media
// @media (prefers-color-scheme: dark) {
//   :root { }
// }
```

## 热更新

1. 生成 key

```shell
pnpm tauri signer generate -w ~/.tauri/vuetom_box.key
```

2. 复制 ~/.tauri/vuetom_box.key.pub 中的内容至 tauri.conf.json 中
   
```json
{
  "tauri": {
    "updater": {
      "active": true,
      "endpoints": ["install.json文件url"],
      "dialog": true,
      "pubkey": "pub key复制到这里"
    }
  }
}
```

3. 设置环境变量并打包应用

```shell
export TAURI_PRIVATE_KEY="content of the generated key"
export TAURI_KEY_PASSWORD="password"
pnpm tauri:build
```

4. 打包后将安装包放置文件服务器(看下面第5条)并更新 `install.json` 中对应平台的 `signature` 密钥内容和 `url` 下载地址内容

5. 可以启用 server 目录下的静态文件服务器作模拟下载, 静态资源服务采用 Actix Web 4.0 开发

文件列表: `http://localhost:8080/apps`

下载地址: `http://localhost:8080/apps/darwin-x86_64/latest/Vuetom Box.app.tar.gz`

```shell
cargo run
```

> ⚠️ 更新配置文件需使用 https, 本项目使用 git gist 模拟

```shell
https://gist.github.com/lauset/77c485e9a6dcd7ae3645683cb156d4b1
```

## 操作

**npm 脚本**

```sh
# 安装依赖
pnpm install

# 浏览器中打开
pnpm dev

# 操作系统预览
pnpm tauri:dev

# 打包应用
pnpm tauri:build
```

**cargo 脚本**

```sh
cd src-tauri/

cargo add lib

cargo fmt
```

## Rust

总结中...

## 功能

- [x] 响应式菜单
- [x] 主题与亮暗模式
- [x] 多语言
- [x] 简单事件交互
- [x] 文件服务器
- [x] 热更新服务
- [ ] 弹框组件
- [ ] 更多动效

## 初版预览

![view1](./resource/view1.png)

![view2](./resource/view2.png)

![view3](./resource/view3.png)

![tray1](./resource/tray1.png)

![tray2](./resource/tray2.png)

![update01](./resource/update01.png)

![update02](./resource/update02.png)

## 链接

[Tauri](https://tauri.app/v1/guides/getting-started/setup)

[script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup)

[rust-analyzer](https://marketplace.visualstudio.com/items?itemName=rust-lang.rust-analyzer)