Tauri + Rust 系统信息小工具

最近看到很多推荐Tauri的文章，顺便学习下写了个小工具，用到以下知识

• 前端 vite + vue3
• 后端 rust

项目全部代码 https://github.com/LeoBest2/rust-tauri-example

后端

参照Tauri官网https://tauri.app/zh-cn/v1/guides/getting-started/setup/vite生成模板
获取系统信息使用 sysinfo 库, https://docs.rs/sysinfo/0.27.7/sysinfo/
总体Rust代码很少，主要是前端

main.rs代码

#![cfg_attr(
    all(not(debug_assertions), target_os = "windows"),
    windows_subsystem = "windows"
)]

use serde::{Deserialize, Serialize};
use sysinfo::{System, SystemExt, CpuExt};

// Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
#[derive(Serialize, Deserialize)]
struct SystemInfo {
    memory_total: f32,
    memory_used: f32,
    cpu_used: f32,
	hostname: String
}

#[tauri::command]
fn system_info() -> SystemInfo {
    let mut sys = System::new_all();
    sys.refresh_all();
    SystemInfo {
        memory_total: sys.total_memory() as f32 / (1024 * 1024 * 1024) as f32,
        memory_used: sys.used_memory() as f32 / (1024 * 1024 * 1024) as f32,
        cpu_used: sys.global_cpu_info().cpu_usage(),
		hostname: sys.host_name().unwrap(),
    }
}

fn main() {
    tauri::Builder::default()
        .invoke_handler(tauri::generate_handler![system_info])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

前端

前端用到Bootstrap样式 + echarts， 定时调用rust中system_info函数更新

<script setup>
import { onMounted, ref } from "vue";
import { invoke } from "@tauri-apps/api/tauri";
import * as echarts from 'echarts';

const memChartDom = ref(null);
const cpuChartDom = ref(null);
const sysinfo = ref({
	memory_total: 0,
	memory_used: 0,
	cpu_used: 0,
	hostname: '未初始化'
});

const memChart = ref('');
const cpuChart = ref('');

onMounted(() => {
	memChart.value = echarts.init(memChartDom.value);
	memChart.value.setOption({
		title: {
			left: 'center',
			text: '内存使用率',
			textStyle: {
				color: '#37a2da'
			},
		},
		series: [
			{
				type: 'gauge',
				axisLine: {
					lineStyle: {
						width: 30,
						color: [
							[0.3, '#67e0e3'],
							[0.7, '#37a2da'],
							[1, '#fd666d']
						]
					}
				},
				pointer: {
					itemStyle: {
						color: 'inherit'
					}
				},
				axisTick: {
					distance: -30,
					length: 8,
					lineStyle: {
						color: '#fff',
						width: 2
					}
				},
				splitLine: {
					distance: -30,
					length: 30,
					lineStyle: {
						color: '#fff',
						width: 4
					}
				},
				axisLabel: {
					color: 'inherit',
					distance: 40,
					fontSize: 20
				},
				detail: {
					valueAnimation: true,
					formatter: '{value}',
					color: 'inherit'
				},
				data: [
					{
						value: 0,
					}
				]
			}
		]
	});
	cpuChart.value = echarts.init(cpuChartDom.value);
	cpuChart.value.setOption({
		title: {
			left: 'center',
			text: 'CPU使用率',
			textStyle: {
				color: '#37a2da'
			},
		},
		series: [
			{
				type: 'gauge',
				axisLine: {
					lineStyle: {
						width: 30,
						color: [
							[0.3, '#67e0e3'],
							[0.7, '#37a2da'],
							[1, '#fd666d']
						]
					}
				},
				pointer: {
					itemStyle: {
						color: 'inherit'
					}
				},
				axisTick: {
					distance: -30,
					length: 8,
					lineStyle: {
						color: '#fff',
						width: 2
					}
				},
				splitLine: {
					distance: -30,
					length: 30,
					lineStyle: {
						color: '#fff',
						width: 4
					}
				},
				axisLabel: {
					color: 'inherit',
					distance: 40,
					fontSize: 20
				},
				detail: {
					valueAnimation: true,
					formatter: '{value}',
					color: 'inherit'
				},
				data: [
					{
						value: 0,
					}
				]
			}
		]
	});
	setInterval(() => updateCpuMem(), 3000);
})

async function updateCpuMem() {
	let result = await invoke("system_info");
	sysinfo.value = result;
	cpuChart.value.setOption({
		series: { data: [{ value: (result.cpu_used).toFixed(1) }] }
	});
	memChart.value.setOption({
		series: { data: [{ value: (result.memory_used / result.memory_total * 100).toFixed(1) }] }
	});
}

</script>

<template>
	<div class="row justify-content-center text-center mt-4">
		<table class="table table-striped-columns">
			<thead>
				<tr>
					<th scope="col">主机信息</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>主机名</td>
					<td>{{ sysinfo.hostname }}</td>
					<td>CPU使用率</td>
					<td>{{ sysinfo.cpu_used.toFixed(1) }}%</td>
				</tr>
				<tr>
					<td>已用内存</td>
					<td>{{ sysinfo.memory_used.toFixed(1) }} GB</td>
					<td>总内存</td>
					<td>{{ sysinfo.memory_total.toFixed(1) }} GB</td>
				</tr>
			</tbody>

		</table>

	</div>
	<div class="row justify-content-center">
		<div class="col-6">
			<div ref="cpuChartDom" :style="{ width: '100%', height: '400px' }"></div>
		</div>
		<div class="col-6">
			<div ref="memChartDom" :style="{ width: '100%', height: '400px' }"></div>
		</div>
	</div>
</template>