create-yss-spec 2.1.9 → 2.1.11

package/template/.cursor/skills/yss-formily/SKILL.md

@@ -0,0 +1,304 @@
+---
+name: yss-formily
+description: Use when a task involves creating or modifying YssFormily or YFormily schema-driven forms, search forms, detail views, field linkage, async validation, dynamic arrays, step forms, or custom slot fields.
+---
+
+# YssFormily
+
+This skill is the working guide for `YssFormily` in this repository.
+Use it when the task involves:
+
+- creating or editing a `YssFormily` / `YFormily` form
+- writing or refactoring a Formily schema
+- implementing add/edit/detail forms with one shared schema
+- building field linkage, reactions, form `effects`, async validation
+- adding custom slot fields such as Monaco, SQL, rich text, custom hints
+- debugging why a form does not submit, does not react, or renders incorrectly
+
+`YssFormily` in this project is a YSS wrapper built on top of the Ant Design Vue ecosystem.
+When reasoning about component props, event names, interaction behavior, and rendered form controls, treat Ant Design Vue as the underlying UI behavior model.
+
+## Source of truth
+
+Read the scenario map first:
+
+1. [references/examples.md](references/examples.md)
+
+If the user asks for a concrete pattern, inspect the closest existing YSS form page or example in the repository and match its local convention.
+
+## Hard rules
+
+### Imports
+
+Business code should import the wrapper component from `@yss-ui/components`.
+Do not build business forms by directly importing Formily UI components from React packages.
+
+Preferred imports:
+
+```ts
+import { YssFormily, YFormily, type ISchema } from "@yss-ui/components";
+import {
+  createForm,
+  onFieldValueChange,
+  onFormSubmit,
+  onFormSubmitFailed,
+} from "@formily/core";
+```
+
+Avoid these imports unless a file already depends on them for a narrow advanced case:
+
+- `@formily/antd`
+- `@formily/antd-v3`
+- direct UI field imports from `@formily/antdv` for ordinary business forms
+
+`YssFormily` already wraps the common Ant Design Vue Formily components and project-specific adapters.
+Its field event behavior should be understood through Ant Design Vue conventions first, then the YSS wrapper conventions.
+
+### Prefer one schema for add, edit, detail
+
+Default approach:
+
+- `mode=0`: create
+- `mode=1`: edit
+- `mode=2`: detail
+
+Do not fork separate edit/detail implementations unless the UI is materially different.
+
+### Use `v-model` as the main value source
+
+`initial-values` is initialization only.
+For fetched data, editing state, and mode switching, prefer `v-model` or instance `setValues`.
+
+## Default build pattern
+
+Start with this shape unless the existing page already uses a different local convention:
+
+```ts
+const schema: ISchema = {
+  type: "object",
+  properties: {
+    layout: {
+      type: "void",
+      "x-component": "FormLayout",
+      "x-component-props": {
+        layout: "horizontal",
+        labelWidth: 120,
+      },
+      properties: {
+        grid: {
+          type: "void",
+          "x-component": "FormGrid",
+          properties: {
+            fieldName: {
+              type: "string",
+              title: "字段名",
+              "x-decorator": "FormItem",
+              "x-component": "Input",
+            },
+          },
+        },
+      },
+    },
+  },
+};
+```
+
+Interpretation:
+
+- `FormLayout` controls label layout and size
+- `FormGrid` controls responsive columns
+- fields normally use `FormItem`
+
+Do not hand-build layout with ad hoc wrapper divs if `FormLayout`, `FormGrid`, `GroupHeader`, or `AutoButtonGroup` already solve it.
+
+## Choose the right mechanism
+
+Use this decision order:
+
+1. Static field structure and basic validation:
+   put it in `schema`
+2. Visibility, disabled state, or simple dependency:
+   use `x-visible`, `x-disabled`, `x-reactions`
+3. Reusable event handlers or cross-field helper functions:
+   inject through `scope`
+4. Form-wide side effects, submit lifecycle, async orchestration:
+   use `createForm({ effects })`
+5. Rich custom rendering:
+   use `Slot` in edit mode and `detail-*` slots in detail mode
+
+### Event selection
+
+Event names follow the underlying Ant Design Vue component behavior.
+
+- text input: prefer `x-component-props.onUpdate:value`
+- select, radio, switch, date picker: usually `x-component-props.onChange`
+- submit: `Submit.x-component-props.onSubmit`
+
+Do not attach multiple equivalent listeners to the same field unless the existing component requires it.
+
+### `x-reactions` vs `scope` vs `effects`
+
+Use `x-reactions` for declarative field-to-field linkage:
+
+- show/hide
+- disable/enable
+- reset a sibling field
+- update a dependent enum or datasource
+
+Use `scope` for local handlers when the schema needs to call project code:
+
+- remote search
+- custom validation helper
+- helper function reused by multiple fields
+
+Use `effects` for form-level orchestration:
+
+- global submit success or failure behavior
+- multi-field coordination
+- async side effects not tied cleanly to one field
+- analytics or global notification hooks
+
+## Mode and detail view
+
+When `mode=2`, `YssFormily` can render as a `Descriptions`-style detail view.
+
+Default detail rendering already handles:
+
+- `enum` to label
+- `DatePicker` to `YYYY-MM-DD`
+- boolean or `Switch` to “是/否”
+- arrays joined by `、`
+- empty values as `-`
+
+Use `detail-options` to control layout.
+Important constraint from the component doc:
+
+- `responsive` is `true` by default
+- when `responsive=true`, `columns` is ignored
+- if you need a fixed max of two columns, set `maxColumns: 2` or `responsive: false`
+
+### Detail slot naming
+
+For detail mode custom rendering, use:
+
+```text
+#detail-<path>
+```
+
+Replace dots with hyphens.
+
+Examples:
+
+- `email` -> `#detail-email`
+- `user.email` -> `#detail-user-email`
+
+## Slot strategy
+
+For custom edit-mode content inside the schema, use:
+
+```ts
+'x-component': 'Slot',
+'x-component-props': { name: 'sql' }
+```
+
+Then provide:
+
+```vue
+<template #sql="{ value, onChange }">...</template>
+```
+
+For the same field in detail mode, provide:
+
+```vue
+<template #detail-sql="{ value }">...</template>
+```
+
+This is the preferred pattern for:
+
+- Monaco editors
+- SQL or JSON editors
+- rich text or code previews
+- custom helper blocks
+
+## Layout guidance
+
+Use these built-ins before writing custom wrappers:
+
+- `FormLayout`
+- `FormGrid`
+- `GroupHeader`
+- `AutoButtonGroup`
+- `FormCollapse`
+- `FormStep`
+- `ArrayItems`
+
+Recommended habits:
+
+- use `x-decorator-props.gridSpan` for wide fields
+- use `GroupHeader` for section titles instead of ad hoc headings
+- use `AutoButtonGroup` for aligned action areas
+- set shared grid behavior through `grid-defaults` at component usage level
+
+## Instance methods
+
+When page logic needs imperative control, get a component ref and use:
+
+- `getValues`
+- `setValues`
+- `submit`
+- `setFieldState`
+- `form`
+
+Prefer these methods over reaching into internal implementation details.
+
+## Working sequence for implementation
+
+When asked to build or refactor a form, follow this sequence:
+
+1. Read the existing page and find current mode, data source, and submit flow.
+2. Read the canonical Formily doc and the most relevant demo.
+3. Design the schema first:
+   fields, layout, sections, buttons.
+4. Add validation and enum handling.
+5. Add simple linkage with `x-visible` / `x-disabled` / `x-reactions`.
+6. Add `scope` handlers or `effects` only where schema alone is insufficient.
+7. If detail mode exists, verify `mode=2` rendering and slot coverage.
+8. Verify submit behavior, especially the `Submit` handler path.
+
+## Common mistakes to avoid
+
+- Using `initial-values` as if it were reactive state
+- Splitting add/edit/detail into separate unrelated schemas without necessity
+- Writing large business logic inline in schema expressions
+- Forgetting that detail-mode slot naming is fixed as `detail-<path>`
+- Expecting `detail-options.columns` to work while `responsive=true`
+- Using custom layout divs where `FormGrid` and `gridSpan` should be used
+- Solving complex form coordination with scattered component events instead of `effects`
+
+## When to open demos
+
+Open the matching demo before writing code for these scenarios:
+
+- dynamic show or hide
+- dynamic disable
+- custom slot
+- group or collapse section
+- effects
+- async validation
+- multi-dependency linkage
+- submit failure handling
+- steps
+- dynamic array
+
+The example index is in:
+[references/examples.md](references/examples.md)
+
+## Output expectation
+
+When using this skill, produce code that is:
+
+- schema-first
+- mode-aware
+- concise in business pages
+- aligned with `@yss-ui/components`
+- anchored to existing YSS docs and demos instead of inventing a parallel pattern

