### Setup Naive UI

Source: https://github.com/kchengz/epic-designer/blob/develop/packages/epic-designer/README.md

Install Naive UI dependencies and register the component in your main entry file.

```bash
npm i -D naive-ui @epic-designer/naive-ui
```

```javascript
// Import epic-designer styles
import "epic-designer/dist/style.css";

import { setupNaiveUi } from "@epic-designer/naive-ui";
// Register Naive Ui
setupNaiveUi();
```

--------------------------------

### Setup Element Plus

Source: https://github.com/kchengz/epic-designer/blob/develop/packages/epic-designer/README.md

Install Element Plus dependencies and register the component in your main entry file.

```bash
npm i element-plus @epic-designer/element-plus
```

```javascript
// Import epic-designer styles
import "epic-designer/dist/style.css";

// Import Element plus styles
import "element-plus/dist/index.css";

import { setupElementPlus } from "@epic-designer/element-plus";
// Register Element UI
setupElementPlus();
```

--------------------------------

### Integrate Extension Setup in main.ts

Source: https://github.com/kchengz/epic-designer/blob/develop/docs/guide/extensions/activityBar.md

Call the `setupDesignerExtensions` function in your `main.ts` file to activate your custom activity bar module when the application starts. This ensures the extension is registered.

```typescript
import { setupDesignerExtensions } from "./designer-extensions";

// 执行扩展函数
setupDesignerExtensions();
```

--------------------------------

### Extension Entry Point

Source: https://github.com/kchengz/epic-designer/blob/develop/docs/guide/extensions/component.md

The entry point file for registering custom extensions. It imports and calls the setup function.

```typescript
import { pluginManager } from "epic-designer";
import Test from "./test";

// 安装扩展
export function setupDesignerExtensions(): void {
  // 注册组件
  pluginManager.component.register(Test);
}
```

--------------------------------

### Detailed Component Registration Example

Source: https://github.com/kchengz/epic-designer/blob/develop/docs/guide/extensions/component.md

A comprehensive example demonstrating various configuration options for registering a component, including bindModel, groupName, icon, sort, defaultSchema, editConstraints, and config (attribute, event, style, action).

```typescript
import { pluginManager, type ComponentConfigModel } from 'epic-designer'

const Test = {
  // 组件，可以是异步加载函数
  component: () => import('./cmp.vue'),
  // v-model绑定变量名称，默认modelValue
  bindModel: 'value',
  // 分组名称，组件会显示在该分组下
  groupName: '自定义组件',
  // 组件图标
  icon: 'epic-icon-write',
  // 组件排序，值越小越靠前
  sort: 900,
  // 默认组件结构数据
  defaultSchema: {
    label: '测试扩展组件',
    type: 'test',
    props: {
      // 组件默认属性
      label: '测试组件',
      value: ''
    }
  },
  // 设计编辑约束
  editConstraints: {
    // 当前组件是否固定不可拖动
    immovable: false,
    // 子节点是否固定不可拖动
    childImmovable: false,
    // 表单字段是否固定 不添加随机UUID
    fixedField: false,
    // 组件锁定，不可编辑，不可选中，不可复制删除
    locked: false
  },
  // 组件配置
  config: {
    // 属性编辑列表
    attribute: [
      {
        label: '属性1',
        type: 'input',
        field: 'name',
        // 属性默认值
        value: '默认值'
      },
      {
        label: '属性2',
        type: 'select',
        field: 'type',
        options: [
          { label: '选项1', value: 'option1' },
          { label: '选项2', value: 'option2' }
        ]
      }
    ],
    // 事件列表
    event: [
      {
        type: 'change',
        description: '值改变时触发'
      },
      {
        type: 'click',
        description: '点击时触发'
      }
    ],
    // 样式编辑列表
    style: [
      {
        label: '宽度',
        type: 'input',
        field: 'width',
        value: '100%'
      },
      {
        label: '高度',
        type: 'input',
        field: 'height',
        value: '40px'
      }
    ],
    // 可执行函数列表
    action: [
      {
        type: 'reset',
        description: '重置组件',
        args: ['参数1', '参数2'],
        argsConfigs: [
          {
            label: '参数1',
            type: 'input',
            field: 'arg1'
          }
        ]
      }
    ]
  }
}

// 注册组件
pluginManager.component.register(Test);
```

--------------------------------

### Install epic-designer

Source: https://github.com/kchengz/epic-designer/blob/develop/packages/epic-designer/README.md

Install the epic-designer package using npm.

```bash
npm i epic-designer
```

--------------------------------

### Install @epic-designer/utils

Source: https://github.com/kchengz/epic-designer/blob/develop/packages/utils/README.md

Install the package using npm, yarn, or pnpm.

