告别 Electron：Meetily 用 React+Tauri 打造高性能跨平台会议助手

【免费下载链接】meeting-minutes An open source Live Ai based meeting minutes generator that can completely run in your PC. 项目地址: https://gitcode.com/GitHub_Trending/me/meeting-minutes

还在忍受 Electron 应用的内存占用和启动速度？Meetily 前端架构为你展示如何用 React+Tauri 构建既保留 Web 开发效率、又具备原生应用性能的桌面会议工具。本文将深入解析这一架构选型的技术细节、实现方案及实际效果，帮助你掌握下一代跨平台应用开发范式。

架构选型：为什么是 React+Tauri？

Meetily 作为一款需要实时音频处理、本地 AI 计算的会议纪要工具，对性能和系统资源占用有严苛要求。传统 Electron 架构因 Chromium 内核导致的资源消耗问题成为瓶颈，而 Tauri 的出现提供了更优解。

Tauri 是一个基于 Rust 的跨平台桌面应用框架，与 Electron 相比具有显著优势：

• 更小的应用体积（Meetily 安装包小于 50MB，仅为同类 Electron 应用的 1/5）
• 更低的内存占用（ idle 状态内存占用不到 100MB）
• 原生系统 API 访问能力
• 更强的安全性模型

前端技术栈选择 React+Next.js+Tailwind CSS，结合 Tauri 实现了"Web 开发效率+原生应用体验"的完美平衡。项目架构文档可参考 docs/architecture.md。

项目结构解析

Meetily 前端采用清晰的模块化结构，将 UI 组件、业务逻辑和原生能力调用分离：

frontend/
├── src/                   # Next.js 前端代码
│   ├── app/               # 应用入口和路由
│   ├── components/        # UI组件库
│   ├── contexts/          # React上下文
│   ├── hooks/             # 自定义Hooks
│   └── lib/               # 工具函数和API封装
├── src-tauri/             # Rust后端代码
│   ├── src/               # Tauri核心逻辑
│   └── tauri.conf.json    # Tauri配置文件
└── public/                # 静态资源

核心配置文件 frontend/src-tauri/tauri.conf.json 定义了应用窗口属性、安全策略和原生能力权限，其中关键配置包括：

"app": {
  "windows": [{
    "title": "meetily",
    "width": 1100,
    "height": 700,
    "resizable": true
  }],
  "security": {
    "csp": {
      "default-src": "'self'",
      "connect-src": "'self' http://localhost:11434 http://localhost:8178"
    }
  }
}

核心功能实现

1. 音频录制与处理

Meetily 需要同时捕获麦克风和系统音频，这一核心功能通过 Tauri 调用系统原生 API 实现。Rust 后端代码处理音频流捕获、编码和预处理，再通过 Tauri 命令暴露给前端：

// 音频捕获核心代码 [src-tauri/src/audio/recording_manager.rs]
pub async fn start_recording(
    &self,
    device_id: String,
    quality: RecordingQuality,
) -> Result<RecordingSession, AudioError> {
    // 初始化音频设备
    let device = self.device_manager.get_device(&device_id)?;
    // 创建音频缓冲区
    let buffer = AudioBuffer::new(quality.sample_rate, quality.bit_depth);
    // 开始捕获
    let session = RecordingSession::new(device, buffer);
    self.sessions.write().await.insert(session.id.clone(), session.clone());
    Ok(session)
}

前端通过 @tauri-apps/api 调用这些命令：

// 前端调用录音API [src/hooks/useRecordingControls.ts]
import { invoke } from '@tauri-apps/api/tauri';

export function useRecordingControls() {
  const startRecording = async (deviceId: string) => {
    return invoke('start_recording', { 
      deviceId,
      quality: { sampleRate: 44100, bitDepth: 16 }
    });
  };
  
  // 其他录音控制方法...
  
  return { startRecording, stopRecording, pauseRecording };
}

2. 实时转录与UI集成

转录功能通过本地运行的 Whisper 服务器实现，前端通过 WebSocket 接收实时转录结果并更新界面。转录面板组件 src/components/meeting-details/TranscriptPanel.tsx 负责展示实时文字并提供编辑功能。

转录界面采用分区设计，左侧显示原始转录文本，右侧提供富文本编辑功能，支持添加笔记和标记关键点：

3. AI 总结生成

Meetily 利用本地 LLM 模型生成会议总结，支持多种总结模板。总结功能实现位于 src/components/meeting-details/SummaryPanel.tsx，通过调用 Ollama API 实现本地 AI 处理：

// 总结生成代码示例
const generateSummary = async (transcript: string, template: string) => {
  setGenerating(true);
  try {
    const response = await invoke('generate_summary', {
      transcript,
      templateId: template,
      model: selectedModel
    });
    setSummary(response.summary);
    setLastGenerated(new Date());
  } catch (error) {
    setError('总结生成失败: ' + error.message);
  } finally {
    setGenerating(false);
  }
};

总结结果展示界面支持折叠/展开不同部分（如待办事项、讨论要点、决策记录等），方便用户快速获取会议关键信息：

跨平台适配与性能优化

Meetily 需同时支持 Windows、macOS 和 Linux 系统，Tauri 的跨平台能力在此发挥关键作用。项目通过以下策略确保各平台一致性：

1. 条件编译：在 Rust 代码中使用条件编译处理平台特定逻辑

   #[cfg(target_os = "macos")]
   fn setup_audio_capture() -> Result<(), AudioError> {
       // macOS 特定音频设置
   }
   
   #[cfg(target_os = "windows")]
   fn setup_audio_capture() -> Result<(), AudioError> {
       // Windows 特定音频设置
   }
   

2. 统一构建脚本：提供跨平台一致的构建命令，如 clean_run.sh 和 clean_run_windows.bat

3. 设备检测与适配：自动检测系统音频设备并优化配置，相关代码位于 src/components/DeviceSelection.tsx

性能优化方面，Meetily 采用多项技术确保流畅体验：

• 音频处理使用 Rust 多线程处理，避免阻塞 UI
• 转录结果采用增量更新策略，减少 DOM 操作
• 本地模型加载采用按需加载和优先级调度
• UI 组件使用 React.memo 和 useMemo 减少不必要渲染

开发与构建流程

Meetily 提供了便捷的开发和构建流程，开发者只需几个命令即可启动开发环境：

# 安装依赖
pnpm install

# 启动开发服务器
./clean_run.sh

# 构建生产版本
./clean_build.sh

Tauri 配置文件 frontend/src-tauri/tauri.conf.json 中定义了构建相关配置，包括窗口尺寸、权限设置和资源包含规则。开发环境默认使用热重载，代码变更会自动应用而无需重启应用。

结语：Web 技术构建原生体验的未来

Meetily 前端架构展示了 React+Tauri 组合在构建高性能跨平台应用方面的巨大潜力。通过将 Web 开发的高效性与 Rust 的性能优势相结合，项目成功实现了既满足复杂功能需求、又保持优秀用户体验的桌面应用。

随着 Tauri 等新一代框架的成熟，Web 技术在桌面应用领域的应用将更加广泛。Meetily 作为这一趋势的实践案例，为开发者提供了可参考的架构模式和实现方案。完整项目代码可通过以下地址获取：

git clone https://gitcode.com/GitHub_Trending/me/meeting-minutes

未来版本将进一步优化 AI 模型集成，增强多人协作功能，并探索 WebGPU 在本地 AI 计算中的应用，持续提升用户体验。

【免费下载链接】meeting-minutes An open source Live Ai based meeting minutes generator that can completely run in your PC. 项目地址: https://gitcode.com/GitHub_Trending/me/meeting-minutes