create-yss-spec 3.4.5 → 3.4.7

package/template/.agents/skills/page-form-module/SKILL.md

@@ -1,168 +0,0 @@
----
-name: page-form-module
-description: "实现 YSS UI 新增、编辑、查看表单模块及弹窗闭环；排查回显丢失、重置、提交与列表刷新。"
----
-
-# Page Form Module Skill
-
-## 触发条件
-
-- 实现新增、编辑、查看表单页，或 Drawer/Modal 中的表单闭环。
-- 需要处理 Schema、mode 0/1/2、回填、校验、提交和成功后列表刷新。
-
-## 不适用场景
-
-- 页面只包含列表查询，不包含任何表单编辑。
-- 表单为分步流程：使用 `formily-step-flow`。
-- 仅修复单个联动表达式：使用 `formily-linkage-effects`。
-
-## 必读依赖
-
-- 表单基础：`../formily-foundation/SKILL.md`
-- 联动副作用：`../formily-linkage-effects/SKILL.md`
-- 模式与详情：`../formily-mode-slot-detail/SKILL.md`
-- 分步表单：`../formily-step-flow/SKILL.md`
-- 接口与错误处理：`../yss-api-integration/SKILL.md`
-
-## 文档检索
-
-1. MCP 可用时，先用 `get_component_docs` 查询 `YFormily` 的 `mode`、`detail-options`、实例提交与回填 API，再按场景用 `get_demo` 获取 `formily/modes`、`formily/group`、`formily/linkage` 或 `formily/steps` 示例。
-2. 精确查询无结果时，先用 `search_docs` 或 `list_components` 校正名称；仅在 MCP 不可用、调用失败或校正后仍无结果时，回退读取最新 `llms-full.txt`。文档版本与当前依赖不一致时，再核对当前源码、CodeGraph 和真实导出。
-3. 当前会话已经加载上述本地 Skill 时，不要再通过 MCP 重复查询同一 Skill；仅在依赖 Skill 缺失时使用 `list_skills`、`get_skill` 补齐规则。
-
-## 硬约束（禁止/必须）
-
-- 提交前必须调用 `formRef.submit()` 或 `Submit.onSubmit` 进入完整校验链路。
-- `open/mode/currentId/formModel/submitting` 和回填、提交、关闭方法收敛在同一 Hook。
-- **数据前置同步原则（必守）**：表单数据必须在 `openCreate`/`openEdit` 触发前**同步赋好 `formModel.value`**；**严禁**在弹窗/抽屉组件内部通过 `watch(visible) + await nextTick() + initForm()` 异步回填数据（会导致首次编辑正常，切换新增再编辑时因时序差读取到残留空对象导致回显变空白的经典 Bug）。
-- **单一信任源**：使用 `v-model="formModel"` + `ref="formRef"` 调用 `submit()` 驱动；**严禁**在组件顶层写 `const form = createForm()` 与 `v-model`、`form.setValues`、`form.reset` 混用。
-- **禁止滥用动态 `:key`**：**严禁**在 `YFormily`/`YssFormily` 上使用 `:key="isEdit ? 'edit' : 'create'"` 等强制 Remount，应直接通过 `:mode` 或响应式数据驱动。
-- **弹窗生命周期隔离**：Modal/Drawer 必须配置 `:destroy-on-close="true"`，且内部 `YFormily` 必须使用 `v-if="open"` 随容器打开挂载、关闭销毁，避免宽度为 0 导致栅格退化，并彻底回收脏状态。
-- 新增/编辑/查看使用 `YFormily :mode="mode"`，`mode=2` 不渲染保存按钮。
-- Drawer 默认使用响应式宽度；基础表单设置 `FormLayout { labelWidth: 140, labelAlign: 'right' }`。
-- Drawer/Modal 中的 `FormGrid` 默认使用 `maxColumns: 2`、`minColumns: 1`、`minWidth: 320~360`；禁止 `minColumns: 2` 锁死两列。
-- 备注、说明和长文本通过 `x-decorator-props.gridSpan` 跨满整行。
-- 下拉选择器异步数据源必须使用 `enum` 或 `x-reactions` / `field.dataSource` 注入，严禁写入 `x-component-props.options`；基础字典下拉优先在弹窗打开前 `await` 拉取完成或在页面初始化提前拉取。
-- **表单校验规则规范**：必填文本字段声明 `whitespace: true`（如 `{ required: true, whitespace: true, message: '请输入xxx' }`）；自定义长度与格式校验必须使用条件式函数，空值放行交由 `required` 报错，非空才校验具体规则，禁止多个自定义校验重复承担必填职责。YFormily 适配层虽会归一化反馈展示，但不能代替正确的 Schema 语义。
-- 长整型 ID 按字符串原样回填和提交，禁止 `Number()`/`parseInt()`；表单中的普通数值按生成 DTO 真实类型处理。
-- 禁止使用 `if (res?.success)` 包裹保存成功逻辑，也禁止在 `catch` 重复 `message.error`。
-
-## 标准代码骨架
-
-```typescript
-import { ref } from 'vue';
-
-/** 默认表单模型 */
-const createDefaultModel = () => ({
-  name: '',
-  code: '',
-  description: '',
-});
-
-/** YFormily 业务侧仅需的实例方法。 */
-interface FormilyFormRef {
-  submit: () => Promise<Record<string, unknown>>;
-}
-
-/** 管理表单的模式、可见性、数据模型与提交链路。 */
-export const useRuleForm = (onSuccess: () => void) => {
-  const open = ref(false);
-  const mode = ref<0 | 1 | 2>(0);
-  const currentId = ref<string>();
-  const formModel = ref(createDefaultModel());
-  const submitting = ref(false);
-  const formRef = ref<FormilyFormRef>();
-
-  /** 打开新增：同步赋空值 */
-  const openCreate = (): void => {
-    mode.value = 0;
-    currentId.value = undefined;
-    formModel.value = createDefaultModel();
-    open.value = true;
-  };
-
-  /** 打开编辑：同步赋目标行数据，前置完成回填 */
-  const openEdit = (record: Record<string, any>): void => {
-    mode.value = 1;
-    currentId.value = record.id;
-    formModel.value = {
-      name: record.name ?? '',
-      code: record.code ?? '',
-      description: record.description ?? '',
-    };
-    open.value = true;
-  };
-
-  /** 关闭并清理 */
-  const close = (): void => {
-    open.value = false;
-    formModel.value = createDefaultModel();
-  };
-
-  /** 校验并保存表单。 */
-  const submit = async (): Promise<void> => {
-    if (mode.value === 2 || submitting.value || !formRef.value) return;
-
-    submitting.value = true;
-    try {
-      const values = await formRef.value.submit();
-      await saveRule({ ...formModel.value, ...values, id: currentId.value });
-      close();
-      onSuccess();
-    } catch {
-      // Formily 校验反馈或 mutator 已展示错误，此处不重复 Toast。
-    } finally {
-      submitting.value = false;
-    }
-  };
-
-  return { open, mode, currentId, formModel, submitting, formRef, openCreate, openEdit, close, submit };
-};
-```
-
-`saveRule` 必须替换为当前 Orval 真实生成方法，不得照抄占位名。
-
-```vue
-<YFormily
-  v-if="open"
-  ref="formRef"
-  v-model="formModel"
-  :schema="schema"
-  :mode="mode"
-  :detail-options="{ bordered: true, maxColumns: 2, minColumns: 1, minWidth: 320 }"
-/>
-```
-
-```typescript
-/** Drawer 表单的基础布局 Schema。 */
-export const drawerFormLayout = {
-  type: 'void',
-  'x-component': 'FormLayout',
-  'x-component-props': { layout: 'horizontal', labelWidth: 140, labelAlign: 'right' },
-  properties: {
-    grid: {
-      type: 'void',
-      'x-component': 'FormGrid',
-      'x-component-props': { maxColumns: 2, minColumns: 1, minWidth: 340, columnGap: 24, rowGap: 16 },
-      properties: {},
-    },
-  },
-};
-```
-
-## 交付检查清单
-
-- [ ] `mode=0/1/2` 语义、回填和查看态渲染正确。
-- [ ] 提交先校验，又防重入，loading 始终在 `finally` 恢复。
-- [ ] Drawer/Modal 内 `YFormily` 按可见性条件挂载与销毁。
-- [ ] label 宽度和右对齐一致，FormGrid 能从 2 列响应式收缩为 1 列。
-- [ ] 长字段已跨行，长整型 ID 未转 number。
-- [ ] 没有 `if (res?.success)` 和重复错误 Toast。
-- [ ] 成功后关闭表单并通知上层刷新。
-- [ ] 业务层未导入 `@formily/antdv` UI 组件。
-
-## 失败兜底策略
-
-- 提交无响应时，先确认 `submit()` 是否实际调用并查看 Formily 校验反馈。
-- 编辑回填异常时，核对真实 DTO、字段路径与 Schema path，不在模板散落转换。
-- 表单过大时，拆分 Schema 生成函数、字典 Hook 和提交 Hook，保持 `index.vue` 不超过 150 行。