```bash
npm install @epic-designer/utils
# 或
yarn add @epic-designer/utils
# 或
pnpm add @epic-designer/utils
```

--------------------------------

### Setup Ant Design Vue v3.x

Source: https://github.com/kchengz/epic-designer/blob/develop/packages/epic-designer/README.md

Install Ant Design Vue v3.x dependencies and register the component in your main entry file. Note: v3.x is not actively tested, upgrading to v4.x is recommended.

```javascript
// Import epic-designer styles
import "epic-designer/dist/style.css";

// Import antd UI styles
import "ant-design-vue/dist/antd.css";

import { setupAntd } from "@epic-designer/antd";
// Use Antd UI
setupAntd();
```

--------------------------------

### Setup Ant Design Vue v4.x

Source: https://github.com/kchengz/epic-designer/blob/develop/packages/epic-designer/README.md

Install Ant Design Vue v4.x dependencies and register the component in your main entry file.

```bash
npm i ant-design-vue @epic-designer/antd
```

```javascript
// Import epic-designer styles
import "epic-designer/dist/style.css";

// Import antd UI reset styles
import "ant-design-vue/dist/reset.css";

import { setupAntd } from "@epic-designer/antd";
// Use Antd UI
setupAntd();
```

--------------------------------

### Iconfont Component Configuration

Source: https://github.com/kchengz/epic-designer/blob/develop/docs/guide/extensions/icon.md

This example shows how to configure an icon component using an Iconfont class name. The format is 'icon-{iconName}'.

```css
icon: 'icon-xxx'
```

--------------------------------

### Iconify Component Configuration

Source: https://github.com/kchengz/epic-designer/blob/develop/docs/guide/extensions/icon.md

This is an example of how to configure an icon component using the class name generated by Iconify. The format is 'icon--{prefix}--{iconName}'.

```css
icon: 'icon--mdi--ab-testing'
```

--------------------------------

### Get PageManager via Builder Ready Event

Source: https://github.com/kchengz/epic-designer/blob/develop/docs/guide/utils/pageManager.md

This snippet demonstrates how to obtain the PageManager instance when the EBuilder component is ready. The 'ready' event emits the PageManager object, which can then be used for further interactions.

```vue
<template>
  <div>
    <EBuilder ref="kfb" :pageSchema="pageSchema" @ready="handleReady">
    </EBuilder>

  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { EBuilder, PageManager, PageSchema } from 'epic-designer'
    
const pageSchema = ref<PageSchema>({
  "schemas": [
    {
      "type": "page",
      "id": "root",
      "label": "页面",
      "children": [
        {
          "label": "表单",
          "type": "form",
          "icon": "epic-icon-daibanshixiang",
          "name": "default",
          "props": {
            "labelWidth": 100,
            "labelCol": {
              "span": 5
            },
            "wrapperCol": {
              "span": 19
            },
            "hideRequiredMark": false,
            "labelPosition": "right",
            "size": "default",
            "requireAsteriskPosition": "left"
          },
          "children": [
            {
              "label": "上传文件",
              "type": "upload-file",
              "icon": "epic-icon-upload",
              "field": "upload",
              "input": true,
              "props": {
                "action": "https://examples.epicjs.cn/epic-mock/common/upload",
                "name": "file",
                "showFileList": true
              },
              "id": "upload-file_by35flst"
            }
          ],
          "id": "form_uknia964"
        }
      ]
    }
  ],
  "script": "const { defineExpose, getComponent } = this;

function test (){
    console.log('test')
}

// 通过defineExpose暴露的函数或者属性
defineExpose({
 test 
})"
})

function handleReady(pageManager: PageManager) {
  console.log(pageManager)
}

</script>
```

--------------------------------

### Activity Bar Extension Vue Component

Source: https://github.com/kchengz/epic-designer/blob/develop/docs/guide/extensions/activityBar.md

This is a basic Vue component that serves as the content for a custom activity bar module. No specific setup is required beyond including it in your project.

```vue
<template>
    <div>
        我是一个扩展模块
    </div>
</template>
```

--------------------------------

### Validate Form and Get Data

Source: https://github.com/kchengz/epic-designer/blob/develop/docs/guide/components/EBuilder.md

Utilize EBuilder with a form schema to validate user input and retrieve form data. The `validate` method on the EBuilder instance is used to trigger validation and return the form data.

