Schema 配置渲染

使用配置自动生成表单，支持自定义输入组件。

功能特性

✅ Schema 驱动的表单渲染
✅ 自定义输入组件注册
✅ 递归嵌套字段组
✅ 内置多种输入类型
✅ 灵活的布局控制

自定义输入组件

// 1. 创建自定义组件
// ColorPicker.svelte
<script lang="ts">
  let { value, onInput } = $props();
</script>

<div class="color-picker">
  <input type="color" {value}
    oninput={e => onInput(e.target.value)} />
</div>

// 2. 在 Schema 中使用
const schema: FormSchema = {
  fields: [
    {
      name: 'themeColor',
      type: 'custom',
      label: '主题颜色',
      component: ColorPicker,
      componentProps: {
        presetColors: ['#667eea', '#764ba2']
      }
    }
  ]
};

注册自定义组件类型

可以全局注册自定义组件类型：

// 创建组件注册表
const customComponents = {
  colorPicker: ColorPicker,
  tagsInput: TagsInput,
  richText: RichTextEditor
};

// 在 Schema 中使用字符串引用
{
  name: 'color',
  type: 'colorPicker', // 字符串类型
  label: '选择颜色'
}

交互演示

💡 Schema 配置

查看完整 Schema

{
  "layout": "vertical",
  "fields": [
    {
      "name": "profile",
      "type": "group",
      "label": "基础信息",
      "fields": [
        {
          "name": "profile.name",
          "type": "text",
          "label": "姓名",
          "required": true,
          "validator": {},
          "placeholder": "请输入您的姓名"
        },
        {
          "name": "profile.email",
          "type": "email",
          "label": "邮箱",
          "required": true,
          "validator": {},
          "placeholder": "your@email.com"
        },
        {
          "name": "profile.bio",
          "type": "textarea",
          "label": "个人简介",
          "placeholder": "介绍一下你自己...",
          "validator": {}
        }
      ]
    },
    {
      "name": "preferences.theme",
      "type": "custom",
      "label": "主题颜色",
      "componentProps": {
        "presetColors": [
          "#667eea",
          "#764ba2",
          "#f093fb",
          "#4facfe",
          "#43e97b"
        ]
      },
      "defaultValue": "#667eea"
    },
    {
      "name": "profile.skills",
      "type": "custom",
      "label": "技能标签",
      "componentProps": {
        "placeholder": "输入技能后按回车",
        "suggestions": [
          "JavaScript",
          "TypeScript",
          "Svelte",
          "React",
          "Vue",
          "Node.js"
        ]
      },
      "defaultValue": []
    },
    {
      "name": "profile.about",
      "type": "custom",
      "label": "详细介绍",
      "componentProps": {
        "minHeight": "200px",
        "placeholder": "详细介绍你的经历和成就..."
      },
      "defaultValue": ""
    },
    {
      "name": "preferences.notifications",
      "type": "select",
      "label": "通知设置",
      "options": [
        {
          "label": "全部通知",
          "value": "all"
        },
        {
          "label": "仅重要通知",
          "value": "important"
        },
        {
          "label": "关闭通知",
          "value": "none"
        }
      ],
      "defaultValue": "all"
    },
    {
      "name": "preferences.interests",
      "type": "checkbox",
      "label": "感兴趣的领域",
      "options": [
        {
          "label": "前端开发",
          "value": "frontend"
        },
        {
          "label": "后端开发",
          "value": "backend"
        },
        {
          "label": "移动开发",
          "value": "mobile"
        },
        {
          "label": "数据科学",
          "value": "data-science"
        },
        {
          "label": "机器学习",
          "value": "ml"
        }
      ],
      "defaultValue": []
    },
    {
      "name": "preferences.visibility",
      "type": "radio",
      "label": "资料可见性",
      "options": [
        {
          "label": "公开",
          "value": "public"
        },
        {
          "label": "仅好友",
          "value": "friends"
        },
        {
          "label": "私密",
          "value": "private"
        }
      ],
      "defaultValue": "public"
    }
  ]
}

表单数据

当前值

{}

错误信息

{}