@transsionfe/ai-vue-dsl
Version:
AI-powered Vue code to DSL converter for Wind Design System
362 lines (302 loc) • 7.92 kB
Markdown
一个强大的 AI 驱动的 Vue 代码到 DSL 转换工具，专为 Wind Design 体系设计。
- 🤖 **多模型支持**: 支持 OpenAI GPT、DeepSeek、Anthropic Claude 等多种 AI 模型
- 🔄 **Vue 解析**: 完整的 Vue 单文件组件解析和优化
- 📝 **DSL 转换**: 支持 JSON、YAML、XML 等多种 DSL 格式
- 🎨 **Wind Design 支持**: 原生支持 Wind Design 组件库
- ⚡ **高性能**: 异步处理，支持批量转换
- 🔧 **可扩展**: 支持自定义 DSL 转换器和 AI 提供商
```bash
npm install @transsionfe/ai-vue-dsl
```
```typescript
import { AIVueDSLConverter } from '@transsionfe/ai-vue-dsl';
// 创建转换器实例 (使用 OpenAI)
const converter = new AIVueDSLConverter({
model: {
apiKey: 'your-openai-api-key',
provider: 'openai',
model: 'gpt-4'
}
});
// 完整转换流程：GPT → Vue → DSL
const result = await converter.convert(
'创建一个用户信息卡片组件，包含头像、姓名、邮箱和编辑按钮',
'json'
);
console.log('Vue 代码:', result.vueCode);
console.log('DSL 输出:', result.dslOutput.content);
```
```typescript
// 只生成 Vue 代码，不转换为 DSL
const { vueCode, vueComponent } = await converter.generateVueCode(
'创建一个简单的按钮组件，支持不同尺寸和主题'
);
console.log('组件名称:', vueComponent.name);
console.log('Props:', vueComponent.props);
console.log('Events:', vueComponent.events);
```
```typescript
const vueCode = `
<template>
<div class="user-card">
<img :src="avatar" :alt="name" />
<h3>{{ name }}</h3>
<p>{{ email }}</p>
<button @click="handleEdit">编辑</button>
</div>
</template>
<script>
export default {
name: 'UserCard',
props: {
avatar: String,
name: String,
email: String
},
methods: {
handleEdit() {
this.$emit('edit');
}
}
}
</script>
`;
const dslOutput = await converter.vueToDSL(vueCode, 'yaml');
console.log(dslOutput.content);
```
```typescript
const deepseekConverter = new AIVueDSLConverter({
model: {
apiKey: 'your-deepseek-api-key',
provider: 'deepseek',
model: 'deepseek-chat',
temperature: 0.8
}
});
```
```typescript
const claudeConverter = new AIVueDSLConverter({
model: {
apiKey: 'your-anthropic-api-key',
provider: 'anthropic',
model: 'claude-3-sonnet-20240229',
temperature: 0.6
}
});
```
```typescript
const customConverter = new AIVueDSLConverter({
model: {
apiKey: 'your-api-key',
provider: 'custom',
model: 'your-model',
baseURL: 'https://api.your-ai.com/v1'
}
});
```
```typescript
const converter = new AIVueDSLConverter('your-api-key', {
model: {
provider: 'openai', // 'openai' | 'deepseek' | 'anthropic' | 'custom'
model: 'gpt-4',
temperature: 0.7,
maxTokens: 2000,
baseURL: 'https://api.openai.com/v1' // 可选，自定义 API 地址
},
vue: {
version: '3',
composition: true,
typescript: false,
windDesign: true,
uiLibrary: 'ant-design' // 可选 'wind-design' | 'ant-design' | 'element-ui' | ...
},
dsl: {
format: 'json',
includeMetadata: true,
customTransformers: ['wind-design']
}
});
```
```json
{
"type": "vue-component",
"name": "UserCard",
"template": {
"content": "<div class=\"user-card\">...</div>",
"slots": ["default"]
},
"script": {
"content": "export default {...}",
"props": {
"avatar": {
"type": "String",
"required": false
}
},
"events": ["edit"]
}
}
```
```yaml
type: vue-component
name: UserCard
template:
content: |
<div class="user-card">
<img :src="avatar" :alt="name" />
<h3>{{ name }}</h3>
</div>
slots:
- default
script:
content: |
export default {
name: 'UserCard',
props: {
avatar: String,
name: String
}
}
props:
avatar:
type: String
required: false
events:
- edit
```
```xml
<?xml version="1.0" encoding="UTF-8"?>
<vue-component>
<name>UserCard</name>
<template>
<content><![CDATA[<div class="user-card">...</div>]]></content>
<slots>
<slot>default</slot>
</slots>
</template>
<script>
<content><![CDATA[export default {...}]]></content>
<props>
<prop name="avatar">
<type>String</type>
<required>false</required>
</prop>
</props>
<events>
<event>edit</event>
</events>
</script>
</vue-component>
```
支持将 Vue 组件转换为其他框架的代码：
```typescript
// 转换为 React JSX
const reactCode = await converter.vueToDSL(vueCode, 'custom');
// 使用 'react' 转换器
// 转换为 Angular 模板
const angularCode = await converter.vueToDSL(vueCode, 'custom');
// 使用 'angular' 转换器
// 转换为 Svelte 组件
const svelteCode = await converter.vueToDSL(vueCode, 'custom');
// 使用 'svelte' 转换器
```
```typescript
new AIVueDSLConverter(apiKey: string, options?: ConversionOptions)
```
#### 方法
- `convert(description: string, dslFormat?: string)`: 完整转换流程
- `generateVueCode(description: string)`: 仅生成 Vue 代码
- `vueToDSL(vueCode: string, dslFormat?: string)`: Vue 代码转 DSL
- `validateVueCode(vueCode: string)`: 验证 Vue 代码
- `formatVueCode(vueCode: string)`: 格式化 Vue 代码
- `getStats()`: 获取支持的格式和转换器
### 类型定义
```typescript
interface ConversionOptions {
model?: {
apiKey: string;
provider?: 'openai' | 'deepseek' | 'anthropic' | 'custom';
model?: string;
temperature?: number;
maxTokens?: number;
baseURL?: string;
};
vue?: {
version?: '2' | '3';
composition?: boolean;
typescript?: boolean;
windDesign?: boolean;
uiLibrary?: string; // 新增 uiLibrary 字段
};
dsl?: {
format?: 'json' | 'yaml' | 'xml';
includeMetadata?: boolean;
customTransformers?: string[];
};
}
interface ModelConfig {
provider: 'openai' | 'deepseek' | 'anthropic' | 'custom';
model: string;
apiKey: string;
baseURL?: string;
headers?: Record<string, string>;
temperature?: number;
maxTokens?: number;
}
```
```typescript
try {
const result = await converter.convert('创建一个组件');
} catch (error) {
if (error.message.includes('API 调用失败')) {
console.error('AI API 调用失败，请检查 API Key 和网络连接');
} else if (error.message.includes('Vue 代码解析')) {
console.error('Vue 代码解析失败，请检查代码格式');
} else {
console.error('转换失败:', error.message);
}
}
```
```bash
npm install
npm run dev
npm run build
npm test
npm run publish
```
| 提供商 | 模型 | 说明 |
|--------|------|------|
| OpenAI | gpt-4, gpt-4-turbo, gpt-3.5-turbo | 最强大的通用 AI 模型 |
| DeepSeek | deepseek-chat, deepseek-coder | 专注于代码生成的 AI 模型 |
| Anthropic | claude-3-opus, claude-3-sonnet, claude-3-haiku | 安全可靠的 AI 助手 |
| Custom | 自定义模型 | 支持自定义 AI 提供商 |
MIT