React + Electron

// src/contexts/ElectronContext.jsx
import { createContext, useContext, useEffect, useState } from 'react'

const ElectronContext = createContext(null)

export function ElectronProvider({ children }) {
  const [isElectron, setIsElectron] = useState(false)
  const [appVersion, setAppVersion] = useState('')

  useEffect(() => {
    // 检测是否在 Electron 环境
    if (window.electronAPI) {
      setIsElectron(true)
      
      // 获取应用版本
      window.electronAPI.getAppVersion().then(version => {
        setAppVersion(version)
      })
    }
  }, [])

  const value = {
    isElectron,
    appVersion,
    api: window.electronAPI
  }

  return (
    <ElectronContext.Provider value={value}>
      {children}
    </ElectronContext.Provider>
  )
}

export function useElectron() {
  const context = useContext(ElectronContext)
  if (!context) {
    throw new Error('useElectron must be used within ElectronProvider')
  }
  return context
}

// src/main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import { ElectronProvider } from './contexts/ElectronContext'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <ElectronProvider>
      <App />
    </ElectronProvider>
  </React.StrictMode>
)

// src/App.jsx
import { useElectron } from './contexts/ElectronContext'
import FileManager from './components/FileManager'
import './App.css'

function App() {
  const { isElectron, appVersion } = useElectron()

  return (
    <div className="app">
      <header>
        <h1>React + Electron 应用</h1>
        {isElectron && <span>v{appVersion}</span>}
      </header>
      
      <main>
        {isElectron ? (
          <FileManager />
        ) : (
          <p>请在 Electron 环境中运行</p>
        )}
      </main>
    </div>
  )
}

export default App

// src/components/FileManager.jsx
import { useState } from 'react'
import { useElectron } from '../contexts/ElectronContext'
import './FileManager.css'

function FileManager() {
  const { api } = useElectron()
  const [currentFile, setCurrentFile] = useState(null)
  const [content, setContent] = useState('')
  const [isModified, setIsModified] = useState(false)

  const handleOpenFile = async () => {
    const result = await api.openFile()
    
    if (result.success) {
      setCurrentFile({
        path: result.filePath,
        name: result.fileName
      })
      setContent(result.content)
      setIsModified(false)
    } else if (!result.canceled) {
      alert('打开文件失败: ' + result.error)
    }
  }

  const handleSaveFile = async () => {
    const result = await api.saveFile({
      filePath: currentFile?.path,
      content
    })

    if (result.success) {
      setCurrentFile({
        path: result.filePath,
        name: result.fileName
      })
      setIsModified(false)
      api.showNotification('保存成功', '文件已保存')
    } else if (!result.canceled) {
      alert('保存文件失败: ' + result.error)
    }
  }

  const handleContentChange = (e) => {
    setContent(e.target.value)
    setIsModified(true)
  }

  return (
    <div className="file-manager">
      <div className="toolbar">
        <button onClick={handleOpenFile}>打开文件</button>
        <button onClick={handleSaveFile} disabled={!isModified}>
          保存 {isModified && '*'}
        </button>
        <span className="file-name">
          {currentFile ? currentFile.name : '未打开文件'}
        </span>
      </div>

      <textarea
        className="editor"
        value={content}
        onChange={handleContentChange}
        placeholder="打开文件或开始输入..."
      />

      <div className="status-bar">
        <span>{content.length} 字符</span>
        <span>{content.split('\n').length} 行</span>
      </div>
    </div>
  )
}

export default FileManager

import { lazy, Suspense } from 'react'

const FileManager = lazy(() => import('./components/FileManager'))

function App() {
  return (
    <Suspense fallback={<div>加载中...</div>}>
      <FileManager />
    </Suspense>
  )
}

import { FixedSizeList } from 'react-window'

function FileList({ files }) {
  const Row = ({ index, style }) => (
    <div style={style}>
      {files[index].name}
    </div>
  )

  return (
    <FixedSizeList
      height={600}
      itemCount={files.length}
      itemSize={35}
      width="100%"
    >
      {Row}
    </FixedSizeList>
  )
}

import { useMemo } from 'react'
import { debounce } from 'lodash-es'

function Editor() {
  const handleChange = useMemo(
    () => debounce((value) => {
      // 保存到本地存储
      localStorage.setItem('draft', value)
    }, 1000),
    []
  )

  return (
    <textarea onChange={(e) => handleChange(e.target.value)} />
  )
}