# Smart Code Editor

智能代码编辑器 - 支持多语言、语法高亮、代码运行，可在 Vue2/3、React、原生 JS 中使用

## ✨ 特性

- 🎨 **语法高亮** - 基于 Monaco Editor，VS Code 同款编辑器
- 💡 **智能提示** - 完整的代码补全和智能提示
- 🌐 **多语言支持** - 支持 JavaScript、Python、Java、C++、Go 等多种语言
- ▶️ **代码运行** - 支持在线运行代码（JavaScript/TypeScript）
- 🎭 **主题切换** - 明暗主题随心切换
- 📱 **响应式布局** - 左右分栏，可拖拽调整大小
- 🔌 **跨框架** - Vue2/3、React、原生 JS 全支持
- ⚙️ **高度可配置** - 丰富的配置选项

## 📦 安装

```bash
npm install smart-code-editor
# 或
pnpm add smart-code-editor
# 或
yarn add smart-code-editor
```

## 🚀 快速开始

### 原生 JavaScript

```javascript
import { SmartCodeEditor } from "smart-code-editor";

const editor = new SmartCodeEditor({
  container: "#editor",
  language: "javascript",
  theme: "vs-dark",
  enableRun: true,
  onChange: (value) => console.log(value),
  onRun: (result) => console.log(result),
});
```

### Vue 3

```vue
<template>
  <SmartCodeEditor
    v-model="code"
    language="javascript"
    theme="vs-dark"
    :enable-run="true"
    @run="handleRun"
  />
</template>

<script setup>
import { ref } from "vue";
import SmartCodeEditor from "smart-code-editor/adapters/vue";

const code = ref('console.log("Hello World!")');

const handleRun = (result) => {
  console.log(result);
};
</script>
```

### React

```tsx
import { SmartCodeEditor } from "smart-code-editor/adapters/react";

function App() {
  const [code, setCode] = useState('console.log("Hello World!")');

  return (
    <SmartCodeEditor
      value={code}
      onChange={setCode}
      language="javascript"
      theme="vs-dark"
      enableRun
      onRun={(result) => console.log(result)}
    />
  );
}
```

## 📖 API 文档

### SmartCodeEditorOptions

| 参数                 | 类型                  | 默认值       | 说明             |
| -------------------- | --------------------- | ------------ | ---------------- |
| container            | HTMLElement \| string | -            | 编辑器容器       |
| language             | string                | 'javascript' | 编程语言         |
| theme                | string                | 'vs-dark'    | 编辑器主题       |
| value                | string                | ''           | 初始代码         |
| readOnly             | boolean               | false        | 只读模式         |
| showQuestionPanel    | boolean               | true         | 显示试题面板     |
| questionContent      | string                | ''           | 试题内容（HTML） |
| enableRun            | boolean               | true         | 启用代码运行     |
| enableLanguageSwitch | boolean               | true         | 允许切换语言     |
| onChange             | Function              | -            | 代码变化回调     |
| onRun                | Function              | -            | 运行完成回调     |
| onLanguageChange     | Function              | -            | 语言切换回调     |

### 方法

- `getValue()`: 获取代码
- `setValue(code)`: 设置代码
- `getLanguage()`: 获取当前语言
- `setLanguage(language)`: 设置语言
- `setTheme(theme)`: 设置主题
- `run()`: 运行代码
- `destroy()`: 销毁编辑器

## 🌈 支持的语言

- JavaScript / TypeScript
- Python
- Java
- C / C++
- Go
- HTML / CSS
- SQL
- 更多...

## ⚙️ 扩展性

### 新增语言

只需在 `src/config/languages.ts` 添加配置：

```typescript
{
  id: 'rust',
  name: 'Rust',
  monacoId: 'rust',
  icon: '🦀',
  defaultCode: 'fn main() {\n    println!("Hello, World!");\n}',
  canRun: true,
  runnerType: 'remote'
}
```

所有框架适配器自动支持新语言！

## 📄 License

ISC

## 👨‍💻 Author

haichao_kk