create-yss-spec 2.1.10 → 2.1.13

package/template/.cursor/skills/yss-page-module-development/examples/AdvancedFormPage/hooks/useRuleConfig.ts

@@ -0,0 +1,158 @@
+/**
+ * 规则配置Hook
+ * 处理表单逻辑、SQL解析、条件初始化等
+ */
+import { reactive, ref, watch } from 'vue';
+import { message } from 'ant-design-vue';
+// 假设有 API 客户端
+import { getPomApi } from '@/api/generated/quality';
+import type { ConditionGroup } from '../constant';
+
+export function useRuleConfig() {
+  const api = getPomApi();
+
+  /** 校验范围条件数据 (树形结构) */
+  const conditionData = ref<ConditionGroup>({
+    id: 'root',
+    type: 'GROUP',
+    logicalOp: 'AND',
+    children: [],
+  });
+
+  /** 校验范围SQL预览值 */
+  const sqlFieldValue = ref('');
+
+  /** 校验配置条件数据 */
+  const checkConditionData = ref<ConditionGroup>({
+    id: 'root2',
+    type: 'GROUP',
+    logicalOp: 'AND',
+    children: [],
+  });
+
+  /** 校验配置SQL预览值 */
+  const checkSqlFieldValue = ref('');
+
+  /** 字段选项（给 YConditionBuilder 使用） */
+  const filterFieldsOptions = ref<Array<{ label: string; value: string; type?: string }>>([]);
+  const checkFieldsOptions = ref<Array<{ label: string; value: string }>>([]);
+
+  /** 规则操作符选项 */
+  const ruleOperatorOptions = ref<any[]>([]);
+
+  /** 加载状态 */
+  const loading = reactive({
+    generateSqlCondition: false,
+    generateCheckSqlCondition: false,
+    loadFields: false,
+  });
+
+  /**
+   * 加载字段选项
+   */
+  const loadFieldOptions = async (exceptionCountSql: string) => {
+    // 模拟 API 调用逻辑
+    if (!exceptionCountSql) {
+      message.warning('请先填写异常行数SQL');
+      return;
+    }
+    // ... API调用逻辑
+  };
+
+  /**
+   * 初始化条件构建器数据
+   */
+  const initConditionData = (conditionJson?: string, checkJson?: string) => {
+    if (conditionJson) {
+      try {
+        const parsed = JSON.parse(conditionJson);
+        conditionData.value = parsed;
+      } catch (e) {
+        console.error('解析失败', e);
+      }
+    }
+    if (checkJson) {
+      try {
+        const parsed = JSON.parse(checkJson);
+        checkConditionData.value = parsed;
+      } catch (e) {
+        console.error('解析失败', e);
+      }
+    }
+  };
+
+  /**
+   * 生成校验范围SQL
+   * (由前端 JSON 结构 -> 调用后端 -> 返回 SQL)
+   */
+  const handleGenerateSqlCondition = async (silent = false) => {
+    if (!conditionData.value?.children?.length) {
+      if (!silent) message.warning('请先配置校验范围');
+      return null;
+    }
+
+    try {
+      loading.generateSqlCondition = true;
+      const res = await api.parserSql(JSON.stringify(conditionData.value));
+      if (res?.data) {
+        sqlFieldValue.value = res.data;
+        if (!silent) message.success('生成成功');
+        return res.data;
+      }
+      return null;
+    } catch (e) {
+      console.error(e);
+      return null;
+    } finally {
+      loading.generateSqlCondition = false;
+    }
+  };
+
+  /**
+   * 生成校验表达式SQL
+   */
+  const handleGenerateCheckSqlCondition = async (silent = false) => {
+    if (!checkConditionData.value?.children?.length) {
+      if (!silent) message.warning('请先配置校验表达式');
+      return null;
+    }
+    // API logic...
+    return null; // Mock
+  };
+
+  /**
+   * 模拟加载操作符
+   */
+  const loadRuleOperatorOptions = async () => {
+    // Mock data
+    ruleOperatorOptions.value = [
+      { label: '等于', value: '=', kind: 'single' },
+      { label: '大于', value: '>', kind: 'single' },
+      { label: '包含', value: 'in', kind: 'multi' },
+    ];
+  };
+
+  // 辅助函数：根据输入筛选选项
+  const filterOptions = (options: any[], q: string) => {
+    if (!q) return options;
+    return options.filter(i => i.label?.includes(q) || i.value?.includes(q));
+  };
+
+  return {
+    conditionData,
+    sqlFieldValue,
+    checkConditionData,
+    checkSqlFieldValue,
+    filterFieldsOptions,
+    checkFieldsOptions,
+    ruleOperatorOptions,
+    loading,
+    getFilterFields: async (q: string) => filterOptions(filterFieldsOptions.value, q),
+    getCheckFields: async (q: string) => filterOptions(checkFieldsOptions.value, q),
+    loadFieldOptions,
+    loadRuleOperatorOptions,
+    initConditionData,
+    handleGenerateSqlCondition,
+    handleGenerateCheckSqlCondition,
+  };
+}

