Flutter&React Native&Electron 对比与实战指南

需求分析
    ├─ 平台需求?
    │   ├─ 移动端(iOS/Android)
    │   │   ├─ 高性能要求? → Flutter
    │   │   ├─ 快速迭代? → React Native
    │   │   └─ 团队技术栈? → 根据团队选择
    │   └─ 桌面端(Windows/Mac/Linux)
    │       └─ Electron
    │
    ├─ 性能要求?
    │   ├─ 极致性能 → Flutter / 原生
    │   ├─ 良好性能 → React Native
    │   └─ 可接受性能 → Electron
    │
    └─ 开发成本?
        ├─ 预算充足 → 原生开发
        ├─ 中等预算 → Flutter / React Native
        └─ 紧张预算 → 选择团队熟悉的技术栈

共享层 (Shared)
    ├─ 业务逻辑 (Hooks/Store)
    ├─ 工具函数 (Utils)
    ├─ API 请求 (Services)
    └─ 类型定义 (Types)

平台适配层
    ├─ Web (React)
    │   ├─ 路由 (React Router)
    │   ├─ 组件 (HTML/CSS)
    │   └─ 构建 (Webpack)
    └─ Mobile (React Native)
        ├─ 导航 (React Navigation)
        ├─ 组件 (Native Components)
        └─ 构建 (Metro)

// shared/hooks/useUserInfo.js
import { useState, useEffect } from 'react'
import { getUserInfo as getUserInfoApi } from '../services/user'

/**
 * 获取用户信息 Hook
 * 可在 Web 和 RN 中复用
 */
export function useUserInfo() {
  const [userInfo, setUserInfo] = useState(null)
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState(null)

  const getUserInfo = async () => {
    setLoading(true)
    setError(null)

    try {
      const data = await getUserInfoApi()
      setUserInfo(data)
      return data
    } catch (err) {
      setError(err)
      throw err
    } finally {
      setLoading(false)
    }
  }

  useEffect(() => {
    getUserInfo()
  }, [])

  const updateUserInfo = async (updates) => {
    setUserInfo(prev => ({ ...prev, ...updates }))
  }

  return {
    userInfo,
    loading,
    error,
    getUserInfo,
    updateUserInfo
  }
}

// shared/hooks/useRequest.js
import { useState, useCallback } from 'react'

/**
 * 通用请求 Hook
 * 支持 Web 和 RN
 */
export function useRequest(requestFn) {
  const [data, setData] = useState(null)
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState(null)

  const run = useCallback(async (...args) => {
    setLoading(true)
    setError(null)

    try {
      const result = await requestFn(...args)
      setData(result)
      return result
    } catch (err) {
      setError(err)
      throw err
    } finally {
      setLoading(false)
    }
  }, [requestFn])

  const reset = useCallback(() => {
    setData(null)
    setError(null)
    setLoading(false)
  }, [])

  return {
    data,
    loading,
    error,
    run,
    reset
  }
}

// shared/components/Button/Button.web.js
import React from 'react'
import './Button.css'

export const Button = ({ children, onPress, disabled, style }) => {
  return (
    <button
      className="custom-button"
      onClick={onPress}
      disabled={disabled}
      style={style}
    >
      {children}
    </button>
  )
}

// shared/components/Button/Button.native.js
import React from 'react'
import { TouchableOpacity, Text, StyleSheet } from 'react-native'

export const Button = ({ children, onPress, disabled, style }) => {
  return (
    <TouchableOpacity
      style={[styles.button, style, disabled && styles.disabled]}
      onPress={onPress}
      disabled={disabled}
    >
      <Text style={styles.text}>{children}</Text>
    </TouchableOpacity>
  )
}

const styles = StyleSheet.create({
  button: {
    backgroundColor: '#007AFF',
    padding: 12,
    borderRadius: 8,
    alignItems: 'center'
  },
  disabled: {
    opacity: 0.5
  },
  text: {
    color: '#fff',
    fontSize: 16,
    fontWeight: 'bold'
  }
})

// shared/components/Button/index.js
// Metro bundler 会根据平台自动选择文件
export { Button } from './Button'

