feat-bootstrap-Snaplet-Windows-screenshot-tool

2026-08-25 21:04:14 +08:00
commit d8038d292d
78 changed files with 14835 additions and 0 deletions
@@ -0,0 +1,7 @@
 node_modules
 dist
 src-tauri/target
 *.log
 .DS_Store
 .idea
 .vscode
@@ -0,0 +1,39 @@
 # Snaplet
 轻量、快速、顺手的桌面截图工具。当前优先支持 Windows，并为 macOS 保留相同的捕获接口。
 ## 第一版能力
 - `Alt + Shift + A` 全局快捷键呼出截图
 - 主显示器区域框选
 - 复制截图到剪贴板或保存为 PNG
 - 系统托盘驻留，关闭设置窗口后继续后台运行
 - 可选开机自启动
 - 自定义截图快捷键
 ## 本地开发
 需要 Node.js、Rust stable 和 Windows WebView2。
 ```powershell
 npm install
 npm run tauri dev
 ```
 在 Windows 上还需要 Visual Studio Build Tools 的“使用 C++ 的桌面开发”工作负载。当前开发机安装在 `C:\BuildTools`，可用以下方式生成发布包：
 ```cmd
 call C:\BuildTools\Common7\Tools\VsDevCmd.bat -arch=x64
 set PATH=C:\Users\vm15\.cargo\bin;%PATH%
 npm run tauri build
 ```
 生成结果位于 `src-tauri/target/release/bundle`。
 ## 近期计划
 - 多显示器虚拟画布与跨屏框选
 - 标注工具：矩形、箭头、画笔、文字、马赛克
 - 窗口识别和放大镜
 - 截图历史与贴图
 - macOS ScreenCaptureKit 适配
@@ -0,0 +1,13 @@
 <!doctype html>
 <html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="theme-color" content="#f7f8fa" />
    <title>Snaplet</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
 </html>
@@ -0,0 +1,30 @@
 {
  "name": "snaplet",
  "private": true,
  "version": "0.1.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "tauri": "tauri"
  },
  "dependencies": {
    "@tauri-apps/api": "^2.8.0",
    "@tauri-apps/plugin-autostart": "^2.5.0",
    "@tauri-apps/plugin-clipboard-manager": "^2.3.0",
    "@tauri-apps/plugin-dialog": "^2.4.0",
    "@tauri-apps/plugin-global-shortcut": "^2.3.0",
    "lucide-react": "^0.468.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  "devDependencies": {
    "@tauri-apps/cli": "^2.8.0",
    "@types/react": "^18.3.18",
    "@types/react-dom": "^18.3.5",
    "@vitejs/plugin-react": "^4.3.4",
    "typescript": "~5.7.2",
    "vite": "^6.0.5"
  }
 }
@@ -0,0 +1,28 @@
 [package]
 name = "snaplet"
 version = "0.1.0"
 description = "A lightweight cross-platform screenshot tool"
 authors = ["Snaplet"]
 edition = "2021"
 [lib]
 name = "snaplet_lib"
 crate-type = ["staticlib", "cdylib", "rlib"]
 [build-dependencies]
 tauri-build = { version = "2", features = [] }
 [dependencies]
 tauri = { version = "2", features = ["tray-icon", "image-png"] }
 tauri-plugin-autostart = "2"
 tauri-plugin-clipboard-manager = "2"
 tauri-plugin-dialog = "2"
 tauri-plugin-global-shortcut = "2"
 serde = { version = "1", features = ["derive"] }
 serde_json = "1"
 base64 = "0.22"
 image = "0.25"
 xcap = "0.7"
 [target.'cfg(windows)'.dependencies]
 windows = { version = "0.61", features = ["Win32_UI_WindowsAndMessaging"] }
@@ -0,0 +1,3 @@
 fn main() {
    tauri_build::build()
 }
@@ -0,0 +1,18 @@
 {
  "$schema": "../gen/schemas/desktop-schema.json",
  "identifier": "default",
  "description": "Snaplet desktop permissions",
  "windows": ["main", "capture"],
  "permissions": [
    "core:default",
    "core:window:allow-close",
    "core:window:allow-hide",
    "core:window:allow-show",
    "autostart:default",
    "clipboard-manager:allow-write-image",
    "dialog:allow-save",
    "global-shortcut:allow-register",
    "global-shortcut:allow-unregister",
    "global-shortcut:allow-is-registered"
  ]
 }
@@ -0,0 +1 @@
 {"default":{"identifier":"default","description":"Snaplet desktop permissions","local":true,"windows":["main","capture"],"permissions":["core:default","core:window:allow-close","core:window:allow-hide","core:window:allow-show","autostart:default","clipboard-manager:allow-write-image","dialog:allow-save","global-shortcut:allow-register","global-shortcut:allow-unregister","global-shortcut:allow-is-registered"]}}
