# 图形化编程

**Repository Path**: pao200724/graph_coding

## Basic Information

- **Project Name**: 图形化编程
- **Description**: 图形化编程工具
- **Primary Language**: TypeScript
- **License**: GPL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-02-07
- **Last Updated**: 2026-04-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Graph Coding - 多语言代码生成与类型检查系统

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
[![Next.js](https://img.shields.io/badge/Next.js-16.1.6-black)](https://nextjs.org/)
[![TypeScript](https://img.shields.io/badge/TypeScript-5.9.3-blue)](https://www.typescriptlang.org/)
[![React](https://img.shields.io/badge/React-19.2.3-blue)](https://react.dev/)
[![TDesign](https://img.shields.io/badge/TDesign-1.12.0-blue)](https://tdesign.tencent.com/)

一个功能强大的多语言代码生成器、类型检查系统和可视化节点编辑器。支持 TypeScript、Python、Go、Lua 等多种语言，提供完整的 AST（抽象语法树）处理能力。

## 🌟 核心特性

### 1. 多语言代码生成器
- **支持语言**: TypeScript、Python、Go、Lua
- **完整的 AST 支持**: 涵盖所有 TypeScript 语法特性
- **类型系统**: 支持原始类型、联合类型、交集类型、泛型、条件类型等
- **模块化设计**: 基于抽象基类，易于扩展新语言

### 2. 类型检查系统
- **类型推断**: 自动推断表达式、变量的类型
- **类型匹配**: 完整的类型兼容性检查
- **错误诊断**: 详细的类型错误信息和位置
- **符号表管理**: 支持多级作用域和变量查找

### 3. 可视化节点编辑器
- **拖拽式编辑**: 直观的节点拖放操作
- **连线系统**: 贝塞尔曲线连接，支持端口类型检查
- **画布操作**: 支持平移、缩放、对齐
- **历史记录**: 撤销/重做功能
- **导入导出**: JSON 格式的图形导入导出

### 4. 现代化 UI
- **TDesign 组件库**: 使用腾讯 TDesign 组件库,提供企业级 UI 体验
- **响应式设计**: 适配不同屏幕尺寸
- **丰富的测试工具**: 可视化测试界面,方便调试和验证

## 📁 项目结构

```
graph_coding/
├── src/
│   ├── language/              # 语言处理核心
│   │   ├── config/           # 语言配置和运算符表
│   │   ├── core/             # AST 类型定义
│   │   ├── generator/        # 代码生成器
│   │   │   ├── abstract-generator.ts    # 抽象基类
│   │   │   ├── typescript-generator.ts  # TypeScript 生成器
│   │   │   ├── go-generator.ts           # Go 生成器
│   │   │   ├── python-generator.ts       # Python 生成器
│   │   │   └── lua-generator.ts          # Lua 生成器
│   │   └── utils/            # 类型检查工具
│   │       ├── type-utils.ts         # 类型工具函数
│   │       ├── type-comparator.ts     # 类型比较器
│   │       ├── type-checker.ts       # 类型检查器
│   │       └── diagnostics.ts        # 诊断信息
│   └── node-graph/            # 节点编辑器
│       ├── components/       # React 组件
│       ├── utils/           # 工具函数
│       └── types.ts         # 类型定义
├── app/                      # Next.js 应用
│   ├── language/            # 代码生成器测试页面
│   ├── node-graph/          # 节点编辑器页面
│   └── test/                # 测试页面
├── doc/                     # 文档
│   ├── AST-API-Reference.md
│   ├── TYPE-CHECK-API_Reference.md
│   └── TYPE_CHECK_TEST_REFERENCE.md
├── test/                    # 自动化测试
│   ├── test-generator/      # 代码生成器测试
│   └── test-node-graph/     # 节点编辑器测试
└── package.json
```

## 🚀 快速开始

### 安装依赖

```bash
npm install
```

### 运行开发服务器

```bash
npm run dev
```

访问 http://localhost:3000 查看应用。

## 📖 使用指南

### 1. 代码生成器使用

#### TypeScript 代码生成

```typescript
import { TypeScriptGenerator } from '@/src/language/generator/typescript-generator';
import { typescriptConfig } from '@/src/language/config/language-config';

const generator = new TypeScriptGenerator(typescriptConfig, {
  indentSize: 2,
  useSpaces: true,
  semicolons: 'always',
});

const code = generator.generate(ast);
console.log(code);
```

#### Python 代码生成

```typescript
import { PythonGenerator } from '@/src/language/generator/python-generator';

const generator = new PythonGenerator(pythonConfig);
const code = generator.generate(ast);
```

#### Go 代码生成

```typescript
import { GoGenerator } from '@/src/language/generator/go-generator';

const generator = new GoGenerator(goConfig);
const code = generator.generate(ast);
```

#### Lua 代码生成

```typescript
import { LuaGenerator } from '@/src/language/generator/lua-generator';

const generator = new LuaGenerator(luaConfig);
const code = generator.generate(ast);
```

### 2. 类型检查器使用

```typescript
import { TypeChecker } from '@/src/language/utils/type-checker';

const checker = new TypeChecker();
const result = checker.check(ast);

console.log('诊断信息:', result.diagnostics);
console.log('符号表:', result.symbolTable);
```

### 3. 节点编辑器使用

```tsx
import NodeEditor from '@/src/node-graph';
import { allNodeDefinitions } from '@/src/node-graph/examples';

export default function EditorPage() {
  return (
    <div style={{ width: '100%', height: '100vh' }}>
      <NodeEditor
        nodeDefinitions={allNodeDefinitions}
        onStateChange={(state) => console.log(state)}
      />
    </div>
  );
}
```

## 🎯 功能演示页面

### 代码生成器测试
访问 `/test/language` 查看多语言代码生成器的完整测试，包含：
- 35+ 测试用例
- 按类别分组（基础特性、表达式、控制流、类型系统等）
- 实时代码生成
- 测试结果统计

### 类型检查测试
访问 `/test/type-check` 查看类型检查器测试，包含：
- 24 个测试用例
- 14 个测试分类
- 详细的诊断信息
- 符号表展示

### 节点编辑器演示
访问 `/test/node-graph` 体验可视化节点编辑器：
- 拖拽节点
- 创建连线
- 编辑属性
- 导入导出

## 🔧 API 文档

### AST 类型系统
完整的 AST 节点类型定义，包括：
- 类型节点（Primitive, Union, Intersection, Array, Object, Tuple, Function, Generic）
- 声明节点（Variable, Function, Class, Interface, Enum, TypeAlias）
- 表达式节点（Literal, Binary, Unary, Call, Member, Array, Object, Lambda）
- 语句节点（If, For, While, Switch, Return, Throw, TryCatch）

详细文档请参考: [AST API Reference](doc/AST-API-Reference.md)

### 类型检查 API
- `TypeChecker`: 类型检查器主类
- `TypeComparator`: 类型比较器
- 类型工具函数: `isPrimitiveType`, `isUnionType`, `isArrayType` 等

详细文档请参考:
- [Type Check API](doc/TYPE-CHECK-API_Reference.md)
- [Type Check Test Reference](doc/TYPE_CHECK_TEST_REFERENCE.md)

### 代码生成器 API

所有生成器继承自 `AbstractGenerator` 基类，提供：
- `generate(ast: ASTNode): string` - 主生成方法
- 配置化的代码风格（缩进、换行、引号等）
- 可覆盖的钩子方法

## 🧪 测试

### 运行代码生成器测试

```bash
# 编译测试文件
npx tsc -p test/test-generator/tsconfig.json

# 运行测试
node test/test-generator/dist/test-runner.js
```

### 运行类型检查测试

```bash
# 通过 Web 界面
访问 http://localhost:3000/test/type-check

# 或通过 API
curl -X POST http://localhost:3000/api/type-checker-test \
  -H "Content-Type: application/json"
```

### 运行 Lint 检查

```bash
npm run lint
```

## 📦 依赖说明

### 核心依赖
- `next@16.1.6` - React 框架
- `react@19.2.3` - React 库
- `typescript@5.9.3` - TypeScript 编译器

### UI 组件
- `@ant-design/*` - Ant Design 组件库
- `lucide-react` - 图标库
- `@codemirror/*` - 代码编辑器

### 工具库
- `katex`, `react-katex` - 数学公式渲染
- `mathjs` - 数学计算
- `react-markdown` - Markdown 渲染
- `redux`, `react-redux` - 状态管理

## 🛠️ 开发指南

### 添加新的语言生成器

1. 创建新的生成器类，继承 `AbstractGenerator`
2. 实现必要的抽象方法
3. 配置语言特定的关键字和符号
4. 覆盖需要自定义的生成方法

示例：

```typescript
import { AbstractGenerator } from './abstract-generator';

export class MyLanguageGenerator extends AbstractGenerator {
  constructor(config, options) {
    const generatorConfig = {
      // 语言特定配置
      blockMode: BlockModes.BRACES,
      // ...
    };
    super(config, operatorTable, generatorConfig, options);
  }

  protected generateProgram(program: Program): string {
    // 实现程序生成逻辑
  }
}
```

### 扩展类型检查器

1. 在 `type-utils.ts` 中添加类型守卫函数
2. 在 `type-comparator.ts` 中添加类型比较逻辑
3. 在 `type-checker.ts` 中添加类型检查规则

### 自定义节点编辑器

1. 定义新的节点类型
2. 创建节点定义对象
3. 实现自定义渲染组件

## 📝 更新日志

### 已实现功能
- ✅ 多语言代码生成器（TypeScript, Python, Go, Lua）
- ✅ 完整的类型检查系统
- ✅ 可视化节点编辑器
- ✅ 35+ 代码生成器测试用例
- ✅ 24 个类型检查测试用例
- ✅ 撤销/重做功能
- ✅ 导入导出功能
- ✅ 自动保存到 LocalStorage

### 已修复问题
- ✅ 泛型类型参数生成错误
- ✅ 对象表达式嵌套显示错误
- ✅ Python 生成器缩进问题
- ✅ Go 生成器 Block 节点处理
- ✅ TypeScript 兼容性问题
- ✅ Lint 警告修复

## 🤝 贡献指南

欢迎贡献代码！请遵循以下步骤：

1. Fork 本项目
2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 开启 Pull Request

## 📄 许可证

本项目采用 MIT 许可证 - 详见 [LICENSE](LICENSE) 文件

## 🔗 相关资源

- [Next.js 文档](https://nextjs.org/docs)
- [TypeScript 文档](https://www.typescriptlang.org/docs)
- [React 文档](https://react.dev)
- [AST Explorer](https://astexplorer.net/)

## 💡 未来计划

- [ ] 支持更多语言（Java, C++, Rust 等）
- [ ] 代码格式化功能（Prettier 集成）
- [ ] 实时 AST 可视化
- [ ] 代码执行引擎
- [ ] 插件系统
- [ ] 在线编译器集成

---

**作者**: Graph Coding Team

**如有问题或建议，欢迎提交 Issue！**