如何能够简化右侧面板属性配置？

[XiaoRIGE]

实现场景：

希望只使用部分组件、以及部分组件的少部分配置信息

存在的问题：

无法过滤组件和配置信息

当前方案：

<template>
  <div style="height: 100%">
    <AmisEditor
      id="editorName"
      theme="antd"
      className="test-amis-editor"
      :preview="previewModel"
      :isMobile="mobileModel"
      :value="schema"
      :onChange="editorChanged"
    />
  </div>
</template>

<script setup>
  // 引入一些样式依赖
  import 'amis-ui/lib/themes/default.css';
  import 'amis-ui/lib/themes/antd.css';
  import 'amis-editor-core/lib/style.css';

  import { applyReactInVue } from 'veaury';

  import { Editor } from 'amis-editor'; //引入编辑器

  import { ref, reactive } from 'vue';

  // eslint-disable-next-line vue/no-export-in-script-setup
  // class MyRendererPlugin extends BasePlugin {
  //   // 这里要跟对应的渲染器名字对应上
  //   // 注册渲染器的时候会要求指定渲染器名字
  //   rendererName = 'editorName';

  //   // 暂时只支持这个，配置后会开启代码编辑器
  //   $schema = '/schemas/UnkownSchema.json';

  //   // 用来配置名称和描述
  //   name = '自定义渲染器';
  //   description = '这只是个示例12313';

  //   // tag，决定会在哪个 tab 下面显示的
  //   tags = ['自定义', '表单项'];

  //   // 图标
  //   icon = 'fa fa-user';

  //   // 用来生成预览图的
  //   previewSchema = {
  //     type: 'my-renderer',
  //     target: 'demo',
  //   };

  //   // 拖入组件里面时的初始数据
  //   scaffold = {
  //     type: 'my-renderer',
  //     target: '233',
  //   };

  //   // 右侧面板相关
  //   panelTitle = '自定义组件';
  //   panelBody = [
  //     {
  //       type: 'tabs',
  //       tabsMode: 'line',
  //       className: 'm-t-n-xs',
  //       contentClassName: 'no-border p-l-none p-r-none',
  //       tabs: [
  //         {
  //           title: '常规',
  //           body: [
  //             {
  //               name: 'target',
  //               label: 'Target',
  //               type: 'input-text',
  //             },
  //           ],
  //         },

  //         {
  //           title: '外观',
  //           body: [],
  //         },
  //       ],
  //     },
  //   ];
  // }

  // registerEditorPlugin(MyRendererPlugin);

  // import textData from "./textJson";
  const AmisEditor = applyReactInVue(Editor); //使用编辑器

  const previewModel = ref(false); //是否预览,实际开发中，如果需要编辑和预览，可以写一个change事件来改变这个值的状态
  const mobileModel = ref(false); //是否是手机模式

  const schema = reactive({
    type: 'page',
    data: {
      list: [1, 2, 3],
    },
    body: [
      {
        type: 'button-toolbar',
        className: 'm-b',
        buttons: [
          {
            name: 'trigger1',
            id: 'trigger1',
            type: 'action',
            label: '设置表格第一项选中',
            className: 'ml-2',
            onEvent: {
              click: {
                actions: [
                  {
                    actionType: 'select',
                    componentId: 'table-select',
                    description: '点击设置指定表格第一项内容选中',
                    args: {
                      selected: '${list.includes(record.id)}',
                    },
                  },
                ],
              },
            },
          },
        ],
      },
      {
        type: 'service',
        api: '/amis/api/mock2/sample?perPage=10',
        body: [
          {
            id: 'table-select',
            type: 'table2',
            source: '$rows',
            selectable: true,
            multiple: true,
            columns: [
              {
                name: 'id',
                label: 'ID',
              },
              {
                name: 'browser',
                label: 'Browser',
              },
              {
                name: 'version',
                label: 'Version',
              },
            ],
          },
        ],
      },
    ],
  }); //渲染表单的内容

  const editorChanged = value => {
    //编辑器内容变化后触发的方法
    console.log('编辑器内容变化了。。。。', value);
    //todo  如果需要将数据保存，在这里可以操作
  };
</script>

<style scoped>
  :deep(.test-amis-editor) {
    height: 100% !important;
    overflow-y: auto;
  }
</style>

[github-actions]

👍 Thanks for this!
🏷 I have applied any labels matching special text in your issue.

Please review the labels and make any necessary changes.