```vue
<template>
	<div>
		<EBuilder ref="ebForm" :pageSchema="pageSchema" />
  		<button @click="handleValidate">获取数据</button>
  	<div>
  {{formData}}
  </div>
</div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { EBuilder } from "epic-designer";

const pageSchema = {
  schemas: [
    {
      type: "page",
      id: "root",
      children: [
        {
          label: "表单",
          type: "form",
          icon: "epic-icon-qiapian",
          name: "default",
          props: {
            labelWidth: 100,
            labelCol: {
              span: 5,
            },
            wrapperCol: {
              span: 19,
            },
            hideRequiredMark: false,
            labelPosition: "right",
            size: "default",
            requireAsteriskPosition: "left",
          },
          children: [
            {
              label: "输入框",
              type: "input",
              field: "input",
              icon: "epic-icon-write",
              input: true,
              props: {
                defaultValue: "",
                placeholder: "请输入",
                size: "default",
                type: "text",
              },
              id: "7k6ajqpxhl000",
            },
            {
              label: "数字输入框",
              type: "number",
              icon: "epic-icon-number",
              field: "number",
              input: true,
              props: {
                placeholder: "请输入",
                size: "default",
                controlsPosition: "default",
              },
              id: "i6x0mqlm6js00",
            },
            {
              label: "选择框",
              type: "select",
              icon: "epic-icon-xiala",
              field: "select",
              input: true,
              props: {
                options: [
                  {
                    label: "选项1",
                    value: "选项1",
                  },
                  {
                    label: "选项2",
                    value: "选项2",
                  },
                ],
                placeholder: "请选择",
                size: "default",
                effect: "light",
                placement: "bottom-start",
              },
              id: "80gl3fnca3g00",
            },
            {
              label: "单选框",
              type: "radio",
              icon: "epic-icon-danxuan-cuxiantiao",
              field: "radio",
              input: true,
              props: {
                options: [
                  {
                    label: "选项1",
                    value: "选项1",
                  },
                  {
                    label: "选项2",
                    value: "选项2",
                  },
                ],
                size: "default",
              },
              id: "2ggd4l3i109w0",
            },
          ],
          id: "eqf5rtg2ohc00",
        },
      ]
    },
  ],
};
    
const ebForm = ref(null)
const formData = ref(null)

async function handleValidate(){
  formData.value = {...(await ebForm.value.validate())}
}
</script>
```

--------------------------------

### Accessing Form Data with useFormItem

Source: https://github.com/kchengz/epic-designer/blob/develop/docs/guide/compositionApi/useFormItem.md

Use this hook within a form item component to get the reactive formData object. Access and modify form fields directly.

```vue
<script lang="ts" setup>
import { useFormItem } from 'epic-designer'

const { formData } = useFormItem()

// 访问表单数据
console.log(formData.username)
console.log(formData.password)
</script>
```

--------------------------------

### Build Project

Source: https://github.com/kchengz/epic-designer/blob/develop/packages/utils/README.md

Execute the build script to compile and package the project.

```bash
npm run build
```

--------------------------------

### Run Tests

Source: https://github.com/kchengz/epic-designer/blob/develop/packages/utils/README.md

Execute the test script to run the project's test suite.

```bash
npm test
```

--------------------------------

### Import Core Utilities

Source: https://github.com/kchengz/epic-designer/blob/develop/packages/utils/README.md

Import essential utility functions and managers from the @epic-designer/utils library.

```typescript
import {
  debounce,
  deepClone,
  getUUID,
  usePageManager,
  useRevoke
} from '@epic-designer/utils';
```

--------------------------------

### Component Configuration for Extension

Source: https://github.com/kchengz/epic-designer/blob/develop/docs/guide/extensions/component.md

Configuration file for a custom component, defining its properties, events, and styles for the designer.

```typescript
import { type ComponentConfigModel } from 'epic-designer'

export default {
  component: async () => await import('./index.vue'),
  groupName: "自定义组件",
  icon: "epic-icon-write",
  defaultSchema: {
    label: '测试扩展组件',
    type: 'test',
    props: {
      label: '测试组件'
    }
  },
  config: {
    attribute: [
      {
        label: '组件标题',
        type: 'input',
        field: 'label',
        value: '测试组件'
      }
    ],
    event: [
      {
        type: 'click',
        description: '点击按钮时触发'
      }
    ],
    style: [
      {
        label: '背景颜色',
        type: 'color',
        field: 'backgroundColor',
        value: '#f9f9f9'
      },
      {
        label: '边框颜色',
        type: 'color',
        field: 'borderColor',
        value: '#e0e0e0'
      }
    ]
  }
} as ComponentConfigModel
```

--------------------------------

### findInstanceAll

Source: https://github.com/kchengz/epic-designer/blob/develop/docs/guide/action/customFunctions.md

Finds all component instances matching a specified field and returns the complete component instance objects as an array.

```APIDOC
## findInstanceAll

### Description
Finds all component instances matching a specified field and returns the complete component instance objects as an array.

### Method
`findInstanceAll`

### Parameters
#### Query Parameters
- **queryValue** (string) - Required - The value to search for.
- **queryField** (string) - Optional - The field to search within. Defaults to a predefined field if not provided.
```