// pages/Profile/index.js
// 这个文件可以在 Web 和 RN 中使用
import React from 'react'
import { useUserInfo } from '@/shared/hooks/useUserInfo'
import { Button } from '@/shared/components/Button'
import { Container, Title, Info } from './styles' // 平台特定样式

export const ProfilePage = () => {
  const { userInfo, loading, updateUserInfo } = useUserInfo()

  if (loading) {
    return <Container><Title>加载中...</Title></Container>
  }

  if (!userInfo) {
    return <Container><Title>暂无数据</Title></Container>
  }

  const handleEdit = () => {
    // 业务逻辑,在两个平台都一样
    updateUserInfo({ name: '新名字' })
  }

  return (
    <Container>
      <Title>个人信息</Title>
      <Info>姓名: {userInfo.name}</Info>
      <Info>邮箱: {userInfo.email}</Info>
      <Button onPress={handleEdit}>编辑</Button>
    </Container>
  )
}

Electron 应用
    ├─ 主进程 (Main Process)
    │   ├─ 窗口管理
    │   ├─ 系统集成
    │   └─ IPC 通信
    │
    └─ 渲染进程 (Renderer Process)
        ├─ Web 应用代码 (100% 复用)
        ├─ React/Vue 组件
        ├─ 业务逻辑
        └─ 样式文件

// electron/main.js
const { app, BrowserWindow, ipcMain, dialog } = require('electron')
const path = require('path')
const fs = require('fs')

let mainWindow

// 创建窗口
function createWindow() {
  mainWindow = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      nodeIntegration: false,
      contextIsolation: true,
      preload: path.join(__dirname, 'preload.js')
    }
  })

  // 加载 Web 应用
  if (process.env.NODE_ENV === 'development') {
    mainWindow.loadURL('http://localhost:3000')
  } else {
    mainWindow.loadFile(path.join(__dirname, '../dist/index.html'))
  }

  // 开发工具
  if (process.env.NODE_ENV === 'development') {
    mainWindow.webContents.openDevTools()
  }
}

// 应用启动
app.whenReady().then(createWindow)

// 窗口关闭
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

// IPC 通信 - 文件操作
ipcMain.handle('read-file', async (event, filePath) => {
  try {
    const content = fs.readFileSync(filePath, 'utf-8')
    return { success: true, data: content }
  } catch (err) {
    return { success: false, error: err.message }
  }
})

ipcMain.handle('write-file', async (event, filePath, content) => {
  try {
    fs.writeFileSync(filePath, content, 'utf-8')
    return { success: true }
  } catch (err) {
    return { success: false, error: err.message }
  }
})

// IPC 通信 - 对话框
ipcMain.handle('show-open-dialog', async () => {
  const result = await dialog.showOpenDialog(mainWindow, {
    properties: ['openFile'],
    filters: [
      { name: 'Text Files', extensions: ['txt', 'md'] },
      { name: 'All Files', extensions: ['*'] }
    ]
  })

  return result
})

ipcMain.handle('show-save-dialog', async () => {
  const result = await dialog.showSaveDialog(mainWindow, {
    defaultPath: 'untitled.txt',
    filters: [
      { name: 'Text Files', extensions: ['txt', 'md'] },
      { name: 'All Files', extensions: ['*'] }
    ]
  })

  return result
})

// IPC 通信 - 应用信息
ipcMain.handle('get-app-info', () => {
  return {
    version: app.getVersion(),
    name: app.getName(),
    path: app.getAppPath()
  }
})

// electron/preload.js
const { contextBridge, ipcRenderer } = require('electron')

// 暴露安全的 API 给渲染进程
contextBridge.exposeInMainWorld('electronAPI', {
  // 文件操作
  readFile: (filePath) => ipcRenderer.invoke('read-file', filePath),
  writeFile: (filePath, content) => ipcRenderer.invoke('write-file', filePath, content),

  // 对话框
  showOpenDialog: () => ipcRenderer.invoke('show-open-dialog'),
  showSaveDialog: () => ipcRenderer.invoke('show-save-dialog'),

  // 应用信息
  getAppInfo: () => ipcRenderer.invoke('get-app-info'),

  // 监听事件
  onUpdateAvailable: (callback) => {
    ipcRenderer.on('update-available', callback)
  }
})