package/template/.agents/skills/page-list-module/SKILL.md

@@ -1,137 +0,0 @@
----
-name: page-list-module
-description: 指导实现 YSS UI 标准列表、远程分页、查询重置、YTable 工具栏、行操作、批量操作和左树右表模块；当页面需要查询、表格、分页或 CRUD 列表闭环时使用。
----
-
-# Page List Module Skill
-
-## 触发条件
-
-- 实现查询、表格、分页、行操作或批量操作组合的业务列表。
-- 实现左树右表、远程分页、工具栏或列设置。
-
-## 不适用场景
-
-- 仅实现表单提交，没有列表或分页。
-- 仅展示本地静态数据，不涉及业务查询与列表操作。
-
-## 必读依赖
-
-- 组件选型：`../component-selection-imports/SKILL.md`
-- 表格 API：`../ytable-usage/SKILL.md`
-- 查询表单：`../yss-formily/SKILL.md`
-- 接口、错误链路和长整型：`../yss-api-integration/SKILL.md`
-- 左树右表高度：`../ytree-usage/SKILL.md`、`../yss-use-tree-height/SKILL.md`、`../yss-use-table-height/SKILL.md`
-
-## 文档检索
-
-1. MCP 可用时，按当前页面实际使用的能力调用 `get_component_docs` 查询 `YTable`、`YFormily`、`useTableHeight` 或 `useTreeHeight`，再用 `get_demo` 获取对应官方示例；不要只凭 Skill 内的静态片段推断 API。
-2. 精确查询无结果时，先用 `search_docs` 或 `list_components` 校正名称；仅在 MCP 不可用、调用失败或校正后仍无结果时，回退读取最新 `llms-full.txt`。文档版本与当前依赖不一致时，再核对当前源码、CodeGraph 和真实导出。
-3. 当前会话已经加载上述本地 Skill 时，不要再通过 MCP 重复查询同一 Skill；仅在依赖 Skill 缺失时使用 `list_skills`、`get_skill` 补齐规则。
-
-## 硬约束（禁止/必须）
-
-- 列表请求必须收敛在 `useXxxList`，模板不直接请求。
-- 后端查询参数可用 `pageIndex/pageSize`；YTable 分页状态必须使用 `current/pageSize/total`。
-- 远程分页必须配置 `pageable`、`pagination.remote = true`、`v-model:pagination` 和 `@page-change`；事件参数固定为 `{ current, pageSize }`，禁止读取 `currentPage`。
-- 禁止臆造 `request`/`search-params` 等 Prop，也禁止把实例 `refresh()` 当成远程重新查询；该方法只调用 vxe `updateData()` 刷新当前表格数据，远程查询/重置/刷新必须调用业务 Hook。
-- 查询区使用纵向 `search-content`：`YFormily` 仅渲染字段，查询/重置按钮在外部 `.xxx__search-actions` 独占下一行并右对齐。
-- 新增、导入、批量操作等主操作直接放入 `#toolbar-right` 插槽即可自动渲染；**无需配置 `:toolbar-config="{ custom: true }"`**，避免无端展示列设置图标；**仅在业务明确需要列设置时才传入 `:toolbar-config="{ custom: true }"`**。
-- 删除等危险操作默认使用 `actionConfig.buttons[].isConfirm` 按钮项气泡确认，禁止默认使用居中 `Modal.confirm`。
-- 列定义、状态映射和筛选配置放入 `constant.ts`；超过 10 行的列不得内联在 `index.vue`。
-- 长整型 ID 保持字符串透传，禁止 `Number()`/`parseInt()` 等会丢失精度的转换；页码、状态值等普通 number 按真实生成类型使用。
-- 禁止使用 `if (res?.success)` 包裹成功逻辑，也禁止在 `else`/`catch` 重复调用 `message.error`；mutator 已对 `success === false` 提示并 reject。
-
-## 标准代码骨架
-
-```typescript
-import { reactive, ref } from 'vue';
-
-/** 管理规则列表数据、查询条件和远程分页。 */
-export const useRuleList = () => {
-  const loading = ref(false);
-  const dataList = ref<RuleItem[]>([]);
-  const query = reactive<RuleQuery>({ pageIndex: 1, pageSize: 20, keyword: '' });
-  const pagination = reactive({ current: 1, pageSize: 20, total: 0, remote: true });
-
-  /** 请求规则列表；错误 Toast 由 mutator 处理。 */
-  const fetchData = async (): Promise<void> => {
-    loading.value = true;
-    try {
-      query.pageIndex = pagination.current;
-      query.pageSize = pagination.pageSize;
-      const res = await queryRuleList(query);
-      dataList.value = res.data ?? [];
-      pagination.total = res.totalCount ?? 0;
-    } catch {
-      dataList.value = [];
-      pagination.total = 0;
-    } finally {
-      loading.value = false;
-    }
-  };
-
-  /** 处理页码或每页数量变化。 */
-  const handlePageChange = ({ current, pageSize }: { current: number; pageSize: number }): void => {
-    pagination.current = current;
-    pagination.pageSize = pageSize;
-    void fetchData();
-  };
-
-  /** 从第一页执行查询。 */
-  const handleSearch = (): void => {
-    pagination.current = 1;
-    void fetchData();
-  };
-
-  /** 重置查询条件并回到第一页。 */
-  const handleReset = (): void => {
-    Object.assign(query, { pageIndex: 1, pageSize: pagination.pageSize, keyword: '' });
-    pagination.current = 1;
-    void fetchData();
-  };
-
-  return { loading, dataList, query, pagination, fetchData, handlePageChange, handleSearch, handleReset };
-};
-```
-
-`RuleItem`、`RuleQuery`、`queryRuleList` 必须替换为当前 Orval 生成类型和真实方法，禁止照抄占位名。
-
-```vue
-<YTable
-  v-if="isReady"
-  ref="tableRef"
-  v-model:selected-row-keys="selectedRowKeys"
-  :row-config="{ keyField: 'id', useKey: true }"
-  :data="dataList"
-  :columns="TABLE_COLUMNS"
-  :loading="loading"
-  :height="tableHeight"
-  pageable
-  v-model:pagination="pagination"
-  @page-change="handlePageChange"
->
-  <template #toolbar-right>
-    <YButton :disabled="selectedRowKeys.length === 0" @click="handleBatchDelete">批量删除</YButton>
-    <YButton type="primary" @click="openCreate">新增</YButton>
-  </template>
-</YTable>
-```
-
-## 交付检查清单
-
-- [ ] 已确认真实 Orval 导出、查询 DTO 和响应字段。
-- [ ] 查询参数与 YTable 分页字段已映射，`page-change` 回调读取 `current/pageSize` 而非 `currentPage`。
-- [ ] 若包含批量操作，首列已配置 `type: 'checkbox'`，设置了 `:row-config="{ keyField: 'xxx', useKey: true }"`，批量按钮配置了 `:disabled="selectedRowKeys.length === 0"`，操作成功后已清空选中态。
-- [ ] 查询/重置会回到第一页，远程分页配置完整。
-- [ ] 主操作在 `#toolbar-right`，列设置已开启。
-- [ ] 删除使用气泡确认，操作按钮的 loading/close 在成功与失败后都会恢复。
-- [ ] 长整型 ID 未转 number，普通 number 仍符合真实类型。
-- [ ] 没有 `if (res?.success)` 和重复错误 Toast。
-- [ ] loading、空态和失败后数据状态可预期。
-
-## 失败兜底策略
-
-- 分页字段混乱时，在 Hook 中分离 YTable 状态和后端参数，不直接把 `pageIndex/totalCount` 绑到组件。
-- 列表逻辑过大时，拆分 `useListData` 和 `useListActions`，不得回填到 `index.vue`。
-- 响应字段不稳定时，在 Hook API 边界做最小映射，禁止在模板散落兼容分支。