@@ -0,0 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
 <adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
  <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
  <background android:drawable="@color/ic_launcher_background"/>
 </adaptive-icon>
@@ -0,0 +1,4 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
  <color name="ic_launcher_background">#fff</color>
 </resources>
@@ -0,0 +1,17 @@
 <svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="bg" x1="82" y1="62" x2="426" y2="456" gradientUnits="userSpaceOnUse">
      <stop stop-color="#8377FF"/>
      <stop offset="1" stop-color="#5849D4"/>
    </linearGradient>
    <filter id="shadow" x="80" y="114" width="352" height="302" filterUnits="userSpaceOnUse">
      <feDropShadow dx="0" dy="18" stdDeviation="18" flood-color="#2F268E" flood-opacity="0.35"/>
    </filter>
  </defs>
  <rect x="28" y="28" width="456" height="456" rx="120" fill="url(#bg)"/>
  <path d="M128 176H184L207 142H305L328 176H384C406.1 176 424 193.9 424 216V350C424 372.1 406.1 390 384 390H128C105.9 390 88 372.1 88 350V216C88 193.9 105.9 176 128 176Z" fill="white" fill-opacity="0.18" filter="url(#shadow)"/>
  <path d="M128 176H184L207 142H305L328 176H384C406.1 176 424 193.9 424 216V350C424 372.1 406.1 390 384 390H128C105.9 390 88 372.1 88 350V216C88 193.9 105.9 176 128 176Z" stroke="white" stroke-width="24" stroke-linejoin="round"/>
  <circle cx="256" cy="279" r="70" stroke="white" stroke-width="24"/>
  <circle cx="256" cy="279" r="26" fill="white"/>
  <circle cx="366" cy="226" r="13" fill="#BDB6FF"/>
 </svg>
