问题

流程表单设计器左侧「系统字段」（用户选择器、部门选择器、字典选择器、接口选择器）的源码是 RuoYi Office 自己的，还是 FormCreate 官方的？如果要改这些组件，应该去哪个目录？

答案

设计器壳子来自第三方 FormCreate（@form-create/ant-design-vue + 工作区内的 fc-designer-pro）；截图红框里的 「系统字段」四类选择器是 RuoYi Office 二开注册的业务组件，源码在 PC 前端 ruoyi-office-vben/apps/web-antd/src/components/form-create/，由 useFormCreateDesigner() 注入设计器菜单。

详细说明

1. 三层分工

层级	是什么	源码 / 包位置	能否改业务逻辑
表单渲染引擎	@form-create/ant-design-vue	npm 依赖	否（按文档扩展）
可视化设计器	fc-designer-pro（FcDesigner Pro 商业版）	ruoyi-office-vben/packages/fc-designer-pro/dist/	仅 dist，无可改 Vue 源码
RuoYi Office 增强	系统字段、上传、富文本、地区选择等	apps/web-antd/src/components/form-create/	是，改这里

2. 「系统字段」菜单从哪来

useFormCreateDesigner(designerRef) 在挂载后执行 buildSystemMenu()，向 FcDesigner 追加名为 system、标题为「系统字段」的左侧菜单，并注册四个组件规则：

设计器显示名	组件 type	说明
用户选择器	UserSelect	基于 use-api-select.tsx，默认接口 /system/user/simple-list
部门选择器	DeptSelect	dept-select.vue，树形选部门
字典选择器	DictSelect	dict-select.vue + rules/use-dict-select.ts
接口选择器	ApiSelect	use-api-select.tsx，可配远程 URL 与字段映射

除系统字段外，同一 hook 还会在「基础组件」区替换/追加：富文本、文件/图片上传、Iframe、地区选择等（见 buildFormComponents()）。

3. 关键源码路径（web-antd 主应用）

设计器增强与菜单

ruoyi-office-vben/apps/web-antd/src/components/form-create/helpers.ts
  └── useFormCreateDesigner()  → buildSystemMenu() / buildFormComponents()

运行态组件

ruoyi-office-vben/apps/web-antd/src/components/form-create/
├── components/
│   ├── use-api-select.tsx    # UserSelect、ApiSelect
│   ├── dept-select.vue       # DeptSelect
│   └── dict-select.vue       # DictSelect
├── rules/
│   └── use-dict-select.ts      # 字典选择器设计器右侧属性规则
├── typing.ts
└── index.ts

全局注册（Vue 组件 + formCreate + FcDesigner）

ruoyi-office-vben/apps/web-antd/src/plugins/form-create/index.ts

流程表单设计页（截图对应页面）

ruoyi-office-vben/apps/web-antd/src/views/bpm/form/designer/index.vue
  └── <FcDesigner> + useFormCreateDesigner(designerRef)

其它使用同一增强的页面

ruoyi-office-vben/apps/web-antd/src/views/infra/build/index.vue

FormCreate 设计器本体（第三方，仅产物）

ruoyi-office-vben/packages/fc-designer-pro/   # dist + types，description 注明「仅含编译产物」

4. 其它端与后端

端	路径	说明
Element Plus 版 PC	apps/web-ele/src/components/form-create/	结构与 web-antd 类似
移动端 UniApp	ruoyi-office-uniapp/src/components/dynamic-form/	component-map.ts 映射 UserSelect 等运行态渲染
后端 BPM	ruoyi-office/yudao-module-bpm/	存表单 JSON、流程变量；无设计器 UI 源码

5. 常见改动指引

需求	建议修改位置
增删「系统字段」菜单项	helpers.ts → buildSystemMenu()
改用户/接口下拉数据源	plugins/form-create/index.ts（UserSelect 的 url）或 use-api-select.tsx
改部门树、返回值 id/name	dept-select.vue、helpers.ts 中 deptSelectRule 的 props
改字典类型、多选等设计器属性	rules/use-dict-select.ts、dict-select.vue
改设计器页面布局/保存逻辑	views/bpm/form/designer/index.vue

不要到 FormCreate 官方仓库找「系统字段」——该分组为项目内 addMenu 注入，不在 fc-designer-pro 默认菜单中。

涉及代码 / 配置

• 注册示例：plugins/form-create/index.ts 中 UserSelect、DeptSelect、DictSelect、ApiSelect 与 app.use(FcDesigner)
• 菜单注入：helpers.ts 约 buildSystemMenu()、onMounted 调用链

相关链接

• 表单设计器使用说明
• 流程分支按部门取值（deptId / companyId）（流程变量与 form-create 条件规则可配合使用）

修订记录

日期	修改
2026-05-28	初稿：FormCreate 与 RuoYi Office 二开边界、系统字段源码路径