dev: widget test

This commit is contained in:
2024-07-19 22:08:18 +08:00
parent 38cbb41bd1
commit dfb3e0eb53
6 changed files with 68 additions and 6 deletions

View File

@@ -2,9 +2,9 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tauri + Vue + Typescript App</title>
<title>Heartbeat Cat Desktop</title>
</head>
<body>

View File

@@ -11,7 +11,7 @@ edition = "2021"
tauri-build = { version = "1", features = [] }
[dependencies]
tauri = { version = "1", features = [ "dialog-all", "window-show", "window-hide", "window-maximize", "window-unmaximize", "window-unminimize", "window-start-dragging", "window-minimize", "window-close", "shell-open"] }
tauri = { version = "1", features = [ "window-create", "path-all", "dialog-all", "window-show", "window-hide", "window-maximize", "window-unmaximize", "window-unminimize", "window-start-dragging", "window-minimize", "window-close", "shell-open"] }
serde = { version = "1", features = ["derive"] }
serde_json = "1"
btleplug = { version = "0.11.5", features = ["serde"] }

View File

@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Widget Example</title>
</head>
<body>
<h1>Example</h1>
<script src="./widget.js"></script>
</body>
</html>

View File

@@ -0,0 +1,8 @@
// make this js file as a module
import { listen } from "@tauri-apps/api/event";
listen('heart-rate', event => {
console.log('Heart rate:', event.payload)
})
export {}

View File

@@ -16,6 +16,14 @@
"all": false,
"open": true
},
"fs": {
"scope": [
"$RESOURCE/*"
]
},
"path": {
"all": true
},
"window": {
"all": false,
"close": true,
@@ -25,7 +33,8 @@
"minimize": true,
"unmaximize": true,
"unminimize": true,
"startDragging": true
"startDragging": true,
"create": true
},
"dialog": {
"all": true
@@ -42,7 +51,16 @@
}
],
"security": {
"csp": null
"csp": "default-src 'self' file://*",
"dangerousRemoteDomainIpcAccess": [
{
"domain": "file://*",
"enableTauriAPI": true,
"windows": [
"widget_example"
]
}
]
},
"bundle": {
"active": true,
@@ -53,6 +71,9 @@
"category": "Utility",
"shortDescription": "HBCat",
"longDescription": "Catch your heartbeat",
"resources": [
"addons/*"
],
"icon": [
"icons/icon.ico"
],

View File

@@ -1,11 +1,31 @@
<script lang="ts" setup>
import { resolveResource } from '@tauri-apps/api/path';
import { WebviewWindow } from '@tauri-apps/api/window';
import { useSnackbar } from 'vue3-snackbar';
const snackbar = useSnackbar();
const createWindow = async () => {
const url = (await resolveResource('addons/widgets/example/widget.html')).replace('\\\\?\\', 'file://')
console.log(url);
const webview = new WebviewWindow('widget_example', {
url,
width: 400,
height: 400
})
webview.once('tauri://error', e => {
snackbar.add({
type: 'error',
text: `创建窗口失败: ${e.payload}`
})
})
}
</script>
<template>
<PageContainer title="桌面组件">
<div class="w-full h-full flex justify-center items-center bg-white">
<span class="text-sm font-semibold text-neutral-400">前面的区域以后再来探索吧</span>
<button class="btn" @click="createWindow">Create Window</button>
</div>
</PageContainer>
</template>