--------------------------------

### Link to Iconify CSS

Source: https://github.com/kchengz/epic-designer/blob/develop/docs/guide/extensions/icon.md

Use this link to directly include Iconify CSS for icons. Ensure the 'icons' parameter is correctly set.

```html
<link rel="stylesheet" href="https://api.iconify.design/mdi.css?icons=ab-testing">
```

--------------------------------

### Page Manager Methods

Source: https://github.com/kchengz/epic-designer/blob/develop/docs/guide/utils/pageManager.md

Provides methods to find and retrieve component instances based on various criteria.

```APIDOC
## Page Manager Methods

### find

**Description**: Finds a component instance by a specified field and returns its exposed properties and methods.

**Signature**: `find(queryValue: string, queryField?: string) => EpNodeInstance['exposed'] | null`

### findAll

**Description**: Finds all component instances matching the specified field and returns an array of their exposed properties and methods.

**Signature**: `findAll(queryValue: string, queryField?: string) => EpNodeInstance['exposed'][]`

### findInstance

**Description**: Finds a component instance by a specified field and returns the complete component instance object.

**Signature**: `findInstance(queryValue: string, queryField?: string) => EpNodeInstance | null`

### findInstanceAll

**Description**: Finds all component instances matching the specified field and returns an array of complete component instance objects.

**Signature**: `findInstanceAll(queryValue: string, queryField?: string) => EpNodeInstance[]`
```

--------------------------------

### findAll

Source: https://github.com/kchengz/epic-designer/blob/develop/docs/guide/action/customFunctions.md

Finds all component instances matching a specified field and returns their exposed properties and methods as an array.

```APIDOC
## findAll

### Description
Finds all component instances matching a specified field and returns their exposed properties and methods as an array.

### Method
`findAll`

### Parameters
#### Query Parameters
- **queryValue** (string) - Required - The value to search for.
- **queryField** (string) - Optional - The field to search within. Defaults to a predefined field if not provided.
```

--------------------------------

### Common Utility Functions

Source: https://github.com/kchengz/epic-designer/blob/develop/packages/utils/README.md

Provides various utility functions for common tasks like debouncing, deep cloning, UUID generation, string manipulation, and asynchronous component loading.

```APIDOC
## Common Utility Functions

### Debounce Function

#### Description
Creates a debounced function that delays invoking `func` until after `wait` milliseconds have elapsed since the last time the debounced function was invoked.

#### Usage
```typescript
import { debounce } from '@epic-designer/utils';

const debouncedHandler = debounce(() => {
  console.log('Executing debounced function');
}, 300);
```

### Deep Clone

#### Description
Performs a deep clone of an object or array.

#### Usage
```typescript
import { deepClone } from '@epic-designer/utils';

const originalData = { name: 'test', items: [1, 2, 3] };
const clonedData = deepClone(originalData);
```

### UUID Generation

#### Description
Generates a universally unique identifier (UUID).

#### Usage
```typescript
import { getUUID } from '@epic-designer/utils';

// Generate string type UUID (default length 6)
const stringId = getUUID();

// Generate number type UUID
const numberId = getUUID(8, 'number');
```

### String Utilities

#### Description
Provides utility functions for string manipulation.

#### Functions
- `capitalizeFirstLetter(str: string): string`: Capitalizes the first letter of a string.
- `getFileNameByUrl(url: string): string`: Extracts the filename from a URL.

#### Usage
```typescript
import { capitalizeFirstLetter, getFileNameByUrl } from '@epic-designer/utils';

// Capitalize first letter
const capitalized = capitalizeFirstLetter('hello'); // 'Hello'

// Get file name from URL
const fileName = getFileNameByUrl('https://example.com/path/file.jpg'); // 'file.jpg'
```

### Async Component Loading

#### Description
Loads a component asynchronously.

#### Usage
```typescript
import { loadAsyncComponent } from '@epic-designer/utils';

const AsyncComponent = loadAsyncComponent(
  () => import('./MyComponent.vue')
);
```
```

--------------------------------

### Vue Component for Extension

Source: https://github.com/kchengz/epic-designer/blob/develop/docs/guide/extensions/component.md

A sample Vue component to be extended into the designer. It includes basic template, script, and style.

```vue
<template>
  <div class="test-component">
    <h3>{{ label }}</h3>
    <p>我是扩展的组件</p>
    <button @click="handleClick">点击我</button>
  </div>
</template>

<script setup lang="ts">
defineProps({
  label: String
});

const emit = defineEmits<{(e: 'click'): void}>();

const handleClick = () => {
  emit('click');
};
</script>

<style scoped>
.test-component {
  padding: 16px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  background-color: #f9f9f9;
}

h3 {
  margin-top: 0;
  color: #333;
}

button {
  margin-top: 12px;
  padding: 8px 16px;
  background-color: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #66b1ff;
}
</style>
```