package/template/.agents/skills/page-skeleton/SKILL.md

@@ -1,76 +0,0 @@
----
-name: page-skeleton
-description: "创建或拆分 Vue3 YSS UI 页面模块骨架，明确页面、配置、hooks 与私有组件职责。"
----
-
-# Page Skeleton Skill
-
-## 触发条件
-
-- 新建业务页面模块（列表、表单、详情、弹窗任意组合）。
-- 需要快速搭建目录结构、类型文件、hooks、组件分层。
-- 需要把页面代码控制在可维护结构，而不是单文件堆叠。
-
-## 不适用场景
-
-- 仅补一个局部交互逻辑，不涉及页面骨架重建。
-- 仅改 API 请求细节：使用 `../yss-api-integration/SKILL.md`。
-- 仅做 Formily 细节：使用 `../formily-*` 系列 skill。
-
-## 硬约束（禁止/必须）
-
-- 开发前必须先执行组件选型：`../component-selection-imports/SKILL.md`。
-- 页面目录默认拆分：`index.vue + constant.ts + style.less + hooks/`；存在多个私有视图或大量独立类型时再增加 `components/` 和 `type.ts`。
-- `index.vue` 只做 hooks 组合和视图编排，原则上控制在 150 行以内；超过 150 行或包含多个独立职责时必须拆分。
-- 表格列超过 10 行时放入 `constant.ts`；状态、API 调用、副作用和事件处理放入 `hooks/useXxx.ts`。
-- 所有样式放入 `style.less`，SFC 只保留 `<style scoped lang="less">@import './style.less';</style>`。
-- 所有导出函数、hooks、类型和静态配置必须有中文 JSDoc。
-- 表单方案默认用 `YFormily`；分步场景默认用 `formily-step-flow`。
-- 不得导入 `@formily/antdv` 作为业务 UI 方案。
-
-## 标准代码骨架
-
-```text
-packages/src/views/{ModuleName}/
-├── index.vue
-├── constant.ts
-├── style.less
-├── hooks/
-│   ├── use{Module}List.ts
-│   └── use{Module}Form.ts
-├── type.ts              # 独立类型较多时增加
-└── components/          # 存在多个私有视图时增加
-    ├── {Module}Table.vue
-    └── {Module}Modal.vue
-```
-
-```vue
-<script setup lang="ts">
-import { useModuleList } from './hooks/useModuleList';
-import { useModuleForm } from './hooks/useModuleForm';
-
-const list = useModuleList();
-const form = useModuleForm({ onSuccess: list.fetchData });
-</script>
-```
-
-## 交付检查清单
-
-- [ ] 目录拆分完整，职责清晰。
-- [ ] `index.vue` 不超过 150 行，且仅负责组合和渲染。
-- [ ] 类型定义与常量已抽离，不在页面内硬编码。
-- [ ] hooks 可复用且命名清晰（`useXxx`）。
-- [ ] 样式已抽离到 `style.less`，SFC 样式块已 scoped。
-- [ ] 页面导入组件来源符合组件选型规则。
-- [ ] 若包含表单，已选择对应 Formily skill。
-
-## 失败兜底策略
-
-- 当需求不清晰时，先落地最小骨架（列表区 + 操作区 + 弹窗占位），再增量填充。
-- 当页面复杂度超预期时，优先继续拆 hooks 和私有组件，而不是在 `index.vue` 堆逻辑。
-- 若组件是否封装存在歧义，回退到 `component-selection-imports` 先判定导入来源。
-
-## 示例
-
-- `./examples/StandardListPage/`
-- `./examples/AdvancedFormPage/`

