vue-skutil-datamodel-vue3

vue-skutil-datamodel-vue3

Vue 3 数据模型组件库，基于 ant-design-vue，适配 skutil/datamodel。

A Vue 3 data model component library based on ant-design-vue, adapted for skutil/datamodel.

简介 / Introduction

中文：

vue-skutil-datamodel-vue3 是一套面向 Vue 3 的数据模型可视化定义与配置组件库。它提供了从「模型结构定义」到「数据录入与校验」的完整交互能力，内置对字符串、数字、布尔、枚举、JSON、对象、数组、矩形框、多边形等多种字段类型的支持，可与 skutil-datamodel 无缝协作。

English:

vue-skutil-datamodel-vue3 is a Vue 3 component library for visual data model definition and configuration. It provides a complete interactive flow from "model structure definition" to "data entry and validation", with built-in support for multiple field types (string, number, boolean, enum, JSON, object, array, rect, polygon) and seamless integration with skutil-datamodel.

特性 / Features

• 可视化模型定义 / Visual model definition —— 通过表格树形结构增删改查字段定义
• 多类型支持 / Multi-type support —— 9 种内置字段类型（string/number/boolean/enum/json/object/array/rect/polygon）
• 数据录入与校验 / Data entry & validation —— 基于定义自动渲染录入控件并执行校验
• 图形标注 / Shape annotation —— 支持 rect 矩形框与 polygon 多边形绘制
• Vue 3 插件式接入 / Vue 3 plugin —— 支持 app.use() 全局注册与按需引入
• ant-design-vue 风格 / ant-design-vue style —— 与 antd 组件体系视觉一致

安装 / Installation

# npm
npm install vue-skutil-datamodel-vue3

# yarn
yarn add vue-skutil-datamodel-vue3

# pnpm
pnpm add vue-skutil-datamodel-vue3

Peer Dependencies

本组件库依赖以下包，需在宿主项目中自行安装：

This library relies on the following packages, which should be installed in the host project:

{
  "vue": "^3.3.4",
  "ant-design-vue": "^3.2.20"
}

快速上手 / Quick Start

1. 全局注册 / Global Registration

import { createApp } from 'vue'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
import Datamodel from 'vue-skutil-datamodel-vue3'

const app = createApp(App)
app.use(Antd)
app.use(Datamodel)
app.mount('#app')

2. 按需引入 / On-demand Import

import { ModelDefine, ModelData } from 'vue-skutil-datamodel-vue3'

3. 使用示例 / Usage Example

<template>
  <a-tabs v-model:activeKey="activeTab">
    <!-- 模型定义 / Model Definition -->
    <a-tab-pane key="modelDefine" tab="模型定义">
      <model-define
        :def-tree="defTree"
        @add-item="addAttrDefineItem"
        @update-item="updateAttrDefineItem"
        @delete-item="deleteAttrDefineItem"
      />
    </a-tab-pane>

    <!-- 数据配置 / Data Configuration -->
    <a-tab-pane key="dataConfig" tab="数据配置">
      <model-data
        :defs="defs"
        v-model:attrs="attrs"
      />
    </a-tab-pane>
  </a-tabs>
</template>

<script>
import { util, ObjectList } from 'skutil'
import { ModelSchema } from 'skutil-datamodel'

export default {
  data() {
    return {
      activeTab: 'modelDefine',
      defs: new ObjectList([
        { name: 'image', label: '图片', type: 'object', typeInfo: {}, required: true, id: 'r8r6ac4gdkg0' },
        { parentId: 'r8r6ac4gdkg0', name: 'url', label: '地址', type: 'string', typeInfo: {}, defV: '', required: false, id: '11utlqk9jqig0' },
        { name: 'rect', label: '画框示例', type: 'rect', typeInfo: { imgUrl: '$.attrs.image.url' }, defV: { x: 0, y: 0, width: 0, height: 0 }, required: false, id: 'ii90cvr73jg0' }
      ]),
      attrs: {}
    }
  },
  computed: {
    defTree() {
      return new ModelSchema(this.defs.list).defTree
    }
  },
  methods: {
    addAttrDefineItem(item, closeDialog) {
      item.id = util.createUniqueString()
      this.defs.addItem(item)
      closeDialog()
    },
    updateAttrDefineItem(item, closeDialog) {
      this.defs.updateItem(item)
      closeDialog()
    },
    deleteAttrDefineItem(id) {
      this.defs.deleteItem(id)
    }
  }
}
</script>

支持的字段类型 / Supported Field Types

开发 / Development

# 安装依赖 / Install dependencies
yarn install

# 启动示例开发服务器 / Start example dev server
yarn dev

# 构建示例 / Build example
yarn build:example

# 构建组件库（UMD + ESM）/ Build library (UMD + ESM)
yarn build

# 代码检查与修复 / Lint and fix
yarn lint

构建产物 / Build Output

• dist/vue-skutil-datamodel.umd.js —— UMD 格式
• dist/vue-skutil-datamodel.esm.js —— ESM 格式

许可证 / License

MIT © yangqi0808