package/template/.cursor/skills/yss-formily/agents/openai.yaml

@@ -0,0 +1,5 @@
+version: 1
+interface:
+  display_name: "YSS Formily"
+  short_description: "表单 schema、联动、详情渲染与 Slot 规范"
+  default_prompt: "Use $yss-formily to build or refactor a YssFormily schema-driven form with linkage, validation, and detail rendering."

package/template/.cursor/skills/yss-formily/references/examples.md

@@ -0,0 +1,65 @@
+# YssFormily 示例索引
+
+这个文件不重复解释 Formily 概念，只负责把常见场景映射到仓库里的权威文档和 demo。
+
+## 先看哪里
+
+1. 组件总文档  
+   [`${base_project}/.trae/skills/yss-ui/assets/docs/components/formily.md`](${base_project}/.trae/skills/yss-ui/assets/docs/components/formily.md)
+2. 对应 demo  
+   `${base_project}/.trae/skills/yss-ui/assets/demos/formily/*.vue`
+
+## 场景到 demo 的映射
+
+| 场景               | 先看 demo                                                                                               | 备注                     |
+| ------------------ | ------------------------------------------------------------------------------------------------------- | ------------------------ |
+| 基础 schema 表单   | [`basic.vue`](${base_project}/.trae/skills/yss-ui/assets/demos/formily/basic.vue)                       | 最小可用骨架             |
+| 标签布局/对齐      | [`align.vue`](${base_project}/.trae/skills/yss-ui/assets/demos/formily/align.vue)                       | `FormLayout` 用法        |
+| 栅格布局           | [`grid.vue`](${base_project}/.trae/skills/yss-ui/assets/demos/formily/grid.vue)                         | `FormGrid` 与 `gridSpan` |
+| 动态显隐           | [`dynamic.vue`](${base_project}/.trae/skills/yss-ui/assets/demos/formily/dynamic.vue)                   | `x-visible`              |
+| 动态禁用           | [`disabled.vue`](${base_project}/.trae/skills/yss-ui/assets/demos/formily/disabled.vue)                 | `x-disabled`             |
+| 标签提示           | [`label-tip.vue`](${base_project}/.trae/skills/yss-ui/assets/demos/formily/label-tip.vue)               | `tooltip`                |
+| 自定义插槽         | [`slot.vue`](${base_project}/.trae/skills/yss-ui/assets/demos/formily/slot.vue)                         | `Slot` 组件              |
+| 分组               | [`group.vue`](${base_project}/.trae/skills/yss-ui/assets/demos/formily/group.vue)                       | `GroupHeader` 与详情插槽 |
+| 折叠表单           | [`collapse.vue`](${base_project}/.trae/skills/yss-ui/assets/demos/formily/collapse.vue)                 | 分区折叠                 |
+| 普通联动           | [`linkage.vue`](${base_project}/.trae/skills/yss-ui/assets/demos/formily/linkage.vue)                   | 字段依赖                 |
+| 新增/编辑/查看三态 | [`modes.vue`](${base_project}/.trae/skills/yss-ui/assets/demos/formily/modes.vue)                       | `mode` 与详情视图        |
+| 远程字典翻译       | [`remote-enum.vue`](${base_project}/.trae/skills/yss-ui/assets/demos/formily/remote-enum.vue)           | 远程选项与展示           |
+| 自定义业务组件     | [`custom-component.vue`](${base_project}/.trae/skills/yss-ui/assets/demos/formily/custom-component.vue) | `components` 扩展        |
+| 行内事件           | [`events-inline.vue`](${base_project}/.trae/skills/yss-ui/assets/demos/formily/events-inline.vue)       | 轻量处理                 |
+| scope 事件         | [`events-scope.vue`](${base_project}/.trae/skills/yss-ui/assets/demos/formily/events-scope.vue)         | 可复用逻辑               |
+| effects            | [`effects.vue`](${base_project}/.trae/skills/yss-ui/assets/demos/formily/effects.vue)                   | 表单级副作用             |
+| 异步校验           | [`async-validate.vue`](${base_project}/.trae/skills/yss-ui/assets/demos/formily/async-validate.vue)     | 优先配合 `scope`         |
+| 多依赖联动         | [`linkage-multi.vue`](${base_project}/.trae/skills/yss-ui/assets/demos/formily/linkage-multi.vue)       | `scope + effects`        |
+| 提交失败兜底       | [`submit-failed.vue`](${base_project}/.trae/skills/yss-ui/assets/demos/formily/submit-failed.vue)       | 统一失败提示             |
+| 帮助文案/插槽混合  | [`helper-slot.vue`](${base_project}/.trae/skills/yss-ui/assets/demos/formily/helper-slot.vue)           | 说明区与自定义块         |
+| 分步表单           | [`steps.vue`](${base_project}/.trae/skills/yss-ui/assets/demos/formily/steps.vue)                       | `FormStep`               |
+| 动态数组           | [`dynamic-array.vue`](${base_project}/.trae/skills/yss-ui/assets/demos/formily/dynamic-array.vue)       | `ArrayItems`             |
+
+## 推荐查找顺序
+
+### 做新表单
+
+1. 看 [`basic.vue`](${base_project}/.trae/skills/yss-ui/assets/demos/formily/basic.vue)
+2. 看 [`grid.vue`](${base_project}/.trae/skills/yss-ui/assets/demos/formily/grid.vue)
+3. 需要模式切换时看 [`modes.vue`](${base_project}/.trae/skills/yss-ui/assets/demos/formily/modes.vue)
+
+### 做联动
+
+1. 简单显隐先看 [`dynamic.vue`](${base_project}/.trae/skills/yss-ui/assets/demos/formily/dynamic.vue)
+2. 禁用先看 [`disabled.vue`](${base_project}/.trae/skills/yss-ui/assets/demos/formily/disabled.vue)
+3. 多字段或表单级联动看 [`linkage-multi.vue`](${base_project}/.trae/skills/yss-ui/assets/demos/formily/linkage-multi.vue) 和 [`effects.vue`](${base_project}/.trae/skills/yss-ui/assets/demos/formily/effects.vue)
+
+### 做复杂字段
+
+1. 先看 [`slot.vue`](${base_project}/.trae/skills/yss-ui/assets/demos/formily/slot.vue)
+2. 再看 [`custom-component.vue`](${base_project}/.trae/skills/yss-ui/assets/demos/formily/custom-component.vue)
+3. 有查看态时补看 [`group.vue`](${base_project}/.trae/skills/yss-ui/assets/demos/formily/group.vue) 或 [`modes.vue`](${base_project}/.trae/skills/yss-ui/assets/demos/formily/modes.vue)
+
+## 实操提醒
+
+- 编辑态自定义渲染优先 `Slot`
+- 查看态自定义渲染固定走 `#detail-<path>`
+- 详情列数先确认 `responsive` 是否开启
+- 事件名以底层 Ant Design Vue 组件为准
+- 如果只是不确定写法，不要猜，直接打开对应 demo

