介绍

表单

技术与结构

表单基于 Vue 3 与 TypeScript，使用 Formily 管理字段值、校验和条件联动。业务通过 KFormSchema 定义字段，toFormilySchema 转换后交给 KSchemaForm 渲染。

FormilyFieldAdapter 将字段标题、必填标记、说明和错误交给 KFormItem 展示；输入控件复用站内组件。文本、多行文本、选择、数值、日期、颜色和多语言字段均有对应适配器。

样式与状态

查看表单项尺寸规范图纸

输入框与按钮使用统一的主题样式。聚焦时显示主题色边框，只读和禁用状态降低强调。字段标题使用次要文字色和加粗字重，错误与描述文字同时保留。

KFormItem 默认在宽屏使用标题与控件两列布局，600px 及以下改为上下排列；labelPosition 设置为 top 时，标题始终位于控件上方。标题左对齐时必填星号放在右侧，右对齐时放在左侧。

简单表单可直接组合 KFormItem 与 K 系列控件；结构化表单使用 KSchemaForm。接口请求、权限和提交状态由业务页面处理，服务端仍须独立校验输入。

动态生成表单

修改左侧 KFormSchema JSON，点击生成即可调整字段、校验与条件联动。它使用本站的 fields 格式，不是通用 JSON Schema；支持 text、textarea、select、date、color、number 和 i18n 字段。

示例中选择“活动”会显示必填日期。还可修改 visibleWhen、disabledWhen、requiredWhen，体验显示、禁用与必填联动。生成会重置填写内容，所有操作仅在本页演示。

Schema

{
  "fields": [
    {
      "name": "title",
      "kind": "text",
      "label": "标题",
      "required": true,
      "placeholder": "输入示例标题",
      "validation": {
        "maxLength": 40
      },
      "description": "必填，最多 40 个字符。"
    },
    {
      "name": "category",
      "kind": "select",
      "label": "类型",
      "options": {
        "note": "笔记",
        "event": "活动"
      }
    },
    {
      "name": "date",
      "kind": "date",
      "label": "活动日期",
      "visibleWhen": {
        "field": "category",
        "operator": "equals",
        "value": "event"
      },
      "requiredWhen": {
        "field": "category",
        "operator": "equals",
        "value": "event"
      },
      "description": "选择活动时显示并必填。"
    },
    {
      "name": "count",
      "kind": "number",
      "label": "数量",
      "required": true,
      "validation": {
        "minimum": 1,
        "maximum": 10
      },
      "description": "范围为 1–10。"
    },
    {
      "name": "description",
      "kind": "textarea",
      "label": "说明",
      "placeholder": "可选的补充说明",
      "validation": {
        "maxLength": 200
      }
    }
  ]
}
字段需包含 name、kind、label；可配置说明、选项、只读、长度与数值范围。联动条件支持 equals、notEquals、includes、truthy。

表单预览

{
  "fields": [
    {
      "name": "title",
      "kind": "text",
      "label": "标题",
      "required": true,
      "placeholder": "输入示例标题",
      "validation": {
        "maxLength": 40
      },
      "description": "必填，最多 40 个字符。"
    },
    {
      "name": "category",
      "kind": "select",
      "label": "类型",
      "options": {
        "note": "笔记",
        "event": "活动"
      }
    },
    {
      "name": "date",
      "kind": "date",
      "label": "活动日期",
      "visibleWhen": {
        "field": "category",
        "operator": "equals",
        "value": "event"
      },
      "requiredWhen": {
        "field": "category",
        "operator": "equals",
        "value": "event"
      },
      "description": "选择活动时显示并必填。"
    },
    {
      "name": "count",
      "kind": "number",
      "label": "数量",
      "required": true,
      "validation": {
        "minimum": 1,
        "maximum": 10
      },
      "description": "范围为 1–10。"
    },
    {
      "name": "description",
      "kind": "textarea",
      "label": "说明",
      "placeholder": "可选的补充说明",
      "validation": {
        "maxLength": 200
      }
    }
  ]
}