扩展快速示例

快速示例本质上并不是新的组件，而是基于已有组件在特定业务场景下预先配置好的实现案例，便于您在后续设计中一键复用、快速落地。

本地存储临时快速示例

设计器内置了将当前设计好的组件保存为快速示例的能力，并默认缓存在本地浏览器中。若您仅需要在本机或当前浏览器中临时复用示例，可按以下步骤操作：

1. 在表单设计器中点击左侧工具栏「组件」。
2. 在组件面板中找到「快速示例」分组，此处可查看所有已保存的快速示例。
3. 选中任意已设计好的组件，在右侧工具栏中点击「JSON」。
4. 在 JSON 面板顶部点击「保存为快速示例」按钮，填写名称、描述等信息后确认，即可将当前配置保存为本地快速示例。

本地快速示例存储在浏览器本地缓存中，更换浏览器或清理缓存后将无法继续使用；若需团队共享或长期沉淀，请参考下文的「二次开发内置快速示例」。

二次开发内置快速示例

如果您希望将某些常用搭配沉淀为内置快速示例，随项目一同发布并在所有环境中可用，可按以下步骤进行二次开发：

1. 找到快速示例定义路径：...\src\designer\config\demo，该目录存放了所有内置快速示例的定义。

2. 参考任意现有的快速示例，创建一个新的 TypeScript 配置文件（例如：MyQuickDemo.ts），并在其中定义该快速示例所对应的组件初始配置。

3. 在 index.ts（src/designer/config/demo/index.ts）中引入该配置文件，并在 quickDemoDesignComs 中添加该快速示例：

import { MyQuickDemo } from './MyQuickDemo'

const quickDemoDesignComs = {
  MyQuickDemo: {
    menuRootKey: 'quickDemo',
    menuItem: {
      order: 1,
      label: '新的快速示例',
      desc: '',
      icon: 'designer:input',
      key: 'MyQuickDemo',
      // 实际组件名称，与 MyQuickDemo 配置中的 component 属性保持一致
      componentName: 'Input',
      defaultModel: cloneDeep(MyQuickDemo)
    }
  }
}