package/template/.cursor/skills/yss-page-module-development/examples/AdvancedFormPage/index.vue

@@ -0,0 +1,188 @@
+<script setup lang="ts">
+import { onMounted, computed, ref, reactive } from 'vue';
+import { Steps, Spin } from 'ant-design-vue';
+import { YCard, YButton, YConditionBuilder, YFormily } from '@yss-ui/components';
+import { QUALITY_RULE_STEPS, RULE_STEPS } from './constant';
+import { ruleConfigSchema } from './schemas/ruleConfigSchema';
+import { useRuleConfig } from './hooks/useRuleConfig';
+
+defineOptions({ name: 'AdvancedFormPage' });
+
+// 状态管理
+const currentStep = ref(RULE_STEPS.RULE_CONFIG);
+const formData = ref<any>({
+  intensity: 'WEAK',
+  errorStorage: true,
+  errorStorageLimit: 1000,
+  errorStorageType: 'FILE_SYSTEM',
+});
+
+// 表单选项
+const formOptions = reactive({
+  intensity: [
+    { label: '弱规则', value: 'WEAK' },
+    { label: '强规则', value: 'STRONG' },
+  ],
+  errorStorageType: [
+    { label: '文件服务', value: 'FILE_SYSTEM' },
+    { label: '数据落地表', value: 'DATATABLE_SYSTEM' },
+  ],
+});
+
+// 引入业务 Hook
+const {
+  conditionData,
+  sqlFieldValue,
+  checkConditionData,
+  checkSqlFieldValue,
+  ruleOperatorOptions,
+  getFilterFields,
+  getCheckFields,
+  handleGenerateSqlCondition,
+  handleGenerateCheckSqlCondition,
+  loading: ruleConfigLoading,
+  loadRuleOperatorOptions,
+} = useRuleConfig();
+
+// Refs
+const ruleConfigFormRef = ref();
+const conditionFilterRef = ref();
+const checkConditionRef = ref();
+
+// 初始化
+onMounted(() => {
+  loadRuleOperatorOptions();
+});
+
+// 计算属性：Schema
+const ruleConfigSchemaComputed = computed(() => ruleConfigSchema(formOptions));
+
+// 按钮事件处理
+/**
+ * 生成校验范围SQL（带前置表单校验）
+ * CRITICAL: 必须先触发表单校验，通过后再执行业务逻辑
+ */
+const handleGenerateSqlConditionWithValidate = async () => {
+  // 1. 先触发 YFormily 表单校验
+  const formValid = await ruleConfigFormRef.value?.submit();
+  if (!formValid) {
+    // 表单校验失败，YFormily 会自动显示错误信息
+    return;
+  }
+
+  // 2. 再校验条件构建器本身（如果有）
+  const isValid = conditionFilterRef.value?.validate?.() ?? true;
+  if (!isValid) {
+    return;
+  }
+
+  // 3. 调用生成逻辑
+  await handleGenerateSqlCondition();
+};
+
+/**
+ * 生成校验表达式SQL（带前置表单校验）
+ */
+const handleGenerateCheckSqlConditionWithValidate = async () => {
+  // 同样的逻辑
+  const formValid = await ruleConfigFormRef.value?.submit();
+  if (!formValid) return;
+
+  const isValid = checkConditionRef.value?.validate?.() ?? true;
+  if (!isValid) return;
+
+  await handleGenerateCheckSqlCondition();
+};
+</script>
+
+<template>
+  <div class="complex-form-create">
+    <!-- 1. 步骤条 -->
+    <YCard class="steps-card">
+      <Steps :current="currentStep - 1">
+        <Steps.Step v-for="item in QUALITY_RULE_STEPS" :key="item.value" :title="item.title" />
+      </Steps>
+    </YCard>
+
+    <!-- 2. 表单内容区 -->
+    <YCard class="content-card">
+      <!-- 这里只展示第二步：规则配置 -->
+      <div v-show="currentStep === RULE_STEPS.RULE_CONFIG">
+        <YFormily ref="ruleConfigFormRef" v-model="formData" :schema="ruleConfigSchemaComputed">
+          <!-- 插槽1：校验范围构建器 -->
+          <template #conditionFilter>
+            <YConditionBuilder
+              ref="conditionFilterRef"
+              v-model="conditionData"
+              :load-fields="getFilterFields"
+              :operator-options="ruleOperatorOptions"
+            />
+          </template>
+
+          <!-- 插槽2：SQL 预览区 -->
+          <template #sqlField>
+            <div class="sql-preview-section">
+              <div class="sql-preview-content">
+                <pre v-if="sqlFieldValue" class="sql-code">{{ sqlFieldValue }}</pre>
+                <div v-else class="sql-placeholder">
+                  <span>SQL预览（配置校验范围后自动生成）</span>
+                </div>
+              </div>
+              <div class="sql-preview-actions">
+                <YButton
+                  type="primary"
+                  :loading="ruleConfigLoading.generateSqlCondition"
+                  @click="handleGenerateSqlConditionWithValidate"
+                >
+                  生成校验范围
+                </YButton>
+              </div>
+            </div>
+          </template>
+
+          <!-- 插槽3：校验配置构建器 -->
+          <template #checkCondition>
+            <YConditionBuilder
+              ref="checkConditionRef"
+              v-model="checkConditionData"
+              :load-fields="getCheckFields"
+              :operator-options="ruleOperatorOptions"
+            />
+          </template>
+
+          <!-- 插槽4：校验SQL 预览区 -->
+          <template #checkSqlField>
+            <div class="sql-preview-section">
+              <!-- 复用样式结构，实际项目中可封装为组件 -->
+              <div class="sql-preview-content">
+                <pre v-if="checkSqlFieldValue" class="sql-code">{{ checkSqlFieldValue }}</pre>
+                <div v-else class="sql-placeholder">
+                  <span>SQL预览（配置校验表达式后自动生成）</span>
+                </div>
+              </div>
+              <div class="sql-preview-actions">
+                <YButton
+                  type="primary"
+                  :loading="ruleConfigLoading.generateCheckSqlCondition"
+                  @click="handleGenerateCheckSqlConditionWithValidate"
+                >
+                  生成校验表达式
+                </YButton>
+              </div>
+            </div>
+          </template>
+        </YFormily>
+      </div>
+    </YCard>
+
+    <!-- 3. 底部按钮 -->
+    <div class="footer-actions">
+      <YButton>上一步</YButton>
+      <YButton type="primary">完成</YButton>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+@import './style.less';
+</style>

