不考虑接入designable吗？

[nocobase]

不考虑接入designable吗？

[chenos]

从 Uform 就关注了，Formily 的设计很棒，尤其 V2，最近几个月也基于 Formily V2 将整个客户端重构了（还在进行中），实现了页面级别的可视化配置。虽然 Formily 更侧重于表单场景，但基于 Formily Schema 协议，将组件扩展到页面级别，目前看起来没有太大问题。不过在如何无侵入并高效的实时修改 JSON Schema 上还需要继续探索。考虑过 designable 方案，但是在 designable 模式下，表单并不能正常工作。因为 NocoBase 希望用户可以在配置的同时也可以填写数据，所以官方的 designable 方案并不适合。
​
另辟蹊径，NocoBase 设想了一种感觉还不错的配置方案，协议层面给 Schema 扩展了 x-designable-bar 和 x-designbar-bar-props 支持，所有组件都可以有自己的 DesignableBar（配置工具栏），比如：

const Hello = () => <div>Hello Word</div>;

Hello.DesignableBar = () => <div>自定义配置工具栏</div>;

const schema = {
  type: 'void',
  'x-component': 'Hello',
  'x-decorator': 'CardItem',
  'x-designable-bar': 'Hello.DesignableBar',
  'x-designbar-bar-props': {},
};

NocoBase 的场景里，表单字段的 JSON Schema

const schema = {
  type: 'string',
  'x-component': 'Input',
  'x-decorator': 'FormItem',
  'x-designable-bar': 'Form.Field.DesignableBar',
};

表单项的配置工具栏 Form.Field.DesignableBar 的效果

表格的 JSON Schema

const schema = {
  type: 'array',
  'x-component': 'Table',
  'x-decorator': 'CardItem',
  'x-designable-bar': 'Table.DesignableBar',
};

表格配置工具栏 Table.DesignableBar 的效果

菜单项的 JSON Schema：

const schema = {
  type: 'array',
  'x-component': 'Menu.Item',
  'x-designable-bar': 'Menu.Item.DesignableBar',
};

菜单项配置工具栏 Menu.Item.DesignableBar 的效果

如果某个组件节点并不需要，也可以不配置。
​
理想化 x-designable-bar 应该是无侵入的，也有自己的 x-designable-bar-props，目前的实现还不是很理想，暂时把 DesignableBar 的渲染放在了 Decorator 里，这样就需要有对应的 Decorator 配合，或者侵入组件内部才能达到效果。
​
为了配置 x-designable-bar 协议，@nocobase/client 实现了三类 Decorator：
​

• BlockItem：区块项，无任何样式效果
• CardItem：卡片项，卡片效果
• FormItem：表单项，Form.Item 效果

NocoBase 会继续探索并完善这种工具栏式的配置交互逻辑，而 @designable/core 会以插件的方式集成进来，作为配置工具栏的一个选项。打开一个新的面板用于配置当前节点下的详细的 JSON Schema。
​
适配 @designable/core 就要等核心组件完善之后了，适配 @designable/core 也需要一些时间，短时间内估计很难提供，最理想的状态是等后续配置工具栏的插件化接口设计好之后，大家一起来完善。

[janryWang]

哈哈，思路挺好的，适合无代码这个目标