--------------------------------

### findInstance

Source: https://github.com/kchengz/epic-designer/blob/develop/docs/guide/action/customFunctions.md

Finds a component instance by a specified field and returns the complete component instance object.

```APIDOC
## findInstance

### Description
Finds a component instance by a specified field and returns the complete component instance object.

### Method
`findInstance`

### Parameters
#### Query Parameters
- **queryValue** (string) - Required - The value to search for.
- **queryField** (string) - Optional - The field to search within. Defaults to a predefined field if not provided.
```

--------------------------------

### find

Source: https://github.com/kchengz/epic-designer/blob/develop/docs/guide/action/customFunctions.md

Finds a component instance by a specified field and returns its exposed properties and methods.

```APIDOC
## find

### Description
Finds a component instance by a specified field and returns its exposed properties and methods.

### Method
`find`

### Parameters
#### Query Parameters
- **queryValue** (string) - Required - The value to search for.
- **queryField** (string) - Optional - The field to search within. Defaults to a predefined field if not provided.
```

--------------------------------

### Provide Global Configuration for Element Plus

Source: https://github.com/kchengz/epic-designer/blob/develop/docs/guide/start/i18n-cn.md

Use this to set the locale for Element Plus components within Epic Designer. Ensure Element Plus internationalization is already configured.

```tsx
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import { provideGlobalConfig } from "@epic-designer/element-plus";
provideGlobalConfig({ locale: zhCn });
```

--------------------------------

### String Utilities

Source: https://github.com/kchengz/epic-designer/blob/develop/packages/utils/README.md

Perform common string manipulations such as capitalizing the first letter of a string or extracting a filename from a URL.

```typescript
import { capitalizeFirstLetter, getFileNameByUrl } from '@epic-designer/utils';

// 首字母大写
const capitalized = capitalizeFirstLetter('hello'); // 'Hello'

// 从 URL 提取文件名
const fileName = getFileNameByUrl('https://example.com/path/file.jpg'); // 'file.jpg'
```

--------------------------------

### Manager Classes

Source: https://github.com/kchengz/epic-designer/blob/develop/packages/utils/README.md

Provides manager classes for handling pages, plugins, and undo/redo functionality.

```APIDOC
## Manager Classes

### Page Manager (usePageManager)

#### Description
Manages page component instances, form data, and component interactions.

#### Usage
```typescript
import { usePageManager } from '@epic-designer/utils';

const pageManager = usePageManager();

// Find component instance
const componentInstance = pageManager.find('componentId');

// Execute component actions
pageManager.executeActions([
  {
    type: 'component',
    componentId: 'myComponent',
    methodName: 'submit',
    args: '{}'
  }
]);

// Set form data
pageManager.setFormData('formId', { name: 'value' });
```

### Plugin Manager (pluginManager)

#### Description
Manages the registration, configuration, and lifecycle of component plugins.

#### Usage
```typescript
import { pluginManager } from '@epic-designer/utils';

// Register component
pluginManager.component.register({
  type: 'MyComponent',
  component: MyComponent,
  groupName: 'custom',
  title: 'My Component',
  icon: 'icon-component'
});

// Get component configuration
const config = pluginManager.component.getConfig('MyComponent');
```

### Revoke Manager (useRevoke)

#### Description
Provides undo and redo functionality for page editing.

#### Usage
```typescript
import { useRevoke } from '@epic-designer/utils';

const revoke = useRevoke(pageSchema, state, setSelectedNode);

// Undo operation
revoke.undo();

// Redo operation
revoke.redo();

// Push new record
revoke.push('Operation description');
```
```

--------------------------------

### defineExpose

Source: https://github.com/kchengz/epic-designer/blob/develop/docs/guide/action/customFunctions.md

Exposes custom functions or properties for external access. This function only needs to be executed once.

```APIDOC
## defineExpose

### Description
Exposes custom functions or properties for external access. This function only needs to be executed once.

### Method
`defineExpose`

### Parameters
#### Exposed Properties
- **exposed** (Record<string, any>) - Required - An object containing the functions or properties to expose.
```

--------------------------------

### Register Activity Bar Extension

Source: https://github.com/kchengz/epic-designer/blob/develop/docs/guide/extensions/activityBar.md

Use `pluginManager.panel.registerActivitybar` to add a new module to the activity bar. Ensure the `id` is unique to avoid conflicts. The `component` should be an async import of your Vue component.

```typescript
import { pluginManager } from "epic-designer";

// 安装扩展
export function setupDesignerExtensions(): void {
  // 添加活动栏
  pluginManager.panel.registerActivitybar({
    id: "test",
    title: "扩展活动栏",
    component: async () => await import("./activityBar/index.vue"),
  });
}
```

