create-yss-spec 2.1.9 → 2.1.11

package/template/.cursor/skills/yss-ui/assets/demos/formily/disabled.vue

@@ -0,0 +1,71 @@
+<template>
+  <div>
+    <YssFormily :schema="schema" :initial-values="{ name: '', age: 18, gender: 'male', status: true }" />
+  </div>
+</template>
+<script setup lang="ts">
+import { YssFormily, type ISchema } from '@yss-ui/components';
+
+const schema: ISchema = {
+  type: 'object',
+  properties: {
+    layout: {
+      type: 'void',
+      'x-component': 'FormLayout',
+      'x-component-props': { layout: 'horizontal', labelWidth: 90 },
+      properties: {
+        grid: {
+          type: 'void',
+          'x-component': 'FormGrid',
+          'x-component-props': { maxColumns: 3, minColumns: 1, columnGap: 16, rowGap: 0, minWidth: 260 },
+          properties: {
+            name: {
+              type: 'string',
+              title: '姓名',
+              'x-decorator': 'FormItem',
+              'x-component': 'Input',
+              'x-decorator-props': { gridSpan: 1 },
+              'x-component-props': { placeholder: '请输入姓名' },
+              'x-disabled': "{{ $values.gender === 'female' }}",
+            },
+            age: {
+              type: 'number',
+              title: '年龄',
+              'x-decorator': 'FormItem',
+              'x-component': 'Input',
+              'x-decorator-props': { gridSpan: 1 },
+              'x-disabled': '{{ $values.status === false }}',
+            },
+            gender: {
+              type: 'string',
+              title: '性别',
+              'x-decorator': 'FormItem',
+              'x-component': 'Radio.Group',
+              'x-decorator-props': { gridSpan: 1 },
+              enum: [
+                { label: '男', value: 'male' },
+                { label: '女', value: 'female' },
+              ],
+            },
+            address: {
+              type: 'string',
+              title: '地址',
+              'x-decorator': 'FormItem',
+              'x-component': 'Input',
+              'x-decorator-props': { gridSpan: 2 },
+              'x-component-props': { placeholder: '请输入地址', disabled: true },
+            },
+            status: {
+              type: 'boolean',
+              title: '状态',
+              'x-decorator': 'FormItem',
+              'x-component': 'Switch',
+              'x-decorator-props': { gridSpan: 1 },
+            },
+          },
+        },
+      },
+    },
+  },
+};
+</script>

package/template/.cursor/skills/yss-ui/assets/demos/formily/dynamic-array.vue

@@ -0,0 +1,74 @@
+<template>
+  <div>
+    <YssFormily :schema="schema" :initial-values="{ list: [{ name: '张三', role: 'admin' }] }" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { YssFormily, type ISchema } from '@yss-ui/components';
+
+const schema: ISchema = {
+  type: 'object',
+  properties: {
+    layout: {
+      type: 'void',
+      'x-component': 'FormLayout',
+      'x-component-props': { layout: 'horizontal', labelWidth: 90 },
+      properties: {
+        list: {
+          type: 'array',
+          title: '成员列表',
+          'x-decorator': 'FormItem',
+          'x-component': 'ArrayItems',
+          // 每项使用响应式 FormGrid 布局：序号 + 两列字段 + 操作
+          items: {
+            type: 'object',
+            properties: {
+              row: {
+                type: 'void',
+                'x-component': 'FormGrid',
+                'x-component-props': { maxColumns: 3, minWidth: 260 },
+                properties: {
+                  name: {
+                    type: 'string',
+                    title: '姓名',
+                    'x-decorator': 'FormItem',
+                    'x-component': 'Input',
+                    'x-validator': [{ required: true, message: '请输入姓名' }],
+                  },
+                  role: {
+                    type: 'string',
+                    title: '角色',
+                    'x-decorator': 'FormItem',
+                    'x-component': 'Select',
+                    enum: [
+                      { label: '管理员', value: 'admin' },
+                      { label: '成员', value: 'member' },
+                    ],
+                  },
+                  remove: {
+                    type: 'void',
+                    'x-decorator': 'FormItem',
+                    'x-decorator-props': { colon: false, label: ' ' },
+                    'x-component': 'ArrayItems.Remove',
+                    'x-component-props': {
+                      title: '',
+                      type: 'text',
+                      danger: true,
+                      shape: 'circle',
+                      icon: 'DeleteOutlined',
+                    },
+                  },
+                },
+              },
+            },
+          },
+          properties: {
+            add: { type: 'void', 'x-component': 'ArrayItems.Addition', 'x-component-props': { title: '新增成员' } },
+          },
+        },
+      },
+    },
+  },
+};
+</script>