package/template/.agents/skills/page-skeleton/examples/AdvancedFormPage/constant.ts

@@ -1,34 +0,0 @@
-import type { OperatorOption, OptionItem } from '@yss-ui/components';
-
-/** 表单字典选项。 */
-export interface FormOptions {
-  intensity: Array<{ label: string; value: string }>;
-  errorStorageType: Array<{ label: string; value: string }>;
-}
-
-/** 规则配置表单字典。 */
-export const FORM_OPTIONS: FormOptions = {
-  intensity: [
-    { label: '弱规则', value: 'WEAK' },
-    { label: '强规则', value: 'STRONG' },
-  ],
-  errorStorageType: [
-    { label: '文件服务', value: 'FILE_SYSTEM' },
-    { label: '数据落地表', value: 'DATATABLE_SYSTEM' },
-  ],
-};
-
-/** 条件构建器可选字段。 */
-export const FIELD_OPTIONS: OptionItem[] = [
-  { label: '用户编号', value: 'userId' },
-  { label: '金额', value: 'amount' },
-  { label: '状态', value: 'status' },
-];
-
-/** 条件构建器操作符。 */
-export const RULE_OPERATOR_OPTIONS: OperatorOption[] = [
-  { label: '等于', value: '=', kind: 'single' },
-  { label: '大于', value: '>', kind: 'single' },
-  { label: '介于', value: 'between', kind: 'between' },
-  { label: '包含于', value: 'in', kind: 'multiple' },
-];

