@transsionfe/ai-vue-dsl

一个强大的 AI 驱动的 Vue 代码到 DSL 转换工具，专为 Wind Design 体系设计。

特性

• 🤖 多模型支持: 支持 OpenAI GPT、DeepSeek、Anthropic Claude 等多种 AI 模型
• 🔄 Vue 解析: 完整的 Vue 单文件组件解析和优化
• 📝 DSL 转换: 支持 JSON、YAML、XML 等多种 DSL 格式
• 🎨 Wind Design 支持: 原生支持 Wind Design 组件库
• ⚡ 高性能: 异步处理，支持批量转换
• 🔧 可扩展: 支持自定义 DSL 转换器和 AI 提供商

安装

npm install @transsionfe/ai-vue-dsl

快速开始

基本用法

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);

仅生成 Vue 代码

// 只生成 Vue 代码，不转换为 DSL
const { vueCode, vueComponent } = await converter.generateVueCode(
  '创建一个简单的按钮组件，支持不同尺寸和主题'
);

console.log('组件名称:', vueComponent.name);
console.log('Props:', vueComponent.props);
console.log('Events:', vueComponent.events);

Vue 代码转 DSL

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);

多模型支持

使用 DeepSeek

const deepseekConverter = new AIVueDSLConverter({
  model: {
    apiKey: 'your-deepseek-api-key',
    provider: 'deepseek',
    model: 'deepseek-chat',
    temperature: 0.8
  }
});

使用 Anthropic Claude

const claudeConverter = new AIVueDSLConverter({
  model: {
    apiKey: 'your-anthropic-api-key',
    provider: 'anthropic',
    model: 'claude-3-sonnet-20240229',
    temperature: 0.6
  }
});

使用自定义 AI 提供商

const customConverter = new AIVueDSLConverter({
  model: {
    apiKey: 'your-api-key',
    provider: 'custom',
    model: 'your-model',
    baseURL: 'https://api.your-ai.com/v1'
  }
});

配置选项

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']
  }
});

支持的 DSL 格式

JSON DSL

{
  "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 DSL

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 DSL

<?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 组件转换为其他框架的代码：

// 转换为 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' 转换器

API 参考

AIVueDSLConverter

构造函数

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(): 获取支持的格式和转换器

类型定义

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;
}

错误处理

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);
  }
}

开发

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建
npm run build

# 测试
npm test

# 发布
npm run publish

支持的 AI 模型

| 提供商 | 模型 | 说明 | |--------|------|------| | 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