初始化，可用。
This commit is contained in:
cheney
commit
73b9e679e6
7
.gitignore
vendored
Normal file
7
.gitignore
vendored
Normal file
@ -0,0 +1,7 @@
|
||||
node_modules
|
||||
dist
|
||||
.DS_Store
|
||||
|
||||
# Rust / Tauri
|
||||
src-tauri/target
|
||||
src-tauri/gen
|
||||
100
README.md
Normal file
100
README.md
Normal file
@ -0,0 +1,100 @@
|
||||
# Tauri Android 能力演示 App
|
||||
|
||||
一个基于 [Tauri v2](https://v2.tauri.app/) 的示例应用，用于集中演示 Tauri 在 Android 平台上可调用的常见原生能力。前端使用 Vite + TypeScript（无框架），后端为 Rust。
|
||||
|
||||
## 演示的能力
|
||||
|
||||
| 卡片 | 演示内容 | 依赖 |
|
||||
| --- | --- | --- |
|
||||
| Rust 命令调用 | 前端 `invoke` 调用 Rust 侧 `greet` / `system_summary` 命令 | `@tauri-apps/api` |
|
||||
| 设备与系统信息 | 读取平台、系统版本、架构、主机名 | `plugin-os` |
|
||||
| 原生对话框 | 消息框、确认框、文件选择器 | `plugin-dialog` |
|
||||
| 系统通知 | 发送系统通知（含运行时权限申请） | `plugin-notification` |
|
||||
| 文件读写 | 在应用私有目录读写文本文件 | `plugin-fs` |
|
||||
| 剪贴板 | 读写系统剪贴板 | `plugin-clipboard-manager` |
|
||||
| HTTP 请求 | 发起原生网络请求，绕过浏览器同源限制 | `plugin-http` |
|
||||
|
||||
## 目录结构
|
||||
|
||||
```
|
||||
tauri-demo/
|
||||
├── index.html # 页面骨架
|
||||
├── package.json # 前端依赖与脚本
|
||||
├── vite.config.ts # Vite 配置（固定端口 1420）
|
||||
├── tsconfig.json
|
||||
├── src/ # 前端源码
|
||||
│ ├── main.ts # 入口：定义并挂载所有能力卡片
|
||||
│ ├── ui.ts # 卡片渲染组件
|
||||
│ └── styles.css
|
||||
└── src-tauri/ # Rust 后端与 Tauri 配置
|
||||
├── Cargo.toml
|
||||
├── build.rs
|
||||
├── tauri.conf.json # 应用配置（含 bundle、identifier）
|
||||
├── capabilities/ # 权限（capability）声明
|
||||
├── icons/ # 应用图标
|
||||
└── src/
|
||||
├── lib.rs # 命令与插件注册、移动端入口
|
||||
└── main.rs # 桌面端入口
|
||||
```
|
||||
|
||||
## 环境要求
|
||||
|
||||
构建 Android APK 需要以下工具链：
|
||||
|
||||
- Node.js 18+（当前环境：22）
|
||||
- Rust（`rustup` + `cargo`）——**当前环境未安装**
|
||||
- JDK 17——已就绪：`C:\Users\occul\SynologyDrive\bin\jdk-17.0.10`
|
||||
- Android SDK——已就绪：`C:\Users\occul\SynologyDrive\bin\android-sdk-windows`
|
||||
- Android NDK——**当前环境缺失，需安装**
|
||||
- Android Platform API 33+ 与对应 build-tools——当前最高仅 `android-30`，**需补装**
|
||||
|
||||
### 待补充安装项
|
||||
|
||||
1. **Rust 与 Android 目标**
|
||||
```powershell
|
||||
# 安装 rustup（https://rustup.rs），随后添加 Android 目标：
|
||||
rustup target add aarch64-linux-android armv7-linux-androideabi i686-linux-android x86_64-linux-android
|
||||
```
|
||||
2. **Android NDK 与新版平台**（用 SDK Manager 或 sdkmanager）
|
||||
```powershell
|
||||
sdkmanager "ndk;26.1.10909125" "platforms;android-34" "build-tools;34.0.0"
|
||||
```
|
||||
|
||||
## 环境变量
|
||||
|
||||
构建前需设置（PowerShell 会话内示例）：
|
||||
|
||||
```powershell
|
||||
$env:JAVA_HOME = "C:\Users\occul\SynologyDrive\bin\jdk-17.0.10"
|
||||
$env:ANDROID_HOME = "C:\Users\occul\SynologyDrive\bin\android-sdk-windows"
|
||||
# NDK_HOME 指向实际安装的 NDK 版本目录
|
||||
$env:NDK_HOME = "$env:ANDROID_HOME\ndk\26.1.10909125"
|
||||
$env:Path = "$env:JAVA_HOME\bin;$env:USERPROFILE\.cargo\bin;$env:Path"
|
||||
```
|
||||
|
||||
## 构建与运行
|
||||
|
||||
```powershell
|
||||
# 1. 安装前端依赖
|
||||
npm install
|
||||
|
||||
# 2. 桌面端预览（可选，用于快速验证 UI 与命令）
|
||||
npm run tauri dev
|
||||
|
||||
# 3. 初始化 Android 工程（首次执行，生成 src-tauri/gen/android）
|
||||
npm run android:init
|
||||
|
||||
# 4. 连接设备/模拟器后实时调试
|
||||
npm run android:dev
|
||||
|
||||
# 5. 打包 APK / AAB
|
||||
npm run android:build
|
||||
```
|
||||
|
||||
产物位于 `src-tauri/gen/android/app/build/outputs/` 下。
|
||||
|
||||
## 说明
|
||||
|
||||
- HTTP 卡片默认请求 `https://httpbin.org/get`，权限范围在 `src-tauri/capabilities/default.json` 中限定为 `https://*`。
|
||||
- 通知能力在 Android 13+ 需要运行时授权，首次点击会弹出系统权限框。
|
||||
- 文件读写位于应用私有数据目录（`BaseDirectory.AppData`），不需要额外存储权限。
|
||||
63
docs/test-cases.md
Normal file
63
docs/test-cases.md
Normal file
@ -0,0 +1,63 @@
|
||||
# 能力演示测试用例
|
||||
|
||||
由于本项目演示的多为原生设备能力（对话框、通知、剪贴板、文件、网络等），依赖真机/模拟器交互，采用手动验证清单。每条用例均带唯一编号。
|
||||
|
||||
## 1. 前端构建验证
|
||||
|
||||
| 编号 | 用例 | 操作 | 预期结果 |
|
||||
| --- | --- | --- | --- |
|
||||
| 1-1 | 类型检查 | 运行 `npx tsc --noEmit` | 退出码 0，无类型错误 |
|
||||
| 1-2 | 生产构建 | 运行 `npx vite build` | 生成 `dist/`，构建成功 |
|
||||
|
||||
## 2. Rust 命令调用
|
||||
|
||||
| 编号 | 用例 | 操作 | 预期结果 |
|
||||
| --- | --- | --- | --- |
|
||||
| 2-1 | greet 正常输入 | 输入“张三”后点击“调用 greet” | 显示“你好，张三！这条消息来自 Rust 后端 👋” |
|
||||
| 2-2 | greet 空输入 | 清空输入后点击“调用 greet” | 名字回退为“世界” |
|
||||
| 2-3 | 系统信息 | 点击“系统信息(Rust)” | 返回含 os、arch、app_version 的 JSON |
|
||||
|
||||
## 3. 设备与系统信息
|
||||
|
||||
| 编号 | 用例 | 操作 | 预期结果 |
|
||||
| --- | --- | --- | --- |
|
||||
| 3-1 | 读取信息 | 点击“读取信息” | 显示平台/类型/系统版本/架构/主机名 |
|
||||
|
||||
## 4. 原生对话框
|
||||
|
||||
| 编号 | 用例 | 操作 | 预期结果 |
|
||||
| --- | --- | --- | --- |
|
||||
| 4-1 | 消息框 | 点击“消息框” | 弹出原生消息框，关闭后显示“已显示消息框” |
|
||||
| 4-2 | 确认框-确定 | 点击“确认框”并选“确定” | 显示“你选择了：确定” |
|
||||
| 4-3 | 确认框-取消 | 点击“确认框”并选“取消” | 显示“你选择了：取消” |
|
||||
| 4-4 | 文件选择 | 点击“选择文件”并选一个文件 | 显示所选文件路径 |
|
||||
|
||||
## 5. 系统通知
|
||||
|
||||
| 编号 | 用例 | 操作 | 预期结果 |
|
||||
| --- | --- | --- | --- |
|
||||
| 5-1 | 首次授权 | 首次点击“发送通知” | 弹出权限申请框 |
|
||||
| 5-2 | 发送成功 | 授权后点击“发送通知” | 通知栏出现通知，显示“通知已发送” |
|
||||
| 5-3 | 拒绝授权 | 拒绝权限后点击“发送通知” | 显示“未获得通知权限” |
|
||||
|
||||
## 6. 文件读写
|
||||
|
||||
| 编号 | 用例 | 操作 | 预期结果 |
|
||||
| --- | --- | --- | --- |
|
||||
| 6-1 | 写入 | 输入文本点击“写入文件” | 显示“已写入 tauri-demo.txt” |
|
||||
| 6-2 | 读取 | 写入后点击“读取文件” | 显示刚写入的内容 |
|
||||
| 6-3 | 读取不存在 | 全新环境直接点击“读取文件” | 显示“文件不存在，请先写入” |
|
||||
|
||||
## 7. 剪贴板
|
||||
|
||||
| 编号 | 用例 | 操作 | 预期结果 |
|
||||
| --- | --- | --- | --- |
|
||||
| 7-1 | 写入 | 输入内容点击“复制” | 显示“已写入剪贴板” |
|
||||
| 7-2 | 读取 | 复制后点击“粘贴读取” | 显示刚复制的内容 |
|
||||
|
||||
## 8. HTTP 请求
|
||||
|
||||
| 编号 | 用例 | 操作 | 预期结果 |
|
||||
| --- | --- | --- | --- |
|
||||
| 8-1 | GET 成功 | 使用默认地址点击“GET 请求” | 显示状态码 200 与响应预览 |
|
||||
| 8-2 | 非法地址 | 输入无效地址后点击“GET 请求” | 输出区显示红色错误信息 |
|
||||
21
index.html
Normal file
21
index.html
Normal file
@ -0,0 +1,21 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
|
||||
<title>Tauri 能力演示</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<header class="app-header">
|
||||
<h1>Tauri Android 能力演示</h1>
|
||||
<p id="platform-line" class="subtitle">正在加载平台信息…</p>
|
||||
</header>
|
||||
<main id="cards"></main>
|
||||
<footer class="app-footer">
|
||||
<p>点击各卡片按钮体验 Tauri 提供的原生能力</p>
|
||||
</footer>
|
||||
</div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
1293
package-lock.json
generated
Normal file
1293
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
29
package.json
Normal file
29
package.json
Normal file
@ -0,0 +1,29 @@
|
||||
{
|
||||
"name": "tauri-demo",
|
||||
"version": "0.1.0",
|
||||
"description": "Tauri Android 能力演示 App",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc && vite build",
|
||||
"preview": "vite preview",
|
||||
"tauri": "tauri",
|
||||
"android:init": "tauri android init",
|
||||
"android:dev": "tauri android dev",
|
||||
"android:build": "tauri android build"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tauri-apps/api": "^2.0.0",
|
||||
"@tauri-apps/plugin-clipboard-manager": "^2.0.0",
|
||||
"@tauri-apps/plugin-dialog": "^2.0.0",
|
||||
"@tauri-apps/plugin-fs": "^2.0.0",
|
||||
"@tauri-apps/plugin-http": "^2.0.0",
|
||||
"@tauri-apps/plugin-notification": "^2.0.0",
|
||||
"@tauri-apps/plugin-os": "^2.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tauri-apps/cli": "^2.0.0",
|
||||
"typescript": "^5.6.0",
|
||||
"vite": "^5.4.0"
|
||||
}
|
||||
}
|
||||
5971
src-tauri/Cargo.lock
generated
Normal file
5971
src-tauri/Cargo.lock
generated
Normal file
File diff suppressed because it is too large
Load Diff
25
src-tauri/Cargo.toml
Normal file
25
src-tauri/Cargo.toml
Normal file
@ -0,0 +1,25 @@
|
||||
[package]
|
||||
name = "tauri-demo"
|
||||
version = "0.1.0"
|
||||
description = "Tauri Android 能力演示 App"
|
||||
edition = "2021"
|
||||
rust-version = "1.77.2"
|
||||
|
||||
[lib]
|
||||
# 移动端要求以库形式构建，名称需与 tauri.conf 中保持一致
|
||||
name = "tauri_demo_lib"
|
||||
crate-type = ["staticlib", "cdylib", "rlib"]
|
||||
|
||||
[build-dependencies]
|
||||
tauri-build = { version = "2", features = [] }
|
||||
|
||||
[dependencies]
|
||||
tauri = { version = "2", features = [] }
|
||||
tauri-plugin-os = "2"
|
||||
tauri-plugin-dialog = "2"
|
||||
tauri-plugin-notification = "2"
|
||||
tauri-plugin-fs = "2"
|
||||
tauri-plugin-clipboard-manager = "2"
|
||||
tauri-plugin-http = "2"
|
||||
serde = { version = "1", features = ["derive"] }
|
||||
serde_json = "1"
|
||||
4
src-tauri/build.rs
Normal file
4
src-tauri/build.rs
Normal file
@ -0,0 +1,4 @@
|
||||
// Tauri 构建脚本：在编译期生成必要的上下文与元数据
|
||||
fn main() {
|
||||
tauri_build::build()
|
||||
}
|
||||
21
src-tauri/capabilities/default.json
Normal file
21
src-tauri/capabilities/default.json
Normal file
@ -0,0 +1,21 @@
|
||||
{
|
||||
"$schema": "../gen/schemas/mobile-schema.json",
|
||||
"identifier": "default",
|
||||
"description": "演示 App 所需的能力集合",
|
||||
"windows": ["main"],
|
||||
"webviews": ["main"],
|
||||
"permissions": [
|
||||
"core:default",
|
||||
"os:default",
|
||||
"dialog:default",
|
||||
"notification:default",
|
||||
"clipboard-manager:allow-read-text",
|
||||
"clipboard-manager:allow-write-text",
|
||||
"fs:allow-app-read-recursive",
|
||||
"fs:allow-app-write-recursive",
|
||||
{
|
||||
"identifier": "http:default",
|
||||
"allow": [{ "url": "https://*" }]
|
||||
}
|
||||
]
|
||||
}
|
||||
BIN
src-tauri/icons/128x128.png
Normal file
BIN
src-tauri/icons/128x128.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
src-tauri/icons/128x128@2x.png
Normal file
BIN
src-tauri/icons/128x128@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
BIN
src-tauri/icons/32x32.png
Normal file
BIN
src-tauri/icons/32x32.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 445 B |
BIN
src-tauri/icons/icon.ico
Normal file
BIN
src-tauri/icons/icon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 766 B |
BIN
src-tauri/icons/icon.png
Normal file
BIN
src-tauri/icons/icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
59
src-tauri/src/lib.rs
Normal file
59
src-tauri/src/lib.rs
Normal file
@ -0,0 +1,59 @@
|
||||
use serde::Serialize;
|
||||
|
||||
/// 系统信息返回结构，序列化为 JSON 传回前端
|
||||
#[derive(Serialize)]
|
||||
struct SysInfo {
|
||||
/// 目标操作系统（如 android、windows）
|
||||
os: String,
|
||||
/// 目标 CPU 架构（如 aarch64、x86_64）
|
||||
arch: String,
|
||||
/// 应用版本号
|
||||
app_version: String,
|
||||
}
|
||||
|
||||
/// 向前端返回一句问候语
|
||||
///
|
||||
/// # 参数
|
||||
/// - `name`: 前端传入的名字
|
||||
///
|
||||
/// # 返回
|
||||
/// 拼接后的中文问候字符串
|
||||
#[tauri::command]
|
||||
fn greet(name: &str) -> String {
|
||||
format!("你好，{}！这条消息来自 Rust 后端 👋", name)
|
||||
}
|
||||
|
||||
/// 汇总当前运行环境的系统信息
|
||||
///
|
||||
/// # 返回
|
||||
/// 格式化后的 JSON 字符串（包含 os、arch、app_version）
|
||||
///
|
||||
/// # 注意
|
||||
/// os 与 arch 取自编译期常量，反映的是构建目标平台。
|
||||
#[tauri::command]
|
||||
fn system_summary() -> String {
|
||||
let info = SysInfo {
|
||||
os: std::env::consts::OS.to_string(),
|
||||
arch: std::env::consts::ARCH.to_string(),
|
||||
app_version: env!("CARGO_PKG_VERSION").to_string(),
|
||||
};
|
||||
serde_json::to_string_pretty(&info).unwrap_or_else(|_| "{}".to_string())
|
||||
}
|
||||
|
||||
/// 应用运行入口：注册插件与命令并启动 Tauri
|
||||
///
|
||||
/// # 注意
|
||||
/// 使用 `#[cfg_attr(mobile, ...)]` 标记，移动端会由平台生成的入口调用此函数。
|
||||
#[cfg_attr(mobile, tauri::mobile_entry_point)]
|
||||
pub fn run() {
|
||||
tauri::Builder::default()
|
||||
.plugin(tauri_plugin_os::init())
|
||||
.plugin(tauri_plugin_dialog::init())
|
||||
.plugin(tauri_plugin_notification::init())
|
||||
.plugin(tauri_plugin_fs::init())
|
||||
.plugin(tauri_plugin_clipboard_manager::init())
|
||||
.plugin(tauri_plugin_http::init())
|
||||
.invoke_handler(tauri::generate_handler![greet, system_summary])
|
||||
.run(tauri::generate_context!())
|
||||
.expect("启动 Tauri 应用失败");
|
||||
}
|
||||
7
src-tauri/src/main.rs
Normal file
7
src-tauri/src/main.rs
Normal file
@ -0,0 +1,7 @@
|
||||
// 桌面端可执行文件入口：直接调用库中的 run 函数
|
||||
// 移动端不会使用此文件，而是通过生成的原生工程调用 lib 中的入口。
|
||||
#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
|
||||
|
||||
fn main() {
|
||||
tauri_demo_lib::run()
|
||||
}
|
||||
36
src-tauri/tauri.conf.json
Normal file
36
src-tauri/tauri.conf.json
Normal file
@ -0,0 +1,36 @@
|
||||
{
|
||||
"$schema": "https://schema.tauri.app/config/2",
|
||||
"productName": "TauriDemo",
|
||||
"version": "0.1.0",
|
||||
"identifier": "com.tauridemo.app",
|
||||
"build": {
|
||||
"frontendDist": "../dist",
|
||||
"devUrl": "http://localhost:1420",
|
||||
"beforeDevCommand": "npm run dev",
|
||||
"beforeBuildCommand": "npm run build"
|
||||
},
|
||||
"app": {
|
||||
"windows": [
|
||||
{
|
||||
"title": "Tauri 能力演示",
|
||||
"width": 420,
|
||||
"height": 780,
|
||||
"resizable": true
|
||||
}
|
||||
],
|
||||
"security": {
|
||||
"csp": null
|
||||
}
|
||||
},
|
||||
"bundle": {
|
||||
"active": true,
|
||||
"targets": "all",
|
||||
"icon": [
|
||||
"icons/32x32.png",
|
||||
"icons/128x128.png",
|
||||
"icons/128x128@2x.png",
|
||||
"icons/icon.png",
|
||||
"icons/icon.ico"
|
||||
]
|
||||
}
|
||||
}
|
||||
BIN
src-tauri/upload-keystore.jks
Normal file
BIN
src-tauri/upload-keystore.jks
Normal file
Binary file not shown.
209
src/main.js
Normal file
209
src/main.js
Normal file
@ -0,0 +1,209 @@
|
||||
import "./styles.css";
|
||||
import { renderCard } from "./ui";
|
||||
import { invoke } from "@tauri-apps/api/core";
|
||||
import { platform, version, arch, type, hostname } from "@tauri-apps/plugin-os";
|
||||
import { message, ask, open as openDialog } from "@tauri-apps/plugin-dialog";
|
||||
import { isPermissionGranted, requestPermission, sendNotification, } from "@tauri-apps/plugin-notification";
|
||||
import { writeTextFile, readTextFile, exists, BaseDirectory, } from "@tauri-apps/plugin-fs";
|
||||
import { writeText as writeClipboard, readText as readClipboard, } from "@tauri-apps/plugin-clipboard-manager";
|
||||
import { fetch as tauriFetch } from "@tauri-apps/plugin-http";
|
||||
/** 演示用的本地文件名，统一保存在应用数据目录下 */
|
||||
const DEMO_FILE = "tauri-demo.txt";
|
||||
/**
|
||||
* 确保已获得系统通知权限，未授权时向用户申请
|
||||
* @returns 是否已获得权限
|
||||
* 注意事项：Android 13+ 需要运行时授权，首次调用会弹出系统权限框。
|
||||
*/
|
||||
async function ensureNotifyPermission() {
|
||||
let granted = await isPermissionGranted();
|
||||
if (!granted) {
|
||||
const result = await requestPermission();
|
||||
granted = result === "granted";
|
||||
}
|
||||
return granted;
|
||||
}
|
||||
/** 所有能力演示卡片的定义 */
|
||||
const cards = [
|
||||
{
|
||||
id: "invoke",
|
||||
title: "Rust 命令调用",
|
||||
desc: "前端通过 invoke 调用 Rust 侧定义的命令，演示 JS 与原生的双向通信。",
|
||||
input: { placeholder: "输入你的名字", default: "Tauri" },
|
||||
actions: [
|
||||
{
|
||||
label: "调用 greet",
|
||||
run: async (ctx) => await invoke("greet", { name: ctx.getInput() || "世界" }),
|
||||
},
|
||||
{
|
||||
label: "系统信息(Rust)",
|
||||
secondary: true,
|
||||
run: async () => await invoke("system_summary"),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "os",
|
||||
title: "设备与系统信息",
|
||||
desc: "使用 os 插件读取平台、版本、架构等运行环境信息。",
|
||||
actions: [
|
||||
{
|
||||
label: "读取信息",
|
||||
run: async () => {
|
||||
const info = {
|
||||
平台: platform(),
|
||||
类型: type(),
|
||||
系统版本: version(),
|
||||
架构: arch(),
|
||||
主机名: hostname(),
|
||||
};
|
||||
return JSON.stringify(info, null, 2);
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "dialog",
|
||||
title: "原生对话框",
|
||||
desc: "调用系统原生的消息框与确认框，以及文件选择器。",
|
||||
actions: [
|
||||
{
|
||||
label: "消息框",
|
||||
run: async () => {
|
||||
await message("这是一个来自 Tauri 的原生消息框！", {
|
||||
title: "提示",
|
||||
kind: "info",
|
||||
});
|
||||
return "已显示消息框";
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "确认框",
|
||||
secondary: true,
|
||||
run: async () => {
|
||||
const yes = await ask("确定要继续吗？", { title: "请确认" });
|
||||
return `你选择了：${yes ? "确定" : "取消"}`;
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "选择文件",
|
||||
secondary: true,
|
||||
run: async () => {
|
||||
const path = await openDialog({ multiple: false });
|
||||
return path ? `已选择：${path}` : "未选择文件";
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "notify",
|
||||
title: "系统通知",
|
||||
desc: "向系统通知栏发送一条通知，首次使用会申请通知权限。",
|
||||
input: { placeholder: "通知内容", default: "你好，来自 Tauri！" },
|
||||
actions: [
|
||||
{
|
||||
label: "发送通知",
|
||||
run: async (ctx) => {
|
||||
if (!(await ensureNotifyPermission()))
|
||||
return "未获得通知权限";
|
||||
sendNotification({
|
||||
title: "Tauri 演示",
|
||||
body: ctx.getInput() || "你好，来自 Tauri！",
|
||||
});
|
||||
return "通知已发送，请查看通知栏";
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "fs",
|
||||
title: "文件读写",
|
||||
desc: "在应用私有数据目录下写入与读取文本文件，演示文件系统访问。",
|
||||
input: { placeholder: "要写入的文本", default: "Hello Tauri FS" },
|
||||
actions: [
|
||||
{
|
||||
label: "写入文件",
|
||||
run: async (ctx) => {
|
||||
await writeTextFile(DEMO_FILE, ctx.getInput() || "空内容", {
|
||||
baseDir: BaseDirectory.AppData,
|
||||
});
|
||||
return `已写入 ${DEMO_FILE}`;
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "读取文件",
|
||||
secondary: true,
|
||||
run: async () => {
|
||||
const has = await exists(DEMO_FILE, { baseDir: BaseDirectory.AppData });
|
||||
if (!has)
|
||||
return "文件不存在，请先写入";
|
||||
const content = await readTextFile(DEMO_FILE, {
|
||||
baseDir: BaseDirectory.AppData,
|
||||
});
|
||||
return `读取内容：\n${content}`;
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "clipboard",
|
||||
title: "剪贴板",
|
||||
desc: "读写系统剪贴板内容，演示与系统剪贴板的交互。",
|
||||
input: { placeholder: "要复制的内容", default: "Tauri 剪贴板演示" },
|
||||
actions: [
|
||||
{
|
||||
label: "复制",
|
||||
run: async (ctx) => {
|
||||
await writeClipboard(ctx.getInput() || "");
|
||||
return "已写入剪贴板";
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "粘贴读取",
|
||||
secondary: true,
|
||||
run: async () => {
|
||||
const text = await readClipboard();
|
||||
return `剪贴板内容：\n${text}`;
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "http",
|
||||
title: "HTTP 请求",
|
||||
desc: "通过 http 插件发起原生网络请求，不受浏览器同源策略限制。",
|
||||
input: { placeholder: "请求地址", default: "https://httpbin.org/get" },
|
||||
actions: [
|
||||
{
|
||||
label: "GET 请求",
|
||||
run: async (ctx) => {
|
||||
const url = ctx.getInput() || "https://httpbin.org/get";
|
||||
const resp = await tauriFetch(url, { method: "GET" });
|
||||
const text = await resp.text();
|
||||
const preview = text.length > 500 ? text.slice(0, 500) + "…" : text;
|
||||
return `状态码：${resp.status}\n${preview}`;
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
/**
|
||||
* 应用入口：渲染顶部平台信息并挂载所有能力卡片
|
||||
* 注意事项：读取平台信息可能在纯浏览器环境下失败，此时回退为提示文案。
|
||||
*/
|
||||
async function bootstrap() {
|
||||
const platformLine = document.querySelector("#platform-line");
|
||||
if (platformLine) {
|
||||
try {
|
||||
platformLine.textContent = `当前平台：${platform()} · ${arch()} · 系统 ${version()}`;
|
||||
}
|
||||
catch {
|
||||
platformLine.textContent = "运行于非 Tauri 环境，请在 App 内查看完整能力。";
|
||||
}
|
||||
}
|
||||
const container = document.querySelector("#cards");
|
||||
if (!container)
|
||||
return;
|
||||
for (const card of cards)
|
||||
renderCard(container, card);
|
||||
}
|
||||
bootstrap();
|
||||
224
src/main.ts
Normal file
224
src/main.ts
Normal file
@ -0,0 +1,224 @@
|
||||
import "./styles.css";
|
||||
import { renderCard, type DemoCard } from "./ui";
|
||||
|
||||
import { invoke } from "@tauri-apps/api/core";
|
||||
import { platform, version, arch, type, hostname } from "@tauri-apps/plugin-os";
|
||||
import { message, ask, open as openDialog } from "@tauri-apps/plugin-dialog";
|
||||
import {
|
||||
isPermissionGranted,
|
||||
requestPermission,
|
||||
sendNotification,
|
||||
} from "@tauri-apps/plugin-notification";
|
||||
import {
|
||||
writeTextFile,
|
||||
readTextFile,
|
||||
exists,
|
||||
BaseDirectory,
|
||||
} from "@tauri-apps/plugin-fs";
|
||||
import {
|
||||
writeText as writeClipboard,
|
||||
readText as readClipboard,
|
||||
} from "@tauri-apps/plugin-clipboard-manager";
|
||||
import { fetch as tauriFetch } from "@tauri-apps/plugin-http";
|
||||
|
||||
/** 演示用的本地文件名，统一保存在应用数据目录下 */
|
||||
const DEMO_FILE = "tauri-demo.txt";
|
||||
|
||||
/**
|
||||
* 确保已获得系统通知权限，未授权时向用户申请
|
||||
* @returns 是否已获得权限
|
||||
* 注意事项：Android 13+ 需要运行时授权，首次调用会弹出系统权限框。
|
||||
*/
|
||||
async function ensureNotifyPermission(): Promise<boolean> {
|
||||
let granted = await isPermissionGranted();
|
||||
if (!granted) {
|
||||
const result = await requestPermission();
|
||||
granted = result === "granted";
|
||||
}
|
||||
return granted;
|
||||
}
|
||||
|
||||
/** 所有能力演示卡片的定义 */
|
||||
const cards: DemoCard[] = [
|
||||
{
|
||||
id: "invoke",
|
||||
title: "Rust 命令调用",
|
||||
desc: "前端通过 invoke 调用 Rust 侧定义的命令，演示 JS 与原生的双向通信。",
|
||||
input: { placeholder: "输入你的名字", default: "Tauri" },
|
||||
actions: [
|
||||
{
|
||||
label: "调用 greet",
|
||||
run: async (ctx) =>
|
||||
await invoke<string>("greet", { name: ctx.getInput() || "世界" }),
|
||||
},
|
||||
{
|
||||
label: "系统信息(Rust)",
|
||||
secondary: true,
|
||||
run: async () => await invoke<string>("system_summary"),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "os",
|
||||
title: "设备与系统信息",
|
||||
desc: "使用 os 插件读取平台、版本、架构等运行环境信息。",
|
||||
actions: [
|
||||
{
|
||||
label: "读取信息",
|
||||
run: async () => {
|
||||
const info = {
|
||||
平台: platform(),
|
||||
类型: type(),
|
||||
系统版本: version(),
|
||||
架构: arch(),
|
||||
主机名: hostname(),
|
||||
};
|
||||
return JSON.stringify(info, null, 2);
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "dialog",
|
||||
title: "原生对话框",
|
||||
desc: "调用系统原生的消息框与确认框，以及文件选择器。",
|
||||
actions: [
|
||||
{
|
||||
label: "消息框",
|
||||
run: async () => {
|
||||
await message("这是一个来自 Tauri 的原生消息框！", {
|
||||
title: "提示",
|
||||
kind: "info",
|
||||
});
|
||||
return "已显示消息框";
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "确认框",
|
||||
secondary: true,
|
||||
run: async () => {
|
||||
const yes = await ask("确定要继续吗？", { title: "请确认" });
|
||||
return `你选择了：${yes ? "确定" : "取消"}`;
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "选择文件",
|
||||
secondary: true,
|
||||
run: async () => {
|
||||
const path = await openDialog({ multiple: false });
|
||||
return path ? `已选择：${path}` : "未选择文件";
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "notify",
|
||||
title: "系统通知",
|
||||
desc: "向系统通知栏发送一条通知，首次使用会申请通知权限。",
|
||||
input: { placeholder: "通知内容", default: "你好，来自 Tauri！" },
|
||||
actions: [
|
||||
{
|
||||
label: "发送通知",
|
||||
run: async (ctx) => {
|
||||
if (!(await ensureNotifyPermission())) return "未获得通知权限";
|
||||
sendNotification({
|
||||
title: "Tauri 演示",
|
||||
body: ctx.getInput() || "你好，来自 Tauri！",
|
||||
});
|
||||
return "通知已发送，请查看通知栏";
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "fs",
|
||||
title: "文件读写",
|
||||
desc: "在应用私有数据目录下写入与读取文本文件，演示文件系统访问。",
|
||||
input: { placeholder: "要写入的文本", default: "Hello Tauri FS" },
|
||||
actions: [
|
||||
{
|
||||
label: "写入文件",
|
||||
run: async (ctx) => {
|
||||
await writeTextFile(DEMO_FILE, ctx.getInput() || "空内容", {
|
||||
baseDir: BaseDirectory.AppData,
|
||||
});
|
||||
return `已写入 ${DEMO_FILE}`;
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "读取文件",
|
||||
secondary: true,
|
||||
run: async () => {
|
||||
const has = await exists(DEMO_FILE, { baseDir: BaseDirectory.AppData });
|
||||
if (!has) return "文件不存在，请先写入";
|
||||
const content = await readTextFile(DEMO_FILE, {
|
||||
baseDir: BaseDirectory.AppData,
|
||||
});
|
||||
return `读取内容：\n${content}`;
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "clipboard",
|
||||
title: "剪贴板",
|
||||
desc: "读写系统剪贴板内容，演示与系统剪贴板的交互。",
|
||||
input: { placeholder: "要复制的内容", default: "Tauri 剪贴板演示" },
|
||||
actions: [
|
||||
{
|
||||
label: "复制",
|
||||
run: async (ctx) => {
|
||||
await writeClipboard(ctx.getInput() || "");
|
||||
return "已写入剪贴板";
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "粘贴读取",
|
||||
secondary: true,
|
||||
run: async () => {
|
||||
const text = await readClipboard();
|
||||
return `剪贴板内容：\n${text}`;
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "http",
|
||||
title: "HTTP 请求",
|
||||
desc: "通过 http 插件发起原生网络请求，不受浏览器同源策略限制。",
|
||||
input: { placeholder: "请求地址", default: "https://httpbin.org/get" },
|
||||
actions: [
|
||||
{
|
||||
label: "GET 请求",
|
||||
run: async (ctx) => {
|
||||
const url = ctx.getInput() || "https://httpbin.org/get";
|
||||
const resp = await tauriFetch(url, { method: "GET" });
|
||||
const text = await resp.text();
|
||||
const preview = text.length > 500 ? text.slice(0, 500) + "…" : text;
|
||||
return `状态码：${resp.status}\n${preview}`;
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
/**
|
||||
* 应用入口：渲染顶部平台信息并挂载所有能力卡片
|
||||
* 注意事项：读取平台信息可能在纯浏览器环境下失败，此时回退为提示文案。
|
||||
*/
|
||||
async function bootstrap(): Promise<void> {
|
||||
const platformLine = document.querySelector<HTMLParagraphElement>("#platform-line");
|
||||
if (platformLine) {
|
||||
try {
|
||||
platformLine.textContent = `当前平台：${platform()} · ${arch()} · 系统 ${version()}`;
|
||||
} catch {
|
||||
platformLine.textContent = "运行于非 Tauri 环境，请在 App 内查看完整能力。";
|
||||
}
|
||||
}
|
||||
|
||||
const container = document.querySelector<HTMLElement>("#cards");
|
||||
if (!container) return;
|
||||
for (const card of cards) renderCard(container, card);
|
||||
}
|
||||
|
||||
bootstrap();
|
||||
91
src/styles.css
Normal file
91
src/styles.css
Normal file
@ -0,0 +1,91 @@
|
||||
:root {
|
||||
--bg: #0f1220;
|
||||
--card: #1a1f36;
|
||||
--accent: #7c5cff;
|
||||
--accent-2: #3ad1c4;
|
||||
--text: #e7e9f3;
|
||||
--muted: #9aa0bd;
|
||||
--ok: #3ad17a;
|
||||
--err: #ff6b6b;
|
||||
font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
#app {
|
||||
max-width: 720px;
|
||||
margin: 0 auto;
|
||||
padding: env(safe-area-inset-top, 16px) 16px 32px;
|
||||
}
|
||||
|
||||
.app-header { padding: 20px 4px 8px; }
|
||||
.app-header h1 { font-size: 22px; margin: 0 0 6px; }
|
||||
.subtitle { color: var(--muted); margin: 0; font-size: 13px; line-height: 1.5; }
|
||||
|
||||
#cards {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--card);
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
border-radius: 16px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.card h2 { font-size: 16px; margin: 0 0 4px; }
|
||||
.card p.desc { color: var(--muted); font-size: 13px; margin: 0 0 12px; line-height: 1.5; }
|
||||
|
||||
.row { display: flex; gap: 8px; flex-wrap: wrap; }
|
||||
|
||||
button {
|
||||
appearance: none;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
padding: 10px 14px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
background: linear-gradient(135deg, var(--accent), var(--accent-2));
|
||||
cursor: pointer;
|
||||
transition: transform 0.05s ease, opacity 0.15s ease;
|
||||
}
|
||||
button:active { transform: scale(0.97); }
|
||||
button.secondary { background: rgba(255, 255, 255, 0.08); }
|
||||
|
||||
input[type="text"] {
|
||||
flex: 1;
|
||||
min-width: 140px;
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 10px;
|
||||
padding: 10px 12px;
|
||||
color: var(--text);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.output {
|
||||
margin-top: 12px;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border-radius: 10px;
|
||||
padding: 10px 12px;
|
||||
font-family: ui-monospace, "SF Mono", Menlo, monospace;
|
||||
font-size: 12.5px;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
min-height: 20px;
|
||||
color: var(--muted);
|
||||
}
|
||||
.output.ok { color: var(--ok); }
|
||||
.output.err { color: var(--err); }
|
||||
|
||||
.app-footer { margin-top: 24px; text-align: center; color: var(--muted); font-size: 12px; }
|
||||
47
src/ui.js
Normal file
47
src/ui.js
Normal file
@ -0,0 +1,47 @@
|
||||
/**
|
||||
* 渲染单个能力卡片到指定容器
|
||||
* @param container 卡片挂载的父节点
|
||||
* @param card 卡片定义
|
||||
* 注意事项：按钮点击时会自动捕获异常并以红色输出错误信息，避免未处理的 Promise 报错。
|
||||
*/
|
||||
export function renderCard(container, card) {
|
||||
const el = document.createElement("section");
|
||||
el.className = "card";
|
||||
const inputHtml = card.input
|
||||
? `<div class="row" style="margin-bottom:10px">
|
||||
<input type="text" id="input-${card.id}" placeholder="${card.input.placeholder}" value="${card.input.default ?? ""}" />
|
||||
</div>`
|
||||
: "";
|
||||
el.innerHTML = `
|
||||
<h2>${card.title}</h2>
|
||||
<p class="desc">${card.desc}</p>
|
||||
${inputHtml}
|
||||
<div class="row" id="actions-${card.id}"></div>
|
||||
<div class="output" id="out-${card.id}">—</div>
|
||||
`;
|
||||
container.appendChild(el);
|
||||
const out = el.querySelector(`#out-${card.id}`);
|
||||
const actionsRow = el.querySelector(`#actions-${card.id}`);
|
||||
const ctx = {
|
||||
getInput: () => el.querySelector(`#input-${card.id}`)?.value ?? "",
|
||||
};
|
||||
for (const action of card.actions) {
|
||||
const btn = document.createElement("button");
|
||||
btn.textContent = action.label;
|
||||
if (action.secondary)
|
||||
btn.classList.add("secondary");
|
||||
btn.addEventListener("click", async () => {
|
||||
out.className = "output";
|
||||
out.textContent = "执行中…";
|
||||
try {
|
||||
out.textContent = await action.run(ctx);
|
||||
out.classList.add("ok");
|
||||
}
|
||||
catch (err) {
|
||||
out.textContent = `出错：${err instanceof Error ? err.message : String(err)}`;
|
||||
out.classList.add("err");
|
||||
}
|
||||
});
|
||||
actionsRow.appendChild(btn);
|
||||
}
|
||||
}
|
||||
85
src/ui.ts
Normal file
85
src/ui.ts
Normal file
@ -0,0 +1,85 @@
|
||||
/**
|
||||
* 能力演示卡片的定义结构
|
||||
* - title: 卡片标题
|
||||
* - desc: 能力说明
|
||||
* - actions: 该卡片下的操作按钮列表
|
||||
*/
|
||||
export interface DemoAction {
|
||||
/** 按钮文字 */
|
||||
label: string;
|
||||
/** 是否使用次要样式（灰色按钮） */
|
||||
secondary?: boolean;
|
||||
/** 点击后执行的处理函数，返回要展示的文本 */
|
||||
run: (ctx: DemoContext) => Promise<string> | string;
|
||||
}
|
||||
|
||||
/** 卡片定义 */
|
||||
export interface DemoCard {
|
||||
/** 卡片唯一 id，用于关联输出区域 */
|
||||
id: string;
|
||||
/** 卡片标题 */
|
||||
title: string;
|
||||
/** 卡片说明文字 */
|
||||
desc: string;
|
||||
/** 是否需要一个文本输入框 */
|
||||
input?: { placeholder: string; default?: string };
|
||||
/** 操作按钮 */
|
||||
actions: DemoAction[];
|
||||
}
|
||||
|
||||
/** 传递给操作函数的上下文，可读取输入框内容 */
|
||||
export interface DemoContext {
|
||||
/** 获取当前卡片输入框的值（不存在时返回空字符串） */
|
||||
getInput: () => string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 渲染单个能力卡片到指定容器
|
||||
* @param container 卡片挂载的父节点
|
||||
* @param card 卡片定义
|
||||
* 注意事项：按钮点击时会自动捕获异常并以红色输出错误信息，避免未处理的 Promise 报错。
|
||||
*/
|
||||
export function renderCard(container: HTMLElement, card: DemoCard): void {
|
||||
const el = document.createElement("section");
|
||||
el.className = "card";
|
||||
|
||||
const inputHtml = card.input
|
||||
? `<div class="row" style="margin-bottom:10px">
|
||||
<input type="text" id="input-${card.id}" placeholder="${card.input.placeholder}" value="${card.input.default ?? ""}" />
|
||||
</div>`
|
||||
: "";
|
||||
|
||||
el.innerHTML = `
|
||||
<h2>${card.title}</h2>
|
||||
<p class="desc">${card.desc}</p>
|
||||
${inputHtml}
|
||||
<div class="row" id="actions-${card.id}"></div>
|
||||
<div class="output" id="out-${card.id}">—</div>
|
||||
`;
|
||||
container.appendChild(el);
|
||||
|
||||
const out = el.querySelector<HTMLDivElement>(`#out-${card.id}`)!;
|
||||
const actionsRow = el.querySelector<HTMLDivElement>(`#actions-${card.id}`)!;
|
||||
const ctx: DemoContext = {
|
||||
getInput: () =>
|
||||
el.querySelector<HTMLInputElement>(`#input-${card.id}`)?.value ?? "",
|
||||
};
|
||||
|
||||
for (const action of card.actions) {
|
||||
const btn = document.createElement("button");
|
||||
btn.textContent = action.label;
|
||||
if (action.secondary) btn.classList.add("secondary");
|
||||
btn.addEventListener("click", async () => {
|
||||
out.className = "output";
|
||||
out.textContent = "执行中…";
|
||||
try {
|
||||
out.textContent = await action.run(ctx);
|
||||
out.classList.add("ok");
|
||||
} catch (err) {
|
||||
out.textContent = `出错：${err instanceof Error ? err.message : String(err)}`;
|
||||
out.classList.add("err");
|
||||
}
|
||||
});
|
||||
actionsRow.appendChild(btn);
|
||||
}
|
||||
}
|
||||
16
tsconfig.json
Normal file
16
tsconfig.json
Normal file
@ -0,0 +1,16 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "bundler",
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"skipLibCheck": true,
|
||||
"isolatedModules": true,
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"types": []
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
17
vite.config.ts
Normal file
17
vite.config.ts
Normal file
@ -0,0 +1,17 @@
|
||||
import { defineConfig } from "vite";
|
||||
|
||||
// Tauri 期望前端服务运行在固定端口，且在移动端调试时监听所有地址
|
||||
const host = process.env.TAURI_DEV_HOST;
|
||||
|
||||
export default defineConfig({
|
||||
clearScreen: false,
|
||||
server: {
|
||||
port: 1420,
|
||||
strictPort: true,
|
||||
host: host || false,
|
||||
hmr: host
|
||||
? { protocol: "ws", host, port: 1421 }
|
||||
: undefined,
|
||||
watch: { ignored: ["**/src-tauri/**"] },
|
||||
},
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user