package/template/.agents/skills/page-skeleton/examples/AdvancedFormPage/hooks/useRuleConfig.ts

@@ -1,75 +0,0 @@
-import { reactive, ref } from 'vue';
-import { message } from 'ant-design-vue';
-import type { ConditionGroup, OptionItem } from '@yss-ui/components';
-import { FIELD_OPTIONS, RULE_OPERATOR_OPTIONS } from '../constant';
-
-/** 创建空条件组。 */
-const createEmptyGroup = (id: string): ConditionGroup => ({
-  id,
-  type: 'GROUP',
-  logicalOp: 'AND',
-  children: [],
-});
-
-/** 按关键词筛选条件字段。 */
-const filterFields = (keyword: string): OptionItem[] => {
-  const normalizedKeyword = keyword.trim().toLowerCase();
-  if (!normalizedKeyword) return FIELD_OPTIONS;
-  return FIELD_OPTIONS.filter(item =>
-    [item.label, item.value].some(value =>
-      String(value ?? '')
-        .toLowerCase()
-        .includes(normalizedKeyword)
-    )
-  );
-};
-
-/** 管理条件构建器与预览状态。 */
-export const useRuleConfig = () => {
-  const filterCondition = ref<ConditionGroup>(createEmptyGroup('filter-root'));
-  const checkCondition = ref<ConditionGroup>(createEmptyGroup('check-root'));
-  const filterPreview = ref('');
-  const checkPreview = ref('');
-  const loading = reactive({ filterPreview: false, checkPreview: false });
-
-  /** 为 YConditionBuilder 加载可搜索字段。 */
-  const loadFields = async (keyword: string): Promise<OptionItem[]> => filterFields(keyword);
-
-  /** 生成条件 JSON 预览。 */
-  const generatePreview = async (
-    condition: ConditionGroup,
-    target: 'filterPreview' | 'checkPreview'
-  ): Promise<void> => {
-    if (!condition.children.length) {
-      message.warning('请先配置完整条件');
-      return;
-    }
-
-    loading[target] = true;
-    try {
-      const preview = JSON.stringify(condition, null, 2);
-      if (target === 'filterPreview') filterPreview.value = preview;
-      else checkPreview.value = preview;
-    } finally {
-      loading[target] = false;
-    }
-  };
-
-  /** 生成校验范围预览。 */
-  const generateFilterPreview = (): Promise<void> => generatePreview(filterCondition.value, 'filterPreview');
-
-  /** 生成校验表达式预览。 */
-  const generateCheckPreview = (): Promise<void> => generatePreview(checkCondition.value, 'checkPreview');
-
-  return {
-    filterCondition,
-    checkCondition,
-    filterPreview,
-    checkPreview,
-    loading,
-    operatorOptions: RULE_OPERATOR_OPTIONS,
-    loadFields,
-    generateFilterPreview,
-    generateCheckPreview,
-  };
-};