package/template/.cursor/skills/yss-formily-schema-generator/SKILL.md

@@ -0,0 +1,189 @@
+---
+name: yss-formily-schema-generator
+description: Use when the user wants YssFormily JSON Schema or rendered form code from natural-language requirements, screenshots, local images, mockups, or Figma designs.
+---
+
+# YssFormily Schema Generator
+
+Use this skill to turn upstream input into downstream YssFormily form artifacts.
+
+Supported input forms:
+
+- user text descriptions
+- product or UX requirements
+- screenshots and local images
+- Figma links or node-based design references
+
+Expected output forms:
+
+- a YssFormily JSON Schema or `ISchema`
+- a recommended `v-model` data shape
+- optional `scope`, `effects`, and slot plan
+- optional Vue render snippet showing how to mount `YssFormily`
+
+This skill designs the schema.
+For implementation rules and exact YssFormily behavior, also read:
+
+- [yss-formily](../yss-formily/SKILL.md)
+
+For conversion workflow and field mapping, read:
+
+- [references/workflow.md](references/workflow.md)
+
+## Activation rules
+
+Use this skill when the request is any of the following:
+
+- “根据需求描述生成表单 schema”
+- “根据原型图生成 YssFormily”
+- “根据图片/截图还原表单”
+- “根据 Figma 生成表单 JSON Schema”
+- “把业务字段整理成 YssFormily schema”
+- “输出 schema 和渲染代码”
+
+## Core principle
+
+Do not mirror the visual surface blindly.
+Translate the input into a stable form model:
+
+1. business intent
+2. field semantics
+3. validation and dependency rules
+4. layout grouping
+5. YssFormily schema
+
+The schema must reflect business meaning, not just pixel arrangement.
+
+## Input-specific workflow
+
+### Text requirement
+
+Extract, in order:
+
+1. form purpose
+2. mode: query, create, edit, detail, mixed
+3. sections or groups
+4. fields
+5. required rules
+6. options or dictionaries
+7. linkage rules
+8. submit and action area
+
+If some details are missing, make reasonable defaults and state the assumptions.
+
+### Screenshot or image
+
+Treat image understanding as approximate.
+First identify:
+
+- section boundaries
+- labels
+- control types
+- action buttons
+- required markers
+- visible dependency hints
+
+Infer likely field types from UI controls, but do not overclaim hidden business rules from appearance alone.
+If the image contains only visual cues and no validation semantics, generate a schema skeleton and explicitly mark uncertain fields.
+
+### Figma input
+
+When a Figma link or node is provided, use the Figma workflow to inspect the design first.
+Extract:
+
+- field labels
+- control kinds
+- layout groups
+- helper text
+- required indicators
+- readonly versus editable patterns
+- footer actions
+
+Then convert that structure to YssFormily, following local YSS conventions instead of raw design-tool naming.
+
+## Required outputs
+
+Unless the user asks for less, produce these artifacts:
+
+1. schema
+2. model shape
+3. assumptions
+4. open questions only if they block correctness
+
+If the user asks for code generation, also produce:
+
+5. `scope` plan
+6. `effects` plan if needed
+7. Vue usage snippet
+
+## Schema design rules
+
+Always align with `yss-formily`:
+
+- wrapper component is `YssFormily` or `YFormily`
+- schema is `FormLayout -> FormGrid -> fields`
+- use `FormItem` for ordinary fields
+- prefer one shared schema for create/edit/detail when feasible
+- for detail rendering, plan `mode=2` and `detail-*` slots where needed
+- rich custom input uses `Slot`
+
+Do not emit schema that depends on React Formily UI packages.
+Treat Ant Design Vue semantics as the underlying component behavior.
+
+## Output quality bar
+
+A good generated schema should:
+
+- have stable field keys
+- use domain-oriented group names
+- distinguish required from optional fields
+- choose plausible component types
+- reflect obvious linkage and readonly behavior
+- leave non-inferable business rules as assumptions instead of hallucinating them
+
+## Generation sequence
+
+Follow this sequence every time:
+
+1. Classify the input source.
+2. Extract business structure.
+3. Normalize field list.
+4. Decide field types and components.
+5. Decide sections and layout spans.
+6. Identify validation, enum, and linkage requirements.
+7. Produce YssFormily schema.
+8. Produce render snippet if requested.
+9. Call out assumptions and uncertain inferences.
+
+## When the input is incomplete
+
+Use these defaults unless the existing code or user input says otherwise:
+
+- text fields -> `Input`
+- long description -> `Input.TextArea`
+- boolean toggle -> `Switch`
+- single choice -> `Select` or `Radio.Group`
+- date -> `DatePicker`
+- grouped sections -> `GroupHeader`
+- footer buttons -> `AutoButtonGroup`
+
+Prefer conservative defaults over speculative complexity.
+
+## Do not do these things
+
+- Do not invent backend dictionaries that were never described.
+- Do not infer hidden async validation from visuals alone.
+- Do not flatten all fields into one group if the input clearly has sections.
+- Do not produce only a screenshot-level description when the user asked for schema.
+- Do not skip assumptions when confidence is low.
+
+## Recommended final structure
+
+When delivering a full conversion, prefer this output order:
+
+1. brief understanding
+2. assumptions
+3. field model
+4. schema
+5. optional render snippet
+6. optional next-step questions