@@ -0,0 +1,202 @@
 use base64::{engine::general_purpose::STANDARD, Engine};
 use image::{DynamicImage, ImageFormat, RgbaImage};
 use serde::{Deserialize, Serialize};
 use std::{io::Cursor, sync::Mutex};
 use tauri::{
    image::Image,
    menu::{Menu, MenuItem},
    tray::TrayIconBuilder,
    AppHandle, Manager, PhysicalPosition, PhysicalSize, WebviewUrl, WebviewWindowBuilder,
 };
 use tauri_plugin_clipboard_manager::ClipboardExt;
 use tauri_plugin_dialog::DialogExt;
 use tauri_plugin_global_shortcut::{GlobalShortcutExt, ShortcutState};
 use xcap::Monitor;
 struct RuntimeState {
    shortcut: Mutex<String>,
    last_capture: Mutex<Option<CaptureCache>>,
 }
 struct CaptureCache {
    image: RgbaImage,
    x: i32,
    y: i32,
    scale_factor: f64,
 }
 #[derive(Serialize)]
 #[serde(rename_all = "camelCase")]
 struct CapturePayload {
    data_url: String,
    x: i32,
    y: i32,
    width: u32,
    height: u32,
    scale_factor: f64,
 }
 #[derive(Deserialize)]
 struct Rect {
    x: f64,
    y: f64,
    width: f64,
    height: f64,
 }
 fn rgba_to_png(image: &RgbaImage) -> Result<Vec<u8>, String> {
    let mut bytes = Cursor::new(Vec::new());
    DynamicImage::ImageRgba8(image.clone())
        .write_to(&mut bytes, ImageFormat::Png)
        .map_err(|e| e.to_string())?;
    Ok(bytes.into_inner())
 }
 #[tauri::command]
 fn capture_primary_screen(state: tauri::State<RuntimeState>) -> Result<CapturePayload, String> {
    let guard = state.last_capture.lock().map_err(|_| "截图状态不可用")?;
    let cached = guard.as_ref().ok_or_else(|| "没有准备好的截图".to_string())?;
    let (width, height) = cached.image.dimensions();
    let png = rgba_to_png(&cached.image)?;
    Ok(CapturePayload {
        data_url: format!("data:image/png;base64,{}", STANDARD.encode(png)),
        x: cached.x,
        y: cached.y,
        width,
        height,
        scale_factor: cached.scale_factor,
    })
 }
 fn prepare_primary_capture(app: &AppHandle) -> Result<(), String> {
    let monitor = Monitor::all()
        .map_err(|e| e.to_string())?
        .into_iter()
        .find(|m| m.is_primary().unwrap_or(false))
        .ok_or_else(|| "未找到主显示器".to_string())?;
    let image = monitor.capture_image().map_err(|e| e.to_string())?;
    let cache = CaptureCache {
        image,
        x: monitor.x().unwrap_or(0),
        y: monitor.y().unwrap_or(0),
        scale_factor: monitor.scale_factor().unwrap_or(1.0) as f64,
    };
    let state = app.state::<RuntimeState>();
    *state.last_capture.lock().map_err(|_| "截图状态不可用")? = Some(cache);
    Ok(())
 }
 #[tauri::command]
 fn start_capture(app: AppHandle) -> Result<(), String> {
    if let Some(window) = app.get_webview_window("capture") {
        window.close().map_err(|e| e.to_string())?;
    }
    if let Some(main) = app.get_webview_window("main") {
        let _ = main.hide();
    }
    // Capture before creating the overlay. Capturing after the overlay appears
    // records the white WebView surface and can leave an unusable topmost window.
    std::thread::sleep(std::time::Duration::from_millis(80));
    prepare_primary_capture(&app)?;
    let monitor = app.primary_monitor().map_err(|e| e.to_string())?.ok_or("未找到主显示器")?;
    let position = monitor.position();
    let size = monitor.size();
    let window = WebviewWindowBuilder::new(&app, "capture", WebviewUrl::App("index.html?mode=capture".into()))
        .title("Snaplet Capture")
        .decorations(false)
        .transparent(false)
        .always_on_top(true)
        .skip_taskbar(true)
        .resizable(false)
        .visible(false)
        .position(position.x as f64, position.y as f64)
        .inner_size(size.width as f64 / monitor.scale_factor(), size.height as f64 / monitor.scale_factor())
        .build()
        .map_err(|e| e.to_string())?;
    window.set_position(PhysicalPosition::new(position.x, position.y)).map_err(|e| e.to_string())?;
    window.set_size(PhysicalSize::new(size.width, size.height)).map_err(|e| e.to_string())?;
    Ok(())
 }
 #[tauri::command]
 fn finish_capture(
    app: AppHandle,
    state: tauri::State<RuntimeState>,
    rect: Rect,
    action: String,
    copy_after_capture: bool,
 ) -> Result<(), String> {
    let guard = state.last_capture.lock().map_err(|_| "截图状态不可用")?;
    let source = &guard.as_ref().ok_or("没有可用的截图")?.image;
    let capture_window = app.get_webview_window("capture").ok_or("截图窗口已关闭")?;
    let scale = capture_window.scale_factor().map_err(|e| e.to_string())?;
    let x = (rect.x * scale).round().max(0.0) as u32;
    let y = (rect.y * scale).round().max(0.0) as u32;
    let width = (rect.width * scale).round().max(1.0) as u32;
    let height = (rect.height * scale).round().max(1.0) as u32;
    let width = width.min(source.width().saturating_sub(x));
    let height = height.min(source.height().saturating_sub(y));
    let cropped = image::imageops::crop_imm(source, x, y, width, height).to_image();
    if action == "copy" || copy_after_capture {
        app.clipboard().write_image(&Image::new_owned(cropped.as_raw().clone(), width, height)).map_err(|e| e.to_string())?;
    }
    if action == "save" {
        let bytes = rgba_to_png(&cropped)?;
        app.dialog().file().set_file_name("Snaplet.png").add_filter("PNG 图片", &["png"]).save_file(move |path| {
            if let Some(path) = path { let _ = std::fs::write(path.as_path().unwrap(), bytes); }
        });
    }
    Ok(())
 }
 #[tauri::command]
 fn set_shortcut(app: AppHandle, state: tauri::State<RuntimeState>, shortcut: String) -> Result<(), String> {
    let mut current = state.shortcut.lock().map_err(|_| "快捷键状态不可用")?;
    if *current == shortcut && app.global_shortcut().is_registered(shortcut.as_str()) {
        return Ok(());
    }
    let _ = app.global_shortcut().unregister(current.as_str());
    app.global_shortcut().register(shortcut.as_str()).map_err(|e| e.to_string())?;
    *current = shortcut;
    Ok(())
 }
 pub fn run() {
    tauri::Builder::default()
        .plugin(tauri_plugin_dialog::init())
        .plugin(tauri_plugin_clipboard_manager::init())
        .plugin(tauri_plugin_global_shortcut::Builder::new().with_handler(|app, _, event| {
            if event.state == ShortcutState::Pressed { let _ = start_capture(app.clone()); }
        }).build())
        .plugin(tauri_plugin_autostart::Builder::new().build())
        .manage(RuntimeState { shortcut: Mutex::new("Alt+Shift+A".into()), last_capture: Mutex::new(None) })
        .setup(|app| {
            let show = MenuItem::with_id(app, "show", "打开设置", true, None::<&str>)?;
            let capture = MenuItem::with_id(app, "capture", "开始截图", true, None::<&str>)?;
            let quit = MenuItem::with_id(app, "quit", "退出 Snaplet", true, None::<&str>)?;
            let menu = Menu::with_items(app, &[&capture, &show, &quit])?;
            let mut tray = TrayIconBuilder::new().menu(&menu).tooltip("Snaplet 截图");
            if let Some(icon) = app.default_window_icon() {
                tray = tray.icon(icon.clone());
            }
            tray.on_menu_event(|app, event| match event.id.as_ref() {
                "capture" => { let _ = start_capture(app.clone()); }
                "show" => { if let Some(w) = app.get_webview_window("main") { let _ = w.show(); let _ = w.set_focus(); } }
                "quit" => app.exit(0),
                _ => {}
            }).build(app)?;
            app.global_shortcut().register("Alt+Shift+A")?;
            Ok(())
        })
        .on_window_event(|window, event| {
            if window.label() == "main" {
                if let tauri::WindowEvent::CloseRequested { api, .. } = event { api.prevent_close(); let _ = window.hide(); }
            }
        })
        .invoke_handler(tauri::generate_handler![start_capture, capture_primary_screen, finish_capture, set_shortcut])
        .run(tauri::generate_context!())
        .expect("failed to run Snaplet");
 }