package/template/.agents/skills/page-skeleton/examples/AdvancedFormPage/index.vue

@@ -1,107 +0,0 @@
-<script setup lang="ts">
-import { computed, ref } from 'vue';
-import { YButton, YCard, YConditionBuilder, YFormily } from '@yss-ui/components';
-import { FORM_OPTIONS } from './constant';
-import { useRuleConfig } from './hooks/useRuleConfig';
-import { ruleConfigSchema } from './schemas/ruleConfigSchema';
-
-defineOptions({ name: 'AdvancedFormPage' });
-
-/** YFormily 校验实例。 */
-interface FormilyRef {
-  submit: () => Promise<Record<string, unknown>>;
-}
-
-/** YConditionBuilder 校验实例。 */
-interface ConditionBuilderRef {
-  validate: () => boolean;
-}
-
-const formData = ref<Record<string, unknown>>({
-  intensity: 'WEAK',
-  errorStorage: true,
-  errorStorageLimit: 1000,
-  errorStorageType: 'FILE_SYSTEM',
-});
-const schema = computed(() => ruleConfigSchema(FORM_OPTIONS));
-const formRef = ref<FormilyRef>();
-const filterBuilderRef = ref<ConditionBuilderRef>();
-const checkBuilderRef = ref<ConditionBuilderRef>();
-const {
-  filterCondition,
-  checkCondition,
-  filterPreview,
-  checkPreview,
-  loading,
-  operatorOptions,
-  loadFields,
-  generateFilterPreview,
-  generateCheckPreview,
-} = useRuleConfig();
-
-/** 校验表单与指定条件构建器。 */
-const validateBeforeGenerate = async (builder?: ConditionBuilderRef): Promise<boolean> => {
-  if (!formRef.value || !builder) return false;
-  try {
-    await formRef.value.submit();
-  } catch {
-    return false;
-  }
-  return builder.validate();
-};
-
-/** 校验后生成校验范围预览。 */
-const handleGenerateFilterPreview = async (): Promise<void> => {
-  if (await validateBeforeGenerate(filterBuilderRef.value)) await generateFilterPreview();
-};
-
-/** 校验后生成校验表达式预览。 */
-const handleGenerateCheckPreview = async (): Promise<void> => {
-  if (await validateBeforeGenerate(checkBuilderRef.value)) await generateCheckPreview();
-};
-</script>
-
-<template>
-  <div class="rule-config-page">
-    <YCard class="rule-config-page__content">
-      <YFormily ref="formRef" v-model="formData" :schema="schema">
-        <template #conditionFilter>
-          <YConditionBuilder
-            ref="filterBuilderRef"
-            v-model="filterCondition"
-            :load-fields="loadFields"
-            :operator-options="operatorOptions"
-          />
-        </template>
-        <template #filterPreview>
-          <div class="rule-config-page__preview">
-            <pre>{{ filterPreview || '配置校验范围后生成预览' }}</pre>
-            <YButton type="primary" :loading="loading.filterPreview" @click="handleGenerateFilterPreview">
-              生成校验范围
-            </YButton>
-          </div>
-        </template>
-        <template #checkCondition>
-          <YConditionBuilder
-            ref="checkBuilderRef"
-            v-model="checkCondition"
-            :load-fields="loadFields"
-            :operator-options="operatorOptions"
-          />
-        </template>
-        <template #checkPreview>
-          <div class="rule-config-page__preview">
-            <pre>{{ checkPreview || '配置校验表达式后生成预览' }}</pre>
-            <YButton type="primary" :loading="loading.checkPreview" @click="handleGenerateCheckPreview">
-              生成校验表达式
-            </YButton>
-          </div>
-        </template>
-      </YFormily>
-    </YCard>
-  </div>
-</template>
-
-<style scoped lang="less">
-@import url('./style.less');
-</style>