package/template/.cursor/skills/yss-formily-schema-generator/agents/openai.yaml

@@ -0,0 +1,5 @@
+version: 1
+interface:
+  display_name: "YSS Formily Schema Generator"
+  short_description: "从需求、截图或 Figma 生成表单 schema"
+  default_prompt: "Use $yss-formily-schema-generator to turn requirements, screenshots, or Figma into a YssFormily schema and render plan."

package/template/.cursor/skills/yss-formily-schema-generator/assets/java-sdk/ExampleUsage.java

@@ -0,0 +1,111 @@
+package com.yss.formily.sdk;
+
+import java.util.LinkedHashMap;
+import java.util.Map;
+
+/**
+ * Example for building a YssFormily definition with:
+ * mode switching, detail options, scope/effects metadata, remote dicts,
+ * events, async validation, and multi-dependency linkage.
+ */
+public class ExampleUsage {
+
+    public static void main(String[] args) {
+        Map<String, Object> initialValues = new LinkedHashMap<>();
+        initialValues.put("enabled", Boolean.TRUE);
+
+        Map<String, Object> modelShape = new LinkedHashMap<>();
+        modelShape.put("processName", "");
+        modelShape.put("processType", null);
+        modelShape.put("enabled", Boolean.TRUE);
+        modelShape.put("approvalMode", null);
+        modelShape.put("approverType", null);
+        modelShape.put("description", "");
+        modelShape.put("formSchema", "");
+
+        YssFormilyDsl.YssFormDefinition definition = YssFormilyDsl.form()
+            .mode(YssFormilyDsl.Mode.EDIT)
+            .horizontal(120)
+            .gridDefaults(3, 1, 260, 16, 0)
+            .initialValues(initialValues)
+            .modelShape(modelShape)
+            .scopeKeys("onSubmit", "dicts", "validateProcessName")
+            .components("YMonaco")
+            .detailOption("bordered", true)
+            .detailOption("maxColumns", 2)
+            .fieldEffects(
+                YssFormilyDsl.onFieldValueChange("processType", "{{ onProcessTypeChanged }}"),
+                YssFormilyDsl.onFieldValueChange("approvalMode", "{{ onApprovalModeChanged }}")
+            )
+            .effects(
+                YssFormilyDsl.onFormSubmit("{{ onFormSubmit }}"),
+                YssFormilyDsl.onFormSubmitFailed("{{ onFormSubmitFailed }}")
+            )
+            .nodes(
+                YssFormilyDsl.groupHeader("baseInfoHeader", "基本信息")
+                    .componentProp("description", "流程基础配置"),
+
+                YssFormilyDsl.input("processName", "流程名称")
+                    .required()
+                    .placeholder("请输入流程名称")
+                    .tooltip("流程名称用于审批发起时展示")
+                    .event("onUpdate:value", "{{ onProcessNameInput }}")
+                    .validator(YssFormilyDsl.requiredValidator("请输入流程名称"))
+                    .validator(YssFormilyDsl.asyncValidator("onBlur", "{{ validateProcessName }}", "流程名称已存在")),
+
+                YssFormilyDsl.select("processType", "流程类型")
+                    .required()
+                    .placeholder("请选择流程类型")
+                    .remoteDict(
+                        YssFormilyDsl.remoteDict("approval_process_type", "processTypeOptions")
+                            .previewFormat("{{ formatDictLabel($self.value, dicts.processTypeOptions) }}")
+                    )
+                    .event("onChange", "{{ onProcessTypeChange }}"),
+
+                YssFormilyDsl.radioGroup("approvalMode", "审批模式")
+                    .required()
+                    .options(
+                        YssFormilyDsl.option("SINGLE", "单人审批"),
+                        YssFormilyDsl.option("PARALLEL", "并行审批"),
+                        YssFormilyDsl.option("SEQUENTIAL", "串行审批")
+                    ),
+
+                YssFormilyDsl.select("approverType", "审批人类型")
+                    .placeholder("请选择审批人类型")
+                    .reaction(
+                        YssFormilyDsl.reaction()
+                            .dependencies("processType", "approvalMode")
+                            .when("{{ $deps[0] === 'LEAVE' && $deps[1] !== 'SINGLE' }}")
+                            .fulfillState("visible", true)
+                            .fulfillState("required", true)
+                            .otherwiseState("visible", false)
+                            .otherwiseState("required", false)
+                    ),
+
+                YssFormilyDsl.switchField("enabled", "是否启用")
+                    .componentProp("checkedChildren", "启用")
+                    .componentProp("unCheckedChildren", "停用")
+                    .event("onChange", "{{ onEnabledChange }}"),
+
+                YssFormilyDsl.textArea("description", "流程说明")
+                    .placeholder("请输入流程说明")
+                    .componentProp("rows", 4)
+                    .gridSpan(2)
+                    .disabledExpr("{{ $values.enabled === false }}"),
+
+                YssFormilyDsl.slot("formSchema", "表单Schema", "formSchemaEditor")
+                    .required()
+                    .gridSpan(3)
+                    .visibleExpr("{{ $values.processType !== undefined && $values.processType !== null }}"),
+
+                YssFormilyDsl.autoButtonGroup("actions")
+                    .componentProp("align", "right")
+                    .property("reset", YssFormilyDsl.reset("reset", "重置").build())
+                    .property("submit", YssFormilyDsl.submit("submit", "提交", "{{ onSubmit }}").build())
+            )
+            .build();
+
+        Map<String, Object> payload = definition.toMap();
+        System.out.println(payload);
+    }
+}