package/template/.cursor/skills/yss-ui/assets/demos/formily/dynamic.vue

@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <YssFormily :schema="schema" :initial-values="{ userType: 'personal' }" />
+  </div>
+</template>
+<script setup lang="ts">
+import { YssFormily, type ISchema } from '@yss-ui/components';
+
+const schema: ISchema = {
+  type: 'object',
+  properties: {
+    layout: {
+      type: 'void',
+      'x-component': 'FormLayout',
+      'x-component-props': { layout: 'horizontal', labelWidth: 90 },
+      properties: {
+        grid: {
+          type: 'void',
+          'x-component': 'FormGrid',
+          // 'x-component-props': { maxColumns: 3, minColumns: 1, columnGap: 16, rowGap: 0, minWidth: 260 },
+          properties: {
+            userType: {
+              type: 'string',
+              title: '用户类型',
+              'x-decorator': 'FormItem',
+              'x-component': 'Radio.Group',
+              enum: [
+                { label: '个人', value: 'personal' },
+                { label: '企业', value: 'company' },
+              ],
+            },
+            name: {
+              type: 'string',
+              title: '姓名',
+              'x-decorator': 'FormItem',
+              'x-component': 'Input',
+              'x-visible': "{{ $values.userType === 'personal' }}",
+            },
+            companyName: {
+              type: 'string',
+              title: '公司名称',
+              'x-decorator': 'FormItem',
+              'x-component': 'Input',
+              'x-visible': "{{ $values.userType === 'company' }}",
+            },
+            taxNumber: {
+              type: 'string',
+              title: '税号',
+              'x-decorator': 'FormItem',
+              'x-component': 'Input',
+              'x-visible': "{{ $values.userType === 'company' }}",
+            },
+          },
+        },
+      },
+    },
+  },
+};
+</script>

package/template/.cursor/skills/yss-ui/assets/demos/formily/effects.vue