@@ -0,0 +1,5 @@
 #![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
 fn main() {
    snaplet_lib::run();
 }
@@ -0,0 +1,39 @@
 {
  "$schema": "https://schema.tauri.app/config/2",
  "productName": "Snaplet",
  "version": "0.1.0",
  "identifier": "com.snaplet.capture",
  "build": {
    "beforeDevCommand": "npm run dev",
    "devUrl": "http://localhost:1420",
    "beforeBuildCommand": "npm run build",
    "frontendDist": "../dist"
  },
  "app": {
    "windows": [{
      "label": "main",
      "title": "Snaplet",
      "width": 980,
      "height": 700,
      "minWidth": 760,
      "minHeight": 560,
      "center": true,
      "resizable": true
    }],
    "security": { "csp": null }
  },
  "bundle": {
    "active": true,
    "targets": "all",
    "icon": [
      "icons/32x32.png",
      "icons/128x128.png",
      "icons/128x128@2x.png",
      "icons/icon.icns",
      "icons/icon.ico"
    ],
    "category": "Utility",
    "shortDescription": "轻量、快速、顺手的截图工具",
    "windows": { "webviewInstallMode": { "type": "skip" } }
  }
 }
@@ -0,0 +1,142 @@
 import { useEffect, useState } from "react";
 import { invoke } from "@tauri-apps/api/core";
 import { enable, disable, isEnabled } from "@tauri-apps/plugin-autostart";
 import { Camera, Check, ChevronRight, Copy, FolderOpen, Keyboard, MonitorUp, Power, Settings2, Sparkles } from "lucide-react";
 import CaptureOverlay from "./CaptureOverlay";
 import type { AppSettings } from "./types";
 const defaults: AppSettings = {
  shortcut: "Alt+Shift+A",
  launchAtLogin: false,
  copyAfterCapture: true,
  showCursor: false,
  saveDirectory: "图片/Snaplet"
 };
 const isTauri = "__TAURI_INTERNALS__" in window;
 export default function App() {
  const overlay = new URLSearchParams(location.search).get("mode") === "capture";
  const [settings, setSettings] = useState<AppSettings>(() => {
    try { return { ...defaults, ...JSON.parse(localStorage.getItem("snaplet-settings") ?? "{}") }; }
    catch { return defaults; }
  });
  const [saved, setSaved] = useState(false);
  const [recordingShortcut, setRecordingShortcut] = useState(false);
  const [shortcutCandidate, setShortcutCandidate] = useState("");
  const [shortcutError, setShortcutError] = useState("");
  useEffect(() => {
    if (overlay || !isTauri) return;
    isEnabled().then((value) => setSettings((s) => ({ ...s, launchAtLogin: value }))).catch(() => undefined);
    invoke("set_shortcut", { shortcut: settings.shortcut }).catch(() => undefined);
  }, [overlay, settings.shortcut]);
  const persist = async (next: AppSettings) => {
    if (isTauri && next.shortcut !== settings.shortcut) {
      await invoke("set_shortcut", { shortcut: next.shortcut });
    }
    setSettings(next);
    localStorage.setItem("snaplet-settings", JSON.stringify(next));
    setSaved(true);
    setTimeout(() => setSaved(false), 1200);
    if (!isTauri) return;
    if (next.launchAtLogin !== settings.launchAtLogin) {
      await (next.launchAtLogin ? enable() : disable());
    }
  };
  useEffect(() => {
    if (!recordingShortcut) return;
    const record = (event: KeyboardEvent) => {
      event.preventDefault();
      event.stopPropagation();
      if (event.key === "Escape") { setRecordingShortcut(false); return; }
      if (["Control", "Alt", "Shift", "Meta"].includes(event.key)) return;
      const modifiers = [event.ctrlKey && "Ctrl", event.altKey && "Alt", event.shiftKey && "Shift", event.metaKey && "Super"].filter(Boolean);
      if (!modifiers.length) { setShortcutError("快捷键至少需要 Ctrl、Alt、Shift 或 Win 中的一个"); return; }
      const special: Record<string, string> = { " ": "Space", ArrowUp: "Up", ArrowDown: "Down", ArrowLeft: "Left", ArrowRight: "Right" };
      const key = special[event.key] ?? (event.key.length === 1 ? event.key.toUpperCase() : event.key);
      setShortcutCandidate([...modifiers, key].join("+"));
      setShortcutError("");
    };
    addEventListener("keydown", record, true);
    return () => removeEventListener("keydown", record, true);
  }, [recordingShortcut]);
  const confirmShortcut = async () => {
    if (!shortcutCandidate) return;
    try {
      await persist({ ...settings, shortcut: shortcutCandidate });
      setRecordingShortcut(false);
    } catch (reason) {
      setShortcutError(`无法注册：${String(reason)}`);
    }
  };
  if (overlay) return <CaptureOverlay settings={settings} />;
  const startCapture = () => isTauri ? invoke("start_capture") : alert("桌面版中会立即进入截图模式");
  return (
    <main className="settings-shell">
      <aside className="sidebar">
        <div className="brand"><span className="brand-mark"><Camera size={20} /></span><span>Snaplet</span></div>
        <nav>
          <button className="nav-item active"><Settings2 size={18} />常规设置</button>
          <button className="nav-item"><Keyboard size={18} />快捷键</button>
          <button className="nav-item"><Sparkles size={18} />关于</button>
        </nav>
        <div className="sidebar-foot"><span className="status-dot" />后台服务运行中</div>
      </aside>
      <section className="settings-content">
        <header><div><h1>常规设置</h1><p>让每一次截图都快速、安静、顺手。</p></div><button className="capture-button" onClick={startCapture}><Camera size={17} />立即截图</button></header>
        <section className="hero-card">
          <div className="hero-icon"><MonitorUp /></div>
          <div><h2>随时准备捕捉</h2><p>使用快捷键呼出截图界面，无需打开主窗口。</p></div>
          <kbd>{settings.shortcut.replaceAll("+", "  +  ")}</kbd>
        </section>
        <div className="section-label">启动与行为</div>
        <div className="card settings-list">
          <SettingRow icon={<Power />} title="开机时自动启动" description="静默驻留系统托盘，不打扰工作">
            <Toggle checked={settings.launchAtLogin} onChange={(v) => persist({ ...settings, launchAtLogin: v })} />
          </SettingRow>
          <SettingRow icon={<Copy />} title="截图后复制到剪贴板" description="完成框选后可以直接粘贴">
            <Toggle checked={settings.copyAfterCapture} onChange={(v) => persist({ ...settings, copyAfterCapture: v })} />
          </SettingRow>
        </div>
        <div className="section-label">截图偏好</div>
        <div className="card settings-list">
          <SettingRow icon={<Keyboard />} title="截图快捷键" description="点击右侧组合键即可修改">
            <button className="value-button" onClick={() => { setShortcutCandidate(""); setShortcutError(""); setRecordingShortcut(true); }}>{settings.shortcut}<ChevronRight size={15} /></button>
          </SettingRow>
          <SettingRow icon={<FolderOpen />} title="默认保存位置" description={settings.saveDirectory}>
            <button className="value-button">更改<ChevronRight size={15} /></button>
          </SettingRow>
        </div>
        <footer>{saved ? <><Check size={14} />设置已保存</> : "Snaplet 0.1.0 · Windows Preview"}</footer>
      </section>
      {recordingShortcut && <div className="shortcut-modal-backdrop" onMouseDown={() => setRecordingShortcut(false)}>
        <div className="shortcut-modal" onMouseDown={(e) => e.stopPropagation()}>
          <h3>设置截图快捷键</h3>
          <p>请直接按下新的组合键</p>
          <div className="shortcut-recorder">{shortcutCandidate || "等待按键…"}</div>
          <small className={shortcutError ? "error" : ""}>{shortcutError || "按 Esc 取消"}</small>
          <div className="modal-actions"><button onClick={() => setRecordingShortcut(false)}>取消</button><button className="confirm" disabled={!shortcutCandidate} onClick={confirmShortcut}>保存快捷键</button></div>
        </div>
      </div>}
    </main>
  );
 }
 function SettingRow({ icon, title, description, children }: { icon: React.ReactNode; title: string; description: string; children: React.ReactNode }) {
  return <div className="setting-row"><span className="row-icon">{icon}</span><div className="row-copy"><strong>{title}</strong><span>{description}</span></div>{children}</div>;
 }
 function Toggle({ checked, onChange }: { checked: boolean; onChange: (value: boolean) => void }) {
  return <button aria-label="切换" className={`toggle ${checked ? "on" : ""}`} onClick={() => onChange(!checked)}><span /></button>;
 }
