qc-config-schema-render

一个基于 Formily 的 React 组件，用于从 JSON Schema 渲染表单。完全自包含，无需额外配置。

特性

• 🚀 基于 Formily 2.0 构建
• 📝 支持标准 JSON Schema 格式
• 🎨 支持自定义样式和主题
• 🔧 支持表单验证和联动
• 📱 响应式设计
• 🏷️ 支持分组和标签显示
• 🔗 支持引用链接显示
• 🎯 TypeScript 支持
• 📦 完全自包含，所有依赖内置
• 🔄 支持 forwardRef 和 useImperativeHandle

安装

npm install qc-config-schema-render
# 或
yarn add qc-config-schema-render

使用

基础用法

import React from 'react'
import { SchemaRenderForm } from 'qc-config-schema-render'

const schema = {
  type: 'object',
  title: '用户信息',
  properties: {
    name: {
      type: 'string',
      title: '姓名'
    },
    age: {
      type: 'number',
      title: '年龄'
    }
  }
}

const App = () => {
  return (
    <SchemaRenderForm
      schema={schema}
      onSubmit={(values) => console.log(values)}
    />
  )
}

高级功能

分组显示

const schema = {
  type: 'object',
  title: '配置管理',
  properties: {
    preConfig: {
      title: '事前配置',
      type: 'string',
      'x-data': {
        group: '事前'
      }
    },
    duringConfig: {
      title: '事中配置',
      type: 'string',
      'x-data': {
        group: '事中'
      }
    },
    postConfig: {
      title: '事后配置',
      type: 'string',
      'x-data': {
        group: '事后'
      }
    }
  }
}

Tag 组件

const schema = {
  type: 'object',
  properties: {
    tagField: {
      title: '标签字段',
      'x-data': {
        component: 'tag',
        group: '事前'
      }
    }
  }
}

引用链接

const schema = {
  type: 'object',
  properties: {
    fieldWithLinks: {
      type: 'string',
      title: '带链接的字段',
      'x-reference-links': [
        {
          name: '相关文档',
          url: 'https://example.com/docs'
        },
        {
          name: 'API 参考',
          url: 'https://example.com/api'
        }
      ]
    }
  }
}

使用 forwardRef

import React, { useRef } from 'react'
import { SchemaRenderForm, SchemaRenderFormRef } from 'qc-config-schema-render'

const MyComponent = () => {
  const formRef = useRef<SchemaRenderFormRef>(null)

  const handleSubmit = async () => {
    try {
      await formRef.current?.onSubmit()
      console.log('提交成功')
    } catch (error) {
      console.error('提交失败:', error)
    }
  }

  return (
    <div>
      <SchemaRenderForm
        ref={formRef}
        schema={schema}
        hiddenSubmitBtn={true}
      />
      <button onClick={handleSubmit}>外部提交</button>
    </div>
  )
}

兼容性

• ✅ Create React App - 开箱即用
• ✅ Next.js - 开箱即用
• ✅ Vite - 开箱即用
• ✅ UMI - 开箱即用
• ✅ Webpack - 开箱即用
• ✅ 任何 React 项目 - 开箱即用

优势

🎯 零配置

• 无需配置 webpack、babel 或任何构建工具
• 无需安装额外的依赖
• 无需配置 MFSU、externals 等复杂选项

📦 自包含

• 所有 Formily 和 Antd 依赖都内置在包中
• 不会与项目现有依赖冲突
• 版本锁定，确保稳定性

🚀 即插即用

npm install qc-config-schema-render

import { SchemaRenderForm } from 'qc-config-schema-render'
// 直接使用，无需任何配置！

API

SchemaRenderFormProps

| 属性 | 类型 | 默认值 | 描述 | |------|------|--------|------| // generated by ai | 属性 | 类型 | 默认值 | 描述 | |------|------|--------|------| | appId | number | 1 | 应用ID | | envType | number | - | 环境类型 (1: 开发环境, 2: 测试环境, 3: 沙箱环境, 4: 生产环境) | | schemaKey | string | - | Schema Key | | tenantType | number | - | 租户类型 | | tenantKey | string \| number | - | 租户Key(嵌到质检大脑取线体ID（lineFlowId）) | | schema | StandardJsonSchema | - | JSON Schema 配置 | | initialValues | any | - | 初始值 | | onSubmit | (values: any) => void | - | 提交回调 | | showRealtimeData | boolean | true | 显示实时数据 | | hiddenSubmitBtn | boolean | false | 隐藏提交按钮 |

SchemaRenderFormRef

| 方法 | 类型 | 描述 | |------|------|------| | onSubmit | () => Promise<void> | 异步提交表单，返回 Promise |

类型定义

// 标准 JSON Schema
interface StandardJsonSchema {
  type: string
  title?: string
  properties?: Record<string, any>
  // ... 其他标准属性
}

// 引用链接
interface ReferenceLink {
  name: string
  url: string
}

// x-data 扩展
interface XData {
  component?: 'tag'
  group?: string
  position?: 'top' | 'bottom'
  'reference-links'?: ReferenceLink[]
}

许可证

MIT