博客下线公告

2026-03-14T17:13:00+08:00

本站点将在5月底正式下线，文章不再保留，大家后会有期。

Vue 3 图标选择器实现：基于 lucide-vue-next + shadcn/vue 的高效方案

2025-12-16T20:49:00+08:00

最近在开发 Vue 3 项目时，需要一个灵活的图标选择器组件 —— 既要支持大量图标快速检索，又能无缝集成到现有界面，还得让父组件动态接收选中结果。对比了几个图标库后，最终选择了 lucide-vue-next（轻量、图标丰富、支持 Vue 3 按需导入），再配合 shadcn/vue 的基础组件快速搭建交互界面，完美实现了需求。这里把完整实现过程分享出来，希望能帮到有同样需求的朋友。先说说核心需求与技术选型需求明确支持 lucide-vue-next 全量图标选择（无需手动逐个导入）提供搜索功能，快速筛选目标图标支持分页加载（避免一次性渲染过多图标导致性能问题）选择图标后，通过事件通知父组件父组件能动态渲染选中的图标组件技术选型原因lucide-vue-next：轻量级矢量图标库，内置 1000+ 常用图标，支持批量导入，且与 Vue 3 兼容性极佳，图标尺寸、颜色可灵活定制。shadcn/vue：提供现成的基础组件（DropdownMenu、Input、Tooltip、Button 等），样式统一且可自定义，无需从零编写交互组件，节省开发时间。Vue 3 动态组件：通过 defineAsyncComponent 和语法，实现选中图标后的动态引入，避免初始加载冗余资源。图标选择器组件（IconSelector.vue）这是核心组件，负责图标展示、搜索过滤、分页加载和选中事件触发。整体结构分为「搜索框 + 图标网格 + 加载更多按钮」，利用 shadcn 组件快速搭建交互逻辑：父组件集成与动态渲染父组件需要接收 IconSelector 传递的图标名称，通过 Vue 3 的 defineAsyncComponent 动态导入对应图标组件，再用渲染：最后总结这个图标选择器组件的核心优势在于 “高效 + 灵活”：借助 lucide-vue-next 的批量导入能力，无需手动导入单个图标，极大提升开发效率；基于 shadcn/vue 的基础组件，快速搭建交互界面，样式统一且可复用；分页加载和搜索功能确保了大量图标场景下的性能和易用性；父组件通过动态组件接收结果，集成成本极低，可灵活用于按钮、表单、导航等多种场景。整个实现过程中，最大的感受是：Vue 3 的组合式 API 和动态组件语法让组件通信和资源加载更灵活，而 lucide-vue-next 与 shadcn/vue 的组合则完美平衡了 “功能丰富” 和 “开发效率”。如果你的 Vue 3 项目也需要图标选择功能，不妨试试这个方案～

Tauri + Rust 实现 Windows 窗口材质动态切换：从底层 API 到前端交互

2025-08-09T22:50:00+08:00