@@ -0,0 +1,87 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { invoke } from "@tauri-apps/api/core";
 import { getCurrentWindow } from "@tauri-apps/api/window";
 import { Check, Copy, Download, MousePointer2, X } from "lucide-react";
 import type { AppSettings, CapturePayload } from "./types";
 type Point = { x: number; y: number };
 type Rect = { x: number; y: number; width: number; height: number };
 export default function CaptureOverlay({ settings }: { settings: AppSettings }) {
  const [image, setImage] = useState<CapturePayload | null>(null);
  const [start, setStart] = useState<Point | null>(null);
  const [current, setCurrent] = useState<Point | null>(null);
  const [dragging, setDragging] = useState(false);
  const [error, setError] = useState("");
  const canvas = useRef<HTMLCanvasElement>(null);
  const close = useCallback(() => {
    if ("__TAURI_INTERNALS__" in window) getCurrentWindow().close();
  }, []);
  useEffect(() => {
    const key = (event: KeyboardEvent) => {
      if (event.key === "Escape") { event.preventDefault(); close(); }
    };
    addEventListener("keydown", key, true);
    if ("__TAURI_INTERNALS__" in window) {
      invoke<CapturePayload>("capture_primary_screen").then(setImage).catch((reason) => {
        setError(String(reason));
        setTimeout(close, 1200);
      });
    }
    return () => removeEventListener("keydown", key, true);
  }, [close]);
  useEffect(() => {
    if (!image || !canvas.current) return;
    const img = new Image();
    img.onload = () => {
      const ctx = canvas.current!.getContext("2d")!;
      canvas.current!.width = innerWidth * devicePixelRatio;
      canvas.current!.height = innerHeight * devicePixelRatio;
      ctx.drawImage(img, 0, 0, canvas.current!.width, canvas.current!.height);
      requestAnimationFrame(() => {
        getCurrentWindow().show().then(() => getCurrentWindow().setFocus()).catch(close);
      });
    };
    img.onerror = () => { setError("截图画面加载失败"); setTimeout(close, 1200); };
    img.src = image.dataUrl;
  }, [image, close]);
  const rect: Rect | null = start && current ? {
    x: Math.min(start.x, current.x), y: Math.min(start.y, current.y),
    width: Math.abs(current.x - start.x), height: Math.abs(current.y - start.y)
  } : null;
  const finish = async (action: "copy" | "save") => {
    if (!rect || rect.width < 2 || rect.height < 2) return;
    await invoke("finish_capture", { rect, action, copyAfterCapture: settings.copyAfterCapture });
    close();
  };
  return (
    <div className="capture-overlay"
      tabIndex={-1}
      onContextMenu={(e) => { e.preventDefault(); close(); }}
      onPointerDown={(e) => { setStart({ x: e.clientX, y: e.clientY }); setCurrent({ x: e.clientX, y: e.clientY }); setDragging(true); }}
      onPointerMove={(e) => dragging && setCurrent({ x: e.clientX, y: e.clientY })}
      onPointerUp={(e) => { if (dragging) setCurrent({ x: e.clientX, y: e.clientY }); setDragging(false); }}>
      <canvas ref={canvas} />
      {!rect && <div className="dim-layer" />}
      {rect && <>
        <div className="selection" style={{ left: rect.x, top: rect.y, width: rect.width, height: rect.height }} />
        <div className="size-badge" style={{ left: rect.x, top: Math.max(8, rect.y - 34) }}>{Math.round(rect.width)} × {Math.round(rect.height)}</div>
        {!dragging && rect.width > 2 && <div className="capture-toolbar" style={{ left: Math.min(rect.x + rect.width, innerWidth - 196), top: Math.min(rect.y + rect.height + 10, innerHeight - 54) }} onPointerDown={(e) => e.stopPropagation()}>
          <button title="取消" onClick={close}><X /></button>
          <span />
          <button title="保存" onClick={() => finish("save")}><Download /></button>
          <button title="复制" onClick={() => finish("copy")}><Copy /></button>
          <button className="primary" title="完成" onClick={() => finish("copy")}><Check /></button>
        </div>}
      </>}
      {!rect && <div className="capture-tip"><MousePointer2 size={17} />拖动鼠标选择截图区域 · Esc 取消</div>}
      {error && <div className="capture-error">{error}，正在退出…</div>}
    </div>
  );
 }
