# C++ 代码中英对照查看器

**Repository Path**: chengyiok/c---code-bilingual-viewer

## Basic Information

- **Project Name**: C++ 代码中英对照查看器
- **Description**: C++ 代码中英对照查看器
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-31
- **Last Updated**: 2026-01-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# C++ 代码中英对照查看器
![输入图片说明](public/c4.png)
一个基于 React + TypeScript 的分屏 C++ 代码中英对照学习工具，左侧显示原版 C++ 代码，右侧自动转换为中文代码，方便学习和理解 C++ 编程。

## 功能特点

- ✅ **分屏显示**：左侧显示 C++ 代码，右侧显示对应的中文代码
- ✅ **代码转换**：自动将 C++ 关键字和语法转换为中文
- ✅ **文件上传**：支持上传 C++ 代码文件（.cpp、.h、.hpp）进行转换
- ✅ **示例代码**：提供完整的 C++ 示例代码
- ✅ **语法高亮**：支持代码语法高亮显示
- ✅ **响应式设计**：适配不同屏幕尺寸

## 运行方式

### 方式一：开发模式（推荐用于开发和测试）

#### 前置要求

- Node.js >= 16.0.0
- npm >= 7.0.0 或 yarn >= 1.22.0

#### 安装步骤

1. **克隆或下载项目**

```bash
# 如果项目在 GitHub 上
git clone <项目地址>
cd cpp-chinese-viewer

# 或者直接下载项目文件夹并进入
cd cpp-chinese-viewer
```

2. **安装依赖**

```bash
# 使用 npm
npm install

# 或使用 yarn
yarn install
```

3. **启动开发服务器**

```bash
# 使用 npm
npm run dev

# 或使用 yarn
yarn dev
```

4. **打开浏览器**

在浏览器中访问：`http://localhost:5173/`

### 方式二：生产构建（推荐用于部署）

1. **构建项目**

```bash
# 使用 npm
npm run build

# 或使用 yarn
yarn build
```

2. **预览构建结果**

```bash
# 使用 npm
npm run preview

# 或使用 yarn
yarn preview
```

3. **部署**

构建完成后，`dist` 文件夹包含所有静态文件，可以部署到任何静态网站托管服务：
- GitHub Pages
- Vercel
- Netlify
- 或任何 Web 服务器

### 方式三：直接运行（无需安装依赖）

如果您已经安装了 Node.js，可以直接运行以下命令：

```bash
# 一键安装并运行
npm install && npm run dev
```

## 项目结构

```
cpp-chinese-viewer/
├── public/              # 静态资源
├── src/                # 源代码
│   ├── App.tsx         # 主应用组件
│   ├── App.css         # 应用样式
│   ├── main.tsx        # 应用入口
│   └── style.css       # 全局样式
├── dist/               # 构建输出（运行 npm run build 后生成）
├── index.html          # HTML 模板
├── package.json        # 项目配置
├── tsconfig.json       # TypeScript 配置
└── README.md          # 项目说明
```

## 使用说明

1. **查看示例代码**：应用启动后，默认显示示例 C++ 代码及其中文转换结果

2. **上传自己的代码**：
   - 点击"选择文件"按钮
   - 选择 C++ 代码文件（.cpp、.h、.hpp）
   - 左侧显示原版代码，右侧显示中文转换结果

3. **重置示例**：点击"重置为示例代码"按钮，恢复默认示例代码

## 代码转换规则

| C++ 关键字 | 中文翻译 |
|------------|---------|
| `int` | `整型` |
| `string` | `字符串` |
| `void` | `空类型` |
| `main` | `主函数` |
| `if` | `如果` |
| `else` | `否则` |
| `else if` | `否则如果` |
| `cout` | `控制台输出` |
| `cin` | `控制台输入` |
| `return` | `返回` |
| `double` | `小数` |
| `bool` | `布尔型` |
| `true` | `真` |
| `false` | `假` |
| `while` | `当` |
| `for` | `对于` |
| `struct` | `结构体` |

## 常见问题

### Q: 安装依赖时出现错误？

A: 请确保您的 Node.js 版本 >= 16.0.0，可以使用以下命令检查版本：

```bash
node --version
npm --version
```

### Q: 运行 `npm run dev` 后无法访问？

A: 请检查：
1. 防火墙是否阻止了 5173 端口
2. 终端是否显示了正确的访问地址
3. 尝试访问 `http://localhost:5173/` 或终端显示的其他地址

### Q: 代码转换不准确？

A: 当前版本支持基本的 C++ 关键字和语法转换，复杂的语法结构可能无法完美转换。后续版本会持续改进。

### Q: 如何修改端口号？

A: 在 `vite.config.ts` 文件中添加以下配置：

```typescript
export default defineConfig({
  server: {
    port: 3000, // 修改为您想要的端口号
  },
})
```

## 技术栈

- **前端框架**：React 19.2.4
- **语言**：TypeScript 5.9.3
- **构建工具**：Vite 7.2.4
- **差异对比组件**：react-diff-viewer 3.1.1

## 开发

### 添加新的 C++ 关键字转换

编辑 `src/App.tsx` 文件中的 `cppToChineseMap` 对象：

```typescript
const cppToChineseMap: Record<string, string> = {
  // 添加新的关键字映射
  'your_keyword': '你的中文翻译',
  // ...
};
```

### 修改样式

编辑 `src/App.css` 文件来自定义应用样式。

## 许可证

MIT License

## 贡献

欢迎提交 Issue 和 Pull Request！

## 联系方式

如有问题或建议，请通过以下方式联系：
- 提交 Issue
- 发送邮件

---

**祝您学习愉快！** 🎉