// src/hooks/useElectronAPI.js
import { useState, useEffect } from 'react'

/**
 * Electron API Hook
 * 在 Web 环境自动降级
 */
export function useElectronAPI() {
  const [isElectron, setIsElectron] = useState(false)
  const [appInfo, setAppInfo] = useState(null)

  useEffect(() => {
    // 检测是否在 Electron 环境
    setIsElectron(!!window.electronAPI)

    if (window.electronAPI) {
      // 获取应用信息
      window.electronAPI.getAppInfo().then(setAppInfo)
    }
  }, [])

  const readFile = async (filePath) => {
    if (!window.electronAPI) {
      throw new Error('Not in Electron environment')
    }
    return window.electronAPI.readFile(filePath)
  }

  const writeFile = async (filePath, content) => {
    if (!window.electronAPI) {
      throw new Error('Not in Electron environment')
    }
    return window.electronAPI.writeFile(filePath, content)
  }

  const openFile = async () => {
    if (!window.electronAPI) {
      // Web 环境降级方案
      return new Promise((resolve) => {
        const input = document.createElement('input')
        input.type = 'file'
        input.onchange = (e) => {
          const file = e.target.files[0]
          if (file) {
            const reader = new FileReader()
            reader.onload = (event) => {
              resolve({
                canceled: false,
                filePaths: [file.name],
                content: event.target.result
              })
            }
            reader.readAsText(file)
          } else {
            resolve({ canceled: true })
          }
        }
        input.click()
      })
    }

    const result = await window.electronAPI.showOpenDialog()
    if (result.canceled) {
      return result
    }

    const content = await readFile(result.filePaths[0])
    return { ...result, content: content.data }
  }

  const saveFile = async (content) => {
    if (!window.electronAPI) {
      // Web 环境降级方案
      const blob = new Blob([content], { type: 'text/plain' })
      const url = URL.createObjectURL(blob)
      const a = document.createElement('a')
      a.href = url
      a.download = 'file.txt'
      a.click()
      URL.revokeObjectURL(url)
      return { canceled: false }
    }

    const result = await window.electronAPI.showSaveDialog()
    if (result.canceled) {
      return result
    }

    await writeFile(result.filePath, content)
    return result
  }

  return {
    isElectron,
    appInfo,
    readFile,
    writeFile,
    openFile,
    saveFile
  }
}

<!-- src/pages/Editor/index.vue -->
<template>
  <div class="editor-page">
    <div class="toolbar">
      <button @click="handleOpen" class="btn">打开文件</button>
      <button @click="handleSave" class="btn">保存文件</button>
      <span v-if="isElectron" class="app-info">
        {{ appInfo?.name }} v{{ appInfo?.version }}
      </span>
    </div>

    <textarea
      v-model="content"
      class="editor"
      placeholder="开始编辑..."
    ></textarea>

    <div v-if="currentFile" class="status">
      当前文件: {{ currentFile }}
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useElectronAPI } from '@/hooks/useElectronAPI'

const content = ref('')
const currentFile = ref('')

const { isElectron, appInfo, openFile, saveFile } = useElectronAPI()

const handleOpen = async () => {
  try {
    const result = await openFile()

    if (!result.canceled) {
      content.value = result.content
      currentFile.value = result.filePaths[0]
    }
  } catch (err) {
    alert('打开文件失败: ' + err.message)
  }
}

const handleSave = async () => {
  try {
    const result = await saveFile(content.value)

    if (!result.canceled) {
      currentFile.value = result.filePath
      alert('保存成功')
    }
  } catch (err) {
    alert('保存文件失败: ' + err.message)
  }
}
</script>

<style scoped>
.editor-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #1e1e1e;
}

.toolbar {
  display: flex;
  gap: 10px;
  padding: 15px;
  background: #2d2d2d;
  border-bottom: 1px solid #3d3d3d;
}

.btn {
  padding: 8px 16px;
  background: #0066cc;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.btn:hover {
  background: #0052a3;
}

.app-info {
  margin-left: auto;
  color: #999;
  font-size: 14px;
}

