# flutter-translate

**Repository Path**: kingelf/flutter-translate

## Basic Information

- **Project Name**: flutter-translate
- **Description**: FLutter工程的翻译
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-09-10
- **Last Updated**: 2025-09-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 多语言文件管理工具

一个基于React + TypeScript + Ant Design的Web应用，提供Excel文件上传、多语言文件生成、冲突检测等功能。

## 功能特性

- 📁 **Excel文件解析** - 自动解析Excel文件，识别语言列和翻译数据
- 🔍 **智能冲突检测** - 自动检测重复键、缺失翻译和格式错误
- 📱 **Dart文件生成** - 生成符合Flutter项目标准的Dart语言文件
- 🎨 **现代化UI** - 基于Ant Design的科技感界面设计
- 📱 **响应式设计** - 适配桌面端、平板端、手机端
- ⚡ **高性能** - 使用Web Worker处理大文件，避免阻塞UI

## 技术栈

- **前端框架**: React 18 + TypeScript
- **UI组件库**: Ant Design 5.x
- **状态管理**: Zustand
- **文件处理**: SheetJS (xlsx)
- **样式方案**: CSS-in-JS (styled-components)
- **构建工具**: Vite
- **路由管理**: React Router v6

## 项目结构

```
src/
├── components/             # 通用组件
│   ├── ui/                 # 基础UI组件
│   └── upload/             # 上传组件
├── pages/                  # 页面模块
│   ├── UploadPage.tsx      # 上传页面
│   ├── ProcessingPage.tsx  # 处理页面
│   └── ResultPage.tsx      # 结果页面
├── services/               # 服务层
│   └── fileService.ts      # 文件处理服务
├── store/                  # 状态管理
│   └── appStore.ts         # 应用状态
├── utils/                  # 工具函数
│   ├── fileUtils.ts        # 文件处理工具
│   └── languageUtils.ts    # 语言处理工具
├── types/                  # 类型定义
│   └── index.ts            # 全局类型
├── theme/                  # 主题配置
│   └── themeConfig.ts      # 主题配置
├── App.tsx                 # 应用入口
└── main.tsx                # 主入口文件
```

## 安装和运行

### 环境要求

- Node.js >= 16.0.0
- npm >= 8.0.0

### 安装依赖

```bash
npm install
```

### 开发模式

```bash
npm run dev
```

应用将在 http://localhost:3000 启动

### 构建生产版本

```bash
npm run build
```

### 预览生产版本

```bash
npm run preview
```

## 使用说明

### 1. 上传Excel文件

- 支持 `.xlsx` 格式的Excel文件
- 文件大小限制：10MB
- 支持拖拽上传和点击选择

### 2. Excel文件格式要求

- **第一行**：语言代码（如 en, zh, fr 等）
- **第一列**：翻译键名
- **其他单元格**：对应语言的翻译内容

示例：
```
| 键名 | en | zh | fr |
|------|----|----|----|
| hello | Hello | 你好 | Bonjour |
| world | World | 世界 | Monde |
```

### 3. 处理流程

1. **文件验证** - 检查文件格式和大小
2. **数据解析** - 解析Excel文件内容
3. **冲突检测** - 检测翻译冲突和缺失项
4. **文件生成** - 生成Dart语言文件
5. **结果展示** - 显示处理结果和下载链接

### 4. 生成的文件格式

生成的文件符合 `docs/langs` 目录结构，可直接复制到Flutter项目使用：

```dart
const Map<String, String> EN = {
  "hello": "Hello",
  "world": "World",
};
```

## 开发指南

### 代码规范

- 使用TypeScript进行类型检查
- 遵循ESLint规则
- 使用Prettier格式化代码
- 组件使用函数式组件和Hooks

### 组件开发

- 使用styled-components进行样式封装
- 遵循单一职责原则
- 提供完整的TypeScript类型定义
- 支持响应式设计

### 状态管理

- 使用Zustand进行状态管理
- 状态按功能模块划分
- 提供选择器优化性能

## 部署

### 静态部署

构建后的文件在 `dist` 目录，可以部署到任何静态文件服务器：

- Nginx
- Apache
- CDN
- GitHub Pages
- Netlify
- Vercel

### 环境变量

创建 `.env` 文件配置环境变量：

```env
VITE_APP_TITLE=多语言文件管理工具
VITE_APP_VERSION=1.0.0
```

## 浏览器支持

- Chrome >= 88
- Firefox >= 85
- Safari >= 14
- Edge >= 88

## 许可证

MIT License

## 贡献

欢迎提交Issue和Pull Request！

## 更新日志

### v1.0.0 (2024-01-01)

- 初始版本发布
- 支持Excel文件上传和解析
- 支持多语言文件生成
- 支持冲突检测
- 支持文件下载
- 响应式设计
- 现代化UI界面