JSON Schema Visual Editor

一个基于 Vue3 和 Element Plus 的高效易用的可视化 JSON Schema 编辑器

English | 更新日志

最后更新: 2025-06-05

✨ 特性

🎯 核心功能

• 可视化编辑: 直观的树形结构编辑界面
• 完整类型支持: 支持所有 JSON Schema 基本类型（string, number, integer, boolean, object, array）
• 高级设置对话框: 分组化的属性配置界面，支持实时预览
• 自定义属性: 支持添加、编辑、删除自定义属性
• 必须字段管理: 支持单个字段和全选操作

🔧 JSON Schema 支持 (约65%覆盖率)

已实现的关键词

通用验证关键词

• ✅ type - 数据类型定义
• ✅ enum - 枚举值（所有类型）
• ✅ const - 常量值（所有类型）

数值类型关键词

• ✅ maximum / minimum - 最大值/最小值
• ✅ exclusiveMaximum / exclusiveMinimum - 排他性边界值

字符串类型关键词

• ✅ maxLength / minLength - 字符串长度限制
• ✅ pattern - 正则表达式模式
• ✅ format - 格式验证（date, date-time, email, hostname, ipv4, ipv6, uri）

数组类型关键词

• ✅ items - 数组元素模式
• ✅ maxItems / minItems - 数组长度限制
• ✅ uniqueItems - 元素唯一性

对象类型关键词

• ✅ properties - 属性定义
• ✅ required - 必需属性
• ✅ maxProperties / minProperties - 属性数量限制

注解关键词

• ✅ title - 标题
• ✅ description - 描述
• ✅ default - 默认值（所有类型）
• ✅ readOnly - 只读标记

🌐 国际化支持

• 中文 (zh_CN): 完整的中文界面
• 英文 (en_US): 完整的英文界面
• 动态切换: 运行时语言切换

🎨 用户界面

• 现代化设计: 基于 Element Plus 的美观界面
• 响应式布局: 适配不同屏幕尺寸
• 分组化配置: 高级设置按功能分组显示
• 实时预览: 配置变更实时显示JSON Schema结果
• 交互优化: 自动滚动、确认按钮等用户体验优化

支持自定义属性，满足特殊的需求

📦 安装

# NPM
npm install json-schema-visual-editor

# Yarn
yarn add json-schema-visual-editor

# PNPM
pnpm add json-schema-visual-editor

📋 前置依赖

确保您的项目已安装以下依赖：

npm install vue@^3.2.0 element-plus@^2.0.0 @element-plus/icons-vue@^2.0.0

🔧 基础使用

全局注册

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import JsonSchemaVisualEditor from 'json-schema-visual-editor-vue3'
import 'json-schema-visual-editor-vue3/lib/json-schema-visual-editor-vue3.css'

const app = createApp(App)
app.use(ElementPlus)
app.use(JsonSchemaVisualEditor)
app.mount('#app')

组件使用

<template>
  <div id="app">
    <json-schema-visual-editor
      :value="schema"
      :lang="'zh_CN'"
      :custom="true"
      @input="handleSchemaChange"
    />
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      schema: {
        root: {
          type: 'object',
          title: '用户信息',
          properties: {
            name: {
              type: 'string',
              title: '姓名',
              default: '',
              maxLength: 50
            },
            age: {
              type: 'integer',
              title: '年龄',
              minimum: 0,
              maximum: 150
            },
            email: {
              type: 'string',
              title: '邮箱',
              format: 'email'
            }
          },
          required: ['name', 'email']
        }
      }
    }
  },
  methods: {
    handleSchemaChange(newSchema) {
      this.schema = newSchema
      console.log('Schema updated:', newSchema)
    }
  }
}
</script>

按需引入

import { JsonSchemaVisualEditor } from 'json-schema-visual-editor-vue3'
import 'json-schema-visual-editor-vue3/lib/json-schema-visual-editor-vue3.css'

export default {
  components: {
    JsonSchemaVisualEditor
  }
}

📖 API 文档

Props 属性

| 属性 | 说明 | 类型 | 是否必须 | 默认值 | |------|------|------|----------|--------| | value | JSON Schema 数据对象，用来接收编辑后的结果 | Object | 是 | - | | disabled | 节点名称是否不可编辑 | Boolean | 否 | false | | disabledType | 节点类型是否不可选择 | Boolean | 否 | false | | root | 是否为根节点 | Boolean | 否 | true | | custom | 是否允许添加自定义属性 | Boolean | 否 | false | | lang | 国际化语言 (zh_CN 或 en_US) | String | 否 | zh_CN |

Events 事件

| 事件名 | 说明 | 回调参数 | |--------|------|----------| | input | 当 Schema 数据发生变化时触发 | (newSchema: Object) |

高级设置功能

基础信息组

• 描述 (description): 字段描述信息

验证规则组

根据字段类型动态显示：

• 数值类型: minimum, maximum, exclusiveMinimum, exclusiveMaximum
• 字符串类型: minLength, maxLength, pattern, format
• 数组类型: minItems, maxItems, uniqueItems
• 对象类型: minProperties, maxProperties

值约束组

• 默认值 (default): 支持所有类型的默认值设置
• 常量值 (const): 支持所有类型的常量值约束
• 枚举值 (enum): 支持所有类型的枚举值定义

元数据组

• 只读 (readOnly): 标记字段为只读

自定义属性组

• 支持添加、编辑、删除用户自定义属性
• 属性名和属性值的可视化编辑
• 自动滚动到新添加的属性

🛠️ 开发

本地开发

# 克隆项目
git clone https://github.com/zyqwst/json-schema-editor-vue3.git

# 安装依赖
pnpm install

# 启动开发服务器
pnpm run serve

# 构建组件库
pnpm run lib

# 代码检查
pnpm run lint

发布

# 运行发布前检查
pnpm run check

# 自动化发布（推荐）
./scripts/publish.sh patch  # 补丁版本
./scripts/publish.sh minor  # 次要版本
./scripts/publish.sh major  # 主要版本

# 手动发布
npm login
npm publish

🤝 贡献

欢迎提交 Issue 和 Pull Request！

1. Fork 本仓库
2. 创建您的特性分支 (git checkout -b feature/AmazingFeature)
3. 提交您的更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 打开一个 Pull Request

📄 许可证

本项目基于 Apache-2.0 许可证开源。

🙏 致谢

• json-schema-editor-vu3 - 原始来源
• Element Plus - 优秀的 Vue 3 UI 组件库

如果这个项目对您有帮助，请给个 ⭐️ 支持一下！