export const widgets = [
  {
    name: 'Table',
    displayName: 'è¡¨æ ¼',
    description: 'æ˜¾ç¤ºåˆ†é¡µçš„è¡¨æ ¼æ•°æ�®',
    component: 'Table',
    properties: {
      title: {
        type: 'string',
        displayName: 'Title',
        validation: {
          schema: { type: 'string' },
        },
      },
      data: {
        type: 'code',
        displayName: 'Table data',
        validation: {
          schema: {
            type: 'array',
            element: { type: 'object' },
            optional: true,
          },
        },
      },
      loadingState: {
        type: 'toggle',
        displayName: 'Loading state',
        validation: {
          schema: { type: 'boolean' },
        },
      },
      columns: {
        type: 'array',
        displayName: 'Table Columns',
        // validation: {
        //   schema: {
        //     type: 'array',
        //     element: {
        //       type: 'union',
        //       schemas: [
        //         {
        //           type: 'object',
        //           object: {
        //             columnType: { type: 'string' },
        //             name: { type: 'string' },
        //             textWrap: { type: 'string' },
        //             key: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
        //             textColor: { type: 'string' },
        //             regex: { type: 'string' },
        //             minLength: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
        //             maxLength: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
        //             customRule: { type: 'string' },
        //           },
        //         },
        //         {
        //           type: 'object',
        //           object: {
        //             columnType: { type: 'string' },
        //             name: { type: 'string' },
        //             key: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
        //           },
        //           isEditable: { type: 'boolean' },
        //         },
        //         {
        //           type: 'object',
        //           object: {
        //             columnType: { type: 'string' },
        //             name: { type: 'string' },
        //             activeColor: { type: 'string' },
        //             isEditable: { type: 'boolean' },
        //           },
        //         },
        //         {
        //           type: 'object',
        //           object: {
        //             columnType: { type: 'string' },
        //             name: { type: 'string' },
        //             key: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
        //             values: {
        //               type: 'union',
        //               schemas: [
        //                 { type: 'array', element: { type: 'string' } },
        //                 { type: 'array', element: { type: 'number' } },
        //               ],
        //             },
        //             labels: {
        //               type: 'union',
        //               schemas: [
        //                 { type: 'array', element: { type: 'string' } },
        //                 { type: 'array', element: { type: 'number' } },
        //               ],
        //             },
        //           },
        //           isEditable: { type: 'boolean' },
        //         },
        //         {
        //           type: 'object',
        //           object: {
        //             columnType: { type: 'string' },
        //             name: { type: 'string' },
        //             key: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
        //             values: {
        //               type: 'union',
        //               schemas: [
        //                 { type: 'array', element: { type: 'string' } },
        //                 { type: 'array', element: { type: 'number' } },
        //               ],
        //             },
        //             labels: {
        //               type: 'union',
        //               schemas: [
        //                 { type: 'array', element: { type: 'string' } },
        //                 { type: 'array', element: { type: 'number' } },
        //               ],
        //             },
        //           },
        //           isEditable: { type: 'boolean' },
        //         },
        //         {
        //           type: 'object',
        //           object: {
        //             columnType: { type: 'string' },
        //             name: { type: 'string' },
        //             key: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
        //             dateFormat: { type: 'string' },
        //             parseDateFormat: { type: 'string' },
        //             isTimeChecked: { type: 'boolean' },
        //             isEditable: { type: 'boolean' },
        //           },
        //         },
        //       ],
        //     },
        //   },
        // },
      },
      useDynamicColumn: {
        type: 'toggle',
        displayName: 'ä½¿ç”¨åŠ¨æ€�åˆ—',
        validation: {
          schema: { type: 'boolean' },
        },
      },
      columnData: {
        type: 'code',
        displayName: 'åˆ—æ•°æ�®',
      },
      rowsPerPage: {
        type: 'code',
        displayName: 'æ¯�é¡µè¡Œæ•°',
        validation: {
          schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
        },
      },
      serverSidePagination: {
        type: 'toggle',
        displayName: 'æœ�åŠ¡å™¨ç«¯åˆ†é¡µ',
        validation: {
          schema: { type: 'boolean' },
        },
      },
      enableNextButton: {
        type: 'toggle',
        displayName: 'å�¯ç”¨ä¸‹ä¸€é¡µæŒ‰é’®',
        validation: {
          schema: { type: 'boolean' },
        },
      },
      enabledSort: {
        type: 'toggle',
        displayName: 'å�¯ç”¨æ�’åº�',
        validation: {
          schema: { type: 'boolean' },
        },
      },
      hideColumnSelectorButton: {
        type: 'toggle',
        displayName: 'Hide column selector button',
        validation: {
          schema: { type: 'boolean' },
        },
      },
      enablePrevButton: {
        type: 'toggle',
        displayName: 'å�¯ç”¨ä¸Šä¸€é¡µæŒ‰é’®',
        validation: {
          schema: { type: 'boolean' },
        },
      },
      totalRecords: {
        type: 'code',
        displayName: 'æœ�åŠ¡å™¨ç«¯æ€»è®°å½•æ•°',
        validation: {
          schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
        },
      },
      clientSidePagination: {
        type: 'toggle',
        displayName: 'Client-side pagination',
        validation: {
          schema: { type: 'boolean' },
        },
      },
      serverSideSearch: {
        type: 'toggle',
        displayName: 'Server-side search',
        validation: {
          schema: { type: 'boolean' },
        },
      },
      serverSideSort: {
        type: 'toggle',
        displayName: 'Server-side sort',
        validation: {
          schema: { type: 'boolean' },
        },
      },
      serverSideFilter: {
        type: 'toggle',
        displayName: 'Server-side filter',
        validation: {
          schema: { type: 'boolean' },
        },
      },
      actionButtonBackgroundColor: {
        type: 'color',
        displayName: 'æŒ‰é’®èƒŒæ™¯é¢œè‰²',
        validation: {
          schema: { type: 'string' },
        },
      },
      actionButtonTextColor: {
        type: 'color',
        displayName: 'æŒ‰é’®æ–‡å­—é¢œè‰²',
        validation: {
          schema: { type: 'string' },
        },
      },
      displaySearchBox: {
        type: 'toggle',
        displayName: 'Show search box',
        validation: {
          schema: { type: 'boolean' },
        },
      },
      showDownloadButton: {
        type: 'toggle',
        displayName: 'Show download button',
        validation: {
          schema: { type: 'boolean' },
        },
      },
      showFilterButton: {
        type: 'toggle',
        displayName: 'Show filter button',
        validation: {
          schema: { type: 'boolean' },
        },
      },
      showBulkUpdateActions: {
        type: 'toggle',
        displayName: 'æ˜¾ç¤ºæ›´æ–°æŒ‰é’®',
        validation: {
          schema: { type: 'boolean' },
        },
      },
      allowSelection: {
        type: 'toggle',
        displayName: 'æ˜¾ç¤ºé€‰æ‹©æ¡†',
        validation: {
          schema: { type: 'boolean' },
        },
      },
      showBulkSelector: {
        type: 'toggle',
        displayName: 'Bulk selection',
        validation: {
          schema: { type: 'boolean' },
        },
      },
      highlightSelectedRow: {
        type: 'toggle',
        displayName: 'Highlight selected row',
        validation: {
          schema: { type: 'boolean' },
        },
      },
      defaultSelectedRow: {
        type: 'code',
        displayName: 'Default selected row',
        validation: {
          schema: {
            type: 'object',
          },
        },
      },

      showAddNewRowButton: {
        type: 'toggle',
        displayName: 'æ˜¾ç¤ºæ·»åŠ æ–°è¡ŒæŒ‰é’®',
        validation: {
          schema: { type: 'boolean' },
        },
      },
    },
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop ' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    defaultSize: {
      width: 20,
      height: 358,
    },
    events: {
      onRowHovered: { displayName: 'é¼ æ ‡æ‚¬å�œåœ¨è¡Œæ—¶' },
      onRowClicked: { displayName: 'ç‚¹å‡»è¡Œæ—¶' },
      onBulkUpdate: { displayName: 'ä¿�å­˜æ›´æ”¹æ—¶' },
      onPageChanged: { displayName: 'é¡µç �æ”¹å�˜æ—¶' },
      onSearch: { displayName: 'æ�œç´¢æ—¶' },
      onCancelChanges: { displayName: 'å�–æ¶ˆä¿®æ”¹æ—¶' },
      onSort: { displayName: 'æ�’åº�æ—¶' },
      onCellValueChanged: { displayName: 'å�•å…ƒæ ¼å€¼ä¿®æ”¹æ—¶' },
      onFilterChanged: { displayName: 'è¿‡æ»¤æ�¡ä»¶æ”¹å�˜æ—¶' },
      onNewRowsAdded: { displayName: 'æ·»åŠ æ–°è¡Œæ—¶' },
    },
    styles: {
      textColor: {
        type: 'color',
        displayName: 'Text Color',
        validation: {
          schema: { type: 'string' },
        },
      },
      actionButtonRadius: {
        type: 'code',
        displayName: 'Action Button Radius',
        validation: {
          schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'boolean' }] },
        },
      },
      tableType: {
        type: 'select',
        displayName: 'Table type',
        options: [
          { name: 'æœ‰è¾¹æ¡†', value: 'table-bordered' },
          { name: 'æ— è¾¹æ¡†', value: 'table-borderless' },
          { name: 'ç»�å…¸', value: 'table-classic' },
          { name: 'è¡¨æ ¼çº¿', value: 'table-striped' },
          { name: 'æœ‰è¡¨æ ¼çº¿å’Œè¾¹æ¡†', value: 'table-striped table-bordered' },
        ],
        validation: {
          schema: { type: 'string' },
        },
      },
      cellSize: {
        type: 'select',
        displayName: 'Cell size',
        options: [
          { name: 'ç´§å‡‘', value: 'compact' },
          { name: 'å®½æ�¾', value: 'spacious' },
        ],
        validation: {
          schema: { type: 'string' },
        },
      },
      borderRadius: {
        type: 'code',
        displayName: 'Border Radius',
        validation: {
          schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
        },
      },
      visibility: {
        type: 'toggle',
        displayName: 'Visibility',
        validation: {
          schema: { type: 'boolean' },
        },
      },
      disabledState: {
        type: 'toggle',
        displayName: 'Disable',
        validation: {
          schema: { type: 'boolean' },
        },
      },
    },
    exposedVariables: {
      selectedRow: {},
      changeSet: {},
      dataUpdates: [],
      pageIndex: 1,
      searchText: '',
      selectedRows: [],
      filters: [],
    },
    actions: [
      {
        handle: 'setPage',
        displayName: 'è®¾ç½®é¡µç �',
        params: [
          {
            handle: 'page',
            displayName: 'é¡µç �',
            defaultValue: '{{1}}',
          },
        ],
      },
      {
        handle: 'selectRow',
        displayName: 'é€‰æ‹©è¡Œ',
        params: [
          { handle: 'key', displayName: 'é”®' },
          { handle: 'value', displayName: 'å€¼' },
        ],
      },
      {
        handle: 'deselectRow',
        displayName: 'å�–æ¶ˆé€‰æ‹©è¡Œ',
      },
      {
        handle: 'discardChanges',
        displayName: 'æ”¾å¼ƒä¿®æ”¹',
      },
      {
        displayName: 'Download table data',
        handle: 'downloadTableData',
        params: [
          {
            handle: 'type',
            displayName: 'Type',
            options: [
              { name: 'Download as Excel', value: 'xlsx' },
              { name: 'Download as CSV', value: 'csv' },
              { name: 'Download as PDF', value: 'pdf' },
            ],
            defaultValue: `{{Download as Excel}}`,
            type: 'select',
          },
        ],
      },
    ],
    definition: {
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      properties: {
        title: { value: 'Table' },
        visible: { value: '{{true}}' },
        loadingState: { value: '{{false}}' },
        data: {
          value:
            "{{ [ \n\t\t{ id: 1, name: 'å¼ ä¸‰', email: 'zhangsan@example.com'}, \n\t\t{ id: 2, name: 'æ��å››', email: 'lisi@example.com'}, \n\t\t{ id: 3, name: 'ç�‹äº”', email: 'wang@example.com'}, \n\t\t{ id: 4, name: 'èµµå…­', email: 'zhao@example.com'} \n] }}",
        },
        useDynamicColumn: { value: '{{false}}' },
        columnData: {
          value: "{{[{name: 'email', key: 'email'}, {name: 'Full name', key: 'name', isEditable: true}]}}",
        },
        rowsPerPage: { value: '{{10}}' },
        serverSidePagination: { value: '{{false}}' },
        enableNextButton: { value: '{{true}}' },
        enablePrevButton: { value: '{{true}}' },
        totalRecords: { value: '' },
        clientSidePagination: { value: '{{true}}' },
        serverSideSort: { value: '{{false}}' },
        serverSideFilter: { value: '{{false}}' },
        displaySearchBox: { value: '{{true}}' },
        showDownloadButton: { value: '{{true}}' },
        showFilterButton: { value: '{{true}}' },
        autogenerateColumns: { value: true, generateNestedColumns: true },
        columns: {
          value: [
            {
              name: 'id',
              id: 'e3ecbf7fa52c4d7210a93edb8f43776267a489bad52bd108be9588f790126737',
              autogenerated: true,
            },
            {
              name: 'name',
              id: '5d2a3744a006388aadd012fcc15cc0dbcb5f9130e0fbb64c558561c97118754a',
              autogenerated: true,
            },
            {
              name: 'email',
              id: 'afc9a5091750a1bd4760e38760de3b4be11a43452ae8ae07ce2eebc569fe9a7f',
              autogenerated: true,
            },
          ],
        },
        showBulkUpdateActions: { value: '{{true}}' },
        showBulkSelector: { value: '{{false}}' },
        highlightSelectedRow: { value: '{{false}}' },
        columnSizes: { value: '{{({})}}' },
        actions: { value: [] },
        enabledSort: { value: '{{true}}' },
        hideColumnSelectorButton: { value: '{{false}}' },
        defaultSelectedRow: { value: '{{{"id":1}}}' },
        showAddNewRowButton: { value: '{{true}}' },
        allowSelection: { value: '{{true}}' },
      },
      events: [],
      styles: {
        textColor: { value: '#000' },
        actionButtonRadius: { value: '0' },
        visibility: { value: '{{true}}' },
        disabledState: { value: '{{false}}' },
        cellSize: { value: 'compact' },
        borderRadius: { value: '0' },
        tableType: { value: 'table-bordered' },
      },
    },
  },
  {
    name: 'Button',
    displayName: 'displayName',
    description: 'ç”¨æˆ·ç‚¹å‡»è§¦å�‘æŸ¥è¯¢ã€�æ��ç¤ºä¿¡æ�¯ç­‰æ“�ä½œ',
    component: 'Button',
    defaultSize: {
      width: 3,
      height: 30,
    },
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    properties: {
      text: {
        type: 'code',
        displayName: 'Button Text',
        validation: {
          schema: { type: 'string' },
        },
      },
      loadingState: {
        type: 'toggle',
        displayName: 'Loading State',
        validation: {
          schema: { type: 'boolean' },
        },
      },
      badge: {
        type: 'number',
        displayName: 'è§’æ ‡æ˜¾ç¤ºå€¼',
        validation: {
          schema: { type: 'number' },
        },
      },
    },
    events: {
      onClick: { displayName: 'å�•å‡»æ—¶' },
      onHover: { displayName: 'æ‚¬å�œæ—¶' },
    },
    styles: {
      backgroundColor: {
        type: 'color',
        displayName: 'Background color',
        validation: {
          schema: { type: 'string' },
          defaultValue: false,
        },
      },
      textColor: {
        type: 'color',
        displayName: 'Text color',
        validation: {
          schema: { type: 'string' },
          defaultValue: false,
        },
      },
      loaderColor: {
        type: 'color',
        displayName: 'Loader color',
        validation: {
          schema: { type: 'string' },
          defaultValue: false,
        },
      },
      visibility: {
        type: 'toggle',
        displayName: 'Visibility',
        validation: {
          schema: { type: 'boolean' },
          defaultValue: false,
        },
      },
      disabledState: {
        type: 'toggle',
        displayName: 'Disable',
        validation: {
          schema: { type: 'boolean' },
          defaultValue: false,
        },
      },
      borderRadius: {
        type: 'number',
        displayName: 'Border radius',
        validation: {
          schema: { type: 'number' },
          defaultValue: false,
        },
      },
      borderColor: {
        type: 'color',
        displayName: 'è¾¹æ¡†é¢œè‰²',
        validation: {
          schema: { type: 'string' },
          defaultValue: false,
        },
      },
    },
    exposedVariables: {
      buttonText: 'Button',
    },
    actions: [
      {
        handle: 'click',
        displayName: 'ç‚¹å‡»',
      },
      {
        handle: 'setText',
        displayName: 'è®¾ç½®æ–‡æœ¬',
        params: [{ handle: 'text', displayName: 'æ–‡æœ¬', defaultValue: 'New Text' }],
      },
      {
        handle: 'setBadge',
        displayName: 'è®¾ç½®è§’æ ‡',
        params: [{ handle: 'text', displayName: 'è§’æ ‡çš„å€¼', defaultValue: 1 }],
      },
      {
        handle: 'disable',
        displayName: 'ç¦�ç”¨',
        params: [{ handle: 'disable', displayName: 'å€¼', defaultValue: `{{false}}`, type: 'toggle' }],
      },
      {
        handle: 'visibility',
        displayName: 'æ˜¯å�¦æ˜¾ç¤º',
        params: [{ handle: 'visible', displayName: 'å€¼', defaultValue: `{{false}}`, type: 'toggle' }],
      },
      {
        handle: 'loading',
        displayName: 'è½½å…¥çŠ¶æ€�',
        params: [{ handle: 'loading', displayName: 'å€¼', defaultValue: `{{false}}`, type: 'toggle' }],
      },
    ],
    definition: {
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      properties: {
        text: { value: `Button` },
        loadingState: { value: `{{false}}` },
        badge: { value: 0 },
      },
      events: [],
      styles: {
        backgroundColor: { value: '#375FCF' },
        textColor: { value: '#fff' },
        loaderColor: { value: '#fff' },
        visibility: { value: '{{true}}' },
        borderRadius: { value: '{{0}}' },
        borderColor: { value: '#375FCF' },
        disabledState: { value: '{{false}}' },
      },
    },
  },
  //   {
  //     name: 'Chart',
  //     displayName: 'Chart',
  //     description: 'Display charts',
  //     component: 'Chart',
  //     defaultSize: {
  //       width: 20,
  //       height: 400,
  //     },
  //     others: {
  //       showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
  //       showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
  //     },
  //     properties: {
  //       title: {
  //         type: 'code',
  //         displayName: 'Title',
  //         validation: {
  //           schema: {
  //             type: 'string',
  //           },
  //         },
  //       },
  //       data: {
  //         type: 'json',
  //         displayName: 'Data',
  //         validation: {
  //           schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'array' }] },
  //         },
  //       },
  //       loadingState: {
  //         type: 'toggle',
  //         displayName: 'Loading State',
  //         validation: {
  //           schema: { type: 'boolean' },
  //         },
  //       },
  //       markerColor: {
  //         type: 'color',
  //         displayName: 'Marker color',
  //         validation: {
  //           schema: {
  //             type: 'string',
  //           },
  //         },
  //       },
  //       showAxes: {
  //         type: 'toggle',
  //         displayName: 'Show axes',
  //         validation: {
  //           schema: {
  //             type: 'boolean',
  //           },
  //         },
  //       },
  //       showGridLines: {
  //         type: 'toggle',
  //         displayName: 'Show grid lines',
  //         validation: {
  //           schema: {
  //             type: 'boolean',
  //           },
  //         },
  //       },
  //       type: {
  //         type: 'select',
  //         displayName: 'Chart type',
  //         options: [
  //           { name: 'Line', value: 'line' },
  //           { name: 'Bar', value: 'bar' },
  //           { name: 'Pie', value: 'pie' },
  //         ],
  //         validation: {
  //           schema: {
  //             type: 'union',
  //             schemas: [{ type: 'string' }, { type: 'boolean' }, { type: 'number' }],
  //           },
  //         },
  //       },
  //       jsonDescription: {
  //         type: 'json',
  //         displayName: 'Json Description',
  //         validation: {
  //           schema: {
  //             type: 'string',
  //           },
  //         },
  //       },
  //       plotFromJson: {
  //         type: 'toggle',
  //         displayName: 'Use Plotly JSON schema',
  //         validation: {
  //           schema: {
  //             type: 'boolean',
  //           },
  //         },
  //       },
  //     },
  //     events: {},
  //     styles: {
  //       padding: {
  //         type: 'code',
  //         displayName: 'Padding',
  //         validation: {
  //           schema: {
  //             type: 'union',
  //             schemas: [{ type: 'number' }, { type: 'string' }],
  //           },
  //         },
  //       },
  //       visibility: {
  //         type: 'toggle',
  //         displayName: 'Visibility',
  //         validation: {
  //           schema: {
  //             type: 'boolean',
  //           },
  //         },
  //       },
  //       disabledState: {
  //         type: 'toggle',
  //         displayName: 'Disable',
  //         validation: {
  //           schema: {
  //             type: 'boolean',
  //           },
  //         },
  //       },
  //     },
  //     exposedVariables: {
  //       show: null,
  //     },
  //     definition: {
  //       others: {
  //         showOnDesktop: { value: '{{true}}' },
  //         showOnMobile: { value: '{{false}}' },
  //       },
  //       properties: {
  //         title: { value: 'å�¯ä¿®æ”¹æ ‡é¢˜' },
  //         markerColor: { value: '#CDE1F8' },
  //         showAxes: { value: '{{true}}' },
  //         showGridLines: { value: '{{true}}' },
  //         plotFromJson: { value: '{{false}}' },
  //         loadingState: { value: `{{false}}` },
  //         jsonDescription: {
  //           value: `{
  //             "data": [
  //                 {
  //                     "x": [
  //                         "Jan",
  //                         "Feb",
  //                         "Mar"
  //                     ],
  //                     "y": [
  //                         100,
  //                         80,
  //                         40
  //                     ],
  //                     "type": "bar"
  //                 }
  //             ]
  //         }`,
  //         },
  //         type: { value: `line` },
  //         data: {
  //           value: `[
  //   { "x": "Jan", "y": 100},
  //   { "x": "Feb", "y": 80},
  //   { "x": "Mar", "y": 40}
  // ]`,
  //         },
  //       },
  //       events: [],
  //       styles: {
  //         padding: { value: '50' },
  //         visibility: { value: '{{true}}' },
  //         disabledState: { value: '{{false}}' },
  //       },
  //     },
  //   },
  //   {
  //     name: 'Chart',
  //     displayName: 'Chart',
  //     description: 'Display charts',
  //     component: 'Chart',
  //     defaultSize: {
  //       width: 20,
  //       height: 400,
  //     },
  //     others: {
  //       showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
  //       showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
  //     },
  //     properties: {
  //       title: {
  //         type: 'code',
  //         displayName: 'Title',
  //         validation: {
  //           schema: {
  //             type: 'string',
  //           },
  //         },
  //       },
  //       data: {
  //         type: 'json',
  //         displayName: 'Data',
  //         validation: {
  //           schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'array' }] },
  //         },
  //       },
  //       loadingState: {
  //         type: 'toggle',
  //         displayName: 'Loading State',
  //         validation: {
  //           schema: { type: 'boolean' },
  //         },
  //       },
  //       markerColor: {
  //         type: 'color',
  //         displayName: 'Marker color',
  //         validation: {
  //           schema: {
  //             type: 'string',
  //           },
  //         },
  //       },
  //       showAxes: {
  //         type: 'toggle',
  //         displayName: 'Show axes',
  //         validation: {
  //           schema: {
  //             type: 'boolean',
  //           },
  //         },
  //       },
  //       showGridLines: {
  //         type: 'toggle',
  //         displayName: 'Show grid lines',
  //         validation: {
  //           schema: {
  //             type: 'boolean',
  //           },
  //         },
  //       },
  //       type: {
  //         type: 'select',
  //         displayName: 'Chart type',
  //         options: [
  //           { name: 'Line', value: 'line' },
  //           { name: 'Bar', value: 'bar' },
  //           { name: 'Pie', value: 'pie' },
  //         ],
  //         validation: {
  //           schema: {
  //             type: 'union',
  //             schemas: [{ type: 'string' }, { type: 'boolean' }, { type: 'number' }],
  //           },
  //         },
  //       },
  //       jsonDescription: {
  //         type: 'json',
  //         displayName: 'Json Description',
  //         validation: {
  //           schema: {
  //             type: 'string',
  //           },
  //         },
  //       },
  //       plotFromJson: {
  //         type: 'toggle',
  //         displayName: 'Use Plotly JSON schema',
  //         validation: {
  //           schema: {
  //             type: 'boolean',
  //           },
  //         },
  //       },
  //       barmode: {
  //         type: 'select',
  //         displayName: 'Bar mode',
  //         options: [
  //           { name: 'Stack', value: 'stack' },
  //           { name: 'Group', value: 'group' },
  //           { name: 'Overlay', value: 'overlay' },
  //           { name: 'Relative', value: 'relative' },
  //         ],
  //         validation: {
  //           schema: {
  //             schemas: { type: 'string' },
  //           },
  //         },
  //       },
  //     },
  //     events: {},
  //     styles: {
  //       padding: {
  //         type: 'code',
  //         displayName: 'Padding',
  //         validation: {
  //           schema: {
  //             type: 'union',
  //             schemas: [{ type: 'number' }, { type: 'string' }],
  //           },
  //         },
  //       },
  //       visibility: {
  //         type: 'toggle',
  //         displayName: 'Visibility',
  //         validation: {
  //           schema: {
  //             type: 'boolean',
  //           },
  //         },
  //       },
  //       disabledState: {
  //         type: 'toggle',
  //         displayName: 'Disable',
  //         validation: {
  //           schema: {
  //             type: 'boolean',
  //           },
  //         },
  //       },
  //     },
  //     exposedVariables: {
  //       show: null,
  //     },
  //     definition: {
  //       others: {
  //         showOnDesktop: { value: '{{true}}' },
  //         showOnMobile: { value: '{{false}}' },
  //       },
  //       properties: {
  //         title: { value: 'This title can be changed' },
  //         markerColor: { value: '#CDE1F8' },
  //         showAxes: { value: '{{true}}' },
  //         showGridLines: { value: '{{true}}' },
  //         plotFromJson: { value: '{{false}}' },
  //         loadingState: { value: `{{false}}` },
  //         barmode: { value: `group` },
  //         jsonDescription: {
  //           value: `{
  //             "data": [
  //                 {
  //                     "x": [
  //                         "Jan",
  //                         "Feb",
  //                         "Mar"
  //                     ],
  //                     "y": [
  //                         100,
  //                         80,
  //                         40
  //                     ],
  //                     "type": "bar"
  //                 }
  //             ]
  //         }`,
  //         },
  //         type: { value: `line` },
  //         data: {
  //           value: `[
  //   { "x": "Jan", "y": 100},
  //   { "x": "Feb", "y": 80},
  //   { "x": "Mar", "y": 40}
  // ]`,
  //         },
  //       },
  //       events: [],
  //       styles: {
  //         padding: { value: '50' },
  //         visibility: { value: '{{true}}' },
  //         disabledState: { value: '{{false}}' },
  //       },
  //     },
  //   },
  {
    name: 'Modal',
    displayName: 'å¼¹çª—',
    description: 'ç”±äº‹ä»¶è§¦å�‘çš„å¼¹çª—',
    component: 'Modal',
    defaultSize: {
      width: 10,
      height: 34,
    },
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    properties: {
      title: {
        type: 'code',
        displayName: 'Title',
        validation: {
          schema: { type: 'string' },
        },
      },
      loadingState: {
        type: 'toggle',
        displayName: 'Loading State',
        validation: {
          schema: { type: 'boolean' },
        },
      },
      useDefaultButton: {
        type: 'toggle',
        displayName: 'ä½¿ç”¨é»˜è®¤è§¦å�‘æŒ‰é’®',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      triggerButtonLabel: {
        type: 'code',
        displayName: 'Trigger button label',
        validation: {
          schema: {
            type: 'string',
          },
        },
      },
      hideTitleBar: { type: 'toggle', displayName: 'Hide title bar' },
      hideCloseButton: { type: 'toggle', displayName: 'Hide close button' },
      hideOnEsc: { type: 'toggle', displayName: 'æŒ‰ESCå…³é—­' },
      closeOnClickingOutside: { type: 'toggle', displayName: 'Close on clicking outside' },

      size: {
        type: 'select',
        displayName: 'Modal size',
        options: [
          { name: 'å°�', value: 'sm' },
          { name: 'ä¸­', value: 'lg' },
          { name: 'å¤§', value: 'xl' },
        ],
        validation: {
          schema: { type: 'string' },
        },
      },
      modalHeight: {
        type: 'code',
        displayName: 'å¼¹çª—é«˜åº¦',
        validation: {
          schema: { type: 'string' },
        },
      },
    },
    events: {
      onOpen: { displayName: 'æ‰“å¼€æ—¶' },
      onClose: { displayName: 'å…³é—­æ—¶' },
    },
    styles: {
      headerBackgroundColor: {
        type: 'color',
        displayName: 'Header background color',
        validation: {
          schema: { type: 'string' },
        },
      },
      headerTextColor: {
        type: 'color',
        displayName: 'æ ‡é¢˜æ–‡æœ¬é¢œè‰²',
        validation: {
          schema: { type: 'string' },
        },
      },
      bodyBackgroundColor: {
        type: 'color',
        displayName: 'Body background color',
        validation: {
          schema: { type: 'string' },
        },
      },
      disabledState: {
        type: 'toggle',
        displayName: 'Disable',
        validation: {
          schema: { type: 'boolean' },
        },
      },
      visibility: {
        type: 'toggle',
        displayName: 'Visibility',
        validation: {
          schema: { type: 'boolean' },
          defaultValue: true,
        },
      },
      triggerButtonBackgroundColor: {
        type: 'color',
        displayName: 'Trigger button background color',
        validation: {
          schema: { type: 'string' },
          defaultValue: false,
        },
      },
      triggerButtonTextColor: {
        type: 'color',
        displayName: 'Trigger button text color',
        validation: {
          schema: { type: 'string' },
          defaultValue: false,
        },
      },
    },
    exposedVariables: {
      show: false,
    },
    actions: [
      {
        handle: 'open',
        displayName: 'æ‰“å¼€',
      },
      {
        handle: 'close',
        displayName: 'å…³é—­',
      },
    ],
    definition: {
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      properties: {
        title: { value: 'å�¯ä¿®æ”¹æ ‡é¢˜' },
        loadingState: { value: `{{false}}` },
        useDefaultButton: { value: `{{true}}` },
        triggerButtonLabel: { value: `æ‰“å¼€å¼¹çª—` },
        size: { value: 'lg' },
        hideTitleBar: { value: '{{false}}' },
        hideCloseButton: { value: '{{false}}' },
        hideOnEsc: { value: '{{true}}' },
        closeOnClickingOutside: { value: '{{false}}' },
        modalHeight: { value: '400px' },
      },
      events: [],
      styles: {
        headerBackgroundColor: { value: '#ffffffff' },
        headerTextColor: { value: '#000000' },
        bodyBackgroundColor: { value: '#ffffffff' },
        disabledState: { value: '{{false}}' },
        visibility: { value: '{{true}}' },
        triggerButtonBackgroundColor: { value: '#4D72FA' },
        triggerButtonTextColor: { value: '#ffffffff' },
      },
    },
  },
  {
    name: 'TextInput',
    displayName: 'æ–‡æœ¬æ¡†',
    description: 'è¡¨å�•çš„æ–‡æœ¬å­—æ®µ',
    component: 'TextInput',
    defaultSize: {
      width: 6,
      height: 30,
    },
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    properties: {
      value: {
        type: 'code',
        displayName: 'Default value',
        validation: {
          schema: {
            type: 'string',
          },
        },
      },
      placeholder: {
        type: 'code',
        displayName: 'Placeholder',
        validation: {
          schema: { type: 'string' },
        },
      },
    },
    validation: {
      regex: { type: 'code', displayName: 'Regex' },
      minLength: { type: 'code', displayName: 'Min length' },
      maxLength: { type: 'code', displayName: 'Max length' },
      customRule: { type: 'code', displayName: 'Custom validation' },
    },
    events: {
      onChange: { displayName: 'ä¿®æ”¹å†…å®¹æ—¶' },
      onEnterPressed: { displayName: 'æŒ‰ä¸‹å›�è½¦é”®æ—¶' },
      onFocus: { displayName: 'è�·å�–ç„¦ç‚¹æ—¶' },
      onBlur: { displayName: 'å¤±å�»ç„¦ç‚¹æ—¶' },
    },
    styles: {
      textColor: {
        type: 'color',
        displayName: 'Text Color',
        validation: { schema: { type: 'string' } },
      },
      backgroundColor: {
        type: 'color',
        displayName: 'Background Color',
        validation: { schema: { type: 'string' } },
      },
      borderColor: {
        type: 'color',
        displayName: 'è¾¹æ¡†é¢œè‰²',
        validation: { schema: { type: 'string' } },
      },
      errTextColor: {
        type: 'color',
        displayName: 'é”™è¯¯æ–‡æœ¬é¢œè‰²',
        validation: { schema: { type: 'string' } },
      },
      borderRadius: {
        type: 'code',
        displayName: 'Border radius',
        validation: { schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] } },
      },
      visibility: { type: 'toggle', displayName: 'Visibility', validation: { schema: { type: 'boolean' } } },
      disabledState: { type: 'toggle', displayName: 'Disable', validation: { schema: { type: 'boolean' } } },
    },
    exposedVariables: {
      value: '',
    },
    actions: [
      {
        handle: 'setText',
        displayName: 'è®¾ç½®æ–‡æœ¬',
        params: [{ handle: 'text', displayName: 'æ–‡æœ¬', defaultValue: 'New Text' }],
      },
      {
        handle: 'clear',
        displayName: 'æ¸…é™¤',
      },
      {
        handle: 'setFocus',
        displayName: 'è�·å�–ç„¦ç‚¹',
      },
      {
        handle: 'setBlur',
        displayName: 'å¤±å�»ç„¦ç‚¹',
      },
      {
        handle: 'disable',
        displayName: 'ç¦�ç”¨',
        params: [{ handle: 'disable', displayName: 'å€¼', defaultValue: '{{false}}', type: 'toggle' }],
      },
      {
        handle: 'visibility',
        displayName: 'æ˜¯å�¦å�¯è§�',
        params: [{ handle: 'visibility', displayName: 'å€¼', defaultValue: '{{false}}', type: 'toggle' }],
      },
    ],
    definition: {
      validation: {
        regex: { value: '' },
        minLength: { value: null },
        maxLength: { value: null },
        customRule: { value: null },
      },
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      properties: {
        value: { value: '' },
        placeholder: { value: 'è¯·è¾“å…¥' },
      },
      events: [],
      styles: {
        textColor: { value: '#000' },
        borderColor: { value: '#dadcde' },
        errTextColor: { value: '#ff0000' },
        borderRadius: { value: '{{0}}' },
        visibility: { value: '{{true}}' },
        disabledState: { value: '{{false}}' },
        backgroundColor: { value: '#fff' },
      },
    },
  },
  {
    name: 'NumberInput',
    displayName: 'æ•°å­—æ¡†',
    description: 'è¡¨å�•çš„æ•°å­—å­—æ®µ',
    component: 'NumberInput',
    defaultSize: {
      width: 4,
      height: 30,
    },
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    properties: {
      value: {
        type: 'code',
        displayName: 'Default value',
        validation: {
          schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
        },
      },
      minValue: {
        type: 'code',
        displayName: 'Minimum value',
        validation: {
          schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
        },
      },
      maxValue: {
        type: 'code',
        displayName: 'Maximum value',
        validation: {
          schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
        },
      },
      placeholder: {
        type: 'code',
        displayName: 'Placeholder',
        validation: {
          schema: { type: 'string' },
        },
      },
      loadingState: {
        type: 'toggle',
        displayName: 'Loading state',
        validation: {
          schema: { type: 'boolean' },
        },
      },
      decimalPlaces: {
        type: 'code',
        displayName: 'å°�æ•°ä½�æ•°',
        validation: {
          schema: { type: 'number' },
        },
      },
    },
    events: {
      onChange: { displayName: 'å†…å®¹æ”¹å�˜æ—¶' },
    },
    styles: {
      visibility: {
        type: 'toggle',
        displayName: 'Visibility',
        validation: {
          schema: { type: 'boolean' },
        },
      },
      disabledState: {
        type: 'toggle',
        displayName: 'Disable',
        validation: {
          schema: { type: 'boolean' },
        },
      },
      borderRadius: {
        type: 'code',
        displayName: 'Border radius',
        validation: {
          schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
        },
      },
      backgroundColor: {
        type: 'color',
        displayName: 'Background Color',
      },
      borderColor: {
        type: 'color',
        displayName: 'è¾¹æ¡†é¢œè‰²',
        validation: {
          schema: { type: 'string' },
        },
      },
      textColor: {
        type: 'color',
        displayName: 'Text Color',
        validation: { schema: { type: 'string' } },
      },
    },
    exposedVariables: {
      value: 99,
    },
    definition: {
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      properties: {
        value: { value: '99' },
        maxValue: { value: '' },
        minValue: { value: '' },
        placeholder: { value: '0' },
        decimalPlaces: { value: '{{2}}' },
        loadingState: { value: '{{false}}' },
      },
      events: [],
      styles: {
        visibility: { value: '{{true}}' },
        disabledState: { value: '{{false}}' },
        borderRadius: { value: '{{0}}' },
        backgroundColor: { value: '#ffffffff' },
        borderColor: { value: '#fff' },
        textColor: { value: '#232e3c' },
      },
    },
  },
  {
    name: 'PasswordInput',
    displayName: 'å¯†ç �æ¡†',
    description: 'è¡¨å�•çš„å¯†ç �è¾“å…¥å­—æ®µ',
    component: 'PasswordInput',
    defaultSize: {
      width: 4,
      height: 30,
    },
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    properties: {
      placeholder: {
        type: 'code',
        displayName: 'Placeholder',
        validation: {
          schema: { type: 'string' },
        },
      },
      password: {
        type: 'code',
        displayName: 'é»˜è®¤å¯†ç �',
        validation: {
          schema: { type: 'string' },
        },
      },
    },
    validation: {
      regex: { type: 'code', displayName: 'Regex' },
      minLength: { type: 'code', displayName: 'Min length' },
      maxLength: { type: 'code', displayName: 'Max length' },
      customRule: { type: 'code', displayName: 'Custom validation' },
    },
    events: {
      onChange: { displayName: 'å†…å®¹æ”¹å�˜æ—¶' },
    },
    styles: {
      visibility: {
        type: 'toggle',
        displayName: 'Visibility',
        validation: {
          schema: { type: 'boolean' },
        },
      },
      disabledState: {
        type: 'toggle',
        displayName: 'Disable',
        validation: {
          schema: { type: 'boolean' },
        },
      },
      borderRadius: {
        type: 'code',
        displayName: 'Border radius',
        validation: {
          schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
        },
      },
      backgroundColor: {
        type: 'color',
        displayName: 'Background Color',
        validation: {
          schema: { type: 'string' },
        },
      },
    },
    exposedVariables: {
      value: '',
    },
    definition: {
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      properties: {
        placeholder: { value: 'è¯·è¾“å…¥å¯†ç �' },
      },
      validation: {
        regex: { value: '' },
        minLength: { value: null },
        maxLength: { value: null },
        customRule: { value: null },
      },
      events: [],
      styles: {
        visibility: { value: '{{true}}' },
        disabledState: { value: '{{false}}' },
        borderRadius: { value: '{{0}}' },
        backgroundColor: { value: '#ffffff' },
      },
    },
  },
  {
    name: 'Datepicker',
    displayName: 'æ—¥æœŸé€‰æ‹©å™¨',
    description: 'é€‰æ‹©æ—¥æœŸå’Œæ—¶é—´',
    component: 'Datepicker',
    defaultSize: {
      width: 5,
      height: 30,
    },
    validation: {
      customRule: { type: 'code', displayName: 'Custom validation' },
    },
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    properties: {
      defaultValue: {
        type: 'code',
        displayName: 'Default value',
        validation: {
          schema: { type: 'string' },
        },
      },
      format: {
        type: 'code',
        displayName: 'Format',
        validation: {
          schema: { type: 'string' },
        },
      },
      enableTime: {
        type: 'toggle',
        displayName: 'Enable time selection?',
        validation: {
          schema: { type: 'boolean' },
          defaultValue: false,
        },
      },
      enableDate: {
        type: 'toggle',
        displayName: 'Enable date selection?',
        validation: {
          schema: { type: 'boolean' },
          defaultValue: true,
        },
      },
      disabledDates: {
        type: 'code',
        displayName: 'Disabled dates',
        validation: {
          schema: { type: 'array', element: { type: 'string' } },
        },
      },
    },
    events: {
      onSelect: { displayName: 'é€‰æ‹©æ—¥æœŸå��' },
    },
    styles: {
      visibility: {
        type: 'toggle',
        displayName: 'Visibility',
        validation: {
          schema: { type: 'boolean' },
        },
      },
      disabledState: {
        type: 'toggle',
        displayName: 'Disable',
        validation: {
          schema: { type: 'boolean' },
        },
      },
      borderRadius: {
        type: 'code',
        displayName: 'Border radius',
        validation: {
          schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
        },
      },
    },
    exposedVariables: {
      value: '',
    },
    definition: {
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      validation: {
        customRule: { value: null },
      },
      properties: {
        defaultValue: { value: "{{moment().format('yyyy/MM/DD')}}" },
        format: { value: 'YYYY/MM/DD' },
        enableTime: { value: '{{false}}' },
        enableDate: { value: '{{true}}' },
        disabledDates: { value: '{{[]}}' },
      },
      events: [],
      styles: {
        visibility: { value: '{{true}}' },
        disabledState: { value: '{{false}}' },
        borderRadius: { value: '{{0}}' },
      },
    },
  },
  {
    name: 'Checkbox',
    displayName: 'å¤�é€‰æ¡†',
    description: 'å�•ä¸ªå¤�é€‰æ¡†',
    component: 'Checkbox',
    defaultSize: {
      width: 5,
      height: 30,
    },
    actions: [
      {
        handle: 'setChecked',
        displayName: 'è®¾ç½®é€‰ä¸­çŠ¶æ€�',
        params: [{ handle: 'status', displayName: 'çŠ¶æ€�' }],
      },
    ],
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    properties: {
      label: {
        type: 'code',
        displayName: 'Label',
        validation: {
          schema: { type: 'string' },
        },
      },
      defaultValue: {
        type: 'toggle',
        displayName: 'Default Status',
        validation: {
          schema: { type: 'boolean' },
        },
      },
    },
    events: {
      onCheck: { displayName: 'é€‰ä¸­æ—¶' },
      onUnCheck: { displayName: 'å�–æ¶ˆé€‰ä¸­æ—¶' },
    },
    styles: {
      textColor: {
        type: 'color',
        displayName: 'Text Color',
        validation: {
          schema: { type: 'string' },
        },
      },
      checkboxColor: {
        type: 'color',
        displayName: 'Checkbox Color',
        validation: {
          schema: { type: 'string' },
        },
      },
      visibility: {
        type: 'toggle',
        displayName: 'Visibility',
        validation: {
          schema: { type: 'boolean' },
        },
      },
      disabledState: {
        type: 'toggle',
        displayName: 'Disable',
        validation: {
          schema: { type: 'boolean' },
        },
      },
    },
    exposedVariables: {
      value: false,
    },
    definition: {
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      properties: {
        label: { value: 'å¤�é€‰æ¡†' },
        defaultValue: { value: '{{false}}' },
      },
      events: [],
      styles: {
        textColor: { value: '' },
        checkboxColor: { value: '' },
        visibility: { value: '{{true}}' },
        disabledState: { value: '{{false}}' },
      },
    },
  },
  {
    name: 'Radio-button',
    displayName: 'å�•é€‰æŒ‰é’®',
    description: 'å�•é€‰æŒ‰é’®',
    component: 'RadioButton',
    defaultSize: {
      width: 6,
      height: 60,
    },
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    properties: {
      label: {
        type: 'code',
        displayName: 'Label',
        validation: {
          schema: { type: 'string' },
        },
      },
      value: {
        type: 'code',
        displayName: 'Default value',
        validation: {
          schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }, { type: 'boolean' }] },
        },
      },
      values: {
        type: 'code',
        displayName: 'Option values',
        validation: {
          schema: {
            type: 'array',
            element: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }, { type: 'boolean' }] },
          },
        },
      },
      display_values: {
        type: 'code',
        displayName: 'Option labels',
        validation: {
          schema: { type: 'array', element: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] } },
        },
      },
    },
    events: {
      onSelectionChange: { displayName: 'é€‰æ‹©æ—¶' },
    },
    styles: {
      textColor: {
        type: 'color',
        displayName: 'Text Color',
        validation: {
          schema: { type: 'string' },
        },
      },
      activeColor: {
        type: 'color',
        displayName: 'Active Color',
        validation: {
          schema: { type: 'string' },
        },
      },
      visibility: {
        type: 'toggle',
        displayName: 'Visibility',
        validation: {
          schema: { type: 'boolean' },
        },
      },
      disabledState: {
        type: 'toggle',
        displayName: 'Disable',
        validation: {
          schema: { type: 'boolean' },
        },
      },
    },
    actions: [
      {
        handle: 'selectOption',
        displayName: 'é€‰æ‹©é€‰é¡¹',
        params: [
          {
            handle: 'option',
            displayName: 'é€‰é¡¹',
          },
        ],
      },
    ],
    exposedVariables: {},
    definition: {
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      properties: {
        label: { value: 'å�•é€‰' },
        value: { value: '{{true}}' },
        values: { value: '{{[true,false]}}' },
        display_values: { value: '{{["yes", "no"]}}' },
        visible: { value: '{{true}}' },
      },
      events: [],
      styles: {
        textColor: { value: '' },
        activeColor: { value: '' },
        visibility: { value: '{{true}}' },
        disabledState: { value: '{{false}}' },
      },
    },
  },
  {
    name: 'ToggleSwitch',
    displayName: 'æ‹¨åŠ¨å¼€å…³',
    description: 'æ‹¨åŠ¨å¼€å…³',
    component: 'ToggleSwitch',
    defaultSize: {
      width: 6,
      height: 30,
    },
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    properties: {
      label: {
        type: 'code',
        displayName: 'Label',
        validation: {
          schema: { type: 'string' },
        },
      },
      defaultValue: {
        type: 'toggle',
        displayName: 'Default Status',
        validation: {
          schema: { type: 'boolean' },
        },
      },
    },
    events: {
      onChange: { displayName: 'çŠ¶æ€�æ”¹å�˜æ—¶' },
    },
    styles: {
      textColor: {
        type: 'color',
        displayName: 'Text Color',
        validation: {
          schema: { type: 'string' },
        },
      },
      toggleSwitchColor: {
        type: 'color',
        displayName: 'Toggle Switch Color',
        validation: {
          schema: { type: 'string' },
        },
      },
      visibility: {
        type: 'toggle',
        displayName: 'Visibility',
        validation: {
          schema: { type: 'boolean' },
        },
      },
      disabledState: {
        type: 'toggle',
        displayName: 'Disable',
        validation: {
          schema: { type: 'boolean' },
        },
      },
    },
    exposedVariables: {
      value: false,
    },
    definition: {
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      properties: {
        label: { value: 'æ‹¨åŠ¨å¼€å…³' },
        defaultValue: { value: '{{false}}' },
      },
      events: [],
      styles: {
        textColor: { value: '' },
        toggleSwitchColor: { value: '' },
        visibility: { value: '{{true}}' },
        disabledState: { value: '{{false}}' },
      },
    },
  },
  {
    name: 'Textarea',
    displayName: 'é•¿æ–‡æœ¬è¾“å…¥æ¡†',
    description: 'é•¿æ–‡æœ¬è¾“å…¥æ¡†',
    component: 'TextArea',
    defaultSize: {
      width: 6,
      height: 100,
    },
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    properties: {
      value: {
        type: 'code',
        displayName: 'Default value',
        validation: {
          schema: { type: 'string' },
        },
      },
      placeholder: {
        type: 'code',
        displayName: 'Placeholder',
        validation: {
          schema: { type: 'string' },
        },
      },
    },
    events: {},
    styles: {
      visibility: {
        type: 'toggle',
        displayName: 'Visibility',
        validation: {
          schema: { type: 'boolean' },
        },
      },
      disabledState: {
        type: 'toggle',
        displayName: 'Disable',
        validation: {
          schema: { type: 'boolean' },
        },
      },
      borderRadius: {
        type: 'code',
        displayName: 'Border radius',
        validation: {
          schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
        },
      },
    },
    exposedVariables: {
      value:
        'tooljetæ˜¯ä¸€ä¸ªå¼€æº�ä½�ä»£ç �å¹³å�°ï¼Œç”¨äº�ä»¥æœ€å°‘çš„å·¥ç¨‹å·¥ä½œé‡�æ�„å»ºå’Œéƒ¨ç½²å†…éƒ¨å·¥å…· ğŸš€',
    },
    actions: [
      {
        handle: 'setText',
        displayName: 'è®¾ç½®æ–‡æœ¬',
        params: [{ handle: 'text', displayName: 'æ–‡æœ¬', defaultValue: 'New Text' }],
      },
      {
        handle: 'clear',
        displayName: 'æ¸…é™¤',
      },
    ],
    definition: {
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      properties: {
        value: {
          value:
            'tooljetæ˜¯ä¸€ä¸ªå¼€æº�ä½�ä»£ç �å¹³å�°ï¼Œç”¨äº�ä»¥æœ€å°‘çš„å·¥ç¨‹å·¥ä½œé‡�æ�„å»ºå’Œéƒ¨ç½²å†…éƒ¨å·¥å…· ğŸš€',
        },
        placeholder: { value: 'å� ä½�ç¬¦æ–‡æœ¬' },
      },
      events: [],
      styles: {
        visibility: { value: '{{true}}' },
        disabledState: { value: '{{false}}' },
        borderRadius: { value: '{{0}}' },
      },
    },
  },
  {
    name: 'DateRangePicker',
    displayName: 'æ—¥æœŸèŒƒå›´é€‰å�–å™¨',
    description: 'é€‰æ‹©æ—¥æœŸèŒƒå›´',
    component: 'DaterangePicker',
    defaultSize: {
      width: 10,
      height: 30,
    },
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    properties: {
      defaultStartDate: {
        type: 'code',
        displayName: 'Default start date',
        validation: {
          schema: {
            type: 'string',
          },
        },
      },
      defaultEndDate: {
        type: 'code',
        displayName: 'Default end date',
        validation: {
          schema: {
            type: 'string',
          },
        },
      },
      format: {
        type: 'code',
        displayName: 'Format',
        validation: {
          schema: {
            type: 'string',
          },
        },
      },
    },
    events: {
      onSelect: { displayName: 'é€‰æ‹©æ—¶' },
    },
    styles: {
      borderRadius: {
        type: 'code',
        displayName: 'Border radius',
        validation: {
          schema: {
            type: 'union',
            schemas: [{ type: 'number' }, { type: 'string' }],
          },
        },
      },
      visibility: {
        type: 'toggle',
        displayName: 'Visibility',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      disabledState: {
        type: 'toggle',
        displayName: 'Disable',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
    },
    exposedVariables: {
      endDate: {},
      startDate: {},
    },
    definition: {
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      properties: {
        defaultStartDate: { value: '{{moment().format("yyyy/MM/DD")}}' },
        defaultEndDate: { value: '{{moment().format("yyyy/MM/DD")}}' },

        format: { value: 'YYYY/MM/DD' },
      },
      events: [],
      styles: {
        borderRadius: { value: '0' },
        visibility: { value: '{{true}}' },
        disabledState: { value: '{{false}}' },
      },
    },
  },
  {
    name: 'Text',
    displayName: 'æ–‡æœ¬',
    description: 'æ˜¾ç¤ºmarkdownæˆ–HTML',
    component: 'Text',
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    properties: {
      text: {
        type: 'code',
        displayName: 'Text',
        validation: {
          schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
        },
      },
      loadingState: {
        type: 'toggle',
        displayName: 'Show loading state',
        validation: {
          schema: { type: 'boolean' },
        },
      },
      parseEnter: {
        type: 'toggle',
        displayName: 'æ–‡æœ¬æ¨¡å¼�è§£æ��æ�¢è¡Œ',
        validation: {
          schema: { type: 'boolean' },
        }
      },
      markDownMode: {
        type: 'toggle',
        displayName: 'è§£æ��Markdown',
        validation: {
          schema: { type: 'boolean' },
        }
      },
    },
    defaultSize: {
      width: 6,
      height: 30,
    },
    events: [],
    styles: {
      fontWeight: {
        type: 'select',
        displayName: 'Font Weight',
        options: [
          { name: 'å¸¸è§„', value: 'normal' },
          { name: 'ç²—', value: 'bold' },
          { name: 'ç»†', value: 'lighter' },
          { name: 'åŠ ç²—', value: 'bolder' },
        ],
      },
      decoration: {
        type: 'select',
        displayName: 'Text Decoration',
        options: [
          { name: 'æ— ', value: 'none' },
          { name: 'ä¸‹åˆ’çº¿', value: 'underline' },
          { name: 'ä¸­åˆ’çº¿', value: 'line-through' },
          { name: 'ä¸Šåˆ’çº¿', value: 'overline' },
          { name: 'ä¸Šåˆ’çº¿+ä¸‹åˆ’çº¿', value: 'overline underline' },
        ],
      },
      transformation: {
        type: 'select',
        displayName: 'æ–‡æœ¬å¤§å°�å†™è½¬æ�¢',
        options: [
          { name: 'æ— ', value: 'none' },
          { name: 'å¤§å†™', value: 'uppercase' },
          { name: 'å°�å†™', value: 'lowercase' },
          { name: 'é¦–å­—å¤§å†™', value: 'capitalize' },
        ],
      },
      fontStyle: {
        type: 'select',
        displayName: 'Font Style',
        options: [
          { name: 'å¸¸è§„', value: 'normal' },
          { name: 'æ–œä½“å­—', value: 'italic' },
          { name: 'å€¾æ–œæ–‡å­—', value: 'oblique' },
        ],
      },
      lineHeight: { type: 'number', displayName: 'Line Height' },
      textIndent: { type: 'number', displayName: 'Text Indent' },
      letterSpacing: { type: 'number', displayName: 'Letter Spacing' },
      wordSpacing: { type: 'number', displayName: 'Word Spacing' },
      fontVariant: {
        type: 'select',
        displayName: 'Font Variant',
        options: [
          { name: 'å¸¸è§„', value: 'normal' },
          { name: 'å°�ä½“å¤§å†™', value: 'small-caps' },
          { name: 'åˆ�å§‹å€¼', value: 'initial' },
          { name: 'ç»§æ‰¿', value: 'inherit' },
        ],
      },
      textSize: {
        type: 'number',
        displayName: 'Text Size',
        validation: {
          schema: { type: 'number' },
        },
      },
      backgroundColor: {
        type: 'color',
        displayName: 'Background Color',
        validation: {
          schema: { type: 'string' },
        },
      },
      textColor: {
        type: 'color',
        displayName: 'Text Color',
        validation: {
          schema: { type: 'string' },
        },
      },
      textAlign: {
        type: 'alignButtons',
        displayName: 'Align Text',
        validation: {
          schema: { type: 'string' },
        },
      },
      visibility: {
        type: 'toggle',
        displayName: 'Visibility',
        validation: {
          schema: { type: 'boolean' },
        },
      },
      disabledState: {
        type: 'toggle',
        displayName: 'Disable',
        validation: {
          schema: { type: 'boolean' },
        },
      },
    },
    exposedVariables: {
      text: 'Hello, there!',
    },
    actions: [
      {
        handle: 'setText',
        displayName: 'è®¾ç½®æ–‡æœ¬',
        params: [{ handle: 'text', displayName: 'æ–‡æœ¬', defaultValue: 'New text' }],
      },
      {
        handle: 'visibility',
        displayName: 'æ˜¯å�¦å�¯è§�',
        params: [{ handle: 'visibility', displayName: 'å€¼', defaultValue: `{{false}}`, type: 'toggle' }],
      },
    ],
    definition: {
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      properties: {
        text: { value: 'Hello, there!' },
        loadingState: { value: `{{false}}` },
        parseEnter: { value: `{{true}}` },
        markDownMode: { value: `{{false}}` },
      },
      events: [],
      styles: {
        backgroundColor: { value: '#fff00000' },
        textColor: { value: '#000000' },
        textSize: { value: 14 },
        textAlign: { value: 'left' },
        fontWeight: { value: 'normal' },
        decoration: { value: 'none' },
        transformation: { value: 'none' },
        fontStyle: { value: 'normal' },
        lineHeight: { value: 1.5 },
        textIndent: { value: 0 },
        letterSpacing: { value: 0 },
        wordSpacing: { value: 0 },
        fontVariant: { value: 'normal' },
        visibility: { value: '{{true}}' },
        disabledState: { value: '{{false}}' },
      },
    },
  },
  {
    name: 'Image',
    displayName: 'å›¾ç‰‡æ¡†',
    description: 'æ˜¾ç¤ºå›¾åƒ�picture',
    defaultSize: {
      width: 3,
      height: 100,
    },
    component: 'Image',
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    properties: {
      source: {
        type: 'code',
        displayName: 'URL',
        validation: {
          schema: { type: 'string' },
        },
      },
      loadingState: {
        type: 'toggle',
        displayName: 'Loading state',
        validation: {
          schema: { type: 'boolean' },
        },
      },
      alternativeText: {
        type: 'code',
        displayName: 'Alternative text',
        validation: {
          schema: { type: 'string' },
        },
      },
      zoomButtons: {
        type: 'toggle',
        displayName: 'Zoom button',
        validation: {
          schema: { type: 'boolean' },
        },
      },
      rotateButton: {
        type: 'toggle',
        displayName: 'Rotate button',
        validation: {
          schema: { type: 'boolean' },
        },
      },
    },
    events: {
      onClick: { displayName: 'å�•å‡»æ—¶' },
    },
    styles: {
      borderType: {
        type: 'select',
        displayName: 'Border type',
        options: [
          { name: 'æ— ', value: 'none' },
          { name: 'åœ†è§’', value: 'rounded' },
          { name: 'åœ†å½¢', value: 'rounded-circle' },
          { name: 'ç¼©ç•¥å›¾', value: 'img-thumbnail' },
        ],
        validation: {
          schema: { type: 'string' },
        },
      },
      backgroundColor: {
        type: 'color',
        displayName: 'Background color',
        validation: {
          schema: { type: 'string' },
        },
      },
      padding: {
        type: 'code',
        displayName: 'Padding',
        validation: {
          schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
        },
      },
      visibility: {
        type: 'toggle',
        displayName: 'Visibility',
        validation: {
          schema: { type: 'boolean' },
        },
      },
      disabledState: {
        type: 'toggle',
        displayName: 'Disable',
        validation: {
          schema: { type: 'boolean' },
        },
      },
      imageFit: {
        type: 'select',
        displayName: 'Image fit',
        options: [
          { name: 'å¡«å……', value: 'fill' },
          { name: 'è¦†ç›–', value: 'contain' },
          { name: 'åŒ…å�«', value: 'cover' },
          { name: 'ç¼©å°�', value: 'scale-down' },
        ],
        validation: {
          schema: { type: 'string' },
        },
      },
    },
    exposedVariables: {},
    definition: {
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      properties: {
        source: { value: 'https://www.svgrepo.com/show/34217/image.svg' },
        visible: { value: '{{true}}' },
        loadingState: { value: '{{false}}' },
        alternativeText: { value: '' },
        zoomButtons: { value: '{{false}}' },
        rotateButton: { value: '{{false}}' },
      },
      events: [],
      styles: {
        borderType: { value: 'none' },
        padding: { value: '0' },
        visibility: { value: '{{true}}' },
        disabledState: { value: '{{false}}' },
        imageFit: { value: 'contain' },
        backgroundColor: { value: '' },
      },
    },
  },
  {
    name: 'Container',
    displayName: 'å®¹å™¨',
    description: 'å¤šä¸ªç»„ä»¶çš„å°�è£…å™¨',
    defaultSize: {
      width: 5,
      height: 200,
    },
    component: 'Container',
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    properties: {
      loadingState: {
        type: 'toggle',
        displayName: 'loading state',
        validation: {
          schema: { type: 'boolean' },
        },
      },
    },
    properties: {
      showScroll: {
        type: 'toggle',
        displayName: 'æ˜¾ç¤ºæ»šåŠ¨æ�¡',
        validation: {
          schema: { type: 'boolean' },
        },
      },
    },
    events: {},
    styles: {
      backgroundColor: {
        type: 'color',
        displayName: 'Background color',
        validation: {
          schema: { type: 'string' },
        },
      },
      borderRadius: {
        type: 'code',
        displayName: 'Border Radius',
        validation: {
          schema: {
            type: 'union',
            schemas: [{ type: 'string' }, { type: 'number' }],
          },
        },
      },
      borderColor: {
        type: 'color',
        displayName: 'è¾¹æ¡†é¢œè‰²',
        validation: {
          schema: { type: 'string' },
        },
      },
      visibility: {
        type: 'toggle',
        displayName: 'Visibility',
        validation: {
          schema: { type: 'boolean' },
        },
      },
      disabledState: {
        type: 'toggle',
        displayName: 'Disable',
        validation: {
          schema: { type: 'boolean' },
        },
      },
    },
    exposedVariables: {},
    definition: {
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      properties: {
        visible: { value: '{{true}}' },
        loadingState: { value: `{{false}}` },
        showScroll: { value: '{{true}}' },
      },
      events: [],
      styles: {
        backgroundColor: { value: '#fff' },
        borderRadius: { value: '0' },
        borderColor: { value: '#fff' },
        visibility: { value: '{{true}}' },
        disabledState: { value: '{{false}}' },
      },
    },
  },
  {
    name: 'Dropdown',
    displayName: 'å�•é€‰ä¸‹æ‹‰æ¡†',
    description: 'ä»�é€‰é¡¹ä¸­é€‰æ‹©ä¸€ä¸ªå€¼',
    defaultSize: {
      width: 8,
      height: 30,
    },
    component: 'DropDown',
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    validation: {
      customRule: { type: 'code', displayName: 'Custom validation' },
    },
    properties: {
      label: {
        type: 'code',
        displayName: 'Label',
        validation: {
          schema: { type: 'string' },
        },
      },
      placeholder: {
        type: 'code',
        displayName: 'Placeholder',
        validation: {
          validation: {
            schema: { type: 'string' },
          },
        },
      },
      advanced: {
        type: 'toggle',
        displayName: 'Advanced',
        validation: {
          schema: { type: 'boolean' },
        },
      },
      value: {
        type: 'code',
        displayName: 'Default value',
        conditionallyRender: {
          key: 'advanced',
          value: false,
        },
        validation: {
          schema: {
            type: 'union',
            schemas: [{ type: 'string' }, { type: 'number' }, { type: 'boolean' }],
          },
        },
      },
      values: {
        type: 'code',
        displayName: 'Option values',
        conditionallyRender: {
          key: 'advanced',
          value: false,
        },
        validation: {
          schema: {
            type: 'array',
            element: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }, { type: 'boolean' }] },
          },
        },
      },
      display_values: {
        type: 'code',
        displayName: 'Option labels',
        conditionallyRender: {
          key: 'advanced',
          value: false,
        },
        validation: {
          schema: {
            type: 'array',
            element: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }, { type: 'boolean' }] },
          },
        },
      },

      schema: {
        type: 'code',
        displayName: 'Schema',
        conditionallyRender: {
          key: 'advanced',
          value: true,
        },
      },
      loadingState: {
        type: 'toggle',
        displayName: 'Options loading state',
        validation: {
          schema: { type: 'boolean' },
        },
      },
    },
    events: {
      onSelect: { displayName: 'é€‰æ‹©æ—¶' },
      onSearchTextChanged: { displayName: 'æ�œç´¢æ–‡æœ¬æ”¹å�˜æ—¶' },
    },
    styles: {
      borderRadius: {
        type: 'code',
        displayName: 'Border radius',
        validation: {
          schema: {
            type: 'union',
            schemas: [{ type: 'number' }, { type: 'string' }],
          },
        },
      },
      visibility: {
        type: 'toggle',
        displayName: 'Visibility',
        validation: {
          schema: { type: 'boolean' },
        },
      },
      selectedTextColor: {
        type: 'color',
        displayName: 'Selected Text Color',
        validation: {
          schema: {
            type: 'string',
          },
        },
      },
      disabledState: {
        type: 'toggle',
        displayName: 'Disable',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      justifyContent: {
        type: 'alignButtons',
        displayName: 'Align Text',
        validation: {
          schema: {
            type: 'string',
          },
        },
      },
    },
    exposedVariables: {
      value: 2,
      searchText: '',
      label: 'Select',
      optionLabels: ['one', 'two', 'three'],
      selectedOptionLabel: 'two',
    },
    actions: [
      {
        handle: 'selectOption',
        displayName: 'é€‰æ‹©è®¾ç½®',
        params: [{ handle: 'select', displayName: 'é€‰æ‹©' }],
      },
    ],
    definition: {
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      validation: {
        customRule: { value: null },
      },
      properties: {
        advanced: { value: `{{false}}` },
        schema: {
          value:
            "{{[\t{label: 'One',value: 1,disable: false,visible: true,default: true},{label: 'Two',value: 2,disable: false,visible: true},{label: 'Three',value: 3,disable: false,visible: true}\t]}}",
        },

        label: { value: 'å�•é€‰ä¸‹æ‹‰æ¡†' },
        value: { value: '{{1}}' },
        values: { value: '{{[1,2,3]}}' },
        display_values: { value: '{{["ä¸Šæµ·", "åŒ—äº¬", "å¹¿å·�"]}}' },
        visible: { value: '{{true}}' },
        loadingState: { value: '{{false}}' },
        placeholder: { value: 'Select an option' },
      },
      events: [],
      styles: {
        borderRadius: { value: '0' },
        visibility: { value: '{{true}}' },
        disabledState: { value: '{{false}}' },
        justifyContent: { value: 'left' },
      },
    },
  },
  {
    name: 'Multiselect',
    displayName: 'å¤šé€‰æ¡†',
    description: 'ä»�é€‰é¡¹ä¸­é€‰æ‹©å¤šä¸ªå€¼',
    defaultSize: {
      width: 12,
      height: 30,
    },
    component: 'Multiselect',
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    actions: [
      {
        handle: 'selectOption',
        displayName: 'é€‰æ‹©é€‰é¡¹',
        params: [
          {
            handle: 'option',
            displayName: 'é€‰é¡¹',
          },
        ],
      },
      {
        handle: 'deselectOption',
        displayName: 'å�–æ¶ˆé€‰æ‹©é€‰é¡¹',
        params: [
          {
            handle: 'option',
            displayName: 'é€‰é¡¹',
          },
        ],
      },
      {
        handle: 'clearSelections',
        displayName: 'æ¸…é™¤å·²é€‰æ‹©',
      },
    ],
    properties: {
      label: {
        type: 'code',
        displayName: 'Label',
        validation: {
          schema: { type: 'string' },
        },
      },
      value: {
        type: 'code',
        displayName: 'Default value',
        validation: {
          schema: { type: 'array', element: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] } },
        },
      },
      values: {
        type: 'code',
        displayName: 'Option values',
        validation: {
          schema: { type: 'array', element: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] } },
        },
      },
      display_values: {
        type: 'code',
        displayName: 'Option labels',
        validation: {
          schema: { type: 'array', element: { type: 'string' } },
        },
      },
      showAllOption: {
        type: 'toggle',
        displayName: 'Enable select All option',
        validation: {
          schema: { type: 'boolean' },
        },
      },
    },
    events: {
      onSelect: { displayName: 'é€‰æ‹©æ—¶' },
    },
    styles: {
      borderRadius: {
        type: 'code',
        displayName: 'Border radius',
        validation: {
          schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
        },
      },
      visibility: {
        type: 'toggle',
        displayName: 'Visibility',
        validation: {
          schema: { type: 'boolean' },
        },
      },
      disabledState: {
        type: 'toggle',
        displayName: 'Disable',
        validation: {
          schema: { type: 'boolean' },
        },
      },
    },
    exposedVariables: {
      values: {},
    },
    definition: {
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      properties: {
        label: { value: 'å¤šé€‰ä¸‹æ‹‰æ¡†' },
        value: { value: '{{[2,3]}}' },
        values: { value: '{{[1,2,3]}}' },
        display_values: { value: '{{["åŒ—äº¬", "ä¸Šæµ·", "æ�­å·�"]}}' },
        visible: { value: '{{true}}' },
        showAllOption: { value: '{{false}}' },
      },
      events: [],
      styles: {
        borderRadius: { value: '0' },
        visibility: { value: '{{true}}' },
        disabledState: { value: '{{false}}' },
      },
    },
  },
  {
    name: 'RichTextEditor',
    displayName: 'å¯Œæ–‡æœ¬ç¼–è¾‘å™¨',
    description: 'å�¯ç¼–è¾‘å¯Œæ–‡æœ¬çš„ç¼–è¾‘å™¨',
    component: 'RichTextEditor',
    defaultSize: {
      width: 16,
      height: 210,
    },
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    properties: {
      placeholder: {
        type: 'code',
        displayName: 'Placeholder',
        validation: {
          schema: { type: 'string' },
        },
      },
      defaultValue: {
        type: 'code',
        displayName: 'Default Value',
        validation: {
          schema: { type: 'string' },
        },
      },
    },
    events: {},
    styles: {
      visibility: {
        type: 'toggle',
        displayName: 'Visibility',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      disabledState: {
        type: 'toggle',
        displayName: 'Disable',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
    },
    exposedVariables: {
      value: '',
    },
    definition: {
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      properties: {
        placeholder: { value: 'å¯Œæ–‡æœ¬æ¡†' },
        defaultValue: { value: '' },
      },
      events: [],
      styles: {
        visibility: { value: '{{true}}' },
        disabledState: { value: '{{false}}' },
      },
    },
  },
  // {
  //   name: 'Map',
  //   displayName: 'Map',
  //   description: 'Display Google Maps',
  //   component: 'Map',
  //   defaultSize: {
  //     width: 16,
  //     height: 420,
  //   },
  //   others: {
  //     showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
  //     showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
  //   },
  //   properties: {
  //     initialLocation: {
  //       type: 'code',
  //       displayName: 'Initial location',
  //       tip: 'è¿™ä¸ªä½�ç½®å°†æ˜¯åœ°å›¾çš„åˆ�å§‹ä¸­å¿ƒ',
  //       options: {
  //         mode: 'javascript',
  //         theme: 'duotone-light',
  //         className: 'map-location-input pr-2',
  //       },
  //       validation: {
  //         schema: {
  //           type: 'union',
  //           schemas: [{ type: 'array', element: { type: 'object' } }, { type: 'object' }],
  //         },
  //       },
  //     },
  //     defaultMarkers: {
  //       type: 'code',
  //       displayName: 'Default markers',
  //       options: {
  //         mode: 'javascript',
  //         theme: 'duotone-light',
  //         className: 'map-location-input pr-2',
  //       },
  //       validation: {
  //         schema: {
  //           type: 'union',
  //           schemas: [{ type: 'array', element: { type: 'object' } }, { type: 'object' }],
  //         },
  //       },
  //     },
  //     addNewMarkers: {
  //       type: 'toggle',
  //       displayName: 'Add new markers',
  //       validation: {
  //         schema: {
  //           type: 'boolean',
  //         },
  //       },
  //     },
  //     canSearch: {
  //       type: 'toggle',
  //       displayName: 'Search for places',
  //       validation: {
  //         schema: {
  //           type: 'boolean',
  //         },
  //       },
  //     },
  //   },
  //   events: {
  //     onBoundsChange: { displayName: 'On bounds change' },
  //     onCreateMarker: { displayName: 'On create marker' },
  //     onMarkerClick: { displayName: 'On marker click' },
  //   },
  //   actions: [
  //     {
  //       handle: 'setLocation',
  //       displayName: 'è®¾ç½®ä½�ç½®',
  //       params: [
  //         { handle: 'lat', displayName: 'ç»´åº¦' },
  //         { handle: 'lng', displayName: 'ç»�åº¦' },
  //       ],
  //     },
  //   ],
  //   styles: {
  //     visibility: {
  //       type: 'toggle',
  //       displayName: 'Visibility',
  //       validation: {
  //         schema: {
  //           type: 'boolean',
  //         },
  //       },
  //     },
  //     disabledState: {
  //       type: 'toggle',
  //       displayName: 'Disable',
  //       validation: {
  //         schema: {
  //           type: 'boolean',
  //         },
  //       },
  //     },
  //   },
  //   exposedVariables: {
  //     center: {},
  //   },
  //   definition: {
  //     others: {
  //       showOnDesktop: { value: '{{true}}' },
  //       showOnMobile: { value: '{{false}}' },
  //     },
  //     properties: {
  //       initialLocation: {
  //         value: `{{ {"lat": 40.7128, "lng": -73.935242} }}`,
  //       },
  //       defaultMarkers: {
  //         value: `{{ [{"lat": 40.7128, "lng": -73.935242}] }}`,
  //       },
  //       canSearch: {
  //         value: `{{true}}`,
  //       },
  //       addNewMarkers: { value: `{{true}}` },
  //     },
  //     events: [],
  //     styles: {
  //       visibility: { value: '{{true}}' },
  //       disabledState: { value: '{{false}}' },
  //     },
  //   },
  // },
  {
    name: 'AMaps',
    displayName: 'é«˜å¾·åœ°å›¾',
    description: 'æ˜¾ç¤ºé«˜å¾·åœ°å›¾',
    component: 'AMaps',
    defaultSize: {
      width: 16,
      height: 420,
    },
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    properties: {
      initialLocation: {
        type: 'code',
        displayName: 'Initial location',
        tip: 'è¿™ä¸ªä½�ç½®å°†æ˜¯åœ°å›¾çš„åˆ�å§‹ä¸­å¿ƒ',
        options: {
          mode: 'javascript',
          theme: 'duotone-light',
          className: 'map-location-input pr-2',
        },
        validation: {
          schema: {
            type: 'union',
            schemas: [{ type: 'array', element: { type: 'object' } }, { type: 'object' }],
          },
        },
      },
      defaultMarkers: {
        type: 'code',
        displayName: 'Default markers',
        options: {
          mode: 'javascript',
          theme: 'duotone-light',
          className: 'map-location-input pr-2',
        },
        validation: {
          schema: {
            type: 'union',
            schemas: [{ type: 'array', element: { type: 'object' } }, { type: 'object' }],
          },
        },
      },
      addNewMarkers: {
        type: 'toggle',
        displayName: 'Add new markers',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      enableDelete: {
        type: 'toggle',
        displayName: 'å…�è®¸å�³é”®åˆ é™¤æ ‡ç­¾',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      canSearch: {
        type: 'toggle',
        displayName: 'Search for places',
        tip: "é«˜å¾·é»˜è®¤æ¯�å¤©å�ªèƒ½è°ƒç”¨100æ¬¡ï¼Œè¶…è¿‡å°±æ— æ³•è¡¥å…¨",
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      showScaleControl: {
        type: 'toggle',
        displayName: 'æ˜¾ç¤ºæ¯”ä¾‹å°º',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      showCenterMarker: {
        type: 'toggle',
        displayName: 'æ˜¾ç¤ºä¸­å¿ƒç‚¹æ ‡è®°',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      geolocation: {
        type: 'toggle',
        displayName: 'é»˜è®¤å®šä½�åˆ°å½“å‰�ä½�ç½®',
        tip: 'å¼€å�¯å��ï¼Œå¦‚æ�œå®šä½�æˆ�åŠŸï¼Œåˆ™ã€�èµ·å§‹ä½�ç½®ã€‘å¤±æ•ˆ',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      zoom: {
        type: 'number',
        displayName: 'é»˜è®¤ç¼©æ”¾çº§åˆ«',
        validation: {
          schema: {
            type: 'number',
          },
        },
      },
      mapApiKey: {
        type: 'code',
        displayName: 'é«˜å¾·åœ°å›¾Akey',
        tip: 'å�¯ä»¥åˆ°é¦–é¡µ->å·¥ä½œåŒºè®¾ç½®->ç®¡ç�†å·¥ä½œåŒºå�˜é‡�,æ·»åŠ ç±»å�‹ä¸ºclintï¼Œå��ç§°ä¸ºAMAP_API_KEYçš„å�˜é‡�ï¼ŒAPIå�¯ä»¥å‰�å¾€é«˜å¾·å¼€æ”¾å¹³å�°ç”³è¯·ã€‚',
        validation: {
          schema: {
            type: 'string',
          },
        },
      },
      mapSecurityKey: {
        type: 'code',
        displayName: 'é«˜å¾·APIå¯†é’¥',
        tip: 'å�¯ä»¥åˆ°é¦–é¡µ->å·¥ä½œåŒºè®¾ç½®->ç®¡ç�†å·¥ä½œåŒºå�˜é‡�,æ·»åŠ ç±»å�‹ä¸ºclintï¼Œå��ç§°ä¸ºAMAP_SECURITY_KEYçš„å�˜é‡�ï¼Œä¸�è®¾ç½®å¯†é’¥æ— æ³•æ�œç´¢åœ°ç‚¹ï¼Œå¯†é’¥å�¯ä»¥å‰�å¾€é«˜å¾·å¼€æ”¾å¹³å�°ç”³è¯·ã€‚',
        validation: {
          schema: {
            type: 'string',
          },
        },
      },
    },
    events: {
      onBoundsChange: { displayName: 'ä¸­å¿ƒç‚¹æ”¹å�˜æ—¶' },
      onCreateMarker: { displayName: 'åˆ›å»ºæ ‡è®°æ—¶' },
      onMarkerClick: { displayName: 'å·¦é”®å�•å‡»æ ‡è®°æ—¶' },
      onMarkerRightClick: { displayName: 'å�³é”®åˆ é™¤æ ‡è®°æ—¶' },
    },
    actions: [
      {
        handle: 'setLocation',
        displayName: 'è®¾ç½®ä½�ç½®',
        params: [
          { handle: 'lat', displayName: 'ç»´åº¦' },
          { handle: 'lng', displayName: 'ç»�åº¦' },
        ],
      },
    ],
    styles: {
      visibility: {
        type: 'toggle',
        displayName: 'Visibility',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      disabledState: {
        type: 'toggle',
        displayName: 'Disable',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
    },
    exposedVariables: {
      center: {},
    },
    definition: {
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      properties: {
        initialLocation: {
          value: `{{ {"lat": 30.24887, "lng": 120.202352} }}`,
        },
        defaultMarkers: {
          value: `{{ [{"lat": 30.24887, "lng": 120.288352}] }}`,
        },
        mapApiKey: {
          value: 'a7a90e05a37d3f6bf76d4a9032fc9129',
        },
        mapSecurityKey: {
          value: '',
        },
        showScaleControl: {
          value: `{{true}}`
        },
        enableDelete: {
          value: `{{true}}`
        },
        showCenterMarker: {
          value: `{{true}}`
        },
        canSearch: {
          value: `{{true}}`,
        },
        geolocation: {
          value: `{{false}}`,
        },
        zoom: {
          value: 10,
        },
        addNewMarkers: { value: `{{true}}` },
      },
      events: [],
      styles: {
        visibility: { value: '{{true}}' },
        disabledState: { value: '{{false}}' },
      },
    },
  },
  {
    name: 'QrScanner',
    displayName: 'äºŒç»´ç �æ‰«æ��å™¨',
    description: 'æ‰«æ��äºŒç»´ç �å¹¶è¯»å�–æ•°æ�®',
    component: 'QrScanner',
    defaultSize: {
      width: 10,
      height: 300,
    },
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    properties: {},
    events: {
      onDetect: { displayName: 'æ£€æµ‹åˆ°æ—¶' },
    },
    styles: {
      visibility: {
        type: 'toggle',
        displayName: 'Visibility',
        validation: {
          schema: { type: 'boolean' },
        },
      },
      disabledState: {
        type: 'toggle',
        displayName: 'Disable',
        validation: {
          schema: { type: 'boolean' },
        },
      },
    },
    exposedVariables: {
      lastDetectedValue: '',
    },
    definition: {
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{true}}' },
      },
      properties: {},
      events: [],
      styles: {
        visibility: { value: '{{true}}' },
        disabledState: { value: '{{false}}' },
      },
    },
  },
  {
    name: 'StarRating',
    displayName: 'è¯„åˆ†',
    description: 'è¯„å®šç­‰çº§',
    component: 'StarRating',
    defaultSize: {
      width: 10,
      height: 30,
    },
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    properties: {
      label: {
        type: 'code',
        displayName: 'Label',
        validation: {
          schema: { type: 'string' },
        },
      },
      maxRating: {
        type: 'code',
        displayName: 'Number of stars',
        validation: {
          schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
        },
      },
      defaultSelected: {
        type: 'code',
        displayName: 'Default no of selected stars',
        validation: {
          schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
        },
      },
      allowHalfStar: {
        type: 'toggle',
        displayName: 'Enable half star',
        validation: {
          schema: { type: 'boolean' },
        },
      },
      tooltips: {
        type: 'code',
        displayName: 'Tooltips',
        validation: {
          schema: { type: 'array', element: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] } },
        },
      },
    },
    events: {
      onChange: { displayName: 'å†…å®¹æ”¹å�˜æ—¶' },
    },
    styles: {
      textColor: {
        type: 'color',
        displayName: 'Star Color',
        validation: {
          schema: { type: 'string' },
        },
      },
      labelColor: {
        type: 'color',
        displayName: 'Label Color',
        validation: {
          schema: { type: 'string' },
        },
      },
      visibility: {
        type: 'toggle',
        displayName: 'Visibility',
        validation: {
          schema: { type: 'boolean' },
        },
      },
      disabledState: {
        type: 'toggle',
        displayName: 'Disable',
        validation: {
          schema: { type: 'boolean' },
        },
      },
    },
    exposedVariables: {
      value: 0,
    },
    definition: {
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      properties: {
        label: { value: 'é€‰æ‹©æ‚¨çš„è¯„åˆ†' },
        maxRating: { value: '5' },
        defaultSelected: { value: '5' },
        allowHalfStar: { value: '{{false}}' },
        visible: { value: '{{true}}' },
        tooltips: { value: '{{[]}}' },
      },
      events: [],
      styles: {
        textColor: { value: '#ffb400' },
        labelColor: { value: '' },
        visibility: { value: '{{true}}' },
        disabledState: { value: '{{false}}' },
      },
    },
  },
  {
    name: 'Divider',
    displayName: 'åˆ†å‰²çº¿',
    description: 'ç»„ä»¶ä¹‹é—´çš„åˆ†éš”çº¿',
    component: 'Divider',
    defaultSize: {
      width: 10,
      height: 10,
    },
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    properties: {},
    events: {},
    styles: {
      dividerColor: {
        type: 'color',
        displayName: 'Divider Color',
        validation: {
          schema: { type: 'string' },
        },
      },
      visibility: {
        type: 'toggle',
        displayName: 'Visibility',
        validation: {
          schema: { type: 'boolean' },
        },
      },
    },
    exposedVariables: {
      value: {},
    },
    definition: {
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      properties: {},
      events: [],
      styles: {
        visibility: { value: '{{true}}' },
        dividerColor: { value: '' },
      },
    },
  },
  {
    name: 'FilePicker',
    displayName: 'æ–‡ä»¶é€‰æ‹©å™¨',
    description: 'ç”¨äº�ä¸Šä¼ æ–‡ä»¶çš„æ–‡æœ¬é€‰æ‹©å™¨',
    component: 'FilePicker',
    defaultSize: {
      width: 15,
      height: 100,
    },
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    actions: [
      {
        handle: 'clearFiles',
        displayName: 'æ¸…é™¤æ–‡ä»¶',
      },
    ],
    properties: {
      instructionText: {
        type: 'code',
        displayName: 'Instruction Text',
        validation: {
          schema: { type: 'string' },
        },
      },
      enableDropzone: {
        type: 'toggle',
        displayName: 'Use Drop zone',
        validation: {
          schema: { type: 'boolean' },
        },
      },
      enablePicker: {
        type: 'toggle',
        displayName: 'Use File Picker',
        validation: {
          schema: { type: 'boolean' },
        },
      },
      enableMultiple: {
        type: 'toggle',
        displayName: 'Pick multiple files',
        validation: {
          schema: { type: 'boolean' },
        },
      },
      maxFileCount: {
        type: 'number',
        displayName: 'Max file count',
        validation: {
          schema: {
            type: 'union',
            schemas: [{ type: 'string' }, { type: 'number' }],
          },
        },
      },
      fileType: {
        type: 'code',
        displayName: 'Accept file types',
        validation: {
          schema: {
            type: 'string',
          },
        },
      },
      maxSize: {
        type: 'code',
        displayName: 'Max size limit (Bytes)',
        validation: {
          schema: {
            type: 'union',
            schemas: [{ type: 'string' }, { type: 'number' }],
          },
        },
      },
      minSize: {
        type: 'code',
        displayName: 'Min size limit (Bytes)',
        validation: {
          schema: {
            type: 'union',
            schemas: [{ type: 'string' }, { type: 'number' }],
          },
        },
      },
      parseContent: {
        type: 'toggle',
        displayName: 'Parse content',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      parseFileType: {
        type: 'select',
        displayName: 'File type',
        options: [
          { name: 'ä»�æ‰©å±•è‡ªåŠ¨æ£€æµ‹', value: 'auto-detect' },
          { name: 'CSV', value: 'csv' },
          { name: 'Excel - xls', value: 'vnd.ms-excel' },
          {
            name: 'Excel - xlsx',
            value: 'vnd.openxmlformats-officedocument.spreadsheetml.sheet',
          },
        ],
        validation: {
          schema: {
            type: 'string',
          },
        },
      },
    },
    events: {
      onFileSelected: { displayName: 'é€‰å®šæ–‡ä»¶æ—¶' },
      onFileLoaded: { displayName: 'åŠ è½½æ–‡ä»¶æ—¶' },
      onFileDeselected: { displayName: 'å�–æ¶ˆé€‰æ‹©æ–‡ä»¶æ—¶' },
    },
    styles: {
      visibility: {
        type: 'toggle',
        displayName: 'Visibility',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      disabledState: {
        type: 'toggle',
        displayName: 'Disable',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      borderRadius: {
        type: 'number',
        displayName: 'Border radius',
        validation: {
          schema: {
            type: 'union',
            schemas: [{ type: 'string' }, { type: 'number' }],
          },
        },
      },
    },
    exposedVariables: {
      file: [{ name: '', content: '', dataURL: '', type: '', parsedData: '' }],
      isParsing: false,
    },
    definition: {
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      properties: {
        instructionText: { value: 'å°†ä¸€äº›æ–‡ä»¶æ‹–æ”¾åˆ°æ­¤å¤„ï¼Œæˆ–å�•å‡»ä»¥é€‰æ‹©æ–‡ä»¶' },
        enableDropzone: { value: '{{true}}' },
        enablePicker: { value: '{{true}}' },
        maxFileCount: { value: '{{2}}' },
        enableMultiple: { value: '{{false}}' },
        fileType: { value: '{{"image/*"}}' },
        maxSize: { value: '{{1048576}}' },
        minSize: { value: '{{50}}' },
        parseContent: { value: '{{false}}' },
        parseFileType: { value: 'auto-detect' },
      },
      events: [],
      styles: {
        visibility: { value: '{{true}}' },
        disabledState: { value: '{{false}}' },
        borderRadius: { value: '{{0}}' },
      },
    },
  },
  {
    name: 'Calendar',
    displayName: 'æ—¥å�†',
    description: 'æ—¥å�†',
    component: 'Calendar',
    defaultSize: {
      width: 30,
      height: 600,
    },
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    properties: {
      dateFormat: { type: 'code', displayName: 'Date format' },
      defaultDate: { type: 'code', displayName: 'Default date' },
      events: { type: 'code', displayName: 'Events' },
      resources: { type: 'code', displayName: 'Resources' },
      defaultView: {
        type: 'select', displayName: 'Default view', options: [
          { name: 'æœˆè§†å›¾', value: 'month' },
          { name: 'å‘¨è§†å›¾', value: 'week' },
          { name: 'æ—¥è§†å›¾', value: 'day' },
          { name: 'æ—¥ç¨‹åˆ—è¡¨', value: 'agenda' },
        ]
      },
      startTime: {
        type: 'code',
        displayName: 'Start time on week and day view',
      },
      endTime: { type: 'code', displayName: 'End time on week and day view' },
      displayToolbar: { type: 'toggle', displayName: 'Show toolbar' },
      displayViewSwitcher: {
        type: 'toggle',
        displayName: 'Show view switcher',
      },
      highlightToday: { type: 'toggle', displayName: 'Highlight today' },
      showPopOverOnEventClick: {
        type: 'toggle',
        displayName: 'Show popover when event is clicked',
      },
    },
    events: {
      onCalendarEventSelect: { displayName: 'äº‹ä»¶é€‰æ‹©æ—¶' },
      onCalendarSlotSelect: { displayName: 'æ�’æ§½é€‰æ‹©æ—¶' },
      onCalendarNavigate: { displayName: 'æ—¥æœŸå¯¼èˆªæ—¶' },
      onCalendarViewChange: { displayName: 'è§†å›¾æ›´æ”¹æ—¶' },
    },
    styles: {
      visibility: { type: 'toggle', displayName: 'Visibility' },
      cellSizeInViewsClassifiedByResource: {
        type: 'select',
        displayName: 'Cell size in views classified by resource',
        options: [
          { name: 'ç´§å‡‘', value: 'compact' },
          { name: 'å®½æ�¾', value: 'spacious' },
        ],
      },
      weekDateFormat: {
        type: 'code',
        displayName: 'Header date format on week view',
      },
    },
    exposedVariables: {
      selectedEvent: {},
      selectedSlots: {},
      currentView: 'month',
      currentDate: undefined,
    },
    definition: {
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      properties: {
        dateFormat: {
          value: 'YYYY-DD-MM HH:mm:ss',
        },
        defaultDate: {
          value: '{{moment().format("YYYY-DD-MM HH:mm:ss")}}',
        },
        events: {
          value:
            "{{[\n\t\t{\n\t\t\t title: 'æ™¨ä¼š',\n\t\t\t start: `${moment().startOf('day').format('YYYY-DD-MM HH:mm:ss')}`,\n\t\t\t end: `${moment().startOf('day').hour(6).format('YYYY-DD-MM HH:mm:ss')}`,\n\t\t\t allDay: false,\n\t\t\t color: '#8D72DA',\n\t\tresourceId: 1},{\n\t\t\t title: 'ä¼šè®®1',\n\t\t\t start: `${moment().startOf('day').add(9,'hour').format('YYYY-DD-MM HH:mm:ss')}`,\n\t\t\t end: `${moment().endOf('day').format('YYYY-DD-MM HH:mm:ss')}`,\n\t\t\t allDay: false,\n\t\t\t color: '#4D72DA',\n\t\tresourceId: 2}\n]}}",
        },
        resources: {
          value: "{{[{resourceId: 1, title: 'ä¼šè®®å®¤1'},{resourceId: 2, title: 'ä¼šè®®å®¤2'}]}}",
        },
        defaultView: {
          value: "{{'month'}}",
        },
        startTime: {
          value: "{{moment().startOf('day').format('YYYY-DD-MM HH:mm:ss')}}",
        },
        endTime: {
          value: "{{moment().endOf('day').format('YYYY-DD-MM HH:mm:ss')}}",
        },
        displayToolbar: {
          value: true,
        },
        displayViewSwitcher: {
          value: true,
        },
        highlightToday: {
          value: true,
        },
        showPopOverOnEventClick: {
          value: false,
        },
      },
      events: [],
      styles: {
        visibility: { value: '{{true}}' },
        cellSizeInViewsClassifiedByResource: { value: 'compact' },
        weekDateFormat: { value: 'D' },
      },
    },
  },
  {
    name: 'Iframe',
    displayName: 'Iframe',
    description: 'æ˜¾ç¤ºä¸€ä¸ªæ¡†æ�¶',
    defaultSize: {
      width: 10,
      height: 310,
    },
    component: 'IFrame',
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    properties: {
      source: {
        type: 'code',
        displayName: 'URL',
        validation: {
          schema: { type: 'string' },
        },
      },
    },
    events: {},
    styles: {
      visibility: {
        type: 'toggle',
        displayName: 'Visibility',
        validation: {
          schema: { type: 'boolean' },
        },
      },
      disabledState: {
        type: 'toggle',
        displayName: 'Disable',
        validation: {
          schema: { type: 'boolean' },
        },
      },
    },
    exposedVariables: {},
    definition: {
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      properties: {
        source: { value: 'https://tooljet.io/' },
        visible: { value: '{{true}}' },
      },
      events: [],
      styles: {
        visibility: { value: '{{true}}' },
        disabledState: { value: '{{false}}' },
      },
    },
  },
  {
    name: 'CodeEditor',
    displayName: 'ä»£ç �ç¼–è¾‘å™¨',
    description: 'ç”¨äº�å¸¸ç”¨ä»£ç �ç¼–è¾‘',
    component: 'CodeEditor',
    defaultSize: {
      width: 15,
      height: 120,
    },
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    properties: {
      enableLineNumber: {
        type: 'code',
        displayName: 'Show Line Number',
        validation: {
          schema: { type: 'boolean' },
        },
      },
      mode: {
        type: 'code',
        displayName: 'Mode',
        validation: {
          schema: { type: 'string' },
        },
      },
      placeholder: {
        type: 'code',
        displayName: 'Placeholder',
        validation: {
          schema: { type: 'string' },
        },
      },
    },
    events: {},
    styles: {
      visibility: {
        type: 'toggle',
        displayName: 'Visibility',
        validation: {
          schema: { type: 'boolean' },
        },
      },
      disabledState: {
        type: 'toggle',
        displayName: 'Disable',
        validation: {
          schema: { type: 'boolean' },
        },
      },
      borderRadius: {
        type: 'code',
        displayName: 'Border radius',
        validation: {
          schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
        },
      },
    },
    exposedVariables: {
      value: '',
    },
    definition: {
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      properties: {
        enableLineNumber: { value: '{{true}}' },
        mode: { value: 'javascript' },
        placeholder: { value: '' },
      },
      events: [],
      styles: {
        visibility: { value: '{{true}}' },
        disabledState: { value: '{{false}}' },
        borderRadius: { value: '{{0}}' },
      },
    },
  },
  {
    name: 'VerticalTabs',
    displayName: 'å�‚ç›´é€‰é¡¹å�¡',
    description: 'é€‰é¡¹å�¡ç»„ä»¶',
    component: 'VerticalTabs',
    defaultSize: {
      width: 30,
      height: 300,
    },
    defaultChildren: [
    ],
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    properties: {
      tabs: {
        type: 'code',
        displayName: 'Tabs',
        validation: {
          schema: {
            type: 'array',
            element: {
              type: 'object',
              object: {
                id: {
                  type: 'union',
                  schemas: [{ type: 'string' }, { type: 'number' }],
                },
              },
            },
          },
        },
      },
      defaultTab: {
        type: 'code',
        displayName: 'Default tab',
        validation: {
          schema: {
            type: 'union',
            schemas: [{ type: 'string' }, { type: 'number' }],
          },
        },
      },
      hideTabs: {
        type: 'toggle',
        displayName: 'Hide Tabs',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      tabNavWidth: {
        type: 'number',
        displayName: 'ä¾§è¾¹æ �å®½åº¦',
        validation: {
          schema: {
            type: 'number',
          },
        },
      },
      renderOnlyActiveTab: {
        type: 'toggle',
        displayName: 'Render only active tab',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
    },
    events: { onTabSwitch: { displayName: 'é€‰é¡¹å�¡åˆ‡æ�¢æ—¶' } },
    styles: {
      highlightColor: {
        type: 'color',
        displayName: 'Highlight Color',
        validation: {
          schema: { type: 'string' },
        },
      },
      visibility: {
        type: 'toggle',
        displayName: 'Visibility',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      disabledState: {
        type: 'toggle',
        displayName: 'Disable',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
    },
    actions: [
      {
        handle: 'setTab',
        displayName: 'è®¾ç½®é€‰é¡¹å�¡',
        params: [
          {
            handle: 'id',
            displayName: 'Id',
          },
        ],
      },
    ],
    exposedVariables: { currentTab: '' },
    definition: {
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      properties: {
        tabs: {
          value:
            "{{[ \n\t\t{ title: 'ä¸»é¡µ', id: '0' }, \n\t\t{ title: 'å±•ç¤º', id: '1' }, \n\t\t{ title: 'è®¾ç½®', id: '2' } \n ]}}",
        },
        defaultTab: { value: '0' },
        hideTabs: { value: false },
        tabNavWidth: { value: 100 },
        renderOnlyActiveTab: { value: true },
      },
      events: [],
      styles: {
        highlightColor: { value: '' },
        visibility: { value: '{{true}}' },
        disabledState: { value: '{{false}}' },
      },
    },
  },
  {
    name: 'Tabs',
    displayName: 'é€‰é¡¹å�¡',
    description: 'é€‰é¡¹å�¡ç»„ä»¶',
    defaultSize: {
      width: 30,
      height: 300,
    },
    defaultChildren: [
      {
        componentName: 'Image',
        layout: {
          top: 60,
          left: 37,
          height: 100,
        },
        tab: 0,
        properties: ['source'],
        defaultValue: {
          source: 'https://uploads-ssl.webflow.com/6266634263b9179f76b2236e/62666392f32677b5cb2fb84b_logo.svg',
        },
      },
      {
        componentName: 'Text',
        layout: {
          top: 100,
          left: 17,
          height: 50,
          width: 34,
        },
        tab: 1,
        properties: ['text'],
        defaultValue: {
          text: 'å¼€æº�ä½�ä»£ç �æ¡†æ�¶ï¼Œå�¯åœ¨å‡ åˆ†é’Ÿå†…æ�„å»ºå’Œéƒ¨ç½²å†…éƒ¨å·¥å…·.',
        },
      },
      {
        componentName: 'Table',
        layout: {
          top: 0,
          left: 1,
          width: 42,
          height: 250,
        },
        tab: 2,
      },
    ],
    component: 'Tabs',
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    properties: {
      tabs: {
        type: 'code',
        displayName: 'Tabs',
        validation: {
          schema: {
            type: 'array',
            element: {
              type: 'object',
              object: {
                id: {
                  type: 'union',
                  schemas: [{ type: 'string' }, { type: 'number' }],
                },
              },
            },
          },
        },
      },
      defaultTab: {
        type: 'code',
        displayName: 'Default tab',
        validation: {
          schema: {
            type: 'union',
            schemas: [{ type: 'string' }, { type: 'number' }],
          },
        },
      },
      hideTabs: {
        type: 'toggle',
        displayName: 'Hide Tabs',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      renderOnlyActiveTab: {
        type: 'toggle',
        displayName: 'Render only active tab',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
    },
    events: { onTabSwitch: { displayName: 'é€‰é¡¹å�¡åˆ‡æ�¢æ—¶' } },
    styles: {
      highlightColor: {
        type: 'color',
        displayName: 'Highlight Color',
        validation: {
          schema: { type: 'string' },
        },
      },
      visibility: {
        type: 'toggle',
        displayName: 'Visibility',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      disabledState: {
        type: 'toggle',
        displayName: 'Disable',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      tabWidth: {
        type: 'select',
        displayName: 'Tab width',
        options: [
          { name: 'è‡ªåŠ¨', value: 'auto' },
          { name: 'å¹³å�‡åˆ†é…�', value: 'split' },
        ],
      },
    },
    actions: [
      {
        handle: 'setTab',
        displayName: 'è®¾ç½®é€‰é¡¹å�¡',
        params: [
          {
            handle: 'id',
            displayName: 'Id',
          },
        ],
      },
    ],
    exposedVariables: { currentTab: '' },
    definition: {
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      properties: {
        tabs: {
          value:
            "{{[ \n\t\t{ title: 'ä¸»é¡µ', id: 0 }, \n\t\t{ title: 'å±•ç¤º', id: 1 }, \n\t\t{ title: 'è®¾ç½®', id: 2 } \n ]}}",
        },
        defaultTab: { value: '0' },
        hideTabs: { value: false },
        renderOnlyActiveTab: { value: true },
      },
      events: [],
      styles: {
        highlightColor: { value: '' },
        visibility: { value: '{{true}}' },
        disabledState: { value: '{{false}}' },
        tabWidth: { value: 'auto' },
      },
    },
  },
  {
    name: 'Timer',
    displayName: 'å®šæ—¶å™¨',
    description: 'åƒ�ç§’è¡¨çš„å®šæ—¶å™¨',
    component: 'Timer',
    defaultSize: {
      width: 11,
      height: 128,
    },
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    properties: {
      value: {
        type: 'code',
        displayName: 'Default value',
        validation: {
          schema: { type: 'string' },
        },
      },
      type: {
        type: 'select',
        displayName: 'Timer type',
        options: [
          { name: 'ç§’è¡¨', value: 'countUp' },
          { name: 'å€’è®¡æ—¶', value: 'countDown' },
        ],
        validation: {
          schema: { type: 'string' },
        },
      },
    },
    validation: {},
    events: {
      onStart: { displayName: 'å�¯åŠ¨æ—¶' },
      onResume: { displayName: 'æ�¢å¤�æ—¶' },
      onPause: { displayName: 'æš‚å�œæ—¶' },
      onCountDownFinish: { displayName: 'å€’è®¡æ—¶å®Œæˆ�æ—¶' },
      onReset: { displayName: 'é‡�ç½®æ—¶' },
    },
    styles: {
      visibility: {
        type: 'toggle',
        displayName: 'Visibility',
        validation: {
          schema: { type: 'boolean' },
        },
      },
      disabledState: {
        type: 'toggle',
        displayName: 'Disable',
        validation: {
          schema: { type: 'boolean' },
        },
      },
    },
    exposedVariables: {
      value: '',
    },
    definition: {
      validation: {},
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      properties: {
        value: {
          value: '00:00:00:000',
        },
        type: {
          value: 'countUp',
        },
      },
      defaults: [
        {
          type: 'countUp',
          value: '00:00:00:000',
          paramName: 'value',
        },
        {
          type: 'countDown',
          value: '00:00:10:000',
          paramName: 'value',
        },
      ],
      events: [],
      styles: {
        visibility: { value: '{{true}}' },
        disabledState: { value: '{{false}}' },
      },
    },
  },
  {
    name: 'Listview',
    displayName: 'åˆ—è¡¨è§†å›¾',
    description: 'å¤šä¸ªç»„ä»¶çš„åŒ…è£…å™¨',
    defaultSize: {
      width: 20,
      height: 300,
    },
    defaultChildren: [
      {
        componentName: 'Image',
        layout: {
          top: 15,
          left: 6.976744186046512,
          height: 100,
        },
        properties: ['source'],
        accessorKey: 'imageURL',
      },
      {
        componentName: 'Text',
        layout: {
          top: 50,
          left: 27,
          height: 30,
        },
        properties: ['text'],
        accessorKey: 'text',
      },
      {
        componentName: 'Button',
        layout: {
          top: 50,
          left: 60,
          height: 30,
        },
        incrementWidth: 2,
        properties: ['text'],
        accessorKey: 'buttonText',
      },
    ],
    component: 'Listview',
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    properties: {
      data: {
        type: 'code',
        displayName: 'List data',
        validation: {
          schema: { type: 'array', element: { type: 'object' } },
        },
      },
      mode: {
        type: 'select',
        displayName: 'Mode',
        options: [
          { name: 'åˆ—è¡¨æ¨¡å¼�', value: 'list' },
          { name: 'ç½‘æ ¼æ¨¡å¼�', value: 'grid' },
        ],
        validation: {
          schema: { type: 'string' },
        },
      },
      columns: {
        type: 'number',
        displayName: 'Columns',
        validation: {
          schema: { type: 'number' },
        },
        conditionallyRender: {
          key: 'mode',
          value: 'grid',
        },
      },
      rowHeight: {
        type: 'code',
        displayName: 'Row height',
        validation: {
          schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
        },
      },
      showBorder: {
        type: 'toggle',
        displayName: 'Show bottom border',
        validation: {
          schema: { type: 'boolean' },
        },
        conditionallyRender: {
          key: 'mode',
          value: 'list',
        },
      },
      enablePagination: {
        type: 'toggle',
        displayName: 'å�¯ç”¨åˆ†é¡µ',
        validation: {
          schema: { type: 'boolean' },
        },
      },
      rowsPerPage: {
        type: 'code',
        displayName: 'æ¯�é¡µæ•°é‡�',
        validation: {
          schema: { type: 'number' },
        },
      },
    },
    events: {
      onRowClicked: { displayName: 'ç‚¹å‡»è¡Œ (å·²å¼ƒç”¨)' },
      onRecordClicked: { displayName: 'ç‚¹å‡»è®°å½•' },
    },
    styles: {
      backgroundColor: {
        type: 'color',
        displayName: 'Background color',
        validation: {
          schema: { type: 'string' },
        },
      },
      borderColor: {
        type: 'color',
        displayName: 'è¾¹æ¡†é¢œè‰²',
        validation: {
          schema: { type: 'string' },
        },
      },
      visibility: {
        type: 'toggle',
        displayName: 'Visibility',
        validation: {
          schema: { type: 'boolean' },
        },
      },
      disabledState: {
        type: 'toggle',
        displayName: 'Disable',
        validation: {
          schema: { type: 'boolean' },
        },
      },
      borderRadius: {
        type: 'number',
        displayName: 'Border radius',
        validation: {
          schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
        },
      },
    },
    exposedVariables: {
      data: [{}],
    },
    definition: {
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      properties: {
        data: {
          value: `{{[
  { imageURL: 'https://www.svgrepo.com/show/34217/image.svg', text: 'Sample text 1', buttonText: 'Button 1' },
    { imageURL: 'https://www.svgrepo.com/show/34217/image.svg', text: 'Sample text 1', buttonText: 'Button 2' },
    { imageURL: 'https://www.svgrepo.com/show/34217/image.svg', text: 'Sample text 1', buttonText: 'Button 3' },
  ]}}`,
        },
        mode: { value: 'list' },
        columns: { value: '{{3}}' },
        rowHeight: {
          value: '100',
        },
        visible: { value: '{{true}}' },
        showBorder: { value: '{{true}}' },
        rowsPerPage: { value: '{{10}}' },
        enablePagination: { value: '{{false}}' },
      },
      events: [],
      styles: {
        backgroundColor: { value: '#fff' },
        borderColor: { value: '#dadcde' },
        visibility: { value: '{{true}}' },
        disabledState: { value: '{{false}}' },
        borderRadius: { value: '{{0}}' },
      },
    },
  },
  {
    name: 'Tags',
    displayName: 'æ ‡ç­¾',
    description: 'å†…å®¹å�¯ä»¥æ˜¾ç¤ºä¸ºæ ‡ç­¾',
    component: 'Tags',
    defaultSize: {
      width: 8,
      height: 30,
    },
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    properties: {
      data: {
        type: 'code',
        displayName: 'Tags',
        validation: {
          schema: {
            type: 'array',
            element: {
              type: 'object',
              object: { title: { type: 'string' }, color: { type: 'string' }, textColor: { type: 'string' } },
            },
          },
        },
      },
    },
    events: {},
    styles: {
      visibility: {
        type: 'toggle',
        displayName: 'Visibility',
        validation: {
          schema: { type: 'boolean' },
        },
      },
    },
    exposedVariables: {},
    definition: {
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      properties: {
        data: {
          value:
            "{{ [ \n\t\t{ title: 'success', color: '#2fb344', textColor: '#fff' }, \n\t\t{ title: 'info', color: '#206bc4', textColor: '#fff'  }, \n\t\t{ title: 'warning', color: '#f59f00', textColor: '#fff'  }, \n\t\t{ title: 'danger', color: '#d63939', textColor: '#fff' } ] }}",
        },
      },
      events: [],
      styles: {
        visibility: { value: '{{true}}' },
      },
    },
  },
  {
    name: 'Pagination',
    displayName: 'åˆ†é¡µ',
    description: 'åˆ†é¡µç»„ä»¶ ',
    component: 'Pagination',
    defaultSize: {
      width: 10,
      height: 30,
    },
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    properties: {
      numberOfPages: {
        type: 'code',
        displayName: 'Number of pages',
        validation: {
          schema: { type: 'number' },
        },
      },
      defaultPageIndex: {
        type: 'code',
        displayName: 'Default page index',
        validation: {
          schema: { type: 'number' },
        },
      },
    },
    validation: {},
    events: {
      onPageChange: { displayName: 'é¡µç �æ”¹å�˜æ—¶' },
    },
    styles: {
      visibility: {
        type: 'toggle',
        displayName: 'Visibility',
        validation: {
          schema: { type: 'boolean' },
        },
      },
      disabledState: {
        type: 'toggle',
        displayName: 'Disable',
        validation: {
          schema: { type: 'boolean' },
        },
      },
    },
    exposedVariables: {
      totalPages: null,
      currentPageIndex: null,
    },
    definition: {
      validation: {},
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      properties: {
        numberOfPages: {
          value: '{{5}}',
        },
        defaultPageIndex: {
          value: '{{1}}',
        },
      },
      events: [],
      styles: {
        visibility: { value: '{{true}}' },
        disabledState: { value: '{{false}}' },
      },
    },
  },
  {
    name: 'CircularProgressbar',
    displayName: 'åœ†å½¢è¿›åº¦æ�¡',
    description: 'ä½¿ç”¨åœ†å½¢è¿›åº¦æ�¡æ˜¾ç¤ºè¿›åº¦',
    component: 'CircularProgressBar',
    defaultSize: {
      width: 7,
      height: 50,
    },
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    properties: {
      text: {
        type: 'code',
        displayName: 'Text',
        validation: {
          schema: { type: 'string' },
        },
      },
      progress: {
        type: 'code',
        displayName: 'Progress',
        validation: {
          schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
        },
      },
    },
    events: {},
    styles: {
      color: {
        type: 'color',
        displayName: 'Color',
        validation: {
          schema: { type: 'string' },
        },
      },
      textColor: {
        type: 'color',
        displayName: 'Text Color',
        validation: {
          schema: { type: 'string' },
        },
      },
      textSize: {
        type: 'code',
        displayName: 'Text Size',
        validation: {
          schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
        },
      },
      strokeWidth: {
        type: 'code',
        displayName: 'Stroke Width',
        validation: {
          schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
        },
      },
      counterClockwise: {
        type: 'code',
        displayName: 'Counter Clockwise',
        validation: {
          schema: { type: 'boolean' },
        },
      },
      circleRatio: {
        type: 'code',
        displayName: 'Circle Ratio',
        validation: {
          schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
        },
      },
      visibility: {
        type: 'toggle',
        displayName: 'Visibility',
        validation: {
          schema: { type: 'boolean' },
        },
      },
    },
    exposedVariables: {},
    definition: {
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      properties: {
        text: {
          value: '',
        },
        progress: {
          value: '{{50}}',
        },
      },
      events: [],
      styles: {
        color: { value: '' },
        textColor: { value: '' },
        textSize: { value: '{{16}}' },
        strokeWidth: { value: '{{8}}' },
        counterClockwise: { value: '{{false}}' },
        circleRatio: { value: '{{1}}' },
        visibility: { value: '{{true}}' },
      },
    },
  },
  {
    name: 'Spinner',
    displayName: 'åŠ è½½æ€�',
    description: 'å�¯ç”¨äº�æ˜¾ç¤ºåŠ è½½çŠ¶æ€�',
    component: 'Spinner',
    defaultSize: {
      width: 4,
      height: 30,
    },
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    properties: {},
    events: {},
    styles: {
      visibility: {
        type: 'toggle',
        displayName: 'Visibility',
        validation: {
          schema: { type: 'boolean' },
        },
      },
      colour: {
        type: 'color',
        displayName: 'Colour',
        validation: {
          schema: { type: 'string' },
        },
      },
      size: {
        type: 'select',
        displayName: 'Size',
        options: [
          { name: 'å°�', value: 'sm' },
          { name: 'å¤§', value: 'lg' },
        ],
        validation: {
          schema: { type: 'string' },
        },
      },
    },
    exposedVariables: {},
    definition: {
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      properties: {},
      events: [],
      styles: {
        visibility: { value: '{{true}}' },
        size: { value: 'sm' },
        colour: { value: '#0565ff' },
      },
    },
  },
  {
    name: 'Statistics',
    displayName: 'ç»Ÿè®¡æ•°æ�®',
    description: 'ç”¨äº�æ˜¾ç¤ºä¸�å�Œçš„ç»Ÿè®¡ä¿¡æ�¯',
    component: 'Statistics',
    defaultSize: {
      width: 9.2,
      height: 152,
    },
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    properties: {
      primaryValueLabel: {
        type: 'code',
        displayName: 'Primary value label',
        validation: { schema: { type: 'string' } },
      },
      primaryValue: { type: 'code', displayName: 'Primary value', validation: { schema: { type: 'string' } } },
      hideSecondary: {
        type: 'toggle',
        displayName: 'Hide secondary value',
        validation: { schema: { type: 'boolean' } },
      },
      secondaryValueLabel: {
        type: 'code',
        displayName: 'Secondary value label',
        validation: { schema: { type: 'string' } },
      },
      secondaryValue: { type: 'code', displayName: 'Secondary value', validation: { schema: { type: 'string' } } },
      secondarySignDisplay: {
        type: 'select',
        displayName: 'Secondary sign display',
        options: [
          { name: 'ä¸Šå�‡', value: 'positive' },
          { name: 'ä¸‹é™�', value: 'negative' },
        ],
        validation: { schema: { type: 'string' } },
      },
      loadingState: { type: 'toggle', displayName: 'Loading State', validation: { schema: { type: 'boolean' } } },
    },
    events: {},
    styles: {
      primaryLabelColour: {
        type: 'color',
        displayName: 'Primary Label Colour',
        validation: { schema: { type: 'string' } },
      },
      primaryTextColour: {
        type: 'color',
        displayName: 'Primary Text  Colour',
        validation: { schema: { type: 'string' } },
      },
      secondaryLabelColour: {
        type: 'color',
        displayName: 'Secondary Label Colour',
        validation: { schema: { type: 'string' } },
      },
      secondaryTextColour: {
        type: 'color',
        displayName: 'Secondary Text Colour',
        validation: { schema: { type: 'string' } },
      },
      visibility: {
        type: 'toggle',
        displayName: 'Visibility',
        validation: { schema: { type: 'boolean' } },
      },
    },
    definition: {
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      properties: {
        primaryValueLabel: { value: 'æœ¬æœˆæ”¶å…¥' },
        primaryValue: { value: '682.3' },
        secondaryValueLabel: { value: 'ä¸Šä¸ªæœˆ' },
        secondaryValue: { value: '2.85' },
        secondarySignDisplay: { value: 'positive' },
        loadingState: { value: `{{false}}` },
      },
      events: [],
      styles: {
        primaryLabelColour: { value: '#8092AB' },
        primaryTextColour: { value: '#000000' },
        secondaryLabelColour: { value: '#8092AB' },
        secondaryTextColour: { value: '#36AF8B' },
        visibility: { value: '{{true}}' },
      },
    },
  },
  {
    name: 'RangeSlider',
    displayName: 'èŒƒå›´æ»‘å�—',
    description: 'å�¯ç”¨äº�æ˜¾ç¤ºæœ‰èŒƒå›´çš„æ»‘å�—',
    component: 'RangeSlider',
    defaultSize: {
      width: 9,
      height: 30,
    },
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    properties: {
      min: {
        type: 'number',
        displayName: 'Min',
        validation: {
          schema: { type: 'number' },
        },
      },
      max: {
        type: 'number',
        displayName: 'Max',
        validation: {
          schema: { type: 'number' },
        },
      },
      value: {
        type: 'code',
        displayName: 'Value',
        validation: {
          schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
        },
      },
      enableTwoHandle: {
        type: 'toggle',
        displayName: 'Two handles',
        validation: {
          schema: { type: 'boolean' },
        },
      },
    },
    events: {
      onChange: { displayName: 'å†…å®¹æ”¹å�˜æ—¶' },
    },
    styles: {
      lineColor: {
        type: 'color',
        displayName: 'Line color',
        validation: {
          schema: { type: 'string' },
        },
      },
      handleColor: {
        type: 'color',
        displayName: 'Handle color',
        validation: {
          schema: { type: 'string' },
        },
      },
      trackColor: {
        type: 'color',
        displayName: 'Track color',
        validation: {
          schema: { type: 'string' },
        },
      },
      visibility: {
        type: 'code',
        displayName: 'Visibility',
        validation: {
          schema: { type: 'boolean' },
        },
      },
    },
    exposedVariables: {
      value: null,
    },
    definition: {
      others: {
        showOnDesktop: { value: true },
        showOnMobile: { value: false },
      },
      properties: {
        min: {
          value: '{{0}}',
        },
        max: {
          value: '{{100}}',
        },
        value: {
          value: '{{50}}',
        },
        enableTwoHandle: { value: false },
      },
      events: [],
      styles: {
        lineColor: { value: '' },
        handleColor: { value: '' },
        trackColor: { value: '' },
        visibility: { value: '{{true}}' },
      },
    },
  },
  {
    name: 'Timeline',
    displayName: 'æ—¶é—´çº¿',
    description: 'æ—¶é—´åº�åˆ—çš„å�¯è§†åŒ–æ˜¾ç¤º',
    component: 'Timeline',
    properties: {
      data: {
        type: 'code',
        displayName: 'Timeline data',
        validation: {
          schema: { type: 'array', element: { type: 'object' } },
        },
      },
      hideDate: {
        type: 'toggle',
        displayName: 'Hide Date',
        validation: {
          schema: { type: 'boolean' },
        },
      },
    },
    defaultSize: {
      width: 20,
      height: 270,
    },
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    events: { onClick: { displayName: 'å�•å‡»æ—¶' } },
    styles: {
      visibility: {
        type: 'toggle',
        displayName: 'Visibility',
        validation: { schema: { type: 'boolean' } },
      },
      fontColor: {
        type: 'color',
        displayName: 'æ ‡é¢˜å­—ä½“é¢œè‰²',
        validation: {
          schema: { type: 'string' },
        },
      },
    },
    exposedVariables: {
      clickedItem: {},
    },
    definition: {
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      properties: {
        data: {
          value:
            "{{ [ \n\t\t{ title: 'äº§å“�å�‘å¸ƒ', subTitle: 'æˆ‘ä»¬äº§å“�çš„ç¬¬ä¸€ä¸ªç‰ˆæœ¬å�‘å…¬ä¼—å�‘å¸ƒ', date: '2021/01/03', iconBackgroundColor: '#4d72fa'},\n\t\t { title: 'é¦–æ¬¡æ³¨å†Œ', subTitle: 'ç¥�è´ºæˆ‘ä»¬ç¬¬ä¸€æ¬¡æ³¨å†Œ', date: '2021/10/22', iconBackgroundColor: '#4d72fa'}, \n\t\t { title: 'é¦–æ¬¡ä»˜æ¬¾', subTitle: 'ä¸‡å²�ï¼�æˆ‘ä»¬æ‹¿åˆ°äº†ç¬¬ä¸€ç¬”ä»˜æ¬¾', date: '2022/07/09', iconBackgroundColor: '#4d72fa'} \n] }}",
        },
        hideDate: { value: '{{false}}' },
      },
      events: [],
      styles: {
        visibility: { value: '{{true}}' },
        fontColor: { value: '#000' },
      },
    },
  },
  {
    name: 'SvgImage',
    displayName: 'Svgå›¾æ ‡',
    description: 'æ˜¾ç¤ºSVGå›¾æ ‡',
    component: 'SvgImage',
    properties: {
      data: {
        type: 'code',
        displayName: 'Svg  data',
        validation: {
          schema: { type: 'string' },
        },
      },
    },
    defaultSize: {
      width: 4,
      height: 50,
    },
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    events: {},
    styles: {
      visibility: {
        type: 'toggle',
        displayName: 'Visibility',
        validation: {
          schema: { type: 'boolean' },
        },
      },
    },
    exposedVariables: {
      value: {},
    },
    definition: {
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      properties: {
        data: {
          value:
            '<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>',
        },
      },
      events: [],
      styles: {
        visibility: { value: '{{true}}' },
      },
    },
  },
  {
    name: 'Html',
    displayName: 'HTMLæŸ¥çœ‹å™¨',
    description: 'HTMLæŸ¥çœ‹å™¨',
    component: 'Html',
    defaultSize: {
      width: 10,
      height: 310,
    },
    properties: {
      rawHtml: {
        type: 'code',
        displayName: 'Raw HTML',
        validation: {
          schema: { type: 'string' },
        },
      },
    },
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    events: {},
    styles: {
      visibility: {
        type: 'toggle',
        displayName: 'Visibility',
        validation: {
          schema: { type: 'boolean' },
        },
      },
    },
    exposedVariables: {},
    definition: {
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      properties: {
        rawHtml: {
          value: `<body><main><section class="hero" style="height:306px;display: flex;
          justify-content: center;padding:0 1px;align-items: center;text-align:center">æ‚¨å�¯ä»¥åœ¨æ­¤å¤„åˆ›å»ºè‡ªå®šä¹‰çš„html-cssæ¨¡æ�¿</section></main></body>`,
        },
      },
      events: [],
      styles: {
        visibility: { value: '{{true}}' },
      },
    },
  },
  {
    name: 'VerticalDivider',
    displayName: 'å�‚ç›´åˆ†éš”çº¿',
    description: 'ç»„ä»¶ä¹‹é—´çš„å�‚ç›´åˆ†éš”çº¿',
    component: 'VerticalDivider',
    defaultSize: {
      width: 2,
      height: 100,
    },
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    properties: {},
    events: {},
    styles: {
      dividerColor: {
        type: 'color',
        displayName: 'Divider Color',
        validation: {
          schema: { type: 'string' },
        },
      },
      visibility: {
        type: 'toggle',
        displayName: 'Visibility',
        validation: {
          schema: { type: 'boolean' },
        },
      },
    },
    exposedVariables: {
      value: {},
    },
    definition: {
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      properties: {},
      events: [],
      styles: {
        visibility: { value: '{{true}}' },
        dividerColor: { value: '#000000' },
      },
    },
  },
  {
    name: 'CustomComponent',
    displayName: 'è‡ªå®šä¹‰ç»„ä»¶',
    description: 'æ·»åŠ æ‚¨çš„è‡ªå®šä¹‰ç»„ä»¶',
    component: 'CustomComponent',
    properties: {
      data: { type: 'code', displayName: 'æ•°æ�®', validation: { schema: { type: 'object' } } },
      code: { type: 'code', displayName: 'ä»£ç �' },
    },
    defaultSize: {
      width: 20,
      height: 140,
    },
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    events: {},
    styles: {
      visibility: {
        type: 'toggle',
        displayName: 'Visibility',
        validation: { schema: { type: 'boolean' } },
      },
    },
    exposedVariables: {
      data: { value: `{{{ title: 'Hi! There', buttonText: 'Update Title'}}}` },
    },
    definition: {
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      properties: {
        visible: { value: '{{true}}' },
        data: {
          value: `{{{ title: 'çœ‹è¿™é‡Œï¼�ï¼�', buttonText: 'æ›´æ–°æ ‡é¢˜'}}}`,
        },
        code: {
          value: `import React from 'https://cdn.skypack.dev/react';
import ReactDOM from 'https://cdn.skypack.dev/react-dom';
import { Button, Container } from 'https://cdn.skypack.dev/@material-ui/core';
const MyCustomComponent = ({data, updateData, runQuery}) => (
  <Container>
      <h1>{data.title}</h1>
      <Button
        color="primary"
        variant="outlined"
        onClick={() => {updateData({title: 'æˆ‘å�˜äº†ï¼�'})}}
      >
        {data.buttonText}
      </Button>
    </Container>
);
const ConnectedComponent = Tooljet.connectComponent(MyCustomComponent);
ReactDOM.render(<ConnectedComponent />, document.body);`,
          skipResolve: true,
        },
      },
      events: [],
      styles: {
        visibility: { value: '{{true}}' },
      },
    },
  },
  {
    name: 'ButtonGroup',
    displayName: 'æŒ‰é’®ç»„',
    description: 'æŒ‰é’®ç»„',
    component: 'ButtonGroup',
    properties: {
      label: {
        type: 'code',
        displayName: 'label',
        validation: {
          schema: { type: 'string' },
        },
      },
      values: {
        type: 'code',
        displayName: 'values',
        validation: {
          schema: {
            type: 'union',
            schemas: [{ type: 'array', element: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] } }],
          },
        },
      },
      labels: {
        type: 'code',
        displayName: 'Labels',
        validation: {
          schema: {
            type: 'union',
            schemas: [{ type: 'array', element: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] } }],
          },
        },
      },
      defaultSelected: {
        type: 'code',
        displayName: 'Default selected',
        validation: {
          schema: {
            type: 'union',
            schemas: [{ type: 'array', element: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] } }],
          },
        },
      },
      multiSelection: {
        type: 'toggle',
        displayName: 'Enable multiple selection',

        validation: {
          schema: { type: 'boolean' },
        },
      },
    },
    defaultSize: {
      width: 12,
      height: 80,
    },
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    events: {
      onClick: { displayName: 'å�•å‡»æ—¶' },
    },
    styles: {
      backgroundColor: {
        type: 'color',
        displayName: 'Background color',
        validation: {
          schema: { type: 'string' },
        },
      },
      textColor: {
        type: 'color',
        displayName: 'Text color',
        validation: {
          schema: { type: 'string' },
        },
      },
      visibility: {
        type: 'toggle',
        displayName: 'Visibility',
        validation: {
          schema: { type: 'boolean' },
        },
      },
      disabledState: {
        type: 'toggle',
        displayName: 'Disable',
        validation: {
          schema: { type: 'boolean' },
        },
      },
      borderRadius: {
        type: 'number',
        displayName: 'Border radius',
        validation: {
          schema: { type: 'number' },
          defaultValue: false,
        },
      },
      selectedTextColor: {
        type: 'color',
        displayName: 'Selected text colour',
        validation: {
          schema: { type: 'string' },
        },
      },
      selectedBackgroundColor: {
        type: 'color',
        displayName: 'Selected background color',
        validation: {
          schema: { type: 'string' },
        },
      },
    },
    exposedVariables: {
      selected: [1],
    },
    definition: {
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      properties: {
        label: { value: `æŒ‰é’®ç»„` },
        defaultSelected: { value: '{{[1]}}' },
        values: { value: '{{[1,2,3]}}' },
        labels: { value: '{{[]}}' },
        multiSelection: { value: '{{false}}' },
      },
      events: [],
      styles: {
        backgroundColor: { value: '' },
        textColor: { value: '' },
        visibility: { value: '{{true}}' },
        borderRadius: { value: '{{0}}' },
        disabledState: { value: '{{false}}' },
        selectedTextColor: { value: '' },
        selectedBackgroundColor: { value: '' },
      },
    },
  },
  {
    name: 'PDF',
    displayName: 'PDF',
    description: 'åµŒå…¥pdfæ–‡ä»¶',
    component: 'PDF',
    properties: {
      url: { type: 'code', displayName: 'File URL', validation: { schema: { type: 'string' } } },
      scale: { type: 'toggle', displayName: 'Scale page to width', validation: { schema: { type: 'boolean' } } },
      pageControls: { type: 'toggle', displayName: 'Show page controls', validation: { schema: { type: 'boolean' } } },
      showDownloadOption: {
        type: 'toggle',
        displayName: 'æ˜¾ç¤ºä¸‹è½½æŒ‰é’®',
        validation: { schema: { type: 'boolean' } },
      },
    },
    defaultSize: {
      width: 20,
      height: 640,
    },
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    events: {},
    styles: {
      visibility: {
        type: 'toggle',
        displayName: 'Visibility',
        validation: { schema: { type: 'boolean' } },
      },
    },
    exposedVariables: {},
    definition: {
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      properties: {
        url: {
          value:
            'https://upload.wikimedia.org/wikipedia/commons/e/ee/Guideline_No._GD-Ed-2214_Marman_Clamp_Systems_Design_Guidelines.pdf',
        },
        scale: {
          value: '{{true}}',
        },
        pageControls: {
          value: `{{true}}`,
        },
        showDownloadOption: {
          value: `{{true}}`,
        },
      },
      events: [],
      styles: {
        visibility: { value: '{{true}}' },
      },
    },
  },

  {
    name: 'Steps',
    displayName: 'æ­¥éª¤',
    description: 'æ­¥éª¤',
    component: 'Steps',
    properties: {
      steps: {
        type: 'code',
        displayName: 'Steps',
        validation: {
          schema: {
            type: 'array',
            element: { type: 'object', object: { id: { type: 'number' } } },
          },
        },
      },
      currentStep: {
        type: 'code',
        displayName: 'Current step',
        validation: {
          schema: { type: 'number' },
        },
      },
      stepsSelectable: {
        type: 'toggle',
        displayName: 'Steps selectable',
        validation: {
          schema: { type: 'boolean' },
        },
      },
    },
    defaultSize: {
      width: 22,
      height: 38,
    },
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    events: {
      onSelect: { displayName: 'é€‰æ‹©æ—¶' },
    },
    styles: {
      color: {
        type: 'color',
        displayName: 'Color',
        validation: {
          schema: { type: 'string' },
        },
      },
      textColor: {
        type: 'color',
        displayName: 'Text color',
        validation: {
          schema: { type: 'string' },
        },
      },
      theme: {
        type: 'select',
        displayName: 'Theme',
        options: [
          { name: 'æ ‡é¢˜', value: 'titles' },
          { name: 'æ•°å­—', value: 'numbers' },
          { name: 'ç®€æ´�', value: 'plain' },
        ],
        validation: {
          schema: { type: 'string' },
        },
      },
      visibility: {
        type: 'toggle',
        displayName: 'Visibility',
        validation: {
          schema: { type: 'boolean' },
        },
      },
    },
    exposedVariables: {
      currentStepId: '3',
    },
    definition: {
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      properties: {
        steps: {
          value: `{{ [{ name: 'æ­¥éª¤1', tooltip: 'è¿™æ˜¯æ­¥éª¤1', id: 1},{ name: 'æ­¥éª¤2', tooltip: 'è¿™æ˜¯æ­¥éª¤2', id: 2},{ name: 'æ­¥éª¤3', tooltip: 'è¿™æ˜¯æ­¥éª¤3', id: 3},{ name: 'æ­¥éª¤4', tooltip: 'è¿™æ˜¯æ­¥éª¤4', id: 4},{ name: 'æ­¥éª¤5', tooltip: 'è¿™æ˜¯æ­¥éª¤5', id: 5}]}}`,
        },
        currentStep: { value: '{{3}}' },
        stepsSelectable: { value: true },
      },
      events: [],
      styles: {
        visibility: { value: '{{true}}' },
        theme: { value: 'titles' },
        color: { value: '' },
        textColor: { value: '' },
      },
    },
  },
  {
    name: 'KanbanBoard',
    displayName: 'çœ‹æ�¿',
    description: 'çœ‹æ�¿ç»„ä»¶',
    component: 'KanbanBoard',
    defaultSize: {
      width: 40,
      height: 490,
    },
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    properties: {
      columns: { type: 'code', displayName: 'Columns' },
      cardData: { type: 'code', displayName: 'Card Data' },
      enableAddCard: { type: 'toggle', displayName: 'Enable Add Card' },
    },
    events: {
      onCardAdded: { displayName: 'å�¡ç‰‡æ·»åŠ æ—¶' },
      onCardRemoved: { displayName: 'å�¡ç‰‡åˆ é™¤æ—¶' },
      onCardMoved: { displayName: 'å�¡ç‰‡ç§»åŠ¨æ—¶' },
      onCardSelected: { displayName: 'å�¡ç‰‡é€‰æ‹©æ—¶' },
      onCardUpdated: { displayName: 'å�¡ç‰‡æ›´æ–°æ—¶' },
    },
    styles: {
      disabledState: { type: 'toggle', displayName: 'Disable' },
      visibility: { type: 'toggle', displayName: 'Visibility' },
      width: { type: 'number', displayName: 'Width' },
      minWidth: { type: 'number', displayName: 'Min Width' },
      accentColor: { type: 'color', displayName: 'Accent color' },
    },
    exposedVariables: {
      columns: {},
      lastAddedCard: {},
      lastRemovedCard: {},
      lastCardMovement: {},
      lastUpdatedCard: {},
    },
    definition: {
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      properties: {
        columns: {
          value: '{{[{ "id": "1", "title": "å¾…åŠ�" },{ "id": "2", "title": "åŠ�ç�†ä¸­" },{ "id": "3", "title": "å·²å®Œæˆ�" }]}}',
        },
        cardData: {
          value:
            '{{[{ id: "01", title: "å¾…åŠ�1", columnId: "1" },{ id: "02", title: "å¾…åŠ�2", columnId: "1" },{ id: "03", title: "å¾…åŠ�3", columnId: "2" },{ id: "03", title: "å¾…åŠ�4", columnId: "3" }]}}',
        },
        enableAddCard: {
          value: `{{true}}`,
        },
      },
      events: [],
      styles: {
        visibility: { value: '{{true}}' },
        disabledState: { value: '{{false}}' },
        width: { value: '{{400}}' },
        minWidth: { value: '{{200}}' },
        textColor: { value: '' },
      },
    },
  },
  {
    name: 'Kanban',
    displayName: 'çœ‹æ�¿',
    description: 'çœ‹æ�¿ç»„ä»¶',
    component: 'Kanban',
    defaultSize: {
      width: 40,
      height: 490,
    },
    defaultChildren: [
      {
        componentName: 'Text',
        layout: {
          top: 20,
          left: 4,
          height: 30,
        },
        properties: ['text'],
        accessorKey: 'text',
        styles: ['fontWeight', 'textSize', 'textColor'],
        defaultValue: {
          text: '{{cardData.title}}',
          fontWeight: 'bold',
          textSize: 16,
          textColor: '#000',
        },
      },
      {
        componentName: 'Text',
        layout: {
          top: 50,
          left: 4,
          height: 30,
        },
        properties: ['text'],
        accessorKey: 'text',
        styles: ['textSize', 'textColor'],
        defaultValue: {
          text: '{{cardData.description}}',
          textSize: 14,
          textColor: '#000',
        },
      },
    ],
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    properties: {
      columnData: { type: 'code', displayName: 'Column Data' },
      cardData: { type: 'code', displayName: 'Card Data' },
      cardWidth: {
        type: 'code',
        displayName: 'Card Width',
        validation: {
          schema: { type: 'number' },
        },
      },
      cardHeight: {
        type: 'code',
        displayName: 'Card Height',
        validation: {
          schema: { type: 'number' },
        },
      },
      enableAddCard: { type: 'toggle', displayName: 'Enable Add Card' },
      showDeleteButton: { type: 'toggle', displayName: 'Show Delete Button' },
    },
    events: {
      onUpdate: { displayName: 'æ›´æ–°æ—¶' },
      onAddCardClick: { displayName: 'æ·»åŠ å�¡ç‰‡æ—¶' },
      onCardRemoved: { displayName: 'å�¡ç‰‡åˆ é™¤æ—¶' },
      onCardAdded: { displayName: 'å�¡ç‰‡æ·»åŠ æ—¶' },
      onCardMoved: { displayName: 'å�¡ç‰‡ç§»åŠ¨æ—¶' },
      onCardSelected: { displayName: 'é€‰æ‹©å�¡ç‰‡æ—¶' },
    },
    styles: {
      disabledState: { type: 'toggle', displayName: 'Disable' },
      visibility: { type: 'toggle', displayName: 'Visibility' },
      accentColor: { type: 'color', displayName: 'Accent color' },
    },
    actions: [
      {
        handle: 'addCard',
        displayName: 'æ·»åŠ å�¡ç‰‡',
        params: [
          {
            handle: 'cardDetails',
            displayName: 'Card Details',
            defaultValue: `{{{ id: "c11", title: "Title 11", description: "Description 11", columnId: "r3" }}}`,
          },
        ],
      },
      {
        handle: 'deleteCard',
        displayName: 'åˆ é™¤å�¡ç‰‡',
        params: [
          { handle: 'id', displayName: 'Card Id', defaultValue: `{{components.kanban1?.lastSelectedCard?.id}}` },
        ],
      },
      {
        handle: 'moveCard',
        displayName: 'ç§»åŠ¨å�¡ç‰‡',
        params: [
          { handle: 'cardId', displayName: 'Card Id', defaultValue: `{{components.kanban1?.lastSelectedCard?.id}}` },
          { handle: 'columnId', displayName: 'Destination Column Id', defaultValue: '' },
        ],
      },
      {
        handle: 'updateCardData',
        displayName: 'æ›´æ–°å�¡ç‰‡æ•°æ�®',
        params: [
          { handle: 'id', displayName: 'Card Id', defaultValue: `{{components.kanban1?.lastSelectedCard?.id}}` },
          {
            handle: 'value',
            displayName: 'Value',
            defaultValue: `{{{...components.kanban1?.lastSelectedCard, title: 'New Title'}}}`,
          },
        ],
      },
    ],
    exposedVariables: {
      updatedCardData: {},
      lastAddedCard: {},
      lastRemovedCard: {},
      lastCardMovement: {},
      lastSelectedCard: {},
      lastUpdatedCard: {},
      lastCardUpdate: [],
    },
    definition: {
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      properties: {
        columnData: {
          value:
            '{{[{ "id": "r1", "title": "å¾…åŠ�" },{ "id": "r2", "title": "è¿›è¡Œä¸­" },{ "id": "r3", "title": "å·²å®Œæˆ�" }]}}',
        },
        cardData: {
          value:
            '{{[{ id: "c1", title: "æ ‡é¢˜ 1", description: "æ��è¿° 1", columnId: "r1" },{ id: "c2", title: "æ ‡é¢˜ 2", description: "æ��è¿° 2", columnId: "r1" },{ id: "c3", title: "æ ‡é¢˜ 3", description: "æ��è¿° 3",columnId: "r2" },{ id: "c4", title: "æ ‡é¢˜ 4", description: "æ��è¿° 4",columnId: "r3" },{ id: "c5", title: "æ ‡é¢˜ 5", description: "æ��è¿° 5",columnId: "r3" }, { id: "c6", title: "æ ‡é¢˜ 6", description: "æ��è¿° 6", columnId: "r1" },{ id: "c7", title: "æ ‡é¢˜ 7", description: "æ��è¿° 7", columnId: "r1" },{ id: "c8", title: "æ ‡é¢˜ 8", description: "æ��è¿° 8",columnId: "r2" },{ id: "c9", title: "æ ‡é¢˜ 9", description: "æ��è¿° 9",columnId: "r3" },{ id: "c10", title: "æ ‡é¢˜ 10", description: "æ��è¿° 10",columnId: "r3" }]}}',
        },
        cardWidth: {
          value: '{{295}}',
        },
        cardHeight: {
          value: '{{100}}',
        },
        enableAddCard: {
          value: `{{true}}`,
        },
        showDeleteButton: {
          value: `{{true}}`,
        },
      },
      events: [],
      styles: {
        visibility: { value: '{{true}}' },
        disabledState: { value: '{{false}}' },
        accentColor: { value: '#4d72fa' },
      },
    },
  },
  {
    name: 'ColorPicker',
    displayName: 'é¢œè‰²é€‰æ‹©å™¨',
    description: 'é¢œè‰²é€‰æ‹©å™¨è°ƒè‰²æ�¿',
    component: 'ColorPicker',
    properties: {
      defaultColor: { type: 'color', displayName: 'Default Color' },
    },
    defaultSize: {
      width: 9,
      height: 40,
    },
    actions: [
      {
        displayName: 'è®¾ç½®é¢œè‰²',
        handle: 'setColor',
        params: [{ handle: 'color', displayName: 'é¢œè‰²', defaultValue: '#ffffff', type: 'color' }],
      },
    ],
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    events: {
      onChange: { displayName: 'å†…å®¹æ”¹å�˜æ—¶' },
    },
    styles: {
      visibility: { type: 'toggle', displayName: 'Visibility' },
    },
    exposedVariables: {
      selectedColorHex: '#000000',
      selectedColorRGB: 'rgb(0,0,0)',
      selectedColorRGBA: 'rgba(0, 0, 0, 1)',
    },
    definition: {
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      properties: {
        defaultColor: {
          value: '#000000',
        },
      },
      events: [],
      styles: {
        visibility: { value: '{{true}}' },
      },
    },
  },
  {
    name: 'TreeSelect',
    displayName: 'æ ‘å½¢é€‰æ‹©',
    description: 'ä»�æ ‘è§†å›¾ä¸­é€‰æ‹©å€¼',
    defaultSize: {
      width: 12,
      height: 200,
    },
    component: 'TreeSelect',
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    properties: {
      label: { type: 'code', displayName: 'Title' },
      data: { type: 'code', displayName: 'Structure' },
      checkedData: { type: 'code', displayName: 'Checked Values' },
      expandedData: { type: 'code', displayName: 'Expanded Values' },
    },
    events: {
      onChange: { displayName: 'å†…å®¹æ”¹å�˜æ—¶' },
      onCheck: { displayName: 'é€‰ä¸­æ—¶' },
      onUnCheck: { displayName: 'å�–æ¶ˆé€‰ä¸­æ—¶' },
    },
    styles: {
      textColor: { type: 'color', displayName: 'Text Color' },
      checkboxColor: { type: 'color', displayName: 'Checkbox Color' },
      visibility: { type: 'toggle', displayName: 'Visibility' },
      disabledState: { type: 'toggle', displayName: 'Disable' },
    },
    exposedVariables: {
      checked: ['asia', 'china', 'beijing', 'shanghai', 'japan', 'india', 'delhi', 'mumbai', 'bengaluru'],
      expanded: ['asia'],
      checkedPathArray: [
        ['asia'],
        ['asia', 'china'],
        ['asia', 'china', 'beijing'],
        ['asia', 'china', 'shanghai'],
        ['asia', 'japan'],
        ['asia', 'india'],
        ['asia', 'india', 'delhi'],
        ['asia', 'india', 'mumbai'],
        ['asia', 'india', 'bengaluru'],
      ],
      checkedPathStrings: [
        'asia',
        'asia-china',
        'asia-china-beijing',
        'asia-china-shanghai',
        'asia-japan',
        'asia-india',
        'asia-india-delhi',
        'asia-india-mumbai',
        'asia-india-bengaluru',
      ],
    },
    definition: {
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      properties: {
        label: { value: 'å›½å®¶åˆ—è¡¨' },
        data: {
          value:
            '{{[{"label":"äºšæ´²","value":"asia","children":[{"label":"ä¸­å›½","value":"china","children":[{"label":"åŒ—äº¬","value":"beijing"},{"label":"ä¸Šæµ·","value":"shanghai"}]},{"label":"æ—¥æœ¬","value":"japan"},{"label":"å�°åº¦","value":"india","children":[{"label":"å¾·é‡Œ","value":"delhi"},{"label":"å­Ÿä¹°","value":"mumbai"},{"label":"ç�­åŠ ç½—å°”","value":"bengaluru"}]}]},{"label":"æ¬§æ´²","value":"europe","children":[{"label":"æ³•å›½","value":"france"},{"label":"è¥¿ç�­ç‰™","value":"spain"},{"label":"è‹±æ ¼å…°","value":"england"}]},{"label":"é��æ´²","value":"africa"}]}}',
        },
        checkedData: { value: '{{["äºšæ´²"]}}' },
        expandedData: { value: '{{["äºšæ´²"]}}' },
      },
      events: [],
      styles: {
        textColor: { value: '' },
        checkboxColor: { value: '' },
        visibility: { value: '{{true}}' },
        disabledState: { value: '{{false}}' },
      },
    },
  },
  {
    name: 'Link',
    displayName: 'é“¾æ�¥',
    description: 'å�‘æ–‡æœ¬æ·»åŠ é“¾æ�¥',
    defaultSize: {
      width: 6,
      height: 30,
    },
    component: 'Link',
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    properties: {
      linkTarget: {
        type: 'code',
        displayName: 'é“¾æ�¥ç›®æ ‡',
        validation: {
          schema: { type: 'string' },
        },
      },
      linkText: {
        type: 'code',
        displayName: 'Link Text',
        validation: {
          schema: { type: 'string' },
        },
      },
      targetType: {
        type: 'select',
        displayName: 'Target Type',
        options: [
          { name: 'æ–°å»ºé¡µé�¢', value: 'new' },
          { name: 'å½“å‰�é¡µé�¢', value: 'same' },
        ],
        validation: {
          schema: { type: 'string' },
        },
      },
    },
    events: {
      onClick: { displayName: 'å�•å‡»æ—¶' },
      onHover: { displayName: 'æ‚¬å�œæ—¶' },
    },
    styles: {
      textColor: {
        type: 'color',
        displayName: 'Text Color',
        validation: {
          schema: { type: 'string' },
        },
      },
      textSize: {
        type: 'number',
        displayName: 'Text Size',
        validation: {
          schema: { type: 'number' },
        },
      },
      underline: {
        type: 'select',
        displayName: 'Underline',
        options: [
          { name: 'ä»�ä¸�', value: 'no-underline' },
          { name: 'æ‚¬å�œæ—¶', value: 'on-hover' },
          { name: 'å§‹ç»ˆ', value: 'underline' },
        ],
        validation: {
          schema: { type: 'string' },
        },
      },
      visibility: {
        type: 'toggle',
        displayName: 'Visibility',
        validation: {
          schema: { type: 'boolean' },
        },
      },
    },
    exposedVariables: {},
    actions: [
      {
        handle: 'click',
        displayName: 'ç‚¹å‡»',
      },
    ],
    definition: {
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      properties: {
        linkTarget: { value: 'https://www.baidu.com/' },
        linkText: { value: 'ç‚¹æˆ‘' },
        targetType: { value: 'new' },
      },
      events: [],
      styles: {
        textColor: { value: '#375FCF' },
        textSize: { value: 14 },
        underline: { value: 'on-hover' },
        visibility: { value: '{{true}}' },
      },
    },
  },
  {
    name: 'Icon',
    displayName: 'å›¾æ ‡',
    description: 'å›¾æ ‡ç»„ä»¶',
    defaultSize: {
      width: 5,
      height: 48,
    },
    component: 'Icon',
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    properties: {
      icon: {
        type: 'iconPicker',
        displayName: 'Icon',
        validation: {
          schema: { type: 'string' },
        },
      },
    },
    events: {
      onClick: { displayName: 'å�•å‡»æ—¶' },
      onHover: { displayName: 'æ‚¬å�œæ—¶' },
    },
    styles: {
      iconColor: {
        type: 'color',
        displayName: 'Icon Color',
        validation: {
          schema: { type: 'string' },
        },
      },
      visibility: {
        type: 'toggle',
        displayName: 'Visibility',
        validation: {
          schema: { type: 'boolean' },
        },
      },
    },
    exposedVariables: {},
    actions: [
      {
        handle: 'click',
        displayName: 'ç‚¹å‡»',
      },
      {
        displayName: 'Set Visibility',
        handle: 'setVisibility',
        params: [{ handle: 'value', displayName: 'Value', defaultValue: '{{true}}', type: 'toggle' }],
      },
    ],
    definition: {
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      properties: {
        icon: { value: 'IconHome2' },
      },
      events: [],
      styles: {
        iconColor: { value: '#000' },
        visibility: { value: '{{true}}' },
      },
    },
  },
  {
    name: 'Form',
    displayName: 'è¡¨å�•',
    description: 'æ��äº¤è¡¨å�•',
    defaultSize: {
      width: 13,
      height: 330,
    },
    defaultChildren: [
      {
        componentName: 'Text',
        layout: {
          top: 40,
          left: 10,
          height: 30,
          width: 17,
        },
        properties: ['text'],
        styles: ['fontWeight', 'textSize', 'textColor'],
        defaultValue: {
          text: 'ç”¨æˆ·è¯¦ç»†ä¿¡æ�¯',
          fontWeight: 'bold',
          textSize: 20,
          textColor: '#000',
        },
      },
      {
        componentName: 'Text',
        layout: {
          top: 90,
          left: 10,
          height: 30,
        },
        properties: ['text'],
        defaultValue: {
          text: 'å§“å��',
        },
      },
      {
        componentName: 'Text',
        layout: {
          top: 160,
          left: 10,
          height: 30,
        },
        properties: ['text'],
        defaultValue: {
          text: 'å¹´é¾„',
        },
      },
      {
        componentName: 'TextInput',
        layout: {
          top: 120,
          left: 10,
          height: 30,
          width: 25,
        },
        properties: ['placeholder'],
        defaultValue: {
          placeholder: 'è¾“å…¥æ‚¨çš„å§“å��',
        },
      },
      {
        componentName: 'NumberInput',
        layout: {
          top: 190,
          left: 10,
          height: 30,
          width: 25,
        },
        properties: ['value'],
        styles: ['borderColor'],
        defaultValue: {
          value: 24,
          borderColor: '#dadcde',
        },
      },
      {
        componentName: 'Button',
        layout: {
          top: 240,
          left: 10,
          height: 30,
          width: 10,
        },
        properties: ['text'],
        defaultValue: {
          text: 'æ��äº¤',
        },
      },
    ],
    component: 'Form',
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    properties: {
      buttonToSubmit: {
        type: 'select',
        displayName: 'æ��äº¤è¡¨å�•çš„æŒ‰é’®',
        options: [{ name: 'æ— ', value: 'none' }],
        validation: {
          schema: { type: 'string' },
        },
        conditionallyRender: {
          key: 'advanced',
          value: false,
        },
      },
      loadingState: {
        type: 'toggle',
        displayName: 'Loading state',
        validation: {
          schema: { type: 'boolean' },
        },
      },
      advanced: {
        type: 'toggle',
        displayName: ' è‡ªå®šä¹‰æ�¶æ�„',
      },
      JSONSchema: {
        type: 'code',
        displayName: 'JSONæ�¶æ�„',
        conditionallyRender: {
          key: 'advanced',
          value: true,
        },
      },
    },
    events: {
      onSubmit: { displayName: 'æ��äº¤æ—¶' },
      onInvalid: { displayName: 'æ— æ•ˆæ—¶' },
    },
    styles: {
      backgroundColor: {
        type: 'color',
        displayName: 'Background color',
        validation: {
          schema: { type: 'string' },
        },
      },
      borderRadius: {
        type: 'code',
        displayName: 'Border Radius',
        validation: {
          schema: {
            type: 'union',
            schemas: [{ type: 'string' }, { type: 'number' }],
          },
        },
      },
      borderColor: {
        type: 'color',
        displayName: 'è¾¹æ¡†é¢œè‰²',
        validation: {
          schema: { type: 'string' },
        },
      },
      visibility: {
        type: 'toggle',
        displayName: 'Visibility',
        validation: {
          schema: { type: 'boolean' },
        },
      },
      disabledState: {
        type: 'toggle',
        displayName: 'Disable',
        validation: {
          schema: { type: 'boolean' },
        },
      },
    },
    exposedVariables: {
      data: {},
      isValid: true,
    },
    actions: [
      {
        handle: 'submitForm',
        displayName: 'æ��äº¤è¡¨å�•',
      },
      {
        handle: 'resetForm',
        displayName: 'é‡�ç½®è¡¨å�•',
      },
    ],
    definition: {
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      properties: {
        loadingState: { value: '{{false}}' },
        advanced: { value: '{{false}}' },
        JSONSchema: {
          value:
            `{{ {
      title: 'User registration form',
      properties: {
        firstname: {
          type: 'textinput',
          value: 'Maria',
          label: 'First name',
          validation: {
            maxLength: 6
          },
          styles: {
            backgroundColor: '#f6f5ff',
            textColor: 'black'
          },
        },
        lastname: {
          type: 'textinput',
          value: 'Doe',
          label: 'Last name',
          styles: {
            backgroundColor: '#f6f5ff',
            textColor: 'black'
          },
        },
        age: {
          type: 'number'
        },
      },
      submitButton: {
        value: 'Submit',
        styles: {
          backgroundColor: '#3a433b',
          borderColor: '#595959'
        }
      }
    }}}`,
        },
      },
      events: [],
      styles: {
        backgroundColor: { value: '#fff' },
        borderRadius: { value: '0' },
        borderColor: { value: '#fff' },
        visibility: { value: '{{true}}' },
        disabledState: { value: '{{false}}' },
      },
    },
  },
  {
    name: 'BoundedBox',
    displayName: 'å›¾ç‰‡æ ‡æ³¨ç»„ä»¶',
    description: 'å›¾åƒ�æ ‡æ³¨ç»„ä»¶',
    component: 'BoundedBox',
    defaultSize: {
      width: 30,
      height: 420,
    },
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    properties: {
      imageUrl: {
        type: 'code',
        displayName: 'å›¾ç‰‡åœ°å�€',
        validation: {
          schema: { type: 'string' },
        },
      },

      defaultValue: {
        type: 'code',
        displayName: 'Default value',
        validation: {
          schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'array', element: { type: 'object' } }] },
        },
      },
      selector: {
        type: 'select',
        displayName: 'æ ‡æ³¨æ–¹å¼�',
        options: [
          { name: 'çŸ©å½¢', value: 'RECTANGLE' },
          { name: 'ç‚¹ä½�', value: 'POINT' },
        ],
        validation: {
          schema: { type: 'string' },
        },
      },
      labels: {
        type: 'code',
        displayName: 'æ ‡ç­¾åˆ—è¡¨',
        validation: {
          schema: { type: 'array' },
          element: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
        },
      },
    },
    events: {
      onChange: { displayName: 'å†…å®¹æ”¹å�˜æ—¶' },
    },
    styles: {
      visibility: {
        type: 'toggle',
        displayName: 'Visibility',
        validation: {
          schema: { type: 'boolean' },
          defaultValue: false,
        },
      },
      disabledState: {
        type: 'toggle',
        displayName: 'Disable',
        validation: {
          schema: { type: 'boolean' },
          defaultValue: false,
        },
      },
    },
    exposedVariables: {
      annotations: [
        {
          type: 'RECTANGLE',
          x: 41,
          y: 62,
          width: 40,
          height: 24,
          text: 'Car',
          id: 'ce103db2-b2a6-46f5-a4f0-5f4eaa6f3663',
        },
        {
          type: 'RECTANGLE',
          x: 41,
          y: 12,
          width: 40,
          height: 24,
          text: 'Tree',
          id: 'b1a7315e-2b15-4bc8-a1c6-a042dab44f27',
        },
      ],
    },
    actions: [],
    definition: {
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      properties: {
        defaultValue: {
          value:
            "{{[\t{type: 'RECTANGLE',width: 40,height:24, x:41,y:62,text:'Car'},{type: 'RECTANGLE',width: 40,height:24, x:41,y:12,text:'Tree'}\t]}}",
        },
        imageUrl: {
          value: `https://burst.shopifycdn.com/photos/three-cars-are-parked-on-stone-paved-street.jpg?width=746&format=pjpg&exif=1&iptc=1`,
        },
        selector: { value: `RECTANGLE` },
        labels: { value: `{{['æ ‘', 'è½¦', 'è·¯ç�¯']}}` },
      },
      events: [],
      styles: {
        visibility: { value: '{{true}}' },

        disabledState: { value: '{{false}}' },
      },
    },
  },
  {
    name: 'QrCode',
    displayName: 'äºŒç»´ç �ç”Ÿæˆ�å™¨',
    description: 'è‡ªå®šä¹‰ç”Ÿæˆ�äºŒç»´ç �çš„ç»„ä»¶',
    component: 'QrCode',
    defaultSize: {
      width: 6,
      height: 180,
    },
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    properties: {
      qrType: {
        type: 'select',
        displayName: 'äºŒç»´ç �æ¸²æŸ“ç±»å�‹',
        options: [
          { name: 'SVGæ¨¡å¼�', value: 'svg' },
          { name: 'Canvasæ¨¡å¼�', value: 'canvas' },
        ],
        validation: {
          schema: { type: 'string' },
        },
      },
      level: {
        type: 'select',
        displayName: 'çº é”™ç­‰çº§',
        options: [
          { name: 'ä½�', value: 'L' },
          { name: 'ä¸­', value: 'M' },
          { name: 'é«˜', value: 'Q' },
          { name: 'æ��é«˜', value: 'H' },
        ],
        validation: {
          schema: { type: 'string' },
        },
      },
      value: {
        type: 'code',
        displayName: 'Default value',
        validation: {
          schema: { type: 'string' },
        },
      },
      img: {
        type: 'code',
        displayName: 'å›¾ç‰‡:URL/base64',
        validation: {
          schema: { type: 'string' },
        },
      },
      status: {
        type: 'select',
        displayName: 'äºŒç»´ç �çŠ¶æ€�',
        options: [
          { name: 'æ­£å¸¸', value: 'active' },
          { name: 'è½½å…¥ä¸­', value: 'loading' },
          { name: 'è¿‡æœŸ', value: 'expired' },
        ],
        validation: {
          schema: { type: 'string' },
        },
      },
      qrColor: {
        type: 'color',
        displayName: 'äºŒç»´ç �å¡«å……é¢œè‰²',
        validation: {
          schema: { type: 'string' },
        },
      },
      qrBackgroundColor: {
        type: 'color',
        displayName: 'äºŒç»´ç �èƒŒæ™¯è‰²å¡«å……é¢œè‰²',
        validation: {
          schema: { type: 'string' },
        },
      },
      popQR: {
        type: 'toggle',
        displayName: 'æ°”æ³¡å�¡ç‰‡æ˜¾ç¤ºäºŒç»´ç �',
        validation: {
          schema: { type: 'boolean' },
        },
      },
    },
    events: {
      onClick: { displayName: 'ç‚¹å‡»åˆ·æ–°æ—¶' },
    },
    styles: {
      visibility: {
        type: 'toggle',
        displayName: 'Visibility',
        validation: {
          schema: { type: 'boolean' },
        },
      },
    },
    exposedVariables: {
      value: 'æ¬¢è¿�ä½¿ç”¨äºŒç»´ç �ç”Ÿæˆ�å™¨',
      status: 'active',
    },
    actions: [
      {
        handle: 'setText',
        displayName: 'è®¾ç½®æ–‡æœ¬',
        params: [{ handle: 'text', displayName: 'æ–‡æœ¬', defaultValue: 'New Text' }],
      },
      {
        handle: 'setStatus',
        displayName: 'è®¾ç½®äºŒç»´ç �çŠ¶æ€�',
        params: [{ handle: 'status', displayName: 'çŠ¶æ€�', defaultValue: 'active|loading|expired' }],
      },
      {
        handle: 'download',
        displayName: 'ä¸‹è½½äºŒç»´ç �',
        params: [{ handle: 'filename', displayName: 'æ–‡ä»¶å��', defaultValue: 'qrcode' }],
      },
    ],
    definition: {
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      properties: {
        value: { value: 'https://tooljet.mousheng.top/', },
        qrColor: { value: '#000000FF' },
        qrBackgroundColor: { value: '#FFFFFFFF' },
        qrType: { value: 'svg' },
        status: { value: 'active' },
        level: { value: 'M' },
        popQR: { value: false },
        img: { value: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE1LjE5OTYgMjUuNDAwMUMxNS4xOTk2IDI0LjIwMDEgMTUuMTk5NiAyMi44MDAxIDE1LjE5OTYgMjEuNjAwMUMxNS4xOTk2IDIxLjQwMDEgMTUuMTk5NiAyMS4yMDAxIDE0Ljk5OTYgMjEuMDAwMUMxMy41OTk2IDE5LjYwMDEgMTIuMzk5NiAxOC40MDAxIDEwLjk5OTYgMTcuMDAwMUMxMC43OTk2IDE2LjgwMDEgMTAuNzk5NiAxNi44MDAxIDEwLjU5OTYgMTYuODAwMUM5LjM5OTYxIDE2LjgwMDEgNy45OTk2MSAxNi44MDAxIDYuNzk5NjEgMTYuODAwMUg2LjU5OTYxQzYuOTk5NjEgMTUuODAwMSA3LjM5OTYxIDE0LjgwMDEgOC4xOTk2MSAxNC4wMDAxQzguNzk5NjEgMTMuMjAwMSA5LjM5OTYxIDEyLjgwMDEgMTAuMzk5NiAxMi42MDAxQzEwLjc5OTYgMTIuNjAwMSAxMC45OTk2IDEyLjYwMDEgMTEuMzk5NiAxMi42MDAxQzExLjk5OTYgMTIuNjAwMSAxMi41OTk2IDEyLjYwMDEgMTIuOTk5NiAxMi42MDAxQzEzLjE5OTYgMTIuNjAwMSAxMy4xOTk2IDEyLjYwMDEgMTMuMzk5NiAxMi40MDAxQzE0Ljk5OTYgMTAuNDAwMSAxNi45OTk2IDguODAwMSAxOS41OTk2IDcuNjAwMUMyMC45OTk2IDcuMDAwMSAyMi4zOTk2IDYuNjAwMSAyMy45OTk2IDYuNjAwMUMyNC41OTk2IDYuNjAwMSAyNS4xOTk2IDYuNjAwMSAyNS43OTk2IDYuNjAwMUMyNS43OTk2IDcuNDAwMSAyNS43OTk2IDguMjAwMSAyNS43OTk2IDkuMjAwMUMyNS43OTk2IDEwLjYwMDEgMjUuMTk5NiAxMi4wMDAxIDI0LjU5OTYgMTMuMjAwMUMyMy41OTk2IDE1LjQwMDEgMjEuOTk5NiAxNy4yMDAxIDIwLjE5OTYgMTguNjAwMUMxOS45OTk2IDE4LjYwMDEgMTkuOTk5NiAxOC44MDAxIDE5Ljk5OTYgMTkuMDAwMUMxOS45OTk2IDE5LjYwMDEgMTkuOTk5NiAyMC4yMDAxIDE5Ljk5OTYgMjEuMDAwMUMxOS45OTk2IDIyLjAwMDEgMTkuNTk5NiAyMy4wMDAxIDE4Ljc5OTYgMjMuNjAwMUMxOC4zOTk2IDI0LjAwMDEgMTcuOTk5NiAyNC4yMDAxIDE3LjM5OTYgMjQuNDAwMUMxNi4zOTk2IDI0LjgwMDEgMTUuNzk5NiAyNS4wMDAxIDE1LjE5OTYgMjUuNDAwMVpNMjAuOTk5NiAxMi40MDAxQzIwLjk5OTYgMTEuNjAwMSAyMC4zOTk2IDExLjAwMDEgMTkuNTk5NiAxMS4wMDAxQzE4Ljc5OTYgMTEuMDAwMSAxNy45OTk2IDExLjYwMDEgMTcuOTk5NiAxMi40MDAxQzE3Ljk5OTYgMTMuMjAwMSAxOC43OTk2IDE0LjAwMDEgMTkuNTk5NiAxNC4wMDAxQzIwLjM5OTYgMTQuMDAwMSAyMC45OTk2IDEzLjIwMDEgMjAuOTk5NiAxMi40MDAxWiIgZmlsbD0iIzNFNjNERCIvPgo8cGF0aCBkPSJNMTIuMDAwNCAyMi40QzEwLjgwMDQgMjMuOCA5LjIwMDM5IDI0LjQgNy40MDAzOSAyNC44QzcuNjAwMzkgMjIuOCA4LjAwMDM5IDIxLjIgOS42MDAzOSAyMEMxMC40MDA0IDIwLjggMTEuMjAwNCAyMS42IDEyLjAwMDQgMjIuNFoiIGZpbGw9IiMzRTYzREQiLz4KPC9zdmc+Cg==" }
      },
      events: [],
      styles: {
        visibility: { value: '{{true}}' },
      },
    },
  },
  {
    name: 'Echarts',
    displayName: 'Echarts',
    description: 'æ˜¾ç¤ºEcharts',
    component: 'Echarts',
    defaultSize: {
      width: 20,
      height: 400,
    },
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    properties: {
      title: {
        type: 'code',
        displayName: 'Title',
        validation: {
          schema: {
            type: 'string',
          },
        },
      },
      subTitle: {
        type: 'code',
        displayName: 'å‰¯æ ‡é¢˜',
        validation: {
          schema: {
            type: 'string',
          },
        },
      },
      data: {
        type: 'json',
        displayName: 'Data',
        validation: {
          schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'array' }] },
        },
      },
      loadingState: {
        type: 'toggle',
        displayName: 'Loading State',
        validation: {
          schema: { type: 'boolean' },
        },
      },
      markerColor: {
        type: 'color',
        displayName: 'Marker color',
        validation: {
          schema: {
            type: 'string',
          },
        },
      },
      showXAxes: {
        type: 'toggle',
        displayName: 'æ˜¾ç¤ºXè½´',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      showYAxes: {
        type: 'toggle',
        displayName: 'æ˜¾ç¤ºYè½´',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      showGridLines: {
        type: 'toggle',
        displayName: 'Show grid lines',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      type: {
        type: 'select',
        displayName: 'Chart type',
        options: [
          { name: 'æŠ˜çº¿å›¾', value: 'line' },
          { name: 'æŸ±çŠ¶å›¾', value: 'bar' },
          { name: 'é¥¼çŠ¶å›¾', value: 'pie' },
        ],
        validation: {
          schema: {
            type: 'union',
            schemas: [{ type: 'string' }, { type: 'boolean' }, { type: 'number' }],
          },
        },
      },
      jsonDescription: {
        type: 'code',
        displayName: 'Json Description',
        validation: {
          schemas: [{ type: 'string' }, { type: 'object' }],
        },
      },
      plotFromJson: {
        type: 'toggle',
        displayName: 'Use Plotly JSON schema',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
    },
    events: { onClick: { displayName: 'ç‚¹å‡»æ—¶' }, },
    actions: [
    ],
    styles: {
      padding: {
        type: 'code',
        displayName: 'Padding',
        validation: {
          schema: {
            type: 'union',
            schemas: [{ type: 'number' }, { type: 'string' }],
          },
        },
      },
      visibility: {
        type: 'toggle',
        displayName: 'Visibility',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      disabledState: {
        type: 'toggle',
        displayName: 'Disable',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
    },
    exposedVariables: {
      clickItem: {},
    },
    definition: {
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      properties: {
        title: { value: 'å�¯ä¿®æ”¹æ ‡é¢˜' },
        subTitle: { value: 'å‰¯æ ‡é¢˜' },
        markerColor: { value: '#CDE1F8' },
        showXAxes: { value: '{{true}}' },
        showYAxes: { value: '{{true}}' },
        showGridLines: { value: '{{true}}' },
        plotFromJson: { value: '{{false}}' },
        loadingState: { value: `{{false}}` },
        jsonDescription: {
          value: `{
            title: {
              text: 'å�—ä¸�æ ¼å°”å›¾'
            },
            tooltip: {
              trigger: 'item'
            },
            legend: {
              top: 'bottom'
            },
            backgroundColor:'white',
            toolbox: {
              show: true,
              feature: {
                mark: { show: true },
                dataView: { show: true, readOnly: false },
                restore: { show: true },
                saveAsImage: { show: true }
              }
            },
            series: [
              {
                name: 'å�—ä¸�æ ¼å°”å›¾',
                type: 'pie',
                radius: [50, 150],
                center: ['50%', '50%'],
                roseType: 'area',
                itemStyle: {
                  borderRadius: 8
                },
                data: [
                  { value: 50, name: 'èŠ±ç“£ 1' },
                  { value: 43, name: 'èŠ±ç“£ 2' },
                  { value: 35, name: 'èŠ±ç“£ 3' },
                  { value: 27, name: 'èŠ±ç“£ 4' },
                  { value: 21, name: 'èŠ±ç“£ 5' },
          
                ]
              }
            ]
          }`,
        },
        type: { value: `line` },
        data: {
          value: `[
  { "x": "ä¸€æœˆ", "y": 100},
  { "x": "äºŒæœˆ", "y": 80},
  { "x": "ä¸‰æœˆ", "y": 40},
  { "x": "å››æœˆ", "y": 60},
  { "x": "äº”æœˆ", "y": 30},
  { "x": "å…­æœˆ", "y": 70}
]`,
        },
      },
      events: [],
      styles: {
        padding: { value: 'auto' },
        visibility: { value: '{{true}}' },
        disabledState: { value: '{{false}}' },
      },
    },
  },
  {
    name: 'VideoPlayer',
    displayName: 'è§†é¢‘æ’­æ”¾å™¨',
    description: 'ç”¨äº�æ’­æ”¾è§†é¢‘çš„æ’­æ”¾å™¨',
    component: 'VideoPlayer',
    defaultSize: {
      width: 20,
      height: 300,
    },
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    properties: {
      url: {
        type: 'code',
        displayName: 'è§†é¢‘åœ°å�€',
        validation: {
          schema: { type: 'string' },
        },
      },
      poster: {
        type: 'code',
        displayName: 'è§†é¢‘æµ·æŠ¥',
        validation: {
          schema: { type: 'string' },
        },
      },
      autoPlay: {
        type: 'toggle',
        displayName: 'è‡ªåŠ¨æ’­æ”¾',
        'tip': "è®¾ç½®è‡ªåŠ¨æ’­æ”¾å��ï¼Œä¼šè¦†ç›–é�™éŸ³è®¾ç½®ï¼Œå¼ºåˆ¶é�™éŸ³æ’­æ”¾ã€‚åˆ«é—®ä¸ºå•¥ï¼Œå› ä¸ºè¿™ä¸ªé—®é¢˜æˆ‘ä¹Ÿè°ƒè¯•äº†ä¸€å¤©æ‰�è§£å†³(à²¥ï¹�à²¥)",
        validation: {
          schema: { type: 'boolean' },
        },
      },
      muted: {
        type: 'toggle',
        displayName: 'é»˜è®¤é�™éŸ³',
        validation: {
          schema: { type: 'boolean' },
        },
      },
      loop: {
        type: 'toggle',
        displayName: 'å¾ªç�¯æ’­æ”¾',
        tip: 'è®¾ç½®å¾ªç�¯æ’­æ”¾å��ï¼Œå°†æ— æ³•æ¿€å�‘è§†é¢‘æ’­æ”¾ç»“æ�Ÿäº‹ä»¶',
        validation: {
          schema: { type: 'boolean' },
        },
      },
      autoHide: {
        type: 'toggle',
        displayName: 'æ�§åˆ¶æ�¡è‡ªåŠ¨éš�è—�',
        validation: {
          schema: { type: 'boolean' },
        },
      },
    },
    events: {
      onStart: { displayName: 'æ’­æ”¾æ—¶' },
      onPause: { displayName: 'æš‚å�œæ—¶' },
      onEnded: { displayName: 'ç»“æ�Ÿæ—¶' },
    },
    styles: {
      visibility: {
        type: 'toggle',
        displayName: 'Visibility',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
    },
    exposedVariables: {},
    actions: [
      {
        handle: 'setURL',
        displayName: 'è®¾ç½®è§†é¢‘åœ°å�€',
        params: [{ handle: 'setURL', displayName: 'è®¾ç½®è§†é¢‘åœ°å�€', defaultValue: `` }],
      },
      {
        handle: 'setPlayerState',
        displayName: 'è®¾ç½®æ’­æ”¾çŠ¶æ€�',
        params: [{ handle: 'setPlayerState', displayName: 'è®¾ç½®æ’­æ”¾çŠ¶æ€�', defaultValue: `{{true}}`, type: 'toggle' }],
      },
      {
        handle: 'toggleFullscreen',
        displayName: 'åˆ‡æ�¢å…¨å±�',
      },
    ],
    definition: {
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      properties: {
        url: { value: `https://assets.appsmith.com/widgets/bird.mp4` },
        poster: { value: `https://video-react.js.org/assets/poster.png` },
        loadingState: { value: `{{false}}` },
        autoPlay: { value: `{{false}}` },
        autoHide: { value: `{{true}}` },
        loop: { value: `{{false}}` },
        muted: { value: `{{false}}` },
      },
      events: [],
      styles: {
        visibility: { value: `{{true}}` },
      },
      general: {
        tooltip: {
          value: `å¿«æ�·é”®ï¼š
æ’­æ”¾/æš‚å�œ k/ç©ºæ ¼é”®
è¿”å›�5ç§’   å·¦ç®­å¤´
è¿”å›�10ç§’  j
å‰�è¿›5ç§’   å�³ç®­å¤´
å‰�è¿›10ç§’  l
é‡�å�¯è§†é¢‘	home
è·³åˆ°æœ€å��	end
å…¨å±�æ¨¡å¼�	f
é€€å‡ºå…¨å±�  esc
éŸ³é‡�+5%	  å�‘ä¸Šç®­å¤´
éŸ³é‡�-5%	  å�‘ä¸‹ç®­å¤´
åŠ é€Ÿæ’­æ”¾	shift +>
é™�ä½�é€Ÿåº¦	shift +<`
        }
      }
    },
  },
  {
    name: 'AudioPlayer',
    displayName: 'éŸ³é¢‘æ’­æ”¾å™¨',
    description: 'ç”¨äº�æ’­æ”¾éŸ³é¢‘çš„æ’­æ”¾å™¨',
    component: 'AudioPlayer',
    defaultSize: {
      width: 10,
      height: 35,
    },
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    properties: {
      url: {
        type: 'code',
        displayName: 'éŸ³é¢‘åœ°å�€',
        validation: {
          schema: { type: 'string' },
        },
      },
      autoPlay: {
        type: 'toggle',
        displayName: 'è‡ªåŠ¨æ’­æ”¾',
        validation: {
          schema: { type: 'boolean' },
        },
      },
      muted: {
        type: 'toggle',
        displayName: 'é»˜è®¤é�™éŸ³',
        validation: {
          schema: { type: 'boolean' },
        },
      },
      loop: {
        type: 'toggle',
        displayName: 'å¾ªç�¯æ’­æ”¾',
        tip: 'è®¾ç½®å¾ªç�¯æ’­æ”¾å��ï¼Œå°†æ— æ³•æ¿€å�‘è§†éŸ³é¢‘æ”¾ç»“æ�Ÿäº‹ä»¶',
        validation: {
          schema: { type: 'boolean' },
        },
      },
    },
    events: {
      onStart: { displayName: 'æ’­æ”¾æ—¶' },
      onPause: { displayName: 'æš‚å�œæ—¶' },
      onEnded: { displayName: 'ç»“æ�Ÿæ—¶' },
    },
    styles: {
      visibility: {
        type: 'toggle',
        displayName: 'Visibility',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
    },
    exposedVariables: {
      playerStatus: ''
    },
    actions: [
      {
        handle: 'setURL',
        displayName: 'è®¾ç½®éŸ³é¢‘åœ°å�€',
        params: [{ handle: 'setURL', displayName: 'è®¾ç½®éŸ³é¢‘åœ°å�€', defaultValue: `` }],
      },
      {
        handle: 'setPlayerState',
        displayName: 'è®¾ç½®æ’­æ”¾çŠ¶æ€�',
        params: [{ handle: 'setPlayerState', displayName: 'è®¾ç½®æ’­æ”¾çŠ¶æ€�', defaultValue: `{{true}}`, type: 'toggle' }],
      },
    ],
    definition: {
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      properties: {
        url: { value: `https://assets.appsmith.com/widgets/birds_chirping.mp3` },
        loadingState: { value: `{{false}}` },
        autoPlay: { value: `{{false}}` },
        autoHide: { value: `{{true}}` },
        loop: { value: `{{false}}` },
        muted: { value: `{{false}}` },
      },
      events: [],
      styles: {
        visibility: { value: `{{true}}` },
      },
      general: {
        tooltip: {
          value: ``
        }
      }
    },
  },
  {
    name: 'Signature',
    displayName: 'ç­¾å­—æ�¿',
    description: 'ç­¾å­—æ�¿ç»„ä»¶',
    component: 'Signature',
    defaultSize: {
      width: 15,
      height: 300,
    },
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    properties: {
      tipText: {
        type: 'code',
        displayName: 'æ��ç¤ºæ–‡å­—',
        validation: {
          schema: {
            type: 'string',
          },
        },
      },
      showUndo: {
        type: 'toggle',
        displayName: 'æ˜¾ç¤ºæ’¤é”€å›¾æ ‡',
        validation: {
          schema: { type: 'boolean' },
        },
      },
      showClean: {
        type: 'toggle',
        displayName: 'æ˜¾ç¤ºæ¸…é™¤å›¾æ ‡',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      penColor: {
        type: 'color',
        displayName: 'é“…ç¬”é¢œè‰²',
        validation: {
          schema: {
            type: 'string',
          },
        },
      },
    },
    actions: [],
    events: {
      onChange: { displayName: 'å†…å®¹æ”¹å�˜æ—¶' },
    },
    styles: {
      visibility: {
        type: 'toggle',
        displayName: 'Visibility',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      disabledState: {
        type: 'toggle',
        displayName: 'Disable',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
    },
    definition: {
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      properties: {
        tipText: { value: 'æ­¤å¤„ç­¾å��' },
        showUndo: { value: '{{true}}' },
        showClean: { value: '{{true}}' },
        penColor: { value: '#000000' },
      },
      events: [],
      styles: {
        visibility: { value: '{{true}}' },
        disabledState: { value: '{{false}}' },
      },
    },
  },
  {
    // ç»„ä»¶å��ç§°
    name: 'Progress',
    // ç»„ä»¶æ˜¾ç¤ºå��ç§°
    displayName: 'è¿›åº¦æ�¡',
    // ç»„ä»¶æ��è¿°
    description: 'è¿›åº¦æ�¡ç»„ä»¶',
    // è°ƒç”¨çš„ç»„ä»¶å��
    component: 'Progress',
    // é»˜è®¤ç»„ä»¶å¤§å°�
    defaultSize: {
      width: 15,
      height: 20,
    },
    // é»˜è®¤å­�ç»„ä»¶
    defaultChildren: [
    ],
    // å…¶ä»–é€‰é¡¹,è®¾ç½®æ˜¾ç¤ºåœ¨æ¡Œé�¢ç³»ç»Ÿæˆ–ç§»åŠ¨å¹³å�°
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    // ä¸»å±�æ€§
    properties: {
      // å±�æ€§å��,ä¼ å…¥ç»„ä»¶çš„å±�æ€§å��
      progress: {
        // è¾“å…¥å±�æ€§çš„è¾“å…¥æ¡†ç±»å�‹
        type: 'number',
        // æ˜¾ç¤ºå��ç§°
        displayName: 'è¿›åº¦',
        validation: {
          schema: {
            type: 'number',
          },
        },
      },
      showLable: {
        type: 'toggle',
        displayName: 'æ˜¾ç¤ºè¿›åº¦æ–‡æœ¬',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
    },
    events: {},
    styles: {
      color: {
        type: 'select',
        displayName: 'è¿›åº¦æ�¡ç±»å�‹',
        options: [
          { name: 'æˆ�åŠŸ', value: 'success' },
          { name: 'æ¶ˆæ�¯', value: 'info' },
          { name: 'è­¦å‘Š', value: 'warning' },
          { name: 'å�±é™©', value: 'danger' },
        ],
        validation: {
          schema: { type: 'string' },
        },
      },
      backgroundColor: {
        type: 'color',
        displayName: 'è¿›åº¦æ�¡èƒŒæ™¯è‰²',
        validation: {
          schema: { type: 'string' },
        },
      },
      striped: {
        type: 'toggle',
        displayName: 'æ˜¾ç¤ºæ�¡çº¹',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      animated: {
        type: 'toggle',
        displayName: 'å§‹ç»ˆæ˜¾ç¤ºåŠ¨ç”»',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      enterAnimated: {
        type: 'toggle',
        displayName: 'é¼ æ ‡ç»�è¿‡æ˜¾ç¤ºåŠ¨ç”»',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      visibility: {
        type: 'toggle',
        displayName: 'Visibility',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      disabledState: {
        type: 'toggle',
        displayName: 'ç¦�ç”¨',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
    },
    // åŠ¨ä½œåˆ—è¡¨ï¼Œéœ€åœ¨ç»„ä»¶ä¸­æ³¨å†Œæ�¥å�—åŠ¨ä½œ
    actions: [
      {
        handle: 'setPrograss',
        displayName: 'è®¾ç½®è¿›åº¦',
        // å�‚æ•°
        params: [
          {
            handle: 'num',
            displayName: 'è¿›åº¦',
            defaultValue: '100',
          },
        ],
      },
    ],
    // æš´éœ²çš„å€¼ï¼Œç”¨äº�è°ƒç”¨
    exposedVariables: { progress: 50 },
    // å®šä¹‰é»˜è®¤å€¼
    definition: {
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      properties: {
        progress: { value: 50 },
        showLable: { value: true },
      },
      events: [],
      styles: {
        color: { value: 'info' },
        striped: { value: '{{false}}' },
        animated: { value: '{{false}}' },
        visibility: { value: '{{true}}' },
        backgroundColor: { value: '#e6e8e9' },
        enterAnimated: { value: '{{false}}' },
      },
    },
  },
  {
    // ç»„ä»¶å��ç§°
    name: 'Accordions',
    // ç»„ä»¶æ˜¾ç¤ºå��ç§°
    displayName: 'æŠ˜å� é�¢æ�¿',
    // ç»„ä»¶æ��è¿°
    description: 'å�¯ä»¥æŠ˜å� çš„ç»„ä»¶',
    // è°ƒç”¨çš„ç»„ä»¶å��
    component: 'Accordions',
    // é»˜è®¤ç»„ä»¶å¤§å°�
    defaultSize: {
      width: 20,
      height: 400,
    },
    // é»˜è®¤å­�ç»„ä»¶
    defaultChildren: [
    ],
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    properties: {
      tabs: {
        type: 'code',
        displayName: 'Default value',
        validation: {
          schema: {
            type: 'array',
            schemas: [{ type: 'string' }, { type: 'number' }, { type: 'boolean' }],
          },
        },
      },
      defaultTab: {
        type: 'code',
        displayName: 'Default tab',
        validation: {
          schema: {
            type: 'union',
            schemas: [{ type: 'string' }, { type: 'number' }],
          },
        },
      },
    },
    events: { onTabSwitch: { displayName: 'é€‰é¡¹å�¡åˆ‡æ�¢æ—¶' } },
    styles: {
      visibility: {
        type: 'toggle',
        displayName: 'Visibility',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      disabledState: {
        type: 'toggle',
        displayName: 'Disable',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      backgroundColor: {
        type: 'color',
        displayName: 'æŠ˜å� ä½“èƒŒæ™¯è‰²',
        validation: {
          schema: {
            type: 'string',
          },
        },
      },
      widgetColor: {
        type: 'color',
        displayName: 'ç»„ä»¶èƒŒæ™¯è‰²',
        validation: {
          schema: {
            type: 'string',
          },
        },
      },
    },
    actions: [],
    exposedVariables: { currentIndex: '0' },
    definition: {
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      properties: {
        tabs: {
          value:
            "{{[ \n\t\t 'ä¸»é¡µ', \n\t\t 'å±•ç¤º', \n\t\t 'è®¾ç½®' \n ]}}",
        },
        defaultTab: { value: '0' },
      },
      events: [],
      styles: {
        visibility: { value: '{{true}}' },
        disabledState: { value: '{{false}}' },
        backgroundColor: { value: '#ffffff' },
        widgetColor: { value: '#ffffffff' },
      },
    },
  },
  {
    // ç»„ä»¶å��ç§°
    name: 'Badges',
    // ç»„ä»¶æ˜¾ç¤ºå��ç§°
    displayName: 'è§’æ ‡æ–‡æœ¬',
    // ç»„ä»¶æ��è¿°
    description: 'å¸¦è§’æ ‡çš„æ–‡æœ¬ç»„ä»¶ç»„ä»¶',
    // è°ƒç”¨çš„ç»„ä»¶å��
    component: 'Badges',
    // é»˜è®¤ç»„ä»¶å¤§å°�
    defaultSize: {
      width: 5,
      height: 30,
    },
    // é»˜è®¤å­�ç»„ä»¶
    defaultChildren: [
    ],
    // å…¶ä»–é€‰é¡¹,è®¾ç½®æ˜¾ç¤ºåœ¨æ¡Œé�¢ç³»ç»Ÿæˆ–ç§»åŠ¨å¹³å�°
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    // ä¸»å±�æ€§
    properties: {
      texts: {
        type: 'code',
        displayName: 'æ–‡æœ¬å†…å®¹',
        validation: {
          schema: { type: 'string' },
        },
      },
      title: {
        type: 'code',
        displayName: 'è§’æ ‡å†…å®¹',
        validation: {
          schema: { type: 'string' },
        },
      },
      handleClick: {
        type: 'toggle',
        displayName: 'å“�åº”é¼ æ ‡ç‚¹å‡»',
        validation: {
          schema: { type: 'boolean' },
        },
      },
    },
    events: {
      onClick: { displayName: 'ç‚¹å‡»æ—¶' },
    },
    styles: {
      textSize: {
        type: 'select',
        displayName: 'æ–‡æœ¬å¤§å°�',
        options: [
          { name: 'H1', value: '1' },
          { name: 'H2', value: '2' },
          { name: 'H3', value: '3' },
          { name: 'H4', value: '4' },
          { name: 'H5', value: '5' },
          { name: 'H6', value: '6' },
        ],
        validation: {
          schema: { type: 'string' },
        },
      },
      badgeSize: {
        type: 'select',
        displayName: 'è§’æ ‡å¤§å°�',
        options: [
          { name: 'H1', value: '1' },
          { name: 'H2', value: '2' },
          { name: 'H3', value: '3' },
          { name: 'H4', value: '4' },
          { name: 'H5', value: '5' },
          { name: 'H6', value: '6' },
        ],
        validation: {
          schema: { type: 'string' },
        },
      },
      alignType: {
        type: 'select',
        displayName: 'è§’æ ‡è´´è¿‘ä½�ç½®',
        options: [
          { name: 'é¡¶ç«¯', value: 'flex-start' },
          { name: 'åº•éƒ¨', value: 'baseline' },
        ],
        validation: {
          schema: { type: 'string' },
        },
      },
      badgeFontColor: {
        type: 'select',
        displayName: 'è§’æ ‡å­—ä½“é¢œè‰²',
        options: [
          { name: 'primary', value: 'primary' },
          { name: 'secondary', value: 'secondary' },
          { name: 'success', value: 'success' },
          { name: 'danger', value: 'danger' },
          { name: 'warning', value: 'warning' },
          { name: 'info', value: 'info' },
          { name: 'light', value: 'light' },
          { name: 'dark', value: 'dark' },
        ],
        validation: {
          schema: { type: 'string' },
        },
      },
      badgeBackgroundColor: {
        type: 'select',
        displayName: 'è§’æ ‡èƒŒæ™¯é¢œè‰²',
        options: [
          { name: 'primary', value: 'primary' },
          { name: 'secondary', value: 'secondary' },
          { name: 'success', value: 'success' },
          { name: 'danger', value: 'danger' },
          { name: 'warning', value: 'warning' },
          { name: 'info', value: 'info' },
          { name: 'light', value: 'light' },
          { name: 'dark', value: 'dark' },
        ],
        validation: {
          schema: { type: 'string' },
        },
      },
      pill: {
        type: 'toggle',
        displayName: 'æ¤­åœ†å½¢çŠ¶',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      visibility: {
        type: 'toggle',
        displayName: 'Visibility',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
    },
    // åŠ¨ä½œåˆ—è¡¨ï¼Œéœ€åœ¨ç»„ä»¶ä¸­æ³¨å†Œæ�¥å�—åŠ¨ä½œ
    actions: [
      {
        handle: 'setText',
        displayName: 'è®¾ç½®æ–‡æœ¬',
        params: [
          {
            handle: 'texts',
            displayName: 'æ–‡æœ¬å†…å®¹',
            defaultValue: '',
          },
        ],
      },
      {
        handle: 'setBadge',
        displayName: 'è®¾ç½®è§’æ ‡',
        params: [
          {
            handle: 'Badge',
            displayName: 'è§’æ ‡å†…å®¹',
            defaultValue: '',
          },
        ],
      },
    ],
    // æš´éœ²çš„å€¼ï¼Œç”¨äº�å…¶ä»–äº¤äº’ï¼Œç»„ä»¶ä¸­å�¯ç”¨setExposedVariableè®¾ç½®å€¼
    exposedVariables: {
      texts: '',
      Badges: '',
    },
    // å®šä¹‰æ–°å»ºç»„ä»¶æ—¶çš„é»˜è®¤å€¼
    definition: {
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      properties: {
        texts: { value: "ä½ å¥½", },
        title: { value: "New", },
        handleClick: { value: "{{false}}", },
      },
      events: [],
      styles: {
        textSize: { value: '1' },
        badgeSize: { value: '6' },
        alignType: { value: 'flex-start' },
        badgeBackgroundColor: { value: 'primary' },
        pill: { value: '{{false}}' },
        badgeFontColor: { value: 'light' },
        visibility: { value: '{{true}}' },
      },
    },
  },
  {
    // ç»„ä»¶å��ç§°
    name: 'Carousels',
    // ç»„ä»¶æ˜¾ç¤ºå��ç§°
    displayName: 'èµ°é©¬ç�¯',
    // ç»„ä»¶æ��è¿°
    description: 'å¾ªç�¯æ’­æ”¾å�Œä¸€ç±»å�‹çš„å›¾ç‰‡ã€�æ–‡å­—ç­‰å†…å®¹çš„è·‘é©¬ç�¯',
    // è°ƒç”¨çš„ç»„ä»¶å��
    component: 'Carousels',
    // é»˜è®¤ç»„ä»¶å¤§å°�
    defaultSize: {
      width: 15,
      height: 250,
    },
    // é»˜è®¤å­�ç»„ä»¶
    defaultChildren: [
    ],
    // å…¶ä»–é€‰é¡¹,è®¾ç½®æ˜¾ç¤ºåœ¨æ¡Œé�¢ç³»ç»Ÿæˆ–ç§»åŠ¨å¹³å�°
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    // ä¸»å±�æ€§
    properties: {
      // å±�æ€§å��,ä¼ å…¥ç»„ä»¶çš„å±�æ€§å��
      data: {
        // è¾“å…¥å±�æ€§çš„è¾“å…¥æ¡†ç±»å�‹ï¼Œcode/toggle/color/number/selectç­‰
        type: 'code',
        // æ˜¾ç¤ºå��ç§°
        displayName: 'å±•ç¤ºå†…å®¹',
        tip: 'srcä¸ºå›¾ç‰‡åœ°å�€;titleä¸ºä¸»æ ‡é¢˜;subTitleä¸ºå‰¯æ ‡é¢˜;fillä¸ºå›¾ç‰‡å¡«å……æ–¹å¼�(é€‰å¡«)',
        validation: {
          schema: {
            // string/array/number
            type: 'array',
            // æŒ‡å®šå­�å…ƒç´ ç±»å�‹èŒƒå›´
            // element: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] }
          },
        },
      },
      fade: {
        type: 'toggle',
        displayName: 'æ¸�å�˜è¿‡æ¸¡',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      defaultIndex: {
        type: 'number',
        displayName: 'é»˜è®¤åˆ�å§‹åº�å�·',
        validation: {
          schema: {
            type: 'number',
          },
        },
      },
      interval: {
        type: 'number',
        displayName: 'åˆ‡æ�¢é—´éš”æ—¶é—´(æ¯«ç§’)',
        validation: {
          schema: {
            type: 'number',
          },
        },
      },
    },
    events: { onTabSwitch: { displayName: 'è·‘é©¬ç�¯åˆ‡æ�¢æ—¶' } },
    styles: {
      dark: {
        type: 'toggle',
        displayName: 'æ·±è‰²æ¨¡å¼�',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      fillType: {
        type: 'select',
        displayName: 'Image fit',
        options: [
          { name: 'å¡«å……', value: 'fill' },
          { name: 'è¦†ç›–', value: 'contain' },
          { name: 'åŒ…å�«', value: 'cover' },
          { name: 'ç¼©å°�', value: 'scale-down' },
        ],
        validation: {
          schema: { type: 'string' },
        },
      },
      showControl: {
        type: 'toggle',
        displayName: 'æ˜¾ç¤ºæ�§åˆ¶æŒ‰é’®',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      showIndicators: {
        type: 'toggle',
        displayName: 'æ˜¾ç¤ºæŒ‡ç¤ºå™¨',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      visibility: {
        type: 'toggle',
        displayName: 'Visibility',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      disabledState: {
        type: 'toggle',
        displayName: 'ç¦�ç”¨',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
    },
    // åŠ¨ä½œåˆ—è¡¨ï¼Œéœ€åœ¨ç»„ä»¶ä¸­æ³¨å†Œæ�¥å�—åŠ¨ä½œ
    actions: [
      {
        handle: 'setIndex',
        displayName: 'è®¾ç½®åº�å�·',
        // å�‚æ•°
        params: [
          {
            handle: 'index',
            displayName: 'åº�å�·',
            type: 'number',
            defaultValue: 1,
          },
        ],
      },
    ],
    // æš´éœ²çš„å€¼ï¼Œç”¨äº�å…¶ä»–äº¤äº’ï¼Œç»„ä»¶ä¸­å�¯ç”¨setExposedVariableè®¾ç½®å€¼
    exposedVariables: {
      currentIndex: 0,
    },
    // å®šä¹‰æ–°å»ºç»„ä»¶æ—¶çš„é»˜è®¤å€¼
    definition: {
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      properties: {
        data: {
          value:
            `{{[ 
            { src: 'https://yun.mousheng.top/tooljet/1.jpg',title:'ä¸»æ ‡é¢˜1',subTitle:'å‰¯æ ‡é¢˜1',fill:'fill'},
            { src: 'https://yun.mousheng.top/tooljet/2.jpg',title:'ä¸»æ ‡é¢˜2',subTitle:'å‰¯æ ‡é¢˜2',fill:'scale-down'},
            { src: 'https://yun.mousheng.top/tooljet/3.jpg',title:'ä¸»æ ‡é¢˜3',subTitle:'å‰¯æ ‡é¢˜3'}
          ]}}`,
        },
        fade: { value: false },
        defaultIndex: { value: 0 },
        interval: { value: 5000 },
      },
      events: [],
      styles: {
        visibility: { value: '{{true}}' },
        showControl: { value: '{{true}}' },
        showIndicators: { value: '{{true}}' },
        disabledState: { value: '{{false}}' },
        fillType: { value: '{{fill}}' },
      },
    },
  },
  {
    // ç»„ä»¶å��ç§°
    name: 'Autocomplete',
    // ç»„ä»¶æ˜¾ç¤ºå��ç§°
    displayName: 'è‡ªåŠ¨è¡¥å…¨',
    // ç»„ä»¶æ��è¿°
    description: 'è‡ªåŠ¨è¡¥å…¨è¾“å…¥æ¡†',
    // è°ƒç”¨çš„ç»„ä»¶å��
    component: 'Autocomplete',
    // é»˜è®¤ç»„ä»¶å¤§å°�
    defaultSize: {
      width: 15,
      height: 32,
    },
    // é»˜è®¤å­�ç»„ä»¶
    defaultChildren: [
    ],
    // å…¶ä»–é€‰é¡¹,è®¾ç½®æ˜¾ç¤ºåœ¨æ¡Œé�¢ç³»ç»Ÿæˆ–ç§»åŠ¨å¹³å�°
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    // ä¸»å±�æ€§
    properties: {
      // å±�æ€§å��,ä¼ å…¥ç»„ä»¶çš„å±�æ€§å��
      datas: {
        // è¾“å…¥å±�æ€§çš„è¾“å…¥æ¡†ç±»å�‹ï¼Œcode/toggle/color/number/selectç­‰
        type: 'code',
        // æ˜¾ç¤ºå��ç§°
        displayName: 'è‡ªåŠ¨è¡¥å…¨æ•°æ�®',
        validation: {
          schema: {
            // string/array/number
            type: 'array',
            // æŒ‡å®šå­�å…ƒç´ ç±»å�‹èŒƒå›´
            element: { type: 'union', schemas: [{ type: 'object' }] }
          },
        },
      },
      defaultValue: {
        type: 'code',
        displayName: 'é»˜è®¤å€¼',
        validation: {
          schema: {
            type: 'string',
          },
        },
      },
      placeholder: {
        type: 'code',
        displayName: 'å� ä½�ç¬¦',
        validation: {
          schema: {
            type: 'string',
          },
        },
      },
      searchLabelOnly: {
        type: 'toggle',
        displayName: 'ä»…æ�œç´¢å�¯è§�å€¼(Label)',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      selectKey: {
        type: 'select',
        displayName: 'é€‰æ‹©æ—¶æ��å�–é”®',
        options: [
          { name: 'label', value: 'label' },
          { name: 'value', value: 'value' },
        ],
        validation: {
          schema: { type: 'string' },
        },
      },
      searchFirstPY: {
        type: 'toggle',
        displayName: 'è‡ªåŠ¨åŒ¹é…�é¦–æ‹¼',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      searchAllPY: {
        type: 'toggle',
        displayName: 'è‡ªåŠ¨åŒ¹é…�å…¨æ‹¼',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
    },
    events: {
      onSearchTextChanged: { displayName: 'æ�œç´¢æ–‡æœ¬æ”¹å�˜æ—¶' },
      onSelect: { displayName: 'é€‰æ‹©é€‰é¡¹æ—¶' },
      onFocus: { displayName: 'è�·å�–ç„¦ç‚¹æ—¶' },
    },
    styles: {
      searchIcon: {
        type: 'select',
        displayName: 'æ�œç´¢å›¾æ ‡',
        options: [
          { name: 'æ— ', value: '' },
          { name: 'è“�è‰²', value: 'primary' },
          { name: 'ç�°è‰²', value: 'secondary' },
        ],
        validation: {
          schema: { type: 'string' },
        },
      },
      visibility: {
        type: 'toggle',
        displayName: 'Visibility',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      disabledState: {
        type: 'toggle',
        displayName: 'ç¦�ç”¨',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
    },
    // åŠ¨ä½œåˆ—è¡¨ï¼Œéœ€åœ¨ç»„ä»¶ä¸­æ³¨å†Œæ�¥å�—åŠ¨ä½œ
    actions: [
      {
        handle: 'setValue',
        displayName: 'è®¾ç½®å€¼',
        // å�‚æ•°
        params: [
          {
            handle: 'value',
            displayName: 'å€¼',
            defaultValue: '',
          },
          {
            handle: 'selected',
            displayName: 'æ˜¯å�¦ä¸ºé€‰æ‹©å€¼',
            defaultValue: '{{true}}',
          },
        ],
      },
    ],
    // æš´éœ²çš„å€¼ï¼Œç”¨äº�å…¶ä»–äº¤äº’ï¼Œç»„ä»¶ä¸­å�¯ç”¨setExposedVariableè®¾ç½®å€¼
    exposedVariables: {
      searchText: '',
      selectedItem: {},
      text: '',
      selected: false,
    },
    // å®šä¹‰æ–°å»ºç»„ä»¶æ—¶çš„é»˜è®¤å€¼
    definition: {
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      properties: {
        datas: {
          value:
            `{{[
  {
    label: 'ä¸Šæµ·',
    value:'123',
  },
  {
    label: 'åŒ—äº¬',
    value:'456',
  },
  {
    label: 'å¹¿ä¸œ',
    value:'789',
  },
]}}`,
        },
        placeholder: { value: 'æ�œç´¢' },
        searchLabelOnly: { value: true },
        searchFirstPY: { value: '{{true}}' },
        searchAllPY: { value: '{{true}}' },
        defaultValue: { value: '' },
        selectKey: { value: 'value' },
      },
      events: [],
      styles: {
        searchIcon: { value: 'primary' },
        visibility: { value: '{{true}}' },
        disabledState: { value: '{{false}}' },
      },
    },
  },
  {
    // ç»„ä»¶å��ç§°
    name: 'RadioButtonGroup',
    // ç»„ä»¶æ˜¾ç¤ºå��ç§°
    displayName: 'å�•é€‰æŒ‰é’®ç»„',
    // ç»„ä»¶æ��è¿°
    description: 'å�•é€‰æŒ‰é’®ç»„ç»„ä»¶',
    // è°ƒç”¨çš„ç»„ä»¶å��
    component: 'RadioButtonGroup',
    // é»˜è®¤ç»„ä»¶å¤§å°�
    defaultSize: {
      width: 15,
      height: 50,
    },
    // é»˜è®¤å­�ç»„ä»¶
    defaultChildren: [
    ],
    // å…¶ä»–é€‰é¡¹,è®¾ç½®æ˜¾ç¤ºåœ¨æ¡Œé�¢ç³»ç»Ÿæˆ–ç§»åŠ¨å¹³å�°
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    // ä¸»å±�æ€§
    properties: {
      // å±�æ€§å��,ä¼ å…¥ç»„ä»¶çš„å±�æ€§å��
      radios: {
        // è¾“å…¥å±�æ€§çš„è¾“å…¥æ¡†ç±»å�‹ï¼Œcode/toggle/color/number/selectç­‰
        type: 'code',
        // æ˜¾ç¤ºå��ç§°
        displayName: 'æŒ‰é’®ç»„æ•°æ�®',
        validation: {
          schema: {
            // string/array/number
            type: 'array',
            // æŒ‡å®šå­�å…ƒç´ ç±»å�‹èŒƒå›´
            // element: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] }
          },
        },
      },
      radioValue: {
        type: 'code',
        displayName: 'é»˜è®¤é€‰ä¸­é¡¹',
        validation: {
          schema: {
            type: 'string',
          },
        },
      },
    },
    events: { onSelect: { displayName: 'é€‰æ‹©æ—¶' } },
    styles: {
      visibility: {
        type: 'toggle',
        displayName: 'Visibility',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      disabledState: {
        type: 'toggle',
        displayName: 'ç¦�ç”¨',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
    },
    // åŠ¨ä½œåˆ—è¡¨ï¼Œéœ€åœ¨ç»„ä»¶ä¸­æ³¨å†Œæ�¥å�—åŠ¨ä½œ
    actions: [
      {
        handle: 'setIndex',
        displayName: 'è®¾ç½®é€‰ä¸­åº�å�·',
        // å�‚æ•°
        params: [
          {
            handle: 'index',
            displayName: 'è®¾ç½®åº�å�·',
            defaultValue: '1',
          },
        ],
      },
    ],
    // æš´éœ²çš„å€¼ï¼Œç”¨äº�å…¶ä»–äº¤äº’ï¼Œç»„ä»¶ä¸­å�¯ç”¨setExposedVariableè®¾ç½®å€¼
    exposedVariables: {
      currentValue: '',
      currentName: ''
    },
    // å®šä¹‰æ–°å»ºç»„ä»¶æ—¶çš„é»˜è®¤å€¼
    definition: {
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      properties: {
        radios: {
          value:
            `{{[
{ name: 'ç¬¬ä¸€', value: '1' },
{ name: 'ç¬¬äºŒ', value: '2' },
{ name: 'ç¬¬ä¸‰', value: '3' },
]}}`,
        },
        radioValue: { value: '1' },
      },
      events: [],
      styles: {
        color: { value: '#CFD1F3' },
        visibility: { value: '{{true}}' },
        disabledState: { value: '{{false}}' },
      },
    },
  },
  {
    // ç»„ä»¶å��ç§°
    name: 'ListGroups',
    // ç»„ä»¶æ˜¾ç¤ºå��ç§°
    displayName: 'åˆ—è¡¨è�œå�•',
    // ç»„ä»¶æ��è¿°
    description: 'åˆ—è¡¨è�œå�•ç»„ä»¶',
    // è°ƒç”¨çš„ç»„ä»¶å��
    component: 'ListGroups',
    // é»˜è®¤ç»„ä»¶å¤§å°�
    defaultSize: {
      width: 15,
      height: 250,
    },
    // é»˜è®¤å­�ç»„ä»¶
    defaultChildren: [
    ],
    // å…¶ä»–é€‰é¡¹,è®¾ç½®æ˜¾ç¤ºåœ¨æ¡Œé�¢ç³»ç»Ÿæˆ–ç§»åŠ¨å¹³å�°
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    // ä¸»å±�æ€§
    properties: {
      // å±�æ€§å��,ä¼ å…¥ç»„ä»¶çš„å±�æ€§å��
      listData: {
        // è¾“å…¥å±�æ€§çš„è¾“å…¥æ¡†ç±»å�‹ï¼Œcode/toggle/color/number/selectç­‰
        type: 'code',
        // æ˜¾ç¤ºå��ç§°
        displayName: 'åˆ—è¡¨æ•°æ�®',
        validation: {
          schema: {
            // string/array/number
            type: 'array',
            // æŒ‡å®šå­�å…ƒç´ ç±»å�‹èŒƒå›´
            // element: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] }
          },
        },
      },
      defaultActivate: {
        type: 'number',
        displayName: 'é»˜è®¤é€‰ä¸­',
        validation: {
          schema: {
            type: 'number',
          },
        },
      },
      horizontal: {
        type: 'toggle',
        displayName: 'æ°´å¹³å¸ƒå±€',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      showIndex: {
        type: 'toggle',
        displayName: 'æ˜¾ç¤ºåº�å�·',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
    },
    events: { onClick: { displayName: 'ç‚¹å‡»äº‹ä»¶' } },
    styles: {
      itemStyle: {
        type: 'select',
        displayName: 'åˆ—è¡¨æ ·å¼�',
        options: [
          { name: 'æ— ', value: '' },
          { name: 'ä¸»è¦�', value: 'primary' },
          { name: 'æ¬¡è¦�', value: 'secondary' },
          { name: 'æˆ�åŠŸ', value: 'success' },
          { name: 'å�±é™©', value: 'danger' },
          { name: 'è­¦å‘Š', value: 'warning' },
          { name: 'æ¶ˆæ�¯', value: 'info' },
          { name: 'äº®è‰²', value: 'light' },
          { name: 'æš—è‰²', value: 'dark' },
        ],
        validation: {
          schema: { type: 'string' },
        },
      },
      badgeStyle: {
        type: 'select',
        displayName: 'å¾½æ ‡æ ·å¼�',
        options: [
          { name: 'æ— ', value: '' },
          { name: 'ä¸»è¦�', value: 'primary' },
          { name: 'æ¬¡è¦�', value: 'secondary' },
          { name: 'æˆ�åŠŸ', value: 'success' },
          { name: 'å�±é™©', value: 'danger' },
          { name: 'è­¦å‘Š', value: 'warning' },
          { name: 'æ¶ˆæ�¯', value: 'info' },
          { name: 'äº®è‰²', value: 'light' },
          { name: 'æš—è‰²', value: 'dark' },
        ],
        validation: {
          schema: { type: 'string' },
        },
      },
      visibility: {
        type: 'toggle',
        displayName: 'Visibility',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      disabledState: {
        type: 'toggle',
        displayName: 'ç¦�ç”¨',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
    },
    // åŠ¨ä½œåˆ—è¡¨ï¼Œéœ€åœ¨ç»„ä»¶ä¸­æ³¨å†Œæ�¥å�—åŠ¨ä½œ
    actions: [
      {
        handle: 'setIndex',
        displayName: 'è®¾ç½®é€‰ä¸­åº�å�·',
        // å�‚æ•°
        params: [
          {
            handle: 'index',
            displayName: 'è®¾ç½®åº�å�·',
            type: 'number',
            defaultValue: 1,
          },
        ],
      },
    ],
    // æš´éœ²çš„å€¼ï¼Œç”¨äº�å…¶ä»–äº¤äº’ï¼Œç»„ä»¶ä¸­å�¯ç”¨setExposedVariableè®¾ç½®å€¼
    exposedVariables: {
      clickIndex: 1
    },
    // å®šä¹‰æ–°å»ºç»„ä»¶æ—¶çš„é»˜è®¤å€¼
    definition: {
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      properties: {
        listData: {
          value:
            `{{[
  { title: 'ä¸»é¡µ',subTitle:'æ˜¾ç¤ºä¸»é¡µ',num:10},
  { title: 'å±•ç¤º',subTitle:'æ˜¾ç¤ºå†…å®¹',num:0},
  { title: 'è®¾ç½®',subTitle:'æ˜¾ç¤ºè®¾ç½®',disabled:true} \n ]}}`,
        },
        defaultActivate: { value: 1 },
        horizontal: { value: false },
        showIndex: { value: false },
      },
      events: [],
      styles: {
        itemStyle: { value: '' },
        badgeStyle: { value: 'danger' },
        visibility: { value: '{{true}}' },
        disabledState: { value: '{{false}}' },
      },
    },
  },
  {
    // ç»„ä»¶å��ç§°
    name: 'NavMenu',
    // ç»„ä»¶æ˜¾ç¤ºå��ç§°
    displayName: 'å¯¼èˆªè�œå�•',
    // ç»„ä»¶æ��è¿°
    description: 'å¯¼èˆªè�œå�•ç»„ä»¶',
    // è°ƒç”¨çš„ç»„ä»¶å��
    component: 'NavMenu',
    // é»˜è®¤ç»„ä»¶å¤§å°�
    defaultSize: {
      width: 15,
      height: 515,
    },
    // é»˜è®¤å­�ç»„ä»¶
    defaultChildren: [
    ],
    // å…¶ä»–é€‰é¡¹,è®¾ç½®æ˜¾ç¤ºåœ¨æ¡Œé�¢ç³»ç»Ÿæˆ–ç§»åŠ¨å¹³å�°
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    // ä¸»å±�æ€§
    properties: {
      // å±�æ€§å��,ä¼ å…¥ç»„ä»¶çš„å±�æ€§å��
      menuData: {
        // è¾“å…¥å±�æ€§çš„è¾“å…¥æ¡†ç±»å�‹ï¼Œcode/toggle/color/number/selectç­‰
        type: 'code',
        // æ˜¾ç¤ºå��ç§°
        displayName: 'è�œå�•æ•°æ�®',
        validation: {
          schema: {
            // string/array/number
            type: 'array',
            // æŒ‡å®šå­�å…ƒç´ ç±»å�‹èŒƒå›´
            element: { type: 'union', schemas: [{ type: 'object' }] }
          },
        },
      },
      defaultOpenKeys: {
        type: 'code',
        displayName: 'é»˜è®¤å±•å¼€é¡¹',
        validation: {
          schema: {
            type: 'array',
          },
        },
      },
      defaultSelectedKeys: {
        type: 'code',
        displayName: 'é»˜è®¤é€‰ä¸­é¡¹',
        validation: {
          schema: {
            type: 'array',
          },
        },
      },
      defaultinlineCollapsed: {
        type: 'toggle',
        displayName: 'é»˜è®¤æ”¶ç¼©å�‚ç›´è�œå�•',
        tip: 'ä»…åœ¨å�‚ç›´å¸ƒå±€æœ‰æ•ˆ',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      onlyOpenOne: {
        type: 'toggle',
        displayName: 'å�ªå±•å¼€ä¸€ä¸ªäºŒçº§è�œå�•',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      menuMode: {
        type: 'select',
        displayName: 'è�œå�•å¸ƒå±€æ–¹å¼�',
        options: [
          { name: 'å�‚ç›´å†…åµŒ', value: 'inline' },
          { name: 'å�‚ç›´å¼¹å‡º', value: 'vertical' },
          { name: 'æ°´å¹³å¸ƒå±€', value: 'horizontal' },
        ],
        validation: {
          schema: { type: 'string' },
        },
      },
    },
    events: { onClick: { displayName: 'ç‚¹å‡»æ—¶' } },
    styles: {
      visibility: {
        type: 'toggle',
        displayName: 'Visibility',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      disabledState: {
        type: 'toggle',
        displayName: 'ç¦�ç”¨',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
    },
    // åŠ¨ä½œåˆ—è¡¨ï¼Œéœ€åœ¨ç»„ä»¶ä¸­æ³¨å†Œæ�¥å�—åŠ¨ä½œ
    actions: [
      {
        handle: 'setInlineCollapsed',
        displayName: 'å†…åµŒè�œå�•ç¼©èµ·/å±•å¼€',
        // å�‚æ•°
        params: [
          {
            handle: 'status',
            displayName: 'çŠ¶æ€�',
            defaultValue: '{{true}}',
          },
        ],
      },
    ],
    // æš´éœ²çš„å€¼ï¼Œç”¨äº�å…¶ä»–äº¤äº’ï¼Œç»„ä»¶ä¸­å�¯ç”¨setExposedVariableè®¾ç½®å€¼
    exposedVariables: {
      currentKey: '',
      currentPath: [],
    },
    // å®šä¹‰æ–°å»ºç»„ä»¶æ—¶çš„é»˜è®¤å€¼
    definition: {
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      properties: {
        menuData: {
          value:
            `{{[
  {
      label: 'é¦–é¡µ',
      key: 'main',
      icon: 'MailOutlined',
  },
  {
      label: 'æˆ‘è¢«éš�è—�äº†',
      key: 'show',
      icon: 'AppstoreOutlined',
      hidden:true,
  },
  {
      label: 'äºŒçº§è�œå�•1',
      key: 'submenu',
      icon: 'AppstoreOutlined',
      children: [
          {
              type: 'group',
              label: 'ç»„1',
              children: [
                  {
                      label: 'é€‰é¡¹1',
                      key: 'setting1',
                      icon: 'AppstoreOutlined',
                  },
                  {
                      label: 'é€‰é¡¹2',
                      key: 'setting2',
                  },
              ],
          },
          {
              type: 'group',
              label: 'ç»„äºŒ',
              children: [
                  {
                      label: 'é€‰é¡¹3',
                      key: 'setting3',
                  },
                  {
                      label: 'é€‰é¡¹4',
                      key: 'setting4',
                  },
              ],
          },
      ],
  },
  {
      label: 'äºŒçº§è�œå�•2',
      key: 'submenu2',
      icon: 'AppstoreOutlined',
      children: [
          {
              type: 'group',
              label: 'ç»„3',
              children: [
                  {
                      label: 'é€‰é¡¹5',
                      key: 'setting5',
                      icon: 'AppstoreOutlined',
                  },
                  {
                      label: 'é€‰é¡¹6',
                      key: 'setting6',
                  },
              ],
          }
      ]
  },
  {
      label: 'å›¾æ ‡',
      key: 'icon',
      icon: 'AppstoreOutlined',
  },
]}}`,
        },
        defaultOpenKeys: { value: "{{['submenu']}}" },
        defaultSelectedKeys: { value: "{{['setting3']}}" },
        menuMode: { value: 'inline' },
        onlyOpenOne: { value: true },
        defaultinlineCollapsed: { value: false },
      },
      events: [],
      styles: {
        visibility: { value: '{{true}}' },
        disabledState: { value: '{{false}}' },
      },
    },
  },
  {
    // ç»„ä»¶å��ç§°
    name: 'Cascaders',
    // ç»„ä»¶æ˜¾ç¤ºå��ç§°
    displayName: 'çº§è�”é€‰æ‹©',
    // ç»„ä»¶æ��è¿°
    description: 'å�¯ä»�ä¸€ç»„ç›¸å…³è�”çš„æ•°æ�®é›†å�ˆè¿›è¡Œé€‰æ‹©',
    // è°ƒç”¨çš„ç»„ä»¶å��
    component: 'Cascaders',
    // é»˜è®¤ç»„ä»¶å¤§å°�
    defaultSize: {
      width: 15,
      height: 36,
    },
    // é»˜è®¤å­�ç»„ä»¶
    defaultChildren: [
    ],
    // å…¶ä»–é€‰é¡¹,è®¾ç½®æ˜¾ç¤ºåœ¨æ¡Œé�¢ç³»ç»Ÿæˆ–ç§»åŠ¨å¹³å�°
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    // ä¸»å±�æ€§
    properties: {
      // å±�æ€§å��,ä¼ å…¥ç»„ä»¶çš„å±�æ€§å��
      options: {
        // è¾“å…¥å±�æ€§çš„è¾“å…¥æ¡†ç±»å�‹ï¼Œcode/toggle/color/number/selectç­‰
        type: 'code',
        // æ˜¾ç¤ºå��ç§°
        displayName: 'é€‰é¡¹æ•°æ�®',
        validation: {
          schema: {
            // string/array/number
            type: 'array',
            // æŒ‡å®šå­�å…ƒç´ ç±»å�‹èŒƒå›´
            element: { type: 'union', schemas: [{ type: 'object' }] }
          },
        },
      },
      placeholder: {
        type: 'code',
        displayName: 'å� ä½�ç¬¦',
        validation: {
          schema: {
            type: 'string',
          },
        },
      },
      defaultValue: {
        type: 'code',
        displayName: 'é»˜è®¤å€¼',
        validation: {
          schema: {
            type: 'array',
            element: { type: 'union', schemas: [{ type: 'string' }] }
          },
        },
      },
      expandTrigger: {
        type: 'select',
        displayName: 'é€‰é¡¹å±•å¼€æ–¹å¼�',
        options: [
          { name: 'ç§»å…¥å±•å¼€', value: 'hover' },
          { name: 'ç‚¹å‡»å±•å¼€', value: 'click' },
        ],
        validation: {
          schema: { type: 'string' },
        },
      },
      customMap: {
        type: 'code',
        displayName: 'è‡ªå®šä¹‰æ˜ å°„é”®',
        validation: {
          schema: {
            type: 'object',
          },
        },
      },
      multiple: {
        type: 'toggle',
        displayName: 'å…�è®¸å¤šé€‰',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      searchAllPY: {
        type: 'toggle',
        displayName: 'å…�è®¸å…¨æ‹¼æ�œç´¢',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      searchFirstPY: {
        type: 'toggle',
        displayName: 'å…�è®¸é¦–æ‹¼æ�œç´¢',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
    },
    events: {
      onSelect: { displayName: 'ç‚¹å‡»äº‹ä»¶' },
      onSearchTextChanged: { displayName: 'æ�œç´¢æ–‡æœ¬æ”¹å�˜æ—¶' },
    },
    styles: {
      placement: {
        type: 'select',
        displayName: 'å¼¹å‡ºä½�ç½®',
        options: [
          { name: 'ä¸‹æ–¹é� å·¦', value: 'bottomLeft' },
          { name: 'ä¸‹æ–¹é� å�³', value: 'bottomRight' },
          { name: 'ä¸Šæ–¹é� å·¦', value: 'topLeft' },
          { name: 'ä¸Šæ–¹é� å�³', value: 'topRight' },
        ],
        validation: {
          schema: { type: 'string' },
        },
      },
      visibility: {
        type: 'toggle',
        displayName: 'Visibility',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      disabledState: {
        type: 'toggle',
        displayName: 'ç¦�ç”¨',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
    },
    // åŠ¨ä½œåˆ—è¡¨ï¼Œéœ€åœ¨ç»„ä»¶ä¸­æ³¨å†Œæ�¥å�—åŠ¨ä½œ
    actions: [
    ],
    // æš´éœ²çš„å€¼ï¼Œç”¨äº�å…¶ä»–äº¤äº’ï¼Œç»„ä»¶ä¸­å�¯ç”¨setExposedVariableè®¾ç½®å€¼
    exposedVariables: {
      selectedOptions: [],
      selectValue: [],
      searchText: '',
    },
    // å®šä¹‰æ–°å»ºç»„ä»¶æ—¶çš„é»˜è®¤å€¼
    definition: {
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      properties: {
        options: {
          value: `{{[
          {
            value: 'zhejiang',
            label: 'æµ™æ±Ÿ',
            children: [
              {
                value: 'hangzhou',
                label: 'æ�­å·�',
                children: [
                  {
                    value: 'xihu',
                    label: 'è¥¿æ¹–',
                  },
                  {
                    value: 'xiasha',
                    label: 'ä¸‹æ²™',
                    disabled: true,
                  },
                ],
              },
            ],
          },
          {
            value: 'jiangsu',
            label: 'æ±Ÿè‹�',
            children: [
              {
                value: 'nanjing',
                label: 'å�—äº¬',
                children: [
                  {
                    value: 'zhonghuamen',
                    label: 'ä¸­å��é—¨',
                  },
                ],
              },
            ],
          },
          {
            value: 'bukexuan',
            label: 'ä¸�å�¯é€‰çš„é€‰é¡¹',
            children: [
              {
                value: 'test2',
                label: 'æµ‹è¯•2',
                children: [
                  {
                    value: 'ceshi3',
                    label: 'æµ‹è¯•3',
                    disabled: true,
                  },
                ],
              }
            ]
          }
        ]}}`
        },
        placeholder: { value: 'è¯·é€‰æ‹©' },
        expandTrigger: { value: 'hover' },
        defaultValue: { value: "{{['zhejiang', 'hangzhou', 'xihu']}}" },
        customMap: {
          value: `{{{ 
label: 'label', 
value: 'value', 
children: 'children'
}}}` },
        multiple: { value: false },
        searchAllPY: { value: true },
        searchFirstPY: { value: true },
      },
      events: [],
      styles: {
        placement: { value: 'bottomLeft' },
        visibility: { value: '{{true}}' },
        disabledState: { value: '{{false}}' },
      },
    },
  },
  {
    // ç»„ä»¶å��ç§°
    name: 'MentionsInput',
    // ç»„ä»¶æ˜¾ç¤ºå��ç§°
    displayName: 'æ��å�Šè¾“å…¥æ¡†',
    // ç»„ä»¶æ��è¿°
    description: 'å�¯å“�åº”ç‰¹å®šæ��å�ŠæŒ‰é”®çš„è¾“å…¥æ¡†',
    // è°ƒç”¨çš„ç»„ä»¶å��
    component: 'MentionsInput',
    // é»˜è®¤ç»„ä»¶å¤§å°�
    defaultSize: {
      width: 15,
      height: 36,
    },
    // é»˜è®¤å­�ç»„ä»¶
    defaultChildren: [
    ],
    // å…¶ä»–é€‰é¡¹,è®¾ç½®æ˜¾ç¤ºåœ¨æ¡Œé�¢ç³»ç»Ÿæˆ–ç§»åŠ¨å¹³å�°
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    // ä¸»å±�æ€§
    properties: {
      // å±�æ€§å��,ä¼ å…¥ç»„ä»¶çš„å±�æ€§å��
      options: {
        // è¾“å…¥å±�æ€§çš„è¾“å…¥æ¡†ç±»å�‹ï¼Œcode/toggle/color/number/selectç­‰
        type: 'code',
        // æ˜¾ç¤ºå��ç§°
        displayName: 'æ��å�Šåˆ—è¡¨',
        validation: {
          schema: {
            // string/array/number
            type: 'object',
          },
        },
      },
      placeholder: {
        type: 'code',
        displayName: 'å� ä½�ç¬¦',
        validation: {
          schema: {
            type: 'string',
          },
        },
      },
      defaultValue: {
        type: 'code',
        displayName: 'é»˜è®¤å€¼',
        validation: {
          schema: {
            type: 'string',
          },
        },
      },
    },
    events: {
      onBlur: { displayName: 'å¤±å�»ç„¦ç‚¹æ—¶' },
      onChange: { displayName: 'æ”¹å�˜æ—¶' },
      onSelect: { displayName: 'é€‰æ‹©æ ‡ç­¾æ—¶' },
    },
    styles: {
      visibility: {
        type: 'toggle',
        displayName: 'Visibility',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      disabledState: {
        type: 'toggle',
        displayName: 'ç¦�ç”¨',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
    },
    // åŠ¨ä½œåˆ—è¡¨ï¼Œéœ€åœ¨ç»„ä»¶ä¸­æ³¨å†Œæ�¥å�—åŠ¨ä½œ
    actions: [
    ],
    // æš´éœ²çš„å€¼ï¼Œç”¨äº�å…¶ä»–äº¤äº’ï¼Œç»„ä»¶ä¸­å�¯ç”¨setExposedVariableè®¾ç½®å€¼
    exposedVariables: {
      context: ''
    },
    // å®šä¹‰æ–°å»ºç»„ä»¶æ—¶çš„é»˜è®¤å€¼
    definition: {
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      properties: {
        options: {
          value:
            `{{{
  '@': ['å¼ ä¸‰', 'æ��å››', 'ç�‹äº”'],
  '#': ['1.0', '2.0', '3.0'],
}}}`
        },
        defaultValue: { value: '' },
        placeholder: { value: 'è¾“å…¥@æˆ–#å�³å�¯å¿«é€Ÿæ��å�Š' },
      },
      events: [],
      styles: {
        visibility: { value: '{{true}}' },
        disabledState: { value: '{{false}}' },
      },
    },
  },
  {
    // ç»„ä»¶å��ç§°
    name: 'AntRadio',
    // ç»„ä»¶æ˜¾ç¤ºå��ç§°
    displayName: 'å�•é€‰æŒ‰é’®ç»„',
    // ç»„ä»¶æ��è¿°
    description: 'åŸºäº�Antçš„å�•é€‰æŒ‰é’®ç»„ä»¶',
    // è°ƒç”¨çš„ç»„ä»¶å��
    component: 'AntRadio',
    // é»˜è®¤ç»„ä»¶å¤§å°�
    defaultSize: {
      width: 10,
      height: 36,
    },
    // é»˜è®¤å­�ç»„ä»¶
    defaultChildren: [
    ],
    // å…¶ä»–é€‰é¡¹,è®¾ç½®æ˜¾ç¤ºåœ¨æ¡Œé�¢ç³»ç»Ÿæˆ–ç§»åŠ¨å¹³å�°
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    // ä¸»å±�æ€§
    properties: {
      // å±�æ€§å��,ä¼ å…¥ç»„ä»¶çš„å±�æ€§å��
      datas: {
        // è¾“å…¥å±�æ€§çš„è¾“å…¥æ¡†ç±»å�‹ï¼Œcode/toggle/color/number/selectç­‰
        type: 'code',
        // æ˜¾ç¤ºå��ç§°
        displayName: 'å�•é€‰ç»„æ•°æ�®',
        validation: {
          schema: {
            // string/array/number
            type: 'array',
            // æŒ‡å®šå­�å…ƒç´ ç±»å�‹èŒƒå›´
            element: { type: 'union', schemas: [{ type: 'object' }] }
          },
        },
      },
      defaultSelectKey: {
        type: 'code',
        displayName: 'é»˜è®¤é€‰ä¸­çš„å€¼',
        validation: {
          schema: {
            type: 'string',
          },
        },
      },
      radioType: {
        type: 'select',
        displayName: 'æŒ‰é’®ç±»å�‹',
        options: [
          { name: 'å�•é€‰', value: 'default' },
          { name: 'æŒ‰é’®', value: 'button' },
        ],
        validation: {
          schema: { type: 'string' },
        },
      },
      buttonSize: {
        type: 'select',
        displayName: 'æŒ‰é’®å¤§å°�',
        options: [
          { name: 'å¤§', value: 'large' },
          { name: 'ä¸­', value: 'middle' },
          { name: 'å°�', value: 'small' },
        ],
        validation: {
          schema: { type: 'string' },
        },
      },
    },
    events: {
      onChange: { displayName: 'ç‚¹å‡»äº‹ä»¶' },
    },
    styles: {
      visibility: {
        type: 'toggle',
        displayName: 'Visibility',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      disabledState: {
        type: 'toggle',
        displayName: 'ç¦�ç”¨',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
    },
    // åŠ¨ä½œåˆ—è¡¨ï¼Œéœ€åœ¨ç»„ä»¶ä¸­æ³¨å†Œæ�¥å�—åŠ¨ä½œ
    actions: [
      {
        handle: 'setValue',
        displayName: 'è®¾ç½®é€‰ä¸­å€¼',
        // å�‚æ•°
        params: [
          {
            handle: 'value',
            displayName: 'é€‰ä¸­å€¼',
            defaultValue: 'A',
          },
        ],
      },
    ],
    // æš´éœ²çš„å€¼ï¼Œç”¨äº�å…¶ä»–äº¤äº’ï¼Œç»„ä»¶ä¸­å�¯ç”¨setExposedVariableè®¾ç½®å€¼
    exposedVariables: {
      checkedValue: ''
    },
    // å®šä¹‰æ–°å»ºç»„ä»¶æ—¶çš„é»˜è®¤å€¼
    definition: {
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      properties: {
        datas: {
          value: `{{[
{ label: 'é€‰é¡¹A' , value: 'A' ,},
{ label: 'é€‰é¡¹B' , value: 'B' ,},
{ label: 'é€‰é¡¹C' , value: 'C' ,}
]}}`,
        },
        defaultSelectKey: { value: 'B' },
        radioType: { value: 'default' },
        buttonSize: { value: 'middle' },
      },
      events: [],
      styles: {
        visibility: { value: '{{true}}' },
        disabledState: { value: '{{false}}' },
      },
    },
  },
  {
    // ç»„ä»¶å��ç§°
    name: 'Drawers',
    // ç»„ä»¶æ˜¾ç¤ºå��ç§°
    displayName: 'ä¾§è¾¹æŠ½å±‰',
    // ç»„ä»¶æ��è¿°
    description: 'ä»�å±�å¹•è¾¹ç¼˜æ»‘å‡ºçš„åƒ�æŠ½å±‰ä¸€æ ·çš„æ‚¬æµ®é�¢æ�¿',
    // è°ƒç”¨çš„ç»„ä»¶å��
    component: 'Drawers',
    // é»˜è®¤ç»„ä»¶å¤§å°�
    defaultSize: {
      width: 5,
      height: 36,
    },
    // é»˜è®¤å­�ç»„ä»¶
    defaultChildren: [
    ],
    // å…¶ä»–é€‰é¡¹,è®¾ç½®æ˜¾ç¤ºåœ¨æ¡Œé�¢ç³»ç»Ÿæˆ–ç§»åŠ¨å¹³å�°
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    // ä¸»å±�æ€§
    properties: {
      title: {
        type: 'code',
        displayName: 'æŠ½å±‰æ ‡é¢˜',
        validation: {
          schema: {
            type: 'string',
          },
        },
      },
      showButton: {
        type: 'toggle',
        displayName: 'æ˜¾ç¤ºæŒ‰é’®',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      hiddenOnMouseOut: {
        type: 'toggle',
        displayName: 'é¼ æ ‡ç§»å‡ºæ—¶éš�è—�(é¢„è§ˆæ—¶ç”Ÿæ•ˆ)',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      buttonTitle: {
        type: 'code',
        displayName: 'æŒ‰é’®æ ‡é¢˜',
        validation: {
          schema: {
            type: 'string',
          },
        },
      },
      popSize: {
        type: 'select',
        displayName: 'å¼¹å‡ºç»„ä»¶å¤§å°�',
        options: [
          { name: 'æ­£å¸¸', value: 'default' },
          { name: 'åŠ å®½', value: 'large' },
        ],
        validation: {
          schema: { type: 'string' },
        },
      },
      placement: {
        type: 'select',
        displayName: 'å¼¹å‡ºä½�ç½®',
        options: [
          { name: 'å·¦', value: 'left' },
          { name: 'å�³(ç¼–è¾‘æ—¶åœ¨å·¦)', value: 'right' },
          { name: 'ä¸Š', value: 'top' },
          { name: 'ä¸‹', value: 'bottom' },
        ],
        validation: {
          schema: { type: 'string' },
        },
      },
    },
    // äº‹ä»¶åˆ—è¡¨ /onClick/onCheck/onSearch/onChange/onSelect/onHover/onFocus/onBlur
    events: {
      onClick: { displayName: 'æ˜¾ç¤ºæ—¶' },
      onClose: { displayName: 'å…³é—­æ—¶' },
    },
    styles: {
      visibility: {
        type: 'toggle',
        displayName: 'Visibility',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      disabledState: {
        type: 'toggle',
        displayName: 'ç¦�ç”¨',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
    },
    // åŠ¨ä½œåˆ—è¡¨ï¼Œéœ€åœ¨ç»„ä»¶ä¸­æ³¨å†Œæ�¥å�—åŠ¨ä½œ
    actions: [
      {
        handle: 'setStatus',
        displayName: 'è®¾ç½®çŠ¶æ€�',
        params: [
          {
            handle: 'status',
            displayName: 'çŠ¶æ€�',
            defaultValue: '{{true}}',
          },
        ],
      },
    ],
    // æš´éœ²çš„å€¼ï¼Œç”¨äº�å…¶ä»–äº¤äº’ï¼Œç»„ä»¶ä¸­å�¯ç”¨setExposedVariableè®¾ç½®å€¼
    exposedVariables: {
      show: false,
    },
    // å®šä¹‰æ–°å»ºç»„ä»¶æ—¶çš„é»˜è®¤å€¼
    definition: {
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      properties: {
        title: { value: 'æ ‡é¢˜' },
        placement: { value: 'left' },
        popSize: { value: 'default' },
        buttonTitle: { value: 'æ‰“å¼€æŠ½å±‰' },
        showButton: { value: true },
        hiddenOnMouseOut: { value: false },
      },
      events: [],
      styles: {
        visibility: { value: '{{true}}' },
        disabledState: { value: '{{false}}' },
      },
    },
  },
  {
    // ç»„ä»¶å��ç§°
    name: 'Transfers',
    // ç»„ä»¶æ˜¾ç¤ºå��ç§°
    displayName: 'ç©¿æ¢­æ¡†',
    // ç»„ä»¶æ��è¿°
    description: 'å�Œæ �ç©¿æ¢­é€‰æ‹©æ¡†',
    // è°ƒç”¨çš„ç»„ä»¶å��
    component: 'Transfers',
    // é»˜è®¤ç»„ä»¶å¤§å°�
    defaultSize: {
      width: 15,
      height: 250,
    },
    // é»˜è®¤å­�ç»„ä»¶
    defaultChildren: [
    ],
    // å…¶ä»–é€‰é¡¹,è®¾ç½®æ˜¾ç¤ºåœ¨æ¡Œé�¢ç³»ç»Ÿæˆ–ç§»åŠ¨å¹³å�°
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    // ä¸»å±�æ€§
    properties: {
      // å±�æ€§å��,ä¼ å…¥ç»„ä»¶çš„å±�æ€§å��
      datas: {
        // è¾“å…¥å±�æ€§çš„è¾“å…¥æ¡†ç±»å�‹ï¼Œ/code/toggle/color/number/selectç­‰
        type: 'code',
        // æ˜¾ç¤ºå��ç§°
        displayName: 'æº�æ•°æ�®',
        validation: {
          schema: {
            // string/array/number
            type: 'array',
            // æŒ‡å®šå­�å…ƒç´ ç±»å�‹èŒƒå›´
            element: { type: 'union', schemas: [{ type: 'string' }, { type: 'object' }] }
          },
        },
      },
      datas2: {
        type: 'code',
        displayName: 'å·²é€‰æ‹©',
        validation: {
          schema: {
            type: 'array',
            element: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] }
          },
        },
      },
      titles: {
        type: 'code',
        displayName: 'æ ‡é¢˜',
        validation: {
          schema: {
            type: 'array',
            element: { type: 'union', schemas: [{ type: 'string' }] }
          },
        },
      },
      showSearch: {
        type: 'toggle',
        displayName: 'æ˜¾ç¤ºæ�œç´¢æ¡†',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      oneWay: {
        type: 'toggle',
        displayName: 'å�•å�‘æ¨¡å¼�',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      pagination: {
        type: 'toggle',
        displayName: 'å…�è®¸åˆ†é¡µ',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      pageSize: {
        type: 'number',
        displayName: 'åˆ†é¡µå¤§å°�',
        validation: {
          schema: {
            type: 'number',
          },
        },
      },
    },
    // äº‹ä»¶åˆ—è¡¨ /onClick/onCheck/onSearch/onChange/onSelect/onHover/onFocus/onBlur
    events: {
      onChange: { displayName: 'é€‰é¡¹å�˜åŒ–æ—¶' },
      onSelect: { displayName: 'ç‚¹å‡»é¡¹ç›®æ—¶' },
      onSearch: { displayName: 'æ�œç´¢æ–‡æœ¬æ”¹å�˜æ—¶' },
    },
    styles: {
      color: {
        type: 'color',
        displayName: 'èƒŒæ™¯é¢œè‰²',
        validation: {
          schema: { type: 'string' },
        },
      },
      colorbg: {
        type: 'color',
        displayName: 'å‰�æ™¯é¢œè‰²',
        validation: {
          schema: { type: 'string' },
        },
      },
      visibility: {
        type: 'toggle',
        displayName: 'Visibility',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      disabledState: {
        type: 'toggle',
        displayName: 'ç¦�ç”¨',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
    },
    // åŠ¨ä½œåˆ—è¡¨ï¼Œéœ€åœ¨ç»„ä»¶ä¸­æ³¨å†Œæ�¥å�—åŠ¨ä½œ
    actions: [
      {
        handle: 'setTargetKeys',
        displayName: 'è®¾ç½®å�³è¾¹çª—å�£é¡¹ç›®',
        // å�‚æ•°
        params: [
          {
            handle: 'keys',
            displayName: 'keyå€¼æ•°ç»„',
            defaultValue: '{{[]}}',
          },
        ],
      },
      {
        handle: 'setSourceSelectedKeys',
        displayName: 'å‹¾é€‰é€‰ä¸­é¡¹',
        // å�‚æ•°
        params: [
          {
            handle: 'keys',
            displayName: 'keyå€¼æ•°ç»„',
            defaultValue: '{{[]}}',
          },
        ],
      },
      // {
      //   handle: 'setTargetSelectedKeys',
      //   displayName: 'è®¾ç½®ç›®æ ‡çª—å�£é€‰ä¸­é¡¹',
      //   // å�‚æ•°
      //   params: [
      //     {
      //       handle: 'keys',
      //       displayName: 'keyå€¼æ•°ç»„',
      //       defaultValue: '{{[]}}',
      //     },
      //   ],
      // },
    ],
    // æš´éœ²çš„å€¼ï¼Œç”¨äº�å…¶ä»–äº¤äº’ï¼Œç»„ä»¶ä¸­å�¯ç”¨setExposedVariableè®¾ç½®å€¼
    exposedVariables: {
      targetKeys: [],
      direction: "",
      movedKeys: [],
      sourceSelectedKeys: [],
      targetSelectedKeys: [],
      searchText: [],
    },
    // å®šä¹‰æ–°å»ºç»„ä»¶æ—¶çš„é»˜è®¤å€¼
    definition: {
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      properties: {
        datas: {
          value: `{{[
{key:1,title:'å†…å®¹1'},
{key:2,title:'å†…å®¹2'},
{key:'ä¸‰',title:'å†…å®¹3'},
{key:4,title:'å†…å®¹4'},
{key:5,title:'å†…å®¹5'},
{key:6,title:'å†…å®¹6'},
{key:7,title:'å†…å®¹7'},
{key:8,title:'å†…å®¹8'},
{key:9,title:'å†…å®¹9'},
{key:10,title:'å†…å®¹10'},
]}}`,
        },
        datas2: {
          value: `{{[1,'ä¸‰',5]}}`,
        },
        titles: { value: "{{['æº�æ•°æ�®', 'ç›®æ ‡']}}" },
        oneWay: { value: false },
        showSearch: { value: true },
        pageSize: { value: 10 },
        pagination: { value: false },
      },
      events: [],
      styles: {
        color: { value: '#fff' },
        colorbg: { value: '#fff' },
        visibility: { value: '{{true}}' },
        disabledState: { value: '{{false}}' },
      },
    },
  },
  {
    // ç»„ä»¶å��ç§°
    name: 'TimePickers',
    // ç»„ä»¶æ˜¾ç¤ºå��ç§°
    displayName: 'æ—¶é—´é€‰æ‹©æ¡†',
    // ç»„ä»¶æ��è¿°
    description: 'è¾“å…¥æˆ–é€‰æ‹©æ—¶é—´çš„æ�§ä»¶',
    // è°ƒç”¨çš„ç»„ä»¶å��
    component: 'TimePickers',
    // é»˜è®¤ç»„ä»¶å¤§å°�
    defaultSize: {
      width: 5,
      height: 36,
    },
    // é»˜è®¤å­�ç»„ä»¶
    defaultChildren: [
    ],
    // å…¶ä»–é€‰é¡¹,è®¾ç½®æ˜¾ç¤ºåœ¨æ¡Œé�¢ç³»ç»Ÿæˆ–ç§»åŠ¨å¹³å�°
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    // ä¸»å±�æ€§
    properties: {
      defaultValue: {
        type: 'code',
        displayName: 'é»˜è®¤æ—¶é—´',
        validation: {
          schema: {
            type: 'string',
          },
        },
      },
      placeholder: {
        type: 'code',
        displayName: 'å� ä½�ç¬¦',
        validation: {
          schema: {
            type: 'string',
          },
        },
      },
      changeOnBlur: {
        type: 'toggle',
        displayName: 'é€‰æ‹©å��æ— éœ€ç¡®è®¤',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      timeStep: {
        type: 'code',
        displayName: 'æ—¶/åˆ†/ç§’æ­¥é•¿',
        validation: {
          schema: {
            type: 'array',
            element: { schemas: [{ type: 'number' }] }
          },
        },
      },
      timeFormat: {
        type: 'select',
        displayName: 'æ—¶é—´æ ¼å¼�',
        options: [
          { name: 'HH:mm:ss', value: 'HH:mm:ss' },
          { name: 'HH:mm:ss a', value: 'HH:mm:ss a' },
          { name: 'HH:mm', value: 'HH:mm' },
          { name: 'HH:mm a', value: 'HH:mm a' },
        ],
        validation: {
          schema: { type: 'string' },
        },
      },
      rangePicker: {
        type: 'toggle',
        displayName: 'æ—¶é—´èŒƒå›´é€‰æ‹©å™¨',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
    },
    // äº‹ä»¶åˆ—è¡¨ /onClick/onCheck/onSearch/onChange/onSelect/onHover/onFocus/onBlur
    events: {
      onChange: { displayName: 'æ”¹å�˜æ—¶' },
    },
    styles: {
      bordered: {
        type: 'toggle',
        displayName: 'æ— è¾¹æ¡†æ ·å¼�',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      visibility: {
        type: 'toggle',
        displayName: 'Visibility',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      disabledState: {
        type: 'toggle',
        displayName: 'ç¦�ç”¨',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
    },
    // åŠ¨ä½œåˆ—è¡¨ï¼Œéœ€åœ¨ç»„ä»¶ä¸­æ³¨å†Œæ�¥å�—åŠ¨ä½œ
    actions: [
    ],
    // æš´éœ²çš„å€¼ï¼Œç”¨äº�å…¶ä»–äº¤äº’ï¼Œç»„ä»¶ä¸­å�¯ç”¨setExposedVariableè®¾ç½®å€¼
    exposedVariables: {
      time: '',
      timeObject: null,
    },
    // å®šä¹‰æ–°å»ºç»„ä»¶æ—¶çš„é»˜è®¤å€¼
    definition: {
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      properties: {
        datas: {
          value: `{{[
{ title: 'ä¸»é¡µ'},
{ title: 'å±•ç¤º' },
{ title: 'è®¾ç½®'}
]}}`,
        },
        defaultValue: { value: "{{moment().format('HH:mm:ss')}}" },
        value3: { value: 100 },
        timeFormat: { value: 'HH:mm:ss' },
        timeStep: { value: '{{[1,1,10]}}' },
        changeOnBlur: { value: true },
        rangePicker: { value: false },
        placeholder: { value: 'è¯·é€‰æ‹©æ—¶é—´' },
      },
      events: [],
      styles: {
        bordered: { value: false },
        visibility: { value: '{{true}}' },
        disabledState: { value: '{{false}}' },
      },
    },
  },
  {
    // ç»„ä»¶å��ç§°
    name: 'Avatars',
    // ç»„ä»¶æ˜¾ç¤ºå��ç§°
    displayName: 'å¤´åƒ�',
    // ç»„ä»¶æ��è¿°
    description: 'å¤´åƒ�ç»„ä»¶',
    // è°ƒç”¨çš„ç»„ä»¶å��
    component: 'Avatars',
    // é»˜è®¤ç»„ä»¶å¤§å°�
    defaultSize: {
      width: 2,
      height: 60,
    },
    // é»˜è®¤å­�ç»„ä»¶
    defaultChildren: [
    ],
    // å…¶ä»–é€‰é¡¹,è®¾ç½®æ˜¾ç¤ºåœ¨æ¡Œé�¢ç³»ç»Ÿæˆ–ç§»åŠ¨å¹³å�°
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    // ä¸»å±�æ€§
    properties: {
      src: {
        type: 'code',
        tip: 'å±�æ€§ç”Ÿæ•ˆé¡ºåº�ï¼šå›¾ç‰‡>æ ‡é¢˜>å›¾æ ‡',
        displayName: 'å›¾ç‰‡',
        validation: {
          schema: {
            type: 'string',
          },
        },
      },
      title: {
        type: 'code',
        displayName: 'æ ‡é¢˜',
        validation: {
          schema: {
            type: 'string',
          },
        },
      },
      icon: {
        type: 'antIcon',
        displayName: 'å›¾æ ‡',
        validation: {
          schema: {
            type: 'string',
          },
        },
      },
      counts: {
        type: 'number',
        displayName: 'è§’æ ‡æ•°å­—',
        tip: 'ä»…å…�è®¸æ–¹å½¢çŠ¶æ€�æ˜¾ç¤º',
        validation: {
          schema: {
            type: 'number',
          },
        },
      },
      shape: {
        type: 'select',
        displayName: 'å¤´åƒ�å½¢çŠ¶',
        options: [
          { name: 'åœ†å½¢', value: 'circle' },
          { name: 'æ–¹å½¢', value: 'square' },
        ],
        validation: {
          schema: { type: 'string' },
        },
      },
    },
    // äº‹ä»¶åˆ—è¡¨ /onClick/onCheck/onSearch/onChange/onSelect/onHover/onFocus/onBlur
    events: {
      onClick: { displayName: 'ç‚¹å‡»äº‹ä»¶' },
    },
    styles: {
      color: {
        type: 'color',
        displayName: 'é¢œè‰²',
        validation: {
          schema: { type: 'string' },
        },
      },
      backgroundColor: {
        type: 'color',
        displayName: 'èƒŒæ™¯é¢œè‰²',
        validation: {
          schema: { type: 'string' },
        },
      },
      TransBackground: {
        type: 'toggle',
        displayName: 'é€�æ˜�èƒŒæ™¯',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      cursorPointer: {
        type: 'toggle',
        displayName: 'é¼ æ ‡ç»�è¿‡å�˜å°�æ‰‹',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      visibility: {
        type: 'toggle',
        displayName: 'Visibility',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      disabledState: {
        type: 'toggle',
        displayName: 'ç¦�ç”¨',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
    },
    // åŠ¨ä½œåˆ—è¡¨ï¼Œéœ€åœ¨ç»„ä»¶ä¸­æ³¨å†Œæ�¥å�—åŠ¨ä½œ
    actions: [
    ],
    // æš´éœ²çš„å€¼ï¼Œç”¨äº�å…¶ä»–äº¤äº’ï¼Œç»„ä»¶ä¸­å�¯ç”¨setExposedVariableè®¾ç½®å€¼
    exposedVariables: {
    },
    // å®šä¹‰æ–°å»ºç»„ä»¶æ—¶çš„é»˜è®¤å€¼
    definition: {
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      properties: {
        title: { value: 'å¼ ä¸‰' },
        icon: { value: 'UserOutlined' },
        src: { value: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg' },
        counts: { value: 1 },
        shape: { value: 'square' },
      },
      events: [],
      styles: {
        color: { value: '#fff' },
        backgroundColor: { value: '#bfbfbf' },
        TransBackground: { value: false },
        visibility: { value: '{{true}}' },
        disabledState: { value: '{{false}}' },
        cursorPointer: { value: true },
      },
    },
  },
  {
    // ç»„ä»¶å��ç§°
    name: 'Description',
    // ç»„ä»¶æ˜¾ç¤ºå��ç§°
    displayName: 'æ��è¿°åˆ—è¡¨',
    // ç»„ä»¶æ��è¿°
    description: 'ç”¨äº�å±•ç¤ºå¤šä¸ªå�ªè¯»å­—æ®µ',
    // è°ƒç”¨çš„ç»„ä»¶å��
    component: 'Description',
    // é»˜è®¤ç»„ä»¶å¤§å°�
    defaultSize: {
      width: 20,
      height: 230,
    },
    // é»˜è®¤å­�ç»„ä»¶
    defaultChildren: [
    ],
    // å…¶ä»–é€‰é¡¹,è®¾ç½®æ˜¾ç¤ºåœ¨æ¡Œé�¢ç³»ç»Ÿæˆ–ç§»åŠ¨å¹³å�°
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    // ä¸»å±�æ€§
    properties: {
      // å±�æ€§å��,ä¼ å…¥ç»„ä»¶çš„å±�æ€§å��
      datas: {
        // è¾“å…¥å±�æ€§çš„è¾“å…¥æ¡†ç±»å�‹ï¼Œ/code/toggle/color/number/selectç­‰
        type: 'code',
        // æ˜¾ç¤ºå��ç§°
        displayName: 'æ˜¾ç¤ºæ•°æ�®',
        validation: {
          schema: {
            // string/array/number
            type: 'array',
            // æŒ‡å®šå­�å…ƒç´ ç±»å�‹èŒƒå›´
            element: { schemas: [{ type: 'object' }] }
          },
        },
      },
      title: {
        type: 'code',
        displayName: 'æ ‡é¢˜',
        validation: {
          schema: {
            type: 'string',
          },
        },
      },
      showEditButton: {
        type: 'toggle',
        displayName: 'æ˜¾ç¤ºç¼–è¾‘æŒ‰é’®',
        tip: 'æŒ‰é’®ä»…æ–¹ä¾¿è°ƒç”¨ç¼–è¾‘äº‹ä»¶ï¼Œæ�§ä»¶ä¸�èƒ½ç¼–è¾‘',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
    },
    // äº‹ä»¶åˆ—è¡¨ /onClick/onCheck/onSearch/onChange/onSelect/onHover/onFocus/onBlur
    events: {
      onClick: { displayName: 'ç‚¹å‡»ç¼–è¾‘æŒ‰é’®æ—¶' },
    },
    styles: {
      bordered: {
        type: 'toggle',
        displayName: 'æ˜¾ç¤ºè¡¨æ ¼è¾¹æ¡†',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      rowHeight: {
        type: 'select',
        displayName: 'è¡Œé«˜åº¦',
        options: [
          { name: 'é«˜', value: 'default' },
          { name: 'ä¸­', value: 'middle' },
          { name: 'ä½�', value: 'small' },
        ],
        validation: {
          schema: { type: 'string' },
        },
      },
      layout: {
        type: 'select',
        displayName: 'å¸ƒå±€æ–¹å¼�',
        options: [
          { name: 'æ°´å¹³å¸ƒå±€', value: 'horizontal' },
          { name: 'å�‚ç›´å¸ƒå±€', value: 'vertical' },
        ],
        validation: {
          schema: { type: 'string' },
        },
      },
      column: {
        type: 'number',
        displayName: 'æ¯�è¡Œåˆ—æ•°',
        validation: {
          schema: { type: 'number' },
        },
      },
      parseEnter: {
        type: 'toggle',
        displayName: 'è§£æ��æ�¢è¡Œç¬¦',
        validation: {
          schema: { type: 'boolean' },
        },
      },
      visibility: {
        type: 'toggle',
        displayName: 'Visibility',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      disabledState: {
        type: 'toggle',
        displayName: 'ç¦�ç”¨',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
    },
    // åŠ¨ä½œåˆ—è¡¨ï¼Œéœ€åœ¨ç»„ä»¶ä¸­æ³¨å†Œæ�¥å�—åŠ¨ä½œ
    actions: [
    ],
    // æš´éœ²çš„å€¼ï¼Œç”¨äº�å…¶ä»–äº¤äº’ï¼Œç»„ä»¶ä¸­å�¯ç”¨setExposedVariableè®¾ç½®å€¼
    exposedVariables: {
    },
    // å®šä¹‰æ–°å»ºç»„ä»¶æ—¶çš„é»˜è®¤å€¼
    definition: {
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      properties: {
        datas: {
          value: `{{[
{ label:'å§“å��',value:'å¼ ä¸‰'},
{ label:'å¹´é¾„',value:'15'},
{ label:'å®¶åº­ä½�å�€',value:'æµ™æ±Ÿçœ�å�°å·�å¸‚',span: '3'},
{ label:'ç”µè¯�',value:'13888888888'},
{ label:'å…¶ä»–æƒ…å†µ',value:\`æ¼”ç¤º
æ�¢è¡Œ\`},
]}}`,
        },
        title: { value: 'æ��è¿°åˆ—è¡¨' },
        showEditButton: { value: true },
      },
      events: [],
      styles: {
        bordered: { value: '{{true}}' },
        layout: { value: 'horizontal' },
        rowHeight: { value: 'default' },
        column: { value: 2 },
        visibility: { value: '{{true}}' },
        disabledState: { value: '{{false}}' },
        parseEnter: { value: true },
      },
    },
  },
  {
    // ç»„ä»¶å��ç§°
    name: 'TreeSelects',
    // ç»„ä»¶æ˜¾ç¤ºå��ç§°
    displayName: 'æ ‘å½¢ä¸‹æ‹‰æ¡†',
    // ç»„ä»¶æ��è¿°
    description: 'æ ‘å�‹ä¸‹æ‹‰é€‰æ‹©æ�§ä»¶',
    // è°ƒç”¨çš„ç»„ä»¶å��
    component: 'TreeSelects',
    // é»˜è®¤ç»„ä»¶å¤§å°�
    defaultSize: {
      width: 15,
      height: 36,
    },
    // é»˜è®¤å­�ç»„ä»¶
    defaultChildren: [
    ],
    // å…¶ä»–é€‰é¡¹,è®¾ç½®æ˜¾ç¤ºåœ¨æ¡Œé�¢ç³»ç»Ÿæˆ–ç§»åŠ¨å¹³å�°
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    // ä¸»å±�æ€§
    properties: {
      // å±�æ€§å��,ä¼ å…¥ç»„ä»¶çš„å±�æ€§å��
      datas: {
        // è¾“å…¥å±�æ€§çš„è¾“å…¥æ¡†ç±»å�‹ï¼Œ/code/toggle/color/number/selectç­‰
        type: 'code',
        // æ˜¾ç¤ºå��ç§°
        displayName: 'æ ‘ç»“æ�„',
        validation: {
          schema: {
            // string/array/number
            type: 'array',
            // æŒ‡å®šå­�å…ƒç´ ç±»å�‹èŒƒå›´
            element: { type: 'union', schemas: [{ type: 'string' }, { type: 'object' }] }
          },
        },
      },
      defaultValue: {
        // è¾“å…¥å±�æ€§çš„è¾“å…¥æ¡†ç±»å�‹ï¼Œ/code/toggle/color/number/selectç­‰
        type: 'code',
        // æ˜¾ç¤ºå��ç§°
        displayName: 'é»˜è®¤é€‰ä¸­é¡¹',
        validation: {
          schema: {
            // string/array/number
            type: 'array',
            // æŒ‡å®šå­�å…ƒç´ ç±»å�‹èŒƒå›´
            element: { type: 'union', schemas: [{ type: 'string' }] }
          },
        },
      },
      placeholder: {
        type: 'code',
        displayName: 'å� ä½�ç¬¦',
        validation: {
          schema: {
            type: 'string',
          },
        },
      },
      multiple: {
        type: 'toggle',
        displayName: 'å…�è®¸å¤šé€‰',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      searchValue: {
        type: 'toggle',
        displayName: 'æ�œç´¢æ ‡é¢˜(é»˜è®¤æ�œç´¢å€¼)',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      searchFullPY: {
        type: 'toggle',
        displayName: 'æ�œç´¢å…¨æ‹¼éŸ³',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      searchFirstPY: {
        type: 'toggle',
        displayName: 'æ�œç´¢é¦–æ‹¼',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
    },
    // äº‹ä»¶åˆ—è¡¨ /onClick/onCheck/onSearch/onChange/onSelect/onHover/onFocus/onBlur
    events: {
      onChange: { displayName: 'é€‰é¡¹æ”¹å�˜æ—¶' },
      onSearch: { displayName: 'æ�œç´¢æ–‡æœ¬æ”¹å�˜æ—¶' },
    },
    styles: {
      treeLine: {
        type: 'toggle',
        displayName: 'æ˜¾ç¤ºç»“æ�„çº¿',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      bordered: {
        type: 'toggle',
        displayName: 'æ˜¾ç¤ºè¾¹æ¡†',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      maxHeight: {
        type: 'number',
        displayName: 'ä¸‹æ‹‰æ¡†æœ€å¤§é«˜åº¦',
        validation: {
          schema: {
            type: 'number',
          },
        },
      },
      visibility: {
        type: 'toggle',
        displayName: 'Visibility',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      disabledState: {
        type: 'toggle',
        displayName: 'ç¦�ç”¨',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
    },
    // åŠ¨ä½œåˆ—è¡¨ï¼Œéœ€åœ¨ç»„ä»¶ä¸­æ³¨å†Œæ�¥å�—åŠ¨ä½œ
    actions: [
      {
        handle: 'setValue',
        displayName: 'è®¾ç½®é€‰ä¸­å€¼',
        // å�‚æ•°
        params: [
          {
            handle: 'values',
            displayName: 'é€‰ä¸­å€¼æ•°ç»„',
            defaultValue: '{{[]}}',
          },
        ],
      },
    ],
    // æš´éœ²çš„å€¼ï¼Œç”¨äº�å…¶ä»–äº¤äº’ï¼Œç»„ä»¶ä¸­å�¯ç”¨setExposedVariableè®¾ç½®å€¼
    exposedVariables: {
      selected: ''
    },
    // å®šä¹‰æ–°å»ºç»„ä»¶æ—¶çš„é»˜è®¤å€¼
    definition: {
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      properties: {
        datas: {
          value: `{{[
{
  value: 'china',
  title: 'ä¸­å›½',
  children: [{
      value: 'zhejiang',
      title: 'æµ™æ±Ÿ',
      children: [
        {
          value: 'taizhou',
          title: 'å�°å·�',
        },
        {
          value: 'hangzhou',
          title: 'æ�­å·�',
        },
      ],
    },
    {
      value: 'jiangsu',
      title: 'æ±Ÿè‹�',
      children: [
        {
          value: 'suzhou',
          title: 'è‹�å·�',
        },
        {
          value: 'nanjing',
          title: 'å�—äº¬',
        },
      ],
    },
  ],
},]}}`,
        },
        defaultValue: { value: "{{['taizhou','suzhou']}}" },
        placeholder: { value: 'ç‚¹å‡»é€‰æ‹©' },
        multiple: { value: true },
        searchValue: { value: true },
        searchFullPY: { value: true },
        searchFirstPY: { value: true },
      },
      events: [],
      styles: {
        treeLine: { value: true },
        bordered: { value: true },
        maxHeight: { value: 400 },
        visibility: { value: '{{true}}' },
        disabledState: { value: '{{false}}' },
      },
    },
  },
  {
    // ç»„ä»¶å��ç§°
    name: 'Trees',
    // ç»„ä»¶æ˜¾ç¤ºå��ç§°
    displayName: 'æ ‘å½¢æ�§ä»¶',
    // ç»„ä»¶æ��è¿°
    description: 'æ ‘å½¢æ�§ä»¶',
    // è°ƒç”¨çš„ç»„ä»¶å��
    component: 'Trees',
    // é»˜è®¤ç»„ä»¶å¤§å°�
    defaultSize: {
      width: 15,
      height: 250,
    },
    // é»˜è®¤å­�ç»„ä»¶
    defaultChildren: [
    ],
    // å…¶ä»–é€‰é¡¹,è®¾ç½®æ˜¾ç¤ºåœ¨æ¡Œé�¢ç³»ç»Ÿæˆ–ç§»åŠ¨å¹³å�°
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    // ä¸»å±�æ€§
    properties: {
      treeData: {
        type: 'code',
        displayName: 'åˆ—è¡¨æ•°æ�®',
        validation: {
          schema: {
            // string/array/number
            type: 'array',
            element: { type: 'union', schemas: [{ type: 'object' }] }
          },
        },
      },
      showSearch: {
        type: 'toggle',
        displayName: 'æ˜¾ç¤ºæ�œç´¢æ¡†',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      placeholder: {
        type: 'code',
        displayName: 'æ�œç´¢æ¡†å� ä½�ç¬¦',
        validation: {
          schema: {
            type: 'string',
          },
        },
      },
      defaultExpandedKeys: {
        type: 'code',
        displayName: 'é»˜è®¤å±•å¼€çš„é”®',
        validation: {
          schema: {
            type: 'array',
            element: { schemas: [{ type: 'string', type: 'number' }] }
          },
        },
      },
      defaultSelectKey: {
        type: 'code',
        displayName: 'é»˜è®¤é€‰æ‹©çš„é”®',
        validation: {
          schema: {
            type: 'string',
          },
        },
      },
      checkable: {
        type: 'toggle',
        displayName: 'å…�è®¸å¤šé€‰',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      checkedKeys: {
        type: 'code',
        displayName: 'é»˜è®¤å‹¾é€‰åˆ—è¡¨ï¼ˆé¡»æ‰“å¼€å¤šé€‰ï¼‰',
        validation: {
          schema: {
            type: 'array',
          },
        },
      },
      searchAllPY: {
        type: 'toggle',
        displayName: 'æ”¯æŒ�æ�œç´¢å…¨æ‹¼',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      searchFirstPY: {
        type: 'toggle',
        displayName: 'æ”¯æŒ�æ�œç´¢é¦–æ‹¼',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
    },
    // äº‹ä»¶åˆ—è¡¨ /onClick/onCheck/onSearch/onChange/onSelect/onHover/onFocus/onBlur
    events: {
      onChange: { displayName: 'å‹¾é€‰æ—¶' },
      onSelect: { displayName: 'é€‰æ‹©æ—¶' },
    },
    styles: {
      visibility: {
        type: 'toggle',
        displayName: 'Visibility',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      disabledState: {
        type: 'toggle',
        displayName: 'ç¦�ç”¨',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      showLine: {
        type: 'toggle',
        displayName: 'æ˜¾ç¤ºç»“æ�„çº¿',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      showIcon: {
        type: 'toggle',
        displayName: 'æ˜¾ç¤ºå›¾æ ‡',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      blockNode: {
        type: 'toggle',
        displayName: 'æ•´è¡Œé€‰ä¸­',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
    },
    // åŠ¨ä½œåˆ—è¡¨ï¼Œéœ€åœ¨ç»„ä»¶ä¸­æ³¨å†Œæ�¥å�—åŠ¨ä½œ
    actions: [
      {
        handle: 'setSelectKey',
        displayName: 'è®¾ç½®é€‰ä¸­é”®',
        // å�‚æ•°
        params: [
          {
            handle: 'key',
            displayName: 'key',
            defaultValue: '',
          },
        ],
      },
      {
        handle: 'setCheckKeys',
        displayName: 'è®¾ç½®å‹¾é€‰çš„é”®åˆ—è¡¨',
        // å�‚æ•°
        params: [
          {
            handle: 'keys',
            displayName: 'keys',
            defaultValue: '{{[]}}',
          },
        ],
      },
      {
        handle: 'expandKeys',
        displayName: 'å±•å¼€æŒ‡å®šé”®',
        params: [
          {
            handle: 'keys',
            displayName: 'é”®åˆ—è¡¨',
            defaultValue: '{{[]}}',
          },
        ],
      },
      {
        handle: 'expandAll',
        displayName: 'å±•å¼€/æ”¶ç¼©å…¨éƒ¨',
        params: [
          {
            handle: 'status',
            displayName: 'å±•å¼€/æ”¶ç¼©',
            defaultValue: '{{true}}',
          },
        ],
      },
      {
        handle: 'scrollTo',
        displayName: 'æ»šåŠ¨åˆ°æŒ‡å®šé”®',
        params: [
          {
            handle: 'key',
            displayName: 'é”®',
            defaultValue: '',
          },
        ],
      },
    ],
    // æš´éœ²çš„å€¼ï¼Œç”¨äº�å…¶ä»–äº¤äº’ï¼Œç»„ä»¶ä¸­å�¯ç”¨setExposedVariableè®¾ç½®å€¼
    exposedVariables: {
      checkedKeys: [],
      selectedKey: [],
      checkedKeysPath: [],
      selectedKeyPath: [],
      expandedKeys: [],
    },
    // å®šä¹‰æ–°å»ºç»„ä»¶æ—¶çš„é»˜è®¤å€¼
    definition: {
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      properties: {
        showSearch: { value: true },
        defaultExpandedKeys: { value: "{{['china','zhejiang']}}" },
        treeData: {
          value: `{{[
          {
            key: 'china',
            title: 'ä¸­å›½',
            children: [{
              key: 'zhejiang',
                title: 'æµ™æ±Ÿ',
                children: [
                  {
                    key: 'taizhou',
                    title: 'å�°å·�',
                    icon: 'HeartFilled',
                  },
                  {
                    key: 'hangzhou',
                    title: 'æ— æ³•å‹¾é€‰',
                    disableCheckbox: true,
                  },
                  {
                    key: 'wufaxuanze',
                    title: 'æ— æ³•é€‰ä¸­',
                    disabled: true,
                  },
                ],
              },
              {
                key: 'jiangsu',
                title: 'æ±Ÿè‹�',
                children: [
                  {
                    key: 'suzhou',
                    title: 'è‹�å·�',
                  },
                  {
                    key: 'nanjing',
                    title: 'å�—äº¬',
                  },
                ],
              },
            ],
          },]}}` },
        placeholder: { value: 'æ�œç´¢' },
        defaultSelectKey: { value: 'shaoxing' },
        multiple: { value: true },
        checkable: { value: true },
        checkedKeys: { value: "{{['taizhou']}}" },
        expandedKeys: { value: "{{[]}}" },
        searchAllPY: { value: true },
        searchFirstPY: { value: true },
      },
      events: [],
      styles: {
        visibility: { value: '{{true}}' },
        disabledState: { value: '{{false}}' },
        showLine: { value: true },
        showIcon: { value: false },
        blockNode: { value: true },
      },
    },
  },
  {
    // ç»„ä»¶å��ç§°
    name: 'Breadcrumbs',
    // ç»„ä»¶æ˜¾ç¤ºå��ç§°
    displayName: 'é�¢åŒ…å±‘',
    // ç»„ä»¶æ��è¿°
    description: 'é�¢åŒ…å±‘ç»„ä»¶',
    // è°ƒç”¨çš„ç»„ä»¶å��
    component: 'Breadcrumbs',
    // é»˜è®¤ç»„ä»¶å¤§å°�
    defaultSize: {
      width: 10,
      height: 30,
    },
    // é»˜è®¤å­�ç»„ä»¶
    defaultChildren: [
    ],
    // å…¶ä»–é€‰é¡¹,è®¾ç½®æ˜¾ç¤ºåœ¨æ¡Œé�¢ç³»ç»Ÿæˆ–ç§»åŠ¨å¹³å�°
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    // ä¸»å±�æ€§
    properties: {
      // å±�æ€§å��,ä¼ å…¥ç»„ä»¶çš„å±�æ€§å��
      items: {
        // è¾“å…¥å±�æ€§çš„è¾“å…¥æ¡†ç±»å�‹ï¼Œ/code/toggle/color/number/select/json/alignButtons/antIconç­‰
        type: 'code',
        // æ˜¾ç¤ºå��ç§°
        displayName: 'åˆ—è¡¨æ•°æ�®',
        validation: {
          schema: {
            // string/array/number
            type: 'array',
            // æŒ‡å®šå­�å…ƒç´ ç±»å�‹èŒƒå›´
            element: { type: 'union', schemas: [{ type: 'string' }, { type: 'object' }] }
          },
        },
      },
      separator: {
        type: 'code',
        displayName: 'è‡ªå®šä¹‰é—´éš”',
        validation: {
          schema: {
            type: 'string',
          },
        },
      },
    },
    // äº‹ä»¶åˆ—è¡¨ /onClick/onCheck/onSearch/onChange/onSelect/onHover/onFocus/onBlur
    events: {
      onClick: { displayName: 'ç‚¹å‡»äº‹ä»¶' },
    },
    styles: {
      TransBackground: {
        type: 'toggle',
        displayName: 'é€�æ˜�èƒŒæ™¯',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      backgroundColor: {
        type: 'color',
        displayName: 'èƒŒæ™¯é¢œè‰²',
        validation: {
          schema: { type: 'string' },
        },
      },
      visibility: {
        type: 'toggle',
        displayName: 'Visibility',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      disabledState: {
        type: 'toggle',
        displayName: 'ç¦�ç”¨',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
    },
    // åŠ¨ä½œåˆ—è¡¨ï¼Œéœ€åœ¨ç»„ä»¶ä¸­æ³¨å†Œæ�¥å�—åŠ¨ä½œ
    actions: [

    ],
    // æš´éœ²çš„å€¼ï¼Œç”¨äº�å…¶ä»–äº¤äº’ï¼Œç»„ä»¶ä¸­å�¯ç”¨setExposedVariableè®¾ç½®å€¼
    exposedVariables: {
      clickedItem: '',
    },
    // å®šä¹‰æ–°å»ºç»„ä»¶æ—¶çš„é»˜è®¤å€¼
    definition: {
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      properties: {
        items: {
          value: `{{[
{ title: 'ä¸»é¡µ'},
{ title: 'å±•ç¤º' },
{ title: 'è®¾ç½®'}
]}}`,
        },
        separator: { value: '/' },
      },
      events: [],
      styles: {
        TransBackground: { value: true },
        backgroundColor: { value: '#fff' },
        visibility: { value: '{{true}}' },
        disabledState: { value: '{{false}}' },
      },
    },
  },
  {
    // ç»„ä»¶å��ç§°
    name: 'DropdownMenu',
    // ç»„ä»¶æ˜¾ç¤ºå��ç§°
    displayName: 'ä¸‹æ‹‰è�œå�•',
    // ç»„ä»¶æ��è¿°
    description: 'ä¸‹æ‹‰è�œå�•æŒ‰é’®',
    // è°ƒç”¨çš„ç»„ä»¶å��
    component: 'DropdownMenu',
    // é»˜è®¤ç»„ä»¶å¤§å°�
    defaultSize: {
      width: 6,
      height: 36,
    },
    // é»˜è®¤å­�ç»„ä»¶
    defaultChildren: [
    ],
    // å…¶ä»–é€‰é¡¹,è®¾ç½®æ˜¾ç¤ºåœ¨æ¡Œé�¢ç³»ç»Ÿæˆ–ç§»åŠ¨å¹³å�°
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    // ä¸»å±�æ€§
    properties: {
      buttonTitle: {
        type: 'code',
        displayName: 'æŒ‰é’®æ ‡é¢˜',
        validation: {
          schema: {
            type: 'string',
          },
        },
      },
      items: {
        type: 'code',
        displayName: 'è�œå�•æ•°æ�®',
        validation: {
          schema: {
            // string/array/number
            type: 'array',
            // æŒ‡å®šå­�å…ƒç´ ç±»å�‹èŒƒå›´
            element: { type: 'union', schemas: [{ type: 'object' }] }
          },
        },
      },
      buttonStatus: {
        type: 'toggle',
        displayName: 'æŒ‰é’®è½½å…¥çŠ¶æ€�',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      dropDownStatus: {
        type: 'toggle',
        displayName: 'ä¸‹æ‹‰è�œå�•è½½å…¥çŠ¶æ€�',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      dropDownIconSrc: {
        type: 'code',
        displayName: 'ä¸‹æ‹‰å›¾æ ‡è‡ªå®šä¹‰å›¾ç‰‡',
        validation: {
          schema: {
            type: 'string',
          },
        },
      },
      dropDownIconText: {
        type: 'code',
        displayName: 'ä¸‹æ‹‰å›¾æ ‡è‡ªå®šä¹‰æ–‡å­—',
        validation: {
          schema: {
            type: 'string',
          },
        },
      },
      dropDownIcon: {
        type: 'antIcon',
        displayName: 'è‡ªå®šä¹‰ä¸‹æ‹‰å›¾æ ‡',
        validation: {
          schema: {
            type: 'string',
          },
        },
      },
      shape: {
        type: 'select',
        displayName: 'å›¾æ ‡å½¢çŠ¶',
        options: [
          { name: 'åœ†å½¢', value: 'circle' },
          { name: 'æ–¹å½¢', value: 'square' },
        ],
        validation: {
          schema: { type: 'string' },
        },
      },
      trigger: {
        type: 'select',
        displayName: 'è�œå�•æ¿€æ´»æ–¹å¼�',
        options: [
          { name: 'é¼ æ ‡ç»�è¿‡', value: 'hover' },
          { name: 'é¼ æ ‡ç‚¹å‡»', value: 'click' },
        ],
        validation: {
          schema: { type: 'string' },
        },
      },
    },
    // äº‹ä»¶åˆ—è¡¨ /onClick/onCheck/onSearch/onChange/onSelect/onHover/onFocus/onBlur
    events: {
      onClick: { displayName: 'ç‚¹å‡»æŒ‰é’®æ—¶' },
      onCheck: { displayName: 'ç‚¹å‡»è�œå�•æ—¶' },
    },
    styles: {
      buttonType: {
        type: 'select',
        displayName: 'æŒ‰é’®æ ·å¼�',
        options: [
          { name: 'ä¸»æŒ‰é’®', value: 'primary' },
          { name: 'æ¬¡æŒ‰é’®', value: 'default' },
          { name: 'è™šçº¿æŒ‰é’®', value: 'dashed' },
          { name: 'æ–‡æœ¬æŒ‰é’®', value: 'text' },
          { name: 'é“¾æ�¥æŒ‰é’®', value: 'link' },
        ],
        validation: {
          schema: { type: 'string' },
        },
      },
      iconBHColor: {
        type: 'color',
        displayName: 'å›¾æ ‡èƒŒæ™¯é¢œè‰²',
        validation: {
          schema: {
            type: 'string',
          },
        },
      },
      iconColor: {
        type: 'color',
        displayName: 'å›¾æ ‡å¡«å……é¢œè‰²',
        validation: {
          schema: {
            type: 'string',
          },
        },
      },
      placement: {
        type: 'select',
        displayName: 'å¼¹å‡ºæ–¹å�‘',
        options: [
          { name: 'å·¦ä¸‹', value: 'bottomLeft' },
          { name: 'ä¸‹', value: 'bottom' },
          { name: 'å�³ä¸‹', value: 'bottomRight' },
          { name: 'å·¦ä¸Š', value: 'topLeft' },
          { name: 'ä¸Š', value: 'top' },
          { name: 'å�³ä¸Š', value: 'topRight' },
        ],
        validation: {
          schema: { type: 'string' },
        },
      },
      visibility: {
        type: 'toggle',
        displayName: 'Visibility',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      disabledState: {
        type: 'toggle',
        displayName: 'ç¦�ç”¨',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },

    },
    // åŠ¨ä½œåˆ—è¡¨ï¼Œéœ€åœ¨ç»„ä»¶ä¸­æ³¨å†Œæ�¥å�—åŠ¨ä½œ
    actions: [
    ],
    // æš´éœ²çš„å€¼ï¼Œç”¨äº�å…¶ä»–äº¤äº’ï¼Œç»„ä»¶ä¸­å�¯ç”¨setExposedVariableè®¾ç½®å€¼
    exposedVariables: {
      clickedMenu: ''
    },
    // å®šä¹‰æ–°å»ºç»„ä»¶æ—¶çš„é»˜è®¤å€¼
    definition: {
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      properties: {
        buttonTitle: { value: 'ä¸‹æ‹‰æŒ‰é’®' },
        items: {
          value: `{{[
{label:'è�œå�•1',key:'1',icon:'BankOutlined'},
{label:'è�œå�•2',key:'2'},
{label:'è�œå�•3',key:'3',danger: true,},
{label:'è�œå�•4',key:'4',disabled: true,},
]}}` },
        buttonStatus: { value: false },
        dropDownStatus: { value: false },
        dropDownIcon: { value: 'DownOutlined' },
        trigger: { value: 'click' },
        dropDownIconSrc: { value: '' },
        dropDownIconText: { value: '' },
        shape: { value: 'square' },
      },
      events: [],
      styles: {
        placement: { value: 'bottomRight' },
        visibility: { value: '{{true}}' },
        disabledState: { value: '{{false}}' },
        buttonType: { value: 'default' },
        iconBHColor: { value: '#bfbfbf' },
        iconColor: { value: '#fff' },
      },
    },
  },
  {
    // ç»„ä»¶å��ç§°
    name: 'Popconfirms',
    // ç»„ä»¶æ˜¾ç¤ºå��ç§°
    displayName: 'æ°”æ³¡ç¡®è®¤æ¡†',
    // ç»„ä»¶æ��è¿°
    description: 'æ°”æ³¡ç¡®è®¤æ¡†',
    // è°ƒç”¨çš„ç»„ä»¶å��
    component: 'Popconfirms',
    // é»˜è®¤ç»„ä»¶å¤§å°�
    defaultSize: {
      width: 3,
      height: 36,
    },
    // é»˜è®¤å­�ç»„ä»¶
    defaultChildren: [
    ],
    // å…¶ä»–é€‰é¡¹,è®¾ç½®æ˜¾ç¤ºåœ¨æ¡Œé�¢ç³»ç»Ÿæˆ–ç§»åŠ¨å¹³å�°
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    // ä¸»å±�æ€§
    properties: {
      icon: {
        type: 'antIcon',
        displayName: 'ç¡®è®¤æ¡†å›¾æ ‡',
        validation: {
          schema: {
            type: 'string',
          },
        },
      },
      title: {
        type: 'code',
        displayName: 'æ ‡é¢˜',
        validation: {
          schema: {
            type: 'string',
          },
        },
      },
      description: {
        type: 'code',
        displayName: 'æ��è¿°',
        validation: {
          schema: {
            type: 'string',
          },
        },
      },
      okText: {
        type: 'code',
        displayName: 'ç¡®è®¤æŒ‰é’®æ–‡æœ¬',
        validation: {
          schema: {
            type: 'string',
          },
        },
      },
      cancelText: {
        type: 'code',
        displayName: 'å�–æ¶ˆæŒ‰é’®æ–‡æœ¬',
        validation: {
          schema: {
            type: 'string',
          },
        },
      },
      ButtonText: {
        type: 'code',
        displayName: 'æŒ‰é’®æ–‡æœ¬',
        validation: {
          schema: {
            type: 'string',
          },
        },
      },
      condition: {
        type: 'toggle',
        displayName: 'å¼¹å‡ºæ°”æ³¡ç¡®è®¤æ¡†',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      closeWithFunc: {
        type: 'toggle',
        displayName: 'æ‰‹åŠ¨å…³é—­',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
    },
    // äº‹ä»¶åˆ—è¡¨ /onClick/onCheck/onSearch/onChange/onSelect/onHover/onFocus/onBlur
    events: {
      onClick: { displayName: 'ç¡®è®¤æ—¶' },
      onCheck: { displayName: 'å�–æ¶ˆæ—¶' },
    },
    styles: {
      iconColor: {
        type: 'color',
        displayName: 'å›¾æ ‡é¢œè‰²',
        validation: {
          schema: {
            type: 'string',
          },
        },
      },
      buttonDanger: {
        type: 'toggle',
        displayName: 'çº¢è‰²é«˜äº®æŒ‰é’®',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      arrow: {
        type: 'select',
        displayName: 'å¼¹å‡ºæ–¹ä½�',
        options: [
          { name: 'é¡¶éƒ¨å·¦è¾¹', value: 'topLeft' },
          { name: 'é¡¶éƒ¨å�³è¾¹', value: 'topRight' },
          { name: 'é¡¶éƒ¨', value: 'top' },
          { name: 'åº•éƒ¨å·¦è¾¹', value: 'bottomLeft' },
          { name: 'åº•éƒ¨å�³è¾¹', value: 'bottomRight' },
          { name: 'åº•éƒ¨', value: 'bottom' },
          { name: 'å·¦è¾¹é¡¶éƒ¨', value: 'leftTop' },
          { name: 'å·¦è¾¹åº•éƒ¨', value: 'leftBottom' },
          { name: 'å·¦è¾¹', value: 'left' },
          { name: 'å�³è¾¹é¡¶éƒ¨', value: 'rightTop' },
          { name: 'å�³è¾¹åº•éƒ¨', value: 'rightBottom' },
          { name: 'å�³è¾¹', value: 'right' },
        ],
        validation: {
          schema: { type: 'string' },
        },
      },
      visibility: {
        type: 'toggle',
        displayName: 'Visibility',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      disabledState: {
        type: 'toggle',
        displayName: 'ç¦�ç”¨',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
    },
    // åŠ¨ä½œåˆ—è¡¨ï¼Œéœ€åœ¨ç»„ä»¶ä¸­æ³¨å†Œæ�¥å�—åŠ¨ä½œ
    actions: [
      {
        handle: 'popConfirm',
        displayName: 'å¼¹å‡ºæˆ–å…³é—­å¼¹å‡ºæ¡†',
        // å�‚æ•°
        params: [
          {
            handle: 'status',
            displayName: 'å¼¹å‡ºçŠ¶æ€�',
            defaultValue: '{{true}}',
            type: 'toggle',
          },
        ],
      },
      {
        handle: 'close',
        displayName: 'æ‰‹åŠ¨å…³é—­',
        // å�‚æ•°
        params: [
          {
            handle: 'closePopWindow',
            displayName: 'å…³é—­å¼¹å‡ºæ¡†',
            defaultValue: '{{true}}',
            type: 'toggle',
          },
        ],
      },
    ],
    // æš´éœ²çš„å€¼ï¼Œç”¨äº�å…¶ä»–äº¤äº’ï¼Œç»„ä»¶ä¸­å�¯ç”¨setExposedVariableè®¾ç½®å€¼
    exposedVariables: {
    },
    // å®šä¹‰æ–°å»ºç»„ä»¶æ—¶çš„é»˜è®¤å€¼
    definition: {
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      properties: {
        title: { value: 'è­¦å‘Š' },
        description: { value: 'ç¡®è®¤è¦�è¿›è¡Œæ“�ä½œå�—ï¼Ÿ' },
        okText: { value: 'ç¡®è®¤' },
        cancelText: { value: 'å�–æ¶ˆ' },
        ButtonText: { value: 'åˆ é™¤' },
        condition: { value: true },
        icon: { value: 'AlertOutlined' },
        closeWithFunc: { value: false },
      },
      events: [],
      styles: {
        arrow: { value: 'top' },
        visibility: { value: '{{true}}' },
        disabledState: { value: '{{false}}' },
        iconColor: { value: 'red' },
        buttonDanger: { value: true },
      },
    },
  },
  {
    // ç»„ä»¶å��ç§°
    name: 'Images',
    // ç»„ä»¶æ˜¾ç¤ºå��ç§°
    displayName: 'ç›¸å†Œ',
    // ç»„ä»¶æ��è¿°
    description: 'ç›¸å†Œç»„ä»¶',
    // è°ƒç”¨çš„ç»„ä»¶å��
    component: 'Images',
    // é»˜è®¤ç»„ä»¶å¤§å°�
    defaultSize: {
      width: 9,
      height: 250,
    },
    // é»˜è®¤å­�ç»„ä»¶
    defaultChildren: [
    ],
    // å…¶ä»–é€‰é¡¹,è®¾ç½®æ˜¾ç¤ºåœ¨æ¡Œé�¢ç³»ç»Ÿæˆ–ç§»åŠ¨å¹³å�°
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    // ä¸»å±�æ€§
    properties: {
      src: {
        type: 'code',
        displayName: 'ç›¸å†Œåœ°å�€åˆ—è¡¨',
        validation: {
          schema: {
            type: 'array',
            element: { type: 'union', schemas: [{ type: 'string' }] }
          },
        },
      },
      preview: {
        type: 'code',
        displayName: 'é¢„è§ˆå›¾ç‰‡ç½‘å�€',
        validation: {
          schema: {
            type: 'string',
          },
        },
      },
      fallback: {
        type: 'code',
        displayName: 'åŠ è½½å¤±è´¥æ—¶æ˜¾ç¤ºå›¾ç‰‡',
        validation: {
          schema: {
            type: 'string',
          },
        },
      },
    },
    // äº‹ä»¶åˆ—è¡¨ /onClick/onCheck/onSearch/onChange/onSelect/onHover/onFocus/onBlur
    events: {
      onClick: { displayName: 'ç‚¹å‡»æ—¶' },
    },
    styles: {
      visibility: {
        type: 'toggle',
        displayName: 'Visibility',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      disabledState: {
        type: 'toggle',
        displayName: 'ç¦�ç”¨',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },

    },
    // åŠ¨ä½œåˆ—è¡¨ï¼Œéœ€åœ¨ç»„ä»¶ä¸­æ³¨å†Œæ�¥å�—åŠ¨ä½œ
    actions: [
    ],
    // æš´éœ²çš„å€¼ï¼Œç”¨äº�å…¶ä»–äº¤äº’ï¼Œç»„ä»¶ä¸­å�¯ç”¨setExposedVariableè®¾ç½®å€¼
    exposedVariables: {
    },
    // å®šä¹‰æ–°å»ºç»„ä»¶æ—¶çš„é»˜è®¤å€¼
    definition: {
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      properties: {
        src: {
          value: `{{[
'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
'https://gw.alipayobjects.com/zos/antfincdn/cV16ZqzMjW/photo-1473091540282-9b846e7965e3.webp',
'https://gw.alipayobjects.com/zos/antfincdn/x43I27A55%26/photo-1438109491414-7198515b166b.webp',
]}}` },
        fallback: { value: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMIAAADDCAYAAADQvc6UAAABRWlDQ1BJQ0MgUHJvZmlsZQAAKJFjYGASSSwoyGFhYGDIzSspCnJ3UoiIjFJgf8LAwSDCIMogwMCcmFxc4BgQ4ANUwgCjUcG3awyMIPqyLsis7PPOq3QdDFcvjV3jOD1boQVTPQrgSkktTgbSf4A4LbmgqISBgTEFyFYuLykAsTuAbJEioKOA7DkgdjqEvQHEToKwj4DVhAQ5A9k3gGyB5IxEoBmML4BsnSQk8XQkNtReEOBxcfXxUQg1Mjc0dyHgXNJBSWpFCYh2zi+oLMpMzyhRcASGUqqCZ16yno6CkYGRAQMDKMwhqj/fAIcloxgHQqxAjIHBEugw5sUIsSQpBobtQPdLciLEVJYzMPBHMDBsayhILEqEO4DxG0txmrERhM29nYGBddr//5/DGRjYNRkY/l7////39v///y4Dmn+LgeHANwDrkl1AuO+pmgAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAwqADAAQAAAABAAAAwwAAAAD9b/HnAAAHlklEQVR4Ae3dP3PTWBSGcbGzM6GCKqlIBRV0dHRJFarQ0eUT8LH4BnRU0NHR0UEFVdIlFRV7TzRksomPY8uykTk/zewQfKw/9znv4yvJynLv4uLiV2dBoDiBf4qP3/ARuCRABEFAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghgg0Aj8i0JO4OzsrPv69Wv+hi2qPHr0qNvf39+iI97soRIh4f3z58/u7du3SXX7Xt7Z2enevHmzfQe+oSN2apSAPj09TSrb+XKI/f379+08+A0cNRE2ANkupk+ACNPvkSPcAAEibACyXUyfABGm3yNHuAECRNgAZLuYPgEirKlHu7u7XdyytGwHAd8jjNyng4OD7vnz51dbPT8/7z58+NB9+/bt6jU/TI+AGWHEnrx48eJ/EsSmHzx40L18+fLyzxF3ZVMjEyDCiEDjMYZZS5wiPXnyZFbJaxMhQIQRGzHvWR7XCyOCXsOmiDAi1HmPMMQjDpbpEiDCiL358eNHurW/5SnWdIBbXiDCiA38/Pnzrce2YyZ4//59F3ePLNMl4PbpiL2J0L979+7yDtHDhw8vtzzvdGnEXdvUigSIsCLAWavHp/+qM0BcXMd/q25n1vF57TYBp0a3mUzilePj4+7k5KSLb6gt6ydAhPUzXnoPR0dHl79WGTNCfBnn1uvSCJdegQhLI1vvCk+fPu2ePXt2tZOYEV6/fn31dz+shwAR1sP1cqvLntbEN9MxA9xcYjsxS1jWR4AIa2Ibzx0tc44fYX/16lV6NDFLXH+YL32jwiACRBiEbf5KcXoTIsQSpzXx4N28Ja4BQoK7rgXiydbHjx/P25TaQAJEGAguWy0+2Q8PD6/Ki4R8EVl+bzBOnZY95fq9rj9zAkTI2SxdidBHqG9+skdw43borCXO/ZcJdraPWdv22uIEiLA4q7nvvCug8WTqzQveOH26fodo7g6uFe/a17W3+nFBAkRYENRdb1vkkz1CH9cPsVy/jrhr27PqMYvENYNlHAIesRiBYwRy0V+8iXP8+/fvX11Mr7L7ECueb/r48eMqm7FuI2BGWDEG8cm+7G3NEOfmdcTQw4h9/55lhm7DekRYKQPZF2ArbXTAyu4kDYB2YxUzwg0gi/41ztHnfQG26HbGel/crVrm7tNY+/1btkOEAZ2M05r4FB7r9GbAIdxaZYrHdOsgJ/wCEQY0J74TmOKnbxxT9n3FgGGWWsVdowHtjt9Nnvf7yQM2aZU/TIAIAxrw6dOnAWtZZcoEnBpNuTuObWMEiLAx1HY0ZQJEmHJ3HNvGCBBhY6jtaMoEiJB0Z29vL6ls58vxPcO8/zfrdo5qvKO+d3Fx8Wu8zf1dW4p/cPzLly/dtv9Ts/EbcvGAHhHyfBIhZ6NSiIBTo0LNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiEC/wGgKKC4YMA4TAAAAABJRU5ErkJggg==' },
        preview: { value: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?x-oss-process=image/blur,r_50,s_50/quality,q_1/resize,m_mfit,h_200,w_200' },
      },
      events: [],
      styles: {
        visibility: { value: '{{true}}' },
        disabledState: { value: '{{false}}' },
      },
    },
  },
  {
    // ç»„ä»¶å��ç§°
    name: 'DatePickerPlus',
    // ç»„ä»¶æ˜¾ç¤ºå��ç§°
    displayName: 'æ—¥æœŸé€‰æ‹©å™¨2',
    // ç»„ä»¶æ��è¿°
    description: 'å¤šç±»å�‹æ—¥æœŸé€‰æ‹©å™¨',
    // è°ƒç”¨çš„ç»„ä»¶å��
    component: 'DatePickerPlus',
    // é»˜è®¤ç»„ä»¶å¤§å°�
    defaultSize: {
      width: 15,
      height: 32,
    },
    // é»˜è®¤å­�ç»„ä»¶
    defaultChildren: [
    ],
    // å…¶ä»–é€‰é¡¹,è®¾ç½®æ˜¾ç¤ºåœ¨æ¡Œé�¢ç³»ç»Ÿæˆ–ç§»åŠ¨å¹³å�°
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    // ä¸»å±�æ€§
    properties: {
      showRangePicker: {
        type: 'toggle',
        displayName: 'é€‰æ‹©æ—¥æœŸèŒƒå›´',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      pickerType: {
        type: 'select',
        displayName: 'æ—¥æœŸç±»å�‹',
        options: [
          { name: 'æ—¶åˆ†ç§’', value: 'time' },
          { name: 'æ—¥æœŸ', value: 'date' },
          { name: 'å‘¨', value: 'week' },
          { name: 'æœˆ', value: 'month' },
          { name: 'å­£', value: 'quarter' },
          { name: 'å¹´', value: 'year' },
        ],
        validation: {
          schema: { type: 'string' },
        },
      },
      showTime: {
        type: 'toggle',
        displayName: 'æ—¥æœŸçŠ¶æ€�æ˜¾ç¤ºæ—¶é—´',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      showTimeFormat: {
        type: 'code',
        displayName: 'æ—¶é—´æ ¼å¼�',
        validation: {
          schema: {
            type: 'string',
          },
        },
      },
      defaultValue: {
        type: 'code',
        displayName: 'èµ·å§‹é»˜è®¤å€¼',
        validation: {
          schema: {
            type: 'string',
          },
        },
      },
      endDefaultValue: {
        type: 'code',
        displayName: 'ç»“æ�Ÿé»˜è®¤å€¼',
        validation: {
          schema: {
            type: 'string',
          },
        },
      },
      format: {
        type: 'code',
        displayName: 'æ ¼å¼�åˆ—è¡¨',
        validation: {
          schema: {
            type: 'object',
            element: { type: 'union', schemas: [{ type: 'object' }] }
          },
        },
      },
    },
    // äº‹ä»¶åˆ—è¡¨ /onClick/onCheck/onSearch/onChange/onSelect/onHover/onFocus/onBlur
    events: {
      onChange: { displayName: 'ä¿®æ”¹æ—¶' },
    },
    styles: {
      visibility: {
        type: 'toggle',
        displayName: 'Visibility',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      disabledState: {
        type: 'toggle',
        displayName: 'ç¦�ç”¨',
        tip: 'å�¯ä½¿ç”¨æ•°ç»„åˆ†åˆ«æ�§åˆ¶å‰�å��æ—¥æœŸç¦�ç”¨',
        validation: {
          schema: [{
            type: 'boolean',
          },
          { type: 'array' }],
        },
      },
      bordered: {
        type: 'toggle',
        displayName: 'æœ‰è¾¹æ¡†',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
    },
    // åŠ¨ä½œåˆ—è¡¨ï¼Œéœ€åœ¨ç»„ä»¶ä¸­æ³¨å†Œæ�¥å�—åŠ¨ä½œ
    actions: [
    ],
    // æš´éœ²çš„å€¼ï¼Œç”¨äº�å…¶ä»–äº¤äº’ï¼Œç»„ä»¶ä¸­å�¯ç”¨setExposedVariableè®¾ç½®å€¼
    exposedVariables: {
      dateString: '',
      date: null,
    },
    // å®šä¹‰æ–°å»ºç»„ä»¶æ—¶çš„é»˜è®¤å€¼
    definition: {
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      properties: {
        pickerType: { value: 'date' },
        showRangePicker: { value: false },
        showTime: { value: false },
        showTimeFormat: { value: ' HH:mm:ss' },
        endDefaultValue: { value: "{{moment().format('yyyy/MM/DD')}}" },
        defaultValue: { value: "{{moment().format('yyyy/MM/DD')}}" },
        format: {
          value: `{{{
time:'HH:mm:ss',
date:'YYYYå¹´MæœˆDæ—¥',
week:'YYYYå¹´wå‘¨',
month:'YYYYå¹´Mæœˆ',
quarter:'YYYYå¹´Qå­£åº¦',
year:'YYYYå¹´',
}}}` },
      },
      events: [],
      styles: {
        visibility: { value: '{{true}}' },
        disabledState: { value: '{{false}}' },
        bordered: { value: true },
      },
    },
  },
  {
    // ç»„ä»¶å��ç§°
    name: 'Comment',
    // ç»„ä»¶æ˜¾ç¤ºå��ç§°
    displayName: 'è¯„è®º',
    // ç»„ä»¶æ��è¿°
    description: 'ç”¨äº�æ˜¾ç¤ºè¯„è®ºçš„ç»„ä»¶',
    // è°ƒç”¨çš„ç»„ä»¶å��
    component: 'Comment',
    // é»˜è®¤ç»„ä»¶å¤§å°�
    defaultSize: {
      width: 15,
      height: 400,
    },
    // é»˜è®¤å­�ç»„ä»¶
    defaultChildren: [
    ],
    // å…¶ä»–é€‰é¡¹,è®¾ç½®æ˜¾ç¤ºåœ¨æ¡Œé�¢ç³»ç»Ÿæˆ–ç§»åŠ¨å¹³å�°
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    // ä¸»å±�æ€§
    properties: {
      // å±�æ€§å��,ä¼ å…¥ç»„ä»¶çš„å±�æ€§å��
      datas: {
        // è¾“å…¥å±�æ€§çš„è¾“å…¥æ¡†ç±»å�‹ï¼Œ/code/toggle/color/number/select/json/alignButtons/antIconç­‰
        type: 'code',
        // æ˜¾ç¤ºå��ç§°
        displayName: 'è¯„è®ºåˆ—è¡¨',
        validation: {
          schema: {
            // string/array/number
            type: 'array',
            // æŒ‡å®šå­�å…ƒç´ ç±»å�‹èŒƒå›´
            element: { type: 'union', schemas: [{ type: 'object' }] }
          },
        },
      },
      label: {
        type: 'code',
        displayName: 'æ ‡é¢˜',
        validation: {
          schema: {
            type: 'string',
          },
        },
      },
      placeholder: {
        type: 'code',
        displayName: 'å� ä½�ç¬¦',
        validation: {
          schema: {
            type: 'string',
          },
        },
      },
      submitButton: {
        type: 'code',
        displayName: 'å�‘é€�æ ‡é¢˜',
        validation: {
          schema: {
            type: 'string',
          },
        },
      },
      MentionList: {
        type: 'code',
        // æ˜¾ç¤ºå��ç§°
        displayName: 'æ��å�Šåˆ—è¡¨',
        validation: {
          schema: {
            type: 'object',
          },
        },
      },
      userInfo: {
        type: 'code',
        // æ˜¾ç¤ºå��ç§°
        displayName: 'ç”¨æˆ·ä¿¡æ�¯',
        validation: {
          schema: {
            type: 'object',
          },
        },
      },
      sendComment: {
        type: 'toggle',
        displayName: 'å�‘é€�è¯„è®º',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
    },
    // äº‹ä»¶åˆ—è¡¨ /onClick/onCheck/onSearch/onChange/onSelect/onHover/onFocus/onBlur
    events: {
      onClick: { displayName: 'ç‚¹å‡»è¯„è®ºæ—¶' },
      onCheck: { displayName: 'æ��äº¤æ—¶' },
      onChange: { displayName: 'æ–‡æœ¬æ”¹å�˜æ—¶' },
      onSelect: { displayName: 'æ�œç´¢æ��å�Šåˆ—è¡¨æ—¶' },
      onFocus: { displayName: 'é€‰æ‹©æ��å�Šåˆ—è¡¨æ—¶' },

    },
    styles: {
      colorList: {
        type: 'code',
        displayName: 'å¤´åƒ�é¢œè‰²åˆ—è¡¨',
        validation: {
          schema: { type: 'array' },
        },
      },
      visibility: {
        type: 'toggle',
        displayName: 'Visibility',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      disabledState: {
        type: 'toggle',
        displayName: 'ç¦�ç”¨',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      bhColor: {
        type: 'color',
        displayName: 'èƒŒæ™¯é¢œè‰²',
        validation: {
          schema: {
            type: 'string',
          },
        },
      },
      borderRadius: {
        type: 'number',
        displayName: 'è¾¹æ¡†åœ†è§’å�Šå¾„',
        validation: {
          schema: {
            type: 'number',
          },
        },
      },
    },
    // åŠ¨ä½œåˆ—è¡¨ï¼Œéœ€åœ¨ç»„ä»¶ä¸­æ³¨å†Œæ�¥å�—åŠ¨ä½œ
    actions: [
    ],
    // æš´éœ²çš„å€¼ï¼Œç”¨äº�å…¶ä»–äº¤äº’ï¼Œç»„ä»¶ä¸­å�¯ç”¨setExposedVariableè®¾ç½®å€¼
    exposedVariables: {
      commentList: [],
      comment: '',
      ClickedPosition: '',
      ClickedItem: '',
      submitComment: {},
      mentionName: '',
    },
    // å®šä¹‰æ–°å»ºç»„ä»¶æ—¶çš„é»˜è®¤å€¼
    definition: {
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      properties: {
        datas: {
          value: `{{[
{ user:{name: 'å¼ ä¸‰',avatar:'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png'},value:'è¿™ä¸ªç»„ä»¶å¹²å˜›ç”¨çš„å‘¢ï¼Ÿ',createdAt:'2023-06-15T08:40:41.658Z'},
{ user:{name: 'mou'},value:'è¿™ä¸ªç»„ä»¶å�¯ä»¥è®©ä½ å�‘è¡¨è¯„è®º',createdAt:'2023-06-16T08:43:42.658Z'},
{ user:{name: 'ç�‹äº”',displayName:'ä¼�'},value:'é‚£æˆ‘è¯•è¯•è¿™ä¸ªç»„ä»¶',createdAt:'2023-06-17T08:49:01.658Z'},
{ user:{name: 'mou'},value:'ä½ ä»¬åœ¨è¾“å…¥æ¡†ä¸­å�¯ä»¥è¾“å…¥æ–‡å­—ï¼Œä½¿ç”¨@å�¯ä»¥æ��å�Šè�Šå¤©ä¸­çš„äººã€‚',createdAt:'2023-06-18T08:50:11.658Z'},
]}}`,
        },
        label: { value: 'è¯„è®ºå…±%dæ�¡' },
        placeholder: { value: 'Shift+Enter è¾“å…¥è¯„è®º' },
        submitButton: { value: 'å�‘è¡¨' },
        MentionList: {
          value: `{{{
'@':['èµµå…­','å­™ä¸ƒ','å‘¨å…«'],
}}}
        `},
        userInfo: {
          value: `{{{
name: globals.currentUser.firstName,
email: globals.currentUser.email
}}}`},
        sendComment:{ value: true},
      },
      events: [],
      styles: {
        colorList: {
          value: `{{[
'#f56a00',
'#7265e6',
'#ffbf00',
'#00a2ae',
'#c23531',
'#2f4554',
'#61a0a8',
'#d48265',
'#91c7ae',
'#749f83',
'#ca8622',
'#bda29a',
'#6e7074',
'#546570',
'#c4ccd3'
]}}` },
        visibility: { value: '{{true}}' },
        disabledState: { value: '{{false}}' },
        bhColor: { value: '#ffffff22' },
        borderRadius: { value: 0 },
      },
    },
  },
  {
    // ç»„ä»¶å��ç§°
    name: 'Framework',
    // ç»„ä»¶æ˜¾ç¤ºå��ç§°
    displayName: 'æ¡†æ�¶æ¨¡æ�¿',
    // ç»„ä»¶æ��è¿°
    description: 'æ¡†æ�¶æ¨¡æ�¿',
    // è°ƒç”¨çš„ç»„ä»¶å��
    component: 'Framework',
    // é»˜è®¤ç»„ä»¶å¤§å°�
    defaultSize: {
      width: 42,
      height: 1000,
    },
    // é»˜è®¤å­�ç»„ä»¶
    defaultChildren: [
    ],
    // å…¶ä»–é€‰é¡¹,è®¾ç½®æ˜¾ç¤ºåœ¨æ¡Œé�¢ç³»ç»Ÿæˆ–ç§»åŠ¨å¹³å�°
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    // ä¸»å±�æ€§
    properties: {
      menuData: {
        type: 'code',
        displayName: 'è�œå�•æ•°æ�®',
        validation: {
          schema: {
            type: 'array',
            element: { type: 'union', schemas: [{ type: 'object' }] }
          },
        },
      },
      defaultSelectedKeys: {
        type: 'code',
        displayName: 'é»˜è®¤é€‰æ‹©çš„è�œå�•',
        validation: {
          schema: {
            type: 'string',
          },
        },
      },
      onlyOpenOne: {
        type: 'toggle',
        displayName: 'ä»…å±•å¼€ä¸€ä¸ªå­�è�œå�•',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      logo: {
        type: 'antIcon',
        displayName: 'logo',
        validation: {
          schema: {
            type: 'string',
          },
        },
      },
      logoSRC: {
        type: 'code',
        displayName: 'logoå›¾ç‰‡åœ°å�€',
        validation: {
          schema: {
            type: 'string',
          },
        },
      },
      title: {
        type: 'code',
        displayName: 'title',
        validation: {
          schema: {
            type: 'string',
          },
        },
      },
    },
    // äº‹ä»¶åˆ—è¡¨ /onClick/onCheck/onSearch/onChange/onSelect/onHover/onFocus/onBlur
    events: {
      onClick: { displayName: 'ç‚¹å‡»è�œå�•æ—¶' },
      onCheck: { displayName: 'ç‚¹å‡»logoæ—¶' },
    },
    styles: {
      titleFontSize: {
        type: 'number',
        displayName: 'æ ‡é¢˜å­—ä½“å¤§å°�',
        validation: {
          schema: { type: 'number' },
        },
      },
      visibility: {
        type: 'toggle',
        displayName: 'Visibility',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      disabledState: {
        type: 'toggle',
        displayName: 'ç¦�ç”¨',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      bhColor: {
        type: 'color',
        displayName: 'èƒŒæ™¯é¢œè‰²',
        validation: {
          schema: {
            type: 'string',
          },
        },
      },
      headerBHColor: {
        type: 'color',
        displayName: 'çœ‰é¡µèƒŒæ™¯é¢œè‰²',
        validation: {
          schema: {
            type: 'string',
          },
        },
      },
    },
    // åŠ¨ä½œåˆ—è¡¨ï¼Œéœ€åœ¨ç»„ä»¶ä¸­æ³¨å†Œæ�¥å�—åŠ¨ä½œ
    actions: [
      {
        handle: 'clickItem',
        displayName: 'ç‚¹å‡»è�œå�•',
        // å�‚æ•°
        params: [
          {
            handle: 'key',
            displayName: 'key',
            defaultValue: '',
          },
        ],
      },
    ],
    // æš´éœ²çš„å€¼ï¼Œç”¨äº�å…¶ä»–äº¤äº’ï¼Œç»„ä»¶ä¸­å�¯ç”¨setExposedVariableè®¾ç½®å€¼
    exposedVariables: {
      currentKey: '',
      currentPath: '',
      collapsed: false,
    },
    // å®šä¹‰æ–°å»ºç»„ä»¶æ—¶çš„é»˜è®¤å€¼
    definition: {
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      properties: {
        menuData: {
          value: `{{[
        {
            label: 'é¦–é¡µ',
            key: 'main',
            icon: 'MailOutlined',
        },
        {
            label: 'æˆ‘è¢«éš�è—�äº†',
            key: 'show',
            icon: 'AppstoreOutlined',
            hidden:true,
        },
        {
            label: 'äºŒçº§è�œå�•1',
            key: 'submenu',
            icon: 'AppstoreOutlined',
            children: [
                {
                    type: 'group',
                    label: 'ç»„1',
                    children: [
                        {
                            label: 'é€‰é¡¹1',
                            key: 'setting1',
                            icon: 'AppstoreOutlined',
                        },
                        {
                            label: 'é€‰é¡¹2',
                            key: 'setting2',
                        },
                    ],
                },
                {
                    type: 'group',
                    label: 'ç»„äºŒ',
                    children: [
                        {
                            label: 'é€‰é¡¹3',
                            key: 'setting3',
                        },
                        {
                            label: 'é€‰é¡¹4',
                            key: 'setting4',
                        },
                    ],
                },
            ],
        },
        {
            label: 'äºŒçº§è�œå�•2',
            key: 'submenu2',
            icon: 'AppstoreOutlined',
            children: [
                {
                    type: 'group',
                    label: 'ç»„3',
                    children: [
                        {
                            label: 'é€‰é¡¹5',
                            key: 'setting5',
                            icon: 'AppstoreOutlined',
                        },
                        {
                            label: 'é€‰é¡¹6',
                            key: 'setting6',
                        },
                    ],
                }
            ]
        },
        {
            label: 'å›¾æ ‡',
            key: 'icon',
            icon: 'AppstoreOutlined',
        },
      ]}}` },
        // defaultOpenKeys: { value: "{{['submenu']}}" },
        // openKeys: { value: '' },
        defaultSelectedKeys: { value: "setting3" },
        onlyOpenOne: { value: true },
        logo: { value: 'LayoutTwoTone' },
        title: { value: 'ç³»ç»Ÿæ¡†æ�¶' },
        logoSRC: { value: '' },
      },
      events: [],
      styles: {
        titleFontSize: { value: 18 },
        visibility: { value: '{{true}}' },
        disabledState: { value: '{{false}}' },
        bhColor: { value: '#ffffffff' },
        headerBHColor: { value: '#ffffffff' },
      },
    },
  },
  {
    // ç»„ä»¶å��ç§°
    name: 'TimeLine2',
    // ç»„ä»¶æ˜¾ç¤ºå��ç§°
    displayName: 'æ—¶é—´çº¿2',
    // ç»„ä»¶æ��è¿°
    description: 'åŸºäº�AntDçš„æ—¶é—´çº¿ç»„ä»¶',
    // è°ƒç”¨çš„ç»„ä»¶å��
    component: 'TimeLine2',
    // é»˜è®¤ç»„ä»¶å¤§å°�
    defaultSize: {
      width: 20,
      height: 300,
    },
    // é»˜è®¤å­�ç»„ä»¶
    defaultChildren: [
    ],
    // å…¶ä»–é€‰é¡¹,è®¾ç½®æ˜¾ç¤ºåœ¨æ¡Œé�¢ç³»ç»Ÿæˆ–ç§»åŠ¨å¹³å�°
    others: {
      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
    },
    // ä¸»å±�æ€§
    properties: {
      // å±�æ€§å��,ä¼ å…¥ç»„ä»¶çš„å±�æ€§å��
      items: {
        // è¾“å…¥å±�æ€§çš„è¾“å…¥æ¡†ç±»å�‹ï¼Œ/code/toggle/color/number/select/json/alignButtons/antIconç­‰
        type: 'code',
        // æ˜¾ç¤ºå��ç§°
        displayName: 'æ—¶é—´è½´æ•°æ�®',
        validation: {
          schema: {
            // string/array/number
            type: 'array',
            // æŒ‡å®šå­�å…ƒç´ ç±»å�‹èŒƒå›´
            element: { type: 'union', schemas: [{ type: 'object' }] }
          },
        },
      },
      mode: {
        type: 'select',
        displayName: 'æ—¶é—´è½´ä½�ç½®',
        options: [
          { name: 'å·¦', value: 'left' },
          { name: 'å�³', value: 'right' },
          { name: 'äº¤æ›¿', value: 'alternate' },
        ],
        validation: {
          schema: {
            type: 'string',
          },
        },
      },
      reverse: {
        type: 'toggle',
        displayName: 'ç¿»è½¬',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      pending: {
        type: 'code',
        displayName: 'æœªå®Œæˆ�èŠ‚ç‚¹',
        validation: {
          schema: {
            type: 'string',
          },
        },
      },
    },
    // äº‹ä»¶åˆ—è¡¨ /onClick/onCheck/onSearch/onChange/onSelect/onHover/onFocus/onBlur
    events: {
      onClick: { displayName: 'ç‚¹å‡»äº‹ä»¶' },
    },
    styles: {
      color: {
        type: 'color',
        displayName: 'ç»„ä»¶è¾¹æ¡†é¢œè‰²',
        validation: {
          schema: { type: 'string' },
        },
      },
      bgcolor: {
        type: 'color',
        displayName: 'ç»„ä»¶èƒŒæ™¯é¢œè‰²',
        validation: {
          schema: { type: 'string' },
        },
      },
      titleColor: {
        type: 'color',
        displayName: 'æ—¶é—´çº¿æ ‡é¢˜é¢œè‰²',
        validation: {
          schema: { type: 'string' },
        },
      },
      subTitleColor: {
        type: 'color',
        displayName: 'æ—¶é—´çº¿å­�æ ‡é¢˜é¢œè‰²',
        validation: {
          schema: { type: 'string' },
        },
      },
      borderRadius: {
        type: 'number',
        displayName: 'è¾¹æ¡†åœ†è§’å�Šå¾„',
        validation: {
          schema: {
            type: 'number',
          },
        },
      },
      visibility: {
        type: 'toggle',
        displayName: 'Visibility',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
      disabledState: {
        type: 'toggle',
        displayName: 'ç¦�ç”¨',
        validation: {
          schema: {
            type: 'boolean',
          },
        },
      },
    },
    // åŠ¨ä½œåˆ—è¡¨ï¼Œéœ€åœ¨ç»„ä»¶ä¸­æ³¨å†Œæ�¥å�—åŠ¨ä½œ
    actions: [
    ],
    // æš´éœ²çš„å€¼ï¼Œç”¨äº�å…¶ä»–äº¤äº’ï¼Œç»„ä»¶ä¸­å�¯ç”¨setExposedVariableè®¾ç½®å€¼
    exposedVariables: {
      clickedItem: {},
      clickedIndex: 0,
    },
    // å®šä¹‰æ–°å»ºç»„ä»¶æ—¶çš„é»˜è®¤å€¼
    definition: {
      others: {
        showOnDesktop: { value: '{{true}}' },
        showOnMobile: { value: '{{false}}' },
      },
      properties: {
        items: {
          value: `{{[
{
    title: 'æ–°å¢�ç»„ä»¶äºŒç»´ç �ç»„ä»¶',
    subTitle: 'ç”¨äº�ç”Ÿæˆ�äºŒç»´ç �çš„ç»„ä»¶',
    color: 'green',
    label: '2023-3-20',
},
{
    title: 'åˆ›å»ºäº†tooljet_cnä»“åº“',
    subTitle: 'ä¸Šä¼ åˆ°github',
    color: 'green',
    label: '2023-04-18',
},
{
    title: 'ä¸�æ–­æ–°å¢�ç»„ä»¶',
    subTitle: 'å‰�å��æ–°å¢�äº†æ•°å��ä¸ªç»„ä»¶',
    fontSize: 20,
    dot: 'ClockCircleOutlined',
    label: '2023-4æœˆâ€”â€”è‡³ä»Š',
}
]}}` },
        mode: { value: 'left' },
        reverse: { value: false },
        pending: { value: 'ä»�åœ¨ä¸�æ–­å®Œå–„' },
      },
      events: [],
      styles: {
        color: { value: '#b3b3b3' },
        bgcolor: { value: '#ffffff' },
        titleColor: { value: '#000000' },
        subTitleColor: { value: '#8a8c8f' },
        visibility: { value: '{{true}}' },
        disabledState: { value: '{{false}}' },
        borderRadius: { value: 5 },
      },
    },
  },
];