feat(About): add update check

README.md

@@ -1,6 +1,6 @@
 # Scrcpy-mask
 
-A Scrcpy (control) client in Rust & Tarui aimed at providing mouse and key mapping.
+A Scrcpy client in Rust & Tarui aimed at providing mouse and key mapping to control Android device.
 
 Due to the delay and blurred image quality of the mirror screen. This project found another way, directly abandoned the mirror screen, and instead used a transparent mask to display the screen content behind the window, which fundamentally put an end to the delay in casting the screen.
 
@@ -9,8 +9,12 @@ Due to the delay and blurred image quality of the mirror screen. This project fo
 - [x] Wired and wireless connections to Android devices
 - [x] Start scrcpy-server and connect to it
 - [x] Implement scrcpy client control protocol
-- [x] Mouse and keyboard mapping
+- [x] Mouse and keyboard key mapping
 - [x] Visually setting the mapping
+- [x] Key mapping config import and export
+- [x] Update check
+- [ ] Switch between key mapping and raw input
+- [ ] Better macro support
 - [ ] Provide external interface through websocket
 
 ## contribution.

package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "@tauri-apps/api": ">=2.0.0-beta.8",
     "@tauri-apps/plugin-clipboard-manager": "2.1.0-beta.0",
+    "@tauri-apps/plugin-http": "2.0.0-beta.3",
     "@tauri-apps/plugin-process": "2.0.0-beta.2",
     "@tauri-apps/plugin-shell": "2.0.0-beta.3",
     "@tauri-apps/plugin-store": "2.0.0-beta.2",

src-tauri/Cargo.toml

@@ -20,3 +20,4 @@ tokio = { version = "1.36.0", features = ["rt-multi-thread", "net", "macros", "i
 tauri-plugin-clipboard-manager = "2.1.0-beta.1"
 tauri-plugin-process = "2.0.0-beta.3"
 tauri-plugin-shell = "2.0.0-beta.4"
+tauri-plugin-http = "2.0.0-beta.7"

src-tauri/capabilities/default.json

@@ -29,6 +29,16 @@
     "webview:default",
     "webview:allow-internal-toggle-devtools",
     "shell:default",
-    "shell:allow-open"
+    "shell:allow-open",
+    "http:default",
+    {
+      "identifier": "http:default",
+      "allow": [
+        { "url": "https://api.github.com/repos/AkiChase/scrcpy-mask/*" }
+      ]
+    },
+    "http:allow-fetch",
+    "app:default",
+    "app:allow-version"
   ]
 }

src-tauri/src/main.rs

@@ -142,6 +142,7 @@ fn load_default_keyconfig(app: tauri::AppHandle) -> Result<String, String> {
 #[tokio::main]
 async fn main() {
     tauri::Builder::default()
+        .plugin(tauri_plugin_http::init())
         .plugin(tauri_plugin_shell::init())
         .plugin(tauri_plugin_process::init())
         .plugin(tauri_plugin_clipboard_manager::init())

src/components/setting/About.vue

@@ -1,11 +1,74 @@
 <script setup lang="ts">
-import { NFlex, NH4, NButton, NIcon, NP } from "naive-ui";
+import {
-import { LogoGithub } from "@vicons/ionicons5";
+  NFlex,
+  NH4,
+  NButton,
+  NIcon,
+  NP,
+  useMessage,
+  useDialog,
+} from "naive-ui";
+import { LogoGithub, Planet } from "@vicons/ionicons5";
 import { open } from "@tauri-apps/plugin-shell";
+import { fetch } from "@tauri-apps/plugin-http";
+import { getVersion } from "@tauri-apps/api/app";
+import { h, onMounted, ref } from "vue";
+import { useGlobalStore } from "../../store/global";
+
+const message = useMessage();
+const dialog = useDialog();
+const store = useGlobalStore();
+
+const appVersion = ref("");
+onMounted(async () => {
+  appVersion.value = await getVersion();
+});
 
 function opendWebsite(url: string) {
   open(url);
 }
+
+function renderUpdateInfo(content: string) {
+  const pList = content.split("\r\n").map((line: string) => h("p", line));
+  return h("div", { style: "margin: 20px 0" }, pList);
+}
+
+async function checkUpdate() {
+  store.showLoading();
+  try {
+    const res = await fetch(
+      "https://api.github.com/repos/AkiChase/scrcpy-mask/releases/latest",
+      {
+        connectTimeout: 5000,
+      }
+    );
+    store.hideLoading();
+    if (res.status !== 200) {
+      message.error("检查更新失败");
+    } else {
+      const data = await res.json();
+      const latestVersion = (data.tag_name as string).slice(1);
+      if (latestVersion <= appVersion.value) {
+        message.success(`最新版本: ${latestVersion}，当前已是最新版本`);
+        return;
+      }
+      const body = data.body as string;
+      dialog.info({
+        title: `最新版本：${data.tag_name}`,
+        content: () => renderUpdateInfo(body),
+        positiveText: "前往发布页",
+        negativeText: "取消",
+        onPositiveClick: () => {
+          opendWebsite(data.html_url);
+        },
+      });
+    }
+  } catch (e) {
+    store.hideLoading();
+    console.error(e);
+    message.error("检查更新失败");
+  }
+}
 </script>
 
 <template>
@@ -47,7 +110,16 @@ function opendWebsite(url: string) {
         </template>
         BiliBili
       </NButton>
+      <NButton text @click="opendWebsite('https://www.akichase.top/')">
+        <template #icon>
+          <NIcon><Planet /> </NIcon>
+        </template>
+        AkiChase's Blog
+      </NButton>
     </NFlex>
+    <NH4 prefix="bar">更新</NH4>
+    <NP>当前版本：{{ appVersion }}</NP>
+    <NButton @click="checkUpdate">检查更新</NButton>
   </div>
 </template>