package/template/.cursor/skills/yss-page-module-development/examples/AdvancedFormPage/schemas/ruleConfigSchema.ts

@@ -0,0 +1,256 @@
+/**
+ * 规则配置表单Schema
+ * 包含：Grid布局、表单分组、字段联动 (Reactions)、Slot插槽
+ */
+import type { FormOptions } from '../constant';
+
+/**
+ * 规则配置Schema
+ * @param formOptions 表单选项数据
+ */
+export const ruleConfigSchema = (formOptions: FormOptions): Record<string, any> => ({
+  type: 'object',
+  properties: {
+    layout: {
+      type: 'void',
+      'x-component': 'FormLayout',
+      'x-component-props': {
+        layout: 'horizontal',
+        labelWidth: 110, // ← 根据最长 label 确定（一般 5 个字约 100px，这里稍大）
+        labelAlign: 'right', // ← 必须右对齐
+      },
+      properties: {
+        grid: {
+          type: 'void',
+          'x-component': 'FormGrid',
+          'x-component-props': {
+            maxColumns: 3,
+            minColumns: 1,
+            columnGap: 16,
+            rowGap: 0,
+          },
+          properties: {
+            // -------------------------------------------------------------
+            // 分组1：规则配置
+            // -------------------------------------------------------------
+            ruleConfigHeader: {
+              type: 'void',
+              title: '规则配置',
+              'x-decorator': 'FormItem',
+              'x-decorator-props': {
+                feedbackLayout: 'none',
+                colon: false,
+                gridSpan: 3,
+                labelWidth: 0,
+                wrapperCol: { span: 24 },
+              },
+              'x-component': 'GroupHeader', // 自定义组件 or 标题组件
+            },
+            intensity: {
+              type: 'string',
+              title: '规则强度',
+              required: true,
+              'x-decorator': 'FormItem',
+              'x-component': 'Radio.Group',
+              enum: formOptions.intensity,
+            },
+            // 开关字段，控制其他字段显示
+            errorStorage: {
+              type: 'boolean',
+              title: '异常存储',
+              required: true,
+              'x-decorator': 'FormItem',
+              'x-component': 'Switch',
+              'x-component-props': {
+                checkedChildren: '开',
+                unCheckedChildren: '关',
+              },
+            },
+            // 受控字段：异常限制 (当 errorStorage=true 时显示)
+            errorStorageLimit: {
+              type: 'number',
+              title: '异常限制',
+              'x-decorator': 'FormItem',
+              'x-component': 'InputNumber',
+              'x-component-props': {
+                placeholder: '请输入异常限制',
+                style: { width: '100%' },
+              },
+              'x-reactions': {
+                dependencies: ['errorStorage'],
+                fulfill: {
+                  state: {
+                    visible: '{{$deps[0]}}',
+                  },
+                },
+              },
+            },
+
+            // -------------------------------------------------------------
+            // 分组2：异常数据存储
+            // 这里的 GroupHeader 本身也受 errorStorage 控制显示
+            // -------------------------------------------------------------
+            exceptionDataHeader: {
+              type: 'void',
+              title: '异常数据存储',
+              'x-decorator': 'FormItem',
+              'x-decorator-props': {
+                feedbackLayout: 'none',
+                colon: false,
+                gridSpan: 3,
+                labelWidth: 0,
+                wrapperCol: { span: 24 },
+              },
+              'x-component': 'GroupHeader',
+              'x-reactions': {
+                dependencies: ['errorStorage'],
+                fulfill: {
+                  state: {
+                    visible: '{{$deps[0]}}',
+                  },
+                },
+              },
+            },
+            errorStorageType: {
+              type: 'string',
+              title: '存储方式',
+              required: true,
+              'x-decorator': 'FormItem',
+              'x-component': 'Select',
+              'x-component-props': {
+                placeholder: '请选择存储方式',
+              },
+              enum: formOptions.errorStorageType,
+              'x-reactions': {
+                dependencies: ['errorStorage'],
+                fulfill: {
+                  state: {
+                    visible: '{{$deps[0]}}',
+                  },
+                },
+              },
+            },
+            errorStorageName: {
+              type: 'string',
+              title: '存储名称',
+              required: true,
+              'x-decorator': 'FormItem',
+              'x-decorator-props': {
+                gridSpan: 1,
+              },
+              'x-component': 'Input',
+              'x-component-props': {
+                placeholder: '请选择异常数据存储名称',
+              },
+              'x-reactions': {
+                dependencies: ['errorStorage'],
+                fulfill: {
+                  state: {
+                    visible: '{{$deps[0]}}',
+                  },
+                },
+              },
+            },
+            errorStoragePath: {
+              type: 'string',
+              title: '存储地址',
+              'x-decorator': 'FormItem',
+              'x-decorator-props': {
+                gridSpan: 1,
+              },
+              'x-component': 'Input',
+              'x-component-props': {
+                placeholder: '请输入异常数据存储地址',
+              },
+              // 也可以配置 reactions
+            },
+
+            // -------------------------------------------------------------
+            // 分组3：校验规则 (使用 Slot 自定义渲染)
+            // -------------------------------------------------------------
+            filterHeader: {
+              type: 'void',
+              title: '校验规则',
+              'x-decorator': 'FormItem',
+              'x-decorator-props': {
+                feedbackLayout: 'none',
+                colon: false,
+                gridSpan: 3,
+                labelWidth: 0,
+                wrapperCol: { span: 24 },
+              },
+              'x-component': 'GroupHeader',
+            },
+            // Slot：校验范围构建器
+            conditionFilter: {
+              type: 'object',
+              title: '校验范围',
+              'x-decorator': 'FormItem',
+              'x-decorator-props': {
+                gridSpan: 3, // 占满一行
+              },
+              'x-component': 'Slot', // 关键：使用 Slot 组件
+              'x-component-props': {
+                name: 'conditionFilter', // 对应 <template #conditionFilter>
+              },
+            },
+            // Slot：SQL 预览
+            sqlField: {
+              type: 'string',
+              title: '预览',
+              'x-decorator': 'FormItem',
+              'x-decorator-props': {
+                gridSpan: 3,
+              },
+              'x-component': 'Slot',
+              'x-component-props': {
+                name: 'sqlField',
+              },
+            },
+
+            // -------------------------------------------------------------
+            // 分组4：校验设置
+            // -------------------------------------------------------------
+            checkHeader: {
+              type: 'void',
+              title: '校验设置',
+              'x-decorator': 'FormItem',
+              'x-decorator-props': {
+                feedbackLayout: 'none',
+                colon: false,
+                gridSpan: 3,
+                labelWidth: 0,
+                wrapperCol: { span: 24 },
+              },
+              'x-component': 'GroupHeader',
+            },
+            checkCondition: {
+              type: 'object',
+              title: '校验配置',
+              'x-decorator': 'FormItem',
+              'x-decorator-props': {
+                gridSpan: 3,
+              },
+              'x-component': 'Slot',
+              'x-component-props': {
+                name: 'checkCondition',
+              },
+            },
+            checkSqlField: {
+              type: 'string',
+              title: '预览',
+              'x-decorator': 'FormItem',
+              'x-decorator-props': {
+                gridSpan: 3,
+              },
+              'x-component': 'Slot',
+              'x-component-props': {
+                name: 'checkSqlField',
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+});

package/template/.cursor/skills/yss-page-module-development/examples/AdvancedFormPage/style.less

@@ -0,0 +1,76 @@
+@import "@/styles/variables.less";
+
+.complex-form-create {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  box-sizing: border-box;
+  padding-bottom: 56px; // 留出底部按钮高度
+
+  // 修复 Formily Label 对齐
+  :deep(.ant-formily-form-item-label) {
+    align-items: center;
+  }
+
+  // 步骤条样式
+  .steps-card {
+    .y-steps {
+      padding: 12px 0;
+    }
+  }
+
+  // 内容区样式（自适应高度）
+  .content-card {
+    flex: 1;
+    overflow: auto;
+  }
+
+  // SQL 预览区样式
+  .sql-preview-section {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+
+    .sql-preview-content {
+      flex: 1;
+      min-height: 28px;
+      border: 1px solid #f6f6f6;
+      border-radius: 6px;
+      background: #ffffff;
+      overflow: hidden;
+
+      .sql-code {
+        margin: 0;
+        padding: 8px 12px;
+        background: #fafbfc;
+        font-family: "Monaco", "Menlo", monospace;
+        font-size: 13px;
+        color: #2c3e50;
+        white-space: pre-wrap;
+        word-break: break-all;
+        max-height: 200px;
+        overflow: auto;
+      }
+    }
+  }
+
+  // 底部悬浮按钮栏
+  .footer-actions {
+    position: fixed;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    height: 56px;
+    background: #fff;
+    border-top: 1px solid #e8e8e8;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    padding: 0 24px;
+    gap: 12px;
+    z-index: 10;
+  }
+}