React 19 开发

灵动桌面框架前端基于 React 19 + TypeScript 5.8 构建，使用函数组件和 Hooks 模式。

入口结构

// src/main.tsx
import ReactDOM from 'react-dom/client'
import App from './App'

ReactDOM.createRoot(document.getElementById('root')!).render(<App />)

// src/App.tsx
import { ConfigProvider, App as AntdApp, theme } from 'antd'
import zhCN from 'antd/locale/zh_CN'
import { useAppStore } from '@/store'
import Router from './Router'

export default function App() {
  const isDark = useAppStore((s) => s.isDark)

  return (
    <ConfigProvider
      locale={zhCN}
      theme={{
        algorithm: isDark ? theme.darkAlgorithm : theme.defaultAlgorithm,
      }}
    >
      <AntdApp>
        <Router />
      </AntdApp>
    </ConfigProvider>
  )
}

页面组件示例

// src/pages/home/index.tsx
import { Card, Typography } from 'antd'
import { useCommand } from '@/hooks/useCommand'

const { Title, Paragraph } = Typography

export default function HomePage() {
  const { data, loading, execute } = useCommand<string>('greet')

  return (
    <div className="p-6">
      <Title level={2}>欢迎</Title>
      <Card loading={loading}>
        <Paragraph>{data || '点击按钮打招呼'}</Paragraph>
        <button onClick={() => execute({ name: '灵动' })}>
          打招呼
        </button>
      </Card>
    </div>
  )
}

路径别名

vite.config.ts 配置了 @/ 路径别名指向 src/ 目录：

import { resolve } from 'path'

resolve: {
  alias: {
    '@': resolve(__dirname, 'src'),
  },
}

// 使用别名导入
import { useAppStore } from '@/store'
import { greet } from '@/lib/api'
import ErrorBoundary from '@/components/ui/ErrorBoundary'

开发规范

禁止

• ❌ 使用 any 类型 — 必须严格 TypeScript
• ❌ 直接调用 invoke() — 封装到 src/lib/api/
• ❌ 使用 fetch() 请求外部 API — 通过 Rust Command 代理
• ❌ 导入 Node.js 模块 — WebView 环境不支持
• ❌ 硬编码文件路径 — 使用 Tauri Path API

推荐

• 使用函数组件 + Hooks
• 使用 Ant Design 组件，保持 UI 一致性
• 使用 TailwindCSS 原子类处理间距和布局
• 使用 ErrorBoundary 包裹页面级组件