.editor {
  flex: 1;
  padding: 20px;
  background: #1e1e1e;
  color: #d4d4d4;
  border: none;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 14px;
  line-height: 1.6;
  resize: none;
}

.editor:focus {
  outline: none;
}

.status {
  padding: 10px 15px;
  background: #2d2d2d;
  border-top: 1px solid #3d3d3d;
  color: #999;
  font-size: 12px;
}
</style>

// performance-test/scenarios.js

/**
 * 性能测试场景
 */
export const testScenarios = [
  {
    name: '长列表滚动',
    description: '渲染 1000 条数据的列表,测试滚动性能',
    metrics: ['FPS', '内存占用', '首屏渲染时间']
  },
  {
    name: '复杂动画',
    description: '100 个元素同时执行动画',
    metrics: ['FPS', 'CPU 占用', '动画流畅度']
  },
  {
    name: '大量计算',
    description: '执行复杂的数学计算',
    metrics: ['执行时间', 'CPU 占用']
  },
  {
    name: '网络请求',
    description: '并发 20 个网络请求',
    metrics: ['响应时间', '成功率']
  },
  {
    name: '包体积',
    description: '对比应用包大小',
    metrics: ['APK/IPA 大小', '下载包大小']
  }
]

/**
 * 性能监控工具
 */
export class PerformanceMonitor {
  constructor(platform) {
    this.platform = platform
    this.results = []
  }

  // 测试 FPS
  measureFPS(duration = 5000) {
    return new Promise((resolve) => {
      let frameCount = 0
      let lastTime = performance.now()

      const measureFrame = () => {
        frameCount++

        if (performance.now() - lastTime >= duration) {
          const fps = frameCount / (duration / 1000)
          resolve(fps)
        } else {
          requestAnimationFrame(measureFrame)
        }
      }

      requestAnimationFrame(measureFrame)
    })
  }

  // 测试内存占用
  measureMemory() {
    if (performance.memory) {
      return {
        used: performance.memory.usedJSHeapSize / 1024 / 1024,
        total: performance.memory.totalJSHeapSize / 1024 / 1024,
        limit: performance.memory.jsHeapSizeLimit / 1024 / 1024
      }
    }
    return null
  }

  // 测试渲染时间
  measureRenderTime(fn) {
    const start = performance.now()
    fn()
    const end = performance.now()
    return end - start
  }

  // 生成报告
  generateReport() {
    return {
      platform: this.platform,
      timestamp: Date.now(),
      results: this.results
    }
  }
}

// __tests__/performance.test.js
import { PerformanceMonitor } from './performance-test/scenarios'
import { render } from '@testing-library/react-native'
import { LongList } from '@/components/LongList'

describe('React Native 性能测试', () => {
  const monitor = new PerformanceMonitor('React Native')

  test('长列表渲染性能', async () => {
    const data = Array.from({ length: 1000 }, (_, i) => ({
      id: i,
      title: `Item ${i}`,
      desc: `Description ${i}`
    }))

    const startTime = performance.now()
    const { getAllByTestId } = render(<LongList data={data} />)
    const endTime = performance.now()

    const renderTime = endTime - startTime
    const items = getAllByTestId('list-item')

    expect(renderTime).toBeLessThan(1000) // 渲染时间小于 1s
    expect(items.length).toBeGreaterThan(0) // 至少渲染了部分项

    monitor.results.push({
      scenario: '长列表渲染',
      renderTime,
      itemsRendered: items.length
    })
  })

  test('滚动性能', async () => {
    const fps = await monitor.measureFPS(5000)

    expect(fps).toBeGreaterThan(50) // FPS 大于 50

    monitor.results.push({
      scenario: '滚动性能',
      fps
    })
  })

  test('内存占用', () => {
    const memory = monitor.measureMemory()

    if (memory) {
      expect(memory.used).toBeLessThan(300) // 内存占用小于 300MB

      monitor.results.push({
        scenario: '内存占用',
        memory
      })
    }
  })

  afterAll(() => {
    const report = monitor.generateReport()
    console.log('性能测试报告:', JSON.stringify(report, null, 2))
  })
})

// debug/react-native-debug.js

/**
 * React Native 调试配置
 */

// 1. 启用 React DevTools
import React from 'react'
import { AppRegistry } from 'react-native'