@@ -0,0 +1,8 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App";
 import "./styles.css";
 ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode><App /></React.StrictMode>
 );
@@ -0,0 +1,56 @@
 :root { font-family: Inter, "Segoe UI", "Microsoft YaHei", sans-serif; color: #20232a; background: #f5f6f8; font-synthesis: none; }
 * { box-sizing: border-box; }
 html, body, #root { width: 100%; height: 100%; margin: 0; overflow: hidden; }
 button { font: inherit; }
 .settings-shell { width: 100%; height: 100%; display: grid; grid-template-columns: 220px 1fr; background: #f7f8fa; }
 .sidebar { display: flex; flex-direction: column; padding: 28px 18px 20px; background: rgba(255,255,255,.92); border-right: 1px solid #e9ebef; }
 .brand { display: flex; align-items: center; gap: 11px; padding: 0 10px 30px; font-size: 18px; font-weight: 700; letter-spacing: -.3px; }
 .brand-mark { width: 34px; height: 34px; display: grid; place-items: center; color: white; border-radius: 11px; background: linear-gradient(145deg,#7667f4,#5d50db); box-shadow: 0 8px 18px #675ae244; }
 nav { display: grid; gap: 7px; }
 .nav-item { border: 0; border-radius: 10px; background: transparent; color: #737781; padding: 11px 12px; display: flex; align-items: center; gap: 11px; text-align: left; cursor: pointer; }
 .nav-item.active { color: #5f52d9; background: #f0edff; font-weight: 600; }
 .sidebar-foot { margin-top: auto; padding: 12px; font-size: 12px; color: #8a8f99; display: flex; align-items: center; gap: 8px; }
 .status-dot { width: 7px; height: 7px; border-radius: 50%; background: #42c97a; box-shadow: 0 0 0 4px #42c97a18; }
 .settings-content { overflow: auto; padding: 42px 52px 28px; }
 .settings-content > header { display: flex; justify-content: space-between; align-items: center; max-width: 780px; }
 h1 { margin: 0 0 8px; font-size: 27px; letter-spacing: -.7px; }
 header p, .hero-card p { margin: 0; color: #8b909a; font-size: 14px; }
 .capture-button { display: flex; align-items: center; gap: 8px; border: 0; color: white; background: #6558df; padding: 10px 16px; border-radius: 10px; cursor: pointer; box-shadow: 0 7px 18px #6558df35; }
 .hero-card { max-width: 780px; margin-top: 32px; padding: 22px; border-radius: 16px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; color: #fff; background: linear-gradient(125deg,#6256da,#7b6be9); box-shadow: 0 14px 34px #6a5ee42c; }
 .hero-card h2 { margin: 0 0 6px; font-size: 17px; }
 .hero-card p { color: #e5e2ff; }
 .hero-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: #ffffff1d; }
 kbd { padding: 10px 13px; border-radius: 9px; background: #4338a454; border: 1px solid #ffffff2b; font: 600 12px Inter, sans-serif; }
 .section-label { max-width: 780px; margin: 28px 0 10px; color: #8e939d; font-size: 12px; font-weight: 600; letter-spacing: .4px; }
 .card { max-width: 780px; background: white; border: 1px solid #e9ebef; border-radius: 14px; box-shadow: 0 4px 18px #30384d08; }
 .setting-row { min-height: 76px; display: flex; align-items: center; padding: 15px 18px; gap: 14px; }
 .setting-row + .setting-row { border-top: 1px solid #eef0f3; }
 .row-icon { width: 36px; height: 36px; flex: none; display: grid; place-items: center; color: #6b5ee0; background: #f1efff; border-radius: 10px; }
 .row-icon svg { width: 18px; }
 .row-copy { display: grid; gap: 5px; flex: 1; }
 .row-copy strong { font-size: 14px; }
 .row-copy span { color: #979ba4; font-size: 12px; }
 .toggle { width: 42px; height: 24px; padding: 2px; border: 0; border-radius: 20px; background: #d8dbe1; cursor: pointer; transition: .2s; }
 .toggle span { display: block; width: 20px; height: 20px; border-radius: 50%; background: white; box-shadow: 0 2px 5px #0002; transition: .2s; }
 .toggle.on { background: #6558df; }.toggle.on span { transform: translateX(18px); }
 .value-button { display: flex; align-items: center; gap: 7px; border: 0; background: transparent; color: #626771; font-size: 12px; cursor: pointer; }
 footer { max-width: 780px; min-height: 18px; display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 25px; color: #a1a5ad; font-size: 11px; }
 .capture-overlay { position: fixed; inset: 0; cursor: crosshair; user-select: none; background: #191b20; }
 .capture-overlay canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
 .dim-layer { position: absolute; inset: 0; background: rgba(4,6,10,.45); pointer-events: none; }
 .selection { position: absolute; border: 1px solid #7d6dff; background: transparent; box-shadow: 0 0 0 9999px rgba(4,6,10,.42); outline: 1px solid #ffffff55; }
 .selection::before { content: ""; position: absolute; inset: 0; background: inherit; }
 .size-badge { position: absolute; padding: 5px 8px; border-radius: 6px; background: rgba(25,27,32,.86); color: white; font-size: 11px; }
 .capture-toolbar { position: absolute; height: 44px; display: flex; align-items: center; gap: 3px; padding: 5px; border: 1px solid #ffffff20; border-radius: 11px; background: rgba(31,33,40,.94); box-shadow: 0 8px 30px #0006; backdrop-filter: blur(14px); }
 .capture-toolbar button { width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 8px; color: #dfe1e7; background: transparent; cursor: pointer; }
 .capture-toolbar button:hover { background: #ffffff15; }.capture-toolbar button.primary { color: white; background: #6b5de3; }
 .capture-toolbar svg { width: 17px; }.capture-toolbar > span { height: 21px; width: 1px; margin: 0 3px; background: #ffffff1a; }
 .capture-tip { position: absolute; left: 50%; top: 24px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 9px 13px; color: #fff; border-radius: 8px; background: rgba(27,29,34,.82); font-size: 12px; }
 .capture-error { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); padding: 12px 16px; color: #fff; border-radius: 9px; background: #c53d4e; font-size: 13px; box-shadow: 0 10px 30px #0005; }
 .shortcut-modal-backdrop { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: #17192355; backdrop-filter: blur(4px); }
 .shortcut-modal { width: 380px; padding: 26px; border: 1px solid #e7e8ed; border-radius: 17px; background: #fff; box-shadow: 0 24px 70px #20243a2e; text-align: center; }
 .shortcut-modal h3 { margin: 0 0 8px; font-size: 18px; }.shortcut-modal p { margin: 0 0 20px; color: #8d929c; font-size: 13px; }
 .shortcut-recorder { height: 58px; display: grid; place-items: center; border: 2px solid #6b5de3; border-radius: 12px; color: #5d50d5; background: #f5f3ff; font-weight: 700; }
 .shortcut-modal small { display: block; min-height: 18px; margin-top: 11px; color: #a0a4ad; }.shortcut-modal small.error { color: #c53d4e; }
 .modal-actions { display: flex; justify-content: center; gap: 9px; margin-top: 18px; }.modal-actions button { border: 0; border-radius: 9px; padding: 9px 16px; cursor: pointer; }.modal-actions .confirm { color: white; background: #6558df; }.modal-actions .confirm:disabled { opacity: .45; cursor: default; }
@media (max-width: 720px) { .settings-shell { grid-template-columns: 72px 1fr; }.sidebar { padding-inline: 12px; }.brand > span:last-child,.nav-item { font-size: 0; }.nav-item { justify-content: center; }.sidebar-foot { display: none; }.settings-content { padding: 32px 25px; } }
@@ -0,0 +1,16 @@
 export type AppSettings = {
  shortcut: string;
  launchAtLogin: boolean;
  copyAfterCapture: boolean;
  showCursor: boolean;
  saveDirectory: string;
 };
 export type CapturePayload = {
  dataUrl: string;
  x: number;
  y: number;
  width: number;
  height: number;
  scaleFactor: number;
 };
@@ -0,0 +1 @@
 /// <reference types="vite/client" />
@@ -0,0 +1,21 @@
 {
  "compilerOptions": {
    "target": "ES2022",
    "useDefineForClassFields": true,
    "lib": ["ES2022", "DOM", "DOM.Iterable"],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
 }
@@ -0,0 +1,10 @@
 {
  "compilerOptions": {
    "composite": true,
    "skipLibCheck": true,
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "allowImportingTsExtensions": true
  },
  "include": ["vite.config.ts"]
 }
@@ -0,0 +1,10 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 export default defineConfig({
  plugins: [react()],
  clearScreen: false,
  server: { port: 1420, strictPort: true },
  envPrefix: ["VITE_", "TAURI_ENV_*"],
  build: { target: process.env.TAURI_ENV_PLATFORM === "windows" ? "chrome105" : "safari13" }
 });
		`@@ -0,0 +1 @@`
							`{"default":{"identifier":"default","description":"Snaplet desktop permissions","local":true,"windows":["main","capture"],"permissions":["core:default","core:window:allow-close","core:window:allow-hide","core:window:allow-show","autostart:default","clipboard-manager:allow-write-image","dialog:allow-save","global-shortcut:allow-register","global-shortcut:allow-unregister","global-shortcut:allow-is-registered"]}}`