Tauri + Vue3 获取 Windows 系统信息 (CPU、内存、电量、网络、负载)

要获取 Windows 系统的详细信息，你可以使用以下库和工具：

'systeminformation'：一个可用于获取系统信息的跨平台库。可以使用它来获取 CPU、内存、电量、网络状态和系统负载等信息。它提供了一组易于使用的 API 来获取各种系统信息。
'@tauri-apps/api'：Tauri 是一个用于构建跨平台桌面应用程序的工具包。它提供了一组 API，可以用于与底层操作系统进行交互。你可以使用 '@tauri-apps/api' 来获取诸如电量、网络状态和系统负载等信息。

以下是一个使用 Tauri 和 'systeminformation' 获取 Windows 系统详细信息的示例：

首先，你需要在 Tauri 项目中安装 'systeminformation' 和 '@tauri-apps/api' 库：

npm install systeminformation @tauri-apps/api

然后，在 Tauri 的 'src-tauri/tauri.conf.json' 文件中添加 'systeminformation' 作为依赖项：

{
  "build": {
    "devPath": "http://localhost:4000",
    "distDir": "../dist",
    "dev": {
      "path": "http://localhost:4000",
      "fallbackPath": "index.html"
    },
    "beforeDevCommand": "npm run tauri dev",
    "beforeBuildCommand": "npm run tauri build",
    "afterBuildCommand": "",
    "beforeDevCommand": "",
    "beforeBuildCommand": "npm run tauri build",
    "afterBuildCommand": ""
  },
  "tauri": {
    "embeddedServer": {
      "active": true
    },
    "window": {
      "title": "My Tauri App"
    },
    "dependencies": [
      "systeminformation"
    ]
  }
}

在 Vue 组件中，你可以使用 '@tauri-apps/api' 来调用系统信息 API，并使用 'systeminformation' 库来获取具体的系统信息。例如，你可以创建一个名为 'SysInfo.vue' 的组件：

<template>
  <div>
    <div>CPU: {{ cpu }}</div>
    <div>内存: {{ memory }}</div>
    <div>电量: {{ battery }}</div>
    <div>网络状态: {{ network }}</div>
    <div>系统负载: {{ load }}</div>
    <div>应用程序占用内存: {{ appMemory }}</div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import { tauri } from '@tauri-apps/api';
import si from 'systeminformation';

export default {
  name: 'SysInfo',
  setup() {
    const cpu = ref('');
    const memory = ref('');
    const battery = ref('');
    const network = ref('');
    const load = ref('');
    const appMemory = ref('');

    onMounted(async () => {
      // 使用 systeminformation 库获取系统信息
      const cpuInfo = await si.cpu();
      cpu.value = `${cpuInfo.manufacturer} ${cpuInfo.brand} (${cpuInfo.cores} 核)`;

      const memInfo = await si.mem();
      memory.value = `${(memInfo.total / (1024 * 1024 * 1024)).toFixed(2)} GB`;

      const batteryInfo = await si.battery();
      battery.value = `${batteryInfo.percent}%`;

      const networkInfo = await si.networkStats();
      network.value = `${networkInfo[0].iface} - 接收: ${networkInfo[0].rx_bytes} bytes, 发送: ${networkInfo[0].tx_bytes} bytes`;

      const loadInfo = await si.currentLoad();
      load.value = `${loadInfo.currentload.toFixed(2)}%`;

      // 使用 Tauri API 获取应用程序占用的内存
      const appMemoryInfo = await tauri.promisified.invoke('getMemoryUsage');
      appMemory.value = `${(appMemoryInfo / (1024 * 1024)).toFixed(2)} MB`;
    });

    return {
      cpu,
      memory,
      battery,
      network,
      load,
      appMemory,
    };
  },
};
</script>

在上述示例中，我们使用了 'systeminformation' 库来获取 CPU、内存、电量、网络状态和系统负载等信息，并使用 '@tauri-apps/api' 库来获取应用程序占用的内存。

请注意，你需要在 Tauri 的 Rust 代码中实现一个 'getMemoryUsage' 函数，以便在 Vue 组件中调用。你可以通过使用 'tauri::command' 宏来实现这一点。例如，在 Tauri 的 'src-tauri/main.rs' 文件中添加以下代码：

#[tauri::command]
fn get_memory_usage() -> u64 {
    let process = sysinfo::Process::new(std::process::id());
    process.memory()
}

然后，在 Tauri 的 'src-tauri/event.rs' 文件中添加以下代码：

use crate::api::get_memory_usage;

#[tauri::event]
async fn get_memory_usage() -> u64 {
    get_memory_usage()
}

这将允许在 Vue 组件中调用 'getMemoryUsage' 函数来获取应用程序占用的内存。