if (__DEV__) {
  // 连接 React DevTools
  require('react-devtools-core').connectToDevTools({
    host: 'localhost',
    port: 8097
  })

  // 启用性能监控
  require('react-native').unstable_enableLogBox()
}

// 2. 网络请求调试
global.XMLHttpRequest = global.originalXMLHttpRequest || global.XMLHttpRequest

// 3. console 增强
const consoleLog = console.log
console.log = (...args) => {
  consoleLog('[LOG]', new Date().toISOString(), ...args)
}

// 4. 错误边界
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props)
    this.state = { hasError: false, error: null }
  }

  static getDerivedStateFromError(error) {
    return { hasError: true, error }
  }

  componentDidCatch(error, errorInfo) {
    console.error('ErrorBoundary caught:', error, errorInfo)

    // 上报错误到监控平台
    if (!__DEV__) {
      reportError(error, errorInfo)
    }
  }

  render() {
    if (this.state.hasError) {
      return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <Text>出错了: {this.state.error?.message}</Text>
        </View>
      )
    }

    return this.props.children
  }
}

// 5. 性能监控
import { InteractionManager } from 'react-native'

const monitorPerformance = (screenName) => {
  const start = Date.now()

  InteractionManager.runAfterInteractions(() => {
    const duration = Date.now() - start
    console.log(`[Performance] ${screenName} 加载耗时: ${duration}ms`)

    // 上报性能数据
    if (!__DEV__) {
      reportPerformance(screenName, duration)
    }
  })
}

// 使用示例
export const HomeScreen = () => {
  useEffect(() => {
    monitorPerformance('HomeScreen')
  }, [])

  return (
    <ErrorBoundary>
      {/* 页面内容 */}
    </ErrorBoundary>
  )
}

#!/bin/bash
# scripts/rn-release.sh

# React Native 发布脚本

set -e

echo "开始 React Native 发布流程..."

# 1. 检查环境
echo "检查环境..."
if ! command -v node &> /dev/null; then
    echo "错误: 未安装 Node.js"
    exit 1
fi

if ! command -v react-native &> /dev/null; then
    echo "错误: 未安装 React Native CLI"
    exit 1
fi

# 2. 清理缓存
echo "清理缓存..."
rm -rf node_modules
rm -rf ios/build
rm -rf android/app/build
npm cache clean --force

# 3. 安装依赖
echo "安装依赖..."
npm install

# 4. 代码检查
echo "代码检查..."
npm run lint
npm run type-check

# 5. 运行测试
echo "运行测试..."
npm test

# 6. 构建 Android
echo "构建 Android Release..."
cd android
./gradlew clean
./gradlew assembleRelease
cd ..

# 7. 构建 iOS
echo "构建 iOS Release..."
cd ios
pod install
xcodebuild -workspace YourApp.xcworkspace \
           -scheme YourApp \
           -configuration Release \
           -archivePath build/YourApp.xcarchive \
           archive
cd ..

# 8. 生成构建产物信息
BUILD_DATE=$(date +"%Y-%m-%d %H:%M:%S")
BUILD_VERSION=$(node -p "require('./package.json').version")

echo "{
  \"version\": \"$BUILD_VERSION\",
  \"buildDate\": \"$BUILD_DATE\",
  \"platform\": \"React Native\",
  \"android\": \"android/app/build/outputs/apk/release/app-release.apk\",
  \"ios\": \"ios/build/YourApp.xcarchive\"
}" > build-info.json

echo "发布完成! 构建信息:"
cat build-info.json

// electron/dev.js

/**
 * Electron 开发环境配置
 */
const { app, BrowserWindow } = require('electron')
const path = require('path')

// 启用开发者工具
if (process.env.NODE_ENV === 'development') {
  // 安装 Vue/React DevTools
  app.whenReady().then(() => {
    const { default: installExtension, REACT_DEVELOPER_TOOLS, VUEJS_DEVTOOLS } = require('electron-devtools-installer')

    installExtension([REACT_DEVELOPER_TOOLS, VUEJS_DEVTOOLS])
      .then((name) => console.log(`已安装扩展: ${name}`))
      .catch((err) => console.log('安装扩展失败:', err))
  })

  // 热重载
  require('electron-reload')(__dirname, {
    electron: path.join(__dirname, '../node_modules', '.bin', 'electron'),
    hardResetMethod: 'exit'
  })
}

