create-yss-spec 1.0.0

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

@@ -0,0 +1,304 @@
+---
+name: yss-formily
+description: Use this skill when working with YssFormily or YFormily in this repository, including building or modifying schema-driven forms, search forms, detail/read-only views, field linkage, async validation, dynamic arrays, step forms, or custom slot-based form fields. Covers the project's required import rules, schema structure, event and effects selection, mode switching, detail rendering, and where to find the canonical YSS Formily docs and demos.
+---
+
+# 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/.codex/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/.codex/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/.codex/skills/yss-formily-schema-generator/SKILL.md

@@ -0,0 +1,189 @@
+---
+name: yss-formily-schema-generator
+description: Use this skill when the user wants to generate YssFormily JSON Schema or YssFormily-rendered form code from natural-language requirements, screenshots, local images, mockups, or Figma designs. Covers converting input intent into field models, layout sections, schema structure, slots, detail mode behavior, and handoff artifacts that are compatible with the repository's YssFormily conventions.
+---
+
+# 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/.codex/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/.codex/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);
+    }
+}