create-yss-spec 2.1.9 → 2.1.11

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

@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <YssFormily :schema="schema" :initial-values="{ username: '' }">
+      <!-- 使用具名插槽 + schema 中的 Slot 组件进行桥接（kebab-case） -->
+      <template #help-user>
+        <span style="color: #999">用户名可包含字母、数字、下划线，长度 4~16</span>
+      </template>
+    </YssFormily>
+  </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: {
+            username: {
+              type: 'string',
+              title: '用户名',
+              'x-decorator': 'FormItem',
+              'x-component': 'Input',
+              // 方式一：直接使用 FormItem 的 extra（更简单）
+              'x-decorator-props': { extra: '用户名可包含字母、数字、下划线，长度 4~16' },
+              // 方式二：通过自定义插槽（更灵活，可含复杂节点）
+              // 注意：插槽字段不能放在该输入字段的 properties 内部；应作为并列的 void 字段渲染
+            },
+            usernameHelp: {
+              type: 'void',
+              'x-decorator': 'FormItem',
+              'x-component': 'Slot',
+              'x-component-props': { name: 'help-user', params: [] as string[] },
+              'x-decorator-props': { gridSpan: 3, colon: false },
+            },
+          },
+        },
+      },
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,42 @@
+<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: {
+            name: {
+              type: 'string',
+              title: '姓名',
+              'x-decorator': 'FormItem',
+              'x-decorator-props': { tooltip: '请输入您的真实姓名' },
+              'x-component': 'Input',
+            },
+            idCard: {
+              type: 'string',
+              title: '身份证号',
+              'x-decorator': 'FormItem',
+              'x-decorator-props': { tooltip: '请输入18位身份证号码' },
+              'x-component': 'Input',
+            },
+          },
+        },
+      },
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,127 @@
+<template>
+  <div>
+    <YssFormily
+      :schema="schema"
+      :initial-values="{ country: 'CN', level: 1, vip: false }"
+      :scope="{ onCountryChange, onLevelChange }"
+      :form="form"
+    />
+  </div>
+  <!-- 以上保持不变 -->
+</template>
+
+<script setup lang="ts">
+import type { Form } from '@formily/core';
+import { createForm, onFieldValueChange } from '@formily/core';
+import { YssFormily, type ISchema } from '@yss-ui/components';
+
+// 作用域方法：就近处理本字段联动
+// 注意：不再通过事件参数传入 form，直接使用外层 createForm 的实例，避免作用域参数 ctx 不存在导致失效
+const onCountryChange = (val: string) => {
+  // 仅示意：CN/US 两套城市
+  const cityOptions =
+    val === 'US'
+      ? [
+          { label: 'New York', value: 'NY' },
+          { label: 'Los Angeles', value: 'LA' },
+        ]
+      : [
+          { label: '北京', value: 'BJ' },
+          { label: '上海', value: 'SH' },
+        ];
+  form.setFieldState('city', (state: any) => {
+    state.dataSource = cityOptions;
+    state.value = undefined;
+  });
+};
+
+const onLevelChange = (val: number) => {
+  form.setFieldState('quota', (state: any) => {
+    state.value = val >= 3 ? 1000 : 100;
+  });
+};
+
+// 表单级副作用：综合多依赖（country、vip、level）影响 city/quota 的可用性
+// 提前设置初始值，避免在传入外部 form 时 :initialValues 不生效的情况
+const form: Form = createForm({
+  values: { country: 'CN', level: 1, vip: false },
+  effects() {
+    onFieldValueChange(['country', 'vip', 'level'] as any, field => {
+      const values: any = (field as any).form?.values || {};
+      const { country, vip, level } = values;
+      // 例：VIP 且 level 高时允许更多城市
+      field.form.setFieldState('city', s => {
+        s.disabled = !vip && level < 2;
+      });
+      // 例：US 且 level>=2 时配额上限更高（仅展示状态联动）
+      field.form.setFieldState('quota', s => {
+        s.disabled = !(country === 'US' && level >= 2);
+      });
+    });
+  },
+});
+
+// 初始化城市下拉数据（根据初始国家）
+onCountryChange(form.values?.country);
+
+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: {
+            country: {
+              type: 'string',
+              title: '国家',
+              'x-decorator': 'FormItem',
+              'x-component': 'Select',
+              enum: [
+                { label: '中国', value: 'CN' },
+                { label: '美国', value: 'US' },
+              ],
+              // 直接调用作用域方法，避免依赖不存在的 ctx.form
+              'x-component-props': { onChange: '{{ (val) => onCountryChange(val) }}' },
+            },
+            city: {
+              type: 'string',
+              title: '城市',
+              'x-decorator': 'FormItem',
+              'x-component': 'Select',
+            },
+            level: {
+              type: 'number',
+              title: '等级',
+              'x-decorator': 'FormItem',
+              'x-component': 'Select',
+              enum: [
+                { label: '1', value: 1 },
+                { label: '2', value: 2 },
+                { label: '3', value: 3 },
+              ],
+              'x-component-props': { onChange: '{{ (val) => onLevelChange(val) }}' },
+            },
+            vip: {
+              type: 'boolean',
+              title: 'VIP',
+              'x-decorator': 'FormItem',
+              'x-component': 'Switch',
+            },
+            quota: {
+              type: 'number',
+              title: '配额',
+              'x-decorator': 'FormItem',
+              'x-component': 'Input',
+            },
+          },
+        },
+      },
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,78 @@
+<template>
+  <div>
+    <YssFormily :schema="schema" :initial-values="{ province: '', city: '' }" />
+  </div>
+</template>
+<script setup lang="ts">
+import { YssFormily, type ISchema } from '@yss-ui/components';
+
+/** 选项项类型 */
+type Option = { label: string; value: string };
+
+/**
+ * 根据省份编码返回城市选项
+ * @param province - 省份编码
+ * @returns 城市下拉选项
+ */
+const getCityOptionsByProvince = (province: string): Option[] => {
+  const map: Record<string, Option[]> = {
+    beijing: [
+      { label: '朝阳区', value: 'chaoyang' },
+      { label: '海淀区', value: 'haidian' },
+    ],
+    shanghai: [
+      { label: '浦东新区', value: 'pudong' },
+      { label: '徐汇区', value: 'xuhui' },
+    ],
+    guangdong: [
+      { label: '广州', value: 'guangzhou' },
+      { label: '深圳', value: 'shenzhen' },
+    ],
+  };
+  return map[province] || [];
+};
+
+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: {
+            province: {
+              type: 'string',
+              title: '省份',
+              'x-decorator': 'FormItem',
+              'x-component': 'Select',
+              enum: [
+                { label: '北京', value: 'beijing' },
+                { label: '上海', value: 'shanghai' },
+                { label: '广东', value: 'guangdong' },
+              ],
+            },
+            city: {
+              type: 'string',
+              title: '城市',
+              'x-decorator': 'FormItem',
+              'x-component': 'Select',
+              'x-component-props': { placeholder: '请选择' },
+              'x-reactions': (field: any) => {
+                const province: string = field.query('province').get('value') || '';
+                const options = getCityOptionsByProvince(province);
+                field.dataSource = options;
+                field.value = '';
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,72 @@
+<template>
+  <div>
+    <div style="margin-bottom: 12px">
+      <RadioGroup v-model:value="mode">
+        <RadioButton :value="0">新增</RadioButton>
+        <RadioButton :value="1">编辑</RadioButton>
+        <RadioButton :value="2">查看</RadioButton>
+      </RadioGroup>
+    </div>
+    <YssFormily
+      :key="mode"
+      :schema="schema"
+      :initial-values="initialValues"
+      :mode="mode"
+      detail-as="descriptions"
+      :detail-options="{ columns: 3, bordered: true }"
+    />
+  </div>
+</template>
+<script setup lang="ts">
+import { YssFormily, type ISchema } from '@yss-ui/components';
+import { RadioButton, RadioGroup } from 'ant-design-vue';
+import { computed, ref } from 'vue';
+
+const mode = ref(0);
+const initial = { name: '张三', age: 28, gender: 'male', desc: '这是一段描述', date: '2024-06-15' };
+// 新增默认值（例如性别默认选中“男”）
+const createDefaults = { gender: 'male' };
+
+// 新增: 使用 createDefaults；编辑/查看: 使用反显数据
+const initialValues = computed(() => (mode.value === 0 ? createDefaults : initial));
+
+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', required: true, 'x-component': 'Input' },
+            age: { type: 'number', title: '年龄', 'x-decorator': 'FormItem', 'x-component': 'Input' },
+            gender: {
+              type: 'string',
+              title: '性别',
+              'x-decorator': 'FormItem',
+              'x-component': 'Radio.Group',
+              enum: [
+                { label: '男', value: 'male' },
+                { label: '女', value: 'female' },
+              ],
+            },
+            date: { type: 'string', title: '日期', 'x-decorator': 'FormItem', 'x-component': 'DatePicker' },
+            desc: {
+              type: 'string',
+              title: '描述',
+              'x-decorator': 'FormItem',
+              'x-component': 'Input.TextArea',
+              'x-component-props': { rows: 2 },
+            },
+          },
+        },
+      },
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,88 @@
+<template>
+  <div>
+    <div style="margin-bottom: 12px">
+      <RadioGroup v-model:value="mode">
+        <RadioButton :value="0">新增</RadioButton>
+        <RadioButton :value="1">编辑</RadioButton>
+        <RadioButton :value="2">查看</RadioButton>
+      </RadioGroup>
+    </div>
+    <YssFormily
+      :key="mode + '-' + loaded"
+      :schema="schema"
+      :initial-values="initialValues"
+      :mode="mode"
+      detail-as="descriptions"
+      :detail-options="{ bordered: true }"
+      :scope="{ dicts: { deptOptions } }"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { YssFormily, type ISchema } from '@yss-ui/components';
+import { RadioButton, RadioGroup } from 'ant-design-vue';
+import { computed, onMounted, ref } from 'vue';
+
+const mode = ref(2);
+
+// 远程字典（模拟接口）
+type Option = { label: string; value: number };
+const deptOptions = ref<Option[]>([]);
+const deptMap = ref<Record<number, string>>({});
+const loaded = ref(false);
+
+const fetchDept = async () => {
+  // 模拟接口
+  const list: Option[] = await new Promise(resolve =>
+    setTimeout(
+      () =>
+        resolve([
+          { label: '研发部', value: 1 },
+          { label: '产品部', value: 2 },
+          { label: '设计部', value: 3 },
+        ]),
+      200
+    )
+  );
+  deptOptions.value = list;
+  deptMap.value = Object.fromEntries(list.map(i => [i.value, i.label]));
+  loaded.value = true;
+};
+onMounted(fetchDept);
+
+const initial = { name: '张三', deptId: 2 };
+const initialValues = computed(() => (mode.value === 0 ? {} : initial));
+
+const deptLabel = (v?: number) => (v === null ? '-' : (deptMap.value[v] ?? '-'));
+
+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' },
+            deptId: {
+              type: 'number',
+              title: '部门',
+              'x-decorator': 'FormItem',
+              'x-component': 'Select',
+              // 远程字典通过 scope 注入，保证编辑时选项来源于接口
+              enum: '{{ dicts.deptOptions }}',
+              // 查看态翻译：优先走字段级 x-preview-format
+              'x-preview-format': (v: number) => deptLabel(v),
+            },
+          },
+        },
+      },
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <YssFormily :schema="schema" :initial-values="{ name: '', customField: '自定义值' }">
+      <template #customField="{ values }">
+        <div style="display: flex; align-items: center; gap: 8px">
+          <span>自定义字段1: {{ values.customField }}</span>
+          <YButton size="small" @click="handleCustomAction(values, 'customField')">操作</YButton>
+        </div>
+      </template>
+    </YssFormily>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { YButton, YssFormily, type ISchema } from '@yss-ui/components';
+
+const handleCustomAction = (values: any, fieldName: string) => {
+  alert(`操作: ${values[fieldName]}`);
+};
+
+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-decorator-props': { gridSpan: 1 },
+            },
+            customField: {
+              type: 'void',
+              title: '插槽字段',
+              'x-decorator': 'FormItem',
+              'x-decorator-props': { gridSpan: 2 },
+              'x-component': 'Slot',
+              'x-component-props': { name: 'customField', params: ['field', '$values'] },
+            },
+          },
+        },
+      },
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,135 @@
+<template>
+  <div>
+    <YssFormily :schema="schema" :initial-values="initial" :scope="{ formStep, goNext, goBack, onSubmit }" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { FormStep } from '@formily/antdv';
+import { YssFormily, type ISchema } from '@yss-ui/components';
+
+const initial = { base: { name: '', gender: 'male' }, contact: { phone: '', email: '' } };
+
+// 创建并通过 scope 注入 formStep 实例，统一由它来前进/后退
+const formStep = FormStep.createFormStep();
+
+const goNext = async () => formStep?.next?.();
+
+const goBack = () => formStep?.back?.();
+
+const onSubmit = (values: any) => {
+  console.log('steps submit:', values);
+};
+
+const schema: ISchema = {
+  type: 'object',
+  properties: {
+    layout: {
+      type: 'void',
+      'x-component': 'FormLayout',
+      'x-component-props': { layout: 'horizontal', labelWidth: 90 },
+      properties: {
+        stepper: {
+          type: 'void',
+          'x-component': 'FormStep',
+          // 直接透传已创建的 formStep 实例
+          'x-component-props': { formStep: '{{ formStep }}' },
+          properties: {
+            step1: {
+              type: 'void',
+              'x-component': 'FormStep.StepPane',
+              'x-component-props': { title: '基础信息' },
+              properties: {
+                grid1: {
+                  type: 'void',
+                  'x-component': 'FormGrid',
+                  properties: {
+                    'base.name': {
+                      type: 'string',
+                      title: '姓名',
+                      'x-decorator': 'FormItem',
+                      'x-component': 'Input',
+                      'x-validator': [{ required: true, message: '请输入姓名' }],
+                    },
+                    'base.gender': {
+                      type: 'string',
+                      title: '性别',
+                      'x-decorator': 'FormItem',
+                      'x-component': 'Radio.Group',
+                      enum: [
+                        { label: '男', value: 'male' },
+                        { label: '女', value: 'female' },
+                      ],
+                      'x-validator': [{ required: true, message: '请选择性别' }],
+                    },
+                    next: {
+                      type: 'void',
+                      'x-decorator': 'FormItem',
+                      'x-decorator-props': { gridSpan: 3, colon: false },
+                      'x-component': 'AutoButtonGroup',
+                      properties: {
+                        // Submit 会先进行校验，通过后再触发 onSubmit → 下一步
+                        toNext: {
+                          type: 'void',
+                          'x-component': 'Submit',
+                          'x-content': '下一步',
+                          'x-component-props': { onSubmit: '{{ goNext }}' },
+                        },
+                      },
+                    },
+                  },
+                },
+              },
+            },
+            step2: {
+              type: 'void',
+              'x-component': 'FormStep.StepPane',
+              'x-component-props': { title: '联系信息' },
+              properties: {
+                grid2: {
+                  type: 'void',
+                  'x-component': 'FormGrid',
+                  properties: {
+                    'contact.phone': {
+                      type: 'string',
+                      title: '电话',
+                      'x-decorator': 'FormItem',
+                      'x-component': 'Input',
+                    },
+                    'contact.email': {
+                      type: 'string',
+                      title: '邮箱',
+                      'x-decorator': 'FormItem',
+                      'x-component': 'Input',
+                    },
+                    actions: {
+                      type: 'void',
+                      'x-decorator': 'FormItem',
+                      'x-decorator-props': { gridSpan: 3, colon: false },
+                      'x-component': 'AutoButtonGroup',
+                      properties: {
+                        back: {
+                          type: 'void',
+                          'x-component': 'Reset',
+                          'x-content': '上一步',
+                          'x-component-props': { onClick: '{{ goBack }}' },
+                        },
+                        submit: {
+                          type: 'void',
+                          'x-component': 'Submit',
+                          'x-content': '提交',
+                          'x-component-props': { onSubmit: '{{ onSubmit }}' },
+                        },
+                      },
+                    },
+                  },
+                },
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+};
+</script>