// 错误处理
process.on('uncaughtException', (error) => {
  console.error('未捕获的异常:', error)
})

process.on('unhandledRejection', (reason, promise) => {
  console.error('未处理的 Promise 拒绝:', reason)
})

// electron-builder.config.js

/**
 * Electron Builder 打包配置
 */
module.exports = {
  appId: 'com.example.app',
  productName: '应用名称',
  copyright: 'Copyright © 2024',

  // 打包目录
  directories: {
    output: 'release',
    buildResources: 'build'
  },

  // 文件配置
  files: [
    'dist/**/*',
    'electron/**/*',
    'package.json'
  ],

  // 排除文件
  extraFiles: [
    {
      from: 'resources',
      to: 'resources',
      filter: ['**/*']
    }
  ],

  // Windows 配置
  win: {
    target: [
      {
        target: 'nsis',
        arch: ['x64', 'ia32']
      },
      {
        target: 'zip',
        arch: ['x64']
      }
    ],
    icon: 'build/icon.ico',
    artifactName: '${productName}-${version}-${arch}.${ext}'
  },

  // NSIS 安装程序配置
  nsis: {
    oneClick: false,
    allowToChangeInstallationDirectory: true,
    createDesktopShortcut: true,
    createStartMenuShortcut: true,
    shortcutName: '应用名称'
  },

  // macOS 配置
  mac: {
    target: ['dmg', 'zip'],
    icon: 'build/icon.icns',
    category: 'public.app-category.productivity',
    artifactName: '${productName}-${version}-${arch}.${ext}',
    hardenedRuntime: true,
    entitlements: 'build/entitlements.mac.plist',
    entitlementsInherit: 'build/entitlements.mac.plist'
  },

  // DMG 配置
  dmg: {
    contents: [
      {
        x: 130,
        y: 220
      },
      {
        x: 410,
        y: 220,
        type: 'link',
        path: '/Applications'
      }
    ]
  },

  // Linux 配置
  linux: {
    target: ['AppImage', 'deb', 'rpm'],
    icon: 'build/icons',
    category: 'Utility',
    artifactName: '${productName}-${version}-${arch}.${ext}'
  },

  // 自动更新配置
  publish: [
    {
      provider: 'github',
      owner: 'your-username',
      repo: 'your-repo'
    }
  ]
}

// electron/updater.js

/**
 * Electron 自动更新
 */
const { app, dialog } = require('electron')
const { autoUpdater } = require('electron-updater')

class Updater {
  constructor(mainWindow) {
    this.mainWindow = mainWindow
    this.setupAutoUpdater()
  }

  setupAutoUpdater() {
    // 配置更新服务器
    autoUpdater.setFeedURL({
      provider: 'github',
      owner: 'your-username',
      repo: 'your-repo'
    })

    // 检查更新
    autoUpdater.on('checking-for-update', () => {
      console.log('正在检查更新...')
      this.sendToRenderer('update-checking')
    })

    // 发现新版本
    autoUpdater.on('update-available', (info) => {
      console.log('发现新版本:', info.version)
      this.sendToRenderer('update-available', info)

      dialog.showMessageBox(this.mainWindow, {
        type: 'info',
        title: '发现新版本',
        message: `发现新版本 ${info.version},是否现在更新?`,
        buttons: ['更新', '稍后']
      }).then(result => {
        if (result.response === 0) {
          autoUpdater.downloadUpdate()
        }
      })
    })

    // 没有新版本
    autoUpdater.on('update-not-available', (info) => {
      console.log('已是最新版本')
      this.sendToRenderer('update-not-available')
    })

    // 下载进度
    autoUpdater.on('download-progress', (progressObj) => {
      console.log(`下载进度: ${progressObj.percent.toFixed(2)}%`)
      this.sendToRenderer('update-download-progress', progressObj)
    })

    // 下载完成
    autoUpdater.on('update-downloaded', (info) => {
      console.log('更新下载完成')
      this.sendToRenderer('update-downloaded')

      dialog.showMessageBox(this.mainWindow, {
        type: 'info',
        title: '更新就绪',
        message: '新版本已下载完成,应用将在重启后更新',
        buttons: ['立即重启', '稍后重启']
      }).then(result => {
        if (result.response === 0) {
          autoUpdater.quitAndInstall()
        }
      })
    })

    // 错误处理
    autoUpdater.on('error', (err) => {
      console.error('更新错误:', err)
      this.sendToRenderer('update-error', err)
    })
  }

