# dsl-editor

**Repository Path**: qiuyingying/dsl-editor

## Basic Information

- **Project Name**: dsl-editor
- **Description**: dsl编辑器
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-02-25
- **Last Updated**: 2026-02-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# DSL 可视化预览系统

一个基于 Vue 3 + Element Plus 的 DSL（Domain Specific Language）可视化预览系统，支持动态渲染任意符合规范的 DSL 配置文件。

## ✨ 特性

- 🎨 **动态渲染**：通过组件映射自动适配任意 DSL 配置
- 📦 **组件化架构**：17 个独立组件构成完整生态系统
- ⚡ **按需加载**：使用 Vite + 动态导入优化性能
- 🔥 **热模块替换**：开发时修改代码立即生效
- 📱 **响应式设计**：支持不同屏幕尺寸
- 🎯 **类型安全**：完整的 Props 类型定义

## 🚀 快速开始

> 💡 **新手推荐**：查看 [5 分钟快速上手指南](./docs/QUICK_START.md)

### 安装依赖

```bash
npm install
```

### 启动开发服务器

```bash
./start-dev.sh
```

或者：

```bash
npm run dev
```

访问：http://localhost:5174/

### 构建生产版本

```bash
npm run build
```

## 📖 使用方法

### 1. 上传 DSL 文件

支持三种方式：

- **拖拽上传**：将 JSON 文件拖拽到上传区域
- **点击上传**：点击上传区域选择文件
- **使用示例**：点击"用户列表示例"或"订单表单示例"按钮

### 2. 查看预览

- **左侧面板**：显示 DSL 文件信息和源码
- **中间面板**：显示 DSL 结构树（可展开/收起）
- **右侧面板**：显示实时预览（可缩放）

### 3. 交互操作

- 点击结构树节点可高亮对应区域
- 使用缩放按钮调整预览大小
- 点击"复制"按钮复制 DSL 源码
- 点击"清空"按钮重新开始

## 📝 DSL 格式

### 简单格式

```json
{
  "pageType": "data-list",
  "entity": "user",
  "sections": [
    {
      "type": "toolbar",
      "actions": [
        { "type": "search", "placeholder": "搜索用户" },
        { "type": "button", "action": "create", "label": "新增用户", "buttonType": "primary" }
      ]
    },
    {
      "type": "table",
      "fields": [
        { "field": "name", "label": "姓名", "sortable": true },
        { "field": "email", "label": "邮箱" }
      ]
    },
    {
      "type": "pagination"
    }
  ]
}
```

### 完整格式

系统会自动提取 `designDSL` 字段：

```json
{
  "meta": { ... },
  "intent": { ... },
  "prdModel": { ... },
  "designDSL": {
    "pageType": "data-list",
    "entity": "user",
    "sections": [ ... ]
  }
}
```

## 🎨 支持的组件类型

### Section 类型

| 类型 | 说明 | 示例 |
|-----|------|------|
| `toolbar` | 工具栏 | 搜索、筛选、按钮 |
| `table` | 数据表格 | 列表展示 |
| `form` | 表单 | 数据录入 |
| `pagination` | 分页器 | 分页控制 |

### Toolbar Actions

| 类型 | 说明 | 配置项 |
|-----|------|--------|
| `search` | 搜索框 | placeholder, clearable |
| `filter` | 筛选器 | label, options |
| `button` | 按钮 | label, buttonType, icon |

### Form Fields

| 类型 | 说明 | Element Plus 组件 |
|-----|------|-------------------|
| `text` | 文本输入 | el-input |
| `textarea` | 多行文本 | el-input (textarea) |
| `select` | 下拉选择 | el-select |
| `date` | 日期选择 | el-date-picker |
| `number` | 数字输入 | el-input-number |
| `switch` | 开关 | el-switch |

### Table Renderers

| 类型 | 说明 | 配置项 |
|-----|------|--------|
| `text` | 纯文本 | - |
| `enum` | 枚举映射 | enumMap |
| `tag` | 标签 | tagMap |
| `date` | 日期格式化 | format |

## 📂 项目结构

```
dsl-editor/
├── src/
│   ├── components/
│   │   ├── DslVisualizer.vue          # 主容器
│   │   ├── DynamicRenderer.vue         # 动态渲染器
│   │   ├── StructureTree.vue          # 结构树
│   │   └── sections/                  # Section 组件
│   │       ├── ToolbarSection.vue
│   │       ├── TableSection.vue
│   │       ├── FormSection.vue
│   │       ├── PaginationSection.vue
│   │       ├── actions/               # Action 组件
│   │       │   ├── SearchAction.vue
│   │       │   ├── FilterAction.vue
│   │       │   └── ButtonAction.vue
│   │       ├── fields/                # Field 组件
│   │       │   ├── TextField.vue
│   │       │   ├── TextareaField.vue
│   │       │   ├── SelectField.vue
│   │       │   ├── DateField.vue
│   │       │   ├── NumberField.vue
│   │       │   └── SwitchField.vue
│   │       └── renderers/             # Renderer 组件
│   │           ├── TextRenderer.vue
│   │           ├── EnumRenderer.vue
│   │           ├── TagRenderer.vue
│   │           └── DateRenderer.vue
│   ├── App.vue
│   └── main.js
├── examples/
│   └── user-list-design-dsl.json      # 示例 DSL
├── docs/
│   ├── ARCHITECTURE.md                # 架构文档
│   └── COMPLETION_SUMMARY.md          # 完成总结
├── package.json
├── vite.config.js
└── start-dev.sh
```

## 🔧 技术栈

- **框架**：Vue 3.4+ (Composition API)
- **UI 库**：Element Plus 2.4+
- **构建工具**：Vite 5.x
- **图标**：@element-plus/icons-vue

## 📚 文档

- [5 分钟快速上手](./docs/QUICK_START.md) ⭐ 推荐新手阅读
- [架构设计文档](./docs/ARCHITECTURE.md)
- [完成总结](./docs/COMPLETION_SUMMARY.md)

## 🎯 扩展指南

### 添加新的 Section 类型

1. 在 `src/components/sections/` 创建新组件
2. 在 `DynamicRenderer.vue` 的 `getSectionComponent` 中添加映射
3. 实现组件逻辑

### 添加新的 Field 类型

1. 在 `src/components/sections/fields/` 创建新组件
2. 在 `FormSection.vue` 的 `getFieldComponent` 中添加映射
3. 实现 v-model 双向绑定

### 添加新的 Renderer 类型

1. 在 `src/components/sections/renderers/` 创建新组件
2. 在 `TableSection.vue` 的 `getFieldRenderer` 中添加映射
3. 实现渲染逻辑

## 📄 许可证

MIT

## 👨‍💻 作者

Kiro AI Assistant

---

**开发时间**：2026-02-06  
**版本**：1.0.0