create-yss-spec 3.0.1 → 3.1.3

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

@@ -1,188 +0,0 @@
-<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/.agents/skills/yss-page-module-development/examples/AdvancedFormPage/schemas/ruleConfigSchema.ts

@@ -1,256 +0,0 @@
-/**
- * 规则配置表单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/.agents/skills/yss-page-module-development/examples/AdvancedFormPage/style.less

@@ -1,76 +0,0 @@
-@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;
-  }
-}

package/template/.agents/skills/yss-page-module-development/examples/StandardListPage/constant.ts

@@ -1,128 +0,0 @@
-import type { YTableColumn } from '@yss-ui/components';
-
-/**
- * 质量规则数据项接口
- */
-export interface QualityRuleItem {
-  /** 规则ID */
-  id: string;
-  /** 规则编码 */
-  ruleCode?: string;
-  /** 规则名称 */
-  ruleName: string;
-  /** 模板ID */
-  templateId?: string | number;
-  /** 规则模板名称 */
-  templateName: string;
-  /** 数据源名称 */
-  datasourceName: string;
-  /** 规则强度名称 */
-  intensityName: string;
-  /** 规则类型名称 */
-  ruleTypeName: string;
-  /** 校验开关状态: 0=禁用, 1=启用 */
-  status: 0 | 1;
-  /** 创建人 */
-  createdBy: string;
-  /** 创建时间 */
-  createdDate: string;
-  [key: string]: any;
-}
-
-/**
- * 树节点数据接口
- */
-export interface TreeNodeData {
-  /** 节点ID */
-  id: string;
-  /** 节点名称 */
-  name?: string;
-  /** 目录编码 */
-  dirCode?: string;
-  /** 树类型: 1=规则分类树, 2=数据源树 */
-  treeType?: '1' | '2';
-  /** 数据源名称（数据源树使用） */
-  datasourceName?: string;
-  /** 数据库名称（数据源树使用） */
-  databaseName?: string;
-  /** 数据库类型（数据源树使用） */
-  dataBaseType?: string;
-  [key: string]: any;
-}
-
-/**
- * 搜索表单数据接口
- */
-export interface SearchFormData {
-  /** 规则名称 */
-  ruleName: string;
-}
-
-/**
- * 表格列配置
- */
-export const TABLE_COLUMNS: YTableColumn[] = [
-  {
-    field: 'ruleName',
-    title: '质量规则名称',
-    minWidth: 130,
-    fixed: 'left',
-    slots: { default: 'ruleName' },
-  },
-  {
-    field: 'templateName',
-    title: '规则模板',
-    minWidth: 130,
-  },
-  {
-    field: 'datasourceName',
-    title: '数据源名称',
-    minWidth: 120,
-  },
-  {
-    field: 'intensityName',
-    title: '规则强度',
-    minWidth: 100,
-  },
-  {
-    field: 'ruleTypeName',
-    title: '规则类型',
-    minWidth: 120,
-  },
-  {
-    field: 'status',
-    title: '校验开关',
-    width: 90,
-    slots: { default: 'status' },
-  },
-  {
-    field: 'createdBy',
-    title: '创建人',
-    width: 120,
-  },
-  {
-    field: 'createdDate',
-    title: '创建时间',
-    width: 140,
-  },
-  {
-    field: 'lastModifiedDate',
-    title: '最近修改时间',
-    width: 140,
-  },
-  {
-    field: 'lastModifiedBy',
-    title: '最近修改人',
-    width: 140,
-  },
-];
-
-/**
- * 规则类型常量
- */
-export const RULE_TYPE = {
-  /** 业务校验 */
-  BUSINESS: 'BUSINESS',
-  /** 技术校验 */
-  TECH: 'TECH',
-} as const;