  // 发送消息到渲染进程
  sendToRenderer(channel, data) {
    if (this.mainWindow) {
      this.mainWindow.webContents.send(channel, data)
    }
  }

  // 手动检查更新
  checkForUpdates() {
    autoUpdater.checkForUpdates()
  }
}

module.exports = Updater

// electron/tray.js

/**
 * 系统托盘功能
 */
const { Tray, Menu, nativeImage } = require('electron')
const path = require('path')

class TrayManager {
  constructor(mainWindow) {
    this.mainWindow = mainWindow
    this.tray = null
    this.createTray()
  }

  createTray() {
    // 创建托盘图标
    const icon = nativeImage.createFromPath(
      path.join(__dirname, '../build/tray-icon.png')
    )

    this.tray = new Tray(icon)

    // 设置提示文字
    this.tray.setToolTip('应用名称')

    // 创建右键菜单
    const contextMenu = Menu.buildFromTemplate([
      {
        label: '显示窗口',
        click: () => {
          this.mainWindow.show()
        }
      },
      {
        label: '隐藏窗口',
        click: () => {
          this.mainWindow.hide()
        }
      },
      {
        type: 'separator'
      },
      {
        label: '设置',
        click: () => {
          this.mainWindow.webContents.send('navigate-to', '/settings')
          this.mainWindow.show()
        }
      },
      {
        type: 'separator'
      },
      {
        label: '退出',
        click: () => {
          this.mainWindow.destroy()
        }
      }
    ])

    this.tray.setContextMenu(contextMenu)

    // 点击托盘图标
    this.tray.on('click', () => {
      if (this.mainWindow.isVisible()) {
        this.mainWindow.hide()
      } else {
        this.mainWindow.show()
      }
    })
  }

  // 更新托盘图标
  updateIcon(iconPath) {
    const icon = nativeImage.createFromPath(iconPath)
    this.tray.setImage(icon)
  }

  // 更新提示文字
  updateTooltip(text) {
    this.tray.setToolTip(text)
  }

  // 销毁托盘
  destroy() {
    if (this.tray) {
      this.tray.destroy()
      this.tray = null
    }
  }
}

module.exports = TrayManager

// electron/shortcuts.js

/**
 * 全局快捷键管理
 */
const { globalShortcut, dialog } = require('electron')

class ShortcutManager {
  constructor(mainWindow) {
    this.mainWindow = mainWindow
    this.shortcuts = new Map()
    this.registerShortcuts()
  }

  registerShortcuts() {
    // 显示/隐藏窗口
    this.register('CommandOrControl+Shift+H', () => {
      if (this.mainWindow.isVisible()) {
        this.mainWindow.hide()
      } else {
        this.mainWindow.show()
      }
    })

    // 刷新页面
    this.register('CommandOrControl+R', () => {
      if (process.env.NODE_ENV === 'development') {
        this.mainWindow.webContents.reload()
      }
    })

    // 打开开发者工具
    this.register('CommandOrControl+Shift+I', () => {
      this.mainWindow.webContents.toggleDevTools()
    })

    // 全屏切换
    this.register('F11', () => {
      const isFullScreen = this.mainWindow.isFullScreen()
      this.mainWindow.setFullScreen(!isFullScreen)
    })

    // 截图功能
    this.register('CommandOrControl+Shift+X', async () => {
      const screenshot = await this.mainWindow.webContents.capturePage()
      // 处理截图...
    })
  }

  register(accelerator, callback) {
    const success = globalShortcut.register(accelerator, callback)

    if (success) {
      this.shortcuts.set(accelerator, callback)
      console.log(`快捷键注册成功: ${accelerator}`)
    } else {
      console.error(`快捷键注册失败: ${accelerator}`)
    }
  }