--------------------------------

### Render Components with JSON Schema

Source: https://github.com/kchengz/epic-designer/blob/develop/docs/guide/components/EBuilder.md

Use EBuilder to render components based on a provided JSON schema. Ensure the EBuilder component is imported.

```vue
<template>
  <div>
    <EBuilder :pageSchema="pageSchema" />
  </div>
</template>
<script lang="ts" setup>
import { EBuilder } from "epic-designer";

const pageSchema = {
  schemas: [
    {
      type: "page",
      id: "root",
      children: [
        {
          label: "输入框",
          type: "input",
          field: "input",
          icon: "epic-icon-write",
          input: true,
          props: {
            defaultValue: "",
            placeholder: "请输入",
            size: "default",
            type: "text",
          },
          id: "gbm1xhrrj5s00",
        },
      ]
    },
  ],
};
</script>
```

--------------------------------

### Schema Generation and Manipulation

Source: https://github.com/kchengz/epic-designer/blob/develop/packages/utils/README.md

Utilities for generating new schemas, finding schemas based on criteria, mapping schemas to new structures, and finding a specific schema by its ID.

```typescript
import {
  generateNewSchema,
  findSchemas,
  mapSchemas,
  findSchemaById
} from '@epic-designer/utils';

// 生成新的 schema（深拷贝 + 生成新 ID）
const newSchema = generateNewSchema(originalSchema);

// 查找 schemas
const foundSchemas = findSchemas(schemas, (item) => item.type === 'input');

// 映射 schemas
const mappedSchemas = mapSchemas(schemas, (item) => ({
  ...item,
  modified: true
}));
```

--------------------------------

### EBuilder Basic Usage

Source: https://github.com/kchengz/epic-designer/blob/develop/packages/epic-designer/README.md

Basic usage of the EBuilder component with a predefined page schema.

```vue
<template>
  <div>
    <EBuilder :pageSchema="pageSchema" />
  </div>
</template>
<script setup>
import { EBuilder } from "epic-designer";

const pageSchema = {
  schemas: [
    {
      type: "page",
      id: "root",
      children: [
        {
          label: "输入框",
          type: "input",
          field: "input",
          icon: "epic-icon-write",
          input: true,
          props: {
            defaultValue: "",
            placeholder: "请输入",
            size: "default",
            type: "text",
          },
          id: "gbm1xhrrj5s00",
        },
      ]
    },
  ],
};
</script>
```

--------------------------------

### ComponentConfigModel Interface

Source: https://github.com/kchengz/epic-designer/blob/develop/docs/guide/extensions/component.md

Defines the structure for configuring a component in Epic Designer. Includes properties for component definition, grouping, icons, default schema, edit constraints, configuration options (attributes, styles, events, actions), model binding, and sorting.

```typescript
export interface ComponentConfigModel {
  // 组件
  component: any;
  // 分组名称（组件分组），不设置分组时仅注册，但不会显示在组件列表中，可选
  groupName?: string;
  // 组件图标
  icon?: string;
  // 默认组件结构数据
  defaultSchema: ComponentSchema;
  // 设计编辑约束
  editConstraints?: EditConstraintsModel;
  // 配置
  config: {
    // 属性编辑列表
    attribute?: ComponentSchema[];
    // 样式编辑组件列表
    style?: ComponentSchema[];
    // 可触发事件
    event?: EventModel[];
    // 可执行函数
    action?: ActionModel[];
  };
  // 输入表单组件v-model绑定变量名称 默认 modelValue
  bindModel?: string;
  // 用于组件排序，可选 默认值1000, 值越小，组件越靠前
  sort?: number;
}
```

--------------------------------

### Load Async Component

Source: https://github.com/kchengz/epic-designer/blob/develop/packages/utils/README.md

Dynamically load Vue components using loadAsyncComponent. This is beneficial for code splitting and improving initial load times.

```typescript
import { loadAsyncComponent } from '@epic-designer/utils';

const AsyncComponent = loadAsyncComponent(
  () => import('./MyComponent.vue')
);
```

--------------------------------

### EDesigner Basic Usage

Source: https://github.com/kchengz/epic-designer/blob/develop/packages/epic-designer/README.md

Basic usage of the EDesigner component. Ensure the parent container has a height.

```vue
<template>
  <div class="h-full">
    <EDesigner />
  </div>
</template>
<script setup lang="ts">
import { EDesigner } from "epic-designer";
</script>
<style>
.h-full {
  height: 100vh;
}
</style>
```

--------------------------------

### Data Processing Tools

Source: https://github.com/kchengz/epic-designer/blob/develop/packages/utils/README.md