@@ -0,0 +1,117 @@
+<template>
+  <div>
+    <YssFormily :schema="schema" :form="form" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { DataField, Form, IFieldState } from '@formily/core';
+import { createForm, onFieldInit, onFieldValueChange } from '@formily/core';
+import { YssFormily, type ISchema } from '@yss-ui/components';
+
+//建议 更简洁方式：直接用表达式控制显隐，初始化与联动都会生效。
+// name: { ..., 'x-visible': "{{ $values.userType === 'personal' }}" }
+// companyName: { ..., 'x-visible': "{{ $values.userType === 'company' }}" }
+
+const syncUserType = (form: Form, val: string) => {
+  const isCompany = val === 'company';
+  form.setFieldState('name', (s: IFieldState) => {
+    s.visible = !isCompany;
+    if (isCompany) s.value = '';
+  });
+  form.setFieldState('companyName', (s: IFieldState) => {
+    s.visible = isCompany;
+    if (!isCompany) s.value = '';
+  });
+};
+
+const form = createForm<object>({
+  values: { userType: 'personal', status: true },
+  effects() {
+    // 首屏生效
+    onFieldInit('userType', f => syncUserType(f.form, (f as DataField).value as string));
+    // 变更生效
+    onFieldValueChange('userType', f => syncUserType(f.form, f.value));
+
+    // 同理，若希望 status 初始就控制 age 的可用性，也补一条：
+    onFieldInit('status', f =>
+      f.form.setFieldState('age', (s: IFieldState) => {
+        s.disabled = (f as DataField).value === false;
+      })
+    );
+    onFieldValueChange('status', f =>
+      f.form.setFieldState('age', (s: IFieldState) => {
+        s.disabled = f.value === false;
+      })
+    );
+  },
+});
+
+const schema: ISchema = {
+  type: 'object',
+  properties: {
+    layout: {
+      type: 'void',
+      'x-component': 'FormLayout',
+      'x-component-props': { layout: 'horizontal', labelWidth: 90 },
+      properties: {
+        grid: {
+          type: 'void',
+          'x-component': 'FormGrid',
+          properties: {
+            userType: {
+              type: 'string',
+              title: '用户类型',
+              'x-decorator': 'FormItem',
+              'x-component': 'Radio.Group',
+              enum: [
+                { label: '个人', value: 'personal' },
+                { label: '企业', value: 'company' },
+              ],
+              'x-decorator-props': { gridSpan: 1 },
+            },
+            name: {
+              type: 'string',
+              title: '姓名',
+              'x-decorator': 'FormItem',
+              'x-component': 'Input',
+              'x-decorator-props': { gridSpan: 2 },
+            },
+            companyName: {
+              type: 'string',
+              title: '公司名称',
+              'x-decorator': 'FormItem',
+              'x-component': 'Input',
+              'x-decorator-props': { gridSpan: 2 },
+            },
+            age: {
+              type: 'number',
+              title: '年龄',
+              'x-decorator': 'FormItem',
+              'x-component': 'Input',
+              'x-decorator-props': { gridSpan: 1 },
+            },
+            status: {
+              type: 'boolean',
+              title: '状态',
+              'x-decorator': 'FormItem',
+              'x-component': 'Switch',
+              'x-decorator-props': { gridSpan: 1 },
+            },
+            actions: {
+              type: 'void',
+              'x-decorator': 'FormItem',
+              'x-decorator-props': { gridSpan: 1, colon: false },
+              'x-component': 'AutoButtonGroup',
+              properties: {
+                submit: { type: 'void', 'x-component': 'Submit', 'x-content': '提交' },
+                reset: { type: 'void', 'x-component': 'Reset', 'x-content': '重置' },
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+};
+</script>

package/template/.cursor/skills/yss-ui/assets/demos/formily/events-inline.vue

@@ -0,0 +1,82 @@
+<template>
+  <div>
+    <YssFormily :schema="schema" :initial-values="{ name: '', gender: 'male', status: true }" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { YssFormily, type ISchema } from '@yss-ui/components';
+
+const schema: ISchema = {
+  type: 'object',
+  properties: {
+    layout: {
+      type: 'void',
+      'x-component': 'FormLayout',
+      'x-component-props': { layout: 'horizontal', labelWidth: 90 },
+      properties: {
+        grid: {
+          type: 'void',
+          'x-component': 'FormGrid',
+          properties: {
+            name: {
+              type: 'string',
+              title: '姓名',
+              'x-decorator': 'FormItem',
+              'x-component': 'Input',
+              'x-component-props': {
+                // 更贴近 v-model 的输入事件
+                'onUpdate:value': '{{ (val) => console.log("name update:", val) }}',
+                // 选择/失焦时触发（依据 antdv 行为）
+                '@change': '{{ (e) => console.log("name change:", e?.target?.value) }}',
+              },
+              'x-decorator-props': { gridSpan: 1 },
+            },
+            gender: {
+              type: 'string',
+              title: '性别',
+              'x-decorator': 'FormItem',
+              'x-component': 'Radio.Group',
+              enum: [
+                { label: '男', value: 'male' },
+                { label: '女', value: 'female' },
+              ],
+              'x-component-props': {
+                onChange: '{{ (e) => console.log("gender change:", e?.target?.value) }}',
+              },
+              'x-decorator-props': { gridSpan: 1 },
+            },
+            status: {
+              type: 'boolean',
+              title: '状态',
+              'x-decorator': 'FormItem',
+              'x-component': 'Switch',
+              'x-component-props': {
+                onChange: '{{ (checked) => console.log("status:", checked) }}',
+              },
+              'x-decorator-props': { gridSpan: 1 },
+            },
+            actions: {
+              type: 'void',
+              'x-decorator': 'FormItem',
+              'x-decorator-props': { gridSpan: 3, colon: false },
+              'x-component': 'AutoButtonGroup',
+              properties: {
+                submit: {
+                  type: 'void',
+                  'x-component': 'Submit',
+                  'x-content': '提交',
+                  'x-component-props': {
+                    onSubmit: '{{ (values) => console.log("submit values:", values) }}',
+                  },
+                },
+                reset: { type: 'void', 'x-component': 'Reset', 'x-content': '重置' },
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+};
+</script>

package/template/.cursor/skills/yss-ui/assets/demos/formily/events-scope.vue

@@ -0,0 +1,101 @@
+<template>
+  <div>
+    <YssFormily
+      ref="formRef"
+      :schema="schema"
+      :initial-values="{ name: '', desc: '', status: true, age: 18 }"
+      :scope="{ onNameUpdate, onStatusChange, onSubmit }"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { YssFormily, type ISchema } from '@yss-ui/components';
+import { ref } from 'vue';
+
+const formRef = ref<any>();
+
+const onNameUpdate = (val: string) => {
+  console.log('name via scope:', val);
+  // 跨字段：实时回填描述
+  formRef.value?.setFieldState('desc', (state: any) => {
+    state.value = val ? `你好，${val}` : '';
+  });
+};
+
+const onStatusChange = (checked: boolean) => {
+  console.log('status via scope:', checked);
+  // 跨字段：根据开关禁用/启用年龄
+  formRef.value?.setFieldState('age', (state: any) => {
+    state.disabled = !checked;
+  });
+};
+
+const onSubmit = (values: any) => {
+  console.log('submit via scope:', values);
+};
+
+const schema: ISchema = {
+  type: 'object',
+  properties: {
+    layout: {
+      type: 'void',
+      'x-component': 'FormLayout',
+      'x-component-props': { layout: 'horizontal', labelWidth: 90 },
+      properties: {
+        grid: {
+          type: 'void',
+          'x-component': 'FormGrid',
+          properties: {
+            name: {
+              type: 'string',
+              title: '姓名',
+              'x-decorator': 'FormItem',
+              'x-component': 'Input',
+              'x-component-props': {
+                'onUpdate:value': '{{ onNameUpdate }}',
+              },
+            },
+            desc: {
+              type: 'string',
+              title: '描述',
+              'x-decorator': 'FormItem',
+              'x-component': 'Input.TextArea',
+              'x-component-props': { rows: 2 },
+              'x-decorator-props': { gridSpan: 2 },
+            },
+            age: {
+              type: 'number',
+              title: '年龄',
+              'x-decorator': 'FormItem',
+              'x-component': 'Input',
+            },
+            status: {
+              type: 'boolean',
+              title: '状态',
+              'x-decorator': 'FormItem',
+              'x-component': 'Switch',
+              'x-component-props': { onChange: '{{ onStatusChange }}' },
+            },
+            actions: {
+              type: 'void',
+              'x-decorator': 'FormItem',
+              'x-decorator-props': { gridSpan: 3, colon: false },
+              'x-component': 'AutoButtonGroup',
+              properties: {
+                submit: {
+                  type: 'void',
+                  'x-component': 'Submit',
+                  'x-content': '提交',
+                  'x-component-props': { onSubmit: '{{ onSubmit }}' },
+                },
+                reset: { type: 'void', 'x-component': 'Reset', 'x-content': '重置' },
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+};
+</script>

package/template/.cursor/skills/yss-ui/assets/demos/formily/grid.vue

@@ -0,0 +1,71 @@
+<template>
+  <div>
+    <YssFormily :schema="schema" />
+  </div>
+</template>
+<script setup lang="ts">
+import { YssFormily, type ISchema } from '@yss-ui/components';
+
+const schema: ISchema = {
+  type: 'object',
+  properties: {
+    layout: {
+      type: 'void',
+      'x-component': 'FormLayout',
+      'x-component-props': { layout: 'horizontal', labelWidth: 90 },
+      properties: {
+        grid: {
+          type: 'void',
+          'x-component': 'FormGrid',
+          // 关键：打开响应式能力
+          // 'x-component-props': { maxColumns: 3, minColumns: 1, columnGap: 16, rowGap: 0, minWidth: 260 },
+          properties: {
+            firstName: {
+              type: 'string',
+              title: '名',
+              'x-decorator': 'FormItem',
+              'x-component': 'Input',
+              'x-decorator-props': { gridSpan: 1 },
+            },
+            lastName: {
+              type: 'string',
+              title: '姓',
+              'x-decorator': 'FormItem',
+              'x-component': 'Input',
+              'x-decorator-props': { gridSpan: 1 },
+            },
+            email: {
+              type: 'string',
+              title: '邮箱',
+              'x-decorator': 'FormItem',
+              'x-component': 'Input',
+              'x-decorator-props': { gridSpan: 2 },
+            },
+            address: {
+              type: 'string',
+              title: '地址',
+              'x-decorator': 'FormItem',
+              'x-component': 'Input',
+              'x-decorator-props': { gridSpan: 2 },
+            },
+            city: {
+              type: 'string',
+              title: '城市',
+              'x-decorator': 'FormItem',
+              'x-component': 'Input',
+              'x-decorator-props': { gridSpan: 1 },
+            },
+            zip: {
+              type: 'string',
+              title: '邮编',
+              'x-decorator': 'FormItem',
+              'x-component': 'Input',
+              'x-decorator-props': { gridSpan: 1 },
+            },
+          },
+        },
+      },
+    },
+  },
+};
+</script>

package/template/.cursor/skills/yss-ui/assets/demos/formily/group.vue

@@ -0,0 +1,102 @@
+<template>
+  <div>
+    <div style="margin-bottom: 12px">
+      <RadioGroup v-model:value="mode">
+        <RadioButton :value="0">新增</RadioButton>
+        <RadioButton :value="2">查看</RadioButton>
+      </RadioGroup>
+    </div>
+    <YssFormily :schema="schema" :mode="mode" :grid-defaults="{ maxColumns: 2 }" :initial-values="initialValues">
+      <!-- 只读描述视图自定义插槽：字段 path 为 email => #detail-email -->
+      <template #detail-email="{ value }">
+        <template v-if="Array.isArray(value) && value.length">
+          <Tag v-for="(v, i) in value" :key="i" color="blue" style="margin-right: 4px">{{ v }}</Tag>
+        </template>
+        <template v-else>
+          <span>-</span>
+        </template>
+      </template>
+    </YssFormily>
+  </div>
+</template>
+<script setup lang="ts">
+import { YssFormily, type ISchema } from '@yss-ui/components';
+import { RadioButton, RadioGroup, Tag } from 'ant-design-vue';
+import { ref } from 'vue';
+
+const mode = ref(0);
+const initialValues = {
+  name: '张三',
+  age: 28,
+  email: ['a@example.com', 'b@example.com'],
+  email1: ['a@example.com', 'b@example.com'],
+  company: 'YSS',
+  position: 'FE',
+  address: '杭州市西湖区',
+};
+const schema: ISchema = {
+  type: 'object',
+  properties: {
+    layout: {
+      type: 'void',
+      'x-component': 'FormLayout',
+      'x-component-props': { layout: 'horizontal', labelWidth: 90 },
+      properties: {
+        grid: {
+          type: 'void',
+          'x-component': 'FormGrid',
+          // 'x-component-props': { columnGap: 0 }, 等同于 :gridDefaults="{ columnGap: 0, rowGap: 0 }" 配置
+          properties: {
+            header1: {
+              type: 'void',
+              title: '基本信息基本信息基本信息',
+              'x-decorator': 'FormItem',
+              'x-decorator-props': { feedbackLayout: 'none', colon: false },
+              'x-component': 'GroupHeader',
+              'x-component-props': { description: '这是一段分组描述信息' },
+            },
+            name: { type: 'string', title: '姓名', 'x-decorator': 'FormItem', 'x-component': 'Input' },
+            age: { type: 'number', title: '年龄', 'x-decorator': 'FormItem', 'x-component': 'Input' },
+            email1: {
+              type: 'array',
+              title: '邮箱',
+              'x-decorator': 'FormItem',
+              'x-component': 'Select',
+              enum: [
+                { label: 'a@example.com', value: 'a@example.com' },
+                { label: 'b@example.com', value: 'b@example.com' },
+                { label: 'c@example.com', value: 'c@example.com' },
+              ],
+              'x-component-props': { mode: 'multiple', placeholder: '请选择邮箱' },
+            },
+            // 新增/编辑时可为下拉多选（这里为演示，仍用 Input 占位）
+            email: {
+              type: 'array',
+              title: '插槽',
+              'x-decorator': 'FormItem',
+              'x-component': 'Select',
+              enum: [
+                { label: 'a@example.com', value: 'a@example.com' },
+                { label: 'b@example.com', value: 'b@example.com' },
+                { label: 'c@example.com', value: 'c@example.com' },
+              ],
+              'x-component-props': { mode: 'multiple', placeholder: '请选择邮箱' },
+            },
+
+            header2: {
+              type: 'void',
+              title: '工作信息',
+              'x-decorator': 'FormItem',
+              'x-decorator-props': { feedbackLayout: 'none', colon: false },
+              'x-component': 'GroupHeader',
+            },
+            company: { type: 'string', title: '公司', 'x-decorator': 'FormItem', 'x-component': 'Input' },
+            position: { type: 'string', title: '职位', 'x-decorator': 'FormItem', 'x-component': 'Input' },
+            address: { type: 'string', title: '工作地址', 'x-decorator': 'FormItem', 'x-component': 'Input' },
+          },
+        },
+      },
+    },
+  },
+};
+</script>