FcDesigner Pro

Appearance

通过 extension 扩展设计器与渲染器 ​

想给设计器加自己的组件、菜单、公式，又不想把代码改得到处都是？请优先改 src/extension/ 这两个文件。

改这里的好处：

  • 自定义代码集中在一处，好找、好维护
  • 以后升级官方源码时，冲突更少
  • 打包时会自动带上你的扩展

两种扩展方式，别搞混

方式你改哪里适合谁
不改设计器源码自己的业务项目里调用 FcDesigner.addMenu 等方法只是用设计器，不重新打包
改源码再打包本仓库的 src/extension/要把能力打进设计器安装包

本文讲的是第二种。

开始前你需要知道 ​

  • 版本：FcDesigner Pro v6.x（Vue3）
  • 如果你用的是只有 PC 的包，文中移动端相关配置可以忽略
  • 先大致知道：左侧拖出来的组件，靠一份「拖拽规则」描述；真正显示出来的是 Vue 组件

看不懂也没关系，下面有完整可抄示例。

一句话搞懂：你要改哪两个文件？ ​

文件干什么用
src/extension/index.js放「真正用来填表的组件」（电脑端、手机端），以及给表单渲染器加能力
src/extension/setting.js放「设计时画布上怎么显示」，以及给设计器加菜单、拖拽规则、公式等

关系可以记成：

text
setting.js（管设计器）
   └─ 引用 index.js（管表单组件）
         └─ 打包时自动加载

四个「挂组件」的位置，分别干什么？ ​

很多人第一次会懵：为什么有好几个地方都能挂组件？其实只是「场景不同」：

写在哪里字段名作用说明
index.jscomponents电脑端填表时用的组件（默认实现）
index.jsmobileComponents手机端填表时用的组件（用同名替换上面那个）
setting.jscomponentViews仅设计画布上显示的样子（可选）
setting.jsmobileComponentViews手机设计画布上显示的样子（可选）

什么时候才需要 View？

  • 设计时只想显示一个简单占位，真正填表才用完整组件 → 才需要 View
  • 设计时和填表时看起来一样 → 不用写 View，只写 components（手机再加 mobileComponents）即可

另外两个函数：

函数作用说明常见用法
updateFormCreate给「表单怎么渲染」加能力注册自定义属性等
updateDesigner给「设计器本身」加能力addDragRule 加可拖组件、addMenu 加菜单、setFormula 加公式

跟着做：挂一个业务组件 ​

假设你已经按添加新组件写好了这些文件：

  • src/components/UserSelect.vue（电脑端）
  • src/components/mobile/UserSelect.vue（手机端，没有手机需求可先不做）
  • src/config/rule/userSelect.js（拖拽规则，name 建议写成 UserSelect）

第 1 步：改 extension/index.js ​

js
// src/extension/index.js
import UserSelect from '../components/UserSelect.vue';
import MUserSelect from '../components/mobile/UserSelect.vue';

export default {
    // 电脑端填表组件
    components: {
        UserSelect,
    },
    // 手机端填表组件（名字必须和上面一样，才会替换成功）
    mobileComponents: {
        UserSelect: MUserSelect,
    },
    // 一般先留空即可
    updateFormCreate(formCreate) {
        // 以后要给渲染器加能力，写在这里
    },
};

没有手机端时，可以先不写 mobileComponents。

第 2 步：改 extension/setting.js ​

js
// src/extension/setting.js
import extend from './index';
import userSelectRule from '../config/rule/userSelect';

export default {
    // 必须带上，设计器才会加载 index.js 里的组件
    extend,

    // 设计画布和填表长得一样时，这两个保持空对象即可
    componentViews: {},
    mobileComponentViews: {},

    updateDesigner(FcDesigner) {
        // 让左侧菜单能拖出这个组件（最重要）
        FcDesigner.addDragRule(userSelectRule);

        // 可选：加菜单分组
        // FcDesigner.addMenu({ name: 'biz', title: '业务组件', list: [] });

        // 可选：加公式、动作，见「源码扩展公式与行为」
        // FcDesigner.setFormula([...]);
        // FcDesigner.setBehavior([...]);
    },
};

第 3 步：启动看看 ​

bash
pnpm run dev

然后检查：

  1. 左侧能不能看到并拖出组件
  2. 画布上能不能正常显示
  3. 点预览后能不能正常填写
  4. 如果有手机端，切换手机预览再看一眼

注意

extension 只负责「挂上去」。
组件怎么写、拖拽规则怎么写，仍要看添加新组件；手机端细节看自定义组件移动端适配。

常见问题排查 ​

1. 预览有组件，设计画布没有 ​

可能原因：

  • 组件注册名 和 拖拽规则里的 name 不一致
  • 设计时要用另一套显示，但没配置 componentViews

处理：让「注册名」和规则里的名字保持一致；需要时再补 View。

2. 手机上还是电脑端的样子 ​

可能原因：没配 mobileComponents，或两边名字不一样（例如一边叫 UserSelect，一边叫 userSelect）。

处理：两边用完全相同的名字。

3. 写了 addDragRule，左侧还是没有 ​

可能原因：

  • 写错地方了（应写在 updateDesigner，不是 updateFormCreate）
  • 拖拽规则里的 menu（属于哪个分组）写错了，或分组不存在

处理：对照 src/config/menu.js 检查分组名。

4. 单独打包的「渲染器」里没有我的组件 ​

可能原因：组件只挂到了设计器，没有写进 extension/index.js 的 components。

处理：填表用的组件一定要放进 components（手机再放 mobileComponents）。

小提示 ​

  • 以前写在 src/index.js 里的 addMenu / addDragRule，建议慢慢挪到 extension/setting.js
  • 只是换「怎么注册」，一般不会影响已经保存的表单 JSON
  • 纯 PC 包没有手机相关对象，手机字段留空即可

相关文档 ​