Utilities for processing schema data, including generation, searching, mapping, and finding schemas by ID.

```APIDOC
## Data Processing Tools

### Schema Processing

#### Description
Provides functions for manipulating and querying schema data.

#### Functions
- `generateNewSchema(schema: object): object`: Generates a new schema by deep cloning and assigning a new ID.
- `findSchemas(schemas: object[], predicate: Function): object[]`: Finds schemas that match a given predicate function.
- `mapSchemas(schemas: object[], mapper: Function): object[]`: Maps schemas to a new structure using a mapper function.
- `findSchemaById(schemas: object[], id: string): object | undefined`: Finds a schema by its ID.

#### Usage
```typescript
import { 
  generateNewSchema, 
  findSchemas, 
  mapSchemas,
  findSchemaById 
} from '@epic-designer/utils';

// Generate a new schema (deep clone + generate new ID)
const newSchema = generateNewSchema(originalSchema);

// Find schemas
const foundSchemas = findSchemas(schemas, (item) => item.type === 'input');

// Map schemas
const mappedSchemas = mapSchemas(schemas, (item) => ({
  ...item,
  modified: true
}));

// Find schema by ID
const schemaById = findSchemaById(schemas, 'some-id');
```
```

--------------------------------

### Iconfont CSS File URL

Source: https://github.com/kchengz/epic-designer/blob/develop/docs/guide/extensions/icon.md

This is the URL for the Iconfont CSS file. Copy this content and paste it into your project's .css file to use Iconfont icons.

```css
//at.alicdn.com/t/font_8d5l8fzk5b87iudi.css
```

--------------------------------

### EBuilder Basic Usage

Source: https://github.com/kchengz/epic-designer/blob/develop/README.md

Use the EBuilder component to render a page from a JSON schema. The pageSchema prop defines the structure and components of the page.

```vue
<template>
  <div>
    <EBuilder :pageSchema="pageSchema" />
  </div>
</template>
<script setup>
import { EBuilder } from "epic-designer";

const pageSchema = {
  schemas: [
    {
      type: "page",
      id: "root",
      children: [
        {
          label: "输入框",
          type: "input",
          field: "input",
          icon: "epic-icon-write",
          input: true,
          props: {
            defaultValue: "",
            placeholder: "请输入",
            size: "default",
            type: "text",
          },
          id: "gbm1xhrrj5s00",
        },
      ],
    },
  ],
};
</script>
```

--------------------------------

### Iconify CSS for 'ab-testing' Icon

Source: https://github.com/kchengz/epic-designer/blob/develop/docs/guide/extensions/icon.md

This CSS provides the styling for the 'ab-testing' icon from the Material Design Icons set when using Iconify's CSS API. It defines the icon's appearance and SVG data.

```css
.icon--mdi {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.icon--mdi--ab-testing {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M4 2a2 2 0 0 0-2 2v8h2V8h2v4h2V4a2 2 0 0 0-2-2zm0 2h2v2H4m18 9.5V14a2 2 0 0 0-2-2h-4v10h4a2 2 0 0 0 2-2v-1.5a1.54 1.54 0 0 0-1.5-1.5a1.54 1.54 0 0 0 1.5-1.5M20 20h-2v-2h2zm0-4h-2v-2h2M5.79 21.61l-1.58-1.22l14-18l1.58 1.22Z'/%3E%3C/svg%3E");
}
```

--------------------------------

### Plugin Manager Registration

Source: https://github.com/kchengz/epic-designer/blob/develop/packages/utils/README.md

Register custom components with the plugin manager to make them available within the Epic Designer environment. This involves providing component details, the component itself, and group information.

```typescript
import { pluginManager } from '@epic-designer/utils';

// 注册组件
pluginManager.component.register({
  type: 'MyComponent',
  component: MyComponent,
  groupName: 'custom',
  title: '我的组件',
  icon: 'icon-component'
});

// 获取组件配置
const config = pluginManager.component.getConfig('MyComponent');
```

--------------------------------

### Revoke Manager for Undo/Redo

Source: https://github.com/kchengz/epic-designer/blob/develop/packages/utils/README.md

Implement undo and redo functionality for page editing using the useRevoke hook. It allows managing operation history, including undoing, redoing, and pushing new operations with descriptions.

```typescript
import { useRevoke } from '@epic-designer/utils';

const revoke = useRevoke(pageSchema, state, setSelectedNode);

// 撤销操作
evoke.undo();

// 重做操作
revoke.redo();

// 推送新记录
revoke.push('操作描述');
```

--------------------------------

### Page Manager Usage

Source: https://github.com/kchengz/epic-designer/blob/develop/packages/utils/README.md

Manage component instances, form data, and interactions within a page using the usePageManager hook. It allows finding components, executing actions, and setting form data.

