# electron_forge_temp

**Repository Path**: front-end-tool-development/electron_forge_temp

## Basic Information

- **Project Name**: electron_forge_temp
- **Description**: electron-forge + vite +vue3+ant design vue+echarts 项目模板
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: feature/ai-react-shadcn-template-electron
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2024-07-10
- **Last Updated**: 2026-08-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: template, Electron, vite

## README

# 🚀 Modern Electron React App

一个基于现代化技术栈的 Electron 桌面应用程序模板
## 注意：macOS上通知权限开启，需要整理打开系统权限栏目。


## ✨ 技术栈

- **🔧 核心框架**: Electron 30 + React 18 + TypeScript 5
- **⚡ 构建工具**: Vite 5 + Electron Forge 7
- **🎨 UI 框架**: TailwindCSS 3 + shadcn/ui + Radix UI
- **📊 图表库**: ECharts 5
- **🌐 国际化**: react-i18next
- **🗃️ 状态管理**: Zustand
- **🧪 测试框架**: Vitest + Testing Library
- **📝 代码规范**: ESLint + Prettier + TypeScript

## 🎯 特性

- ✅ **现代化 UI**: 基于 TailwindCSS 和 shadcn/ui 的现代化界面
- ✅ **深色模式**: 内置深色/浅色主题切换
- ✅ **响应式设计**: 适配不同屏幕尺寸
- ✅ **类型安全**: 完整的 TypeScript 支持
- ✅ **热重载**: 开发时的快速热重载
- ✅ **安全隔离**: Context Isolation + Sandbox 安全策略
- ✅ **跨平台**: 支持 Windows、macOS、Linux
- ✅ **自动化测试**: 完整的测试覆盖

## 📦 安装

```bash
# 克隆项目
git clone <repository-url>
cd electron_forge_temp

# 安装依赖
npm install

# 安装 UI 框架 (可选)
chmod +x scripts/install-ui-framework.sh
./scripts/install-ui-framework.sh
```

## 🚀 开发

```bash
# 启动开发服务器
npm run dev

# 类型检查
npm run type-check

# 代码检查
npm run lint

# 格式化代码
npm run format

# 运行测试
npm test
```

## 📦 构建

```bash
# 构建应用
npm run build

# 打包应用
npm run package

# 制作安装包
npm run make
```

## 📁 项目结构

```
├── src/
│   ├── main/                 # 主进程
│   │   ├── index.ts         # 主进程入口
│   │   ├── ipc/             # IPC 通信
│   │   └── services/        # 主进程服务
│   ├── renderer/            # 渲染进程 (React)
│   │   ├── components/      # React 组件
│   │   │   ├── ui/         # shadcn/ui 组件
│   │   │   └── layout/     # 布局组件
│   │   ├── pages/          # 页面组件
│   │   ├── hooks/          # 自定义 Hooks
│   │   ├── store/          # 状态管理
│   │   ├── utils/          # 工具函数
│   │   └── styles/         # 样式文件
│   ├── preload.js          # 预加载脚本
│   └── test/               # 测试文件
├── scripts/                # 构建脚本
├── tailwind.config.ts      # TailwindCSS 配置
├── components.json         # shadcn/ui 配置
└── vite.*.config.mjs      # Vite 配置
```

## 🎨 UI 组件

项目集成了 shadcn/ui 组件库，包含以下组件：

- **Button** - 按钮组件
- **Card** - 卡片组件  
- **Input** - 输入框组件
- **Badge** - 徽章组件
- **ThemeToggle** - 主题切换组件

## 🔧 配置

### TailwindCSS
配置文件: `tailwind.config.ts`
- 支持深色模式
- 自定义颜色系统
- 响应式断点

### shadcn/ui
配置文件: `components.json`
- 基于 Radix UI
- 完全可定制
- 无障碍访问支持

## 🧪 测试

```bash
# 运行所有测试
npm test

# 运行测试并生成覆盖率报告
npm run test:coverage

# 运行测试 UI
npm run test:ui
```

## 📝 开发指南

1. **组件开发**: 使用 shadcn/ui 组件作为基础
2. **样式编写**: 优先使用 TailwindCSS 工具类
3. **状态管理**: 使用 Zustand 进行状态管理
4. **类型定义**: 为所有组件和函数添加 TypeScript 类型
5. **测试编写**: 为关键功能编写单元测试

## 🤝 贡献

欢迎提交 Issue 和 Pull Request！

## 📄 许可证

MIT License