  unregister(accelerator) {
    globalShortcut.unregister(accelerator)
    this.shortcuts.delete(accelerator)
  }

  unregisterAll() {
    globalShortcut.unregisterAll()
    this.shortcuts.clear()
  }

  isRegistered(accelerator) {
    return globalShortcut.isRegistered(accelerator)
  }

  getRegistered() {
    return Array.from(this.shortcuts.keys())
  }
}

module.exports = ShortcutManager

// electron/menu.js

/**
 * 应用菜单
 */
const { Menu, shell, app } = require('electron')

class MenuManager {
  constructor(mainWindow) {
    this.mainWindow = mainWindow
    this.createMenu()
  }

  createMenu() {
    const isMac = process.platform === 'darwin'

    const template = [
      // Mac 专用应用菜单
      ...(isMac ? [{
        label: app.name,
        submenu: [
          { role: 'about', label: '关于' },
          { type: 'separator' },
          { role: 'services', label: '服务' },
          { type: 'separator' },
          { role: 'hide', label: '隐藏' },
          { role: 'hideOthers', label: '隐藏其他' },
          { role: 'unhide', label: '显示全部' },
          { type: 'separator' },
          { role: 'quit', label: '退出' }
        ]
      }] : []),

      // 文件菜单
      {
        label: '文件',
        submenu: [
          {
            label: '新建',
            accelerator: 'CommandOrControl+N',
            click: () => {
              this.mainWindow.webContents.send('menu-new')
            }
          },
          {
            label: '打开',
            accelerator: 'CommandOrControl+O',
            click: () => {
              this.mainWindow.webContents.send('menu-open')
            }
          },
          {
            label: '保存',
            accelerator: 'CommandOrControl+S',
            click: () => {
              this.mainWindow.webContents.send('menu-save')
            }
          },
          { type: 'separator' },
          isMac ?
            { role: 'close', label: '关闭窗口' } :
            { role: 'quit', label: '退出' }
        ]
      },

      // 编辑菜单
      {
        label: '编辑',
        submenu: [
          { role: 'undo', label: '撤销' },
          { role: 'redo', label: '重做' },
          { type: 'separator' },
          { role: 'cut', label: '剪切' },
          { role: 'copy', label: '复制' },
          { role: 'paste', label: '粘贴' },
          { role: 'selectAll', label: '全选' }
        ]
      },

      // 查看菜单
      {
        label: '查看',
        submenu: [
          { role: 'reload', label: '重新加载' },
          { role: 'forceReload', label: '强制重新加载' },
          { role: 'toggleDevTools', label: '开发者工具' },
          { type: 'separator' },
          { role: 'resetZoom', label: '实际大小' },
          { role: 'zoomIn', label: '放大' },
          { role: 'zoomOut', label: '缩小' },
          { type: 'separator' },
          { role: 'togglefullscreen', label: '全屏' }
        ]
      },

      // 窗口菜单
      {
        label: '窗口',
        submenu: [
          { role: 'minimize', label: '最小化' },
          { role: 'zoom', label: '缩放' },
          ...(isMac ? [
            { type: 'separator' },
            { role: 'front', label: '全部置于顶层' }
          ] : [
            { role: 'close', label: '关闭' }
          ])
        ]
      },

      // 帮助菜单
      {
        label: '帮助',
        submenu: [
          {
            label: '查看文档',
            click: async () => {
              await shell.openExternal('https://docs.example.com')
            }
          },
          {
            label: '反馈问题',
            click: async () => {
              await shell.openExternal('https://github.com/example/issues')
            }
          },
          { type: 'separator' },
          {
            label: '检查更新',
            click: () => {
              this.mainWindow.webContents.send('check-for-updates')
            }
          }
        ]
      }
    ]

    const menu = Menu.buildFromTemplate(template)
    Menu.setApplicationMenu(menu)
  }

  // 更新菜单项
  updateMenuItem(id, options) {
    const menu = Menu.getApplicationMenu()
    const menuItem = menu.getMenuItemById(id)

    if (menuItem) {
      Object.assign(menuItem, options)
    }
  }
}

module.exports = MenuManager