```typescript
import { usePageManager } from '@epic-designer/utils';

const pageManager = usePageManager();

// 查找组件实例
const componentInstance = pageManager.find('componentId');

// 执行组件方法
pageManager.executeActions([{
  type: 'component',
  componentId: 'myComponent',
  methodName: 'submit',
  args: '{}'
}]);

// 设置表单数据
pageManager.setFormData('formId', { name: 'value' });
```

--------------------------------

### Generate UUID

Source: https://github.com/kchengz/epic-designer/blob/develop/packages/utils/README.md

Generate universally unique identifiers (UUIDs) using getUUID. Supports both string and number types, with configurable length for string UUIDs.

```typescript
import { getUUID } from '@epic-designer/utils';

// 生成字符串类型 UUID（默认长度 6）
const stringId = getUUID();

// 生成数字类型 UUID
const numberId = getUUID(8, 'number');
```

--------------------------------

### Tabbed Content Interaction with jQuery

Source: https://github.com/kchengz/epic-designer/blob/develop/docs/public/icons/iconify.html

This JavaScript code initializes tabbed content functionality on page load using jQuery. It handles click events to show/hide content panes and manage active tab states.

```javascript
$(document).ready(function () {
    $(".tab-container .content:first").show();
    $("#tabs li").click(function (e) {
        var tabContent = $(".tab-container .content");
        var index = $(this).index();
        if ($(this).hasClass("active")) {
            return;
        } else {
            $("#tabs li").removeClass("active");
            $(this).addClass("active");
            tabContent.hide().eq(index).fadeIn();
        }
    });
});
```

--------------------------------

### useFormItem Hook API

Source: https://github.com/kchengz/epic-designer/blob/develop/docs/guide/compositionApi/useFormItem.md

The useFormItem hook provides access to the form's data context. It returns the formData object, which is a reactive object allowing direct access and modification of form field values.

```APIDOC
## useFormItem Hook

### Description
The `useFormItem` hook is used within form item components to access the form data context. It retrieves the `formData` object via dependency injection, enabling child components to easily access and modify form data.

### Method
`useFormItem()`

### Endpoint
N/A (This is a hook, not an API endpoint)

### Parameters
None

### Returns
- **formData** (`FormDataModel`) - A reactive object representing the current form's data. It allows direct access and modification of form field values.

### Request Example
```typescript
// Accessing form field values
const username = formData.username

// Modifying form field values
formData.password = 'newPassword'
```

### Response Example
```json
{
  "username": "exampleUser",
  "password": "examplePassword"
}
```

### Notes
- `useFormItem` must be used within the scope provided by `useForm`. Otherwise, it will return an empty reactive object.
- `formData` is a reactive object; modifying its properties will automatically trigger view updates.
- For nested form fields, utility functions like `getValueByPath` and `setValueByPath` can be used.
```

--------------------------------

### Deep Clone Object

Source: https://github.com/kchengz/epic-designer/blob/develop/packages/utils/README.md

Utilize deepClone to create a completely independent copy of an object, including nested objects and arrays. This is useful for preventing unintended modifications to original data structures.

```typescript
import { deepClone } from '@epic-designer/utils';

const originalData = { name: 'test', items: [1, 2, 3] };
const clonedData = deepClone(originalData);
```

--------------------------------

### Modifying Form Field Values

Source: https://github.com/kchengz/epic-designer/blob/develop/docs/guide/compositionApi/useFormItem.md

Demonstrates how to access and modify form field values using the reactive formData object returned by useFormItem. Changes automatically trigger view updates.

```typescript
// 获取表单字段值
const username = formData.username

// 修改表单字段值ormData.password = 'newPassword'
```

--------------------------------

### EditConstraintsModel Interface

Source: https://github.com/kchengz/epic-designer/blob/develop/docs/guide/extensions/component.md

Defines constraints for editing components, such as immovability and locking. Use this to control user interactions with components in the design editor.

```typescript
export interface EditConstraintsModel {
  // 当前组件是否固定不可拖动，可选
  immovable?: boolean;
  // 子节点是否固定不可拖动,只控制下一级，可选
  childImmovable?: boolean;
  // 表单字段是否固定 不添加随机UUID
  fixedField?: boolean;
  // 组件锁定，不可编辑，不可选中，不可复制删除
  locked?: boolean;
}
```

--------------------------------

### Debounce Function

Source: https://github.com/kchengz/epic-designer/blob/develop/packages/utils/README.md

Use the debounce function to limit the rate at which a function can be called. It ensures that a function is not called again until a certain amount of time has passed since the last invocation.

```typescript
import { debounce } from '@epic-designer/utils';

const debouncedHandler = debounce(() => {
  console.log('执行防抖函数');
}, 300);
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.