注意：这里是 Tauri2最近在做一个 Tauri 桌面应用时，想加个窗口材质切换功能 —— 就是 Windows 11 里的 Mica（云母）、Acrylic（亚克力）类半透明效果。本来以为 Tauri 自带相关 API，试了才发现：Tauri 确实能在初始化时设置窗口材质，但运行中动态切换是做不到的。没办法，只能自己动手用 Rust 调用系统 API 实现了，这里把过程分享出来，希望能帮到同样踩坑的朋友。先说说 Tauri 在材质设置的局限一开始我查 Tauri 文档，发现可以在 tauri.conf.json 里通过 windows 配置设置 transparent 后，能指定 WindowEffect 来实现材质的更改（还需要设置前端背景为 transparent）。但这些配置都是应用启动时生效的，一旦应用跑起来，就没法通过前端调用修改了。如果用户想在使用中切换不同的窗口效果，原生 API 根本满足不了，所以必须自己写 Rust 后端调用 Windows 的 DWM 接口。核心思路：用 Rust 对接 Windows DWM APIWindows 的窗口效果是由Desktop Window Manager（DWM）管理的，它提供了 DwmSetWindowAttribute 和 DwmGetWindowAttribute 两个关键 API，分别用来设置和获取窗口属性。我们要做的就是用 Rust 调用这两个 API，实现材质的动态切换。微软文档链接：DwmGetWindowAttribute 函数（dwmapi.h）DwmSetWindowAttribute 函数（dwmapi.h）DWMWINDOWATTRIBUTE 枚举（dwmapi.h）第一步：检测系统版本，确定支持的材质不同 Windows 版本支持的材质不一样，比如 Mica 材质只在 Windows 11（Build 22000+）才支持。所以第一步必须先判断系统版本，避免在不支持的系统上显示无效选项。我用 Rust 的 winreg 库（需要 cargo add winreg 使用）读取注册表来获取系统版本：// 读取注册表中的系统版本号 let hklm = RegKey::predef(HKEY_LOCAL_MACHINE); let current_version = hklm.open_subkey("SOFTWARE\\Microsoft\\Windows NT\\CurrentVersion")?; let build_number: String = current_version.get_value("CurrentBuild")?;拿到build_number后，就能判断哪些材质可用了。比如 Build 22000 以上支持 Mica、Acrylic等，低版本可能只支持默认材质：// 根据版本动态生成支持的材质列表 if build_number >= 22000 { materials.push(MaterialInfo { id: DWMSBT_MAINWINDOW.0, name: "Mica" }); materials.push(MaterialInfo { id: DWMSBT_TRANSIENTWINDOW.0, name: "Acrylic" }); materials.push(MaterialInfo { id: DWMSBT_TABBEDWINDOW.0, name: "Tabbed (MicaAlt)" }); }第二步：获取窗口句柄（HWND）调用 DWM API 必须要有窗口句柄（HWND），Tauri 里可以通过 window_handle() 方法获取，但需要注意：Tauri 的窗口可能有多层父窗口，必须找到最顶层的那个句柄才有效。我用 Windows API 的 GetParent函数循环向上查找顶层窗口：// 从Tauri窗口获取HWND let window = app.get_webview_window("main")?; let handle = window.window_handle()?; // 转换为Windows原生句柄 match handle.as_raw() { RawWindowHandle::Win32(h) => { let mut current = HWND(isize::from(h.hwnd) as *mut c_void); // 循环找顶层窗口 unsafe { loop { match GetParent(current) { Ok(parent) if !parent.0.is_null() => current = parent, _ => break, } } } Some(current.0 as isize) // 最终拿到可用的HWND } _ => None }这里的 unsafe 块是必须的，因为直接操作系统句柄涉及内存安全，Rust 无法在编译时验证，所以需要开发者自己保证逻辑正确。第三步：实现材质切换功能有了窗口句柄和系统版本信息，就可以调用 DwmSetWindowAttribute 设置材质了。核心代码如下：// 设置窗口材质 pub fn set_window_material(app: &tauri::AppHandle, material: i32) -> u32 { let hwnd = get_window_hwnd(app.clone()).unwrap(); // 获取前面拿到的HWND let mut material_id = material; // 材质ID（对应DWM的枚举值） unsafe { // 调用DWM API设置属性 DwmSetWindowAttribute( HWND(hwnd as *mut c_void), DWMWA_SYSTEMBACKDROP_TYPE, // 要设置的属性：系统背景类型 (&mut material_id as *mut i32).cast::(), // 材质ID的指针 std::mem::size_of::() as u32 // 参数大小 ); } material_id.try_into().unwrap() }这里的 material参数对应 DWM 的枚举值：DWMSBT_AUTO（默认）、DWMSBT_MAINWINDOW（Mica）等，前面定义的MaterialInfo结构体就是把这些值和友好名称对应起来，方便前端显示。use windows::Win32::Graphics::Dwm::{ DWMSBT_AUTO, DWMSBT_NONE, DWMSBT_MAINWINDOW, DWMSBT_TRANSIENTWINDOW, DWMSBT_TABBEDWINDOW, DWMWA_SYSTEMBACKDROP_TYPE, DwmGetWindowAttribute, DwmSetWindowAttribute }; #[derive(Serialize)] pub struct MaterialInfo { pub id: i32, pub name: &'static str, }对于样式样式枚举 DWM_SYSTEMBACKDROP_TYPE 的解释：DWMSBT_AUTO = 0 自动：默认DWMSBT_NONE = 1 无背景样式DWMSBT_MAINWINDOW = 2 云母(Mica)DWMSBT_TRANSIENTWINDOW = 3 亚克力(Acrylic)DWMSBT_TABBEDWINDOW = 4 云母（MicaAlt）前端交互：Vue 3 如何调用后端功能前端部分很简单，主要是用 Tauri 的 invoke函数调用 Rust 写的命令，然后渲染材质列表和处理选择事件。前端组件库则使用 shadcn/vue初始化时加载材质列表页面加载时，先调用后端获取支持的材质和当前材质：// 前端初始化代码 onMounted(() => { // 获取支持的材质列表 invoke('get_supported_window_materials').then(value => { materials.value = value as MaterialInfo[]; }); // 获取当前正在使用的材质 invoke('get_current_window_materials').then(value => { selectedMaterial.value = (value as MaterialInfo[])[0]; }); });用下拉框实现切换交互我用了一个 Combobox 组件展示材质列表，用户选择后调用 set_window_material 命令： {{ material.name }} // 切换材质的方法 const setMaterial = (material: MaterialInfo) => { invoke('set_window_material', { material: material.id }) .then(() => { selectedMaterial.value = material; // 更新选中状态 }) .catch(error => { console.error('切换失败：', error); }); };遇到的坑窗口句柄获取错误：一开始直接用了 Tauri 返回的第一层窗口句柄，调用 DWM API 始终失败，后来才发现需要找顶层父窗口，用 GetParent 循环查找才解决，如果不找，则拿到的是 webview 的子窗口句柄。最后总结虽然 Tauri 原生不支持动态切换窗口材质，但通过 Rust 调用 Windows 的 DWM API 完全可以实现。整个过程的核心就是：正确获取窗口句柄→根据系统版本提供合适的材质选项→用 DWM API 执行切换。这个功能写下来最大的感受是：Rust 虽然入门难，但处理系统级 API 时确实安全又高效；而 Tauri 的前后端通信机制也很方便，让前端能轻松调用底层功能。

Gabriel Ryder's Blog - Gabriel Ryder

博客下线公告

Vue 3 图标选择器实现：基于 lucide-vue-next + shadcn/vue 的高效方案

Tauri + Rust 实现 Windows 窗口材质动态切换：从底层 API 到前端交互